From 11808fa87e1dccba6a463596a3c728c685e1e3bd Mon Sep 17 00:00:00 2001
From: Norman Bos <norman.bos@gmx.de>
Date: Sun, 21 Jul 2024 16:09:31 +0200
Subject: [PATCH] move all css inside html

---
 sd-card/Index.html | 167 ++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 144 insertions(+), 23 deletions(-)
diff --git a/sd-card/Index.html b/sd-card/Index.html
index 8b71a48..278a76f 100644
--- a/sd-card/Index.html
+++ b/sd-card/Index.html
@@ -8,8 +8,146 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
+    <!-- <link rel="stylesheet" href="style.css" /> -->
+    <style>
+      :root {
+        --main-bg-color: #212121;
+      }
 
-    <link rel="stylesheet" href="style.css" />
+      body {
+        background-color: var(--main-bg-color);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-family: Verdana, Geneva, Tahoma, sans-serif;
+      }
+      h2 {
+        color: white;
+      }
+      p {
+        color: white;
+      }
+
+      textarea {
+        width: 100%;
+        height: 150px;
+        padding: 12px 20px;
+        box-sizing: border-box;
+        border: 2px solid #ccc;
+        border-radius: 4px;
+        background-color: #f8f8f8;
+        font-size: 16px;
+        resize: none;
+      }
+
+      button {
+        background-color: #454545;
+        border: none;
+        border-radius: 4px;
+        color: white;
+        text-align: center;
+        text-decoration: none;
+        display: inline-flex;
+        font-size: 16px;
+        cursor: pointer;
+        justify-content: center;
+        align-items: center;
+        box-shadow: 2px 2px black;
+        height: 42px;
+        width: 48px;
+      }
+
+      button:active {
+        -webkit-box-shadow: inset 0px 0px 2px black;
+        -moz-box-shadow: inset 0px 0px 2px black;
+        box-shadow: inset 0px 0px 2px black;
+        outline: none;
+      }
+
+      .text-white {
+        color: white;
+      }
+      .text-orange {
+        color: orange;
+      }
+
+      .text-with-line {
+        text-transform: uppercase;
+        display: flex;
+        flex-direction: row;
+      }
+
+      .text-with-line:before,
+      .text-with-line:after {
+        content: "";
+        flex: 1 1;
+        border-bottom: 2px solid currentColor;
+        margin: auto 5px;
+      }
+
+      .smallbutton {
+        height: 28px;
+        width: 56px;
+        background-color: #8a8a8a;
+        font-size: 12px;
+      }
+
+      .roundbutton {
+        border-radius: 50%;
+        width: 26px;
+        height: 26px;
+      }
+
+      .upper-buttonbox {
+        margin-top: 8px;
+        margin-bottom: 8px;
+        border-radius: 8px;
+        background-color: #4d4d4d;
+        padding: 8px;
+        display: flex;
+        gap: 12px;
+        border: 2px solid grey;
+        border-bottom-color: black;
+        border-right-color: black;
+      }
+
+      .lower-buttonbox {
+        margin-top: 8px;
+        margin-bottom: 8px;
+        border-radius: 8px;
+        background-color: #333333;
+        padding: 8px;
+        display: flex;
+        gap: 12px;
+        border: 2px solid grey;
+        border-bottom-color: black;
+        border-right-color: black;
+      }
+
+      .textinput-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        margin-top: 8px;
+        margin-bottom: 8px;
+        color: white;
+      }
+
+      .textinput {
+        width: 100%;
+        padding: 12px 20px;
+        box-sizing: border-box;
+        border: 2px solid #ccc;
+        border-radius: 4px;
+        background-color: #f8f8f8;
+        font-size: 16px;
+        resize: none;
+      }
+
+      .headline {
+        text-align: center;
+      }
+    </style>
   </head>
 
   <body>
@@ -17,7 +155,6 @@
       <h2 class="headline">SONY RM-D27M Remote</h2>
       <span class="text-white text-with-line">LED Test Mode</span>
       <div class="upper-buttonbox">
-      
         <form action="/api/control-led" method="post">
           <button name="led" type="submit" value="1" class="smallbutton">
             LED on
@@ -28,7 +165,6 @@
         </form>
       </div>
 
-      
       <span class="text-orange text-with-line">Title Editing</span>
       <form action="/api/gettext" method="post" class="textinput-wrapper">
         <textarea name="text_box" rows="4" cols="50"></textarea>
@@ -38,11 +174,11 @@
       <section>
         <form action="/api/gettextinput" method="get" class="textinput-wrapper">
           <label for="text_input">Change Title</label>
-          <input type="text" name="text_input" class="textinput"/>
+          <input type="text" name="text_input" class="textinput" />
           <button type="submit">Submit</button>
         </form>
       </section>
-      
+
       <div class="upper-buttonbox">
         <form action="/api/control-deck" method="post">
           <button
@@ -53,12 +189,7 @@
           >
             power
           </button>
-          <button
-            name="control"
-            type="submit"
-            value="play"
-            class="smallbutton"
-          >
+          <button name="control" type="submit" value="play" class="smallbutton">
             play
           </button>
           <button
@@ -69,20 +200,10 @@
           >
             pause
           </button>
-          <button
-            name="control"
-            type="submit"
-            value="stop"
-            class="smallbutton"
-          >
+          <button name="control" type="submit" value="stop" class="smallbutton">
             stop
           </button>
-          <button
-            name="control"
-            type="submit"
-            value="next"
-            class="smallbutton"
-          >
+          <button name="control" type="submit" value="next" class="smallbutton">
             next
           </button>
           <button class="roundbutton"></button>
