diff --git a/docs.html b/docs.html index afe3ff1..aa67369 100644 --- a/docs.html +++ b/docs.html @@ -86,39 +86,18 @@

Resources

- -
- - - - View Source Code -
- - - - - - + + View Source Code + - -
- - - - - Run Web Shell -
- - - - - -
-

Note: Web shell is a simulated environment, and native terminal is recommended

-
+ + Run Web Shell + + + - \ No newline at end of file + diff --git a/index.html b/index.html index 629fe90..dca2da6 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ -
+
$ diff --git a/package-lock.json b/package-lock.json index 4eb24be..c85af3e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -812,7 +812,6 @@ "integrity": "sha512-zWW5KPngR/yvakJgGOmZ5vTBemDoSqF3AcV/LrO5u5wTWyEAVVh+IT39G4gtyAkh3CtTZs8aX/yRM82OfzHJRg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -911,7 +910,6 @@ "version": "4.0.3", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, diff --git a/src/docs.css b/src/docs.css index 5f68921..1bd0764 100644 --- a/src/docs.css +++ b/src/docs.css @@ -24,16 +24,8 @@ body { } .container { - max-width: 900px; + max-width: 650px; margin: 0 auto; - opacity: 0; - animation: fadeIn 0.8s ease forwards; -} - -@keyframes fadeIn { - to { - opacity: 1; - } } .header { @@ -43,10 +35,14 @@ body { .back-link { color: var(--subtext0); text-decoration: none; - font-size: 0.9rem; + font-size: 0.85rem; margin-bottom: 2rem; display: inline-block; - transition: color 0.3s ease; + transition: color 0.2s ease; +} + +.back-link:hover { + color: var(--green); } .back-link:hover { @@ -70,20 +66,18 @@ h1 { } .command-box { - background-color: rgba(26, 26, 26, 0.8); - border: 2px solid var(--green); - border-radius: 8px; - padding: 1.5rem; + background: rgba(26, 26, 26, 0.8); + border: 1px solid var(--green); + padding: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; - box-shadow: 0 0 20px rgba(166, 227, 161, 0.1); - transition: all 0.3s ease; + transition: border-color 0.2s ease; } .command-box:hover { - box-shadow: 0 0 30px rgba(166, 227, 161, 0.15); + border-color: var(--blue); } .command-box code { @@ -121,19 +115,6 @@ h1 { .copy-btn.copied .check-icon { display: block; - animation: checkPop 0.3s ease; -} - -@keyframes checkPop { - 0% { - transform: scale(0); - } - 50% { - transform: scale(1.2); - } - 100% { - transform: scale(1); - } } .sections { @@ -143,35 +124,6 @@ h1 { } .section { - opacity: 0; - animation: slideUp 0.6s ease forwards; -} - -.section:nth-child(1) { - animation-delay: 0.2s; -} -.section:nth-child(2) { - animation-delay: 0.4s; -} -.section:nth-child(3) { - animation-delay: 0.6s; -} -.section:nth-child(4) { - animation-delay: 0.8s; -} -.section:nth-child(5) { - animation-delay: 1s; -} - -@keyframes slideUp { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } } h2 { @@ -179,14 +131,6 @@ h2 { font-size: 1.5rem; margin-bottom: 1.25rem; font-weight: 600; - display: flex; - align-items: center; - gap: 0.5rem; -} - -h2::before { - content: ">"; - color: var(--green); } p { @@ -208,22 +152,18 @@ strong { } .breakdown-item { - background-color: rgba(26, 26, 26, 0.5); - border: 1px solid rgba(166, 227, 161, 0.2); - border-radius: 8px; - padding: 1.5rem; - transition: all 0.3s ease; + padding: 1rem; + border-bottom: 1px solid rgba(166, 227, 161, 0.1); } -.breakdown-item:hover { - border-color: rgba(166, 227, 161, 0.4); - background-color: rgba(26, 26, 26, 0.7); +.breakdown-item:last-child { + border-bottom: none; } .breakdown-item h3 { color: var(--blue); - font-size: 1.1rem; - margin-bottom: 0.75rem; + font-size: 1rem; + margin-bottom: 0.5rem; font-weight: 600; } @@ -272,59 +212,23 @@ kbd { } .resource-card { - display: flex; - align-items: center; - justify-content: space-between; - padding: 1.25rem; - background-color: rgba(26, 26, 26, 0.5); - border: 1px solid rgba(166, 227, 161, 0.2); - border-radius: 8px; + display: block; + padding: 0.75rem 1rem; + background: rgba(26, 26, 26, 0.5); + border: 1px solid rgba(166, 227, 161, 0.15); text-decoration: none; color: var(--text); - transition: all 0.3s ease; - position: relative; - overflow: hidden; + margin: 0.5rem 0; + transition: border-color 0.2s ease, background-color 0.2s ease; } .resource-card:hover { - background-color: rgba(26, 26, 26, 0.7); border-color: var(--green); - transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(166, 227, 161, 0.1); + background: rgba(26, 26, 26, 0.7); } -.resource-content { - display: flex; - align-items: center; - gap: 0.75rem; -} - -.resource-content svg { - color: var(--green); -} - -.resource-content span { - font-size: 0.95rem; -} - -.external-icon, -.arrow-icon { - color: var(--subtext0); - opacity: 0; - transition: all 0.3s ease; -} - -.resource-card:hover .external-icon, -.resource-card:hover .arrow-icon { - opacity: 1; - color: var(--green); -} - -.note { - margin-top: 1rem; - font-size: 0.8rem; - text-align: center; - color: rgba(166, 172, 200, 0.6); +.resource-card span { + font-size: 0.9rem; } @media (max-width: 768px) { @@ -333,15 +237,11 @@ kbd { } h1 { - font-size: 2rem; + font-size: 1.8rem; } h2 { - font-size: 1.3rem; - } - - .command-box code { - font-size: 0.9rem; + font-size: 1.1rem; } .breakdown-grid, diff --git a/src/main.ts b/src/main.ts index 921d118..85f3220 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,59 +1,158 @@ import './style.css'; -// Matrix rain effect +// Beautiful Matrix Rain Background const canvas = document.getElementById('matrix') as HTMLCanvasElement; const ctx = canvas.getContext('2d')!; -canvas.width = window.innerWidth; -canvas.height = window.innerHeight; +let width = canvas.width = window.innerWidth; +let height = canvas.height = window.innerHeight; -const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%^&*()_+-=[]{}|;:,.<>?/~`'; -const fontSize = 14; -const columns = canvas.width / fontSize; -const drops: number[] = Array(Math.floor(columns)).fill(1); +// Catppuccin Mocha colors +const colors = { + green: '#a6e3a1', + blue: '#89b4fa', + mauve: '#cba6f7', + text: '#cdd6f4' +}; -let mouseX = canvas.width / 2; -let mouseY = canvas.height / 2; +const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%'; +const fontSize = 12; +const columns = Math.floor(width / fontSize); +const drops: number[] = Array(columns).fill(1); + +// Mouse interaction +let mouseX = width / 2; +let mouseY = height / 2; + +// Trail effect +const trail: { x: number; y: number; color: string; life: number }[] = []; + +function createExplosion(x: number, y: number) { + const color = Math.random() > 0.5 ? colors.green : colors.blue; + for (let i = 0; i < 12; i++) { + const angle = (Math.PI * 2 * i) / 12; + const speed = Math.random() * 2 + 1; + trail.push({ + x: x + (Math.random() - 0.5) * 20, + y: y + (Math.random() - 0.5) * 20, + color: color, + life: 1 + }); + } +} function draw() { + // Subtle fade for trails ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; - ctx.fillRect(0, 0, canvas.width, canvas.height); - + ctx.fillRect(0, 0, width, height); + + // Draw trail with glow + if (trail.length > 0) { + ctx.font = `${fontSize}px monospace`; + ctx.globalAlpha = 0.3; + for (let i = trail.length - 1; i >= 0; i--) { + const t = trail[i]; + ctx.fillStyle = t.color; + ctx.shadowBlur = 8; + ctx.shadowColor = t.color; + ctx.fillText(chars[Math.floor(Math.random() * chars.length)], t.x, t.y); + + t.life -= 0.03; + if (t.life <= 0) trail.splice(i, 1); + } + ctx.shadowBlur = 0; + } + + // Matrix rain with distance-based brightness ctx.font = `${fontSize}px monospace`; - for (let i = 0; i < drops.length; i++) { const x = i * fontSize; const y = drops[i] * fontSize; + + // Calculate distance from cursor const dist = Math.sqrt((x - mouseX) ** 2 + (y - mouseY) ** 2); - const text = chars[Math.floor(Math.random() * chars.length)]; + // Brighter near cursor, dimmer elsewhere + const brightness = Math.max(0.2, 1 - dist / 250); - // Only show characters near cursor - const alpha = Math.max(0, 1 - dist / 250); + // Pick color based on distance + let color: string; + if (dist < 80) color = colors.green; + else if (dist < 150) color = colors.blue; + else color = colors.mauve; - if (alpha > 0.1) { - const color = dist < 120 ? '#a6e3a1' : dist < 200 ? '#89b4fa' : '#6c7086'; - ctx.fillStyle = color + Math.floor(alpha * 255).toString(16).padStart(2, '0'); - ctx.fillText(text, x, y); - } + ctx.fillStyle = color; + ctx.fillText(chars[Math.floor(Math.random() * chars.length)], x, y); - if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) drops[i] = 0; + if (drops[i] * fontSize > height + fontSize && Math.random() > 0.95) drops[i] = 0; + drops[i]++; + } + + ctx.globalAlpha = 1; +} + +function update() { + // Add trail around cursor + if (Math.random() > 0.4) { + const dist = Math.sqrt((mouseX - width/2) ** 2 + (mouseY - height/2) ** 2); + trail.push({ + x: mouseX + (Math.random() - 0.5) * 20, + y: mouseY + (Math.random() - 0.5) * 20, + color: dist < 80 ? colors.green : colors.blue, + life: 1 + }); + } + if (trail.length > 10) trail.shift(); + + // Update drops + for (let i = 0; i < drops.length; i++) { + if (drops[i] * fontSize > height + fontSize && Math.random() > 0.93) drops[i] = 0; drops[i]++; } } -setInterval(draw, 33); +function loop() { + update(); + draw(); + requestAnimationFrame(loop); +} +// Mouse movement window.addEventListener('mousemove', (e) => { mouseX = e.clientX; mouseY = e.clientY; }); -window.addEventListener('resize', () => { - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; +// Click explosion +window.addEventListener('click', (e) => { + createExplosion(e.clientX, e.clientY); }); +// Touch support +window.addEventListener('touchmove', (e) => { + if ('ontouchstart' in window) { + mouseX = e.touches[0].clientX; + mouseY = e.touches[0].clientY; + } +}, { passive: true }); + +window.addEventListener('touchstart', (e) => { + if ('ontouchstart' in window) { + createExplosion(e.touches[0].clientX, e.touches[0].clientY); + } +}, { passive: true }); + +// Resize handler +function resize() { + width = canvas.width = window.innerWidth; + height = canvas.height = window.innerHeight; +} + +window.addEventListener('resize', resize); +resize(); + +loop(); + // Copy functionality const commandBox = document.getElementById('commandBox') as HTMLDivElement; const copyBtn = document.getElementById('copyBtn') as HTMLButtonElement; @@ -83,7 +182,7 @@ commandBox.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('.copy-btn')) copyToClipboard(); }); -// Fade in docs link after 2 seconds +// Fade in docs link after 3 seconds setTimeout(() => { document.getElementById('docsLink')?.classList.add('show'); -}, 2000); \ No newline at end of file +}, 3000); diff --git a/src/style.css b/src/style.css index 22e8e07..3265211 100644 --- a/src/style.css +++ b/src/style.css @@ -40,23 +40,28 @@ body { width: 100%; height: 100%; z-index: 0; + pointer-events: none; } .container { width: 100%; - max-width: 800px; + max-width: 500px; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; - gap: 2.5rem; + gap: 2rem; + padding: 1rem; opacity: 0; - transform: translateY(30px); - animation: fadeInUp 0.6s ease forwards; + animation: containerFloatUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; } -@keyframes fadeInUp { +@keyframes containerFloatUp { + from { + opacity: 0; + transform: translateY(30px); + } to { opacity: 1; transform: translateY(0); @@ -94,38 +99,34 @@ body { } .command-box { - background-color: rgba(0, 0, 0, 0.85); - backdrop-filter: blur(12px); - border: 2px solid #a6e3a1; - border-radius: 8px; - padding: 1.5rem 4rem 1.5rem 1.75rem; + background: rgba(0, 0, 0, 0.8); + border: 1px solid rgba(166, 227, 161, 0.3); + border-radius: 6px; + padding: 1rem 1.25rem; font-size: 1.1rem; + font-weight: 500; color: var(--text); display: flex; align-items: center; gap: 0.75rem; - transition: all 0.3s ease; cursor: pointer; user-select: none; - box-shadow: 0 0 20px rgba(166, 227, 161, 0.15); + transition: all 0.3s ease; } .command-box:hover { - background-color: rgba(0, 0, 0, 0.9); - border-color: #a6e3a1; - box-shadow: 0 0 30px rgba(166, 227, 161, 0.25); + border-color: rgba(166, 227, 161, 0.6); + box-shadow: 0 0 20px rgba(166, 227, 161, 0.1); transform: translateY(-2px); } .command-box:active { - transform: translateY(-2px) scale(0.98); + transform: translateY(0); } .dollar { color: var(--green); font-weight: 600; - font-size: 1.3rem; - text-shadow: 0 0 10px rgba(166, 227, 161, 0.5); } .command { @@ -135,28 +136,23 @@ body { .copy-btn { position: absolute; - right: 1rem; + right: 0.75rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--subtext0); cursor: pointer; - padding: 0.5rem; + padding: 0.25rem; display: flex; align-items: center; justify-content: center; - transition: all 0.2s ease; - border-radius: 4px; + transition: color 0.2s ease; + z-index: 10; } .copy-btn:hover { color: var(--green); - background-color: var(--surface1); -} - -.copy-btn:active { - transform: translateY(-50%) scale(0.9); } .copy-btn.copied { @@ -164,23 +160,23 @@ body { } .copy-btn svg { - width: 20px; - height: 20px; + width: 18px; + height: 18px; } .tooltip { position: absolute; - top: -2.5rem; + top: -2rem; right: 0; - background-color: var(--surface1); + background: rgba(26, 26, 26, 0.9); color: var(--green); - padding: 0.5rem 0.75rem; - border-radius: 4px; - font-size: 0.75rem; + padding: 0.3rem 0.6rem; + font-size: 0.65rem; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; white-space: nowrap; + z-index: 20; } .tooltip.show { @@ -192,73 +188,35 @@ body { padding: 1.5rem; } - .terminal-header { - margin-bottom: 2rem; + .container { + gap: 1.5rem; + padding: 1rem; } .command-box { - font-size: 0.9rem; - padding: 1.1rem 3rem 1.1rem 1.25rem; + font-size: 0.95rem; + padding: 0.85rem 1rem; } - .terminal-line { - font-size: 0.85rem; - } - - .copy-btn svg { - width: 18px; - height: 18px; + .docs-link { + font-size: 0.8rem; } } .docs-link { color: var(--subtext0); text-decoration: none; - font-size: 0.9rem; + font-size: 0.85rem; opacity: 0; - transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + transition: opacity 0.4s ease; position: relative; padding: 0.5rem 1rem; - border: 1px solid transparent; - border-radius: 6px; - transform: translateY(10px); -} - -.docs-link::before { - content: ""; - position: absolute; - bottom: 0; - left: 50%; - width: 0; - height: 1px; - background: linear-gradient(90deg, transparent, var(--green), transparent); - transition: all 0.4s ease; - transform: translateX(-50%); } .docs-link:hover { color: var(--green); - border-color: rgba(166, 227, 161, 0.2); - background-color: rgba(166, 227, 161, 0.05); - transform: translateY(-2px); -} - -.docs-link:hover::before { - width: 100%; } .docs-link.show { opacity: 1; - transform: translateY(0); - animation: pulse 2s ease-in-out 0.5s; -} - -@keyframes pulse { - 0%, - 100% { - box-shadow: 0 0 0 0 rgba(166, 227, 161, 0.4); - } - 50% { - box-shadow: 0 0 0 8px rgba(166, 227, 161, 0); - } }