1436 lines
48 KiB
HTML
1436 lines
48 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Ducky — Command Interface for Windows</title>
|
|
<meta name="description" content="Ducky is a terminal-style command app for Windows 10/11 with custom commands and CMD fallback." />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Share+Tech&family=Share+Tech+Mono&display=swap" rel="stylesheet" />
|
|
|
|
<style>
|
|
/* ─────────────────────────────────────────
|
|
RESET & BASE
|
|
───────────────────────────────────────── */
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
:root {
|
|
--black: #000000;
|
|
--white: #ffffff;
|
|
--green: #00ff41;
|
|
--green-dim: #00c832;
|
|
--green-glow: rgba(0, 255, 65, 0.18);
|
|
--green-faint: rgba(0, 255, 65, 0.06);
|
|
--red: #ff2244;
|
|
--grey-1: #111111;
|
|
--grey-2: #1a1a1a;
|
|
--grey-3: #2a2a2a;
|
|
--grey-text: #666666;
|
|
--border: rgba(255,255,255,0.07);
|
|
|
|
--font-ui: 'Share Tech', monospace;
|
|
--font-mono: 'Share Tech Mono', monospace;
|
|
|
|
--sp: 8px;
|
|
--sp2: 16px;
|
|
--sp3: 24px;
|
|
--sp4: 32px;
|
|
--sp5: 40px;
|
|
--sp6: 48px;
|
|
--sp8: 64px;
|
|
--sp10: 80px;
|
|
--sp16: 128px;
|
|
|
|
--max-w: 1100px;
|
|
--radius: 2px;
|
|
|
|
--transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--black);
|
|
color: var(--white);
|
|
font-family: var(--font-ui);
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--green);
|
|
color: var(--black);
|
|
}
|
|
|
|
/* ─────────────────────────────────────────
|
|
SCROLLBAR
|
|
───────────────────────────────────────── */
|
|
::-webkit-scrollbar { width: 4px; }
|
|
::-webkit-scrollbar-track { background: var(--black); }
|
|
::-webkit-scrollbar-thumb { background: var(--grey-3); border-radius: 2px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--green); }
|
|
|
|
/* ─────────────────────────────────────────
|
|
NAV
|
|
───────────────────────────────────────── */
|
|
nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--sp2) var(--sp4);
|
|
border-bottom: 1px solid var(--border);
|
|
background: rgba(0,0,0,0.85);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.nav-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp);
|
|
text-decoration: none;
|
|
color: var(--white);
|
|
font-family: var(--font-ui);
|
|
font-size: 17px;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.nav-brand-logo {
|
|
width: 28px;
|
|
height: 28px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.nav-brand-dot {
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--green);
|
|
margin-left: 2px;
|
|
animation: blink 1.8s step-end infinite;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0; }
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp4);
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: var(--grey-text);
|
|
text-decoration: none;
|
|
font-size: 13px;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
transition: color var(--transition);
|
|
}
|
|
|
|
.nav-links a:hover { color: var(--white); }
|
|
|
|
.nav-cta {
|
|
font-family: var(--font-ui);
|
|
font-size: 13px;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
padding: 7px 18px;
|
|
background: transparent;
|
|
border: 1px solid var(--green);
|
|
color: var(--green);
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition: background var(--transition), color var(--transition);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.nav-cta:hover {
|
|
background: var(--green);
|
|
color: var(--black);
|
|
}
|
|
|
|
/* ─────────────────────────────────────────
|
|
GRID BACKGROUND
|
|
───────────────────────────────────────── */
|
|
.grid-bg {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
background-image:
|
|
linear-gradient(var(--border) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--border) 1px, transparent 1px);
|
|
background-size: 48px 48px;
|
|
mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 30%, transparent 100%);
|
|
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 30%, transparent 100%);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* ─────────────────────────────────────────
|
|
LAYOUT UTILS
|
|
───────────────────────────────────────── */
|
|
.container {
|
|
max-width: var(--max-w);
|
|
margin: 0 auto;
|
|
padding: 0 var(--sp4);
|
|
}
|
|
|
|
section { position: relative; z-index: 1; }
|
|
|
|
/* ─────────────────────────────────────────
|
|
HERO
|
|
───────────────────────────────────────── */
|
|
#hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 80px;
|
|
}
|
|
|
|
.hero-inner {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--sp8);
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.hero-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--sp3);
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--sp);
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--green);
|
|
border: 1px solid rgba(0,255,65,0.3);
|
|
padding: 5px 12px;
|
|
border-radius: var(--radius);
|
|
width: fit-content;
|
|
background: var(--green-faint);
|
|
}
|
|
|
|
.hero-badge::before {
|
|
content: '';
|
|
display: block;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--green);
|
|
animation: blink 1.8s step-end infinite;
|
|
}
|
|
|
|
.hero-logo-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp2);
|
|
}
|
|
|
|
.hero-logo {
|
|
width: 56px;
|
|
height: 56px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.hero-title {
|
|
font-family: var(--font-ui);
|
|
font-size: clamp(56px, 7vw, 88px);
|
|
font-weight: 400;
|
|
letter-spacing: -0.01em;
|
|
line-height: 1;
|
|
color: var(--white);
|
|
}
|
|
|
|
.hero-title span {
|
|
color: var(--green);
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-family: var(--font-mono);
|
|
font-size: 15px;
|
|
color: var(--grey-text);
|
|
line-height: 1.7;
|
|
max-width: 460px;
|
|
border-left: 2px solid var(--green);
|
|
padding-left: var(--sp2);
|
|
}
|
|
|
|
.hero-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp2);
|
|
flex-wrap: wrap;
|
|
margin-top: var(--sp);
|
|
}
|
|
|
|
.btn-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--sp);
|
|
font-family: var(--font-ui);
|
|
font-size: 14px;
|
|
letter-spacing: 0.07em;
|
|
text-transform: uppercase;
|
|
padding: 14px 28px;
|
|
background: var(--green);
|
|
color: var(--black);
|
|
border: none;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
border-radius: var(--radius);
|
|
transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--green-dim);
|
|
box-shadow: 0 0 32px var(--green-glow);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-primary:active { transform: translateY(0); }
|
|
|
|
.btn-secondary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--sp);
|
|
font-family: var(--font-ui);
|
|
font-size: 14px;
|
|
letter-spacing: 0.07em;
|
|
text-transform: uppercase;
|
|
padding: 13px 28px;
|
|
background: transparent;
|
|
color: var(--grey-text);
|
|
border: 1px solid var(--grey-3);
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
border-radius: var(--radius);
|
|
transition: border-color var(--transition), color var(--transition);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
border-color: var(--white);
|
|
color: var(--white);
|
|
}
|
|
|
|
.hero-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp3);
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--grey-text);
|
|
letter-spacing: 0.06em;
|
|
margin-top: var(--sp);
|
|
}
|
|
|
|
.hero-meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.hero-meta-item svg { opacity: 0.5; }
|
|
|
|
/* ─── Hero Right: System Info Card ─── */
|
|
.hero-right {
|
|
position: relative;
|
|
}
|
|
|
|
.sys-card {
|
|
border: 1px solid var(--border);
|
|
background: var(--grey-1);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.sys-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--green), transparent);
|
|
}
|
|
|
|
.sys-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--sp2) var(--sp3);
|
|
border-bottom: 1px solid var(--border);
|
|
background: rgba(0,255,65,0.03);
|
|
}
|
|
|
|
.sys-card-title {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--grey-text);
|
|
}
|
|
|
|
.sys-card-dots {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.sys-card-dots span {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--grey-3);
|
|
}
|
|
|
|
.sys-card-body {
|
|
padding: var(--sp3);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--sp2);
|
|
}
|
|
|
|
.sys-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--sp2);
|
|
padding: var(--sp2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
transition: border-color var(--transition), background var(--transition);
|
|
}
|
|
|
|
.sys-row:hover {
|
|
border-color: rgba(0,255,65,0.2);
|
|
background: var(--green-faint);
|
|
}
|
|
|
|
.sys-row-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--green-faint);
|
|
border: 1px solid rgba(0,255,65,0.15);
|
|
border-radius: var(--radius);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sys-row-icon svg { color: var(--green); }
|
|
|
|
.sys-row-text {}
|
|
|
|
.sys-row-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--grey-text);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.sys-row-val {
|
|
font-family: var(--font-mono);
|
|
font-size: 13px;
|
|
color: var(--white);
|
|
}
|
|
|
|
.sys-row-val .accent { color: var(--green); }
|
|
|
|
.sys-card-footer {
|
|
padding: var(--sp2) var(--sp3);
|
|
border-top: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp);
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--grey-text);
|
|
}
|
|
|
|
.status-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--green);
|
|
animation: blink 1.8s step-end infinite;
|
|
}
|
|
|
|
/* ─────────────────────────────────────────
|
|
SECTION HEADERS
|
|
───────────────────────────────────────── */
|
|
.section-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
color: var(--green);
|
|
margin-bottom: var(--sp2);
|
|
}
|
|
|
|
.section-title {
|
|
font-family: var(--font-ui);
|
|
font-size: clamp(28px, 3.5vw, 44px);
|
|
font-weight: 400;
|
|
letter-spacing: -0.01em;
|
|
line-height: 1.1;
|
|
color: var(--white);
|
|
margin-bottom: var(--sp2);
|
|
}
|
|
|
|
.section-desc {
|
|
font-family: var(--font-mono);
|
|
font-size: 14px;
|
|
color: var(--grey-text);
|
|
max-width: 560px;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
/* ─────────────────────────────────────────
|
|
DIVIDER
|
|
───────────────────────────────────────── */
|
|
.divider {
|
|
height: 1px;
|
|
background: var(--border);
|
|
margin: 0;
|
|
}
|
|
|
|
/* ─────────────────────────────────────────
|
|
COMMANDS STRIP
|
|
───────────────────────────────────────── */
|
|
#commands {
|
|
padding: var(--sp6) 0;
|
|
border-top: 1px solid var(--border);
|
|
border-bottom: 1px solid var(--border);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.commands-inner {
|
|
display: flex;
|
|
gap: var(--sp3);
|
|
animation: scrollx 22s linear infinite;
|
|
width: max-content;
|
|
}
|
|
|
|
@keyframes scrollx {
|
|
from { transform: translateX(0); }
|
|
to { transform: translateX(-50%); }
|
|
}
|
|
|
|
.cmd-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--sp);
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
letter-spacing: 0.06em;
|
|
padding: 6px 14px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 999px;
|
|
color: var(--grey-text);
|
|
white-space: nowrap;
|
|
background: var(--grey-1);
|
|
}
|
|
|
|
.cmd-pill .cmd-prefix {
|
|
color: var(--green);
|
|
font-size: 11px;
|
|
}
|
|
|
|
/* ─────────────────────────────────────────
|
|
FEATURES
|
|
───────────────────────────────────────── */
|
|
#features {
|
|
padding: var(--sp16) 0;
|
|
}
|
|
|
|
.features-head {
|
|
margin-bottom: var(--sp8);
|
|
}
|
|
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: var(--sp2);
|
|
}
|
|
|
|
.feat-card {
|
|
border: 1px solid var(--border);
|
|
background: var(--grey-1);
|
|
border-radius: var(--radius);
|
|
padding: var(--sp4);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: border-color var(--transition), background var(--transition);
|
|
cursor: default;
|
|
}
|
|
|
|
.feat-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 2px;
|
|
background: var(--green);
|
|
transform: scaleX(0);
|
|
transform-origin: left;
|
|
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.feat-card:hover::after { transform: scaleX(1); }
|
|
|
|
.feat-card:hover {
|
|
border-color: rgba(0,255,65,0.2);
|
|
background: var(--grey-2);
|
|
}
|
|
|
|
.feat-card.featured {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.feat-num {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
letter-spacing: 0.1em;
|
|
color: var(--grey-text);
|
|
margin-bottom: var(--sp2);
|
|
}
|
|
|
|
.feat-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--green-faint);
|
|
border: 1px solid rgba(0,255,65,0.15);
|
|
border-radius: var(--radius);
|
|
margin-bottom: var(--sp3);
|
|
color: var(--green);
|
|
}
|
|
|
|
.feat-name {
|
|
font-family: var(--font-ui);
|
|
font-size: 18px;
|
|
color: var(--white);
|
|
margin-bottom: var(--sp);
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.feat-desc {
|
|
font-family: var(--font-mono);
|
|
font-size: 13px;
|
|
color: var(--grey-text);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.feat-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--green);
|
|
border: 1px solid rgba(0,255,65,0.25);
|
|
padding: 3px 8px;
|
|
border-radius: var(--radius);
|
|
margin-top: var(--sp3);
|
|
background: var(--green-faint);
|
|
}
|
|
|
|
/* ─────────────────────────────────────────
|
|
COMMANDS REFERENCE
|
|
───────────────────────────────────────── */
|
|
#cmd-ref {
|
|
padding: var(--sp16) 0;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.cmd-table-wrap {
|
|
margin-top: var(--sp6);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cmd-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.cmd-table thead tr {
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--grey-1);
|
|
}
|
|
|
|
.cmd-table th {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--grey-text);
|
|
text-align: left;
|
|
padding: var(--sp2) var(--sp3);
|
|
}
|
|
|
|
.cmd-table tbody tr {
|
|
border-bottom: 1px solid var(--border);
|
|
transition: background var(--transition);
|
|
}
|
|
|
|
.cmd-table tbody tr:last-child { border-bottom: none; }
|
|
|
|
.cmd-table tbody tr:hover { background: var(--grey-1); }
|
|
|
|
.cmd-table td {
|
|
font-family: var(--font-mono);
|
|
font-size: 13px;
|
|
padding: var(--sp2) var(--sp3);
|
|
vertical-align: top;
|
|
}
|
|
|
|
.cmd-name {
|
|
color: var(--green);
|
|
}
|
|
|
|
.cmd-syntax {
|
|
color: var(--white);
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.cmd-note {
|
|
color: var(--grey-text);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.cmd-badge {
|
|
display: inline-flex;
|
|
font-family: var(--font-mono);
|
|
font-size: 9px;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
padding: 2px 6px;
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.cmd-badge.fallback {
|
|
background: rgba(255,34,68,0.12);
|
|
border: 1px solid rgba(255,34,68,0.3);
|
|
color: var(--red);
|
|
}
|
|
|
|
.cmd-badge.core {
|
|
background: var(--green-faint);
|
|
border: 1px solid rgba(0,255,65,0.25);
|
|
color: var(--green);
|
|
}
|
|
|
|
/* ─────────────────────────────────────────
|
|
DOWNLOAD
|
|
───────────────────────────────────────── */
|
|
#download {
|
|
padding: var(--sp16) 0;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.dl-wrap {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--sp8);
|
|
align-items: center;
|
|
}
|
|
|
|
.dl-left {}
|
|
|
|
.dl-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--sp3);
|
|
}
|
|
|
|
.dl-card {
|
|
border: 1px solid rgba(0,255,65,0.2);
|
|
background: var(--grey-1);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.dl-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, var(--green), var(--green-dim));
|
|
}
|
|
|
|
.dl-card-body {
|
|
padding: var(--sp4);
|
|
}
|
|
|
|
.dl-card-title {
|
|
font-family: var(--font-ui);
|
|
font-size: 22px;
|
|
color: var(--white);
|
|
margin-bottom: var(--sp);
|
|
}
|
|
|
|
.dl-card-sub {
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
color: var(--grey-text);
|
|
margin-bottom: var(--sp4);
|
|
}
|
|
|
|
.dl-specs {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--sp);
|
|
margin-bottom: var(--sp4);
|
|
}
|
|
|
|
.dl-spec {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp);
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
color: var(--grey-text);
|
|
}
|
|
|
|
.dl-spec::before {
|
|
content: '';
|
|
display: block;
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background: var(--green);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dl-btn-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--sp);
|
|
}
|
|
|
|
.btn-download {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--sp);
|
|
font-family: var(--font-ui);
|
|
font-size: 15px;
|
|
letter-spacing: 0.07em;
|
|
text-transform: uppercase;
|
|
padding: 16px 32px;
|
|
background: var(--green);
|
|
color: var(--black);
|
|
border: none;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
border-radius: var(--radius);
|
|
transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
|
|
font-weight: 700;
|
|
width: 100%;
|
|
}
|
|
|
|
.btn-download:hover {
|
|
background: var(--green-dim);
|
|
box-shadow: 0 0 48px rgba(0,255,65,0.25);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.dl-notice {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--grey-text);
|
|
text-align: center;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.dl-notice span { color: var(--red); }
|
|
|
|
.dl-stats {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--sp2);
|
|
}
|
|
|
|
.dl-stat {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--sp2) var(--sp3);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
background: var(--grey-1);
|
|
}
|
|
|
|
.dl-stat-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--grey-text);
|
|
}
|
|
|
|
.dl-stat-val {
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
color: var(--white);
|
|
}
|
|
|
|
.dl-stat-val.ok { color: var(--green); }
|
|
|
|
/* ─────────────────────────────────────────
|
|
FOOTER
|
|
───────────────────────────────────────── */
|
|
footer {
|
|
border-top: 1px solid var(--border);
|
|
padding: var(--sp6) var(--sp4);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.footer-brand {
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
color: var(--grey-text);
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.footer-brand strong {
|
|
color: var(--white);
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
gap: var(--sp3);
|
|
list-style: none;
|
|
}
|
|
|
|
.footer-links a {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--grey-text);
|
|
text-decoration: none;
|
|
transition: color var(--transition);
|
|
}
|
|
|
|
.footer-links a:hover { color: var(--green); }
|
|
|
|
.footer-copy {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--grey-text);
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
/* ─────────────────────────────────────────
|
|
SCROLL REVEAL
|
|
───────────────────────────────────────── */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity 500ms ease, transform 500ms ease;
|
|
}
|
|
|
|
.reveal.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* ─────────────────────────────────────────
|
|
RESPONSIVE
|
|
───────────────────────────────────────── */
|
|
@media (max-width: 900px) {
|
|
nav { padding: var(--sp2); }
|
|
.nav-links { display: none; }
|
|
.hero-inner { grid-template-columns: 1fr; gap: var(--sp6); }
|
|
.hero-right { display: none; }
|
|
.features-grid { grid-template-columns: 1fr; }
|
|
.feat-card.featured { grid-column: span 1; }
|
|
.dl-wrap { grid-template-columns: 1fr; }
|
|
.dl-stats { display: none; }
|
|
footer { flex-direction: column; gap: var(--sp2); text-align: center; }
|
|
.footer-links { display: none; }
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.hero-title { font-size: 48px; }
|
|
.container { padding: 0 var(--sp2); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- GRID BG -->
|
|
<div class="grid-bg" aria-hidden="true"></div>
|
|
|
|
<!-- ── NAV ── -->
|
|
<nav role="navigation" aria-label="Primary">
|
|
<a href="#" class="nav-brand" aria-label="Ducky home">
|
|
<img src="logo.png" alt="Ducky logo" class="nav-brand-logo" onerror="this.style.display='none'" />
|
|
DUCKY<span class="nav-brand-dot" aria-hidden="true"></span>
|
|
</a>
|
|
<ul class="nav-links" role="list">
|
|
<li><a href="#features">Features</a></li>
|
|
<li><a href="#cmd-ref">Commands</a></li>
|
|
<li><a href="#download">Download</a></li>
|
|
</ul>
|
|
<a href="ducky-installer.exe" download class="nav-cta">
|
|
Download .exe
|
|
</a>
|
|
</nav>
|
|
|
|
<!-- ── HERO ── -->
|
|
<section id="hero" aria-label="Hero">
|
|
<div class="container">
|
|
<div class="hero-inner">
|
|
|
|
<div class="hero-left">
|
|
<span class="hero-badge">Windows 10 / 11</span>
|
|
|
|
<div class="hero-logo-wrap">
|
|
<img src="logo.png" alt="" class="hero-logo" onerror="this.style.display='none'" aria-hidden="true" />
|
|
<h1 class="hero-title">Duck<span>y</span></h1>
|
|
</div>
|
|
|
|
<p class="hero-subtitle">
|
|
A tool with custom commands and CMD fallback.<br />
|
|
Built for developers who live in the terminal.
|
|
</p>
|
|
|
|
<div class="hero-actions">
|
|
<a href="ducky-installer.exe" download class="btn-primary" aria-label="Download Ducky installer">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
|
Download for Windows
|
|
</a>
|
|
<a href="#features" class="btn-secondary" aria-label="View features">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
|
See Features
|
|
</a>
|
|
</div>
|
|
|
|
<div class="hero-meta" aria-label="System requirements">
|
|
<span class="hero-meta-item">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
|
|
Windows 10/11
|
|
</span>
|
|
<span class="hero-meta-item">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
|
|
CMD Compatible
|
|
</span>
|
|
<span class="hero-meta-item">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
|
Lightweight
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-right" aria-hidden="true">
|
|
<div class="sys-card">
|
|
<div class="sys-card-header">
|
|
<span class="sys-card-title">System Overview</span>
|
|
<div class="sys-card-dots">
|
|
<span></span><span></span><span></span>
|
|
</div>
|
|
</div>
|
|
<div class="sys-card-body">
|
|
<div class="sys-row">
|
|
<div class="sys-row-icon">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
|
|
</div>
|
|
<div class="sys-row-text">
|
|
<div class="sys-row-label">Runtime</div>
|
|
<div class="sys-row-val">Ducky v1.0 — <span class="accent">ACTIVE</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="sys-row">
|
|
<div class="sys-row-icon">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
|
|
</div>
|
|
<div class="sys-row-text">
|
|
<div class="sys-row-label">Platform</div>
|
|
<div class="sys-row-val">Windows <span class="accent">10 / 11</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="sys-row">
|
|
<div class="sys-row-icon">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
|
</div>
|
|
<div class="sys-row-text">
|
|
<div class="sys-row-label">Web Search</div>
|
|
<div class="sys-row-val">DuckDuckGo — <span class="accent">TOP 5</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="sys-row">
|
|
<div class="sys-row-icon">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
|
</div>
|
|
<div class="sys-row-text">
|
|
<div class="sys-row-label">Fallback</div>
|
|
<div class="sys-row-val">CMD — <span class="accent">ENABLED</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="sys-row">
|
|
<div class="sys-row-icon">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
|
</div>
|
|
<div class="sys-row-text">
|
|
<div class="sys-row-label">File Resume</div>
|
|
<div class="sys-row-val">Media / Docs — <span class="accent">READY</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sys-card-footer">
|
|
<div class="status-dot"></div>
|
|
All systems operational
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── COMMAND STRIP ── -->
|
|
<div id="commands" aria-hidden="true">
|
|
<div class="commands-inner">
|
|
<!-- duplicated for seamless loop -->
|
|
<span class="cmd-pill"><span class="cmd-prefix">></span> help</span>
|
|
<span class="cmd-pill"><span class="cmd-prefix">></span> cd Documents</span>
|
|
<span class="cmd-pill"><span class="cmd-prefix">></span> show report.pdf</span>
|
|
<span class="cmd-pill"><span class="cmd-prefix">></span> searchweb "dark matter"</span>
|
|
<span class="cmd-pill"><span class="cmd-prefix">></span> open https://example.com</span>
|
|
<span class="cmd-pill"><span class="cmd-prefix">></span> exit</span>
|
|
<span class="cmd-pill"><span class="cmd-prefix">></span> ---forcecmd</span>
|
|
<span class="cmd-pill"><span class="cmd-prefix">></span> show video.mp4</span>
|
|
<span class="cmd-pill"><span class="cmd-prefix">></span> cd Downloads</span>
|
|
<span class="cmd-pill"><span class="cmd-prefix">></span> searchweb "black holes"</span>
|
|
<!-- loop clone -->
|
|
<span class="cmd-pill"><span class="cmd-prefix">></span> help</span>
|
|
<span class="cmd-pill"><span class="cmd-prefix">></span> cd Documents</span>
|
|
<span class="cmd-pill"><span class="cmd-prefix">></span> show report.pdf</span>
|
|
<span class="cmd-pill"><span class="cmd-prefix">></span> searchweb "dark matter"</span>
|
|
<span class="cmd-pill"><span class="cmd-prefix">></span> open https://example.com</span>
|
|
<span class="cmd-pill"><span class="cmd-prefix">></span> exit</span>
|
|
<span class="cmd-pill"><span class="cmd-prefix">></span> ---forcecmd</span>
|
|
<span class="cmd-pill"><span class="cmd-prefix">></span> show video.mp4</span>
|
|
<span class="cmd-pill"><span class="cmd-prefix">></span> cd Downloads</span>
|
|
<span class="cmd-pill"><span class="cmd-prefix">></span> searchweb "black holes"</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── FEATURES ── -->
|
|
<section id="features" aria-label="Features">
|
|
<div class="container">
|
|
<div class="features-head reveal">
|
|
<p class="section-label">/ Features</p>
|
|
<h2 class="section-title">Everything you need.<br />Nothing you don't.</h2>
|
|
<p class="section-desc">Ducky extends your command-line workflow with powerful built-in commands while staying fully compatible with the Windows CMD ecosystem.</p>
|
|
</div>
|
|
|
|
<div class="features-grid">
|
|
|
|
<div class="feat-card featured reveal" style="transition-delay:80ms" aria-label="Custom command system">
|
|
<div class="feat-num">01</div>
|
|
<div class="feat-icon" aria-hidden="true">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
|
|
</div>
|
|
<h3 class="feat-name">Custom Command System</h3>
|
|
<p class="feat-desc">Ducky ships with its own command layer — purpose-built, fast, and intuitive. Every command is designed for real developer workflows: navigate directories, open files, search the web, and handle URLs without ever leaving your terminal context. Compose commands naturally with clean, readable syntax.</p>
|
|
<span class="feat-tag">Core Engine</span>
|
|
</div>
|
|
|
|
<div class="feat-card reveal" style="transition-delay:160ms" aria-label="CMD fallback">
|
|
<div class="feat-num">02</div>
|
|
<div class="feat-icon" aria-hidden="true">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
|
</div>
|
|
<h3 class="feat-name">CMD Fallback</h3>
|
|
<p class="feat-desc">Unknown command? Ducky forwards it to Windows CMD automatically — or use <code>---forcecmd</code> to route any input directly.</p>
|
|
<span class="feat-tag">Compatibility</span>
|
|
</div>
|
|
|
|
<div class="feat-card reveal" style="transition-delay:240ms" aria-label="Web search">
|
|
<div class="feat-num">03</div>
|
|
<div class="feat-icon" aria-hidden="true">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
|
</div>
|
|
<h3 class="feat-name">Web Search</h3>
|
|
<p class="feat-desc">Run <code>searchweb <query></code> to fetch the top 5 DuckDuckGo results inline, without leaving Ducky.</p>
|
|
<span class="feat-tag">DuckDuckGo</span>
|
|
</div>
|
|
|
|
<div class="feat-card reveal" style="transition-delay:320ms" aria-label="File and media handling">
|
|
<div class="feat-num">04</div>
|
|
<div class="feat-icon" aria-hidden="true">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
|
</div>
|
|
<h3 class="feat-name">File & Media Handling</h3>
|
|
<p class="feat-desc">Open any file or media with <code>show</code>. Ducky tracks playback position and resumes exactly where you left off.</p>
|
|
<span class="feat-tag">Resume Support</span>
|
|
</div>
|
|
|
|
<div class="feat-card reveal" style="transition-delay:400ms" aria-label="URL handling">
|
|
<div class="feat-num">05</div>
|
|
<div class="feat-icon" aria-hidden="true">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
|
|
</div>
|
|
<h3 class="feat-name">URL Handling</h3>
|
|
<p class="feat-desc">Use <code>open <url></code> to launch a URL in your default browser, or inspect it directly in terminal mode for raw output.</p>
|
|
<span class="feat-tag">Browser + Terminal</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── COMMAND REFERENCE ── -->
|
|
<section id="cmd-ref" aria-label="Command reference">
|
|
<div class="container">
|
|
<div class="reveal">
|
|
<p class="section-label">/ Commands</p>
|
|
<h2 class="section-title">Command reference.</h2>
|
|
<p class="section-desc">Ducky's full built-in command set. Any unrecognized input is forwarded to CMD automatically.</p>
|
|
</div>
|
|
|
|
<div class="cmd-table-wrap reveal" style="transition-delay:100ms">
|
|
<table class="cmd-table" role="table" aria-label="Ducky command reference">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Command</th>
|
|
<th scope="col">Syntax</th>
|
|
<th scope="col">Description</th>
|
|
<th scope="col">Type</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="cmd-name">help</td>
|
|
<td class="cmd-syntax">help</td>
|
|
<td class="cmd-note">List all available Ducky commands with descriptions</td>
|
|
<td><span class="cmd-badge core">core</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="cmd-name">cd</td>
|
|
<td class="cmd-syntax">cd <path></td>
|
|
<td class="cmd-note">Change the current working directory</td>
|
|
<td><span class="cmd-badge core">core</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="cmd-name">show</td>
|
|
<td class="cmd-syntax">show <file></td>
|
|
<td class="cmd-note">Open a file or media file; resumes from last position</td>
|
|
<td><span class="cmd-badge core">core</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="cmd-name">searchweb</td>
|
|
<td class="cmd-syntax">searchweb <query></td>
|
|
<td class="cmd-note">Fetch top 5 DuckDuckGo results inline in Ducky</td>
|
|
<td><span class="cmd-badge core">core</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="cmd-name">open</td>
|
|
<td class="cmd-syntax">open <url></td>
|
|
<td class="cmd-note">Open a URL in the default browser or terminal mode</td>
|
|
<td><span class="cmd-badge core">core</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="cmd-name">exit</td>
|
|
<td class="cmd-syntax">exit</td>
|
|
<td class="cmd-note">Close Ducky and terminate the current session</td>
|
|
<td><span class="cmd-badge core">core</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="cmd-name">---forcecmd</td>
|
|
<td class="cmd-syntax">---forcecmd <cmd></td>
|
|
<td class="cmd-note">Force any input to be routed directly to Windows CMD</td>
|
|
<td><span class="cmd-badge fallback">fallback</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── DOWNLOAD ── -->
|
|
<section id="download" aria-label="Download Ducky">
|
|
<div class="container">
|
|
<div class="dl-wrap">
|
|
|
|
<div class="dl-left reveal">
|
|
<p class="section-label">/ Download</p>
|
|
<h2 class="section-title">Ready to run.<br />One installer.</h2>
|
|
<p class="section-desc">
|
|
Download the Ducky installer for Windows. Double-click to install, launch from your start menu or taskbar, and get to work immediately.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="dl-right reveal" style="transition-delay:100ms">
|
|
<div class="dl-card">
|
|
<div class="dl-card-body">
|
|
<h3 class="dl-card-title">Ducky for Windows</h3>
|
|
<p class="dl-card-sub">Stable release — Windows 10 / 11 (x64)</p>
|
|
|
|
<div class="dl-specs" role="list" aria-label="System requirements">
|
|
<div class="dl-spec" role="listitem">Windows 10 version 1903 or later</div>
|
|
<div class="dl-spec" role="listitem">Windows 11 — fully supported</div>
|
|
<div class="dl-spec" role="listitem">x64 architecture required</div>
|
|
<div class="dl-spec" role="listitem">No runtime dependencies</div>
|
|
<div class="dl-spec" role="listitem">Standard CMD access required</div>
|
|
</div>
|
|
|
|
<div class="dl-btn-wrap">
|
|
<a href="ducky-installer.exe" download class="btn-download" aria-label="Download Ducky installer (.exe)">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
|
Download ducky-installer.exe
|
|
</a>
|
|
<p class="dl-notice">
|
|
Windows may show a SmartScreen prompt — click <span>"Run anyway"</span> to proceed.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dl-stats" aria-label="Build information">
|
|
<div class="dl-stat">
|
|
<span class="dl-stat-label">Platform</span>
|
|
<span class="dl-stat-val">Win 10 / 11</span>
|
|
</div>
|
|
<div class="dl-stat">
|
|
<span class="dl-stat-label">Architecture</span>
|
|
<span class="dl-stat-val">x64</span>
|
|
</div>
|
|
<div class="dl-stat">
|
|
<span class="dl-stat-label">Installer</span>
|
|
<span class="dl-stat-val">.exe</span>
|
|
</div>
|
|
<div class="dl-stat">
|
|
<span class="dl-stat-label">CMD Fallback</span>
|
|
<span class="dl-stat-val ok">Enabled</span>
|
|
</div>
|
|
<div class="dl-stat">
|
|
<span class="dl-stat-label">Status</span>
|
|
<span class="dl-stat-val ok">Stable</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── FOOTER ── -->
|
|
<footer role="contentinfo">
|
|
<p class="footer-brand">
|
|
<strong>Ducky</strong> — Terminal command interface for Windows
|
|
</p>
|
|
<ul class="footer-links" role="list" aria-label="Footer navigation">
|
|
<li><a href="#features">Features</a></li>
|
|
<li><a href="#cmd-ref">Commands</a></li>
|
|
<li><a href="#download">Download</a></li>
|
|
</ul>
|
|
<p class="footer-copy">
|
|
© <span id="year"></span> Ducky. Built for Windows 10/11.
|
|
</p>
|
|
</footer>
|
|
|
|
<script>
|
|
'use strict';
|
|
|
|
/* ─────────────────────────────────────────
|
|
INIT
|
|
───────────────────────────────────────── */
|
|
(function init() {
|
|
setYear();
|
|
initScrollReveal();
|
|
})();
|
|
|
|
/* ─────────────────────────────────────────
|
|
YEAR
|
|
───────────────────────────────────────── */
|
|
function setYear() {
|
|
var el = document.getElementById('year');
|
|
if (el) el.textContent = new Date().getFullYear();
|
|
}
|
|
|
|
/* ─────────────────────────────────────────
|
|
SCROLL REVEAL
|
|
───────────────────────────────────────── */
|
|
function initScrollReveal() {
|
|
var elements = document.querySelectorAll('.reveal');
|
|
if (!elements.length) return;
|
|
|
|
if (!('IntersectionObserver' in window)) {
|
|
elements.forEach(function(el) { el.classList.add('visible'); });
|
|
return;
|
|
}
|
|
|
|
var observer = new IntersectionObserver(
|
|
function(entries) {
|
|
entries.forEach(function(entry) {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
},
|
|
{ threshold: 0.12, rootMargin: '0px 0px -40px 0px' }
|
|
);
|
|
|
|
elements.forEach(function(el) { observer.observe(el); });
|
|
}
|
|
|
|
/* ─────────────────────────────────────────
|
|
SMOOTH NAV SCROLL
|
|
───────────────────────────────────────── */
|
|
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
|
|
anchor.addEventListener('click', function(e) {
|
|
var target = document.querySelector(this.getAttribute('href'));
|
|
if (!target) return;
|
|
e.preventDefault();
|
|
var offset = 72;
|
|
var top = target.getBoundingClientRect().top + window.pageYOffset - offset;
|
|
window.scrollTo({ top: top, behavior: 'smooth' });
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |