Skip to content

Commit 8705bd5

Browse files
lefticuslefticus
committed
Move to water.css and simplify our custom theme/styling
1 parent f51204b commit 8705bd5

3 files changed

Lines changed: 130 additions & 142 deletions

File tree

‎cmake/Emscripten.cmake‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -186,8 +186,8 @@ function(myproject_create_web_dist)
186186

187187
string(APPEND WASM_APPS_HTML
188188
" <a href=\"${target}/\" class=\"app-card\">
189-
<div class=\"app-title\">${TITLE_ESCAPED}</div>
190-
<div class=\"app-description\">${DESC_ESCAPED}</div>
189+
<h3>${TITLE_ESCAPED}</h3>
190+
<p>${DESC_ESCAPED}</p>
191191
</a>
192192
")
193193
endforeach()

‎web/index_template.html.in‎

Lines changed: 50 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -4,87 +4,74 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>@PROJECT_NAME@ - WebAssembly Applications</title>
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css" id="theme-stylesheet">
78
<style>
8-
* {
9-
margin: 0;
10-
padding: 0;
11-
box-sizing: border-box;
12-
}
13-
body {
14-
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
15-
color: #eee;
16-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
17-
min-height: 100vh;
18-
display: flex;
19-
align-items: center;
20-
justify-content: center;
21-
padding: 20px;
22-
}
23-
.container {
24-
max-width: 800px;
25-
width: 100%;
26-
}
27-
h1 {
28-
text-align: center;
29-
margin-bottom: 10px;
30-
color: #e94560;
31-
font-size: 2.5rem;
32-
}
33-
.subtitle {
34-
text-align: center;
35-
color: #aaa;
36-
margin-bottom: 40px;
37-
}
9+
body { max-width: 900px; }
10+
header { text-align: center; }
11+
footer { text-align: center; margin-top: 3rem; }
12+
fieldset { text-align: center; border: none; }
3813
.app-grid {
3914
display: grid;
4015
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
41-
gap: 20px;
16+
gap: 1.5rem;
17+
margin: 2rem 0;
4218
}
4319
.app-card {
44-
background: rgba(255, 255, 255, 0.05);
45-
border: 2px solid #e94560;
46-
border-radius: 12px;
47-
padding: 24px;
48-
transition: all 0.3s ease;
20+
padding: 1.5rem;
21+
border: 1px solid var(--border);
22+
border-radius: 4px;
4923
text-decoration: none;
50-
color: inherit;
5124
display: block;
5225
}
5326
.app-card:hover {
54-
transform: translateY(-5px);
55-
background: rgba(233, 69, 96, 0.1);
56-
box-shadow: 0 10px 30px rgba(233, 69, 96, 0.3);
57-
}
58-
.app-title {
59-
color: #e94560;
60-
font-size: 1.5rem;
61-
margin-bottom: 10px;
62-
font-weight: 600;
63-
}
64-
.app-description {
65-
color: #ccc;
66-
line-height: 1.6;
67-
}
68-
.footer {
69-
text-align: center;
70-
margin-top: 40px;
71-
color: #666;
72-
font-size: 0.9rem;
27+
border-color: var(--links);
7328
}
7429
</style>
7530
</head>
7631
<body>
77-
<div class="container">
78-
<h1>@PROJECT_NAME@</h1>
79-
<p class="subtitle">WebAssembly Applications</p>
32+
<main>
33+
<fieldset>
34+
<label><input type="radio" name="theme" value="auto" checked> Auto</label>
35+
<label><input type="radio" name="theme" value="light"> Light</label>
36+
<label><input type="radio" name="theme" value="dark"> Dark</label>
37+
</fieldset>
38+
39+
<header>
40+
<h1>@PROJECT_NAME@</h1>
41+
<p>WebAssembly Applications</p>
42+
</header>
8043

8144
<div class="app-grid">
8245
@WASM_APPS_HTML@
8346
</div>
8447

85-
<div class="footer">
86-
Built with CMake and Emscripten | Version @PROJECT_VERSION@
87-
</div>
88-
</div>
48+
<footer>
49+
<small>Built with CMake and Emscripten | Version @PROJECT_VERSION@</small>
50+
</footer>
51+
</main>
52+
53+
<script>
54+
const themeStylesheet = document.getElementById('theme-stylesheet');
55+
const themeRadios = document.querySelectorAll('input[name="theme"]');
56+
const themes = {
57+
auto: 'https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css',
58+
light: 'https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css',
59+
dark: 'https://cdn.jsdelivr.net/npm/water.css@2/out/dark.min.css'
60+
};
61+
62+
// Load saved theme preference
63+
const savedTheme = localStorage.getItem('theme') || 'auto';
64+
themeStylesheet.href = themes[savedTheme];
65+
document.querySelector(`input[value="${savedTheme}"]`).checked = true;
66+
67+
// Handle theme changes
68+
themeRadios.forEach(radio => {
69+
radio.addEventListener('change', (e) => {
70+
const theme = e.target.value;
71+
themeStylesheet.href = themes[theme];
72+
localStorage.setItem('theme', theme);
73+
});
74+
});
75+
</script>
8976
</body>
9077
</html>

‎web/shell_template.html.in‎

Lines changed: 78 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -4,83 +4,63 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>@TARGET_TITLE@</title>
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css" id="theme-stylesheet">
78
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@AT@xterm/xterm@AT@6.0.0/css/xterm.css">
89
<style>
9-
* {
10-
margin: 0;
11-
padding: 0;
12-
box-sizing: border-box;
13-
}
14-
15-
body {
16-
background-color: #1a1a2e;
17-
color: #eee;
18-
font-family: monospace;
19-
min-height: 100vh;
20-
display: flex;
21-
flex-direction: column;
22-
align-items: center;
23-
justify-content: center;
24-
}
25-
26-
#container {
27-
max-width: 900px;
28-
width: 100%;
29-
padding: 20px;
30-
}
31-
32-
h1 {
33-
text-align: center;
34-
margin-bottom: 20px;
35-
color: #e94560;
36-
}
37-
10+
body { max-width: 1000px; }
11+
header { text-align: center; }
12+
fieldset { text-align: center; border: none; }
3813
#terminal {
39-
margin: 0 auto;
40-
border: 2px solid #e94560;
41-
background-color: #0f0f23;
42-
}
43-
44-
#loading {
45-
text-align: center;
46-
padding: 50px;
14+
margin: 2rem auto;
15+
border: 1px solid var(--border);
16+
border-radius: 4px;
17+
overflow: hidden;
4718
}
48-
19+
#loading { text-align: center; padding: 3rem 1rem; }
4920
.spinner {
50-
border: 4px solid #16213e;
51-
border-top: 4px solid #e94560;
21+
border: 4px solid var(--background-alt);
22+
border-top: 4px solid var(--links);
5223
border-radius: 50%;
5324
width: 40px;
5425
height: 40px;
5526
animation: spin 1s linear infinite;
56-
margin: 20px auto;
27+
margin: 0 auto 1rem;
5728
}
58-
5929
@keyframes spin {
6030
0% { transform: rotate(0deg); }
6131
100% { transform: rotate(360deg); }
6232
}
63-
6433
#error {
6534
display: none;
66-
background-color: #ff4444;
35+
background-color: #d32f2f;
6736
color: white;
68-
padding: 15px;
69-
border-radius: 8px;
70-
margin-top: 20px;
37+
padding: 1rem;
38+
border-radius: 4px;
39+
margin-top: 1rem;
7140
}
72-
73-
.hidden {
74-
display: none !important;
41+
section {
42+
margin-top: 2rem;
43+
padding: 1.5rem;
44+
background-color: var(--background-alt);
45+
border-radius: 4px;
7546
}
47+
.hidden { display: none !important; }
7648
</style>
7749
</head>
7850
<body>
7951
<!-- Service worker for COOP/COEP headers on GitHub Pages -->
8052
<script src="coi-serviceworker.min.js"></script>
8153

82-
<div id="container">
83-
<h1>@TARGET_NAME@</h1>
54+
<main>
55+
<fieldset>
56+
<label><input type="radio" name="theme" value="auto" checked> Auto</label>
57+
<label><input type="radio" name="theme" value="light"> Light</label>
58+
<label><input type="radio" name="theme" value="dark"> Dark</label>
59+
</fieldset>
60+
61+
<header>
62+
<h1>@TARGET_NAME@</h1>
63+
</header>
8464

8565
<div id="loading">
8666
<div class="spinner"></div>
@@ -92,31 +72,27 @@
9272

9373
<div id="error"></div>
9474

95-
<div id="usage-info" style="margin-top: 30px; padding: 20px; background-color: #16213e; border-radius: 8px; font-size: 13px; line-height: 1.6;">
96-
<h3 style="color: #e94560; margin-bottom: 15px;">Command-Line Arguments via URL</h3>
97-
<p style="margin-bottom: 10px;">Pass command-line arguments to the application using URL parameters:</p>
98-
99-
<div style="margin-bottom: 15px;">
100-
<strong style="color: #e94560;">Conversion Rules:</strong>
101-
<ul style="list-style: none; padding-left: 0; margin-top: 5px;">
102-
<li>• Single-character params → short flags: <code style="background-color: #0f0f23; padding: 2px 6px; border-radius: 3px;">?v</code> → <code style="background-color: #0f0f23; padding: 2px 6px; border-radius: 3px;">-v</code></li>
103-
<li>• Multi-character params → long flags: <code style="background-color: #0f0f23; padding: 2px 6px; border-radius: 3px;">?version</code> → <code style="background-color: #0f0f23; padding: 2px 6px; border-radius: 3px;">--version</code></li>
104-
<li>• Params with values: <code style="background-color: #0f0f23; padding: 2px 6px; border-radius: 3px;">?file=test.txt</code> → <code style="background-color: #0f0f23; padding: 2px 6px; border-radius: 3px;">--file test.txt</code></li>
105-
<li>• Multiple params: <code style="background-color: #0f0f23; padding: 2px 6px; border-radius: 3px;">?v&help</code> → <code style="background-color: #0f0f23; padding: 2px 6px; border-radius: 3px;">-v --help</code></li>
106-
</ul>
107-
</div>
108-
109-
<div>
110-
<strong style="color: #e94560;">Examples:</strong>
111-
<ul style="list-style: none; padding-left: 0; margin-top: 5px; color: #888;">
112-
<li><code style="background-color: #0f0f23; padding: 2px 6px; border-radius: 3px;">intro.html?version</code></li>
113-
<li><code style="background-color: #0f0f23; padding: 2px 6px; border-radius: 3px;">intro.html?h</code></li>
114-
<li><code style="background-color: #0f0f23; padding: 2px 6px; border-radius: 3px;">intro.html?file=data.txt</code></li>
115-
<li><code style="background-color: #0f0f23; padding: 2px 6px; border-radius: 3px;">intro.html?verbose&config=settings.json</code></li>
116-
</ul>
117-
</div>
118-
</div>
119-
</div>
75+
<section>
76+
<h3>Command-Line Arguments via URL</h3>
77+
<p>Pass command-line arguments to the application using URL parameters:</p>
78+
79+
<strong>Conversion Rules:</strong>
80+
<ul>
81+
<li>• Single-character params → short flags: <code>?v</code> → <code>-v</code></li>
82+
<li>• Multi-character params → long flags: <code>?version</code> → <code>--version</code></li>
83+
<li>• Params with values: <code>?file=test.txt</code> → <code>--file test.txt</code></li>
84+
<li>• Multiple params: <code>?v&help</code> → <code>-v --help</code></li>
85+
</ul>
86+
87+
<strong>Examples:</strong>
88+
<ul>
89+
<li><code>intro.html?version</code></li>
90+
<li><code>intro.html?h</code></li>
91+
<li><code>intro.html?file=data.txt</code></li>
92+
<li><code>intro.html?verbose&config=settings.json</code></li>
93+
</ul>
94+
</section>
95+
</main>
12096

12197
<script>
12298
// Define Module configuration FIRST (synchronously, before Emscripten loads)
@@ -310,6 +286,31 @@
310286
window.term = term;
311287
window.fitAddon = fitAddon;
312288
</script>
289+
290+
<script>
291+
const themeStylesheet = document.getElementById('theme-stylesheet');
292+
const themeRadios = document.querySelectorAll('input[name="theme"]');
293+
const themes = {
294+
auto: 'https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css',
295+
light: 'https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css',
296+
dark: 'https://cdn.jsdelivr.net/npm/water.css@2/out/dark.min.css'
297+
};
298+
299+
// Load saved theme preference
300+
const savedTheme = localStorage.getItem('theme') || 'auto';
301+
themeStylesheet.href = themes[savedTheme];
302+
document.querySelector(`input[value="${savedTheme}"]`).checked = true;
303+
304+
// Handle theme changes
305+
themeRadios.forEach(radio => {
306+
radio.addEventListener('change', (e) => {
307+
const theme = e.target.value;
308+
themeStylesheet.href = themes[theme];
309+
localStorage.setItem('theme', theme);
310+
});
311+
});
312+
</script>
313+
313314
{{{ SCRIPT }}}
314315
</body>
315316
</html>

0 commit comments

Comments
 (0)