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

Compare commits

base: lucas:7a4fa4b312a065172aa58c092c624d15486507f2
Branches Tags
lucas:master
..
compare: lucas:8a7f9a62e5d9c89c4ff005e13ebec8bbbc3537b2
Branches Tags
lucas:master

No commits in common. "7a4fa4b312a065172aa58c092c624d15486507f2" and "8a7f9a62e5d9c89c4ff005e13ebec8bbbc3537b2" have entirely different histories.
7a4fa4b312 ... 8a7f9a62e5

10 changed files with 24 additions and 166 deletions
Show stats Expand all files Collapse all files

7
CLAUDE.md
View file

@ -52,10 +52,3 @@ The `index.html` file serves as the main navigation page listing all available t
## Styling ## 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. 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

8
account.html
View file

@ -5,15 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Account Information</title> <title>Account Information</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script>
// Apply dark mode immediately to prevent flash
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
}
</script>
</head> </head>
<body> <body>
<button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>
<h1>Account Information</h1> <h1>Account Information</h1>
<p>Your authenticated user information:</p> <p>Your authenticated user information:</p>
@ -80,6 +73,5 @@
// Load user info when page loads // Load user info when page loads
document.addEventListener('DOMContentLoaded', loadUserInfo); document.addEventListener('DOMContentLoaded', loadUserInfo);
</script> </script>
<script src="dark-mode.js"></script>
</body> </body>
</html> </html>

8
ajax.html
View file

@ -5,15 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Demo</title> <title>AJAX Demo</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script>
// Apply dark mode immediately to prevent flash
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
}
</script>
</head> </head>
<body> <body>
<button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>
<h1>AJAX Demo</h1> <h1>AJAX Demo</h1>
<p>This page demonstrates asynchronous loading. The UI loads immediately, then makes a slow API call in the background.</p> <p>This page demonstrates asynchronous loading. The UI loads immediately, then makes a slow API call in the background.</p>
@ -86,6 +79,5 @@
loadSlowResponse(); loadSlowResponse();
}); });
</script> </script>
<script src="dark-mode.js"></script>
</body> </body>
</html> </html>

27
dark-mode.js
View file

@ -1,27 +0,0 @@
// 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 = '🌙';
}
});

8
echo-test.html
View file

@ -5,15 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Echo Test</title> <title>Echo Test</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script>
// Apply dark mode immediately to prevent flash
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
}
</script>
</head> </head>
<body> <body>
<button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>
<h1>Echo Test</h1> <h1>Echo Test</h1>
<p>Enter some text and click submit to test the echo API endpoint.</p> <p>Enter some text and click submit to test the echo API endpoint.</p>
@ -85,6 +78,5 @@
document.getElementById('textInput').value = ''; document.getElementById('textInput').value = '';
} }
</script> </script>
<script src="dark-mode.js"></script>
</body> </body>
</html> </html>

9
index.html
View file

@ -5,15 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Playground - Feature Showcase</title> <title>Playground - Feature Showcase</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script>
// Apply dark mode immediately to prevent flash
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
}
</script>
</head> </head>
<body> <body>
<button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>
<h1>Playground - Feature Showcase</h1> <h1>Playground - Feature Showcase</h1>
<p>Welcome to the development playground! Click on any feature below to test it:</p> <p>Welcome to the development playground! Click on any feature below to test it:</p>
@ -43,7 +36,5 @@
<div class="description">Background resource production demo - displays live-calculated mining values with automatic database updates every minute.</div> <div class="description">Background resource production demo - displays live-calculated mining values with automatic database updates every minute.</div>
</li> </li>
</ul> </ul>
<script src="dark-mode.js"></script>
</body> </body>
</html> </html>

8
items.html
View file

@ -5,15 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Items Management - Test</title> <title>Items Management - Test</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script>
// Apply dark mode immediately to prevent flash
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
}
</script>
</head> </head>
<body> <body>
<button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>
<div class="container"> <div class="container">
<h1>Items Management Test</h1> <h1>Items Management Test</h1>
@ -152,6 +145,5 @@
return div.innerHTML; return div.innerHTML;
} }
</script> </script>
<script src="dark-mode.js"></script>
</body> </body>
</html> </html>

8
mining.html
View file

@ -5,15 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mining Resources - Playground</title> <title>Mining Resources - Playground</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script>
// Apply dark mode immediately to prevent flash
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
}
</script>
</head> </head>
<body> <body>
<button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>
<h1>Mining Resources</h1> <h1>Mining Resources</h1>
<div class="section"> <div class="section">
@ -103,6 +96,5 @@
// Fetch fresh data from server every 30 seconds // Fetch fresh data from server every 30 seconds
setInterval(fetchMiningData, 30000); setInterval(fetchMiningData, 30000);
</script> </script>
<script src="dark-mode.js"></script>
</body> </body>
</html> </html>

8
random.html
View file

@ -5,15 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Number Generator</title> <title>Random Number Generator</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script>
// Apply dark mode immediately to prevent flash
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
}
</script>
</head> </head>
<body class="text-center"> <body class="text-center">
<button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>
<h1>Random Number Generator</h1> <h1>Random Number Generator</h1>
<div id="randomNumber" class="display-large">Loading...</div> <div id="randomNumber" class="display-large">Loading...</div>
<button class="btn-large" onclick="getNewNumber()">Get New Random Number</button> <button class="btn-large" onclick="getNewNumber()">Get New Random Number</button>
@ -37,6 +30,5 @@
// Load initial number when page opens // Load initial number when page opens
getNewNumber(); getNewNumber();
</script> </script>
<script src="dark-mode.js"></script>
</body> </body>
</html> </html>

