400 lines
14 KiB
HTML
400 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>DUCKDEBUG.gg — Rubber Duck Debugging as a Service</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
|
|
<style>
|
|
@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");
|
|
|
|
:root {
|
|
--primary: #00ff00;
|
|
}
|
|
|
|
.terminal-font {
|
|
font-family: "VT323", monospace;
|
|
}
|
|
|
|
body {
|
|
background: #0a0a0a;
|
|
color: #00ff00;
|
|
}
|
|
|
|
.code-bg {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
overflow: hidden;
|
|
opacity: 0.15;
|
|
}
|
|
|
|
.code-line {
|
|
position: absolute;
|
|
color: #00ff00;
|
|
font-family: "VT323", monospace;
|
|
font-size: 14px;
|
|
white-space: nowrap;
|
|
animation: flyCode linear infinite;
|
|
text-shadow: 0 0 8px #00ff00;
|
|
}
|
|
|
|
@keyframes flyCode {
|
|
0% {
|
|
transform: translateY(-100px);
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
opacity: 1;
|
|
}
|
|
90% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateY(2000px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.glitch {
|
|
animation: glitch 1s linear infinite alternate;
|
|
}
|
|
|
|
@keyframes glitch {
|
|
0% {
|
|
transform: translate(0);
|
|
}
|
|
20% {
|
|
transform: translate(-2px, 2px);
|
|
}
|
|
40% {
|
|
transform: translate(-2px, -2px);
|
|
}
|
|
60% {
|
|
transform: translate(2px, 2px);
|
|
}
|
|
80% {
|
|
transform: translate(2px, -2px);
|
|
}
|
|
100% {
|
|
transform: translate(0);
|
|
}
|
|
}
|
|
|
|
.scanline {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(to bottom, transparent 50%, rgba(0, 255, 0, 0.03) 50%);
|
|
background-size: 100% 4px;
|
|
pointer-events: none;
|
|
animation: scan 4s linear infinite;
|
|
z-index: -1;
|
|
}
|
|
|
|
@keyframes scan {
|
|
0% {
|
|
transform: translateY(-100%);
|
|
}
|
|
100% {
|
|
transform: translateY(100%);
|
|
}
|
|
}
|
|
|
|
.terminal-window {
|
|
border: 4px solid #00ff00;
|
|
box-shadow: 0 0 30px #00ff00;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="terminal-font min-h-screen overflow-x-hidden">
|
|
<!-- Animated code background -->
|
|
<div class="code-bg" id="code-bg"></div>
|
|
<div class="scanline"></div>
|
|
|
|
<!-- Navbar -->
|
|
<nav class="border-b border-green-500 bg-black/80 backdrop-blur-md fixed w-full z-50">
|
|
<div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-green-500 text-black flex items-center justify-center text-3xl font-bold rounded">
|
|
🦆
|
|
</div>
|
|
<div>
|
|
<span class="text-3xl tracking-widest">DUCKDEBUG</span>
|
|
<span class="text-xs text-green-400 block -mt-1">.gg</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-8 text-xl">
|
|
<a href="#features" class="hover:text-white transition-colors">FEATURES</a>
|
|
<a href="#roadmap" class="hover:text-white transition-colors">ROADMAP</a>
|
|
<a href="#" class="hover:text-white transition-colors">DOCS</a>
|
|
</div>
|
|
<button
|
|
onclick="toggleTheme()"
|
|
class="px-6 py-2 border border-green-500 hover:bg-green-500 hover:text-black transition-all"
|
|
>
|
|
<i class="fas fa-moon"></i>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero -->
|
|
<section class="min-h-screen flex items-center pt-20 relative">
|
|
<div class="max-w-5xl mx-auto px-6 text-center">
|
|
<div class="inline-block bg-black border-2 border-green-500 px-8 py-2 mb-8 text-2xl tracking-widest glitch">
|
|
RUBBER DUCK DEBUGGING AS A SERVICE
|
|
</div>
|
|
|
|
<h1 class="text-8xl leading-none mb-6">
|
|
ТВОЙ УТЁНОК<br />
|
|
<span class="text-white">ВСЕГДА НА СВЯЗИ</span>
|
|
</h1>
|
|
|
|
<p class="text-3xl text-green-300 max-w-2xl mx-auto mb-12">
|
|
Объясни проблему утёнку.<br />
|
|
Получи решение. Или хотя бы quack.
|
|
</p>
|
|
|
|
<!-- Prominent Start Now Button -->
|
|
<div class="flex justify-center gap-6">
|
|
<button
|
|
onclick="startDebugging()"
|
|
class="group relative px-16 py-8 text-5xl font-bold border-4 border-green-500 bg-black hover:bg-green-500 hover:text-black transition-all duration-300 transform hover:scale-110 active:scale-95 shadow-2xl shadow-green-500/50"
|
|
>
|
|
<span class="relative z-10">START NOW</span>
|
|
<div
|
|
class="absolute inset-0 bg-green-400 scale-x-0 group-active:scale-x-100 transition-transform origin-left"
|
|
></div>
|
|
<div
|
|
class="absolute -inset-2 border border-green-400 opacity-30 group-hover:opacity-70 animate-pulse"
|
|
></div>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-12 text-green-400 text-xl flex justify-center gap-8">
|
|
<div class="flex items-center gap-2">
|
|
<i class="fas fa-check"></i>
|
|
<span>Бесплатный tier</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<i class="fas fa-check"></i>
|
|
<span>24/7 онлайн</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<i class="fas fa-check"></i>
|
|
<span>Voice + Text</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Floating duck -->
|
|
<div class="absolute bottom-10 right-10 text-8xl animate-bounce" style="animation-duration: 3s">🦆</div>
|
|
</section>
|
|
|
|
<!-- Features -->
|
|
<section id="features" class="py-24 bg-black/70 border-t border-b border-green-500">
|
|
<div class="max-w-6xl mx-auto px-6">
|
|
<h2 class="text-6xl text-center mb-16">WHY DUCKDEBUG?</h2>
|
|
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<div class="terminal-window bg-black p-8 border border-green-500">
|
|
<div class="text-4xl mb-6">🦆</div>
|
|
<h3 class="text-3xl mb-4">Классический Rubber Duck</h3>
|
|
<p class="text-green-300 text-xl">Просто расскажи проблему. Утёнок слушает внимательно.</p>
|
|
</div>
|
|
<div class="terminal-window bg-black p-8 border border-green-500">
|
|
<div class="text-4xl mb-6">🤖</div>
|
|
<h3 class="text-3xl mb-4">AI + Duck Hybrid</h3>
|
|
<p class="text-green-300 text-xl">Иногда утёнок даёт реальные подсказки (на базе AI).</p>
|
|
</div>
|
|
<div class="terminal-window bg-black p-8 border border-green-500">
|
|
<div class="text-4xl mb-6">📡</div>
|
|
<h3 class="text-3xl mb-4">Multiplayer Debug</h3>
|
|
<p class="text-green-300 text-xl">Делитесь сессией с командой. Все смотрят на одного утёнка.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Roadmap -->
|
|
<section id="roadmap" class="py-24">
|
|
<div class="max-w-5xl mx-auto px-6">
|
|
<div class="terminal-window bg-black p-10 border-4 border-green-500">
|
|
<h2 class="text-6xl mb-12 text-center border-b border-green-500 pb-6">ROADMAP v0.1 → v1.0</h2>
|
|
|
|
<div class="space-y-12 text-2xl">
|
|
<div class="flex gap-8 items-start">
|
|
<div class="w-8 h-8 bg-green-500 text-black flex-shrink-0 flex items-center justify-center font-bold">
|
|
01
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="font-bold text-green-400">MVP (Сейчас)</div>
|
|
<div class="text-green-300">Базовый веб-утёнок + чат + voice-to-text</div>
|
|
</div>
|
|
<div class="text-green-400">LIVE</div>
|
|
</div>
|
|
|
|
<div class="flex gap-8 items-start">
|
|
<div class="w-8 h-8 bg-green-500 text-black flex-shrink-0 flex items-center justify-center font-bold">
|
|
02
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="font-bold text-green-400">MCP Сервер</div>
|
|
<div class="text-green-300">
|
|
Подключай свой Minecraft сервер — утёнок будет дебажить моды и плагины в реальном времени
|
|
</div>
|
|
</div>
|
|
<div class="text-amber-400">Q3 2026</div>
|
|
</div>
|
|
|
|
<div class="flex gap-8 items-start">
|
|
<div class="w-8 h-8 bg-green-500 text-black flex-shrink-0 flex items-center justify-center font-bold">
|
|
03
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="font-bold text-green-400">Скины и Кастомизация</div>
|
|
<div class="text-green-300">Cyberduck, Steampunk Duck, Matrix Duck, Gentoo Duck и др.</div>
|
|
</div>
|
|
<div class="text-amber-400">Q4 2026</div>
|
|
</div>
|
|
|
|
<div class="flex gap-8 items-start">
|
|
<div class="w-8 h-8 bg-green-500 text-black flex-shrink-0 flex items-center justify-center font-bold">
|
|
04
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="font-bold text-green-400">Battle Pass</div>
|
|
<div class="text-green-300">Еженедельные челленджи: "Debug 50 bugs", "Объясни legacy код без мата"</div>
|
|
</div>
|
|
<div class="text-amber-400">Q1 2027</div>
|
|
</div>
|
|
|
|
<div class="flex gap-8 items-start">
|
|
<div class="w-8 h-8 bg-green-500 text-black flex-shrink-0 flex items-center justify-center font-bold">
|
|
05
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="font-bold text-green-400">Лутбоксы</div>
|
|
<div class="text-green-300">
|
|
Rare скины, voice packs ("Quack but Russian", "Quack but Rust"), эксклюзивные ошибки
|
|
</div>
|
|
</div>
|
|
<div class="text-amber-400">Q2 2027</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer CTA -->
|
|
<footer class="border-t border-green-500 py-12 bg-black">
|
|
<div class="max-w-4xl mx-auto text-center px-6">
|
|
<button
|
|
onclick="startDebugging()"
|
|
class="w-full max-w-md mx-auto block px-12 py-6 text-4xl border-4 border-green-500 hover:bg-green-500 hover:text-black transition-all"
|
|
>
|
|
НАЧАТЬ ДЕБАГ СЕССИЮ →
|
|
</button>
|
|
<p class="mt-8 text-green-400">Made with ❤️ and too much coffee • 2026</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Tailwind script already included via CDN
|
|
function toggleTheme() {
|
|
if (document.documentElement.classList.contains("light")) {
|
|
document.documentElement.classList.remove("light");
|
|
document.body.style.background = "#0a0a0a";
|
|
document.body.style.color = "#00ff00";
|
|
} else {
|
|
document.documentElement.classList.add("light");
|
|
document.body.style.background = "#f0f0f0";
|
|
document.body.style.color = "#006600";
|
|
}
|
|
}
|
|
|
|
// Flying code lines
|
|
function createCodeLine() {
|
|
const lines = [
|
|
"const bug = null;",
|
|
"if (user.isConfused) quack();",
|
|
"git commit -m 'fixed everything'",
|
|
"SELECT * FROM problems WHERE solved = false;",
|
|
"try { explainToDuck() } catch(e) {}",
|
|
"sudo rm -rf /problems",
|
|
"console.log('why is this not working');",
|
|
"def debug(): return 'quack'",
|
|
];
|
|
|
|
const line = document.createElement("div");
|
|
line.className = "code-line";
|
|
line.textContent = lines[Math.floor(Math.random() * lines.length)];
|
|
line.style.left = Math.random() * 100 + "vw";
|
|
line.style.animationDuration = Math.random() * 8 + 12 + "s";
|
|
line.style.fontSize = Math.random() * 12 + 13 + "px";
|
|
line.style.opacity = Math.random() * 0.6 + 0.2;
|
|
|
|
document.getElementById("code-bg").appendChild(line);
|
|
|
|
setTimeout(() => {
|
|
line.remove();
|
|
}, 25000);
|
|
}
|
|
|
|
// Start debugging simulation
|
|
function startDebugging() {
|
|
const messages = [
|
|
"🦆 Соединяемся с утёнком...",
|
|
"🦆 Утёнок слушает...",
|
|
"🦆 Quack... Quack... Решение найдено!",
|
|
];
|
|
|
|
let i = 0;
|
|
const notif = document.createElement("div");
|
|
notif.style.position = "fixed";
|
|
notif.style.bottom = "40px";
|
|
notif.style.left = "50%";
|
|
notif.style.transform = "translateX(-50%)";
|
|
notif.style.background = "black";
|
|
notif.style.border = "3px solid #00ff00";
|
|
notif.style.padding = "20px 40px";
|
|
notif.style.fontSize = "28px";
|
|
notif.style.zIndex = "10000";
|
|
document.body.appendChild(notif);
|
|
|
|
const interval = setInterval(() => {
|
|
notif.textContent = messages[i];
|
|
i++;
|
|
if (i >= messages.length) {
|
|
clearInterval(interval);
|
|
setTimeout(() => notif.remove(), 2000);
|
|
}
|
|
}, 800);
|
|
}
|
|
|
|
// Initialize everything
|
|
window.onload = function () {
|
|
// Generate flying code
|
|
setInterval(createCodeLine, 180);
|
|
|
|
// Initial lines
|
|
for (let i = 0; i < 12; i++) {
|
|
setTimeout(createCodeLine, i * 120);
|
|
}
|
|
|
|
console.log(
|
|
"%c🦆 DUCKDEBUG.gg initialized successfully",
|
|
"color: #00ff00; font-family: monospace; font-size: 18px",
|
|
);
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|