From 8e479d31b3b1a362b9bad8dd51c285e9b9fc5799 Mon Sep 17 00:00:00 2001
From: remi <remilia@remilia.se>
Date: Fri, 27 May 2022 21:37:31 +0200
Subject: [PATCH] ok! it's pretty now~

---
 h2i.html | 120 ++++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 106 insertions(+), 14 deletions(-)
diff --git a/h2i.html b/h2i.html
index 6aad2a6..3c7a534 100644
--- a/h2i.html
+++ b/h2i.html
@@ -14,32 +14,95 @@
             /* nooo remi dont do that */
         }
 
+        :root {
+            --bg: #00000000;
+            --fg: #000000;
+        }
+
         body {
             font-family: Arial;
             overflow: hidden;
-            margin-right: 0;
-            margin-bottom: 0;
+            margin: 0;
+            color: var(--fg);
+            background-color: var(--bg);
+        }
+
+        input {
+            border-radius: 0;
+            border: 0;
+            background: transparent;
+            color: var(--fg);
         }
 
         #hinput {
             font-family: 'heonian';
+            width: 100%;
+            font-size: 24px;
+            padding: 8px;
+        }
+
+        #hinput::placeholder {
+            color: var(--fg);
+            opacity: 0.5;
         }
 
         canvas {
             width: 100%;
             height: 100%;
+            margin-left: 8px;
+        }
+
+        #heeheefunnyfloat {
+            max-width: 700px;
+            display: flex;
+            flex-flow: row wrap;
+            padding: 8px;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        span {
+            opacity: 0.5;
+        }
+
+        input:focus {
+            outline: 0px;
+        }
+
+        a {
+            color: var(--fg);
+            border: 0;
+            font-size: 12px;
+            opacity: 0.5;
+            cursor: pointer;
+        }
+
+        a:hover {
+            text-decoration: underline;
         }
     </style>
 </head>
 
 <body>
-    heonian: <input type="text" name="hinput" id="hinput"><br>
-    text color: <input type="text" name="tcolor" value="#000000"><br>
-    background color: <input type="text" name="bcolor" value="#00000000"><br>
-    font size: <input type="text" name="fsize" value="16"><br>
-    <button>save as image</button>
+    <input type="text" name="hinput" id="hinput" placeholder="heonian text goes here~"><br>
+    <div id="heeheefunnyfloat">
+        <div>
+            <span>text color:</span><br>
+            <input type="text" name="tcolor" value="#000000">
+        </div>
+        <div>
+            <span>background color:</span><br>
+            <input type="text" name="bcolor" value="#00000000">
 
-    <canvas width="800" height="800" id="c"></canvas>
+        </div>
+        <div>
+            <span>font size:</span><br>
+            <input type="text" name="fsize" value="24">
+        </div>
+        <a>[ save as image ]</a>
+    </div>
+
+    <canvas id="c"></canvas>
     <script src="/ime.js"></script>
     <script>
         let ctx = document.getElementById('c').getContext('2d');
@@ -48,13 +111,29 @@
         let bcolor = document.getElementsByName('bcolor')[0];
         let fsize = document.getElementsByName('fsize')[0];
 
+        //if darkmode
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            tcolor.value = '#ffffff';
+            bcolor.value = '#000000';
+            update();
+        }
+
         function update() {
             ctx.canvas.width = window.innerWidth;
             ctx.canvas.height = window.innerHeight;
-            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
-            ctx.fillStyle = bcolor.value;
-            ctx.fillRect(0, 0, ctx.canvas.height, ctx.canvas.height);
-            ctx.fillStyle = tcolor.value;
+            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+            if (validateColor(bcolor.value)) {
+                ctx.fillStyle = bcolor.value;
+                document.documentElement.style.setProperty('--bg', bcolor.value);
+                ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+            }
+
+            if (validateColor(tcolor.value)) {
+                ctx.fillStyle = tcolor.value;
+                document.documentElement.style.setProperty('--fg', tcolor.value);
+            }
+
             ctx.font = fsize.value + "px heonian";
             ctx.fillText(hinput.value, 0, fsize.value);
         }
@@ -101,11 +180,24 @@
             link.href = image;
             link.download = "heonian.png";
             link.innerHTML = "remi doing hacky solutions? NEVER";
-            link.click();            
+            link.click();
             update();
         }
 
-        document.querySelector("button").addEventListener("click", () => {saveAsImage();});
+        function validateColor(c) {
+            //also blatantly stolen from SO
+            var litmus = 'red';
+            var d = document.createElement('div');
+            d.style.color = litmus;
+            d.style.color = c;
+            //Element's style.color will be reverted to litmus or set to '' if an invalid color is given
+            if (c !== litmus && (d.style.color === litmus || d.style.color === '')) {
+                return false;
+            }
+            return true;
+        }
+
+        document.querySelector("a").addEventListener("click", () => { saveAsImage(); });
     </script>
 </body>
 
