added styles for website

3 files changed, 76 insertions, 9 deletions

diff --git a/website/index.html b/website/index.html
index 89c3538..7fdbf3b 100644
--- a/website/index.html
+++ b/website/index.html
@@ -4,12 +4,15 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="/main.js" defer></script>
-    <title>Apple comverter</title>
+    <link rel="stylesheet" href="style.css">
+    <title>Apple converter</title>
 </head>
 <body>
-    <h1>apple option key convertor</h1>
-    <textarea id="input" placeholder="Input Encrypt or Decrypt msg"></textarea>
-    <p id="output"></p>
-    <button id="copyBtn">copy result</button>
+    <h1>apple converter</h1>
+    <div class="textareaContainer">
+        <textarea id="input" placeholder="Input"></textarea>
+        <textarea id="output" placeholder="Translation" disabled></textarea>
+    </div>
+    <button id="copyBtn">copy</button>
 </body>
 </html
diff --git a/website/main.js b/website/main.js
index 184d2b3..9c9c456 100644
--- a/website/main.js
+++ b/website/main.js
@@ -94,7 +94,8 @@ MÂ
 <¯
 >˘
 ?¿
-  `.split("\n");
+  
+\n\n`.split("\n");
 
 function convert(input, mode) {
     input = input.split("");
@@ -136,8 +137,8 @@ function autoConvert() {
     window.requestAnimationFrame(autoConvert);
 }
 
-copyBtn.onclick = event => {
-    navigator.clipboard.writeText(output.innerText);
-}
+copyBtn.addEventListener("click", (event) => {
+    navigator.clipboard.writeText(output.value);
+});
 
 autoConvert();
\ No newline at end of file
diff --git a/website/style.css b/website/style.css
index e69de29..7b8b37a 100644
--- a/website/style.css
+++ b/website/style.css
@@ -0,0 +1,63 @@
+* {
+    margin: 0;
+    padding: 0;
+    font-family: "SF Pro Text", "Myriad Set Pro", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-weight: normal;
+    color: #A3A3A3;
+}
+
+h1 {
+    text-align: center;
+}
+
+body {
+    background: #181A1B;
+    padding: 10px;
+}
+
+.textareaContainer {
+    position: relative;
+    display: flex;
+    gap: 10px;
+    margin: 10px 0px;
+    height: 60vw;
+}
+
+textarea {
+    width: 100%;
+    border: none;
+    border-radius: 15px;
+    padding: 20px;
+    font-size: 20px;
+}
+
+textarea:focus {
+    outline: none;
+}
+
+#input {
+    resize: none;
+    background: #141414;
+    border: #181A1B 1px solid;
+}
+
+#output {
+    resize: none;
+    background: #1E2021;
+}
+
+#copyBtn {
+    background: #141414;
+    border: #181A1B 1px solid;
+    padding: 10px;
+    border-radius: 100em;
+    transition: all 0.3s;
+}
+
+#copyBtn:focus {
+    outline: none;
+}
+
+#copyBtn:hover {
+    background: #1E2021;
+}
\ No newline at end of file