1372 lines
38 KiB
HTML
1372 lines
38 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-theme="dark">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>DuckDebug.as – Rubber Duck Debugging as a Service</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link href="https://cdn.jsdelivr.net/npm/fontsource-fira-code@5.0.0/latin.css" rel="stylesheet" />
|
||
<style>
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
:root {
|
||
--bg-primary: #0d1117;
|
||
--bg-secondary: #161b22;
|
||
--bg-tertiary: #1c2333;
|
||
--bg-card: #1a1f2e;
|
||
--text-primary: #e6edf3;
|
||
--text-secondary: #8b949e;
|
||
--text-muted: #484f58;
|
||
--accent: #f0db4f;
|
||
--accent-glow: rgba(240, 219, 79, 0.35);
|
||
--accent-hover: #ffef7a;
|
||
--border: #30363d;
|
||
--green: #3fb950;
|
||
--red: #f85149;
|
||
--blue: #58a6ff;
|
||
--purple: #bc8cff;
|
||
--orange: #d29922;
|
||
--code-green: #7ee787;
|
||
--shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||
--code-opacity: 0.09;
|
||
--roadmap-line: #30363d;
|
||
--roadmap-dot: #58a6ff;
|
||
--badge-bg: rgba(88, 166, 255, 0.15);
|
||
--badge-text: #58a6ff;
|
||
--card-hover-border: rgba(240, 219, 79, 0.4);
|
||
}
|
||
|
||
[data-theme="light"] {
|
||
--bg-primary: #f6f8fa;
|
||
--bg-secondary: #ffffff;
|
||
--bg-tertiary: #eef1f5;
|
||
--bg-card: #ffffff;
|
||
--text-primary: #1f2328;
|
||
--text-secondary: #656d76;
|
||
--text-muted: #b0b6be;
|
||
--accent: #d4a800;
|
||
--accent-glow: rgba(212, 168, 0, 0.25);
|
||
--accent-hover: #b89200;
|
||
--border: #d0d7de;
|
||
--green: #1a7f37;
|
||
--red: #cf222e;
|
||
--blue: #0969da;
|
||
--purple: #8250df;
|
||
--orange: #9a6700;
|
||
--code-green: #116329;
|
||
--shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
|
||
--code-opacity: 0.06;
|
||
--roadmap-line: #d0d7de;
|
||
--roadmap-dot: #0969da;
|
||
--badge-bg: rgba(9, 105, 218, 0.1);
|
||
--badge-text: #0969da;
|
||
--card-hover-border: rgba(212, 168, 0, 0.5);
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
font-family: "Fira Code", monospace;
|
||
background: var(--bg-primary);
|
||
color: var(--text-primary);
|
||
line-height: 1.6;
|
||
overflow-x: hidden;
|
||
transition:
|
||
background 0.4s,
|
||
color 0.4s;
|
||
}
|
||
|
||
body::after {
|
||
content: "";
|
||
position: fixed;
|
||
inset: 0;
|
||
background: repeating-linear-gradient(
|
||
0deg,
|
||
transparent,
|
||
transparent 2px,
|
||
rgba(0, 0, 0, 0.03) 2px,
|
||
rgba(0, 0, 0, 0.03) 4px
|
||
);
|
||
pointer-events: none;
|
||
z-index: 9999;
|
||
}
|
||
|
||
[data-theme="light"] body::after {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
/* ===== FLOATING CODE BACKGROUND ===== */
|
||
#floating-code {
|
||
position: fixed;
|
||
inset: 0;
|
||
overflow: hidden;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
.code-line {
|
||
position: absolute;
|
||
font-size: 12px;
|
||
color: var(--text-primary);
|
||
opacity: var(--code-opacity);
|
||
white-space: nowrap;
|
||
animation: floatUp linear infinite;
|
||
will-change: transform;
|
||
user-select: none;
|
||
}
|
||
|
||
@keyframes floatUp {
|
||
0% {
|
||
transform: translateY(110vh);
|
||
}
|
||
100% {
|
||
transform: translateY(-10vh);
|
||
}
|
||
}
|
||
|
||
/* ===== NAVIGATION ===== */
|
||
nav {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 100;
|
||
background: var(--bg-secondary);
|
||
border-bottom: 1px solid var(--border);
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
transition:
|
||
background 0.4s,
|
||
border-color 0.4s;
|
||
}
|
||
|
||
.nav-inner {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 24px;
|
||
height: 64px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.logo {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.logo-icon {
|
||
width: 36px;
|
||
height: 36px;
|
||
background: var(--accent);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 20px;
|
||
box-shadow: 0 0 12px var(--accent-glow);
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 24px;
|
||
list-style: none;
|
||
}
|
||
|
||
.nav-links a {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.nav-links a:hover {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.nav-start-btn {
|
||
padding: 10px 24px;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
font-family: "Fira Code", monospace;
|
||
color: var(--bg-primary);
|
||
background: var(--accent);
|
||
border: none;
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
box-shadow: 0 2px 12px var(--accent-glow);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.nav-start-btn:hover {
|
||
background: var(--accent-hover);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 20px var(--accent-glow);
|
||
}
|
||
|
||
.theme-toggle {
|
||
background: var(--bg-tertiary);
|
||
border: 1px solid var(--border);
|
||
color: var(--text-primary);
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.theme-toggle:hover {
|
||
border-color: var(--accent);
|
||
}
|
||
|
||
.mobile-menu-btn {
|
||
display: none;
|
||
background: none;
|
||
border: none;
|
||
color: var(--text-primary);
|
||
font-size: 24px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.nav-links {
|
||
display: none;
|
||
}
|
||
.mobile-menu-btn {
|
||
display: block;
|
||
}
|
||
.nav-links.open {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: absolute;
|
||
top: 64px;
|
||
left: 0;
|
||
right: 0;
|
||
background: var(--bg-secondary);
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 20px 24px;
|
||
gap: 16px;
|
||
}
|
||
}
|
||
|
||
/* ===== HERO ===== */
|
||
.hero {
|
||
position: relative;
|
||
z-index: 1;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 120px 24px 80px;
|
||
}
|
||
|
||
.hero-content {
|
||
max-width: 800px;
|
||
text-align: center;
|
||
}
|
||
|
||
.terminal-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: var(--badge-bg);
|
||
color: var(--badge-text);
|
||
padding: 6px 16px;
|
||
border-radius: 20px;
|
||
font-size: 13px;
|
||
margin-bottom: 28px;
|
||
border: 1px solid var(--border);
|
||
animation: fadeInDown 0.6s ease-out;
|
||
}
|
||
|
||
.pulse {
|
||
width: 8px;
|
||
height: 8px;
|
||
background: var(--green);
|
||
border-radius: 50%;
|
||
animation: pulseAnim 2s infinite;
|
||
}
|
||
|
||
@keyframes pulseAnim {
|
||
0%,
|
||
100% {
|
||
opacity: 1;
|
||
box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.4);
|
||
}
|
||
50% {
|
||
opacity: 0.8;
|
||
box-shadow: 0 0 0 8px rgba(63, 185, 80, 0);
|
||
}
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: clamp(36px, 6vw, 64px);
|
||
font-weight: 800;
|
||
line-height: 1.1;
|
||
margin-bottom: 20px;
|
||
animation: fadeInUp 0.8s ease-out;
|
||
}
|
||
|
||
.highlight {
|
||
color: var(--accent);
|
||
text-shadow: 0 0 30px var(--accent-glow);
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: clamp(16px, 2.5vw, 20px);
|
||
color: var(--text-secondary);
|
||
margin-bottom: 40px;
|
||
max-width: 600px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
animation: fadeInUp 0.8s ease-out 0.2s both;
|
||
}
|
||
|
||
.start-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 20px 56px;
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
font-family: "Fira Code", monospace;
|
||
color: var(--bg-primary);
|
||
background: var(--accent);
|
||
border: none;
|
||
border-radius: 16px;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
position: relative;
|
||
transition: all 0.3s;
|
||
animation:
|
||
fadeInUp 0.8s ease-out 0.4s both,
|
||
btnPulse 2s ease-in-out infinite;
|
||
box-shadow:
|
||
0 4px 30px var(--accent-glow),
|
||
0 0 80px var(--accent-glow);
|
||
z-index: 10;
|
||
}
|
||
|
||
@keyframes btnPulse {
|
||
0%,
|
||
100% {
|
||
box-shadow:
|
||
0 4px 30px var(--accent-glow),
|
||
0 0 60px var(--accent-glow);
|
||
}
|
||
50% {
|
||
box-shadow:
|
||
0 4px 40px var(--accent-glow),
|
||
0 0 100px var(--accent-glow);
|
||
}
|
||
}
|
||
|
||
.start-btn:hover {
|
||
transform: translateY(-4px) scale(1.05);
|
||
box-shadow:
|
||
0 8px 50px var(--accent-glow),
|
||
0 0 120px var(--accent-glow);
|
||
background: var(--accent-hover);
|
||
}
|
||
|
||
.start-btn:active {
|
||
transform: translateY(0) scale(0.97);
|
||
}
|
||
|
||
.start-btn .arrow {
|
||
font-size: 26px;
|
||
transition: transform 0.3s;
|
||
}
|
||
|
||
.start-btn:hover .arrow {
|
||
transform: translateX(8px);
|
||
}
|
||
|
||
/* ===== TERMINAL WINDOW ===== */
|
||
.terminal-window {
|
||
margin-top: 48px;
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
text-align: left;
|
||
max-width: 640px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
box-shadow: var(--shadow);
|
||
animation: fadeInUp 0.8s ease-out 0.6s both;
|
||
transition:
|
||
background 0.4s,
|
||
border-color 0.4s;
|
||
}
|
||
|
||
.terminal-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 12px 16px;
|
||
background: var(--bg-tertiary);
|
||
border-bottom: 1px solid var(--border);
|
||
transition:
|
||
background 0.4s,
|
||
border-color 0.4s;
|
||
}
|
||
|
||
.terminal-dot {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
}
|
||
.terminal-dot.red {
|
||
background: var(--red);
|
||
}
|
||
.terminal-dot.yellow {
|
||
background: var(--orange);
|
||
}
|
||
.terminal-dot.green {
|
||
background: var(--green);
|
||
}
|
||
|
||
.terminal-title {
|
||
margin-left: 8px;
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.terminal-body {
|
||
padding: 20px;
|
||
font-size: 14px;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.terminal-line {
|
||
opacity: 0;
|
||
animation: typeIn 0.3s ease-out forwards;
|
||
}
|
||
|
||
.terminal-line:nth-child(1) {
|
||
animation-delay: 1s;
|
||
}
|
||
.terminal-line:nth-child(2) {
|
||
animation-delay: 1.6s;
|
||
}
|
||
.terminal-line:nth-child(3) {
|
||
animation-delay: 2.2s;
|
||
}
|
||
.terminal-line:nth-child(4) {
|
||
animation-delay: 2.8s;
|
||
}
|
||
.terminal-line:nth-child(5) {
|
||
animation-delay: 3.4s;
|
||
}
|
||
|
||
@keyframes typeIn {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateX(-8px);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
.t-prompt {
|
||
color: var(--green);
|
||
}
|
||
.t-command {
|
||
color: var(--text-primary);
|
||
}
|
||
.t-string {
|
||
color: var(--code-green);
|
||
}
|
||
.t-result {
|
||
color: var(--purple);
|
||
}
|
||
.cursor-blink {
|
||
animation: blink 1s step-end infinite;
|
||
}
|
||
|
||
@keyframes blink {
|
||
0%,
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
/* ===== SECTIONS COMMON ===== */
|
||
.section {
|
||
position: relative;
|
||
z-index: 1;
|
||
padding: 100px 24px;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.section-narrow {
|
||
position: relative;
|
||
z-index: 1;
|
||
padding: 100px 24px;
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.section-header {
|
||
text-align: center;
|
||
margin-bottom: 60px;
|
||
}
|
||
|
||
.section-tag {
|
||
color: var(--green);
|
||
font-size: 14px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.section-header h2 {
|
||
font-size: clamp(28px, 4vw, 42px);
|
||
font-weight: 700;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.section-header p {
|
||
color: var(--text-secondary);
|
||
max-width: 560px;
|
||
margin: 0 auto;
|
||
font-size: 15px;
|
||
}
|
||
|
||
/* ===== FEATURES ===== */
|
||
.features-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 24px;
|
||
}
|
||
|
||
.feature-card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
padding: 32px;
|
||
transition: all 0.3s;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.feature-card::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, var(--accent), transparent);
|
||
opacity: 0;
|
||
transition: opacity 0.3s;
|
||
}
|
||
|
||
.feature-card:hover {
|
||
border-color: var(--card-hover-border);
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.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: 24px;
|
||
margin-bottom: 20px;
|
||
background: var(--badge-bg);
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.feature-card h3 {
|
||
font-size: 18px;
|
||
margin-bottom: 10px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.feature-card p {
|
||
color: var(--text-secondary);
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* ===== ROADMAP ===== */
|
||
.roadmap-timeline {
|
||
position: relative;
|
||
padding-left: 48px;
|
||
}
|
||
|
||
.roadmap-timeline::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 15px;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 2px;
|
||
background: var(--roadmap-line);
|
||
transition: background 0.4s;
|
||
}
|
||
|
||
.roadmap-item {
|
||
position: relative;
|
||
margin-bottom: 40px;
|
||
padding: 28px;
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.roadmap-item:hover {
|
||
border-color: var(--card-hover-border);
|
||
transform: translateX(8px);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.roadmap-dot {
|
||
position: absolute;
|
||
left: -41px;
|
||
top: 32px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: 50%;
|
||
background: var(--roadmap-dot);
|
||
border: 3px solid var(--bg-primary);
|
||
transition:
|
||
background 0.4s,
|
||
border-color 0.4s;
|
||
}
|
||
|
||
.roadmap-item.done .roadmap-dot {
|
||
background: var(--green);
|
||
}
|
||
.roadmap-item.active .roadmap-dot {
|
||
background: var(--accent);
|
||
animation: pulseAnim 2s infinite;
|
||
}
|
||
.roadmap-item.planned .roadmap-dot {
|
||
background: var(--purple);
|
||
}
|
||
|
||
.roadmap-date {
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
margin-bottom: 8px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.roadmap-item h3 {
|
||
font-size: 20px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.roadmap-item p {
|
||
color: var(--text-secondary);
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.roadmap-tags {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
margin-top: 14px;
|
||
}
|
||
|
||
.roadmap-tag {
|
||
font-size: 12px;
|
||
padding: 4px 10px;
|
||
border-radius: 6px;
|
||
background: var(--badge-bg);
|
||
color: var(--badge-text);
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.roadmap-tag.beta {
|
||
background: rgba(188, 140, 255, 0.15);
|
||
color: var(--purple);
|
||
}
|
||
.roadmap-tag.coming {
|
||
background: rgba(210, 153, 34, 0.15);
|
||
color: var(--orange);
|
||
}
|
||
.roadmap-tag.done-tag {
|
||
background: rgba(63, 185, 80, 0.15);
|
||
color: var(--green);
|
||
}
|
||
|
||
/* ===== PRICING ===== */
|
||
.pricing-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
gap: 24px;
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.pricing-card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
padding: 36px;
|
||
text-align: center;
|
||
transition: all 0.3s;
|
||
position: relative;
|
||
}
|
||
|
||
.pricing-card.featured {
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 40px var(--accent-glow);
|
||
}
|
||
|
||
.pricing-card.featured::before {
|
||
content: "POPULAR";
|
||
position: absolute;
|
||
top: -12px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: var(--accent);
|
||
color: var(--bg-primary);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
padding: 4px 16px;
|
||
border-radius: 8px;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.pricing-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.pricing-card h3 {
|
||
font-size: 18px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.pricing-price {
|
||
font-size: 40px;
|
||
font-weight: 800;
|
||
margin: 16px 0;
|
||
}
|
||
.pricing-price span {
|
||
font-size: 16px;
|
||
color: var(--text-secondary);
|
||
font-weight: 400;
|
||
}
|
||
|
||
.pricing-features {
|
||
list-style: none;
|
||
margin: 24px 0;
|
||
text-align: left;
|
||
}
|
||
|
||
.pricing-features li {
|
||
padding: 8px 0;
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.pricing-features li::before {
|
||
content: "✓";
|
||
color: var(--green);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.pricing-btn {
|
||
display: block;
|
||
width: 100%;
|
||
padding: 14px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
background: transparent;
|
||
color: var(--text-primary);
|
||
font-family: "Fira Code", monospace;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
text-decoration: none;
|
||
text-align: center;
|
||
}
|
||
|
||
.pricing-btn:hover {
|
||
border-color: var(--accent);
|
||
background: var(--accent-glow);
|
||
}
|
||
|
||
.pricing-card.featured .pricing-btn {
|
||
background: var(--accent);
|
||
color: var(--bg-primary);
|
||
border-color: var(--accent);
|
||
}
|
||
|
||
.pricing-card.featured .pricing-btn:hover {
|
||
background: var(--accent-hover);
|
||
}
|
||
|
||
/* ===== CTA ===== */
|
||
.cta-section {
|
||
position: relative;
|
||
z-index: 1;
|
||
padding: 100px 24px;
|
||
text-align: center;
|
||
}
|
||
|
||
.cta-box {
|
||
max-width: 700px;
|
||
margin: 0 auto;
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 24px;
|
||
padding: 60px 40px;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.cta-box h2 {
|
||
font-size: clamp(24px, 4vw, 36px);
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.cta-box p {
|
||
color: var(--text-secondary);
|
||
margin-bottom: 32px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* ===== FOOTER ===== */
|
||
footer {
|
||
position: relative;
|
||
z-index: 1;
|
||
border-top: 1px solid var(--border);
|
||
padding: 40px 24px;
|
||
text-align: center;
|
||
color: var(--text-muted);
|
||
font-size: 13px;
|
||
transition: border-color 0.4s;
|
||
}
|
||
|
||
/* ===== ANIMATIONS ===== */
|
||
@keyframes fadeInUp {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(24px);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes fadeInDown {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(-16px);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.duck-float {
|
||
animation: duckFloat 3s ease-in-out infinite;
|
||
display: inline-block;
|
||
}
|
||
|
||
@keyframes duckFloat {
|
||
0%,
|
||
100% {
|
||
transform: translateY(0) rotate(-3deg);
|
||
}
|
||
50% {
|
||
transform: translateY(-10px) rotate(3deg);
|
||
}
|
||
}
|
||
|
||
/* ===== SCROLL REVEAL ===== */
|
||
.reveal {
|
||
opacity: 0;
|
||
transform: translateY(32px);
|
||
transition: all 0.7s ease-out;
|
||
}
|
||
|
||
.reveal.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- ===== FLOATING CODE BACKGROUND ===== -->
|
||
<div id="floating-code"></div>
|
||
|
||
<!-- ===== NAVIGATION ===== -->
|
||
<nav>
|
||
<div class="nav-inner">
|
||
<a href="#" class="logo">
|
||
<div class="logo-icon">🦆</div>
|
||
<span>duckdebug<span style="color: var(--accent)">.as</span></span>
|
||
</a>
|
||
<ul class="nav-links" id="navLinks">
|
||
<li><a href="#features">Features</a></li>
|
||
<li><a href="#roadmap">Roadmap</a></li>
|
||
<li><a href="#pricing">Pricing</a></li>
|
||
<li><a href="#hero" class="nav-start-btn" onclick="handleStart(event)">Start Now →</a></li>
|
||
</ul>
|
||
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">🌙</button>
|
||
<button class="mobile-menu-btn" id="mobileMenuBtn">☰</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- ===== HERO ===== -->
|
||
<section class="hero" id="hero">
|
||
<div class="hero-content">
|
||
<div class="terminal-badge">
|
||
<span class="pulse"></span>
|
||
<span>v0.1.0 – MVP Live</span>
|
||
</div>
|
||
<h1>
|
||
<span class="duck-float">🦆</span> Rubber Duck<br />
|
||
<span class="highlight">Debugging as a Service</span>
|
||
</h1>
|
||
<p class="hero-subtitle">
|
||
// Explain your code line by line to our virtual duck.<br />
|
||
// 90% of bugs disappear when you do.
|
||
</p>
|
||
<a href="#" class="start-btn" id="heroStartBtn" onclick="handleStart(event)">
|
||
<span>🦆</span> Start Debugging Now <span class="arrow">→</span>
|
||
</a>
|
||
|
||
<div class="terminal-window">
|
||
<div class="terminal-header">
|
||
<span class="terminal-dot red"></span>
|
||
<span class="terminal-dot yellow"></span>
|
||
<span class="terminal-dot green"></span>
|
||
<span class="terminal-title">duckdebug-terminal — zsh</span>
|
||
</div>
|
||
<div class="terminal-body">
|
||
<div class="terminal-line">
|
||
<span class="t-prompt">$</span> <span class="t-command">duckdebug init --project my-app</span>
|
||
</div>
|
||
<div class="terminal-line"><span class="t-result">🦆 Duck initialized! Ready to listen.</span></div>
|
||
<div class="terminal-line">
|
||
<span class="t-prompt">$</span> <span class="t-command">duckdebug explain ./src/buggy.ts</span>
|
||
</div>
|
||
<div class="terminal-line">
|
||
<span class="t-string">"Hmm, check line 42. That null looks suspicious..."</span>
|
||
</div>
|
||
<div class="terminal-line">
|
||
<span class="t-result">✨ Bug fixed! Confidence: 99.7%</span> <span class="cursor-blink">█</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== FEATURES ===== -->
|
||
<section class="section" id="features">
|
||
<div class="section-header reveal">
|
||
<div class="section-tag">// features</div>
|
||
<h2>Why Duck Debugging?</h2>
|
||
<p>Proven by decades of programmer folklore, now powered by modern tech.</p>
|
||
</div>
|
||
<div class="features-grid">
|
||
<div class="feature-card reveal">
|
||
<div class="feature-icon">🦆</div>
|
||
<h3>Virtual Duck Listener</h3>
|
||
<p>
|
||
Explain your code line-by-line to our AI-powered rubber duck. It never judges, only listens and helps you
|
||
find the bug.
|
||
</p>
|
||
</div>
|
||
<div class="feature-card reveal">
|
||
<div class="feature-icon">🔍</div>
|
||
<h3>Smart Bug Detection</h3>
|
||
<p>Our duck analyzes your explanation in real-time and spots logical errors before you finish typing.</p>
|
||
</div>
|
||
<div class="feature-card reveal">
|
||
<div class="feature-icon">💬</div>
|
||
<h3>Interactive Sessions</h3>
|
||
<p>Ask follow-up questions, paste snippets, and get rubber-duck-style guidance in real-time conversations.</p>
|
||
</div>
|
||
<div class="feature-card reveal">
|
||
<div class="feature-icon">📊</div>
|
||
<h3>Debug Analytics</h3>
|
||
<p>Track your debugging sessions, common bug patterns, and your "aha!" moments over time.</p>
|
||
</div>
|
||
<div class="feature-card reveal">
|
||
<div class="feature-icon">🔌</div>
|
||
<h3>IDE Integration</h3>
|
||
<p>Connect directly from VS Code, JetBrains, or Neovim. No context switching needed during deep debugging.</p>
|
||
</div>
|
||
<div class="feature-card reveal">
|
||
<div class="feature-icon">🎮</div>
|
||
<h3>Gamified Debugging</h3>
|
||
<p>Earn XP, unlock duck skins, and climb the leaderboard as you squash more bugs every day.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== ROADMAP ===== -->
|
||
<section class="section-narrow" id="roadmap">
|
||
<div class="section-header reveal">
|
||
<div class="section-tag">// roadmap</div>
|
||
<h2>What's Coming Next</h2>
|
||
<p>We're just getting started. Here's what's on the horizon.</p>
|
||
</div>
|
||
|
||
<div class="roadmap-timeline">
|
||
<!-- Q1 2026 -->
|
||
<div class="roadmap-item done reveal">
|
||
<div class="roadmap-dot"></div>
|
||
<div class="roadmap-date">Q1 2026 – Completed</div>
|
||
<h3>🦆 MVP Launch</h3>
|
||
<p>
|
||
Core rubber duck debugging session with AI-powered listener, basic analytics dashboard, and web interface.
|
||
The duck is alive!
|
||
</p>
|
||
<div class="roadmap-tags">
|
||
<span class="roadmap-tag done-tag">Web App</span>
|
||
<span class="roadmap-tag done-tag">AI Duck Listener</span>
|
||
<span class="roadmap-tag done-tag">Basic Analytics</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Q2 2026 -->
|
||
<div class="roadmap-item active reveal">
|
||
<div class="roadmap-dot"></div>
|
||
<div class="roadmap-date">Q2 2026 – In Development</div>
|
||
<h3>🔌 MCP Server</h3>
|
||
<p>
|
||
Model Context Protocol support — connect DuckDebug to any MCP-compatible AI tool. Seamless integration with
|
||
your existing dev toolchain, Claude, Cursor, and other AI agents.
|
||
</p>
|
||
<div class="roadmap-tags">
|
||
<span class="roadmap-tag beta">MCP Protocol</span>
|
||
<span class="roadmap-tag beta">Agent Integration</span>
|
||
<span class="roadmap-tag beta">API v2</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Q3 2026 - Skins -->
|
||
<div class="roadmap-item planned reveal">
|
||
<div class="roadmap-dot"></div>
|
||
<div class="roadmap-date">Q3 2026 – Planned</div>
|
||
<h3>🎨 Duck Skins & Customization</h3>
|
||
<p>
|
||
Customize your duck with skins: Hacker Duck, Ninja Duck, Astronaut Duck, Cyberpunk Duck, and more. Express
|
||
your debugging personality with custom quack sounds.
|
||
</p>
|
||
<div class="roadmap-tags">
|
||
<span class="roadmap-tag coming">Cosmetic Skins</span>
|
||
<span class="roadmap-tag coming">Custom Quacks</span>
|
||
<span class="roadmap-tag coming">Duck Avatar Builder</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Q3 2026 - Battlepass -->
|
||
<div class="roadmap-item planned reveal">
|
||
<div class="roadmap-dot"></div>
|
||
<div class="roadmap-date">Q3 2026 – Planned</div>
|
||
<h3>⚔️ Battle Pass</h3>
|
||
<p>
|
||
Seasonal battle pass with debugging challenges, weekly missions, and exclusive rewards. Debug more, earn
|
||
more. Limited-time legendary duck skins and titles await top debuggers!
|
||
</p>
|
||
<div class="roadmap-tags">
|
||
<span class="roadmap-tag coming">Season 1</span>
|
||
<span class="roadmap-tag coming">Daily Challenges</span>
|
||
<span class="roadmap-tag coming">Exclusive Rewards</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Q4 2026 - Lootboxes -->
|
||
<div class="roadmap-item planned reveal">
|
||
<div class="roadmap-dot"></div>
|
||
<div class="roadmap-date">Q4 2026 – Planned</div>
|
||
<h3>📦 Loot Boxes</h3>
|
||
<p>
|
||
Randomized loot boxes containing rare duck skins, debugging power-ups, XP boosters, and legendary items.
|
||
Open with debug tokens earned from your debugging sessions.
|
||
</p>
|
||
<div class="roadmap-tags">
|
||
<span class="roadmap-tag coming">Loot Boxes</span>
|
||
<span class="roadmap-tag coming">Rare Items</span>
|
||
<span class="roadmap-tag coming">Trading System</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== PRICING ===== -->
|
||
<section class="section" id="pricing">
|
||
<div class="section-header reveal">
|
||
<div class="section-tag">// pricing</div>
|
||
<h2>Choose Your Debug Tier</h2>
|
||
<p>From free quacks to enterprise-level debugging.</p>
|
||
</div>
|
||
<div class="pricing-grid">
|
||
<div class="pricing-card reveal">
|
||
<h3>Free Quack</h3>
|
||
<div class="pricing-price">$0<span>/mo</span></div>
|
||
<ul class="pricing-features">
|
||
<li>5 debug sessions/day</li>
|
||
<li>Basic duck listener</li>
|
||
<li>Standard skins</li>
|
||
<li>Community support</li>
|
||
</ul>
|
||
<a href="#" class="pricing-btn" onclick="handleStart(event)">Get Started</a>
|
||
</div>
|
||
<div class="pricing-card featured reveal">
|
||
<h3>Pro Debug</h3>
|
||
<div class="pricing-price">$9<span>/mo</span></div>
|
||
<ul class="pricing-features">
|
||
<li>Unlimited sessions</li>
|
||
<li>Advanced AI duck</li>
|
||
<li>All duck skins</li>
|
||
<li>IDE integration</li>
|
||
<li>Priority support</li>
|
||
</ul>
|
||
<a href="#" class="pricing-btn" onclick="handleStart(event)">Start Now →</a>
|
||
</div>
|
||
<div class="pricing-card reveal">
|
||
<h3>Team Flock</h3>
|
||
<div class="pricing-price">$29<span>/mo</span></div>
|
||
<ul class="pricing-features">
|
||
<li>Everything in Pro</li>
|
||
<li>Up to 10 seats</li>
|
||
<li>Shared duck sessions</li>
|
||
<li>Team analytics</li>
|
||
<li>SSO & API access</li>
|
||
</ul>
|
||
<a href="#" class="pricing-btn">Contact Sales</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== CTA ===== -->
|
||
<section class="cta-section">
|
||
<div class="cta-box reveal">
|
||
<h2>Ready to Debug with a Duck? 🦆</h2>
|
||
<p>Join thousands of developers who fixed their bugs by explaining them to a rubber duck.</p>
|
||
<a href="#" class="start-btn" style="animation: none; font-size: 18px" onclick="handleStart(event)">
|
||
<span>🦆</span> Start Now — It's Free <span class="arrow">→</span>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== FOOTER ===== -->
|
||
<footer>
|
||
<p>© 2026 DuckDebug.as — Rubber Duck Debugging as a Service</p>
|
||
<p style="margin-top: 8px">Built with 🦆 and questionable debugging practices.</p>
|
||
</footer>
|
||
|
||
<script>
|
||
// ===== THEME TOGGLE =====
|
||
const html = document.documentElement;
|
||
const themeToggle = document.getElementById("themeToggle");
|
||
const savedTheme = localStorage.getItem("duckdebug-theme") || "dark";
|
||
html.setAttribute("data-theme", savedTheme);
|
||
themeToggle.textContent = savedTheme === "dark" ? "☀️" : "🌙";
|
||
|
||
themeToggle.addEventListener("click", () => {
|
||
const current = html.getAttribute("data-theme");
|
||
const next = current === "dark" ? "light" : "dark";
|
||
html.setAttribute("data-theme", next);
|
||
localStorage.setItem("duckdebug-theme", next);
|
||
themeToggle.textContent = next === "dark" ? "☀️" : "🌙";
|
||
});
|
||
|
||
// ===== MOBILE MENU =====
|
||
const mobileMenuBtn = document.getElementById("mobileMenuBtn");
|
||
const navLinks = document.getElementById("navLinks");
|
||
mobileMenuBtn.addEventListener("click", () => {
|
||
navLinks.classList.toggle("open");
|
||
mobileMenuBtn.textContent = navLinks.classList.contains("open") ? "✕" : "☰";
|
||
});
|
||
|
||
// ===== FLOATING CODE BACKGROUND =====
|
||
const codeContainer = document.getElementById("floating-code");
|
||
|
||
const codeSnippets = [
|
||
"const duck = new Duck();",
|
||
"function debug(code) {",
|
||
" duck.listen(code);",
|
||
" return duck.explain();",
|
||
"}",
|
||
"if (bug.found) {",
|
||
' console.log("Quack!");',
|
||
" bug.resolve();",
|
||
"}",
|
||
"async function analyze() {",
|
||
" await duck.think();",
|
||
" return insight;",
|
||
"}",
|
||
"export default Duck;",
|
||
"class BugHunter {",
|
||
" constructor(duck) {",
|
||
" this.duck = duck;",
|
||
" }",
|
||
" hunt() {",
|
||
" return this.duck.find();",
|
||
" }",
|
||
"}",
|
||
"npm install @duck/debug",
|
||
'import { Duck } from "duckdebug";',
|
||
"const session = duck.start();",
|
||
"duck.explain(line42);",
|
||
"// TODO: fix this bug",
|
||
'duck.quack("interesting");',
|
||
"try { runCode(); }",
|
||
"catch(e) { duck.listen(e); }",
|
||
'if (typeof bug !== "undefined")',
|
||
"duck.inspect(stackTrace);",
|
||
"const fix = duck.solve();",
|
||
'git commit -m "duck fixed"',
|
||
"SELECT * FROM bugs WHERE resolved=false;",
|
||
"docker run duckdebug:latest",
|
||
"kubectl apply -f duck.yml",
|
||
"response.status === 200",
|
||
"while(bugs.length > 0) {",
|
||
" duck.explain(next());",
|
||
"}",
|
||
"return true; // duck approved",
|
||
'panic!("duck found it!")',
|
||
'println!("{:?}", fix)',
|
||
"fn main() { duck.debug() }",
|
||
"let result = match bug {",
|
||
" Ok(fixed) => fixed,",
|
||
" Err(e) => duck.solve(e),",
|
||
"};",
|
||
'console.time("duckTime");',
|
||
"performance.now();",
|
||
"process.env.DUCK_DEBUG = true;",
|
||
'require("duckdebug");',
|
||
"module.exports = Duck;",
|
||
"def debug_with_duck(code):",
|
||
" duck = Duck()",
|
||
" return duck.analyze(code)",
|
||
"struct Duck { quack: String }",
|
||
"impl Duck {",
|
||
" fn listen(&self, code: &str) {",
|
||
' println!("quack!");',
|
||
" }",
|
||
"}",
|
||
"SELECT bug_id FROM sessions",
|
||
"WHERE duck_says_fix = true;",
|
||
"CREATE INDEX idx_bug_type",
|
||
"ON bugs(type);",
|
||
"interface IDuckListener {",
|
||
" listen(code: string): void;",
|
||
" explain(): string;",
|
||
"}",
|
||
"type DuckResult = {",
|
||
" found: boolean;",
|
||
" line: number;",
|
||
" message: string;",
|
||
"};",
|
||
"go func() {",
|
||
" duck.Listen(codeChan)",
|
||
"}()",
|
||
"import duckdebug",
|
||
"client = duckdebug.Client()",
|
||
"result = client.debug(file)",
|
||
];
|
||
|
||
const totalLines = 50;
|
||
for (let i = 0; i < totalLines; i++) {
|
||
const lineEl = document.createElement("div");
|
||
lineEl.classList.add("code-line");
|
||
const snippet = codeSnippets[Math.floor(Math.random() * codeSnippets.length)];
|
||
lineEl.textContent = snippet;
|
||
lineEl.style.left = Math.random() * 100 + "%";
|
||
lineEl.style.fontSize = 10 + Math.random() * 6 + "px";
|
||
const duration = 25 + Math.random() * 50;
|
||
lineEl.style.animationDuration = duration + "s";
|
||
lineEl.style.animationDelay = -(Math.random() * duration) + "s";
|
||
codeContainer.appendChild(lineEl);
|
||
}
|
||
|
||
// ===== SCROLL REVEAL =====
|
||
const revealElements = document.querySelectorAll(".reveal");
|
||
const revealObserver = new IntersectionObserver(
|
||
(entries) => {
|
||
entries.forEach((entry) => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add("visible");
|
||
revealObserver.unobserve(entry.target);
|
||
}
|
||
});
|
||
},
|
||
{ threshold: 0.1, rootMargin: "0px 0px -30px 0px" },
|
||
);
|
||
|
||
revealElements.forEach((el) => revealObserver.observe(el));
|
||
|
||
// ===== START NOW HANDLER =====
|
||
function handleStart(e) {
|
||
e.preventDefault();
|
||
const btn = e.currentTarget;
|
||
btn.style.transform = "scale(0.95)";
|
||
setTimeout(() => {
|
||
btn.style.transform = "";
|
||
alert("Quack! Redirecting to DuckDebug dashboard...");
|
||
}, 150);
|
||
}
|
||
|
||
// ===== SMOOTH SCROLL FOR NAV LINKS =====
|
||
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
|
||
anchor.addEventListener("click", function (e) {
|
||
const href = this.getAttribute("href");
|
||
if (href === "#") return;
|
||
e.preventDefault();
|
||
const target = document.querySelector(href);
|
||
if (target) {
|
||
target.scrollIntoView({ behavior: "smooth", block: "start" });
|
||
if (navLinks.classList.contains("open")) {
|
||
navLinks.classList.remove("open");
|
||
mobileMenuBtn.textContent = "☰";
|
||
}
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|