diff --git a/CLAUDE.md b/CLAUDE.md index d90c43e..a776242 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -52,3 +52,10 @@ The `index.html` file serves as the main navigation page listing all available t ## Styling All HTML pages use the unified `styles.css` file for consistent styling. Keep styling in this CSS file as much as reasonably possible - avoid inline styles in HTML files. It's perfectly fine to add new classes to `styles.css` for future tests and functionality. This approach keeps the test code much more readable and maintainable. + +## Dark Mode +The site includes a simple dark mode toggle available on all pages: +- Toggle button (🌙/☀️) appears in the top-right corner of every page +- Uses CSS variables for easy theme switching +- User preference is saved in localStorage and persists across all pages +- Implementation uses `dark-mode.js` for reusable functionality across all HTML files diff --git a/account.html b/account.html index 4698695..48724ea 100644 --- a/account.html +++ b/account.html @@ -7,6 +7,7 @@ +

Account Information

Your authenticated user information:

@@ -73,5 +74,6 @@ // Load user info when page loads document.addEventListener('DOMContentLoaded', loadUserInfo); + \ No newline at end of file diff --git a/ajax.html b/ajax.html index bd71b70..3e697f8 100644 --- a/ajax.html +++ b/ajax.html @@ -7,6 +7,7 @@ +

AJAX Demo

This page demonstrates asynchronous loading. The UI loads immediately, then makes a slow API call in the background.

@@ -79,5 +80,6 @@ loadSlowResponse(); }); + \ No newline at end of file diff --git a/dark-mode.js b/dark-mode.js new file mode 100644 index 0000000..864291e --- /dev/null +++ b/dark-mode.js @@ -0,0 +1,35 @@ +// Apply saved theme immediately to prevent flash +(function() { + const savedTheme = localStorage.getItem('theme'); + if (savedTheme === 'dark') { + document.documentElement.setAttribute('data-theme', 'dark'); + } +})(); + +// Dark mode toggle functionality +function toggleDarkMode() { + const html = document.documentElement; + const button = document.querySelector('.dark-mode-toggle'); + + if (html.getAttribute('data-theme') === 'dark') { + html.removeAttribute('data-theme'); + button.textContent = '🌙'; + localStorage.setItem('theme', 'light'); + } else { + html.setAttribute('data-theme', 'dark'); + button.textContent = '☀️'; + localStorage.setItem('theme', 'dark'); + } +} + +// Load saved theme on page load +document.addEventListener('DOMContentLoaded', function() { + const savedTheme = localStorage.getItem('theme'); + const button = document.querySelector('.dark-mode-toggle'); + + if (savedTheme === 'dark') { + button.textContent = '☀️'; + } else { + button.textContent = '🌙'; + } +}); \ No newline at end of file diff --git a/echo-test.html b/echo-test.html index 7d2de50..1ad8877 100644 --- a/echo-test.html +++ b/echo-test.html @@ -7,6 +7,7 @@ +

Echo Test

Enter some text and click submit to test the echo API endpoint.

@@ -78,5 +79,6 @@ document.getElementById('textInput').value = ''; } + \ No newline at end of file diff --git a/index.html b/index.html index d533e89..138c14d 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ +

Playground - Feature Showcase

Welcome to the development playground! Click on any feature below to test it:

@@ -36,5 +37,7 @@
Background resource production demo - displays live-calculated mining values with automatic database updates every minute.
+ + diff --git a/items.html b/items.html index e6233db..c9227d8 100644 --- a/items.html +++ b/items.html @@ -7,6 +7,7 @@ +

Items Management Test

@@ -145,5 +146,6 @@ return div.innerHTML; } + \ No newline at end of file diff --git a/mining.html b/mining.html index a146f36..826bd2a 100644 --- a/mining.html +++ b/mining.html @@ -7,6 +7,7 @@ +

Mining Resources

@@ -96,5 +97,6 @@ // Fetch fresh data from server every 30 seconds setInterval(fetchMiningData, 30000); + \ No newline at end of file diff --git a/random.html b/random.html index 4272fba..33427ad 100644 --- a/random.html +++ b/random.html @@ -7,6 +7,7 @@ +

Random Number Generator