99
styles.css
View file

@ -1,29 +1,3 @@
/* 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 */ /* Base Layout */
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
@ -31,24 +5,22 @@ body {
margin: 50px auto; margin: 50px auto;
padding: 20px; padding: 20px;
line-height: 1.6; line-height: 1.6;
background-color: var(--bg-color);
color: var(--text-color);
} }
/* Typography */ /* Typography */
h1 { h1 {
color: var(--text-color); color: #333;
text-align: center; text-align: center;
margin-bottom: 30px; margin-bottom: 30px;
} }
h3 { h3 {
color: var(--text-color); color: #333;
margin-top: 0; margin-top: 0;
} }
p { p {
color: var(--text-color); color: #333;
} }
/* Buttons */ /* Buttons */
@ -82,9 +54,9 @@ button:disabled {
.section { .section {
margin: 30px 0; margin: 30px 0;
padding: 20px; padding: 20px;
border: 2px solid var(--border-color); border: 2px solid #ddd;
border-radius: 8px; border-radius: 8px;
background-color: var(--section-bg); background-color: #f9f9f9;
} }
/* Feature List (for index page) */ /* Feature List (for index page) */
@ -96,9 +68,9 @@ button:disabled {
.feature-list li { .feature-list li {
margin: 15px 0; margin: 15px 0;
padding: 15px; padding: 15px;
border: 1px solid var(--border-color); border: 1px solid #ddd;
border-radius: 8px; border-radius: 8px;
background-color: var(--section-bg); background-color: #f9f9f9;
} }
.feature-list a { .feature-list a {
@ -113,7 +85,7 @@ button:disabled {
} }
.description { .description {
color: var(--description-text); color: #666;
margin-top: 8px; margin-top: 8px;
font-size: 14px; font-size: 14px;
} }
@ -122,10 +94,9 @@ button:disabled {
.response-field { .response-field {
min-height: 50px; min-height: 50px;
padding: 15px; padding: 15px;
border: 2px solid var(--input-border); border: 2px solid #ccc;
border-radius: 4px; border-radius: 4px;
background-color: var(--input-bg); background-color: white;
color: var(--text-color);
margin: 15px 0; margin: 15px 0;
font-size: 16px; font-size: 16px;
word-wrap: break-word; word-wrap: break-word;
@ -135,12 +106,12 @@ button:disabled {
.display-large { .display-large {
font-size: 48px; font-size: 48px;
font-weight: bold; font-weight: bold;
color: var(--text-color); color: #333;
margin: 30px 0; margin: 30px 0;
padding: 20px; padding: 20px;
border: 2px solid var(--border-color); border: 2px solid #ddd;
border-radius: 8px; border-radius: 8px;
background-color: var(--section-bg); background-color: #f9f9f9;
text-align: center; text-align: center;
} }
@ -165,17 +136,15 @@ label {
input[type="text"] { input[type="text"] {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
border: 2px solid var(--input-border); border: 2px solid #ccc;
border-radius: 4px; border-radius: 4px;
font-size: 16px; font-size: 16px;
box-sizing: border-box; box-sizing: border-box;
background-color: var(--input-bg);
color: var(--text-color);
} }
/* Status Classes */ /* Status Classes */
.loading { .loading {
color: var(--muted-text); color: #666;
font-style: italic; font-style: italic;
} }
@ -199,7 +168,7 @@ input[type="text"] {
} }
.back-link a { .back-link a {
color: var(--muted-text); color: #666;
text-decoration: none; text-decoration: none;
} }
@ -209,13 +178,13 @@ input[type="text"] {
/* Utility Classes */ /* Utility Classes */
.info { .info {
color: var(--muted-text); color: #666;
font-size: 14px; font-size: 14px;
margin-top: 10px; margin-top: 10px;
} }
.timestamp { .timestamp {
color: var(--timestamp-text); color: #999;
font-size: 12px; font-size: 12px;
margin-top: 5px; margin-top: 5px;
} }
@ -240,19 +209,19 @@ input[type="text"] {
justify-content: space-between; justify-content: space-between;
padding: 12px 15px; padding: 12px 15px;
margin: 8px 0; margin: 8px 0;
border: 1px solid var(--border-color); border: 1px solid #ddd;
border-radius: 6px; border-radius: 6px;
background-color: var(--input-bg); background-color: white;
} }
.item-name { .item-name {
flex-grow: 1; flex-grow: 1;
font-size: 16px; font-size: 16px;
color: var(--text-color); color: #333;
} }
.item-id { .item-id {
color: var(--muted-text); color: #666;
font-size: 14px; font-size: 14px;
margin-right: 15px; margin-right: 15px;
} }
@ -280,38 +249,18 @@ input[type="text"] {
} }
.empty { .empty {
color: var(--muted-text); color: #666;
font-style: italic; font-style: italic;
text-align: center; text-align: center;
padding: 20px; padding: 20px;
} }
.back-button { .back-button {
color: var(--muted-text); color: #666;
text-decoration: none; text-decoration: none;
font-size: 16px; 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 { .back-button:hover {
text-decoration: underline; text-decoration: underline;
} }