will/unitforge
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(frontend): add theme switcher with light dark and system modes
Build Multi-Arch Container Image / build-and-push (push) Has been cancelled
Details
Build Multi-Arch Container Image / security-scan (push) Has been cancelled
Details
Build Multi-Arch Container Image / deploy-staging (push) Has been cancelled
Details
Build Multi-Arch Container Image / deploy-production (push) Has been cancelled
Details
Nightly Build / check-changes (push) Has been cancelled
Details
Nightly Build / nightly-tests (3.10) (push) Has been cancelled
Details
Nightly Build / nightly-tests (3.11) (push) Has been cancelled
Details
Nightly Build / nightly-tests (3.12) (push) Has been cancelled
Details
Nightly Build / nightly-tests (3.8) (push) Has been cancelled
Details
Nightly Build / nightly-tests (3.9) (push) Has been cancelled
Details
Nightly Build / build-nightly (push) Has been cancelled
Details
Nightly Build / performance-test (push) Has been cancelled
Details
Nightly Build / security-scan-nightly (push) Has been cancelled
Details
Nightly Build / cleanup-old-nightlies (push) Has been cancelled
Details
Build Multi-Arch Container Image / test (push) Has been cancelled
Details
Nightly Build / notify-results (push) Has been cancelled
Details

Browse Source
This commit is contained in:
William Valentin
2025-09-21 20:28:33 -07:00
parent f38e0c1276
commit c48cd87d16
6 changed files with 670 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/static/css/style.css
+201 -145
View File
@@ -1,6 +1,7 @@
/* UnitForge CSS Styles */
:root {
color-scheme: light;
--primary-color: #0d6efd;
--secondary-color: #6c757d;
--success-color: #198754;
@@ -12,6 +13,80 @@
--border-radius: 0.375rem;
--box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
--box-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
--body-bg: #ffffff;
--surface-bg: #ffffff;
--surface-alt-bg: #f8f9fa;
--surface-border: #dee2e6;
--text-color: #212529;
--muted-color: #6c757d;
--muted-on-dark-color: #cbd5e0;
--divider-color: #f1f3f4;
--hero-bg-start: #f8f9fa;
--hero-bg-stop: #e9ecef;
--code-bg: #1a202c;
--code-color: #f7fafc;
--placeholder-color: #6c757d;
--input-bg: #ffffff;
--input-text-color: #212529;
--theme-color: #0d6efd;
}
:root[data-theme="dark"] {
color-scheme: dark;
--primary-color: #3b82f6;
--secondary-color: #94a3b8;
--success-color: #34d399;
--danger-color: #f87171;
--warning-color: #facc15;
--info-color: #38bdf8;
--light-color: #1f2937;
--dark-color: #e2e8f0;
--body-bg: #0f172a;
--surface-bg: #1e293b;
--surface-alt-bg: #16213b;
--surface-border: #334155;
--text-color: #e2e8f0;
--muted-color: #94a3b8;
--muted-on-dark-color: #a8b4cc;
--divider-color: #273449;
--hero-bg-start: #111c2f;
--hero-bg-stop: #1e293b;
--code-bg: #111c2f;
--code-color: #e2e8f0;
--placeholder-color: #94a3b8;
--input-bg: #16213b;
--input-text-color: #e2e8f0;
--theme-color: #0b1120;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
color-scheme: dark;
--primary-color: #3b82f6;
--secondary-color: #94a3b8;
--success-color: #34d399;
--danger-color: #f87171;
--warning-color: #facc15;
--info-color: #38bdf8;
--light-color: #1f2937;
--dark-color: #e2e8f0;
--body-bg: #0f172a;
--surface-bg: #1e293b;
--surface-alt-bg: #16213b;
--surface-border: #334155;
--text-color: #e2e8f0;
--muted-color: #94a3b8;
--muted-on-dark-color: #a8b4cc;
--divider-color: #273449;
--hero-bg-start: #111c2f;
--hero-bg-stop: #1e293b;
--code-bg: #111c2f;
--code-color: #e2e8f0;
--placeholder-color: #94a3b8;
--input-bg: #16213b;
--input-text-color: #e2e8f0;
--theme-color: #0b1120;
}
}
/* General Styles */
@@ -29,12 +104,14 @@
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(--dark-color);
background-color: var(--body-bg);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease;
}
.hero-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-bottom: 1px solid #dee2e6;
background: linear-gradient(135deg, var(--hero-bg-start) 0%, var(--hero-bg-stop) 100%);
border-bottom: 1px solid var(--surface-border);
}
/* Feature Icons */
@@ -57,15 +134,22 @@ body {
box-shadow: var(--box-shadow-lg);
}
.card {
background-color: var(--surface-bg);
border-color: var(--surface-border);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Unit Type Badges */
.unit-type-badge {
background: var(--light-color);
border: 1px solid #dee2e6;
background: var(--surface-alt-bg);
border: 1px solid var(--surface-border);
border-radius: var(--border-radius);
padding: 0.75rem 1rem;
text-align: center;
font-weight: 500;
color: var(--dark-color);
color: var(--text-color);
transition: all 0.2s ease;
}
@@ -113,41 +197,28 @@ body {
color: #f7fafc !important;
}
/* Fix text-muted contrast issues */
.bg-light {
background-color: var(--surface-alt-bg) !important;
color: var(--text-color) !important;
}
/* Muted text helpers */
.text-muted {
color: #6c757d !important;
color: var(--muted-color) !important;
}
/* Better contrast for text-muted on dark backgrounds */
.bg-dark .text-muted,
.card.bg-dark .text-muted {
color: #cbd5e0 !important;
}
/* Better contrast for text-muted in cards */
.card .text-muted {
color: #495057 !important;
}
/* Ensure text-muted in footer has proper contrast */
footer.bg-dark .text-muted {
color: #9ca3af !important;
}
/* Fix text-muted in modals with dark backgrounds */
.modal.bg-dark .text-muted,
.modal-content.bg-dark .text-muted {
color: #cbd5e0 !important;
}
/* Better contrast for text-muted in forms on dark backgrounds */
.bg-dark .form-text.text-muted {
color: #a0aec0 !important;
}
/* Specific override for hero section text-muted */
.card .text-muted,
.hero-section .text-muted {
color: #495057 !important;
color: var(--muted-color) !important;
}
.bg-dark .text-muted,
.card.bg-dark .text-muted,
footer.bg-dark .text-muted,
.modal.bg-dark .text-muted,
.modal-content.bg-dark .text-muted,
.bg-dark .form-text.text-muted {
color: var(--muted-on-dark-color) !important;
}
/* Editor Specific Styles */
@@ -218,7 +289,7 @@ footer.bg-dark .text-muted {
/* Info Items */
.info-item {
padding: 0.25rem 0;
border-bottom: 1px solid #f1f3f4;
border-bottom: 1px solid var(--divider-color);
}
.info-item:last-child {
@@ -260,8 +331,8 @@ footer.bg-dark .text-muted {
}
.template-tag {
background: var(--light-color);
color: #495057;
background: var(--surface-alt-bg);
color: var(--text-color);
padding: 0.125rem 0.5rem;
border-radius: 1rem;
font-size: 0.75rem;
@@ -281,19 +352,36 @@ footer.bg-dark .text-muted {
}
.nav-pills .nav-link:hover:not(.active) {
background-color: var(--light-color);
color: var(--dark-color);
background-color: var(--surface-alt-bg);
color: var(--text-color);
}
.form-control,
.form-select {
background-color: var(--input-bg);
color: var(--input-text-color);
border-color: var(--surface-border);
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-control::placeholder {
color: var(--placeholder-color);
opacity: 1;
}
/* Form Styles */
.form-control:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
background-color: var(--input-bg);
color: var(--input-text-color);
}
.form-select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
background-color: var(--input-bg);
color: var(--input-text-color);
}
/* Button Styles */
@@ -320,19 +408,21 @@ footer.bg-dark .text-muted {
/* Modal Styles */
.modal-content {
border: none;
border: 1px solid var(--surface-border);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow-lg);
background-color: var(--surface-bg);
color: var(--text-color);
}
.modal-header {
border-bottom: 1px solid #f1f3f4;
background: var(--light-color);
border-bottom: 1px solid var(--surface-border);
background: var(--surface-alt-bg);
}
.modal-footer {
border-top: 1px solid #f1f3f4;
background: var(--light-color);
border-top: 1px solid var(--surface-border);
background: var(--surface-alt-bg);
}
/* Loading States */
@@ -345,14 +435,14 @@ footer.bg-dark .text-muted {
.parameter-group {
margin-bottom: 1rem;
padding: 1rem;
background: var(--light-color);
background: var(--surface-alt-bg);
border-radius: var(--border-radius);
border: 1px solid #e9ecef;
border: 1px solid var(--surface-border);
}
.parameter-label {
font-weight: 600;
color: var(--dark-color);
color: var(--text-color);
margin-bottom: 0.25rem;
}
@@ -374,8 +464,8 @@ footer.bg-dark .text-muted {
/* Preview Code Block */
.preview-code {
background: #1a202c;
color: #f7fafc;
background: var(--code-bg);
color: var(--code-color);
border-radius: var(--border-radius);
padding: 1rem;
font-family: "Courier New", Consolas, "Liberation Mono", monospace;
@@ -487,103 +577,69 @@ footer.bg-dark .text-muted {
border-left: 4px solid var(--danger-color) !important;
}
/* Dark Theme Support */
@media (prefers-color-scheme: dark) {
.card {
background-color: #2d3748;
border-color: #4a5568;
color: #f7fafc;
}
.card pre,
.card code {
color: #f7fafc !important;
}
.card .text-muted {
color: #cbd5e0 !important;
}
.text-muted {
color: #a0aec0 !important;
}
/* Better text-muted for dark theme forms */
.form-text.text-muted {
color: #9ca3af !important;
}
.modal-content {
background-color: #2d3748;
color: #f7fafc;
}
.form-control {
background-color: #1f2937;
border-color: #4a5568;
color: #f7fafc;
}
.form-control::placeholder {
color: #cbd5e0;
opacity: 1;
}
.form-control:focus {
background-color: #1f2937;
border-color: var(--primary-color);
color: #f7fafc;
}
/* Improve outline-secondary contrast on dark backgrounds */
.card.bg-dark .btn-outline-secondary,
.bg-dark .btn-outline-secondary,
.card .btn-outline-secondary {
color: #e2e8f0;
border-color: #e2e8f0;
}
.card.bg-dark .btn-outline-secondary:hover,
.bg-dark .btn-outline-secondary:hover,
.card .btn-outline-secondary:hover {
color: #1a202c;
background-color: #e2e8f0;
border-color: #e2e8f0;
}
/* Outline button contrast helpers */
.btn-outline-secondary {
color: var(--muted-color);
border-color: var(--muted-color);
}
/* Increase link and outline-primary contrast on dark backgrounds */
@media (prefers-color-scheme: dark) {
.card.bg-dark a,
.bg-dark a {
color: #93c5fd;
}
.card.bg-dark a:hover,
.bg-dark a:hover {
color: #bfdbfe;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
color: #ffffff;
background-color: var(--muted-color);
border-color: var(--muted-color);
}
.card.bg-dark .btn-outline-primary,
.bg-dark .btn-outline-primary,
.card .btn-outline-primary {
color: #e2e8f0;
border-color: #93c5fd;
}
.card.bg-dark .btn-outline-primary:hover,
.bg-dark .btn-outline-primary:hover,
.card .btn-outline-primary:hover {
color: #1a202c;
background-color: #93c5fd;
border-color: #93c5fd;
}
.card.bg-dark .btn-outline-secondary,
.bg-dark .btn-outline-secondary {
color: #e2e8f0;
border-color: #e2e8f0;
}
/* High-contrast link utility */
.link-contrast {
color: #93c5fd !important;
}
.link-contrast:hover,
.link-contrast:focus {
color: #bfdbfe !important;
text-decoration: underline;
}
.card.bg-dark .btn-outline-secondary:hover,
.bg-dark .btn-outline-secondary:hover,
.card.bg-dark .btn-outline-secondary:focus,
.bg-dark .btn-outline-secondary:focus {
color: #1a202c;
background-color: #e2e8f0;
border-color: #e2e8f0;
}
.card.bg-dark a,
.bg-dark a {
color: #93c5fd;
}
.card.bg-dark a:hover,
.bg-dark a:hover,
.card.bg-dark a:focus,
.bg-dark a:focus {
color: #bfdbfe;
}
.card.bg-dark .btn-outline-primary,
.bg-dark .btn-outline-primary {
color: #e2e8f0;
border-color: #93c5fd;
}
.card.bg-dark .btn-outline-primary:hover,
.bg-dark .btn-outline-primary:hover,
.card.bg-dark .btn-outline-primary:focus,
.bg-dark .btn-outline-primary:focus {
color: #1a202c;
background-color: #93c5fd;
border-color: #93c5fd;
}
.link-contrast {
color: #93c5fd !important;
}
.link-contrast:hover,
.link-contrast:focus {
color: #bfdbfe !important;
text-decoration: underline;
}
/* Footer OSI logo */
frontend/static/js/main.js
+146
View File
@@ -1,8 +1,152 @@
// UnitForge Main JavaScript
// Handles general functionality across the application
class ThemeManager {
constructor() {
this.storageKey = 'unitforge-theme';
this.themeToggleButton = document.querySelector('[data-theme-toggle]');
this.themeLabel = document.querySelector('[data-theme-label]');
this.themeIcon = document.querySelector('[data-theme-icon]');
this.themeOptions = Array.from(document.querySelectorAll('[data-theme-option]'));
this.metaThemeColor = document.querySelector('meta[name="theme-color"]');
this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
this.iconMap = {
light: 'fa-sun',
dark: 'fa-moon',
system: 'fa-circle-half-stroke'
};
this.labelMap = {
light: 'Light',
dark: 'Dark',
system: 'System'
};
this.currentTheme = 'system';
this.init();
}
init() {
const storedTheme = this.getStoredTheme();
this.applyTheme(storedTheme, false);
this.attachEvents();
}
getStoredTheme() {
try {
const stored = localStorage.getItem(this.storageKey);
return this.normalizeTheme(stored);
} catch (error) {
console.warn('Theme preference unavailable:', error);
return 'system';
}
}
normalizeTheme(value) {
return value === 'light' || value === 'dark' ? value : 'system';
}
attachEvents() {
this.themeOptions.forEach((option) => {
option.addEventListener('click', (event) => {
event.preventDefault();
const selection = this.normalizeTheme(option.dataset.themeOption);
this.applyTheme(selection);
});
});
const handleChange = () => this.handleSystemPreferenceChange();
if (typeof this.mediaQuery.addEventListener === 'function') {
this.mediaQuery.addEventListener('change', handleChange);
} else if (typeof this.mediaQuery.addListener === 'function') {
this.mediaQuery.addListener(handleChange);
}
}
handleSystemPreferenceChange() {
if (this.currentTheme === 'system') {
this.applyTheme('system', false);
}
}
applyTheme(theme, persist = true) {
const normalized = this.normalizeTheme(theme);
const root = document.documentElement;
this.currentTheme = normalized;
if (persist) {
try {
localStorage.setItem(this.storageKey, normalized);
} catch (error) {
console.warn('Unable to persist theme preference:', error);
}
}
if (normalized === 'light' || normalized === 'dark') {
root.setAttribute('data-theme', normalized);
} else {
root.removeAttribute('data-theme');
}
root.setAttribute('data-theme-preference', normalized);
this.updateToggleUI(normalized);
this.updateMetaThemeColor();
const resolved = this.getResolvedTheme(normalized);
document.dispatchEvent(new CustomEvent('themechange', {
detail: {
preference: normalized,
theme: resolved
}
}));
}
updateToggleUI(theme) {
const label = this.labelMap[theme] || this.labelMap.system;
const icon = this.iconMap[theme] || this.iconMap.system;
if (this.themeLabel) {
this.themeLabel.textContent = label;
}
if (this.themeIcon) {
this.themeIcon.className = `fas ${icon} me-2`;
}
if (this.themeToggleButton) {
this.themeToggleButton.setAttribute('aria-label', `Theme: ${label}`);
}
this.themeOptions.forEach((option) => {
const isActive = option.dataset.themeOption === theme;
option.classList.toggle('active', isActive);
option.setAttribute('aria-checked', String(isActive));
});
}
updateMetaThemeColor() {
if (!this.metaThemeColor) return;
const computedColor = getComputedStyle(document.documentElement)
.getPropertyValue('--theme-color')
.trim();
if (computedColor) {
this.metaThemeColor.setAttribute('content', computedColor);
}
}
getResolvedTheme(theme = this.currentTheme) {
if (theme === 'system') {
return this.mediaQuery.matches ? 'dark' : 'light';
}
return theme;
}
}
class UnitForge {
constructor() {
this.themeManager = new ThemeManager();
this.baseUrl = window.location.origin;
this.apiUrl = `${this.baseUrl}/api`;
this.init();
@@ -377,3 +521,5 @@ const unitforge = new UnitForge();
// Export for use in other modules
window.UnitForge = UnitForge;
window.unitforge = unitforge;
window.ThemeManager = ThemeManager;
window.themeManager = unitforge.themeManager;
frontend/templates/cli.html
+80 -1
View File
@@ -14,6 +14,34 @@
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="{{ app_name }}" />
<script>
(function () {
const storageKey = 'unitforge-theme';
try {
const stored = localStorage.getItem(storageKey);
const theme = stored === 'light' || stored === 'dark' ? stored : 'system';
const root = document.documentElement;
root.setAttribute('data-theme-preference', theme);
if (theme === 'light' || theme === 'dark') {
root.setAttribute('data-theme', theme);
} else {
root.removeAttribute('data-theme');
}
const meta = document.querySelector('meta[name="theme-color"]');
if (meta) {
const prefersDark = typeof window !== 'undefined' &&
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
const appliedTheme = theme === 'system' ? (prefersDark ? 'dark' : 'light') : theme;
meta.setAttribute('content', appliedTheme === 'dark' ? '#0b1120' : '#0d6efd');
}
} catch (error) {
console.warn('Theme bootstrap failed:', error);
}
})();
</script>
<meta name="description" content="{{ app_name }} CLI — command-line interface to create, validate, and manage systemd unit files." />
<link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/static/vendor/fontawesome/css/all.min.css" />
@@ -48,7 +76,58 @@
<a class="nav-link active" href="/cli">CLI</a>
</li>
</ul>
<ul class="navbar-nav">
<ul class="navbar-nav align-items-lg-center gap-2 mt-3 mt-lg-0 ms-lg-3">
<li class="nav-item dropdown">
<button
class="btn btn-outline-light dropdown-toggle w-100 w-lg-auto"
id="themeDropdown"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
data-theme-toggle
>
<i class="fas fa-circle-half-stroke me-2" data-theme-icon></i>
<span data-theme-label>System</span>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
<li>
<button
class="dropdown-item d-flex align-items-center"
type="button"
data-theme-option="light"
role="menuitemradio"
aria-checked="false"
>
<i class="fas fa-sun me-2 text-warning"></i>
Light
</button>
</li>
<li>
<button
class="dropdown-item d-flex align-items-center"
type="button"
data-theme-option="dark"
role="menuitemradio"
aria-checked="false"
>
<i class="fas fa-moon me-2 text-info"></i>
Dark
</button>
</li>
<li>
<button
class="dropdown-item d-flex align-items-center"
type="button"
data-theme-option="system"
role="menuitemradio"
aria-checked="true"
>
<i class="fas fa-circle-half-stroke me-2 text-secondary"></i>
System
</button>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ api_docs_url }}" target="_blank">
<i class="fas fa-book me-1"></i>API Docs
frontend/templates/editor.html
+82 -3
View File
@@ -15,6 +15,34 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="{{ app_name }}">
<script>
(function () {
const storageKey = 'unitforge-theme';
try {
const stored = localStorage.getItem(storageKey);
const theme = stored === 'light' || stored === 'dark' ? stored : 'system';
const root = document.documentElement;
root.setAttribute('data-theme-preference', theme);
if (theme === 'light' || theme === 'dark') {
root.setAttribute('data-theme', theme);
} else {
root.removeAttribute('data-theme');
}
const meta = document.querySelector('meta[name="theme-color"]');
if (meta) {
const prefersDark = typeof window !== 'undefined' &&
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
const appliedTheme = theme === 'system' ? (prefersDark ? 'dark' : 'light') : theme;
meta.setAttribute('content', appliedTheme === 'dark' ? '#0b1120' : '#0d6efd');
}
} catch (error) {
console.warn('Theme bootstrap failed:', error);
}
})();
</script>
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
<link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
@@ -45,11 +73,62 @@
<a class="nav-link" href="/cli">CLI</a>
</li>
</ul>
<div class="navbar-nav">
<button class="btn btn-light btn-sm me-2" onclick="downloadFile()">
<div class="navbar-nav ms-auto align-items-lg-center gap-2 mt-3 mt-lg-0">
<div class="nav-item dropdown w-100 w-lg-auto">
<button
class="btn btn-outline-light dropdown-toggle w-100 w-lg-auto"
id="themeDropdown"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
data-theme-toggle
>
<i class="fas fa-circle-half-stroke me-2" data-theme-icon></i>
<span data-theme-label>System</span>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
<li>
<button
class="dropdown-item d-flex align-items-center"
type="button"
data-theme-option="light"
role="menuitemradio"
aria-checked="false"
>
<i class="fas fa-sun me-2 text-warning"></i>
Light
</button>
</li>
<li>
<button
class="dropdown-item d-flex align-items-center"
type="button"
data-theme-option="dark"
role="menuitemradio"
aria-checked="false"
>
<i class="fas fa-moon me-2 text-info"></i>
Dark
</button>
</li>
<li>
<button
class="dropdown-item d-flex align-items-center"
type="button"
data-theme-option="system"
role="menuitemradio"
aria-checked="true"
>
<i class="fas fa-circle-half-stroke me-2 text-secondary"></i>
System
</button>
</li>
</ul>
</div>
<button class="btn btn-light btn-sm w-100 w-lg-auto" onclick="downloadFile()">
<i class="fas fa-download me-1"></i>Download
</button>
<button class="btn btn-light btn-sm" onclick="showUploadModal()">
<button class="btn btn-light btn-sm w-100 w-lg-auto" onclick="showUploadModal()">
<i class="fas fa-upload me-1"></i>Upload
</button>
</div>
frontend/templates/index.html
+80 -1
View File
@@ -20,6 +20,34 @@
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="{{ app_name }}" />
<script>
(function () {
const storageKey = 'unitforge-theme';
try {
const stored = localStorage.getItem(storageKey);
const theme = stored === 'light' || stored === 'dark' ? stored : 'system';
const root = document.documentElement;
root.setAttribute('data-theme-preference', theme);
if (theme === 'light' || theme === 'dark') {
root.setAttribute('data-theme', theme);
} else {
root.removeAttribute('data-theme');
}
const meta = document.querySelector('meta[name="theme-color"]');
if (meta) {
const prefersDark = typeof window !== 'undefined' &&
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
const appliedTheme = theme === 'system' ? (prefersDark ? 'dark' : 'light') : theme;
meta.setAttribute('content', appliedTheme === 'dark' ? '#0b1120' : '#0d6efd');
}
} catch (error) {
console.warn('Theme bootstrap failed:', error);
}
})();
</script>
<link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/static/vendor/fontawesome/css/all.min.css" />
<link href="/static/css/style.css" rel="stylesheet" />
@@ -53,7 +81,58 @@
<a class="nav-link" href="/cli">CLI</a>
</li>
</ul>
<ul class="navbar-nav">
<ul class="navbar-nav align-items-lg-center gap-2 mt-3 mt-lg-0 ms-lg-3">
<li class="nav-item dropdown">
<button
class="btn btn-outline-light dropdown-toggle w-100 w-lg-auto"
id="themeDropdown"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
data-theme-toggle
>
<i class="fas fa-circle-half-stroke me-2" data-theme-icon></i>
<span data-theme-label>System</span>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
<li>
<button
class="dropdown-item d-flex align-items-center"
type="button"
data-theme-option="light"
role="menuitemradio"
aria-checked="false"
>
<i class="fas fa-sun me-2 text-warning"></i>
Light
</button>
</li>
<li>
<button
class="dropdown-item d-flex align-items-center"
type="button"
data-theme-option="dark"
role="menuitemradio"
aria-checked="false"
>
<i class="fas fa-moon me-2 text-info"></i>
Dark
</button>
</li>
<li>
<button
class="dropdown-item d-flex align-items-center"
type="button"
data-theme-option="system"
role="menuitemradio"
aria-checked="true"
>
<i class="fas fa-circle-half-stroke me-2 text-secondary"></i>
System
</button>
</li>
</ul>
</li>
<li class="nav-item">
<a
class="nav-link"
frontend/templates/templates.html
+81
View File
@@ -20,6 +20,34 @@
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="description" content="{{ app_name }} Templates — generate production-ready systemd unit files from curated templates." />
<meta name="apple-mobile-web-app-title" content="{{ app_name }}" />
<script>
(function () {
const storageKey = 'unitforge-theme';
try {
const stored = localStorage.getItem(storageKey);
const theme = stored === 'light' || stored === 'dark' ? stored : 'system';
const root = document.documentElement;
root.setAttribute('data-theme-preference', theme);
if (theme === 'light' || theme === 'dark') {
root.setAttribute('data-theme', theme);
} else {
root.removeAttribute('data-theme');
}
const meta = document.querySelector('meta[name="theme-color"]');
if (meta) {
const prefersDark = typeof window !== 'undefined' &&
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
const appliedTheme = theme === 'system' ? (prefersDark ? 'dark' : 'light') : theme;
meta.setAttribute('content', appliedTheme === 'dark' ? '#0b1120' : '#0d6efd');
}
} catch (error) {
console.warn('Theme bootstrap failed:', error);
}
})();
</script>
<link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/static/vendor/fontawesome/css/all.min.css" />
<link href="/static/css/style.css" rel="stylesheet" />
@@ -55,6 +83,59 @@
<a class="nav-link" href="/cli">CLI</a>
</li>
</ul>
<ul class="navbar-nav align-items-lg-center gap-2 mt-3 mt-lg-0 ms-lg-3">
<li class="nav-item dropdown w-100 w-lg-auto">
<button
class="btn btn-outline-light dropdown-toggle w-100 w-lg-auto"
id="themeDropdown"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
data-theme-toggle
>
<i class="fas fa-circle-half-stroke me-2" data-theme-icon></i>
<span data-theme-label>System</span>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
<li>
<button
class="dropdown-item d-flex align-items-center"
type="button"
data-theme-option="light"
role="menuitemradio"
aria-checked="false"
>
<i class="fas fa-sun me-2 text-warning"></i>
Light
</button>
</li>
<li>
<button
class="dropdown-item d-flex align-items-center"
type="button"
data-theme-option="dark"
role="menuitemradio"
aria-checked="false"
>
<i class="fas fa-moon me-2 text-info"></i>
Dark
</button>
</li>
<li>
<button
class="dropdown-item d-flex align-items-center"
type="button"
data-theme-option="system"
role="menuitemradio"
aria-checked="true"
>
<i class="fas fa-circle-half-stroke me-2 text-secondary"></i>
System
</button>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>