Loading...
@@ -30,5 +31,6 @@ // Load initial number when page opens getNewNumber(); + \ No newline at end of file diff --git a/styles.css b/styles.css index a9bfedb..2655570 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,29 @@ +/* CSS Variables for Light/Dark Mode */ +:root { + --bg-color: #ffffff; + --text-color: #333333; + --section-bg: #f9f9f9; + --border-color: #dddddd; + --input-bg: #ffffff; + --input-border: #cccccc; + --muted-text: #666666; + --timestamp-text: #999999; + --description-text: #666666; +} + +/* Dark mode variables */ +html[data-theme="dark"] { + --bg-color: #1a1a1a; + --text-color: #e0e0e0; + --section-bg: #2d2d2d; + --border-color: #444444; + --input-bg: #2d2d2d; + --input-border: #555555; + --muted-text: #aaaaaa; + --timestamp-text: #888888; + --description-text: #aaaaaa; +} + /* Base Layout */ body { font-family: Arial, sans-serif; @@ -5,22 +31,24 @@ body { margin: 50px auto; padding: 20px; line-height: 1.6; + background-color: var(--bg-color); + color: var(--text-color); } /* Typography */ h1 { - color: #333; + color: var(--text-color); text-align: center; margin-bottom: 30px; } h3 { - color: #333; + color: var(--text-color); margin-top: 0; } p { - color: #333; + color: var(--text-color); } /* Buttons */ @@ -54,9 +82,9 @@ button:disabled { .section { margin: 30px 0; padding: 20px; - border: 2px solid #ddd; + border: 2px solid var(--border-color); border-radius: 8px; - background-color: #f9f9f9; + background-color: var(--section-bg); } /* Feature List (for index page) */ @@ -68,9 +96,9 @@ button:disabled { .feature-list li { margin: 15px 0; padding: 15px; - border: 1px solid #ddd; + border: 1px solid var(--border-color); border-radius: 8px; - background-color: #f9f9f9; + background-color: var(--section-bg); } .feature-list a { @@ -85,7 +113,7 @@ button:disabled { } .description { - color: #666; + color: var(--description-text); margin-top: 8px; font-size: 14px; } @@ -94,9 +122,10 @@ button:disabled { .response-field { min-height: 50px; padding: 15px; - border: 2px solid #ccc; + border: 2px solid var(--input-border); border-radius: 4px; - background-color: white; + background-color: var(--input-bg); + color: var(--text-color); margin: 15px 0; font-size: 16px; word-wrap: break-word; @@ -106,12 +135,12 @@ button:disabled { .display-large { font-size: 48px; font-weight: bold; - color: #333; + color: var(--text-color); margin: 30px 0; padding: 20px; - border: 2px solid #ddd; + border: 2px solid var(--border-color); border-radius: 8px; - background-color: #f9f9f9; + background-color: var(--section-bg); text-align: center; } @@ -136,15 +165,17 @@ label { input[type="text"] { width: 100%; padding: 10px; - border: 2px solid #ccc; + border: 2px solid var(--input-border); border-radius: 4px; font-size: 16px; box-sizing: border-box; + background-color: var(--input-bg); + color: var(--text-color); } /* Status Classes */ .loading { - color: #666; + color: var(--muted-text); font-style: italic; } @@ -168,7 +199,7 @@ input[type="text"] { } .back-link a { - color: #666; + color: var(--muted-text); text-decoration: none; } @@ -178,13 +209,13 @@ input[type="text"] { /* Utility Classes */ .info { - color: #666; + color: var(--muted-text); font-size: 14px; margin-top: 10px; } .timestamp { - color: #999; + color: var(--timestamp-text); font-size: 12px; margin-top: 5px; } @@ -209,19 +240,19 @@ input[type="text"] { justify-content: space-between; padding: 12px 15px; margin: 8px 0; - border: 1px solid #ddd; + border: 1px solid var(--border-color); border-radius: 6px; - background-color: white; + background-color: var(--input-bg); } .item-name { flex-grow: 1; font-size: 16px; - color: #333; + color: var(--text-color); } .item-id { - color: #666; + color: var(--muted-text); font-size: 14px; margin-right: 15px; } @@ -249,18 +280,38 @@ input[type="text"] { } .empty { - color: #666; + color: var(--muted-text); font-style: italic; text-align: center; padding: 20px; } .back-button { - color: #666; + color: var(--muted-text); text-decoration: none; font-size: 16px; } +/* Dark Mode Toggle */ +.dark-mode-toggle { + position: fixed; + top: 20px; + right: 20px; + background-color: var(--section-bg); + border: 2px solid var(--border-color); + border-radius: 25px; + padding: 8px 16px; + cursor: pointer; + font-size: 16px; + color: var(--text-color); + transition: all 0.3s ease; + z-index: 1000; +} + +.dark-mode-toggle:hover { + background-color: var(--border-color); +} + .back-button:hover { text-decoration: underline; } \ No newline at end of file