From d76981975476c561e3164f53d48eea305dd9756a Mon Sep 17 00:00:00 2001
From: Stas Medvedev <medvedevsa97@gmail.com>
Date: Thu, 13 Jun 2024 02:39:09 +0300
Subject: =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20=D1=84=D1=80?=
 =?UTF-8?q?=D0=BE=D0=BD=D1=82=D0=B0,=20=D0=BD=D0=BE=D0=B2=D0=B0=D1=8F=20?=
 =?UTF-8?q?=D1=86=D0=B2=D0=B5=D1=82=D0=BE=D0=B2=D0=B0=D1=8F=20=D1=81=D1=85?=
 =?UTF-8?q?=D0=B5=D0=BC=D0=B0=20(=D1=81=D0=B8=D0=BD=D0=B8=D0=B9,=20=D1=81?=
 =?UTF-8?q?=D0=B5=D1=80=D1=8B=D0=B9)=20countdown=20executeCode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/style.css                      | 123 +++++++++++++++++++++++++++++-----
 tailwind.config.js                    |   4 +-
 templates/index.html                  |  21 ++++--
 templates/partials/about.html         |   4 +-
 templates/partials/avatars.html       |   2 +-
 templates/partials/code/index.html    |  67 ++++++++++++++++++
 templates/partials/code/textarea.html |  34 ++++++++++
 templates/style.css                   |  12 +++-
 8 files changed, 239 insertions(+), 28 deletions(-)
 create mode 100644 templates/partials/code/index.html
 create mode 100644 templates/partials/code/textarea.html

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;
-- 
cgit v1.2.3