Hamburger menu z obstoječimi opcijami (skrij tipkovnico in velike/male črke). #4

settings.json

@@ -1,11 +1,11 @@
-{
+{
-    "font_name": "Noto Sans Display",
+    "font_name": "Noto Sans",
-    "bg_color": "#000000",
+    "bg_color": "#000000",
-    "fg_color": "#FFFFFF",
+    "fg_color": "#FFFFFF",
-    "font_size": 36,
+    "font_size": 32,
-    "screen_width_percent": 60,
+    "screen_width_percent": 60,
-    "font_bold": false,
+    "font_bold": false,
-    "show_song_info": true,
+    "show_song_info": true,
-    "split_by_stanza": false,
+    "split_by_stanza": false,
-    "web_port": 5000
+    "web_port": 5000
-}
+}

web/static/script.js

@@ -12,6 +12,8 @@ const clearBtn = document.getElementById('clear-btn');
 const keypadButtons = document.querySelectorAll('.btn-key');
 const keypadWrapper = document.getElementById('keypad-wrapper');
 const toggleKeypadBtn = document.getElementById('toggle-keypad-btn');
+const menuToggle = document.getElementById('menu-toggle');
+const menuDropdown = document.getElementById('menu-dropdown');
 
 let capsMode = false;
 let wakeLock = null;
@@ -211,9 +213,27 @@ darkBtn.addEventListener('click', () => {
 
 // Skrij/Pokaži tipkovnico
 if (toggleKeypadBtn) {
-    toggleKeypadBtn.addEventListener('click', toggleKeypad);
+    toggleKeypadBtn.addEventListener('click', (e) => {
+        toggleKeypad();
+        menuDropdown.classList.remove('show');
+    });
 }
 
+// Hamburger menu toggle
+if (menuToggle) {
+    menuToggle.addEventListener('click', (e) => {
+        e.stopPropagation();
+        menuDropdown.classList.toggle('show');
+    });
+}
+
+// Zapri menu ob kliku drugam
+document.addEventListener('click', (e) => {
+    if (menuDropdown && !menuDropdown.contains(e.target) && e.target !== menuToggle) {
+        menuDropdown.classList.remove('show');
+    }
+});
+
 // fizična tipkovnica
 document.addEventListener('keydown', (e) => {
     // na telefonu ni potrebe; na velikih ekranih pa naj dela

web/static/styles.css

@@ -70,19 +70,88 @@ body {
     white-space: nowrap;
 }
 
-.toggle-keypad-btn {
+.menu-container {
-    display: none;
+    position: relative;
-    background-color: #333;
-    color: #fff;
-    border: none;
-    border-radius: 8px;
-    padding: 8px 12px;
-    font-size: 15px;
-    cursor: pointer;
 }
 
-.toggle-keypad-btn:hover {
+.menu-toggle {
-    filter: brightness(1.08);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.hamburger-icon {
+    position: relative;
+    width: 24px;
+    height: 2px;
+    background-color: #fff;
+    display: block;
+}
+
+.hamburger-icon::before,
+.hamburger-icon::after {
+    content: '';
+    position: absolute;
+    width: 24px;
+    height: 2px;
+    background-color: #fff;
+    left: 0;
+}
+
+.hamburger-icon::before {
+    top: -8px;
+}
+
+.hamburger-icon::after {
+    bottom: -8px;
+}
+
+.menu-dropdown {
+    display: none;
+    position: absolute;
+    top: 100%;
+    right: 0;
+    background-color: #222;
+    border: 1px solid #444;
+    border-radius: 8px;
+    min-width: 200px;
+    z-index: 1000;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+    overflow: hidden;
+}
+
+.menu-dropdown.show {
+    display: block;
+}
+
+.menu-item {
+    display: block;
+    width: 100%;
+    padding: 12px 16px;
+    background: transparent;
+    border: none;
+    color: #fff;
+    text-align: left;
+    font-size: 16px;
+    cursor: pointer;
+    border-bottom: 1px solid #333;
+}
+
+.menu-item:last-child {
+    border-bottom: none;
+}
+
+.menu-item:hover {
+    background-color: #333;
+}
+
+.menu-item.active {
+    background-color: #444;
+    font-weight: bold;
 }
 
 /* glavni prikaz besedila */
@@ -173,16 +242,9 @@ body {
     font-size: 20px;
 }
 
-/* AAaa */
+/* Placeholder for removed AAaa button */
-.btn-dark {
+.keypad-placeholder {
-    background-color: #8b4513;
+    visibility: hidden;
-    color: #ffffff;
-    font-size: 20px;
-}
-
-.btn-dark.active {
-    outline: 2px solid #ffffff;
-    outline-offset: -2px;
 }
 
 /* C */
@@ -209,8 +271,7 @@ body {
     .btn-action:hover,
     .btn-dark:hover,
     .btn-clear:hover,
-    .btn-enter:hover,
+    .btn-enter:hover {
-    .toggle-keypad-btn:hover {
         filter: brightness(1.08);
     }
 }
@@ -281,9 +342,6 @@ body {
 
 /* veliki ekrani */
 @media (min-width: 901px) {
-    .toggle-keypad-btn {
-        display: inline-block;
-    }
 
     .keypad {
         width: fit-content;

web/templates/index.html

@@ -14,7 +14,15 @@
 
     <div class="status-bar">
         <span id="page-info" class="page-info"></span>
-        <button id="toggle-keypad-btn" class="toggle-keypad-btn" type="button">Skrij tipkovnico</button>
+        <div class="menu-container">
+            <button id="menu-toggle" class="menu-toggle" type="button">
+                <span class="hamburger-icon"></span>
+            </button>
+            <div id="menu-dropdown" class="menu-dropdown">
+                <button id="toggle-keypad-btn" class="menu-item" type="button">Skrij tipkovnico</button>
+                <button id="dark-btn" class="menu-item" type="button">Velike/male črke (AAaa)</button>
+            </div>
+        </div>
     </div>
 
     <div class="content">
@@ -41,7 +49,7 @@
             <button class="btn-key" data-key="3">3</button>
             <button id="load-btn" class="btn-enter">Enter</button>
 
-            <button id="dark-btn" class="btn-dark">AAaa</button>
+            <div class="keypad-placeholder"></div>
             <button class="btn-key" data-key="0">0</button>
             <button id="clear-btn" class="btn-clear">C</button>