Dokumentasjon på startMonth/endMonth, og tema-velger som dukker opp m…

…ed mouseover (fjernet test-mode) (#3) * Theme chooser no longer requires test-mode. The selector now appears if you hover over the top right corner * Added doc on the startMonth/endMonth values. Changed doc on test-mode to 'manula select theme'
hoel · Nov 21, 2025 · 96ae291 · 96ae291
1 parent 0aa237c
commit 96ae291
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -8,21 +8,24 @@ En vakker nettbasert klokkeapplikasjon med analog og digital visning for flere n
 
 Applikasjonen bytter automatisk mellom temaer basert på dagens dato
 
-## Testmodus
+### Manuelt velge tema
+Om man holder musepekeren over øvre høyre hjørnet av skjermbildet vil en tema-velger dukke opp.
 
-Testmodus lar deg manuelt overstyre den automatiske temavelgeren og teste ulike temaer uten å vente på spesifikke datoer.
+![Temavelger](doc-testmode.png)
 
-![Test mode theme selector](doc-testmode.png)
 
-### Aktivere testmodus
+### Legge til nye temaer
 
-Legg til `?mode=test` i URL-en:
+Velg en dato for når temaet skal være aktivt. Bruk følgende tabell for verdier til `startMonth` og `endMonth`:
 
-```
-http://localhost/index.html?mode=test
-```
-
-## Legge til nye temaer
+| Måned | Verdi |
+|-------|-------|
+| Januar | 0 |
+| Februar | 1 |
+| Mars | 2 |
+| April | 3 |
+| ... | ... |
+| Desember | 11 |
 
 Legg til nye temadefinisjoner i `themes`-objektet:
 
@@ -44,6 +47,8 @@ mytheme: {
 }
 ```
 
+
+
 Legge til tema-valg i tema-velgeren (test-modus):
 
 ```Html

diff --git a/index.html b/index.html
@@ -20,6 +20,22 @@
             overflow-x: auto;
         }
 
+        .theme-trigger-area {
+            position: fixed;
+            top: 0;
+            right: 0;
+            width: 150px;
+            height: 100px;
+            z-index: 999;
+            cursor: pointer;
+        }
+
+        .theme-trigger-area:hover + .theme-selector,
+        .theme-selector:hover {
+            opacity: 1;
+            pointer-events: auto;
+        }
+
         .theme-selector {
             position: fixed;
             top: 20px;
@@ -31,13 +47,12 @@
             box-shadow: 0 4px 16px rgba(31, 38, 135, 0.37);
             border: 1px solid rgba(255, 255, 255, 0.18);
             z-index: 1000;
-            display: none; /* Hidden by default */
+            display: flex;
             align-items: center;
             gap: 10px;
-        }
-
-        .theme-selector.visible {
-            display: flex;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
         }
 
         .theme-selector label {
@@ -338,13 +353,19 @@
         }
 
         @media (max-width: 768px) {
+            .theme-trigger-area {
+                display: none; /* Hide trigger on mobile */
+            }
+
             .theme-selector {
                 position: relative;
                 top: 0;
                 right: 0;
                 margin-bottom: 20px;
                 width: calc(100% - 40px);
                 justify-content: center;
+                opacity: 1;
+                pointer-events: auto;
             }
 
             .theme-selector label {
@@ -603,6 +624,7 @@
     </style>
 </head>
 <body>
+    <div class="theme-trigger-area"></div>
     <div class="theme-selector">
         <label for="theme-dropdown">Theme:</label>
         <select id="theme-dropdown">
@@ -1560,15 +1582,6 @@
         // Initialize theme dropdown
         document.addEventListener('DOMContentLoaded', function() {
             const themeDropdown = document.getElementById('theme-dropdown');
-            const themeSelector = document.querySelector('.theme-selector');
-
-            // Check if mode=test is in the URL
-            const urlParams = new URLSearchParams(window.location.search);
-            const mode = urlParams.get('mode');
-
-            if (mode === 'test') {
-                themeSelector.classList.add('visible');
-            }
 
             // Load saved theme preference
             const savedTheme = localStorage.getItem('selectedTheme') || 'auto';