From 568eaa7b35fae9057e6e31bd4d3712db15923b37 Mon Sep 17 00:00:00 2001
From: ZhymabekRoman <robanokssamit@yandex.ru>
Date: Mon, 22 Jul 2024 11:40:45 +0500
Subject: [PATCH] template: refactor

---
 server/templates/error.html    |  2 +-
 server/templates/homepage.html |  9 ++-------
 server/templates/url_box.html  | 21 ++++++++-------------
 3 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/server/templates/error.html b/server/templates/error.html
index 7ba0140..a0a9305 100644
--- a/server/templates/error.html
+++ b/server/templates/error.html
@@ -10,7 +10,7 @@
             <p class="dark:text-gray-200 text-gray-700">We are aware of this error. Please try again later if this was an error on our part, we will fix it as soon as possible.</p>
         </div>
         <div class="flex items-center justify-center mt-28">
-            <p class="p-5 bg-black text-white" style="font-family: monospace;">Your emergency transponder code: {{ transponder_code }}</p>
+            <p class="p-5 bg-black text-white font-mono">Your emergency transponder code: {{ transponder_code }}</p>
         </div>
     </div>
 </div>
diff --git a/server/templates/homepage.html b/server/templates/homepage.html
index 7dec42d..a45e799 100644
--- a/server/templates/homepage.html
+++ b/server/templates/homepage.html
@@ -1,7 +1,7 @@
 <div class="p-2 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full">
     {% for post in post_list %}
         <div class="p-6 bg-white dark:bg-gray-600 rounded-xl">
-            <a class="group post_view" post_id="{{ post.post_id }}">
+            <a class="group" href="/{{ post.post_id }}">
                 <div class="max-h-60 min-h-60 m-auto overflow-hidden flex items-center justify-center">
                     {% if post.preview_image_id %}
                         <img data-src="https://miro.medium.com/v2/resize:fit:700/{{ post.preview_image_id }}"
@@ -37,12 +37,7 @@
             </div>
             <p class="mt-6 leading-normal line-clamp-3 text-gray-600 dark:text-gray-200">{{ post.description }}</p>
         </div>
-        <a post_id="{{ post.post_id }}" class="inline-block mt-6 text-purple-500 hover:text-purple-400 post_view">Read More</a>
+        <a href="/{{ post.post_id }}" class="inline-block mt-6 text-purple-500 hover:text-purple-400">Read More</a>
     </div>
 {% endfor %}
 </div>
-<script>
-        for (let post_a_el of document.getElementsByClassName("post_view")) {
-    post_a_el.href = `${window.location.origin}/${post_a_el.attributes["post_id"].value}`
-}
-</script>
diff --git a/server/templates/url_box.html b/server/templates/url_box.html
index ab6668c..fd8450a 100644
--- a/server/templates/url_box.html
+++ b/server/templates/url_box.html
@@ -1,24 +1,19 @@
 <div class="md:max-w-6xl bg-white dark:bg-gray-600 w-full shadow-md rounded-md p-8 mt-8">
-    <div class="flex items-center border rounded-md border-gray-300 px-4 py-2">
-        <svg class="h-5 w-5 text-gray-500 dark:text-gray-100 mr-2"
-             fill="none"
-             stroke="currentColor"
-             viewBox="0 0 24 24"
-             xmlns="http://www.w3.org/2000/svg">
+    <form id="medium-link-form" class="flex items-center border rounded-md border-gray-300 px-4 py-2">
+        <svg class="h-5 w-5 text-gray-500 dark:text-gray-100 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
         </svg>
         <input id="medium-link-input"
                type="text"
                placeholder="Enter Medium post link"
-               class="w-full focus:outline-none text-green-500 dark:bg-gray-600 border-gray-300"
-               onkeydown="if (event.keyCode == 13) document.getElementById('go-button').click()">
-        <button id="go-button" class="ml-2 bg-green-500 text-white px-4 py-2 rounded-md hover:bg-green-600 focus:outline-none">Go</button>
-    </div>
+               class="w-full focus:outline-none text-green-500 dark:bg-gray-600 border-gray-300">
+        <button type="submit" class="ml-2 bg-green-500 text-white px-4 py-2 rounded-md hover:bg-green-600 focus:outline-none">Go</button>
+    </form>
 </div>
 <script>
-const goButton = document.getElementById('go-button');
-
-goButton.addEventListener('click', function() {
+    document.getElementById('medium-link-form').addEventListener('submit', function (event) {
+        event.preventDefault();
         const mediumLinkInput = document.getElementById('medium-link-input');
         window.location.href = `${window.location.origin}/${mediumLinkInput.value}`;
 });