docs: add references
This commit is contained in:
@@ -23,6 +23,7 @@
|
|||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
|
"refs": "npx serve refs",
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
@@ -0,0 +1,33 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Refs</title>
|
||||||
|
<style>
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
body { height: 100vh; display: flex; flex-direction: column; background: #1a1a1a; color: #fff; font-family: sans-serif; }
|
||||||
|
nav { display: flex; gap: 2px; background: #2a2a2a; padding: 4px 8px; }
|
||||||
|
nav button { background: #3a3a3a; border: none; color: #aaa; padding: 6px 16px; cursor: pointer; font-size: 13px; border-radius: 3px; transition: background .15s, color .15s; }
|
||||||
|
nav button:hover { background: #4a4a4a; color: #fff; }
|
||||||
|
nav button.active { background: #fff; color: #000; }
|
||||||
|
iframe { flex: 1; border: none; background: #fff; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav>
|
||||||
|
<button class="active" onclick="show('ref1')">ref1</button>
|
||||||
|
<button onclick="show('ref2')">ref2</button>
|
||||||
|
<button onclick="show('ref3')">ref3</button>
|
||||||
|
<button onclick="show('ref4')">ref4</button>
|
||||||
|
</nav>
|
||||||
|
<iframe id="frame" src="ref1/"></iframe>
|
||||||
|
<script>
|
||||||
|
function show(name) {
|
||||||
|
document.getElementById('frame').src = name + '/';
|
||||||
|
document.querySelectorAll('nav button').forEach(b => b.classList.remove('active'));
|
||||||
|
event.target.classList.add('active');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,399 @@
|
|||||||
|
<!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>
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,367 @@
|
|||||||
|
<html lang="en" class="dark" data-theme="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Rubber Duck Debugging as a service</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
||||||
|
<link rel="stylesheet" href="./duck.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app">
|
||||||
|
<div class="relative min-h-screen overflow-hidden bg-background text-foreground">
|
||||||
|
<div aria-hidden="true" class="pointer-events-none fixed inset-0 z-0 overflow-hidden">
|
||||||
|
<span
|
||||||
|
class="code-line absolute font-mono text-code-float"
|
||||||
|
style="
|
||||||
|
top: 1.25%;
|
||||||
|
left: -8%;
|
||||||
|
font-size: 10px;
|
||||||
|
animation-delay: 0s;
|
||||||
|
animation-duration: 20s;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
user-select: none;
|
||||||
|
"
|
||||||
|
>const duck = new RubberDuck();</span
|
||||||
|
><span
|
||||||
|
class="code-line absolute font-mono text-code-float"
|
||||||
|
style="
|
||||||
|
top: 9.58333%;
|
||||||
|
left: -10%;
|
||||||
|
font-size: 11.5px;
|
||||||
|
animation-delay: 2.7s;
|
||||||
|
animation-duration: 21.9s;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
user-select: none;
|
||||||
|
"
|
||||||
|
>duck.listen(problem);</span
|
||||||
|
><span
|
||||||
|
class="code-line absolute font-mono text-code-float"
|
||||||
|
style="
|
||||||
|
top: 17.9167%;
|
||||||
|
left: -12%;
|
||||||
|
font-size: 13px;
|
||||||
|
animation-delay: 5.4s;
|
||||||
|
animation-duration: 23.8s;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
user-select: none;
|
||||||
|
"
|
||||||
|
>trace.stack().filter(signal);</span
|
||||||
|
><span
|
||||||
|
class="code-line absolute font-mono text-code-float"
|
||||||
|
style="
|
||||||
|
top: 26.25%;
|
||||||
|
left: -14%;
|
||||||
|
font-size: 10px;
|
||||||
|
animation-delay: 8.1s;
|
||||||
|
animation-duration: 25.7s;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
user-select: none;
|
||||||
|
"
|
||||||
|
>if (confused) explain(out_loud);</span
|
||||||
|
><span
|
||||||
|
class="code-line absolute font-mono text-code-float"
|
||||||
|
style="
|
||||||
|
top: 34.5833%;
|
||||||
|
left: -16%;
|
||||||
|
font-size: 11.5px;
|
||||||
|
animation-delay: 10.8s;
|
||||||
|
animation-duration: 27.6s;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
user-select: none;
|
||||||
|
"
|
||||||
|
>return plan.nextStep();</span
|
||||||
|
><span
|
||||||
|
class="code-line absolute font-mono text-code-float"
|
||||||
|
style="
|
||||||
|
top: 42.9167%;
|
||||||
|
left: -8%;
|
||||||
|
font-size: 13px;
|
||||||
|
animation-delay: 13.5s;
|
||||||
|
animation-duration: 29.5s;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
user-select: none;
|
||||||
|
"
|
||||||
|
>debugger;</span
|
||||||
|
><span
|
||||||
|
class="code-line absolute font-mono text-code-float"
|
||||||
|
style="
|
||||||
|
top: 51.25%;
|
||||||
|
left: -10%;
|
||||||
|
font-size: 10px;
|
||||||
|
animation-delay: 16.2s;
|
||||||
|
animation-duration: 31.4s;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
user-select: none;
|
||||||
|
"
|
||||||
|
>console.log('aha moment...');</span
|
||||||
|
><span
|
||||||
|
class="code-line absolute font-mono text-code-float"
|
||||||
|
style="
|
||||||
|
top: 59.5833%;
|
||||||
|
left: -12%;
|
||||||
|
font-size: 11.5px;
|
||||||
|
animation-delay: 18.9s;
|
||||||
|
animation-duration: 33.3s;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
user-select: none;
|
||||||
|
"
|
||||||
|
>assert.equal(got, expected);</span
|
||||||
|
><span
|
||||||
|
class="code-line absolute font-mono text-code-float"
|
||||||
|
style="
|
||||||
|
top: 67.9167%;
|
||||||
|
left: -14%;
|
||||||
|
font-size: 13px;
|
||||||
|
animation-delay: 21.6s;
|
||||||
|
animation-duration: 21.2s;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
user-select: none;
|
||||||
|
"
|
||||||
|
>catch (e) { log(e.stack); }</span
|
||||||
|
><span
|
||||||
|
class="code-line absolute font-mono text-code-float"
|
||||||
|
style="
|
||||||
|
top: 76.25%;
|
||||||
|
left: -16%;
|
||||||
|
font-size: 10px;
|
||||||
|
animation-delay: 0.3s;
|
||||||
|
animation-duration: 23.1s;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
user-select: none;
|
||||||
|
"
|
||||||
|
>process.env.DEBUG = '*'</span
|
||||||
|
><span
|
||||||
|
class="code-line absolute font-mono text-code-float"
|
||||||
|
style="
|
||||||
|
top: 84.5833%;
|
||||||
|
left: -8%;
|
||||||
|
font-size: 11.5px;
|
||||||
|
animation-delay: 3s;
|
||||||
|
animation-duration: 25s;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
user-select: none;
|
||||||
|
"
|
||||||
|
>heap.snapshot().analyze();</span
|
||||||
|
><span
|
||||||
|
class="code-line absolute font-mono text-code-float"
|
||||||
|
style="
|
||||||
|
top: 92.9167%;
|
||||||
|
left: -10%;
|
||||||
|
font-size: 13px;
|
||||||
|
animation-delay: 5.7s;
|
||||||
|
animation-duration: 26.9s;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
user-select: none;
|
||||||
|
"
|
||||||
|
>git diff HEAD~1 --stat</span
|
||||||
|
><span
|
||||||
|
class="code-line absolute font-mono text-code-float"
|
||||||
|
style="
|
||||||
|
top: 1.25%;
|
||||||
|
left: -12%;
|
||||||
|
font-size: 10px;
|
||||||
|
animation-delay: 8.4s;
|
||||||
|
animation-duration: 28.8s;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
user-select: none;
|
||||||
|
"
|
||||||
|
>npm run debug:verbose</span
|
||||||
|
><span
|
||||||
|
class="code-line absolute font-mono text-code-float"
|
||||||
|
style="
|
||||||
|
top: 9.58333%;
|
||||||
|
left: -14%;
|
||||||
|
font-size: 11.5px;
|
||||||
|
animation-delay: 11.1s;
|
||||||
|
animation-duration: 30.7s;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
user-select: none;
|
||||||
|
"
|
||||||
|
>grep -r 'undefined' ./src</span
|
||||||
|
><span
|
||||||
|
class="code-line absolute font-mono text-code-float"
|
||||||
|
style="
|
||||||
|
top: 17.9167%;
|
||||||
|
left: -16%;
|
||||||
|
font-size: 13px;
|
||||||
|
animation-delay: 13.8s;
|
||||||
|
animation-duration: 32.6s;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
user-select: none;
|
||||||
|
"
|
||||||
|
>curl -v http://localhost:3000</span
|
||||||
|
><span
|
||||||
|
class="code-line absolute font-mono text-code-float"
|
||||||
|
style="
|
||||||
|
top: 26.25%;
|
||||||
|
left: -8%;
|
||||||
|
font-size: 10px;
|
||||||
|
animation-delay: 16.5s;
|
||||||
|
animation-duration: 20.5s;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
user-select: none;
|
||||||
|
"
|
||||||
|
>SELECT * FROM logs LIMIT 50;</span
|
||||||
|
><span
|
||||||
|
class="code-line absolute font-mono text-code-float"
|
||||||
|
style="
|
||||||
|
top: 34.5833%;
|
||||||
|
left: -10%;
|
||||||
|
font-size: 11.5px;
|
||||||
|
animation-delay: 19.2s;
|
||||||
|
animation-duration: 22.4s;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
user-select: none;
|
||||||
|
"
|
||||||
|
>docker logs --tail 200 app</span
|
||||||
|
><span
|
||||||
|
class="code-line absolute font-mono text-code-float"
|
||||||
|
style="
|
||||||
|
top: 42.9167%;
|
||||||
|
left: -12%;
|
||||||
|
font-size: 13px;
|
||||||
|
animation-delay: 21.9s;
|
||||||
|
animation-duration: 24.3s;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
user-select: none;
|
||||||
|
"
|
||||||
|
>strace -e trace=network -p $PID</span
|
||||||
|
><span
|
||||||
|
class="code-line absolute font-mono text-code-float"
|
||||||
|
style="
|
||||||
|
top: 51.25%;
|
||||||
|
left: -14%;
|
||||||
|
font-size: 10px;
|
||||||
|
animation-delay: 0.6s;
|
||||||
|
animation-duration: 26.2s;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
user-select: none;
|
||||||
|
"
|
||||||
|
>tcpdump -i any port 8080</span
|
||||||
|
><span
|
||||||
|
class="code-line absolute font-mono text-code-float"
|
||||||
|
style="
|
||||||
|
top: 59.5833%;
|
||||||
|
left: -16%;
|
||||||
|
font-size: 11.5px;
|
||||||
|
animation-delay: 3.3s;
|
||||||
|
animation-duration: 28.1s;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
user-select: none;
|
||||||
|
"
|
||||||
|
>breakpoint.set(line, 42);</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="relative z-20 p-4">
|
||||||
|
<a
|
||||||
|
href="/"
|
||||||
|
class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 shadow h-9 px-4 py-2 min-h-10 gap-2 bg-muted/80 text-foreground hover:bg-muted backdrop-blur-sm font-mono text-sm"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256">
|
||||||
|
<path
|
||||||
|
d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"
|
||||||
|
></path></svg
|
||||||
|
>duck://home
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="relative z-10 flex min-h-[calc(100vh-64px)] flex-col items-center justify-center gap-8 px-4 py-8 lg:flex-row lg:gap-12 lg:px-12"
|
||||||
|
>
|
||||||
|
<div class="flex flex-col items-center gap-4 lg:w-[40%]">
|
||||||
|
<div class="relative">
|
||||||
|
<div class="absolute inset-0 rounded-full blur-3xl opacity-40 bg-primary scale-125"></div>
|
||||||
|
<div class="relative rounded-3xl border border-border bg-card/60 backdrop-blur-md p-6 shadow-2xl">
|
||||||
|
<img
|
||||||
|
src="./img/ai_1.png"
|
||||||
|
alt="Rubber debug duck"
|
||||||
|
class="h-64 w-64 rounded-2xl object-cover md:h-80 md:w-80"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="mt-4 flex items-center justify-center gap-2 rounded-xl border border-border bg-panel/80 px-4 py-2"
|
||||||
|
>
|
||||||
|
<span class="relative flex h-2.5 w-2.5"
|
||||||
|
><span
|
||||||
|
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-75"
|
||||||
|
></span
|
||||||
|
><span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-primary"></span></span
|
||||||
|
><span class="font-mono text-xs text-primary">booting session...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center space-y-1">
|
||||||
|
<h1 class="font-mono text-2xl font-medium text-foreground">
|
||||||
|
<span class="text-primary">></span> RubberDuck.debug()
|
||||||
|
</h1>
|
||||||
|
<p class="text-sm text-muted-foreground font-light">Explain the bug. Follow the path. Ship the fix.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-full lg:w-[55%] max-w-2xl">
|
||||||
|
<div class="rounded-2xl border border-border bg-card/70 backdrop-blur-md shadow-2xl overflow-hidden">
|
||||||
|
<div class="flex items-center gap-2 border-b border-border bg-muted/80 px-4 py-3">
|
||||||
|
<div class="flex gap-1.5">
|
||||||
|
<span class="h-3 w-3 rounded-full bg-destructive/70"></span
|
||||||
|
><span class="h-3 w-3 rounded-full bg-warning/70"></span
|
||||||
|
><span class="h-3 w-3 rounded-full bg-success/70"></span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 ml-2">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="14"
|
||||||
|
height="14"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 256 256"
|
||||||
|
class="text-muted-foreground"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M117.31,134l-72,64a8,8,0,1,1-10.63-12L100,128,34.69,70A8,8,0,1,1,45.32,58l72,64a8,8,0,0,1,0,12ZM216,184H120a8,8,0,0,0,0,16h96a8,8,0,0,0,0-16Z"
|
||||||
|
></path></svg
|
||||||
|
><span class="font-mono text-xs text-muted-foreground">duck-session — bash</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="h-64 overflow-y-auto p-4 font-mono text-sm space-y-1 scrollbar-thin"
|
||||||
|
style="scrollbar-width: none"
|
||||||
|
>
|
||||||
|
<p class="text-muted-foreground"><span class="text-primary">duck@debug:~$</span> ./start-session.sh</p>
|
||||||
|
<p class="text-foreground">$ describe issue --env production</p>
|
||||||
|
<p class="text-tertiary pl-2">> analysing stack trace...</p>
|
||||||
|
<p class="text-foreground">$ git log --oneline -10</p>
|
||||||
|
<p class="text-tertiary pl-2">> narrowing root cause...</p>
|
||||||
|
<p class="text-foreground">$ strace -p $PID</p>
|
||||||
|
<p class="text-tertiary pl-2">> check<span class="animate-pulse text-primary">▌</span></p>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-border bg-muted/40 p-4">
|
||||||
|
<form class="flex gap-2">
|
||||||
|
<div
|
||||||
|
class="flex flex-1 items-center gap-2 rounded-xl border border-border bg-input/80 px-4 py-2 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary transition-all"
|
||||||
|
>
|
||||||
|
<span class="font-mono text-sm text-primary shrink-0">$</span
|
||||||
|
><input
|
||||||
|
type="text"
|
||||||
|
disabled=""
|
||||||
|
placeholder="initializing..."
|
||||||
|
class="flex-1 bg-transparent font-mono text-sm text-foreground outline-none placeholder:text-muted-foreground disabled:opacity-50"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="inline-flex items-center justify-center gap-2 whitespace-nowrap focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 h-9 py-2 min-h-10 rounded-xl bg-primary px-5 font-mono text-sm font-medium text-primary-foreground shadow-[0_0_18px_-4px_var(--color-primary)] hover:bg-primary-hover hover:shadow-[0_0_28px_-2px_var(--color-primary)] disabled:opacity-40 transition-shadow duration-300"
|
||||||
|
type="submit"
|
||||||
|
disabled=""
|
||||||
|
>
|
||||||
|
send
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="mt-2 font-mono text-xs text-muted-foreground">
|
||||||
|
rubber duck debugging as a service · v0.1.0-mvp
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+2258
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 199 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
+3514
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,73 @@
|
|||||||
|
.rfm-marquee-container {
|
||||||
|
overflow-x: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
position: relative;
|
||||||
|
width: var(--width);
|
||||||
|
transform: var(--transform);
|
||||||
|
}
|
||||||
|
.rfm-marquee-container:hover div {
|
||||||
|
animation-play-state: var(--pause-on-hover);
|
||||||
|
}
|
||||||
|
.rfm-marquee-container:active div {
|
||||||
|
animation-play-state: var(--pause-on-click);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rfm-overlay {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.rfm-overlay::before,
|
||||||
|
.rfm-overlay::after {
|
||||||
|
background: linear-gradient(to right, var(--gradient-color), rgba(255, 255, 255, 0));
|
||||||
|
content: "";
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
width: var(--gradient-width);
|
||||||
|
z-index: 2;
|
||||||
|
pointer-events: none;
|
||||||
|
touch-action: none;
|
||||||
|
}
|
||||||
|
.rfm-overlay::after {
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
transform: rotateZ(180deg);
|
||||||
|
}
|
||||||
|
.rfm-overlay::before {
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rfm-marquee {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
min-width: var(--min-width);
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
animation: scroll var(--duration) linear var(--delay) var(--iteration-count);
|
||||||
|
animation-play-state: var(--play);
|
||||||
|
animation-delay: var(--delay);
|
||||||
|
animation-direction: var(--direction);
|
||||||
|
}
|
||||||
|
@keyframes scroll {
|
||||||
|
0% {
|
||||||
|
transform: translateX(0%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rfm-initial-child-container {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
display: flex;
|
||||||
|
min-width: auto;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rfm-child {
|
||||||
|
transform: var(--transform);
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user