From 9361bd333f165bed648a4e12a0f9f554b2a62066 Mon Sep 17 00:00:00 2001
From: Stefan Ostermann <stefan@ostermail.de>
Date: Sun, 27 Jul 2025 12:59:57 +0200
Subject: [PATCH] consistent styling

---
 web/index.html | 21 +++++++++++---------
 web/style.css  | 54 +++++---------------------------------------------
 2 files changed, 17 insertions(+), 58 deletions(-)

diff --git a/web/index.html b/web/index.html
index 3ad48dc..72e1079 100644
--- a/web/index.html
+++ b/web/index.html
@@ -42,15 +42,15 @@
 
 
 
-    <button id="toggleFileManagerButton" onclick="toggleFileManager()">Toggle File Manager</button>
+    <button id="toggleFileManagerButton" class="action-btn" onclick="toggleFileManager()">Toggle File Manager</button>
 
     <div id="fileManager" style="display:none; margin-top:20px;">
       <h2>File Manager</h2>
 
-      <h2>Upload File</h2>
-      <form id="uploadForm" method="POST" action="/upload" enctype="multipart/form-data">
+      <h3>Upload File</h3>
+      <form id="uploadForm" class="form" method="POST" action="/upload" enctype="multipart/form-data">
       <input type="file" name="data" id="uploadFile" accept=".mp3,.wav,.flac,.m4a,.ogg"/>
-      <input type="submit" name="upload" value="Upload" title="Upload Audio File" id="uploadButton"/>
+      <input type="submit" name="upload" value="Upload" title="Upload Audio File" id="uploadButton" class="action-btn"/>
       <div id="uploadStatus"></div>
       <div id="uploadProgress" style="display: none;">
         <div class="progress-bar">
@@ -61,25 +61,28 @@
     </form>
 
     <h3>Edit RFID Mapping</h3>
-    <form id="editMappingForm">
+    <form id="editMappingForm" class="form">
       <label for="rfid">RFID:</label>
       <input type="text" id="rfid" name="rfid" required><br>
       <label for="song">Song:</label>
       <input type="text" id="song" name="song" required><br>
-      <button type="button" onclick="editMapping()">Update Mapping</button>
+      <button type="button" class="action-btn" onclick="editMapping()">Update Mapping</button>
     </form>
 
       <h3>Move / Rename File</h3>
+      <form class="form">
       <label for="moveFrom">From:</label>
       <input type="text" id="moveFrom" placeholder="/oldname.mp3"/>
       <label for="moveTo">To:</label>
       <input type="text" id="moveTo" placeholder="/newname.mp3"/>
-      <button onclick="moveFile()">Move/Rename</button>
-
+      <button class="action-btn" onclick="moveFile()">Move/Rename</button>
+      </form>
+      <form class="form">
       <h3>Delete File</h3>
       <label for="deleteFile">Filename:</label>
       <input type="text" id="deleteFile" placeholder="/song.mp3"/>
-      <button onclick="deleteFile()">Delete</button>
+      <button class="action-btn" onclick="deleteFile()">Delete</button>
+      </form>
     </div>
 
    <script src="/script.js"></script>
diff --git a/web/style.css b/web/style.css
index c28ecc7..485eb80 100644
--- a/web/style.css
+++ b/web/style.css
@@ -126,33 +126,13 @@ li {
 }
 
 /* Form styling improvements */
-#uploadForm {
+.form {
     background-color: white;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     margin: 20px 0;
-}
-
-#uploadButton {
-    background-color: #007bff;
-    color: white;
-    border: none;
-    padding: 10px 20px;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 16px;
-    margin-left: 10px;
-    transition: background-color 0.3s ease;
-}
-
-#uploadButton:hover:not(:disabled) {
-    background-color: #0056b3;
-}
-
-#uploadButton:disabled {
-    background-color: #6c757d;
-    cursor: not-allowed;
+    text-align: left;
 }
 
 #uploadFile {
@@ -162,30 +142,6 @@ li {
     margin-right: 10px;
 }
 
-/* RFID mapping form styling */
-#editMappingForm {
-    background-color: white;
-    padding: 20px;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    margin: 20px 0;
-    text-align: left;
-}
-
-#editMappingForm label {
-    display: block;
-    margin: 10px 0 5px 0;
-    font-weight: bold;
-}
-
-#editMappingForm input[type="text"] {
-    width: 100%;
-    padding: 8px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    margin-bottom: 10px;
-    box-sizing: border-box;
-}
 
 
 /* ====== General mobile-friendly input & button styling ====== */
@@ -208,7 +164,7 @@ label {
     color: #333;
 }
 
-button {
+.action-btn {
     background-color: #007bff;
     color: #fff;
     border: none;
@@ -220,11 +176,11 @@ button {
     margin: 5px 0;
 }
 
-button:hover:not(:disabled) {
+.action-btn:hover:not(:disabled) {
     background-color: #0056b3;
 }
 
-button:disabled {
+.action-btn:disabled {
     background-color: #6c757d;
     cursor: not-allowed;
 }