css

Vital-Vuillaume · Oct 5, 2024 · c0ecf0a · c0ecf0a
1 parent 2d2699e
commit c0ecf0a
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 5 deletions.
diff --git a/bg.png b/bg.png
diff --git a/index.html b/index.html
@@ -10,8 +10,24 @@
   </head>
 
   <body>
-    <textarea class="hash" placeholder="kee"></textarea>
-    <textarea class="txt" placeholder="msg"></textarea>
-    <textarea class="txtHash" placeholder="msg-hash"></textarea>
+    <div class="bg bloc">
+      <div class="double">
+        <p class="bg">Write the key you want...</p>
+        <textarea class="bg input hash" placeholder="kee"></textarea>
+      </div>
+      <div class="double">
+        <p class="bg">Write the message you want to encrypt...</p>
+        <textarea class="bg input txt" placeholder="msg"></textarea>
+      </div>
+      <div class="double">
+        <p class="bg">Write the message you want to decipher...</p>
+        <textarea class="bg input txtHash" placeholder="msg-hash"></textarea>
+      </div>
+
+      <div class="double">
+        <a class="bg footer" href="https://rmbi.ch/vital/donation">₿</a>
+        <a class="bg footer" href="https://github.com/Vital-Vuillaume">ⓒ 2024 - Vital production</a>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/msg-hash.css b/msg-hash.css
@@ -13,6 +13,107 @@ body {
 
     min-height: 100vh;
     color: white;
+    background-image: url(bg.png);
+    background-attachment: fixed;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-color: black;
+    font-size: 1.2em;
 
 }
 
+.bloc {
+
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+}
+
+.bg {
+
+    background-color: rgba(255, 255, 255, 0.25);
+    backdrop-filter: blur(15px);
+    max-width: max-content;
+    padding: 10px;
+    border-radius: 10px;
+    color: white;
+
+}
+
+.double {
+
+    display: flex;
+    justify-content:space-between;
+    gap: 30px;
+    margin: 20px;
+    align-items: center;
+
+}
+
+.input {
+
+    resize: none;
+    border: none;
+    height: 70px;
+    transition: 1.5s;
+
+}
+
+.input:focus {
+
+    outline: none;
+    box-shadow: inset 0 0 0 2px rgb(240, 242, 252);
+    background-color: rgba(99, 78, 174, 0.301);
+
+}
+
+.input:-moz-placeholder {
+
+    color: white;
+
+}
+
+.input::placeholder {
+
+    color: white;
+
+}
+
+.footer {
+
+    text-decoration: none;
+    font-size: 0.9em;
+
+}
+
+@media screen and (max-width: 750px) {
+
+    .bloc {
+
+        width: 90%;
+
+    }
+
+    .double {
+
+        flex-direction: column;
+
+    }
+
+    .double:last-child {
+
+        flex-direction: row;
+
+    }
+
+    .input {
+
+        height: 150px;
+        font-size: 1.5em;
+
+    }
+
+ }
diff --git a/msg-hash.js b/msg-hash.js
@@ -28,12 +28,12 @@ txt.addEventListener("input", function() {
   try {
     let encrypted = encryptDecrypt(txt.value, hashValue);
     txtHash.value = btoa(encrypted);
-  } catch (error) {}
+  } catch {}
 });
 
 txtHash.addEventListener("input", function() {
   try {
     let decrypted = atob(txtHash.value);
     txt.value = encryptDecrypt(decrypted, hashValue);
-  } catch (error) {}
+  } catch {}
 });