src/snek/static/back-form.css

@@ -1,18 +0,0 @@
-.back-form {
-  display: grid;
-  grid-template-columns: auto auto;
-  grid-template-rows: auto auto;
-
-  fancy-button {
-    grid-column: 1 / 1;
-    grid-row: 1 / 1;
-    z-index: 1;
-    margin-left: 30px;
-    margin-top: 30px;
-  }
-
-  generic-form {
-    grid-column: 1 / 3;
-    grid-row: 1 / 3;
-  }
-}

src/snek/static/base.css

@@ -111,17 +111,14 @@ a {
   height: 200px;
   background: #1a1a1a;
 }
-
 .container {
   flex: 1;
   padding: 10px;
-
   ul {
     list-style: none;
     margin: 0;
     padding: 0;
   }
-
   a {
         font-size: 20px;
         color: #f05a28;
@@ -164,26 +161,23 @@ a {
   color: #f05a28;
   margin-bottom: 3px;
 }
-
 * {
-  word-break: break-word;
+word-break: break-word;
   overflow-wrap: break-word;
     hyphens: auto;
 }
-
 .highlight pre {
     white-space: pre-wrap;
     word-break: break-word;
     overflow-wrap: break-word;
     hyphens: auto;
-}
+  }
-
 .chat-messages .message .message-content .text, .threads .thread .message-content .text {
   margin-bottom: 5px;
   color: #e6e6e6;
   word-break: break-word;
   overflow-wrap: break-word;
-  hyphens: auto;
+hyphens: auto; 
 }
 
 .message-content {
@@ -193,8 +187,7 @@ a {
 .message-content {
 
     img, video, iframe, div {
-    max-width: 90%;
+        max-width: 100%; 
-    border-radius: 20px;
     }
 }
 
@@ -261,7 +254,7 @@ input[type="text"], .chat-input textarea {
 }
 
 .message.switch-user {
-  .text img, iframe, video {
+  .text img,iframe, video {
     max-width: 90%;
     border-radius: 20px;
   }
@@ -276,15 +269,15 @@ input[type="text"], .chat-input textarea {
   }
 }
 
-.message:has(+ .message.switch-user), .message:last-child {
+.message:has(+ .message.switch-user), .message:last-child{ 
     .time {
   display: block;
-  }
+}
 }
 
 /* The entire scrollbar */
 ::-webkit-scrollbar {
-  display: none;
+    display:none;
 }
 
 ::-webkit-scrollbar-track {
@@ -307,9 +300,8 @@ input[type="text"], .chat-input textarea {
 }
 
 a {
-  text-decoration: none
+    text-decoration:none
 }
-
 .sidebar {
   width: 250px;
   background-color: #121212;

src/snek/static/generic-form.js

@@ -62,7 +62,7 @@ class GenericField extends HTMLElement {
 
   constructor() {
     super();
-    this.attachShadow({mode: 'open'});
+    this.attachShadow({ mode: 'open' });
     this.container = document.createElement('div');
     this.styleElement = document.createElement('style');
     this.styleElement.innerHTML = `
@@ -83,18 +83,6 @@ class GenericField extends HTMLElement {
           background-color: #1a1a1a;
           color: #e6e6e6;
           font-size: 1em;
-        
-        &:focus {
-          outline: 2px solid #f05a28 !important;
-        }
-        
-        &::placeholder {
-          transition: opacity 0.3s;
-        }
-        
-        &:focus::placeholder {
-          opacity: 0.4;
-        }
       }
 
       button {
@@ -177,26 +165,18 @@ class GenericField extends HTMLElement {
       const me = this;
       this.inputElement.addEventListener("keyup", (e) => {
         if (e.key === 'Enter') {
-          const event = new CustomEvent("change", {detail: me, bubbles: true});
-          me.dispatchEvent(event);
-
           me.dispatchEvent(new Event("submit"));
         } else if (me.field.value !== e.target.value) {
-          const event = new CustomEvent("change", {detail: me, bubbles: true});
+          const event = new CustomEvent("change", { detail: me, bubbles: true });
           me.dispatchEvent(event);
         }
       });
 
       this.inputElement.addEventListener("click", (e) => {
-        const event = new CustomEvent("click", {detail: me, bubbles: true});
+        const event = new CustomEvent("click", { detail: me, bubbles: true });
         me.dispatchEvent(event);
       });
 
-      this.inputElement.addEventListener("blur", (e) => {
-        const event = new CustomEvent("change", {detail: me, bubbles: true});
-        me.dispatchEvent(event);
-      }, true);
-
       this.container.appendChild(this.inputElement);
     }
 
@@ -246,7 +226,7 @@ class GenericForm extends HTMLElement {
 
   constructor() {
     super();
-    this.attachShadow({mode: 'open'});
+    this.attachShadow({ mode: 'open' });
     this.styleElement = document.createElement("style");
     this.styleElement.innerHTML = `
 
@@ -327,16 +307,6 @@ class GenericForm extends HTMLElement {
             }
           }
         });
-
-        fieldElement.addEventListener("submit", async (e) => {
-          const isValid = await this.validate();
-          if (isValid) {
-            const saveResult = await this.submit();
-            if (saveResult.redirect_url) {
-              window.location.pathname = saveResult.redirect_url;
-            }
-          }
-        })
       });
 
     } catch (error) {
@@ -352,7 +322,7 @@ class GenericForm extends HTMLElement {
       headers: {
         'Content-Type': 'application/json'
       },
-      body: JSON.stringify({"action": "validate", "form": this.form})
+      body: JSON.stringify({ "action": "validate", "form": this.form })
     });
 
     const form = await response.json();
@@ -383,7 +353,7 @@ class GenericForm extends HTMLElement {
       headers: {
         'Content-Type': 'application/json'
       },
-      body: JSON.stringify({"action": "submit", "form": this.form})
+      body: JSON.stringify({ "action": "submit", "form": this.form })
     });
     return await response.json();
   }

