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 @@ +