diff options
| -rw-r--r-- | static/style.css | 123 | ||||
| -rw-r--r-- | tailwind.config.js | 4 | ||||
| -rw-r--r-- | templates/index.html | 21 | ||||
| -rw-r--r-- | templates/partials/about.html | 4 | ||||
| -rw-r--r-- | templates/partials/avatars.html | 2 | ||||
| -rw-r--r-- | templates/partials/code/index.html | 67 | ||||
| -rw-r--r-- | templates/partials/code/textarea.html | 34 | ||||
| -rw-r--r-- | templates/style.css | 12 |
8 files changed, 239 insertions, 28 deletions
diff --git a/static/style.css b/static/style.css index 500a6e4..d688eec 100644 --- a/static/style.css +++ b/static/style.css @@ -595,19 +595,20 @@ div { .text-interactive { --tw-text-opacity: 1; - color: rgb(20 184 166 / var(--tw-text-opacity)); + color: rgb(113 113 122 / var(--tw-text-opacity)); + text-decoration-line: underline; } .text-interactive:hover { --tw-text-opacity: 1; - color: rgb(192 38 211 / var(--tw-text-opacity)); + color: rgb(37 99 235 / var(--tw-text-opacity)); } .header { display: flex; width: 100%; --tw-bg-opacity: 1; - background-color: rgb(240 171 252 / var(--tw-bg-opacity)); + background-color: rgb(147 197 253 / var(--tw-bg-opacity)); padding: 0.5rem; } @@ -622,7 +623,9 @@ div { border-width: 4px; border-style: dashed; --tw-border-opacity: 1; - border-color: rgb(245 208 254 / var(--tw-border-opacity)); + border-color: rgb(191 219 254 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); padding: 0.5rem; } @@ -633,11 +636,11 @@ div { .about li a { text-decoration-line: underline; - text-decoration-color: #14b8a6; + text-decoration-color: #71717a; } .about li a:hover { - text-decoration-color: #e879f9; + text-decoration-color: #60a5fa; } .source-code-pro-500 { @@ -647,6 +650,16 @@ div { font-style: normal; } +.CodeMirror { + height: auto; + width: 100%; +} + +.CodeMirror-scroll { + height: auto; + max-height:500px; +} + .absolute { position: absolute; } @@ -681,6 +694,10 @@ div { display: block; } +.inline-block { + display: inline-block; +} + .flex { display: flex; } @@ -693,18 +710,14 @@ div { height: 6rem; } -.h-full { - height: 100%; +.min-h-16 { + min-height: 4rem; } .min-h-20 { min-height: 5rem; } -.min-h-16 { - min-height: 4rem; -} - .w-full { width: 100%; } @@ -743,6 +756,10 @@ div { align-items: center; } +.justify-between { + justify-content: space-between; +} + .justify-around { justify-content: space-around; } @@ -759,6 +776,14 @@ div { overflow-x: hidden; } +.text-nowrap { + text-wrap: nowrap; +} + +.rounded-md { + border-radius: 0.375rem; +} + .border-2 { border-width: 2px; } @@ -773,15 +798,35 @@ div { background-color: rgb(245 245 245 / var(--tw-bg-opacity)); } +.bg-primary-200 { + --tw-bg-opacity: 1; + background-color: rgb(191 219 254 / var(--tw-bg-opacity)); +} + +.bg-secondary-200 { + --tw-bg-opacity: 1; + background-color: rgb(228 228 231 / var(--tw-bg-opacity)); +} + .bg-stone-50 { --tw-bg-opacity: 1; background-color: rgb(250 250 249 / var(--tw-bg-opacity)); } +.bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + .p-2 { padding: 0.5rem; } +.px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + .text-center { text-align: center; } @@ -806,9 +851,24 @@ div { color: rgb(0 0 0 / var(--tw-text-opacity)); } +.text-gray-200 { + --tw-text-opacity: 1; + color: rgb(229 231 235 / var(--tw-text-opacity)); +} + +.text-neutral-400 { + --tw-text-opacity: 1; + color: rgb(163 163 163 / var(--tw-text-opacity)); +} + +.text-primary-600 { + --tw-text-opacity: 1; + color: rgb(37 99 235 / var(--tw-text-opacity)); +} + .text-secondary-400 { --tw-text-opacity: 1; - color: rgb(45 212 191 / var(--tw-text-opacity)); + color: rgb(161 161 170 / var(--tw-text-opacity)); } .underline { @@ -816,20 +876,44 @@ div { } .decoration-primary-300 { - text-decoration-color: #f0abfc; + text-decoration-color: #93c5fd; +} + +.decoration-secondary-600 { + text-decoration-color: #52525b; } .marker\:text-secondary-300 *::marker { - color: rgb(94 234 212 ); + color: rgb(212 212 216 ); } .marker\:text-secondary-300::marker { - color: rgb(94 234 212 ); + color: rgb(212 212 216 ); +} + +.hover\:bg-primary-300:hover { + --tw-bg-opacity: 1; + background-color: rgb(147 197 253 / var(--tw-bg-opacity)); +} + +.hover\:bg-secondary-300:hover { + --tw-bg-opacity: 1; + background-color: rgb(212 212 216 / var(--tw-bg-opacity)); +} + +.hover\:text-primary-800:hover { + --tw-text-opacity: 1; + color: rgb(30 64 175 / var(--tw-text-opacity)); } .hover\:text-secondary-300:hover { --tw-text-opacity: 1; - color: rgb(94 234 212 / var(--tw-text-opacity)); + color: rgb(212 212 216 / var(--tw-text-opacity)); +} + +.hover\:text-secondary-600:hover { + --tw-text-opacity: 1; + color: rgb(82 82 91 / var(--tw-text-opacity)); } .group:hover .group-hover\:inline-block { @@ -844,4 +928,9 @@ div { .md\:w-3\/4 { width: 75%; } + + .md\:w-min { + width: -moz-min-content; + width: min-content; + } } diff --git a/tailwind.config.js b/tailwind.config.js index c901e71..7c37183 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,8 +6,8 @@ module.exports = { content: ["./templates/**/*.{html,js}"], theme: { colors: { - primary: colors.fuchsia, - secondary: colors.teal, + primary: colors.blue, + secondary: colors.zinc, neutral: colors.gray, ...colors }, diff --git a/templates/index.html b/templates/index.html index 396c663..066ba9c 100644 --- a/templates/index.html +++ b/templates/index.html @@ -23,8 +23,14 @@ /> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> + <script src="https://unpkg.com/htmx.org@1.9.12" integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2" crossorigin="anonymous"></script> - <title>Document</title> + + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css"> + <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/python/python.min.js"></script> + + <title>Визитка: Стас Медведев</title> </head> <body class="w-screen overflow-x-hidden flex flex-col gap-4 items-center bg-stone-50 source-code-pro-500 p-2" @@ -34,11 +40,18 @@ <div class="flex flex-wrap w-full md:w-3/4 justify-around gap-4"> <div class="w-full md:w-1/3"> {% include 'partials/about.html' %} - {% include 'partials/palette.html' %} - {% include 'partials/services.html' %} + {% include 'partials/code/index.html' %} + </div> - <div class="w-full md:w-1/3"> + <div class="w-full md:w-1/3 flex flex-col gap-4 "> + <div class="about"> + <a href="https://t.me/yetsam_tg">Мой телеграм: + <span class="text-primary-600 hover:text-primary-800 underline">@yetsam_tg</span> + </a> + + </div> {% include 'partials/avatars.html' %} + {% include 'partials/services.html' %} </div> </div> diff --git a/templates/partials/about.html b/templates/partials/about.html index 238d895..affc786 100644 --- a/templates/partials/about.html +++ b/templates/partials/about.html @@ -3,7 +3,7 @@ <p> Я <a - class="text-interactive group" + class="text-interactive group inline-block" href="https://habr.com/ru/companies/ruvds/articles/488340/" > backend @@ -24,7 +24,7 @@ разработчик </p> <p> - В основном пишу на + Пишу на языке <a href="https://python.org" class="text-interactive">python</a> </p> <div diff --git a/templates/partials/avatars.html b/templates/partials/avatars.html index 4a5c05f..8c68f23 100644 --- a/templates/partials/avatars.html +++ b/templates/partials/avatars.html @@ -1,4 +1,4 @@ - <div class="swiper h-full"> + <div class="swiper"> <div class="swiper-wrapper select-none"> {% for url in avatar_urls %} <img src="{{url}}" alt="" class="swiper-slide"/> diff --git a/templates/partials/code/index.html b/templates/partials/code/index.html new file mode 100644 index 0000000..9b39e59 --- /dev/null +++ b/templates/partials/code/index.html @@ -0,0 +1,67 @@ +<div class="flex flex-col w-full"> + <div class="flex flex-wrap p-2"> + <p class="w-full md:w-min text-nowrap m-auto">Python 3.10 (sandbox)</p> + <a + href="https://cgit.yetsam.ru/yetsam.git" + class="text-neutral-400 underline hover:text-secondary-600 decoration-secondary-600 w-full md:w-min text-nowrap m-auto"> + go to source code (click me) + </a> + + </div> + + {% include 'partials/code/textarea.html' %} + + <div class="flex w-full justify-between p-2"> + <p class="underline" id="output"></p> + <button onclick="clearEditor()" class="bg-secondary-200 hover:bg-secondary-300 px-2 rounded-md ">Очистить</button> + <button onclick="executeCode()" class="bg-primary-200 hover:bg-primary-300 px-2 rounded-md"> + Выполнить + </button> + </div> + <div class="w-full bg-white min-h-20 border-2 p-2" id="code-result"> + <p class="text-gray-200">Нажмите "Выполнить"</p> + </div> +</div> + +<script> + function executeCode(){ + fetch('/restricted_exec',{ + method: "POST", + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + code: document.codeEditor.getValue() + }) + }) + .then(response => { + response.json() + .then(data => { + const div = document.getElementById('code-result') + div.replaceChildren([]) + data.forEach(line => { + const p = document.createElement('p') + p.innerHTML = line + div.appendChild(p) + }) + + }) + }) + } + function clearEditor(){ + document.codeEditor.getDoc().setValue('\n'.repeat(15)) + } + let countdown = 4 + function countdownTimer(){ + if (countdown > 0){ + countdown--; + document.getElementById('output').innerHTML = `Вывод: (${countdown})` + setTimeout(countdownTimer, 1000) + } else { + document.getElementById('output').innerHTML = `Вывод:` + executeCode() + } + } + countdownTimer() + +</script> diff --git a/templates/partials/code/textarea.html b/templates/partials/code/textarea.html new file mode 100644 index 0000000..a13ba69 --- /dev/null +++ b/templates/partials/code/textarea.html @@ -0,0 +1,34 @@ + +<textarea id="code" name="code" class="w-full"> +from base64 import b64decode +from datetime import datetime +from time import sleep + +# Внимание, пасхалка ! +# Выполни код что бы увидеть расшифрованное сообщение +b64message = '0K3RgtC+0YIg0LrQvtC0LCDQsdGL0Lsg0LLRi9C/0L7Qu9C90LXQvSwg0L3QsCDQsdC10LrQtdC90LTQtS4=' + +def decode_message(b64message: str): + sleep(.5) # Удали эту строку если жалко пол секунды + return b64decode(b64message.encode()).decode('utf-8') + +start_time = datetime.now() +print(f'Время начала: {start_time}') +print(decode_message(b64message)) +print(f'Время выполнения: {(datetime.now() - start_time)}') +</textarea> + +<script> + document.addEventListener("DOMContentLoaded", function () { + document.codeEditor = CodeMirror.fromTextArea(document.getElementById("code"), { + value: "blah", + lineNumbers: true, + mode: "python", + theme: "default", // Вы можете изменить тему на любую другую из доступных в CodeMirror + indentUnit: 4, + matchBrackets: true, + }); + document.codeEditor.setSize('100%','100%') + }); + +</script> diff --git a/templates/style.css b/templates/style.css index 4086c46..418dce1 100644 --- a/templates/style.css +++ b/templates/style.css @@ -33,13 +33,13 @@ div { @apply rounded-md; } .text-interactive { - @apply text-secondary-500 hover:text-fuchsia-600; + @apply underline text-secondary-500 hover:text-primary-600; } .header { @apply w-full md:w-2/3 bg-primary-300 flex p-2; } .about { - @apply border-4 border-fuchsia-200 border-dashed p-2 justify-items-center; + @apply border-4 border-primary-200 border-dashed p-2 justify-items-center bg-white; } .about p { @apply text-2xl; @@ -54,4 +54,12 @@ div { font-style: normal; } +.CodeMirror { + @apply w-full h-auto; +} +.CodeMirror-scroll { + height: auto; + max-height:500px; +} + @tailwind utilities; |