From 96ae2915ee78daf96e30201d5186674e45a70eee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98yvind=20Andreas=20Nilsen?= Date: Fri, 21 Nov 2025 13:59:40 +0100 Subject: [PATCH] =?UTF-8?q?Dokumentasjon=20p=C3=A5=20startMonth/endMonth,?= =?UTF-8?q?=20og=20tema-velger=20som=20dukker=20opp=20med=20mouseover=20(f?= =?UTF-8?q?jernet=20test-mode)=20(#3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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' --- README.md | 25 +++++++++++++++---------- index.html | 41 +++++++++++++++++++++++++++-------------- 2 files changed, 42 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 99a7722..08b56ff 100644 --- 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 index dc3cf22..45306b8 100644 --- 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,6 +353,10 @@ } @media (max-width: 768px) { + .theme-trigger-area { + display: none; /* Hide trigger on mobile */ + } + .theme-selector { position: relative; top: 0; @@ -345,6 +364,8 @@ margin-bottom: 20px; width: calc(100% - 40px); justify-content: center; + opacity: 1; + pointer-events: auto; } .theme-selector label { @@ -603,6 +624,7 @@ +