Initial commit: SpdUp Windows Gaming Booster v1.0.0
- .NET 8 WPF app with full MVVM architecture - One-click boost: CPU, RAM, GPU, network, services, timer resolution - Real-time system monitor (LibreHardwareMonitor) - Auto game detection (30+ games) - RAM optimizer with kernel-level cleanup - Network optimizer (TCP registry tweaks) - Service manager, process manager, shader cache cleaner - Desktop widget overlay - Debug log viewer - Custom dark gaming theme with trans pride colors - 84 unit tests (xUnit) - Inno Setup installer script - Landing page website
This commit is contained in:
Phil-icyou
@@ -0,0 +1,960 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SpdUp – Gaming Booster for Windows</title>
|
||||
<meta name="description" content="SpdUp is a free, open-source Windows gaming booster. Optimize CPU, RAM, GPU, network and services with one click. Built with love by Mandy.">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ═══ RESET & BASE ════════════════════════════════════ */
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: #08080a;
|
||||
color: #e0e0e0;
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
a { color: #30d158; text-decoration: none; transition: color .2s; }
|
||||
a:hover { color: #5bea7d; }
|
||||
img { max-width: 100%; display: block; }
|
||||
|
||||
/* ═══ UTILITIES ═══════════════════════════════════════ */
|
||||
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
|
||||
.section { padding: 100px 0; }
|
||||
.text-center { text-align: center; }
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, #30d158 0%, #0af5f0 50%, #a78bfa 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 6px 16px;
|
||||
border-radius: 100px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.badge-green { background: rgba(48,209,88,.12); color: #30d158; border: 1px solid rgba(48,209,88,.25); }
|
||||
.badge-cyan { background: rgba(10,245,240,.10); color: #0af5f0; border: 1px solid rgba(10,245,240,.2); }
|
||||
.badge-purple{ background: rgba(167,139,250,.10);color: #a78bfa; border: 1px solid rgba(167,139,250,.2); }
|
||||
|
||||
/* ═══ NAVIGATION ══════════════════════════════════════ */
|
||||
.navbar {
|
||||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||||
padding: 16px 0;
|
||||
background: rgba(8,8,10,.8);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(255,255,255,.06);
|
||||
transition: padding .3s;
|
||||
}
|
||||
.navbar.scrolled { padding: 10px 0; }
|
||||
.navbar .container { display: flex; align-items: center; justify-content: space-between; }
|
||||
.nav-logo {
|
||||
font-size: 1.4rem; font-weight: 800;
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
}
|
||||
.nav-logo .bolt { color: #30d158; font-size: 1.5rem; }
|
||||
.nav-links { display: flex; gap: 32px; list-style: none; }
|
||||
.nav-links a {
|
||||
color: #9ca3af; font-size: .9rem; font-weight: 500;
|
||||
transition: color .2s;
|
||||
}
|
||||
.nav-links a:hover { color: #fff; }
|
||||
.nav-cta {
|
||||
padding: 8px 20px; border-radius: 8px;
|
||||
background: #30d158; color: #000 !important;
|
||||
font-weight: 600; font-size: .9rem;
|
||||
transition: transform .2s, box-shadow .2s;
|
||||
}
|
||||
.nav-cta:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 0 24px rgba(48,209,88,.35);
|
||||
color: #000 !important;
|
||||
}
|
||||
.mobile-toggle { display: none; background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; }
|
||||
|
||||
/* ═══ HERO ════════════════════════════════════════════ */
|
||||
.hero {
|
||||
position: relative;
|
||||
padding: 180px 0 120px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute; top: -50%; left: -50%;
|
||||
width: 200%; height: 200%;
|
||||
background: radial-gradient(ellipse at 50% 0%, rgba(48,209,88,.08) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 80% 50%, rgba(10,245,240,.05) 0%, transparent 40%),
|
||||
radial-gradient(ellipse at 20% 80%, rgba(167,139,250,.05) 0%, transparent 40%);
|
||||
animation: heroGlow 8s ease-in-out infinite alternate;
|
||||
}
|
||||
@keyframes heroGlow {
|
||||
0% { transform: translate(0, 0) scale(1); }
|
||||
100% { transform: translate(-2%, -1%) scale(1.05); }
|
||||
}
|
||||
.hero .container { position: relative; z-index: 1; }
|
||||
.hero h1 {
|
||||
font-size: clamp(3rem, 7vw, 5.5rem);
|
||||
font-weight: 900;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.03em;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.hero .subtitle {
|
||||
font-size: clamp(1.1rem, 2vw, 1.35rem);
|
||||
color: #9ca3af;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
.hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
padding: 14px 32px;
|
||||
border-radius: 12px;
|
||||
font-size: 1rem; font-weight: 600;
|
||||
cursor: pointer; border: none;
|
||||
transition: transform .2s, box-shadow .3s;
|
||||
}
|
||||
.btn:hover { transform: translateY(-2px); }
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #30d158, #28b84c);
|
||||
color: #000;
|
||||
box-shadow: 0 4px 24px rgba(48,209,88,.25);
|
||||
}
|
||||
.btn-primary:hover { box-shadow: 0 8px 40px rgba(48,209,88,.4); color: #000; }
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: #e0e0e0;
|
||||
border: 1.5px solid rgba(255,255,255,.15);
|
||||
}
|
||||
.btn-outline:hover { border-color: rgba(255,255,255,.35); color: #fff; }
|
||||
|
||||
.hero-stats {
|
||||
display: flex; justify-content: center; gap: 48px;
|
||||
margin-top: 64px; flex-wrap: wrap;
|
||||
}
|
||||
.hero-stat { text-align: center; }
|
||||
.hero-stat .num {
|
||||
font-size: 2.5rem; font-weight: 800;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
.hero-stat .label { font-size: .85rem; color: #6b7280; margin-top: 4px; }
|
||||
|
||||
/* ═══ APP PREVIEW (CSS MOCKUP) ════════════════════════ */
|
||||
.app-preview-section { padding: 40px 0 100px; }
|
||||
.app-window {
|
||||
max-width: 1000px; margin: 0 auto;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255,255,255,.08);
|
||||
box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 80px rgba(48,209,88,.06);
|
||||
background: #0d0d0f;
|
||||
}
|
||||
.app-titlebar {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 0 16px; height: 36px;
|
||||
background: #16161a;
|
||||
border-bottom: 1px solid rgba(255,255,255,.06);
|
||||
}
|
||||
.app-titlebar-title { font-size: .75rem; color: #9ca3af; }
|
||||
.app-titlebar-title span { color: #30d158; }
|
||||
.app-titlebar-btns { display: flex; gap: 2px; }
|
||||
.app-titlebar-btns div {
|
||||
width: 36px; height: 26px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: .7rem; color: #6b7280; border-radius: 4px;
|
||||
cursor: default;
|
||||
}
|
||||
.app-titlebar-btns div:hover { background: rgba(255,255,255,.08); }
|
||||
.app-titlebar-btns div:last-child:hover { background: #e81123; color: #fff; }
|
||||
.app-body { display: flex; min-height: 450px; }
|
||||
.app-sidebar {
|
||||
width: 200px; flex-shrink: 0;
|
||||
background: #16161a;
|
||||
border-right: 1px solid rgba(255,255,255,.06);
|
||||
padding: 16px 0;
|
||||
}
|
||||
.app-sidebar-brand { padding: 0 16px 12px; font-size: 1.1rem; font-weight: 700; color: #30d158; }
|
||||
.app-sidebar-sub { font-size: .65rem; color: #6b7280; font-weight: 400; }
|
||||
.app-sidebar-section { font-size: .6rem; font-weight: 700; color: #4b5563; padding: 16px 16px 6px; letter-spacing: .08em; text-transform: uppercase; }
|
||||
.app-sidebar-item {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 8px 16px; font-size: .8rem; color: #9ca3af;
|
||||
cursor: default; transition: background .15s;
|
||||
}
|
||||
.app-sidebar-item:hover { background: rgba(255,255,255,.04); }
|
||||
.app-sidebar-item.active { background: rgba(48,209,88,.08); color: #30d158; }
|
||||
.app-sidebar-item .icon { font-size: .9rem; width: 20px; text-align: center; }
|
||||
.app-sidebar-flag {
|
||||
display: flex; flex-direction: column; padding: 12px 16px;
|
||||
margin-top: auto;
|
||||
}
|
||||
.trans-flag-bar { height: 3px; }
|
||||
.trans-flag-bar:nth-child(1) { background: #5bcefa; border-radius: 2px 2px 0 0; }
|
||||
.trans-flag-bar:nth-child(2) { background: #f5a9b8; }
|
||||
.trans-flag-bar:nth-child(3) { background: #fff; }
|
||||
.trans-flag-bar:nth-child(4) { background: #f5a9b8; }
|
||||
.trans-flag-bar:nth-child(5) { background: #5bcefa; border-radius: 0 0 2px 2px; }
|
||||
.app-sidebar-credit { font-size: .6rem; color: #4b5563; text-align: center; margin-top: 6px; }
|
||||
.app-main { flex: 1; padding: 24px; overflow: hidden; }
|
||||
.app-main-header {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.app-main-title { font-size: 1.2rem; font-weight: 700; }
|
||||
.app-metrics { display: flex; gap: 16px; font-size: .75rem; font-family: 'JetBrains Mono', monospace; }
|
||||
.app-metrics span { color: #6b7280; }
|
||||
.metric-val-cyan { color: #0af5f0 !important; }
|
||||
.metric-val-green { color: #30d158 !important; }
|
||||
.metric-val-purple { color: #a78bfa !important; }
|
||||
.metric-val-orange { color: #ff9f0a !important; }
|
||||
|
||||
/* Dashboard cards inside mockup */
|
||||
.dash-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
|
||||
.dash-card {
|
||||
background: #1e1e24; border-radius: 10px; padding: 16px;
|
||||
border: 1px solid rgba(255,255,255,.05);
|
||||
}
|
||||
.dash-card .label { font-size: .65rem; color: #6b7280; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
|
||||
.dash-card .value { font-size: 1.5rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
|
||||
.boost-card {
|
||||
background: linear-gradient(135deg, rgba(48,209,88,.1), rgba(10,245,240,.05));
|
||||
border-radius: 12px; padding: 20px;
|
||||
border: 1px solid rgba(48,209,88,.15);
|
||||
display: flex; align-items: center; gap: 20px;
|
||||
}
|
||||
.boost-btn-mock {
|
||||
width: 64px; height: 64px; border-radius: 50%;
|
||||
background: linear-gradient(135deg, #30d158, #28b84c);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 1.6rem; color: #000; flex-shrink: 0;
|
||||
box-shadow: 0 0 24px rgba(48,209,88,.3);
|
||||
}
|
||||
.boost-info .boost-title { font-size: 1rem; font-weight: 700; color: #30d158; }
|
||||
.boost-info .boost-desc { font-size: .75rem; color: #9ca3af; margin-top: 4px; }
|
||||
.boost-steps { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
|
||||
.boost-step { font-size: .6rem; padding: 3px 8px; border-radius: 4px; background: rgba(48,209,88,.1); color: #30d158; }
|
||||
|
||||
/* ═══ FEATURES ════════════════════════════════════════ */
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 24px;
|
||||
margin-top: 56px;
|
||||
}
|
||||
.feature-card {
|
||||
background: linear-gradient(135deg, rgba(22,22,26,.8), rgba(30,30,36,.6));
|
||||
border: 1px solid rgba(255,255,255,.06);
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
transition: transform .3s, border-color .3s, box-shadow .3s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.feature-card::before {
|
||||
content: '';
|
||||
position: absolute; top: 0; left: 0; right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--accent), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity .3s;
|
||||
}
|
||||
.feature-card:hover {
|
||||
transform: translateY(-4px);
|
||||
border-color: rgba(255,255,255,.12);
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,.3);
|
||||
}
|
||||
.feature-card:hover::before { opacity: 1; }
|
||||
.feature-icon {
|
||||
width: 48px; height: 48px;
|
||||
border-radius: 12px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.feature-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; color: #fff; }
|
||||
.feature-card p { font-size: .9rem; color: #9ca3af; line-height: 1.7; }
|
||||
|
||||
/* ═══ SCREENSHOT SECTION ══════════════════════════════ */
|
||||
.screenshots { background: #0c0c0e; }
|
||||
.screenshot-tabs {
|
||||
display: flex; justify-content: center; gap: 8px;
|
||||
margin-bottom: 48px; flex-wrap: wrap;
|
||||
}
|
||||
.screenshot-tab {
|
||||
padding: 10px 24px; border-radius: 100px;
|
||||
background: rgba(255,255,255,.04);
|
||||
border: 1px solid rgba(255,255,255,.08);
|
||||
color: #9ca3af; font-size: .85rem; font-weight: 500;
|
||||
cursor: pointer; transition: all .2s;
|
||||
}
|
||||
.screenshot-tab:hover { background: rgba(255,255,255,.08); color: #fff; }
|
||||
.screenshot-tab.active {
|
||||
background: rgba(48,209,88,.1);
|
||||
border-color: rgba(48,209,88,.3);
|
||||
color: #30d158;
|
||||
}
|
||||
.screenshot-display {
|
||||
max-width: 900px; margin: 0 auto;
|
||||
border-radius: 12px; overflow: hidden;
|
||||
border: 1px solid rgba(255,255,255,.08);
|
||||
box-shadow: 0 30px 80px rgba(0,0,0,.5);
|
||||
background: #0d0d0f;
|
||||
}
|
||||
.screenshot-placeholder {
|
||||
aspect-ratio: 16/9;
|
||||
display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center;
|
||||
background: linear-gradient(135deg, #0d0d0f, #16161a);
|
||||
color: #4b5563;
|
||||
font-size: .9rem;
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.screenshot-placeholder .icon { font-size: 3rem; margin-bottom: 12px; opacity: .5; }
|
||||
.screenshot-placeholder .hint { font-size: .75rem; margin-top: 8px; color: #374151; }
|
||||
.screenshot-placeholder img {
|
||||
position: absolute; inset: 0;
|
||||
width: 100%; height: 100%; object-fit: cover;
|
||||
}
|
||||
|
||||
/* ═══ HOW IT WORKS ════════════════════════════════════ */
|
||||
.steps-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 32px;
|
||||
margin-top: 56px;
|
||||
}
|
||||
.step-card {
|
||||
text-align: center;
|
||||
padding: 40px 24px;
|
||||
border-radius: 16px;
|
||||
background: rgba(22,22,26,.5);
|
||||
border: 1px solid rgba(255,255,255,.05);
|
||||
position: relative;
|
||||
}
|
||||
.step-num {
|
||||
width: 56px; height: 56px;
|
||||
border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 1.3rem; font-weight: 800;
|
||||
margin: 0 auto 20px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
.step-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; color: #fff; }
|
||||
.step-card p { font-size: .88rem; color: #9ca3af; }
|
||||
|
||||
/* ═══ TECH SPECS ══════════════════════════════════════ */
|
||||
.specs-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
margin-top: 48px;
|
||||
}
|
||||
.spec-item {
|
||||
display: flex; align-items: flex-start; gap: 14px;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
background: rgba(22,22,26,.4);
|
||||
border: 1px solid rgba(255,255,255,.04);
|
||||
}
|
||||
.spec-icon {
|
||||
width: 40px; height: 40px; border-radius: 10px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 1.1rem; flex-shrink: 0;
|
||||
background: rgba(48,209,88,.08);
|
||||
}
|
||||
.spec-item h4 { font-size: .95rem; font-weight: 600; color: #fff; margin-bottom: 4px; }
|
||||
.spec-item p { font-size: .82rem; color: #6b7280; }
|
||||
|
||||
/* ═══ DOWNLOAD / CTA ══════════════════════════════════ */
|
||||
.download-section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.download-section::before {
|
||||
content: '';
|
||||
position: absolute; inset: 0;
|
||||
background: radial-gradient(ellipse at center, rgba(48,209,88,.06) 0%, transparent 60%);
|
||||
}
|
||||
.download-box {
|
||||
position: relative;
|
||||
max-width: 700px; margin: 0 auto;
|
||||
padding: 56px 48px;
|
||||
border-radius: 24px;
|
||||
background: linear-gradient(135deg, rgba(22,22,26,.9), rgba(30,30,36,.7));
|
||||
border: 1px solid rgba(48,209,88,.15);
|
||||
text-align: center;
|
||||
box-shadow: 0 40px 100px rgba(0,0,0,.4);
|
||||
}
|
||||
.download-box h2 { font-size: 2.2rem; font-weight: 800; margin-bottom: 12px; }
|
||||
.download-box p { color: #9ca3af; margin-bottom: 32px; font-size: 1.05rem; }
|
||||
.download-info {
|
||||
display: flex; justify-content: center; gap: 32px;
|
||||
margin-top: 24px; font-size: .82rem; color: #6b7280;
|
||||
}
|
||||
.download-info span { display: flex; align-items: center; gap: 6px; }
|
||||
|
||||
/* ═══ FOOTER ══════════════════════════════════════════ */
|
||||
footer {
|
||||
padding: 48px 0 32px;
|
||||
border-top: 1px solid rgba(255,255,255,.05);
|
||||
}
|
||||
.footer-content {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
flex-wrap: wrap; gap: 16px;
|
||||
}
|
||||
.footer-brand { display: flex; align-items: center; gap: 10px; }
|
||||
.footer-brand .name { font-weight: 700; font-size: 1.1rem; }
|
||||
.footer-brand .bolt { color: #30d158; }
|
||||
.footer-links { display: flex; gap: 24px; }
|
||||
.footer-links a { color: #6b7280; font-size: .85rem; }
|
||||
.footer-links a:hover { color: #e0e0e0; }
|
||||
.footer-bottom {
|
||||
text-align: center; margin-top: 32px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid rgba(255,255,255,.04);
|
||||
}
|
||||
.trans-flag-inline {
|
||||
display: inline-flex; gap: 2px;
|
||||
vertical-align: middle; margin: 0 6px;
|
||||
height: 12px; border-radius: 3px; overflow: hidden;
|
||||
}
|
||||
.trans-flag-inline span { width: 10px; }
|
||||
.trans-flag-inline .tf-blue { background: #5bcefa; }
|
||||
.trans-flag-inline .tf-pink { background: #f5a9b8; }
|
||||
.trans-flag-inline .tf-white { background: #fff; }
|
||||
|
||||
/* ═══ ANIMATIONS ══════════════════════════════════════ */
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(32px);
|
||||
transition: opacity .7s ease, transform .7s ease;
|
||||
}
|
||||
.reveal.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* ═══ RESPONSIVE ══════════════════════════════════════ */
|
||||
@media (max-width: 900px) {
|
||||
.steps-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
|
||||
.dash-cards { grid-template-columns: repeat(2, 1fr); }
|
||||
.app-sidebar { width: 160px; }
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.nav-links { display: none; }
|
||||
.mobile-toggle { display: block; }
|
||||
.nav-links.open {
|
||||
display: flex; flex-direction: column;
|
||||
position: absolute; top: 100%; left: 0; right: 0;
|
||||
background: rgba(8,8,10,.95);
|
||||
backdrop-filter: blur(20px);
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid rgba(255,255,255,.06);
|
||||
}
|
||||
.hero { padding: 140px 0 80px; }
|
||||
.hero-stats { gap: 24px; }
|
||||
.features-grid { grid-template-columns: 1fr; }
|
||||
.app-body { flex-direction: column; }
|
||||
.app-sidebar { width: 100%; border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); padding: 8px 0; }
|
||||
.app-sidebar-section, .app-sidebar-flag, .app-sidebar-credit { display: none; }
|
||||
.app-sidebar-item { display: inline-flex; padding: 6px 12px; font-size: .7rem; }
|
||||
.download-box { padding: 40px 24px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ═══ NAVBAR ═════════════════════════════════════════════════ -->
|
||||
<nav class="navbar" id="navbar">
|
||||
<div class="container">
|
||||
<a href="#" class="nav-logo"><span class="bolt">⚡</span> SpdUp</a>
|
||||
<ul class="nav-links" id="navLinks">
|
||||
<li><a href="#features">Features</a></li>
|
||||
<li><a href="#preview">Preview</a></li>
|
||||
<li><a href="#how-it-works">How it Works</a></li>
|
||||
<li><a href="#specs">Tech</a></li>
|
||||
<li><a href="#download" class="nav-cta">Download</a></li>
|
||||
</ul>
|
||||
<button class="mobile-toggle" id="mobileToggle" aria-label="Toggle navigation">☰</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ═══ HERO ══════════════════════════════════════════════════ -->
|
||||
<section class="hero text-center">
|
||||
<div class="container">
|
||||
<span class="badge badge-green">Free & Open Source</span>
|
||||
<h1 style="margin-top:20px">
|
||||
Boost Your<br><span class="text-gradient">Gaming Performance</span>
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
SpdUp optimizes your Windows PC for gaming — CPU priority, RAM cleanup, GPU tweaks, network tuning, and service management. All in one click.
|
||||
</p>
|
||||
<div class="hero-buttons">
|
||||
<a href="#download" class="btn btn-primary">⬇ Download for Windows</a>
|
||||
<a href="#features" class="btn btn-outline">Learn More →</a>
|
||||
</div>
|
||||
<div class="hero-stats">
|
||||
<div class="hero-stat">
|
||||
<div class="num text-gradient">8+</div>
|
||||
<div class="label">Optimization Steps</div>
|
||||
</div>
|
||||
<div class="hero-stat">
|
||||
<div class="num" style="color:#0af5f0">0ms</div>
|
||||
<div class="label">Timer Resolution</div>
|
||||
</div>
|
||||
<div class="hero-stat">
|
||||
<div class="num" style="color:#a78bfa">1‑Click</div>
|
||||
<div class="label">Boost Activation</div>
|
||||
</div>
|
||||
<div class="hero-stat">
|
||||
<div class="num" style="color:#ff9f0a">100%</div>
|
||||
<div class="label">Free Forever</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══ APP PREVIEW (CSS MOCKUP) ══════════════════════════════ -->
|
||||
<section class="app-preview-section">
|
||||
<div class="container reveal">
|
||||
<div class="app-window">
|
||||
<div class="app-titlebar">
|
||||
<div class="app-titlebar-title"><span>⚡</span> SpdUp – Gaming Booster</div>
|
||||
<div class="app-titlebar-btns">
|
||||
<div>—</div>
|
||||
<div>☐</div>
|
||||
<div>✕</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-body">
|
||||
<div class="app-sidebar">
|
||||
<div class="app-sidebar-brand">⚡ SpdUp <span class="app-sidebar-sub">Gaming Booster</span></div>
|
||||
<div class="app-sidebar-section">Main</div>
|
||||
<div class="app-sidebar-item active"><span class="icon">📊</span> Dashboard</div>
|
||||
<div class="app-sidebar-item"><span class="icon">🚀</span> Game Boost</div>
|
||||
<div class="app-sidebar-item"><span class="icon">📈</span> System Monitor</div>
|
||||
<div class="app-sidebar-section">Manage</div>
|
||||
<div class="app-sidebar-item"><span class="icon">🎮</span> Game Library</div>
|
||||
<div class="app-sidebar-item"><span class="icon">📋</span> Processes</div>
|
||||
<div class="app-sidebar-item"><span class="icon">⚙</span> Services</div>
|
||||
<div class="app-sidebar-section">Other</div>
|
||||
<div class="app-sidebar-item"><span class="icon">🖥</span> Widget</div>
|
||||
<div class="app-sidebar-item"><span class="icon">🐛</span> Debug Log</div>
|
||||
<div class="app-sidebar-item"><span class="icon">⚙</span> Settings</div>
|
||||
<div style="flex:1;"></div>
|
||||
<div class="app-sidebar-flag">
|
||||
<div class="trans-flag-bar"></div>
|
||||
<div class="trans-flag-bar"></div>
|
||||
<div class="trans-flag-bar"></div>
|
||||
<div class="trans-flag-bar"></div>
|
||||
<div class="trans-flag-bar"></div>
|
||||
<div class="app-sidebar-credit">Made with ❤️ by Mandy</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-main">
|
||||
<div class="app-main-header">
|
||||
<div class="app-main-title">Dashboard</div>
|
||||
<div class="app-metrics">
|
||||
<span>CPU <span class="metric-val-cyan">12%</span></span>
|
||||
<span>RAM <span class="metric-val-green">54%</span></span>
|
||||
<span>GPU <span class="metric-val-purple">3%</span></span>
|
||||
<span>Ping <span class="metric-val-orange">14ms</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dash-cards">
|
||||
<div class="dash-card">
|
||||
<div class="label">CPU Usage</div>
|
||||
<div class="value" style="color:#0af5f0">12<span style="font-size:.8rem;color:#6b7280">%</span></div>
|
||||
</div>
|
||||
<div class="dash-card">
|
||||
<div class="label">RAM Usage</div>
|
||||
<div class="value" style="color:#30d158">8.7<span style="font-size:.8rem;color:#6b7280"> GB</span></div>
|
||||
</div>
|
||||
<div class="dash-card">
|
||||
<div class="label">GPU Temp</div>
|
||||
<div class="value" style="color:#a78bfa">42<span style="font-size:.8rem;color:#6b7280">°C</span></div>
|
||||
</div>
|
||||
<div class="dash-card">
|
||||
<div class="label">Network</div>
|
||||
<div class="value" style="color:#ff9f0a">14<span style="font-size:.8rem;color:#6b7280">ms</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="boost-card">
|
||||
<div class="boost-btn-mock">🚀</div>
|
||||
<div class="boost-info">
|
||||
<div class="boost-title">Game Boost Ready</div>
|
||||
<div class="boost-desc">Click to optimize CPU, RAM, GPU, network, and services for peak gaming performance.</div>
|
||||
<div class="boost-steps">
|
||||
<span class="boost-step">CPU Priority</span>
|
||||
<span class="boost-step">RAM Cleanup</span>
|
||||
<span class="boost-step">Timer Res</span>
|
||||
<span class="boost-step">GPU Tweaks</span>
|
||||
<span class="boost-step">Network</span>
|
||||
<span class="boost-step">Services</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══ FEATURES ══════════════════════════════════════════════ -->
|
||||
<section class="section" id="features">
|
||||
<div class="container text-center">
|
||||
<span class="badge badge-cyan">Features</span>
|
||||
<h2 style="font-size:2.5rem; font-weight:800; margin-top:16px;">
|
||||
Everything You Need to <span class="text-gradient">Win</span>
|
||||
</h2>
|
||||
<p style="color:#9ca3af; max-width:560px; margin:12px auto 0; font-size:1.05rem;">
|
||||
SpdUp packs powerful optimization tools into a beautiful dark UI — designed for gamers who want every last frame.
|
||||
</p>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card reveal" style="--accent:#30d158">
|
||||
<div class="feature-icon" style="background:rgba(48,209,88,.1); color:#30d158;">🚀</div>
|
||||
<h3>One-Click Boost</h3>
|
||||
<p>Activate Game Boost to set CPU priority, flush RAM, lower timer resolution, tweak GPU power profiles, optimize network settings, and stop unnecessary services — all with a single click.</p>
|
||||
</div>
|
||||
<div class="feature-card reveal" style="--accent:#0af5f0">
|
||||
<div class="feature-icon" style="background:rgba(10,245,240,.1); color:#0af5f0;">🧹</div>
|
||||
<h3>RAM Optimizer</h3>
|
||||
<p>Deep RAM cleanup that goes beyond simple cache clearing: trims working sets of all processes and purges the Windows Standby List using kernel-level calls for maximum free memory.</p>
|
||||
</div>
|
||||
<div class="feature-card reveal" style="--accent:#a78bfa">
|
||||
<div class="feature-icon" style="background:rgba(167,139,250,.1); color:#a78bfa;">📈</div>
|
||||
<h3>Real-Time Monitor</h3>
|
||||
<p>Live system metrics including CPU, GPU, RAM utilization, temperatures, fan speeds, and network latency — powered by LibreHardwareMonitor for accurate hardware readings.</p>
|
||||
</div>
|
||||
<div class="feature-card reveal" style="--accent:#ff9f0a">
|
||||
<div class="feature-icon" style="background:rgba(255,159,10,.1); color:#ff9f0a;">🌐</div>
|
||||
<h3>Network Optimizer</h3>
|
||||
<p>Applies TCP registry tweaks (Nagle's algorithm, receive window auto-tuning) and monitors ping latency in real-time. Designed for low-latency competitive gaming.</p>
|
||||
</div>
|
||||
<div class="feature-card reveal" style="--accent:#ff453a">
|
||||
<div class="feature-icon" style="background:rgba(255,69,58,.1); color:#ff453a;">⚙️</div>
|
||||
<h3>Service Manager</h3>
|
||||
<p>Smart service detection identifies non-essential Windows services that consume resources. Safely disable them during gaming and restore them afterward.</p>
|
||||
</div>
|
||||
<div class="feature-card reveal" style="--accent:#5bcefa">
|
||||
<div class="feature-icon" style="background:rgba(91,206,250,.1); color:#5bcefa;">🎮</div>
|
||||
<h3>Game Detection</h3>
|
||||
<p>Automatically detects when you launch a game and applies boost optimizations. Detects 30+ popular games including Steam, Epic, Riot, Blizzard, and EA titles.</p>
|
||||
</div>
|
||||
<div class="feature-card reveal" style="--accent:#30d158">
|
||||
<div class="feature-icon" style="background:rgba(48,209,88,.1); color:#30d158;">🗑️</div>
|
||||
<h3>Shader Cache Cleaner</h3>
|
||||
<p>Clears DirectX, NVIDIA, AMD, and Intel shader caches to free disk space and fix rendering issues. Scans all known cache locations automatically.</p>
|
||||
</div>
|
||||
<div class="feature-card reveal" style="--accent:#f5a9b8">
|
||||
<div class="feature-icon" style="background:rgba(245,169,184,.1); color:#f5a9b8;">📋</div>
|
||||
<h3>Process Manager</h3>
|
||||
<p>View and manage running processes with the ability to set CPU priority and affinity. Kill resource-hungry background processes to reclaim performance.</p>
|
||||
</div>
|
||||
<div class="feature-card reveal" style="--accent:#a78bfa">
|
||||
<div class="feature-icon" style="background:rgba(167,139,250,.1); color:#a78bfa;">🖥️</div>
|
||||
<h3>Desktop Widget</h3>
|
||||
<p>Always-on-top floating widget shows CPU, RAM, GPU, and ping at a glance while you game — with a one-click boost button right on your desktop.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══ SCREENSHOT GALLERY ════════════════════════════════════ -->
|
||||
<section class="section screenshots" id="preview">
|
||||
<div class="container text-center">
|
||||
<span class="badge badge-purple">Preview</span>
|
||||
<h2 style="font-size:2.5rem; font-weight:800; margin-top:16px;">
|
||||
See It In <span class="text-gradient">Action</span>
|
||||
</h2>
|
||||
<p style="color:#9ca3af; max-width:500px; margin:12px auto 40px; font-size:1.02rem;">
|
||||
A dark, modern UI designed for gamers who appreciate clean aesthetics.
|
||||
</p>
|
||||
<div class="screenshot-tabs">
|
||||
<button class="screenshot-tab active" data-tab="dashboard">Dashboard</button>
|
||||
<button class="screenshot-tab" data-tab="boost">Game Boost</button>
|
||||
<button class="screenshot-tab" data-tab="monitor">Monitor</button>
|
||||
<button class="screenshot-tab" data-tab="processes">Processes</button>
|
||||
<button class="screenshot-tab" data-tab="services">Services</button>
|
||||
<button class="screenshot-tab" data-tab="debug">Debug Log</button>
|
||||
</div>
|
||||
<div class="screenshot-display reveal">
|
||||
<div class="screenshot-placeholder" id="screenshotArea">
|
||||
<!-- Replace src with your actual screenshots: screenshots/dashboard.png etc. -->
|
||||
<div class="icon" id="ssIcon">📊</div>
|
||||
<div id="ssTitle">Dashboard View</div>
|
||||
<div class="hint" id="ssHint">Place your screenshot in website/screenshots/dashboard.png</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══ HOW IT WORKS ══════════════════════════════════════════ -->
|
||||
<section class="section" id="how-it-works">
|
||||
<div class="container text-center">
|
||||
<span class="badge badge-green">How it Works</span>
|
||||
<h2 style="font-size:2.5rem; font-weight:800; margin-top:16px;">
|
||||
Three Steps to <span class="text-gradient">Peak Performance</span>
|
||||
</h2>
|
||||
<div class="steps-grid">
|
||||
<div class="step-card reveal">
|
||||
<div class="step-num" style="background:rgba(48,209,88,.1); color:#30d158;">1</div>
|
||||
<h3>Install & Launch</h3>
|
||||
<p>Run the installer and launch SpdUp. It automatically requests administrator privileges for deep system optimizations.</p>
|
||||
</div>
|
||||
<div class="step-card reveal">
|
||||
<div class="step-num" style="background:rgba(10,245,240,.1); color:#0af5f0;">2</div>
|
||||
<h3>Hit Boost</h3>
|
||||
<p>Click the Boost button — SpdUp instantly optimizes CPU, RAM, GPU, network, timer resolution, and disables unnecessary services.</p>
|
||||
</div>
|
||||
<div class="step-card reveal">
|
||||
<div class="step-num" style="background:rgba(167,139,250,.1); color:#a78bfa;">3</div>
|
||||
<h3>Game On</h3>
|
||||
<p>Play with maximum performance. When you're done, click Restore to bring everything back to normal. That's it.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══ TECH SPECS ════════════════════════════════════════════ -->
|
||||
<section class="section" id="specs" style="background:#0c0c0e">
|
||||
<div class="container text-center">
|
||||
<span class="badge badge-cyan">Under the Hood</span>
|
||||
<h2 style="font-size:2.5rem; font-weight:800; margin-top:16px;">
|
||||
Built with Modern <span class="text-gradient">Technology</span>
|
||||
</h2>
|
||||
<div class="specs-grid" style="text-align:left;">
|
||||
<div class="spec-item reveal">
|
||||
<div class="spec-icon">🏗️</div>
|
||||
<div>
|
||||
<h4>.NET 8 + WPF</h4>
|
||||
<p>Built on the latest .NET runtime. Self-contained — no framework install needed.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spec-item reveal">
|
||||
<div class="spec-icon">🧠</div>
|
||||
<div>
|
||||
<h4>MVVM Architecture</h4>
|
||||
<p>Clean separation of concerns with full data binding and reactive UI updates.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spec-item reveal">
|
||||
<div class="spec-icon">🔧</div>
|
||||
<div>
|
||||
<h4>Kernel-Level Tuning</h4>
|
||||
<p>P/Invoke calls to NtSetTimerResolution, EmptyWorkingSet, and standby list purge.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spec-item reveal">
|
||||
<div class="spec-icon">🌡️</div>
|
||||
<div>
|
||||
<h4>Hardware Monitoring</h4>
|
||||
<p>LibreHardwareMonitor integration for real CPU/GPU temps, fan speeds, and clocks.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spec-item reveal">
|
||||
<div class="spec-icon">🛡️</div>
|
||||
<div>
|
||||
<h4>Admin Privileges</h4>
|
||||
<p>Runs elevated with proper manifest for safe access to protected system APIs.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spec-item reveal">
|
||||
<div class="spec-icon">🎨</div>
|
||||
<div>
|
||||
<h4>Custom Dark Theme</h4>
|
||||
<p>Full custom chrome, styled scrollbars, buttons, and data grids. No Windows chrome.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spec-item reveal">
|
||||
<div class="spec-icon">📦</div>
|
||||
<div>
|
||||
<h4>Single Installer</h4>
|
||||
<p>Inno Setup packages everything into one .exe — install, run, done.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spec-item reveal">
|
||||
<div class="spec-icon">📝</div>
|
||||
<div>
|
||||
<h4>Debug Logging</h4>
|
||||
<p>Built-in debug log with live filtering, copy, and file logging for troubleshooting.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══ SYSTEM REQUIREMENTS ═══════════════════════════════════ -->
|
||||
<section class="section">
|
||||
<div class="container text-center">
|
||||
<h2 style="font-size:2rem; font-weight:800; margin-bottom:40px;">System Requirements</h2>
|
||||
<div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; max-width:800px; margin:0 auto; text-align:left;">
|
||||
<div class="spec-item reveal">
|
||||
<div class="spec-icon" style="background:rgba(10,245,240,.08);">💻</div>
|
||||
<div>
|
||||
<h4>Windows 10/11</h4>
|
||||
<p>64-bit, version 1809 or later</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spec-item reveal">
|
||||
<div class="spec-icon" style="background:rgba(167,139,250,.08);">🧮</div>
|
||||
<div>
|
||||
<h4>4 GB RAM</h4>
|
||||
<p>8 GB or more recommended</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spec-item reveal">
|
||||
<div class="spec-icon" style="background:rgba(255,159,10,.08);">💾</div>
|
||||
<div>
|
||||
<h4>200 MB Disk Space</h4>
|
||||
<p>For the installed application</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══ DOWNLOAD CTA ══════════════════════════════════════════ -->
|
||||
<section class="section download-section" id="download">
|
||||
<div class="container">
|
||||
<div class="download-box reveal">
|
||||
<h2>Ready to <span class="text-gradient">Boost</span>?</h2>
|
||||
<p>Download SpdUp for free and unlock your PC's full gaming potential.</p>
|
||||
<a href="SpdUp_Setup_1.0.0.exe" class="btn btn-primary" style="font-size:1.1rem; padding:16px 40px;">
|
||||
⬇ Download SpdUp v1.0.0
|
||||
</a>
|
||||
<div class="download-info">
|
||||
<span>📦 ~60 MB</span>
|
||||
<span>🪟 Windows 10/11</span>
|
||||
<span>🔓 No account needed</span>
|
||||
<span>💚 Free forever</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══ FOOTER ════════════════════════════════════════════════ -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-brand">
|
||||
<span class="bolt" style="color:#30d158; font-size:1.3rem;">⚡</span>
|
||||
<span class="name">SpdUp</span>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<a href="#features">Features</a>
|
||||
<a href="#preview">Preview</a>
|
||||
<a href="#download">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p style="color:#4b5563; font-size:.85rem;">
|
||||
Made with ❤️ by Mandy
|
||||
<span class="trans-flag-inline">
|
||||
<span class="tf-blue"></span>
|
||||
<span class="tf-pink"></span>
|
||||
<span class="tf-white"></span>
|
||||
<span class="tf-pink"></span>
|
||||
<span class="tf-blue"></span>
|
||||
</span>
|
||||
</p>
|
||||
<p style="color:#374151; font-size:.75rem; margin-top:8px;">© 2026 SpdUp. Free & open source.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// ── Navbar scroll effect ─────────────────────────────────
|
||||
const navbar = document.getElementById('navbar');
|
||||
window.addEventListener('scroll', () => {
|
||||
navbar.classList.toggle('scrolled', window.scrollY > 40);
|
||||
});
|
||||
|
||||
// ── Mobile menu toggle ───────────────────────────────────
|
||||
const mobileToggle = document.getElementById('mobileToggle');
|
||||
const navLinks = document.getElementById('navLinks');
|
||||
mobileToggle.addEventListener('click', () => {
|
||||
navLinks.classList.toggle('open');
|
||||
});
|
||||
|
||||
// ── Scroll reveal ────────────────────────────────────────
|
||||
const reveals = document.querySelectorAll('.reveal');
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
|
||||
reveals.forEach(el => observer.observe(el));
|
||||
|
||||
// ── Screenshot tab switcher ──────────────────────────────
|
||||
const tabData = {
|
||||
dashboard: { icon: '📊', title: 'Dashboard View', hint: 'screenshots/dashboard.png' },
|
||||
boost: { icon: '🚀', title: 'Game Boost Panel', hint: 'screenshots/boost.png' },
|
||||
monitor: { icon: '📈', title: 'System Monitor', hint: 'screenshots/monitor.png' },
|
||||
processes: { icon: '📋', title: 'Process Manager', hint: 'screenshots/processes.png' },
|
||||
services: { icon: '⚙️', title: 'Service Manager', hint: 'screenshots/services.png' },
|
||||
debug: { icon: '🐛', title: 'Debug Log', hint: 'screenshots/debug.png' }
|
||||
};
|
||||
|
||||
document.querySelectorAll('.screenshot-tab').forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
document.querySelectorAll('.screenshot-tab').forEach(t => t.classList.remove('active'));
|
||||
tab.classList.add('active');
|
||||
const key = tab.dataset.tab;
|
||||
const data = tabData[key];
|
||||
document.getElementById('ssIcon').textContent = data.icon;
|
||||
document.getElementById('ssTitle').textContent = data.title;
|
||||
document.getElementById('ssHint').textContent = 'Place your screenshot in website/' + data.hint;
|
||||
|
||||
// Try to load an actual screenshot image
|
||||
const area = document.getElementById('screenshotArea');
|
||||
const existingImg = area.querySelector('img');
|
||||
if (existingImg) existingImg.remove();
|
||||
|
||||
const img = new Image();
|
||||
img.src = data.hint;
|
||||
img.alt = data.title;
|
||||
img.onload = () => {
|
||||
area.querySelector('.icon').style.display = 'none';
|
||||
area.querySelector('#ssTitle').style.display = 'none';
|
||||
area.querySelector('#ssHint').style.display = 'none';
|
||||
area.appendChild(img);
|
||||
};
|
||||
img.onerror = () => {
|
||||
area.querySelector('.icon').style.display = '';
|
||||
area.querySelector('#ssTitle').style.display = '';
|
||||
area.querySelector('#ssHint').style.display = '';
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
// Trigger first tab to try loading screenshot
|
||||
document.querySelector('.screenshot-tab.active').click();
|
||||
|
||||
// ── Smooth scroll for anchor links ───────────────────────
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(anchor.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
navLinks.classList.remove('open');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user