Skip to content

Dokumentasjon på startMonth/endMonth, og tema-velger som dukker opp med mouseover (fjernet test-mode) #3

Merged
merged 2 commits into from
Nov 21, 2025
+42 −24
Merged

Dokumentasjon på startMonth/endMonth, og tema-velger som dukker opp med mouseover (fjernet test-mode) #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9628803
Theme chooser no longer requires test-mode. The selector now appears …
on Nov 21, 2025
96ae645
Added doc on the startMonth/endMonth values. Changed doc on test-mode…
on Nov 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 15 additions & 10 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand All @@ -44,6 +47,8 @@ mytheme: {
}
```



Legge til tema-valg i tema-velgeren (test-modus):

```Html
Expand Down
41 changes: 27 additions & 14 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -1546,15 +1568,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';
Expand Down