Highground-Soft/Hightube
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

updated website style

Browse Source
This commit is contained in:
CGH0S7
2026-06-24 10:44:15 +08:00
committed by root
parent da577299a0
commit 44318e0e4d
2 changed files with 227 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
website/index.html
View File

@@ -17,18 +17,25 @@
<img src="assets/hightube-icon.png" alt="" />
<span>Hightube</span>
</a>
<button class="hamburger" aria-label="Toggle navigation" aria-expanded="false">
<span></span>
<span></span>
<span></span>
</button>
<nav class="nav" aria-label="Primary navigation">
<a href="#architecture">Architecture</a>
<a href="#features">Features</a>
<a href="#downloads">Downloads</a>
<a href="#source">Source</a>
<a class="nav-cta" href="https://stream.nudt.space" target="_blank" rel="noopener">立即尝试</a>
<a class="nav-cta" href="https://stream.nudt.space" target="_blank" rel="noopener">Try Now</a>
</nav>
<div class="topbar-actions">
<button class="theme-toggle" data-state="auto" aria-label="Theme: Auto" title="Theme: Auto — click to force Light">
<svg class="icon-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
<svg class="icon-moon" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
<svg class="icon-auto" viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
</button>
<button class="hamburger" aria-label="Toggle navigation" aria-expanded="false">
<span></span>
<span></span>
<span></span>
</button>
</div>
</header>
<main id="home">
@@ -267,19 +274,71 @@
<script>
(function () {
/* ---- hamburger menu ---- */
var btn = document.querySelector('.hamburger');
var nav = document.querySelector('.nav');
if (!btn || !nav) return;
btn.addEventListener('click', function () {
var open = nav.classList.toggle('open');
btn.setAttribute('aria-expanded', open);
if (btn && nav) {
btn.addEventListener('click', function () {
var open = nav.classList.toggle('open');
btn.setAttribute('aria-expanded', open);
});
}
/* ---- theme toggle ---- */
var toggle = document.querySelector('.theme-toggle');
if (!toggle) return;
var STATES = ['auto', 'light', 'dark'];
var LABELS = {
auto: 'Theme: Auto — click to force Light',
light: 'Theme: Light — click to force Dark',
dark: 'Theme: Dark — click to return to Auto'
};
function getTheme() {
return localStorage.getItem('theme') || 'auto';
}
function applyTheme(state) {
if (state === 'light') {
document.documentElement.setAttribute('data-theme', 'light');
} else if (state === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
} else {
document.documentElement.removeAttribute('data-theme');
}
toggle.setAttribute('data-state', state);
toggle.setAttribute('aria-label', 'Theme: ' + state.charAt(0).toUpperCase() + state.slice(1));
toggle.setAttribute('title', LABELS[state]);
localStorage.setItem('theme', state);
}
function nextTheme(current) {
var idx = STATES.indexOf(current);
return STATES[(idx + 1) % STATES.length];
}
// init
var current = getTheme();
applyTheme(current);
toggle.addEventListener('click', function () {
applyTheme(nextTheme(getTheme()));
});
// listen for system changes (only matters in auto mode)
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
if (getTheme() === 'auto') {
// force a repaint by re-applying auto
applyTheme('auto');
}
});
})();
</script>
<footer class="footer">
<span>Hightube</span>
<span class="footer-hide-mobile">Hightube</span>
<span>Built with ❤️ by HighGround-soft 2026</span>
<span>Open Source Live Platform</span>
<span class="footer-hide-mobile">Open Source Live Platform</span>
</footer>
</body>
</html>