lucas/playground.shiny.space
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP: Dark mode implementation in progress

Browse source 
- Modified multiple HTML files for dark mode support
- Updated styles.css with dark mode styling
- Added dark-mode.js for toggle functionality
- Work still in progress, saving current state

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Lucas 2025-06-14 04:02:10 +02:00
parent 8a7f9a62e5
commit ba5c3a9650
10 changed files with 132 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
CLAUDE.md
View file

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

2
account.html
View file

@ -7,6 +7,7 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>
<h1>Account Information</h1>
<p>Your authenticated user information:</p>
@ -73,5 +74,6 @@
// Load user info when page loads
document.addEventListener('DOMContentLoaded', loadUserInfo);
</script>
<script src="dark-mode.js"></script>
</body>
</html>

2
ajax.html
View file

@ -7,6 +7,7 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>
<h1>AJAX Demo</h1>
<p>This page demonstrates asynchronous loading. The UI loads immediately, then makes a slow API call in the background.</p>
@ -79,5 +80,6 @@
loadSlowResponse();
});
</script>
<script src="dark-mode.js"></script>
</body>
</html>

35
dark-mode.js Normal file
View file

@ -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 = '🌙';
}
});

2
echo-test.html
View file

@ -7,6 +7,7 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>
<h1>Echo Test</h1>
<p>Enter some text and click submit to test the echo API endpoint.</p>
@ -78,5 +79,6 @@
document.getElementById('textInput').value = '';
}
</script>
<script src="dark-mode.js"></script>
</body>
</html>

3
index.html
View file

@ -7,6 +7,7 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>
<h1>Playground - Feature Showcase</h1>
<p>Welcome to the development playground! Click on any feature below to test it:</p>
@ -36,5 +37,7 @@
<div class="description">Background resource production demo - displays live-calculated mining values with automatic database updates every minute.</div>
</li>
</ul>
<script src="dark-mode.js"></script>
</body>
</html>

2
items.html
View file

@ -7,6 +7,7 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>
<div class="container">
<h1>Items Management Test</h1>
@ -145,5 +146,6 @@
return div.innerHTML;
}
</script>
<script src="dark-mode.js"></script>
</body>
</html>

2
mining.html
View file

@ -7,6 +7,7 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>
<h1>Mining Resources</h1>
<div class="section">
@ -96,5 +97,6 @@
// Fetch fresh data from server every 30 seconds
setInterval(fetchMiningData, 30000);
</script>
<script src="dark-mode.js"></script>
</body>
</html>

2
random.html
View file

@ -7,6 +7,7 @@
<link rel="stylesheet" href="styles.css">
</head>
<body class="text-center">
<button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>
<h1>Random Number Generator</h1>
<div id="randomNumber" class="display-large">Loading...</div>
<button class="btn-large" onclick="getNewNumber()">Get New Random Number</button>
@ -30,5 +31,6 @@
// Load initial number when page opens
getNewNumber();
</script>
<script src="dark-mode.js"></script>
</body>
</html>

99
styles.css
View file

@ -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;
}