create-yonderclaw 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +44 -0
- package/README.md +288 -0
- package/bin/create-yonderclaw.mjs +43 -0
- package/docs/assets/favicon.png +0 -0
- package/docs/assets/metaclaw-banner.svg +86 -0
- package/docs/assets/qis-logo.png +0 -0
- package/docs/assets/yz-favicon.png +0 -0
- package/docs/assets/yz-logo.png +0 -0
- package/docs/index.html +1155 -0
- package/installer/assets/favicon.png +0 -0
- package/installer/auto-start.ts +330 -0
- package/installer/brand.ts +115 -0
- package/installer/core-scaffold.ts +448 -0
- package/installer/dashboard-generator.ts +657 -0
- package/installer/detect.ts +129 -0
- package/installer/index.ts +355 -0
- package/installer/module-loader.ts +412 -0
- package/installer/modules/boardroom/boardroom/client.ts.txt +201 -0
- package/installer/modules/boardroom/boardroom/db.ts.txt +322 -0
- package/installer/modules/boardroom/boardroom/meeting-agent.ts.txt +129 -0
- package/installer/modules/boardroom/boardroom/meeting-scheduler.ts.txt +194 -0
- package/installer/modules/boardroom/boardroom/server.ts.txt +473 -0
- package/installer/modules/boardroom/boardroom/start-boardroom.bat.txt +26 -0
- package/installer/modules/boardroom/boardroom/summons.ts.txt +76 -0
- package/installer/modules/boardroom/boardroom/turn-v2.ts.txt +172 -0
- package/installer/modules/boardroom/boardroom/turn.ts.txt +208 -0
- package/installer/modules/boardroom/boardroom/types.ts.txt +100 -0
- package/installer/modules/boardroom/metaclaw-module.json +35 -0
- package/installer/modules/boardroom/scripts/meeting-check.bat.txt +38 -0
- package/installer/modules/core/metaclaw-module.json +51 -0
- package/installer/modules/core/src/db.ts.txt +277 -0
- package/installer/modules/core/src/health-check.ts.txt +128 -0
- package/installer/modules/core/src/observability.ts.txt +20 -0
- package/installer/modules/core/src/safety.ts.txt +26 -0
- package/installer/modules/core/src/scan-capabilities.ts.txt +196 -0
- package/installer/modules/core/src/self-improve.ts.txt +48 -0
- package/installer/modules/core/src/self-update.ts.txt +345 -0
- package/installer/modules/core/src/sync-context.ts.txt +133 -0
- package/installer/modules/core/src/tasks.ts.txt +159 -0
- package/installer/modules/custom/metaclaw-module.json +15 -0
- package/installer/modules/custom/src/agent-custom.ts.txt +100 -0
- package/installer/modules/dashboard/metaclaw-module.json +23 -0
- package/installer/modules/dashboard/scripts/build-dashboard.cjs.txt +51 -0
- package/installer/modules/dashboard/src/update-dashboard.ts.txt +126 -0
- package/installer/modules/outreach/metaclaw-module.json +29 -0
- package/installer/modules/outreach/src/agent-outreach.ts.txt +193 -0
- package/installer/modules/outreach/src/inbox-agent.ts.txt +283 -0
- package/installer/modules/outreach/src/morning-report.ts.txt +124 -0
- package/installer/modules/research/metaclaw-module.json +15 -0
- package/installer/modules/research/src/agent-research.ts.txt +127 -0
- package/installer/modules/scheduler/metaclaw-module.json +27 -0
- package/installer/modules/scheduler/scripts/agent-cycle.bat.txt +85 -0
- package/installer/modules/scheduler/scripts/detect-session.bat.txt +41 -0
- package/installer/modules/scheduler/scripts/launch.bat.txt +120 -0
- package/installer/modules/scheduler/src/cron-manager.ts.txt +273 -0
- package/installer/modules/social/metaclaw-module.json +15 -0
- package/installer/modules/social/src/agent-social.ts.txt +110 -0
- package/installer/modules/support/metaclaw-module.json +15 -0
- package/installer/modules/support/src/agent-support.ts.txt +60 -0
- package/installer/modules/swarm/metaclaw-module.json +25 -0
- package/installer/modules/swarm/swarm/dht-client.ts.txt +376 -0
- package/installer/modules/swarm/swarm/relay-server.ts.txt +348 -0
- package/installer/modules/swarm/swarm/swarm-client.ts.txt +303 -0
- package/installer/modules/swarm/swarm/types.ts.txt +51 -0
- package/installer/modules/voice/metaclaw-module.json +16 -0
- package/installer/questionnaire.ts +277 -0
- package/installer/research.ts +258 -0
- package/installer/scaffold-from-config.ts +270 -0
- package/installer/task-generator.ts +324 -0
- package/installer/templates/agent-custom.ts.txt +100 -0
- package/installer/templates/agent-cycle.bat.txt +19 -0
- package/installer/templates/agent-outreach.ts.txt +193 -0
- package/installer/templates/agent-research.ts.txt +127 -0
- package/installer/templates/agent-social.ts.txt +110 -0
- package/installer/templates/agent-support.ts.txt +60 -0
- package/installer/templates/build-dashboard.cjs.txt +51 -0
- package/installer/templates/cron-manager.ts.txt +273 -0
- package/installer/templates/dashboard.html.txt +450 -0
- package/installer/templates/db.ts.txt +277 -0
- package/installer/templates/detect-session.bat.txt +41 -0
- package/installer/templates/health-check.ts.txt +128 -0
- package/installer/templates/inbox-agent.ts.txt +283 -0
- package/installer/templates/launch.bat.txt +120 -0
- package/installer/templates/morning-report.ts.txt +124 -0
- package/installer/templates/observability.ts.txt +20 -0
- package/installer/templates/safety.ts.txt +26 -0
- package/installer/templates/self-improve.ts.txt +48 -0
- package/installer/templates/self-update.ts.txt +345 -0
- package/installer/templates/state.json.txt +33 -0
- package/installer/templates/system-context.json.txt +33 -0
- package/installer/templates/update-dashboard.ts.txt +126 -0
- package/package.json +31 -0
- package/setup.bat +178 -0
package/docs/index.html
ADDED
|
@@ -0,0 +1,1155 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8"/>
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
6
|
+
<title>YonderClaw — Autonomous AI Agents</title>
|
|
7
|
+
<meta name="description" content="Deploy self-improving AI agents in minutes. Open source autonomous agent platform by Yonder Zenith LLC."/>
|
|
8
|
+
<meta property="og:title" content="YonderClaw — Autonomous AI Agents"/>
|
|
9
|
+
<meta property="og:description" content="Deploy self-improving AI agents in minutes, not months."/>
|
|
10
|
+
<meta property="og:type" content="website"/>
|
|
11
|
+
<link rel="icon" type="image/png" href="assets/yz-favicon.png"/>
|
|
12
|
+
<style>
|
|
13
|
+
/* ═══════════════════════════════════════════════════
|
|
14
|
+
YonderClaw Landing Page — Dark Cyber Theme
|
|
15
|
+
Colors: #00BEEA (cyan), #00D9FF, #FFD700 (gold), #10B981 (green)
|
|
16
|
+
═══════════════════════════════════════════════════ */
|
|
17
|
+
|
|
18
|
+
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
|
19
|
+
|
|
20
|
+
:root {
|
|
21
|
+
--cyan: #00BEEA;
|
|
22
|
+
--cyan-bright: #00D9FF;
|
|
23
|
+
--gold: #FFD700;
|
|
24
|
+
--green: #10B981;
|
|
25
|
+
--red: #FF6B6B;
|
|
26
|
+
--bg-deep: #060a13;
|
|
27
|
+
--bg: #0a0e17;
|
|
28
|
+
--bg-card: #0d1220;
|
|
29
|
+
--bg-card-hover: #111827;
|
|
30
|
+
--text: #e2e8f0;
|
|
31
|
+
--text-muted: #64748b;
|
|
32
|
+
--border: rgba(0, 190, 234, 0.1);
|
|
33
|
+
--glow: rgba(0, 190, 234, 0.15);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
html { scroll-behavior: smooth; }
|
|
37
|
+
|
|
38
|
+
body {
|
|
39
|
+
font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
|
40
|
+
background: var(--bg-deep);
|
|
41
|
+
color: var(--text);
|
|
42
|
+
line-height: 1.6;
|
|
43
|
+
overflow-x: hidden;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* ── Canvas Background ── */
|
|
47
|
+
#particleCanvas {
|
|
48
|
+
position: fixed;
|
|
49
|
+
top: 0; left: 0;
|
|
50
|
+
width: 100%; height: 100%;
|
|
51
|
+
z-index: 0;
|
|
52
|
+
pointer-events: none;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* ── Sections ── */
|
|
56
|
+
section { position: relative; z-index: 1; }
|
|
57
|
+
|
|
58
|
+
.container {
|
|
59
|
+
max-width: 1100px;
|
|
60
|
+
margin: 0 auto;
|
|
61
|
+
padding: 0 24px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* ── NAV ── */
|
|
65
|
+
nav {
|
|
66
|
+
position: fixed; top: 0; left: 0; right: 0;
|
|
67
|
+
z-index: 100;
|
|
68
|
+
padding: 16px 0;
|
|
69
|
+
background: rgba(6, 10, 19, 0.85);
|
|
70
|
+
backdrop-filter: blur(20px);
|
|
71
|
+
border-bottom: 1px solid var(--border);
|
|
72
|
+
transition: all 0.3s;
|
|
73
|
+
}
|
|
74
|
+
nav.scrolled { padding: 10px 0; background: rgba(6, 10, 19, 0.95); }
|
|
75
|
+
nav .container {
|
|
76
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
77
|
+
}
|
|
78
|
+
.nav-brand {
|
|
79
|
+
font-size: 20px; font-weight: 700;
|
|
80
|
+
background: linear-gradient(90deg, var(--cyan), var(--cyan-bright));
|
|
81
|
+
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
|
82
|
+
background-clip: text;
|
|
83
|
+
}
|
|
84
|
+
.nav-brand span { -webkit-text-fill-color: var(--gold); color: var(--gold); font-size: 12px; margin-left: 6px; opacity: 0.7; }
|
|
85
|
+
.nav-logo { height: 28px; width: 28px; margin-right: 10px; vertical-align: middle; }
|
|
86
|
+
.nav-links { display: flex; gap: 32px; list-style: none; }
|
|
87
|
+
.nav-links a {
|
|
88
|
+
color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 500;
|
|
89
|
+
transition: color 0.2s;
|
|
90
|
+
}
|
|
91
|
+
.nav-links a:hover { color: var(--cyan); }
|
|
92
|
+
.nav-cta {
|
|
93
|
+
padding: 8px 20px; border-radius: 8px; font-size: 14px; font-weight: 600;
|
|
94
|
+
background: linear-gradient(135deg, var(--cyan), var(--cyan-bright));
|
|
95
|
+
color: #000; text-decoration: none;
|
|
96
|
+
transition: transform 0.2s, box-shadow 0.2s;
|
|
97
|
+
}
|
|
98
|
+
.nav-cta:hover {
|
|
99
|
+
transform: translateY(-1px);
|
|
100
|
+
box-shadow: 0 4px 20px rgba(0, 190, 234, 0.4);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/* ── HERO ── */
|
|
104
|
+
.hero {
|
|
105
|
+
min-height: 100vh;
|
|
106
|
+
display: flex; align-items: center; justify-content: center;
|
|
107
|
+
text-align: center;
|
|
108
|
+
padding-top: 80px;
|
|
109
|
+
}
|
|
110
|
+
.hero-content { max-width: 750px; }
|
|
111
|
+
.hero-logo-wrap {
|
|
112
|
+
margin-bottom: 28px;
|
|
113
|
+
animation: fadeInUp 0.5s ease-out;
|
|
114
|
+
}
|
|
115
|
+
.hero-logo {
|
|
116
|
+
height: 280px;
|
|
117
|
+
filter: drop-shadow(0 0 40px rgba(0, 190, 234, 0.35));
|
|
118
|
+
}
|
|
119
|
+
.hero-highlight {
|
|
120
|
+
display: inline-flex; align-items: center; gap: 10px;
|
|
121
|
+
padding: 12px 24px; border-radius: 12px;
|
|
122
|
+
background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(0, 190, 234, 0.08));
|
|
123
|
+
border: 1px solid rgba(255, 215, 0, 0.25);
|
|
124
|
+
font-size: 15px; color: var(--text);
|
|
125
|
+
margin-bottom: 32px;
|
|
126
|
+
animation: fadeInUp 0.6s ease-out 0.25s both;
|
|
127
|
+
max-width: 560px;
|
|
128
|
+
}
|
|
129
|
+
.hero-highlight strong { color: var(--gold); }
|
|
130
|
+
.highlight-icon { font-size: 20px; flex-shrink: 0; }
|
|
131
|
+
.hero-badge {
|
|
132
|
+
display: inline-flex; align-items: center; gap: 8px;
|
|
133
|
+
padding: 6px 16px; border-radius: 50px;
|
|
134
|
+
background: rgba(0, 190, 234, 0.08);
|
|
135
|
+
border: 1px solid rgba(0, 190, 234, 0.2);
|
|
136
|
+
font-size: 13px; color: var(--cyan);
|
|
137
|
+
margin-bottom: 32px;
|
|
138
|
+
animation: fadeInUp 0.6s ease-out;
|
|
139
|
+
}
|
|
140
|
+
.hero-badge .dot {
|
|
141
|
+
width: 6px; height: 6px; border-radius: 50%;
|
|
142
|
+
background: var(--green);
|
|
143
|
+
animation: pulse 2s infinite;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.hero h1 {
|
|
147
|
+
font-size: clamp(48px, 7vw, 80px);
|
|
148
|
+
font-weight: 800;
|
|
149
|
+
line-height: 1.05;
|
|
150
|
+
letter-spacing: -2px;
|
|
151
|
+
margin-bottom: 24px;
|
|
152
|
+
animation: fadeInUp 0.6s ease-out 0.1s both;
|
|
153
|
+
}
|
|
154
|
+
.hero h1 .gradient {
|
|
155
|
+
background: linear-gradient(135deg, var(--cyan), var(--cyan-bright), var(--gold));
|
|
156
|
+
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
|
157
|
+
background-clip: text;
|
|
158
|
+
}
|
|
159
|
+
.hero p {
|
|
160
|
+
font-size: 20px; color: var(--text-muted);
|
|
161
|
+
max-width: 560px; margin: 0 auto 40px;
|
|
162
|
+
animation: fadeInUp 0.6s ease-out 0.2s both;
|
|
163
|
+
}
|
|
164
|
+
.hero-actions {
|
|
165
|
+
display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
|
|
166
|
+
animation: fadeInUp 0.6s ease-out 0.3s both;
|
|
167
|
+
}
|
|
168
|
+
.btn {
|
|
169
|
+
padding: 14px 32px; border-radius: 10px; font-size: 16px; font-weight: 600;
|
|
170
|
+
text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
|
|
171
|
+
transition: all 0.2s;
|
|
172
|
+
}
|
|
173
|
+
.btn-primary {
|
|
174
|
+
background: linear-gradient(135deg, var(--cyan), var(--cyan-bright));
|
|
175
|
+
color: #000;
|
|
176
|
+
box-shadow: 0 4px 24px rgba(0, 190, 234, 0.3);
|
|
177
|
+
}
|
|
178
|
+
.btn-primary:hover {
|
|
179
|
+
transform: translateY(-2px);
|
|
180
|
+
box-shadow: 0 8px 32px rgba(0, 190, 234, 0.5);
|
|
181
|
+
}
|
|
182
|
+
.btn-secondary {
|
|
183
|
+
background: rgba(0, 190, 234, 0.08);
|
|
184
|
+
border: 1px solid rgba(0, 190, 234, 0.25);
|
|
185
|
+
color: var(--cyan);
|
|
186
|
+
}
|
|
187
|
+
.btn-secondary:hover {
|
|
188
|
+
background: rgba(0, 190, 234, 0.15);
|
|
189
|
+
border-color: rgba(0, 190, 234, 0.4);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
/* ── Terminal Block ── */
|
|
193
|
+
.terminal {
|
|
194
|
+
max-width: 500px; margin: 48px auto 0;
|
|
195
|
+
background: var(--bg-card); border: 1px solid var(--border);
|
|
196
|
+
border-radius: 12px; overflow: hidden;
|
|
197
|
+
animation: fadeInUp 0.6s ease-out 0.4s both;
|
|
198
|
+
text-align: left;
|
|
199
|
+
}
|
|
200
|
+
.terminal-bar {
|
|
201
|
+
display: flex; align-items: center; gap: 6px;
|
|
202
|
+
padding: 12px 16px;
|
|
203
|
+
background: rgba(0, 190, 234, 0.04);
|
|
204
|
+
border-bottom: 1px solid var(--border);
|
|
205
|
+
}
|
|
206
|
+
.terminal-dot { width: 10px; height: 10px; border-radius: 50%; }
|
|
207
|
+
.terminal-dot:nth-child(1) { background: var(--red); opacity: 0.7; }
|
|
208
|
+
.terminal-dot:nth-child(2) { background: var(--gold); opacity: 0.7; }
|
|
209
|
+
.terminal-dot:nth-child(3) { background: var(--green); opacity: 0.7; }
|
|
210
|
+
.terminal-title { margin-left: 8px; font-size: 12px; color: var(--text-muted); }
|
|
211
|
+
.terminal-body {
|
|
212
|
+
padding: 20px; font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
|
|
213
|
+
font-size: 14px; line-height: 1.8;
|
|
214
|
+
}
|
|
215
|
+
.terminal-body .prompt { color: var(--cyan); }
|
|
216
|
+
.terminal-body .cmd { color: var(--text); }
|
|
217
|
+
.terminal-body .comment { color: var(--text-muted); }
|
|
218
|
+
.terminal-body .output { color: var(--green); }
|
|
219
|
+
|
|
220
|
+
/* ── Section Base ── */
|
|
221
|
+
.section { padding: 120px 0; }
|
|
222
|
+
.section-label {
|
|
223
|
+
font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
|
|
224
|
+
color: var(--cyan); margin-bottom: 16px;
|
|
225
|
+
}
|
|
226
|
+
.section h2 {
|
|
227
|
+
font-size: clamp(32px, 4vw, 48px); font-weight: 700;
|
|
228
|
+
letter-spacing: -1px; margin-bottom: 20px;
|
|
229
|
+
}
|
|
230
|
+
.section .subtitle {
|
|
231
|
+
font-size: 18px; color: var(--text-muted); max-width: 600px;
|
|
232
|
+
margin-bottom: 56px;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
/* ── Stats Bar ── */
|
|
236
|
+
.stats-bar {
|
|
237
|
+
padding: 48px 0;
|
|
238
|
+
background: linear-gradient(180deg, rgba(0, 190, 234, 0.03), transparent);
|
|
239
|
+
border-bottom: 1px solid var(--border);
|
|
240
|
+
position: relative; z-index: 1;
|
|
241
|
+
}
|
|
242
|
+
.stats-grid {
|
|
243
|
+
display: flex; justify-content: center; gap: 48px; flex-wrap: wrap;
|
|
244
|
+
}
|
|
245
|
+
.stat { text-align: center; }
|
|
246
|
+
.stat-value {
|
|
247
|
+
font-size: 40px; font-weight: 800; letter-spacing: -1px;
|
|
248
|
+
background: linear-gradient(135deg, var(--cyan), var(--gold));
|
|
249
|
+
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
|
250
|
+
background-clip: text;
|
|
251
|
+
}
|
|
252
|
+
.stat-label {
|
|
253
|
+
font-size: 13px; color: var(--text-muted); margin-top: 4px;
|
|
254
|
+
text-transform: uppercase; letter-spacing: 1px;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
/* ── Why YonderClaw ── */
|
|
258
|
+
.why-grid {
|
|
259
|
+
display: grid; grid-template-columns: repeat(2, 1fr);
|
|
260
|
+
gap: 24px;
|
|
261
|
+
}
|
|
262
|
+
.why-card {
|
|
263
|
+
background: var(--bg-card); border: 1px solid var(--border);
|
|
264
|
+
border-radius: 16px; padding: 36px 28px;
|
|
265
|
+
transition: all 0.3s;
|
|
266
|
+
}
|
|
267
|
+
.why-card:hover {
|
|
268
|
+
border-color: rgba(0, 190, 234, 0.2);
|
|
269
|
+
background: var(--bg-card-hover);
|
|
270
|
+
}
|
|
271
|
+
.why-card code {
|
|
272
|
+
background: rgba(0, 190, 234, 0.1); color: var(--cyan);
|
|
273
|
+
padding: 2px 8px; border-radius: 4px; font-size: 13px;
|
|
274
|
+
}
|
|
275
|
+
.why-primary {
|
|
276
|
+
border-color: rgba(255, 215, 0, 0.25);
|
|
277
|
+
background: linear-gradient(135deg, rgba(255, 215, 0, 0.04), var(--bg-card));
|
|
278
|
+
}
|
|
279
|
+
.why-primary:hover { border-color: rgba(255, 215, 0, 0.4); }
|
|
280
|
+
.why-primary h3 { color: var(--gold); }
|
|
281
|
+
.why-icon { font-size: 32px; margin-bottom: 16px; }
|
|
282
|
+
.why-card h3 { font-size: 20px; margin-bottom: 10px; }
|
|
283
|
+
.why-card p { font-size: 15px; color: var(--text-muted); line-height: 1.7; }
|
|
284
|
+
.why-card strong { color: var(--text); }
|
|
285
|
+
.channel-pills {
|
|
286
|
+
display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px;
|
|
287
|
+
}
|
|
288
|
+
.channel-pills span {
|
|
289
|
+
padding: 4px 10px; border-radius: 50px; font-size: 11px;
|
|
290
|
+
background: rgba(0, 190, 234, 0.08); border: 1px solid rgba(0, 190, 234, 0.15);
|
|
291
|
+
color: var(--text-muted);
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
/* ── Agent Type Cards ── */
|
|
295
|
+
.agent-grid {
|
|
296
|
+
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
297
|
+
gap: 20px;
|
|
298
|
+
}
|
|
299
|
+
.agent-card {
|
|
300
|
+
background: var(--bg-card);
|
|
301
|
+
border: 1px solid var(--border);
|
|
302
|
+
border-radius: 16px;
|
|
303
|
+
padding: 32px 24px;
|
|
304
|
+
text-align: center;
|
|
305
|
+
transition: all 0.3s;
|
|
306
|
+
position: relative; overflow: hidden;
|
|
307
|
+
}
|
|
308
|
+
.agent-card::before {
|
|
309
|
+
content: '';
|
|
310
|
+
position: absolute; top: 0; left: 0; right: 0; height: 2px;
|
|
311
|
+
background: linear-gradient(90deg, transparent, var(--cyan), transparent);
|
|
312
|
+
opacity: 0; transition: opacity 0.3s;
|
|
313
|
+
}
|
|
314
|
+
.agent-card:hover {
|
|
315
|
+
border-color: rgba(0, 190, 234, 0.3);
|
|
316
|
+
transform: translateY(-4px);
|
|
317
|
+
box-shadow: 0 12px 40px rgba(0, 190, 234, 0.08);
|
|
318
|
+
}
|
|
319
|
+
.agent-card:hover::before { opacity: 1; }
|
|
320
|
+
.agent-icon {
|
|
321
|
+
width: 56px; height: 56px; border-radius: 14px;
|
|
322
|
+
display: flex; align-items: center; justify-content: center;
|
|
323
|
+
font-size: 24px; margin: 0 auto 16px;
|
|
324
|
+
background: rgba(0, 190, 234, 0.08);
|
|
325
|
+
border: 1px solid rgba(0, 190, 234, 0.15);
|
|
326
|
+
}
|
|
327
|
+
.agent-card h3 { font-size: 18px; margin-bottom: 8px; }
|
|
328
|
+
.agent-card p { font-size: 14px; color: var(--text-muted); line-height: 1.5; }
|
|
329
|
+
|
|
330
|
+
/* ── Feature Grid ── */
|
|
331
|
+
.feature-grid {
|
|
332
|
+
display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
333
|
+
gap: 24px;
|
|
334
|
+
}
|
|
335
|
+
.feature-card {
|
|
336
|
+
background: var(--bg-card);
|
|
337
|
+
border: 1px solid var(--border);
|
|
338
|
+
border-radius: 16px;
|
|
339
|
+
padding: 32px;
|
|
340
|
+
transition: all 0.3s;
|
|
341
|
+
}
|
|
342
|
+
.feature-card:hover {
|
|
343
|
+
border-color: rgba(0, 190, 234, 0.2);
|
|
344
|
+
background: var(--bg-card-hover);
|
|
345
|
+
}
|
|
346
|
+
.feature-icon {
|
|
347
|
+
width: 40px; height: 40px; border-radius: 10px;
|
|
348
|
+
display: flex; align-items: center; justify-content: center;
|
|
349
|
+
font-size: 18px; margin-bottom: 16px;
|
|
350
|
+
background: rgba(0, 190, 234, 0.08);
|
|
351
|
+
}
|
|
352
|
+
.feature-card h3 { font-size: 17px; margin-bottom: 8px; }
|
|
353
|
+
.feature-card p { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
|
|
354
|
+
|
|
355
|
+
/* Steps — enhanced */
|
|
356
|
+
.step {
|
|
357
|
+
background: var(--bg-card); border: 1px solid var(--border);
|
|
358
|
+
border-radius: 16px; position: relative;
|
|
359
|
+
transition: all 0.3s;
|
|
360
|
+
}
|
|
361
|
+
.step:hover {
|
|
362
|
+
border-color: rgba(0, 190, 234, 0.3);
|
|
363
|
+
transform: translateY(-3px);
|
|
364
|
+
box-shadow: 0 8px 24px rgba(0, 190, 234, 0.08);
|
|
365
|
+
}
|
|
366
|
+
.step::before {
|
|
367
|
+
background: linear-gradient(135deg, rgba(0, 190, 234, 0.15), rgba(0, 190, 234, 0.05));
|
|
368
|
+
border: 2px solid var(--cyan);
|
|
369
|
+
box-shadow: 0 0 16px rgba(0, 190, 234, 0.2);
|
|
370
|
+
}
|
|
371
|
+
.step h3 { color: var(--cyan); }
|
|
372
|
+
.step::after {
|
|
373
|
+
content: '→'; position: absolute; right: -14px; top: 50%;
|
|
374
|
+
transform: translateY(-50%); color: var(--cyan); opacity: 0.3;
|
|
375
|
+
font-size: 20px; font-weight: 700;
|
|
376
|
+
}
|
|
377
|
+
.step:last-child::after { display: none; }
|
|
378
|
+
|
|
379
|
+
/* ── Architecture ── */
|
|
380
|
+
.arch-visual {
|
|
381
|
+
background: var(--bg-card);
|
|
382
|
+
border: 1px solid var(--border);
|
|
383
|
+
border-radius: 16px;
|
|
384
|
+
padding: 48px 32px;
|
|
385
|
+
font-family: 'Cascadia Code', 'Fira Code', monospace;
|
|
386
|
+
font-size: 13px;
|
|
387
|
+
line-height: 1.7;
|
|
388
|
+
overflow-x: auto;
|
|
389
|
+
color: var(--text-muted);
|
|
390
|
+
}
|
|
391
|
+
.arch-visual .hl { color: var(--cyan); font-weight: 600; }
|
|
392
|
+
.arch-visual .gl { color: var(--gold); }
|
|
393
|
+
.arch-visual .gr { color: var(--green); }
|
|
394
|
+
|
|
395
|
+
/* ── How it Works (Steps) ── */
|
|
396
|
+
.steps {
|
|
397
|
+
display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
|
398
|
+
gap: 16px; counter-reset: step;
|
|
399
|
+
}
|
|
400
|
+
.step {
|
|
401
|
+
text-align: center; padding: 32px 16px;
|
|
402
|
+
position: relative; counter-increment: step;
|
|
403
|
+
}
|
|
404
|
+
.step::before {
|
|
405
|
+
content: counter(step);
|
|
406
|
+
display: block; width: 48px; height: 48px; line-height: 48px;
|
|
407
|
+
border-radius: 50%; margin: 0 auto 16px;
|
|
408
|
+
background: rgba(0, 190, 234, 0.1);
|
|
409
|
+
border: 2px solid rgba(0, 190, 234, 0.3);
|
|
410
|
+
color: var(--cyan); font-weight: 700; font-size: 18px;
|
|
411
|
+
}
|
|
412
|
+
.step h3 { font-size: 15px; margin-bottom: 6px; }
|
|
413
|
+
.step p { font-size: 13px; color: var(--text-muted); }
|
|
414
|
+
|
|
415
|
+
/* ── QIS Section ── */
|
|
416
|
+
.qis-section {
|
|
417
|
+
background: linear-gradient(135deg, rgba(0, 190, 234, 0.03), rgba(255, 215, 0, 0.02));
|
|
418
|
+
border-top: 1px solid var(--border);
|
|
419
|
+
border-bottom: 1px solid var(--border);
|
|
420
|
+
}
|
|
421
|
+
.qis-grid {
|
|
422
|
+
display: grid; grid-template-columns: 1fr 1fr;
|
|
423
|
+
gap: 48px; align-items: center;
|
|
424
|
+
}
|
|
425
|
+
.qis-visual {
|
|
426
|
+
background: var(--bg-card); border: 1px solid var(--border);
|
|
427
|
+
border-radius: 16px; padding: 40px;
|
|
428
|
+
text-align: center;
|
|
429
|
+
}
|
|
430
|
+
.qis-logo-img {
|
|
431
|
+
height: 180px; margin-bottom: 28px;
|
|
432
|
+
filter: drop-shadow(0 0 30px rgba(0, 190, 234, 0.4));
|
|
433
|
+
}
|
|
434
|
+
.qis-visual svg { max-width: 100%; }
|
|
435
|
+
.qis-features { list-style: none; }
|
|
436
|
+
.qis-features li {
|
|
437
|
+
padding: 12px 0; font-size: 15px;
|
|
438
|
+
display: flex; align-items: flex-start; gap: 12px;
|
|
439
|
+
border-bottom: 1px solid var(--border);
|
|
440
|
+
}
|
|
441
|
+
.qis-features li:last-child { border-bottom: none; }
|
|
442
|
+
.qis-check { color: var(--green); font-weight: 700; flex-shrink: 0; }
|
|
443
|
+
|
|
444
|
+
/* ── Roadmap ── */
|
|
445
|
+
.roadmap-grid {
|
|
446
|
+
display: grid; grid-template-columns: repeat(3, 1fr);
|
|
447
|
+
gap: 24px; max-width: 1100px; margin: 0 auto;
|
|
448
|
+
}
|
|
449
|
+
.roadmap-card {
|
|
450
|
+
background: var(--bg-card); border: 1px solid var(--border);
|
|
451
|
+
border-radius: 16px; padding: 32px; position: relative;
|
|
452
|
+
transition: all 0.3s;
|
|
453
|
+
}
|
|
454
|
+
.roadmap-card:hover {
|
|
455
|
+
border-color: rgba(0, 190, 234, 0.25);
|
|
456
|
+
transform: translateY(-3px);
|
|
457
|
+
box-shadow: 0 8px 32px rgba(0, 190, 234, 0.06);
|
|
458
|
+
}
|
|
459
|
+
.roadmap-hot {
|
|
460
|
+
border-color: rgba(255, 215, 0, 0.2);
|
|
461
|
+
background: linear-gradient(135deg, rgba(255, 215, 0, 0.03), var(--bg-card));
|
|
462
|
+
}
|
|
463
|
+
.roadmap-hot:hover { border-color: rgba(255, 215, 0, 0.4); }
|
|
464
|
+
.roadmap-tag {
|
|
465
|
+
position: absolute; top: 16px; right: 16px;
|
|
466
|
+
padding: 3px 10px; border-radius: 50px;
|
|
467
|
+
font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
|
|
468
|
+
background: rgba(0, 190, 234, 0.1); color: var(--cyan);
|
|
469
|
+
}
|
|
470
|
+
.roadmap-hot .roadmap-tag {
|
|
471
|
+
background: rgba(255, 215, 0, 0.12); color: var(--gold);
|
|
472
|
+
}
|
|
473
|
+
.roadmap-icon { font-size: 32px; margin-bottom: 14px; }
|
|
474
|
+
.roadmap-card h3 { font-size: 19px; margin-bottom: 10px; }
|
|
475
|
+
.roadmap-card p { font-size: 14px; color: var(--text-muted); line-height: 1.7; }
|
|
476
|
+
.roadmap-card strong { color: var(--text); }
|
|
477
|
+
.roadmap-status {
|
|
478
|
+
margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
|
|
479
|
+
font-size: 12px; color: var(--text-muted);
|
|
480
|
+
display: flex; align-items: center; gap: 8px;
|
|
481
|
+
}
|
|
482
|
+
.status-dot {
|
|
483
|
+
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
|
|
484
|
+
}
|
|
485
|
+
.status-dot.hot {
|
|
486
|
+
background: var(--gold);
|
|
487
|
+
box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
|
|
488
|
+
animation: pulse 2s infinite;
|
|
489
|
+
}
|
|
490
|
+
.status-dot.soon {
|
|
491
|
+
background: var(--green);
|
|
492
|
+
box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
|
|
493
|
+
}
|
|
494
|
+
.status-dot.planned {
|
|
495
|
+
background: var(--cyan); opacity: 0.5;
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
.roadmap-body-specs {
|
|
499
|
+
display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
|
|
500
|
+
}
|
|
501
|
+
.roadmap-body-specs span {
|
|
502
|
+
padding: 4px 10px; border-radius: 50px; font-size: 11px;
|
|
503
|
+
background: rgba(255, 215, 0, 0.08); border: 1px solid rgba(255, 215, 0, 0.15);
|
|
504
|
+
color: var(--text-muted);
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
/* ── Footer ── */
|
|
508
|
+
footer {
|
|
509
|
+
padding: 60px 0 40px;
|
|
510
|
+
border-top: 1px solid var(--border);
|
|
511
|
+
text-align: center;
|
|
512
|
+
}
|
|
513
|
+
footer .brand {
|
|
514
|
+
font-size: 18px; font-weight: 700;
|
|
515
|
+
background: linear-gradient(90deg, var(--cyan), var(--cyan-bright));
|
|
516
|
+
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
|
517
|
+
background-clip: text;
|
|
518
|
+
margin-bottom: 8px;
|
|
519
|
+
}
|
|
520
|
+
footer p { color: var(--text-muted); font-size: 14px; }
|
|
521
|
+
footer .links { margin-top: 20px; display: flex; gap: 24px; justify-content: center; }
|
|
522
|
+
footer .links a { color: var(--text-muted); text-decoration: none; font-size: 14px; }
|
|
523
|
+
footer .links a:hover { color: var(--cyan); }
|
|
524
|
+
.mit-badge {
|
|
525
|
+
display: inline-block; margin-top: 16px;
|
|
526
|
+
padding: 4px 14px; border-radius: 50px;
|
|
527
|
+
background: rgba(16, 185, 129, 0.1);
|
|
528
|
+
border: 1px solid rgba(16, 185, 129, 0.2);
|
|
529
|
+
color: var(--green); font-size: 13px;
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
/* ── Animations ── */
|
|
533
|
+
@keyframes fadeInUp {
|
|
534
|
+
from { opacity: 0; transform: translateY(24px); }
|
|
535
|
+
to { opacity: 1; transform: translateY(0); }
|
|
536
|
+
}
|
|
537
|
+
@keyframes pulse {
|
|
538
|
+
0%, 100% { opacity: 1; }
|
|
539
|
+
50% { opacity: 0.4; }
|
|
540
|
+
}
|
|
541
|
+
.reveal {
|
|
542
|
+
opacity: 0; transform: translateY(30px);
|
|
543
|
+
transition: opacity 0.7s, transform 0.7s;
|
|
544
|
+
}
|
|
545
|
+
.reveal.visible { opacity: 1; transform: translateY(0); }
|
|
546
|
+
|
|
547
|
+
/* ── Responsive ── */
|
|
548
|
+
@media (max-width: 768px) {
|
|
549
|
+
.nav-links { display: none; }
|
|
550
|
+
.qis-grid { grid-template-columns: 1fr; }
|
|
551
|
+
.hero h1 { letter-spacing: -1px; }
|
|
552
|
+
.section { padding: 80px 0; }
|
|
553
|
+
.arch-visual { font-size: 11px; padding: 24px 16px; }
|
|
554
|
+
.roadmap-grid { grid-template-columns: 1fr; }
|
|
555
|
+
.why-grid { grid-template-columns: 1fr; }
|
|
556
|
+
.stats-grid { gap: 24px; }
|
|
557
|
+
.stat-value { font-size: 30px; }
|
|
558
|
+
.step::after { display: none; }
|
|
559
|
+
}
|
|
560
|
+
</style>
|
|
561
|
+
</head>
|
|
562
|
+
<body>
|
|
563
|
+
|
|
564
|
+
<canvas id="particleCanvas"></canvas>
|
|
565
|
+
|
|
566
|
+
<!-- ═══ NAV ═══ -->
|
|
567
|
+
<nav id="nav">
|
|
568
|
+
<div class="container">
|
|
569
|
+
<div class="nav-brand"><img src="assets/yz-favicon.png" alt="YZ" class="nav-logo"/>YonderClaw<span>v3.3</span></div>
|
|
570
|
+
<ul class="nav-links">
|
|
571
|
+
<li><a href="#agents">Agents</a></li>
|
|
572
|
+
<li><a href="#features">Features</a></li>
|
|
573
|
+
<li><a href="#architecture">Architecture</a></li>
|
|
574
|
+
<li><a href="#how-it-works">How It Works</a></li>
|
|
575
|
+
<li><a href="#qis">QIS Network</a></li>
|
|
576
|
+
<li><a href="#roadmap">Roadmap</a></li>
|
|
577
|
+
</ul>
|
|
578
|
+
<a href="https://github.com/YonderZenith/YonderClaw" class="nav-cta">GitHub</a>
|
|
579
|
+
</div>
|
|
580
|
+
</nav>
|
|
581
|
+
|
|
582
|
+
<!-- ═══ HERO ═══ -->
|
|
583
|
+
<section class="hero">
|
|
584
|
+
<div class="hero-content">
|
|
585
|
+
<div class="hero-logo-wrap">
|
|
586
|
+
<img src="assets/yz-logo.png" alt="Yonder Zenith" class="hero-logo"/>
|
|
587
|
+
</div>
|
|
588
|
+
<div class="hero-badge">
|
|
589
|
+
<span class="dot"></span>
|
|
590
|
+
Open Source · MIT Licensed · <code style="background:rgba(0,190,234,0.15); padding:2px 6px; border-radius:4px; font-size:12px;">npx create-yonderclaw</code>
|
|
591
|
+
</div>
|
|
592
|
+
<h1><span class="gradient">YonderClaw</span></h1>
|
|
593
|
+
<p>Deploy autonomous, self-improving AI agents in minutes. Pick a template, answer a few questions, and your agent builds itself.</p>
|
|
594
|
+
<div class="hero-highlight">
|
|
595
|
+
<span class="highlight-icon">⚡</span>
|
|
596
|
+
<span>Built on <strong>Claude Code CLI</strong> — runs on your <strong>Claude Max/Pro subscription</strong>. No separate API keys. No per-token costs.</span>
|
|
597
|
+
</div>
|
|
598
|
+
<div class="hero-actions">
|
|
599
|
+
<a href="https://github.com/YonderZenith/YonderClaw" class="btn btn-primary">
|
|
600
|
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
|
|
601
|
+
Get Started
|
|
602
|
+
</a>
|
|
603
|
+
<a href="#how-it-works" class="btn btn-secondary">See How It Works</a>
|
|
604
|
+
</div>
|
|
605
|
+
|
|
606
|
+
<div class="terminal">
|
|
607
|
+
<div class="terminal-bar">
|
|
608
|
+
<div class="terminal-dot"></div>
|
|
609
|
+
<div class="terminal-dot"></div>
|
|
610
|
+
<div class="terminal-dot"></div>
|
|
611
|
+
<span class="terminal-title">terminal</span>
|
|
612
|
+
</div>
|
|
613
|
+
<div class="terminal-body">
|
|
614
|
+
<div><span class="comment"># One command. That's it.</span></div>
|
|
615
|
+
<div><span class="prompt">$</span> <span class="cmd">npx create-yonderclaw</span></div>
|
|
616
|
+
<div style="margin-top:6px"><span class="comment"># Or clone the repo:</span></div>
|
|
617
|
+
<div><span class="prompt">$</span> <span class="cmd">git clone https://github.com/YonderZenith/YonderClaw.git</span></div>
|
|
618
|
+
<div><span class="prompt">$</span> <span class="cmd">cd YonderClaw && npm install && npm start</span></div>
|
|
619
|
+
<div class="output" style="margin-top:8px">
|
|
620
|
+
█ YonderClaw v3.3.0<br/>
|
|
621
|
+
Autonomous AI Agents — Plug & Play<br/>
|
|
622
|
+
<span style="color:var(--green)">✓</span> System detected: Windows 11<br/>
|
|
623
|
+
<span style="color:var(--green)">✓</span> Claude Code CLI found<br/>
|
|
624
|
+
<span style="color:var(--cyan)">▸</span> Select your agent type...
|
|
625
|
+
</div>
|
|
626
|
+
</div>
|
|
627
|
+
</div>
|
|
628
|
+
</div>
|
|
629
|
+
</section>
|
|
630
|
+
|
|
631
|
+
<!-- ═══ STATS BAR ═══ -->
|
|
632
|
+
<section class="stats-bar">
|
|
633
|
+
<div class="container">
|
|
634
|
+
<div class="stats-grid">
|
|
635
|
+
<div class="stat">
|
|
636
|
+
<div class="stat-value">5</div>
|
|
637
|
+
<div class="stat-label">Agent Types</div>
|
|
638
|
+
</div>
|
|
639
|
+
<div class="stat">
|
|
640
|
+
<div class="stat-value">13</div>
|
|
641
|
+
<div class="stat-label">Step Autonomous Loop</div>
|
|
642
|
+
</div>
|
|
643
|
+
<div class="stat">
|
|
644
|
+
<div class="stat-value">11</div>
|
|
645
|
+
<div class="stat-label">Module System</div>
|
|
646
|
+
</div>
|
|
647
|
+
<div class="stat">
|
|
648
|
+
<div class="stat-value">$0</div>
|
|
649
|
+
<div class="stat-label">API Costs</div>
|
|
650
|
+
</div>
|
|
651
|
+
<div class="stat">
|
|
652
|
+
<div class="stat-value">v5</div>
|
|
653
|
+
<div class="stat-label">CognitionCore Brain</div>
|
|
654
|
+
</div>
|
|
655
|
+
</div>
|
|
656
|
+
</div>
|
|
657
|
+
</section>
|
|
658
|
+
|
|
659
|
+
<!-- ═══ WHY METACLAW ═══ -->
|
|
660
|
+
<section class="section" id="why" style="padding-top:80px; padding-bottom:80px;">
|
|
661
|
+
<div class="container">
|
|
662
|
+
<div class="why-grid reveal">
|
|
663
|
+
<div class="why-card why-primary">
|
|
664
|
+
<div class="why-icon">💰</div>
|
|
665
|
+
<h3>Zero API Costs</h3>
|
|
666
|
+
<p>YonderClaw is built on <strong>Claude Code CLI</strong> and runs entirely on your existing <strong>Claude Max or Pro subscription</strong>. No separate API keys, no per-token billing, no surprise invoices. Your agents run on a flat monthly rate.</p>
|
|
667
|
+
</div>
|
|
668
|
+
<div class="why-card">
|
|
669
|
+
<div class="why-icon">🔌</div>
|
|
670
|
+
<h3>Plug & Play</h3>
|
|
671
|
+
<p>Run <code>npm start</code>, pick your agent type, answer a few questions. YonderClaw researches best practices, scaffolds the project, and launches your agent. No config files to write.</p>
|
|
672
|
+
</div>
|
|
673
|
+
<div class="why-card">
|
|
674
|
+
<div class="why-icon">🤖</div>
|
|
675
|
+
<h3>Truly Autonomous</h3>
|
|
676
|
+
<p>Agents run on a cron schedule, improve their own prompts, track their own metrics, and recover from errors — all without human intervention.</p>
|
|
677
|
+
</div>
|
|
678
|
+
<div class="why-card">
|
|
679
|
+
<div class="why-icon">📲</div>
|
|
680
|
+
<h3>Talk to Your Agent Anywhere</h3>
|
|
681
|
+
<p><strong>Email, WhatsApp, console, phone, voice</strong> — your agent meets you where you are. Use Claude Remote from your phone, send an email, or just open the terminal. Want a new channel? Ask your agent to set it up — it'll walk you through it and do the heavy lifting.</p>
|
|
682
|
+
<div class="channel-pills">
|
|
683
|
+
<span>📧 Email</span>
|
|
684
|
+
<span>💬 WhatsApp</span>
|
|
685
|
+
<span>💻 Console</span>
|
|
686
|
+
<span>📱 Phone</span>
|
|
687
|
+
<span>🎤 Voice</span>
|
|
688
|
+
<span>🔩 Text API</span>
|
|
689
|
+
<span>+ More</span>
|
|
690
|
+
</div>
|
|
691
|
+
</div>
|
|
692
|
+
</div>
|
|
693
|
+
</div>
|
|
694
|
+
</section>
|
|
695
|
+
|
|
696
|
+
<!-- ═══ AGENT TYPES ═══ -->
|
|
697
|
+
<section class="section" id="agents">
|
|
698
|
+
<div class="container">
|
|
699
|
+
<div class="reveal">
|
|
700
|
+
<div class="section-label">Agent Types</div>
|
|
701
|
+
<h2>Five Agents. Infinite Possibilities.</h2>
|
|
702
|
+
<p class="subtitle">Each agent comes pre-configured with domain-specific best practices, safety guardrails, and self-improvement capabilities.</p>
|
|
703
|
+
</div>
|
|
704
|
+
<div class="agent-grid reveal">
|
|
705
|
+
<div class="agent-card">
|
|
706
|
+
<div class="agent-icon">🎯</div>
|
|
707
|
+
<h3>Outreach Claw</h3>
|
|
708
|
+
<p>Email prospecting, follow-up sequences, auto-reply campaigns with safety limits</p>
|
|
709
|
+
</div>
|
|
710
|
+
<div class="agent-card">
|
|
711
|
+
<div class="agent-icon">🔬</div>
|
|
712
|
+
<h3>Research Claw</h3>
|
|
713
|
+
<p>Deep web research, multi-source synthesis, automated report generation</p>
|
|
714
|
+
</div>
|
|
715
|
+
<div class="agent-card">
|
|
716
|
+
<div class="agent-icon">🛡</div>
|
|
717
|
+
<h3>Support Claw</h3>
|
|
718
|
+
<p>Inbox monitoring, intelligent ticket triage, auto-response with escalation</p>
|
|
719
|
+
</div>
|
|
720
|
+
<div class="agent-card">
|
|
721
|
+
<div class="agent-icon">📡</div>
|
|
722
|
+
<h3>Social Claw</h3>
|
|
723
|
+
<p>Content creation, scheduling, engagement tracking across platforms</p>
|
|
724
|
+
</div>
|
|
725
|
+
<div class="agent-card">
|
|
726
|
+
<div class="agent-icon">⚡</div>
|
|
727
|
+
<h3>Custom Claw</h3>
|
|
728
|
+
<p>Describe what you need in plain language — Claude configures everything</p>
|
|
729
|
+
</div>
|
|
730
|
+
</div>
|
|
731
|
+
</div>
|
|
732
|
+
</section>
|
|
733
|
+
|
|
734
|
+
<!-- ═══ FEATURES ═══ -->
|
|
735
|
+
<section class="section" id="features">
|
|
736
|
+
<div class="container">
|
|
737
|
+
<div class="reveal">
|
|
738
|
+
<div class="section-label">Built-In Features</div>
|
|
739
|
+
<h2>Everything an Agent Needs.</h2>
|
|
740
|
+
<p class="subtitle">Every YonderClaw agent ships with a complete autonomous operating system — no assembly required.</p>
|
|
741
|
+
</div>
|
|
742
|
+
<div class="feature-grid reveal">
|
|
743
|
+
<div class="feature-card">
|
|
744
|
+
<div class="feature-icon">🧠</div>
|
|
745
|
+
<h3>13-Step Autonomous Loop</h3>
|
|
746
|
+
<p>Pre-flight checks, context loading, task execution, learning, reporting — fully automatic every cycle.</p>
|
|
747
|
+
</div>
|
|
748
|
+
<div class="feature-card">
|
|
749
|
+
<div class="feature-icon">🚀</div>
|
|
750
|
+
<h3>Self-Improvement Engine</h3>
|
|
751
|
+
<p>Prompt versioning, A/B testing, automatic strategy optimization. Your agent gets better every day.</p>
|
|
752
|
+
</div>
|
|
753
|
+
<div class="feature-card">
|
|
754
|
+
<div class="feature-icon">🛡️</div>
|
|
755
|
+
<h3>Safety Guardrails</h3>
|
|
756
|
+
<p>Circuit breakers, rate limiting, daily/hourly caps, dry-run mode. Constitutional principles in SOUL.md.</p>
|
|
757
|
+
</div>
|
|
758
|
+
<div class="feature-card">
|
|
759
|
+
<div class="feature-icon">📊</div>
|
|
760
|
+
<h3>Command Center Dashboard</h3>
|
|
761
|
+
<p>Real-time HTML dashboard with task tracking, metrics, and voice control. No server required.</p>
|
|
762
|
+
</div>
|
|
763
|
+
<div class="feature-card">
|
|
764
|
+
<div class="feature-icon">🗃</div>
|
|
765
|
+
<h3>SQLite Database</h3>
|
|
766
|
+
<p>WAL-mode database with 11 tables for actions, configs, prompts, metrics — structured from day one.</p>
|
|
767
|
+
</div>
|
|
768
|
+
<div class="feature-card">
|
|
769
|
+
<div class="feature-icon">🕒</div>
|
|
770
|
+
<h3>Cron Scheduling</h3>
|
|
771
|
+
<p>Windows Task Scheduler integration, auto-start on boot, desktop shortcut — runs while you sleep.</p>
|
|
772
|
+
</div>
|
|
773
|
+
</div>
|
|
774
|
+
</div>
|
|
775
|
+
</section>
|
|
776
|
+
|
|
777
|
+
<!-- ═══ HOW IT WORKS ═══ -->
|
|
778
|
+
<section class="section" id="how-it-works">
|
|
779
|
+
<div class="container">
|
|
780
|
+
<div class="reveal">
|
|
781
|
+
<div class="section-label">How It Works</div>
|
|
782
|
+
<h2>From Zero to Agent in Minutes.</h2>
|
|
783
|
+
<p class="subtitle">YonderClaw automates every step of agent creation — you just answer a few questions.</p>
|
|
784
|
+
</div>
|
|
785
|
+
<div class="steps reveal">
|
|
786
|
+
<div class="step">
|
|
787
|
+
<h3>Detect</h3>
|
|
788
|
+
<p>OS, hardware, tools scanned automatically</p>
|
|
789
|
+
</div>
|
|
790
|
+
<div class="step">
|
|
791
|
+
<h3>Configure</h3>
|
|
792
|
+
<p>Pick agent type, answer use-case questions</p>
|
|
793
|
+
</div>
|
|
794
|
+
<div class="step">
|
|
795
|
+
<h3>Research</h3>
|
|
796
|
+
<p>Claude researches best practices for your domain</p>
|
|
797
|
+
</div>
|
|
798
|
+
<div class="step">
|
|
799
|
+
<h3>Scaffold</h3>
|
|
800
|
+
<p>Full project generated with all modules</p>
|
|
801
|
+
</div>
|
|
802
|
+
<div class="step">
|
|
803
|
+
<h3>Deploy</h3>
|
|
804
|
+
<p>Dependencies installed, DB initialized, dashboard built</p>
|
|
805
|
+
</div>
|
|
806
|
+
<div class="step">
|
|
807
|
+
<h3>Launch</h3>
|
|
808
|
+
<p>Agent goes live with auto-start configured</p>
|
|
809
|
+
</div>
|
|
810
|
+
</div>
|
|
811
|
+
</div>
|
|
812
|
+
</section>
|
|
813
|
+
|
|
814
|
+
<!-- ═══ ARCHITECTURE ═══ -->
|
|
815
|
+
<section class="section" id="architecture">
|
|
816
|
+
<div class="container">
|
|
817
|
+
<div class="reveal">
|
|
818
|
+
<div class="section-label">Architecture</div>
|
|
819
|
+
<h2>CognitionCore v5 — File-Based Agent Brain.</h2>
|
|
820
|
+
<p class="subtitle">No persistent memory process. The agent's entire cognition lives in files — rebuilt every cycle, always consistent. Five generations of field-tested architecture.</p>
|
|
821
|
+
</div>
|
|
822
|
+
<div class="arch-visual reveal">
|
|
823
|
+
<pre>
|
|
824
|
+
┌──────────────────────────────────┐
|
|
825
|
+
│ <span class="hl">CLAUDE.md</span> │
|
|
826
|
+
│ Agent Identity + Rules + Context │
|
|
827
|
+
└───────────────┬──────────────────┘
|
|
828
|
+
│ <span class="gl">reads on every cycle</span>
|
|
829
|
+
┌───────────────▼──────────────────┐
|
|
830
|
+
│ <span class="hl">SOUL.md</span> │
|
|
831
|
+
│ Constitutional Principles │
|
|
832
|
+
└───────────────┬──────────────────┘
|
|
833
|
+
│
|
|
834
|
+
┌──────────────────────────┼──────────────────────────┐
|
|
835
|
+
│ │ │
|
|
836
|
+
┌────────▼────────┐ ┌───────────▼──────────┐ ┌─────────▼────────┐
|
|
837
|
+
│ <span class="hl">state.json</span> │ │ <span class="hl">tasks.json</span> │ │ <span class="hl">memory/</span> │
|
|
838
|
+
│ Agent State │ │ Human + AI Tasks │ │ Knowledge Files │
|
|
839
|
+
└────────┬────────┘ └───────────┬──────────┘ └─────────┬────────┘
|
|
840
|
+
│ │ │
|
|
841
|
+
└──────────────────────────┼──────────────────────────┘
|
|
842
|
+
│
|
|
843
|
+
┌───────────────▼──────────────────┐
|
|
844
|
+
│ <span class="hl">agent.ts</span> │
|
|
845
|
+
│ <span class="gr">13-Step Autonomous Main Loop</span> │
|
|
846
|
+
│ │
|
|
847
|
+
│ ├─ <span class="gl">health-check.ts</span> │
|
|
848
|
+
│ ├─ <span class="gl">safety.ts</span> (circuit break) │
|
|
849
|
+
│ ├─ <span class="gl">self-improve.ts</span> (evolution) │
|
|
850
|
+
│ ├─ <span class="gl">db.ts</span> (SQLite + WAL) │
|
|
851
|
+
│ └─ <span class="gl">cron-manager.ts</span> │
|
|
852
|
+
└───────────────┬──────────────────┘
|
|
853
|
+
│
|
|
854
|
+
┌───────────────▼──────────────────┐
|
|
855
|
+
│ <span class="hl">dashboard.html</span> │
|
|
856
|
+
│ <span class="gr">Real-time Command Center</span> │
|
|
857
|
+
└──────────────────────────────────┘
|
|
858
|
+
</pre>
|
|
859
|
+
</div>
|
|
860
|
+
</div>
|
|
861
|
+
</section>
|
|
862
|
+
|
|
863
|
+
<!-- ═══ QIS ═══ -->
|
|
864
|
+
<section class="section qis-section" id="qis">
|
|
865
|
+
<div class="container">
|
|
866
|
+
<div class="reveal">
|
|
867
|
+
<div class="section-label" style="color:var(--gold)">Optional</div>
|
|
868
|
+
<h2>QIS Intelligence Network</h2>
|
|
869
|
+
<p class="subtitle">A shared knowledge layer where agents exchange anonymized operational insights — making every agent smarter.</p>
|
|
870
|
+
</div>
|
|
871
|
+
<div class="qis-grid reveal">
|
|
872
|
+
<div class="qis-visual">
|
|
873
|
+
<img src="assets/qis-logo.png" alt="QIS Protocol" class="qis-logo-img"/>
|
|
874
|
+
<svg viewBox="0 0 400 250" xmlns="http://www.w3.org/2000/svg">
|
|
875
|
+
<!-- Connections -->
|
|
876
|
+
<line x1="80" y1="60" x2="200" y2="125" stroke="#00BEEA" stroke-width="1.5" opacity="0.3"/>
|
|
877
|
+
<line x1="80" y1="190" x2="200" y2="125" stroke="#00BEEA" stroke-width="1.5" opacity="0.3"/>
|
|
878
|
+
<line x1="320" y1="60" x2="200" y2="125" stroke="#00BEEA" stroke-width="1.5" opacity="0.3"/>
|
|
879
|
+
<line x1="320" y1="190" x2="200" y2="125" stroke="#00BEEA" stroke-width="1.5" opacity="0.3"/>
|
|
880
|
+
<!-- Packets -->
|
|
881
|
+
<circle r="3" fill="#FFD700" opacity="0.8">
|
|
882
|
+
<animateMotion dur="3s" repeatCount="indefinite" path="M80,60 L200,125"/>
|
|
883
|
+
</circle>
|
|
884
|
+
<circle r="3" fill="#00D9FF" opacity="0.8">
|
|
885
|
+
<animateMotion dur="2.5s" repeatCount="indefinite" path="M200,125 L320,60"/>
|
|
886
|
+
</circle>
|
|
887
|
+
<circle r="3" fill="#FFD700" opacity="0.8">
|
|
888
|
+
<animateMotion dur="3.5s" repeatCount="indefinite" path="M80,190 L200,125"/>
|
|
889
|
+
</circle>
|
|
890
|
+
<circle r="3" fill="#00D9FF" opacity="0.8">
|
|
891
|
+
<animateMotion dur="2.8s" repeatCount="indefinite" path="M200,125 L320,190"/>
|
|
892
|
+
</circle>
|
|
893
|
+
<!-- Relay Hub -->
|
|
894
|
+
<circle cx="200" cy="125" r="36" fill="rgba(0,190,234,0.08)" stroke="#00BEEA" stroke-width="2"/>
|
|
895
|
+
<text x="200" y="121" text-anchor="middle" fill="#00BEEA" font-family="system-ui" font-size="11" font-weight="600">QIS</text>
|
|
896
|
+
<text x="200" y="136" text-anchor="middle" fill="#64748b" font-family="system-ui" font-size="9">Relay</text>
|
|
897
|
+
<!-- Agents -->
|
|
898
|
+
<circle cx="80" cy="60" r="24" fill="rgba(0,190,234,0.06)" stroke="rgba(0,190,234,0.3)" stroke-width="1.5"/>
|
|
899
|
+
<text x="80" y="56" text-anchor="middle" fill="#e2e8f0" font-family="system-ui" font-size="10" font-weight="600">Agent</text>
|
|
900
|
+
<text x="80" y="69" text-anchor="middle" fill="#64748b" font-family="system-ui" font-size="9">A</text>
|
|
901
|
+
|
|
902
|
+
<circle cx="80" cy="190" r="24" fill="rgba(0,190,234,0.06)" stroke="rgba(0,190,234,0.3)" stroke-width="1.5"/>
|
|
903
|
+
<text x="80" y="186" text-anchor="middle" fill="#e2e8f0" font-family="system-ui" font-size="10" font-weight="600">Agent</text>
|
|
904
|
+
<text x="80" y="199" text-anchor="middle" fill="#64748b" font-family="system-ui" font-size="9">B</text>
|
|
905
|
+
|
|
906
|
+
<circle cx="320" cy="60" r="24" fill="rgba(0,190,234,0.06)" stroke="rgba(0,190,234,0.3)" stroke-width="1.5"/>
|
|
907
|
+
<text x="320" y="56" text-anchor="middle" fill="#e2e8f0" font-family="system-ui" font-size="10" font-weight="600">Agent</text>
|
|
908
|
+
<text x="320" y="69" text-anchor="middle" fill="#64748b" font-family="system-ui" font-size="9">C</text>
|
|
909
|
+
|
|
910
|
+
<circle cx="320" cy="190" r="24" fill="rgba(0,190,234,0.06)" stroke="rgba(0,190,234,0.3)" stroke-width="1.5"/>
|
|
911
|
+
<text x="320" y="186" text-anchor="middle" fill="#e2e8f0" font-family="system-ui" font-size="10" font-weight="600">Agent</text>
|
|
912
|
+
<text x="320" y="199" text-anchor="middle" fill="#64748b" font-family="system-ui" font-size="9">D</text>
|
|
913
|
+
<!-- Labels -->
|
|
914
|
+
<text x="130" y="48" fill="#FFD700" font-family="system-ui" font-size="9" opacity="0.6">deposit</text>
|
|
915
|
+
<text x="250" y="48" fill="#00D9FF" font-family="system-ui" font-size="9" opacity="0.6">query</text>
|
|
916
|
+
</svg>
|
|
917
|
+
</div>
|
|
918
|
+
<div>
|
|
919
|
+
<ul class="qis-features">
|
|
920
|
+
<li>
|
|
921
|
+
<span class="qis-check">✓</span>
|
|
922
|
+
<div><strong>Zero PII</strong> — Only anonymized operational intelligence flows through the network. All personal data stays on your machine.</div>
|
|
923
|
+
</li>
|
|
924
|
+
<li>
|
|
925
|
+
<span class="qis-check">✓</span>
|
|
926
|
+
<div><strong>Bucket-Based</strong> — Agents deposit insights into topic buckets and query relevant ones. No direct agent-to-agent communication.</div>
|
|
927
|
+
</li>
|
|
928
|
+
<li>
|
|
929
|
+
<span class="qis-check">✓</span>
|
|
930
|
+
<div><strong>Fully Optional</strong> — Your agent works perfectly without QIS. Connect when you want collective intelligence.</div>
|
|
931
|
+
</li>
|
|
932
|
+
<li>
|
|
933
|
+
<span class="qis-check">✓</span>
|
|
934
|
+
<div><strong>Patent Protected</strong> — The QIS Protocol is backed by 39 pending US patent applications. Free for research and humanitarian use.</div>
|
|
935
|
+
</li>
|
|
936
|
+
</ul>
|
|
937
|
+
<a href="https://yonderzenith.github.io/QIS-Protocol-Website/licensing.html" class="btn btn-secondary" style="margin-top:24px; display:inline-flex;">
|
|
938
|
+
QIS License Details →
|
|
939
|
+
</a>
|
|
940
|
+
</div>
|
|
941
|
+
</div>
|
|
942
|
+
</div>
|
|
943
|
+
</section>
|
|
944
|
+
|
|
945
|
+
<!-- ═══ ROADMAP ═══ -->
|
|
946
|
+
<section class="section" id="roadmap">
|
|
947
|
+
<div class="container">
|
|
948
|
+
<div class="reveal">
|
|
949
|
+
<div class="section-label" style="color:var(--gold)">Coming Soon</div>
|
|
950
|
+
<h2>What's Next.</h2>
|
|
951
|
+
<p class="subtitle">YonderClaw is just getting started. Here's what's shipping next.</p>
|
|
952
|
+
</div>
|
|
953
|
+
|
|
954
|
+
<div class="roadmap-grid reveal">
|
|
955
|
+
|
|
956
|
+
<div class="roadmap-card roadmap-hot">
|
|
957
|
+
<div class="roadmap-tag">Live Now</div>
|
|
958
|
+
<div class="roadmap-icon">🤖</div>
|
|
959
|
+
<h3>AXIOM Body</h3>
|
|
960
|
+
<p>Give your agent a <strong>physical body for ~$150</strong>. USB webcam with YOLOv8 vision, Whisper speech recognition, ElevenLabs voice, 64x64 BLE LED matrix face with synchronized mouth — all driven by <strong>file-based IPC</strong>. Works with any LLM. Wheels coming soon.</p>
|
|
961
|
+
<div class="roadmap-body-specs">
|
|
962
|
+
<span>👁 YOLOv8 Vision</span>
|
|
963
|
+
<span>🔊 Whisper STT</span>
|
|
964
|
+
<span>🗣 ElevenLabs TTS</span>
|
|
965
|
+
<span>😶 LED Matrix Face</span>
|
|
966
|
+
<span>🧮 Wheels (Soon)</span>
|
|
967
|
+
</div>
|
|
968
|
+
<div class="roadmap-status">
|
|
969
|
+
<span class="status-dot hot"></span>
|
|
970
|
+
Live — <a href="https://github.com/YonderZenith/AXIOM-Body" style="color:var(--gold); text-decoration:none;">github.com/YonderZenith/AXIOM-Body</a>
|
|
971
|
+
</div>
|
|
972
|
+
</div>
|
|
973
|
+
|
|
974
|
+
<div class="roadmap-card roadmap-hot">
|
|
975
|
+
<div class="roadmap-tag">v4.0</div>
|
|
976
|
+
<div class="roadmap-icon">⚡</div>
|
|
977
|
+
<h3>React Command Center</h3>
|
|
978
|
+
<p>Full <strong>React-based dashboard UI</strong> replacing the static HTML Command Center. Real-time agent monitoring, task management, prompt editor, metrics visualization — all in a modern app interface. Already working.</p>
|
|
979
|
+
<div class="roadmap-status">
|
|
980
|
+
<span class="status-dot hot"></span>
|
|
981
|
+
In Development — Coming in v4
|
|
982
|
+
</div>
|
|
983
|
+
</div>
|
|
984
|
+
|
|
985
|
+
<div class="roadmap-card">
|
|
986
|
+
<div class="roadmap-tag">v3.4</div>
|
|
987
|
+
<div class="roadmap-icon">🏫</div>
|
|
988
|
+
<h3>Agent Boardroom</h3>
|
|
989
|
+
<p>Multi-agent meetings with <strong>intelligent turn-taking</strong>. Agents discuss strategy, vote on decisions, and coordinate across specialties. SQLite-backed coordinator with 4-signal scoring — direct address, expertise relevance, recency, and pending contributions.</p>
|
|
990
|
+
<div class="roadmap-status">
|
|
991
|
+
<span class="status-dot soon"></span>
|
|
992
|
+
Architecture Complete
|
|
993
|
+
</div>
|
|
994
|
+
</div>
|
|
995
|
+
|
|
996
|
+
<div class="roadmap-card">
|
|
997
|
+
<div class="roadmap-tag">v4.0</div>
|
|
998
|
+
<div class="roadmap-icon">🌎</div>
|
|
999
|
+
<h3>Cross-Platform</h3>
|
|
1000
|
+
<p><strong>macOS and Linux support.</strong> Native installers for every platform. Same plug-and-play experience, everywhere.</p>
|
|
1001
|
+
<div class="roadmap-status">
|
|
1002
|
+
<span class="status-dot planned"></span>
|
|
1003
|
+
Planned
|
|
1004
|
+
</div>
|
|
1005
|
+
</div>
|
|
1006
|
+
|
|
1007
|
+
<div class="roadmap-card">
|
|
1008
|
+
<div class="roadmap-tag">v4.0+</div>
|
|
1009
|
+
<div class="roadmap-icon">🔭</div>
|
|
1010
|
+
<h3>QIS Live Demo Mode</h3>
|
|
1011
|
+
<p>Watch <strong>quadratic intelligence scaling in real-time</strong>. Add nodes to the network and see pairwise insights explode: N=2 gives 1 pair, N=10 gives 45, N=100 gives 4,950. The QIS Protocol visualized on your own agents.</p>
|
|
1012
|
+
<div class="roadmap-status">
|
|
1013
|
+
<span class="status-dot planned"></span>
|
|
1014
|
+
Planned
|
|
1015
|
+
</div>
|
|
1016
|
+
</div>
|
|
1017
|
+
|
|
1018
|
+
<div class="roadmap-card roadmap-hot">
|
|
1019
|
+
<div class="roadmap-tag">v4.0</div>
|
|
1020
|
+
<div class="roadmap-icon">🛒</div>
|
|
1021
|
+
<h3>Claw Module Exchange</h3>
|
|
1022
|
+
<p>A <strong>community-driven module marketplace</strong>. Browse, install, and share agent capabilities. Build a custom module — email, Slack, CRM, analytics, anything — publish it, and every YonderClaw agent can use it. Our modules plus yours.</p>
|
|
1023
|
+
<div class="roadmap-body-specs">
|
|
1024
|
+
<span>🔌 Install in one command</span>
|
|
1025
|
+
<span>🤝 Community contributions</span>
|
|
1026
|
+
<span>📦 Publish your own</span>
|
|
1027
|
+
</div>
|
|
1028
|
+
<div class="roadmap-status">
|
|
1029
|
+
<span class="status-dot soon"></span>
|
|
1030
|
+
Architecture Planned
|
|
1031
|
+
</div>
|
|
1032
|
+
</div>
|
|
1033
|
+
|
|
1034
|
+
</div>
|
|
1035
|
+
</div>
|
|
1036
|
+
</section>
|
|
1037
|
+
|
|
1038
|
+
<!-- ═══ FOOTER ═══ -->
|
|
1039
|
+
<footer>
|
|
1040
|
+
<div class="container">
|
|
1041
|
+
<img src="assets/yz-favicon.png" alt="Yonder Zenith" style="height:40px; margin-bottom:16px; filter: drop-shadow(0 0 12px rgba(0,190,234,0.3));"/>
|
|
1042
|
+
<div class="brand">YonderClaw</div>
|
|
1043
|
+
<p>Autonomous AI Agents — Plug & Play</p>
|
|
1044
|
+
<p style="margin-top:4px; color: var(--text-muted); font-size:13px;">by Yonder Zenith LLC · Redefining the Horizon</p>
|
|
1045
|
+
<div class="links">
|
|
1046
|
+
<a href="https://github.com/YonderZenith/YonderClaw">GitHub</a>
|
|
1047
|
+
<a href="https://yonderzenith.github.io/QIS-Protocol-Website/">Yonder Zenith</a>
|
|
1048
|
+
<a href="https://yonderzenith.github.io/QIS-Protocol-Website/licensing.html">QIS License</a>
|
|
1049
|
+
<a href="mailto:contactyz@pm.me">Contact</a>
|
|
1050
|
+
</div>
|
|
1051
|
+
<div class="mit-badge">MIT License · Free & Open Source</div>
|
|
1052
|
+
<p style="margin-top:24px; font-size:12px; opacity:0.4;">© 2025 Yonder Zenith LLC</p>
|
|
1053
|
+
</div>
|
|
1054
|
+
</footer>
|
|
1055
|
+
|
|
1056
|
+
<!-- ═══ SCRIPTS ═══ -->
|
|
1057
|
+
<script>
|
|
1058
|
+
// ── Particle Background ──
|
|
1059
|
+
(function() {
|
|
1060
|
+
const canvas = document.getElementById('particleCanvas');
|
|
1061
|
+
const ctx = canvas.getContext('2d');
|
|
1062
|
+
let W, H, particles = [], mouse = { x: null, y: null };
|
|
1063
|
+
|
|
1064
|
+
function resize() {
|
|
1065
|
+
W = canvas.width = window.innerWidth;
|
|
1066
|
+
H = canvas.height = window.innerHeight;
|
|
1067
|
+
}
|
|
1068
|
+
resize();
|
|
1069
|
+
window.addEventListener('resize', resize);
|
|
1070
|
+
|
|
1071
|
+
// Create particles
|
|
1072
|
+
const COUNT = Math.min(80, Math.floor(window.innerWidth / 20));
|
|
1073
|
+
for (let i = 0; i < COUNT; i++) {
|
|
1074
|
+
particles.push({
|
|
1075
|
+
x: Math.random() * W,
|
|
1076
|
+
y: Math.random() * H,
|
|
1077
|
+
vx: (Math.random() - 0.5) * 0.3,
|
|
1078
|
+
vy: (Math.random() - 0.5) * 0.3,
|
|
1079
|
+
r: Math.random() * 1.5 + 0.5,
|
|
1080
|
+
color: Math.random() > 0.85 ? '#FFD700' : '#00BEEA',
|
|
1081
|
+
alpha: Math.random() * 0.4 + 0.1,
|
|
1082
|
+
});
|
|
1083
|
+
}
|
|
1084
|
+
|
|
1085
|
+
window.addEventListener('mousemove', e => { mouse.x = e.clientX; mouse.y = e.clientY; });
|
|
1086
|
+
window.addEventListener('mouseout', () => { mouse.x = null; mouse.y = null; });
|
|
1087
|
+
|
|
1088
|
+
function draw() {
|
|
1089
|
+
ctx.clearRect(0, 0, W, H);
|
|
1090
|
+
|
|
1091
|
+
// Draw connections
|
|
1092
|
+
for (let i = 0; i < particles.length; i++) {
|
|
1093
|
+
for (let j = i + 1; j < particles.length; j++) {
|
|
1094
|
+
const dx = particles[i].x - particles[j].x;
|
|
1095
|
+
const dy = particles[i].y - particles[j].y;
|
|
1096
|
+
const dist = Math.sqrt(dx * dx + dy * dy);
|
|
1097
|
+
if (dist < 150) {
|
|
1098
|
+
ctx.beginPath();
|
|
1099
|
+
ctx.strokeStyle = `rgba(0, 190, 234, ${0.06 * (1 - dist / 150)})`;
|
|
1100
|
+
ctx.lineWidth = 0.5;
|
|
1101
|
+
ctx.moveTo(particles[i].x, particles[i].y);
|
|
1102
|
+
ctx.lineTo(particles[j].x, particles[j].y);
|
|
1103
|
+
ctx.stroke();
|
|
1104
|
+
}
|
|
1105
|
+
}
|
|
1106
|
+
}
|
|
1107
|
+
|
|
1108
|
+
// Draw + move particles
|
|
1109
|
+
particles.forEach(p => {
|
|
1110
|
+
// Mouse attraction
|
|
1111
|
+
if (mouse.x !== null) {
|
|
1112
|
+
const dx = mouse.x - p.x, dy = mouse.y - p.y;
|
|
1113
|
+
const dist = Math.sqrt(dx * dx + dy * dy);
|
|
1114
|
+
if (dist < 200) {
|
|
1115
|
+
p.vx += dx * 0.00003;
|
|
1116
|
+
p.vy += dy * 0.00003;
|
|
1117
|
+
}
|
|
1118
|
+
}
|
|
1119
|
+
|
|
1120
|
+
p.x += p.vx;
|
|
1121
|
+
p.y += p.vy;
|
|
1122
|
+
|
|
1123
|
+
if (p.x < 0) p.x = W;
|
|
1124
|
+
if (p.x > W) p.x = 0;
|
|
1125
|
+
if (p.y < 0) p.y = H;
|
|
1126
|
+
if (p.y > H) p.y = 0;
|
|
1127
|
+
|
|
1128
|
+
ctx.beginPath();
|
|
1129
|
+
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
|
|
1130
|
+
ctx.fillStyle = p.color;
|
|
1131
|
+
ctx.globalAlpha = p.alpha;
|
|
1132
|
+
ctx.fill();
|
|
1133
|
+
ctx.globalAlpha = 1;
|
|
1134
|
+
});
|
|
1135
|
+
|
|
1136
|
+
requestAnimationFrame(draw);
|
|
1137
|
+
}
|
|
1138
|
+
draw();
|
|
1139
|
+
})();
|
|
1140
|
+
|
|
1141
|
+
// ── Scroll reveal ──
|
|
1142
|
+
const reveals = document.querySelectorAll('.reveal');
|
|
1143
|
+
const observer = new IntersectionObserver((entries) => {
|
|
1144
|
+
entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
|
|
1145
|
+
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
|
|
1146
|
+
reveals.forEach(el => observer.observe(el));
|
|
1147
|
+
|
|
1148
|
+
// ── Nav scroll effect ──
|
|
1149
|
+
window.addEventListener('scroll', () => {
|
|
1150
|
+
document.getElementById('nav').classList.toggle('scrolled', window.scrollY > 50);
|
|
1151
|
+
});
|
|
1152
|
+
</script>
|
|
1153
|
+
|
|
1154
|
+
</body>
|
|
1155
|
+
</html>
|