src/snek/templates/base.html

@@ -3,15 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="theme-color" content="#000000">
+  <title>{% block title %}{% endblock %}</title>
-    <meta name="application-name" content="Snek chat by Molodetz">
-    <meta name="description" content="Snek chat by Molodetz">
-    <meta name="author" content="Molodetz">
-    <meta name="keywords" content="snek, chat, molodetz">
-    <meta name="color-scheme" content="dark">
-
-    <title>{% block title %}Snek chat by Molodetz{% endblock %}</title>
-
   <script src="/app.js"></script>
   <script src="/message-list.js"></script>
   <style>{{ highlight_styles }}</style>
@@ -19,18 +11,16 @@
    <script src="/fancy-button.js"></script>
     <script src="/html-frame.js"></script>
     <script src="/generic-form.js"></script>
-    <link rel="stylesheet" href="/html-frame.css">
+    <link rel="stylesheet" href="/html-frame.css"></script>
   
-    {% block head %}
-    {% endblock %}
 </head>
 <body>
-<header>
+    <header>
         {% block header %}
         {% endblock %}
 
-</header>
+    </header>
-<main>
+    <main>
     {% block main %}
     {% endblock %}
 </main>

src/snek/templates/login.html

@@ -1,16 +1,7 @@
 {% extends "base.html" %}
 
-{% block title %}
-    Login - Snek chat by Molodetz
-{% endblock %}
-
-{% block head %}
-    <link rel="stylesheet" href="/back-form.css">
-{% endblock %}
-
 {% block main %}
-    <div class="back-form">
   <fancy-button url="/back" text="Back" size="auto"></fancy-button>
    <generic-form class="center" url="/login.json"></generic-form>
-    </div>
+
 {% endblock %}

src/snek/templates/register.html

@@ -1,17 +1,7 @@
 {% extends "base.html" %}
 
-{% block title %}
-    Register - Snek chat by Molodetz
-{% endblock %}
-
-{% block head %}
-    <link rel="stylesheet" href="/back-form.css">
-{% endblock %}
-
 {% block main %}
-    <div class="back-form">
+<fancy-button url="/back" text="Back" size="auto"></fancy-button>
-        <fancy-button url="/back" text="Back" size="auto"></fancy-button>
   
   <generic-form class="center" url="/register.json"></generic-form>
-    </div>
 {% endblock %}