From c1b8e59da6354a5d4e49487e4e1e815a78e187f5 Mon Sep 17 00:00:00 2001
From: TudbuT <tudbut@tudbut.de>
Date: Thu, 7 Jul 2022 14:13:51 +0200
Subject: [PATCH] improve example page

---
 index.html | 44 +++++++++++++++++++++-----------------------
 style.css  | 17 ++++++++++++++++-
 2 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/index.html b/index.html
index a4cae9b..6cdb2c7 100644
--- a/index.html
+++ b/index.html
@@ -11,32 +11,30 @@
         <br/>
         <br/>
 
-        <div class=content>
-            <h2>Get:</h2>
-            <form onsubmit="try{document.getElementById('value').value = data[document.getElementById('name').value].toString()}catch(e){} ; return false;">
-                <input type="text" id="name">=
-                <input readonly type="text" id="value">
-                <input type="submit" value="Get!">
-            </form>
+        <h2>Get:</h2>
+        <form onsubmit="try{document.getElementById('value').value = data[document.getElementById('name').value].toString()}catch(e){} ; return false;">
+            <input type="text" id="name"> =
+            <input readonly type="text" id="value">
+            <input class=button type="submit" value="Get!">
+        </form>
 
 
-            <h2>Server-side set:</h2>
-            <form method="post">
-                <input type="text" name="name">=
-                <input type="text" name="value">
-                <input type="submit" value="Set!">
-            </form>
+        <h2>Server-side set:</h2>
+        <form method="post">
+            <input type="text" name="name"> =
+            <input type="text" name="value">
+            <input class=button type="submit" value="Set!">
+        </form>
 
-            <h2>Client-side set:</h2>
-            <form onsubmit="try{data[document.getElementById('sname').value] = document.getElementById('svalue').value}catch(e){} ; return false;">
-                <input type="text" id="sname">=
-                <input type="text" id="svalue">
-                <input type="submit" value="Set!">
-                <button onclick="data.save()" type="button">Save!</button> 
-            </form>
+        <h2>Client-side set:</h2>
+        <form onsubmit="try{data[document.getElementById('sname').value] = document.getElementById('svalue').value}catch(e){} ; return false;">
+            <input type="text" id="sname"> =
+            <input type="text" id="svalue">
+            <input class=button type="submit" value="Set!">
+            <button onclick="data.save()" type="button">Save!</button> 
+        </form>
 
-            <h2>Your fingerprint</h2>
-            <div id="fingerprint"></div>
-        </div>
+        <h2>Your fingerprint</h2>
+        <div id="fingerprint"></div>
     </body>
 </html>
diff --git a/style.css b/style.css
index 46142b4..87a0328 100644
--- a/style.css
+++ b/style.css
@@ -2,9 +2,24 @@ center {
     text-align: center;
 }
 
-.content {
+body {
+    font-family: sans-serif;
+    background-color: #222828;
+    color: #cdd;
     margin: auto;
     display: block;
     max-width: 700px;
+    padding: 20px;
     word-wrap: break-word;
+    text-align: justify;
+}
+
+input,button {
+    background-color: #222828;
+    color: #cdd;
+    border: 2px dashed #cdd;
+}
+
+input.button,button {
+    border: 1px solid #cdd;
 }