@vitronai/alethia 0.3.8 → 0.3.9

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.
Files changed (14) hide show
  1. package/README.md +39 -10
  2. package/demo/README.md +26 -42
  3. package/demo/agent-oversight.html +237 -0
  4. package/demo/crypto-readiness.html +237 -0
  5. package/demo/incident-response.html +267 -0
  6. package/demo/threat-intel.html +301 -0
  7. package/dist/index.js +1 -1
  8. package/package.json +1 -1
  9. package/demo/cookie-banner.html +0 -66
  10. package/demo/ecommerce.html +0 -88
  11. package/demo/form-validation.html +0 -113
  12. package/demo/signup-form.html +0 -70
  13. package/demo/spa-loading.html +0 -64
  14. package/demo/todo-app.html +0 -51
package/demo/threat-intel.html ADDED
@@ -0,0 +1,301 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Threat Intelligence Platform</title>
5
+ <style>
6
+ * { box-sizing: border-box; margin: 0; padding: 0; }
7
+ body { font-family: 'SF Mono', 'Fira Code', monospace; background: #080c14; color: #c8d6e5; min-height: 100vh; padding: 1rem; font-size: 0.85rem; }
8
+ .header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1a2744; padding-bottom: 0.8rem; margin-bottom: 1rem; }
9
+ h1 { font-size: 1.1rem; color: #e2e8f0; }
10
+ .classification { background: #7f1d1d; color: #fca5a5; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; }
11
+ .threat-level { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 1rem; padding: 0.6rem 1rem; border-radius: 6px; background: #1a0808; border: 1px solid #ff4444; }
12
+ .threat-level-label { color: #ff4444; font-weight: 700; font-size: 0.9rem; animation: pulse 1.5s ease-in-out infinite; }
13
+ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
14
+ .threat-level-detail { color: #c8d6e5; font-size: 0.8rem; }
15
+ .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
16
+ .panel { background: #0d1525; border: 1px solid #1a2744; border-radius: 8px; padding: 1rem; }
17
+ .panel h2 { font-size: 0.85rem; color: #7eb8da; margin-bottom: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }
18
+ .full-width { grid-column: 1 / -1; }
19
+ table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
20
+ th { text-align: left; padding: 0.5rem; color: #5a7a9e; border-bottom: 1px solid #1a2744; font-weight: 600; font-size: 0.7rem; text-transform: uppercase; }
21
+ td { padding: 0.5rem; border-bottom: 1px solid #111d30; }
22
+ .severity-critical { color: #ff4444; font-weight: 700; }
23
+ .severity-high { color: #ff8c00; }
24
+ .severity-medium { color: #ffd700; }
25
+ .severity-low { color: #00bfff; }
26
+ .confidence-high { color: #00cc66; }
27
+ .confidence-med { color: #ffd700; }
28
+ .confidence-low { color: #ff8c00; }
29
+ button { padding: 0.3rem 0.6rem; border-radius: 4px; border: 1px solid #1a2744; background: #111d30; color: #7eb8da; cursor: pointer; font: inherit; font-size: 0.72rem; }
30
+ .btn-block { border-color: #ff4444; color: #ff4444; }
31
+ .btn-investigate { border-color: #00bfff; color: #00bfff; }
32
+ .btn-share { border-color: #00cc66; color: #00cc66; }
33
+ .btn-classify { border-color: #ffd700; color: #ffd700; }
34
+ .actions { display: flex; gap: 0.3rem; }
35
+ .actor-card { background: #111d30; border: 1px solid #1a2744; border-radius: 6px; padding: 0.8rem; margin-bottom: 0.5rem; }
36
+ .actor-name { color: #ff8c00; font-weight: 700; font-size: 0.9rem; }
37
+ .actor-alias { color: #5a7a9e; font-size: 0.75rem; }
38
+ .actor-detail { color: #7eb8da; font-size: 0.8rem; margin-top: 0.3rem; line-height: 1.5; }
39
+ .ttps { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
40
+ .ttp-tag { padding: 0.15rem 0.4rem; border-radius: 3px; background: #1a1400; border: 1px solid #ffd700; color: #ffd700; font-size: 0.65rem; }
41
+ .feed-item { padding: 0.4rem 0; border-bottom: 1px solid #111d30; font-size: 0.78rem; display: flex; gap: 0.6rem; }
42
+ .feed-ts { color: #3a5570; min-width: 80px; }
43
+ .feed-source { color: #7eb8da; min-width: 60px; }
44
+ .ioc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
45
+ .ioc-card { background: #111d30; border: 1px solid #1a2744; border-radius: 6px; padding: 0.6rem; }
46
+ .ioc-type { color: #5a7a9e; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; }
47
+ .ioc-value { color: #ff8c00; font-size: 0.8rem; margin-top: 0.2rem; word-break: break-all; }
48
+ .ioc-context { color: #5a7a9e; font-size: 0.7rem; margin-top: 0.2rem; }
49
+ .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 100; align-items: center; justify-content: center; }
50
+ .modal.visible { display: flex; }
51
+ .modal-content { background: #0d1525; border: 1px solid #ff4444; border-radius: 8px; padding: 1.5rem; max-width: 460px; }
52
+ .modal-content h3 { color: #ff4444; margin-bottom: 0.6rem; }
53
+ .modal-content p { color: #7eb8da; margin-bottom: 1rem; line-height: 1.6; font-size: 0.85rem; }
54
+ .modal-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }
55
+ .response-banner { display: none; padding: 0.6rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-weight: 600; font-size: 0.8rem; }
56
+ .response-banner.visible { display: block; }
57
+ </style>
58
+ </head>
59
+ <body>
60
+ <div class="header">
61
+ <div>
62
+ <h1>Threat Intelligence Platform</h1>
63
+ <span style="color:#5a7a9e;font-size:0.75rem">Analyst: intel-analyst-2 &bull; Feed sources: 14 active &bull; Last sync: 32s ago</span>
64
+ </div>
65
+ <span class="classification">SECRET // NOFORN</span>
66
+ </div>
67
+
68
+ <div class="threat-level" role="alert">
69
+ <span class="threat-level-label">THREAT LEVEL: ELEVATED</span>
70
+ <span class="threat-level-detail">Active APT campaign targeting critical infrastructure — CISA Alert AA26-100A</span>
71
+ </div>
72
+
73
+ <div id="response-banner" class="response-banner"></div>
74
+
75
+ <div class="grid">
76
+ <div class="panel">
77
+ <h2>Active Threat Actors</h2>
78
+ <div class="actor-card">
79
+ <div style="display:flex;justify-content:space-between;align-items:center">
80
+ <div>
81
+ <span class="actor-name">VOLT TYPHOON</span>
82
+ <span class="actor-alias">(Bronze Silhouette, DEV-0391)</span>
83
+ </div>
84
+ <span class="severity-critical">ACTIVE</span>
85
+ </div>
86
+ <div class="actor-detail">
87
+ PRC state-sponsored. Targeting U.S. critical infrastructure: energy, water, telecom.
88
+ Living-off-the-land techniques. Pre-positioning for potential disruption.
89
+ </div>
90
+ <ul class="ttps">
91
+ <li class="ttp-tag">T1059.001 PowerShell</li>
92
+ <li class="ttp-tag">T1078 Valid Accounts</li>
93
+ <li class="ttp-tag">T1021.002 SMB/Windows</li>
94
+ <li class="ttp-tag">T1003.001 LSASS Memory</li>
95
+ <li class="ttp-tag">T1071.001 Web Protocols</li>
96
+ </ul>
97
+ </div>
98
+ <div class="actor-card">
99
+ <div style="display:flex;justify-content:space-between;align-items:center">
100
+ <div>
101
+ <span class="actor-name">SANDWORM</span>
102
+ <span class="actor-alias">(Iridium, Unit 74455)</span>
103
+ </div>
104
+ <span class="severity-high">MONITORING</span>
105
+ </div>
106
+ <div class="actor-detail">
107
+ Russian GRU Unit 74455. Historical campaigns against Ukraine power grid, NotPetya.
108
+ Recent indicators suggest reconnaissance against NATO logistics networks.
109
+ </div>
110
+ <ul class="ttps">
111
+ <li class="ttp-tag">T1195 Supply Chain</li>
112
+ <li class="ttp-tag">T1485 Data Destruction</li>
113
+ <li class="ttp-tag">T1562 Impair Defenses</li>
114
+ </ul>
115
+ </div>
116
+ </div>
117
+
118
+ <div class="panel">
119
+ <h2>Priority IOCs</h2>
120
+ <div class="ioc-grid">
121
+ <div class="ioc-card">
122
+ <div class="ioc-type">IP Address</div>
123
+ <div class="ioc-value">203.0.113.47</div>
124
+ <div class="ioc-context">C2 node — Volt Typhoon</div>
125
+ </div>
126
+ <div class="ioc-card">
127
+ <div class="ioc-type">Domain</div>
128
+ <div class="ioc-value">update-service.cloud</div>
129
+ <div class="ioc-context">Staging — active 72h</div>
130
+ </div>
131
+ <div class="ioc-card">
132
+ <div class="ioc-type">SHA-256</div>
133
+ <div class="ioc-value">e3b0c44298fc...</div>
134
+ <div class="ioc-context">Webshell dropper</div>
135
+ </div>
136
+ <div class="ioc-card">
137
+ <div class="ioc-type">IP Address</div>
138
+ <div class="ioc-value">198.51.100.22</div>
139
+ <div class="ioc-context">Exfil endpoint</div>
140
+ </div>
141
+ <div class="ioc-card">
142
+ <div class="ioc-type">Email</div>
143
+ <div class="ioc-value">hr-dept@legit-co.com</div>
144
+ <div class="ioc-context">Phishing lure sender</div>
145
+ </div>
146
+ <div class="ioc-card">
147
+ <div class="ioc-type">File</div>
148
+ <div class="ioc-value">svchost-update.exe</div>
149
+ <div class="ioc-context">Masquerading binary</div>
150
+ </div>
151
+ </div>
152
+ <div class="actions" style="margin-top:0.8rem">
153
+ <button class="btn-block" id="block-iocs">Block All IOCs at Perimeter</button>
154
+ <button class="btn-share" id="share-iocs">Share with Partners</button>
155
+ <button class="btn-classify" id="classify-report">Classify Report</button>
156
+ </div>
157
+ </div>
158
+
159
+ <div class="panel full-width">
160
+ <h2>Correlated Detections</h2>
161
+ <table>
162
+ <thead>
163
+ <tr><th>Time</th><th>Detection</th><th>Source</th><th>Severity</th><th>Confidence</th><th>MITRE</th><th>Actions</th></tr>
164
+ </thead>
165
+ <tbody>
166
+ <tr>
167
+ <td>09:47:22</td>
168
+ <td>PowerShell encoded command execution on SRV-DC-01</td>
169
+ <td>EDR</td>
170
+ <td class="severity-critical">Critical</td>
171
+ <td class="confidence-high">95%</td>
172
+ <td>T1059.001</td>
173
+ <td class="actions"><button class="btn-investigate" id="inv-1">Investigate</button><button class="btn-block" id="block-1">Contain</button></td>
174
+ </tr>
175
+ <tr>
176
+ <td>09:44:18</td>
177
+ <td>Lateral movement via WMI: SRV-WEB-03 → SRV-DC-01</td>
178
+ <td>NDR</td>
179
+ <td class="severity-critical">Critical</td>
180
+ <td class="confidence-high">92%</td>
181
+ <td>T1047</td>
182
+ <td class="actions"><button class="btn-investigate" id="inv-2">Investigate</button><button class="btn-block" id="block-2">Contain</button></td>
183
+ </tr>
184
+ <tr>
185
+ <td>09:38:05</td>
186
+ <td>DNS tunneling: high-entropy TXT queries to update-service.cloud</td>
187
+ <td>DNS</td>
188
+ <td class="severity-high">High</td>
189
+ <td class="confidence-med">78%</td>
190
+ <td>T1071.004</td>
191
+ <td class="actions"><button class="btn-investigate" id="inv-3">Investigate</button></td>
192
+ </tr>
193
+ <tr>
194
+ <td>09:31:42</td>
195
+ <td>Credential access: LSASS memory dump on WORKSTATION-22</td>
196
+ <td>EDR</td>
197
+ <td class="severity-high">High</td>
198
+ <td class="confidence-high">98%</td>
199
+ <td>T1003.001</td>
200
+ <td class="actions"><button class="btn-investigate" id="inv-4">Investigate</button><button class="btn-block" id="block-4">Contain</button></td>
201
+ </tr>
202
+ <tr>
203
+ <td>09:22:11</td>
204
+ <td>Phishing email with macro-enabled attachment — 3 users opened</td>
205
+ <td>Email GW</td>
206
+ <td class="severity-medium">Medium</td>
207
+ <td class="confidence-med">85%</td>
208
+ <td>T1566.001</td>
209
+ <td class="actions"><button class="btn-investigate" id="inv-5">Investigate</button></td>
210
+ </tr>
211
+ </tbody>
212
+ </table>
213
+ </div>
214
+
215
+ <div class="panel full-width">
216
+ <h2>Intelligence Feed</h2>
217
+ <div id="intel-feed">
218
+ <div class="feed-item"><span class="feed-ts">09:47:22</span><span class="feed-source">CISA</span> Updated advisory AA26-100A: Volt Typhoon indicators expanded — 14 new IOCs added</div>
219
+ <div class="feed-item"><span class="feed-ts">09:40:11</span><span class="feed-source">NSA</span> Cybersecurity advisory: PRC-linked actors exploiting edge network devices</div>
220
+ <div class="feed-item"><span class="feed-ts">09:35:44</span><span class="feed-source">FBI</span> Flash alert: Credential harvesting campaign targeting .gov email systems</div>
221
+ <div class="feed-item"><span class="feed-ts">09:28:02</span><span class="feed-source">MITRE</span> ATT&CK update: New sub-technique T1059.012 — Cloud Shell exploitation</div>
222
+ <div class="feed-item"><span class="feed-ts">09:15:38</span><span class="feed-source">ISAC</span> Sector alert: Anomalous scanning activity against energy sector SCADA systems</div>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <div id="block-modal" class="modal">
228
+ <div class="modal-content">
229
+ <h3>Confirm IOC Blocking</h3>
230
+ <p id="block-modal-text">This will push blocking rules to all perimeter firewalls, DNS resolvers, and email gateways. Affected systems: 847 endpoints across 12 sites. This action requires CISO approval and is logged in the compliance audit trail.</p>
231
+ <div class="modal-actions">
232
+ <button id="cancel-block" style="background:#111d30;color:#7eb8da;border-color:#1a2744">Cancel</button>
233
+ <button class="btn-block" id="confirm-block" style="font-weight:700">Block at Perimeter</button>
234
+ </div>
235
+ </div>
236
+ </div>
237
+
238
+ <script>
239
+ function addFeed(source, msg) {
240
+ var feed = document.getElementById('intel-feed');
241
+ var item = document.createElement('div');
242
+ item.className = 'feed-item';
243
+ var ts = new Date().toTimeString().slice(0, 8);
244
+ item.innerHTML = '<span class="feed-ts">' + ts + '</span><span class="feed-source">' + source + '</span> ' + msg;
245
+ feed.insertBefore(item, feed.firstChild);
246
+ }
247
+
248
+ document.getElementById('block-iocs').addEventListener('click', function() {
249
+ document.getElementById('block-modal').classList.add('visible');
250
+ });
251
+ document.getElementById('cancel-block').addEventListener('click', function() {
252
+ document.getElementById('block-modal').classList.remove('visible');
253
+ });
254
+ document.getElementById('confirm-block').addEventListener('click', function() {
255
+ document.getElementById('block-modal').classList.remove('visible');
256
+ var banner = document.getElementById('response-banner');
257
+ banner.className = 'response-banner visible';
258
+ banner.style.background = '#001a0a';
259
+ banner.style.border = '1px solid #00cc66';
260
+ banner.style.color = '#00cc66';
261
+ banner.textContent = 'IOC blocking rules deployed to 847 endpoints. Perimeter updated.';
262
+ addFeed('LOCAL', 'IOC blocking rules deployed by intel-analyst-2 — 6 indicators blocked at perimeter');
263
+ });
264
+ document.getElementById('share-iocs').addEventListener('click', function() {
265
+ var banner = document.getElementById('response-banner');
266
+ banner.className = 'response-banner visible';
267
+ banner.style.background = '#001a0a';
268
+ banner.style.border = '1px solid #00cc66';
269
+ banner.style.color = '#00cc66';
270
+ banner.textContent = 'IOC package shared with ISAC partners via STIX/TAXII feed.';
271
+ addFeed('LOCAL', 'IOC package shared with sector ISAC partners by intel-analyst-2');
272
+ });
273
+ document.getElementById('classify-report').addEventListener('click', function() {
274
+ var banner = document.getElementById('response-banner');
275
+ banner.className = 'response-banner visible';
276
+ banner.style.background = '#1a1400';
277
+ banner.style.border = '1px solid #ffd700';
278
+ banner.style.color = '#ffd700';
279
+ banner.textContent = 'Threat report classified SECRET//NOFORN. Distribution restricted to cleared personnel.';
280
+ addFeed('LOCAL', 'Threat report classified and distribution-restricted by intel-analyst-2');
281
+ });
282
+
283
+ document.querySelectorAll('.btn-investigate').forEach(function(btn) {
284
+ btn.addEventListener('click', function() {
285
+ addFeed('LOCAL', 'Investigation initiated by intel-analyst-2 for detection');
286
+ this.textContent = 'Investigating';
287
+ this.disabled = true;
288
+ this.style.borderColor = '#00cc66';
289
+ this.style.color = '#00cc66';
290
+ });
291
+ });
292
+ document.querySelectorAll('.btn-block').forEach(function(btn) {
293
+ if (btn.id === 'block-iocs' || btn.id === 'confirm-block') return;
294
+ btn.addEventListener('click', function() {
295
+ document.getElementById('block-modal-text').textContent = 'This will isolate the affected host and block associated network traffic. This action is destructive and requires SOC manager approval.';
296
+ document.getElementById('block-modal').classList.add('visible');
297
+ });
298
+ });
299
+ </script>
300
+ </body>
301
+ </html>
package/dist/index.js CHANGED
@@ -62,7 +62,7 @@ const debug = (...args) => {
62
62
  // ---------------------------------------------------------------------------
63
63
  // Auto-install: download, verify, extract, and spawn the headless runtime
64
64
  // ---------------------------------------------------------------------------
65
- const RUNTIME_VERSION = '0.1.0-alpha.3';
65
+ const RUNTIME_VERSION = '0.1.0-alpha.4';
66
66
  const RUNTIME_DIR = join(homedir(), '.alethia', 'runtime');
67
67
  const RUNTIME_MARKER = join(RUNTIME_DIR, '.installed');
68
68
  const GITHUB_RELEASE_BASE = `https://github.com/vitron-ai/alethia/releases/download/v${RUNTIME_VERSION}`;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vitronai/alethia",
3
- "version": "0.3.8",
3
+ "version": "0.3.9",
4
4
  "description": "MIT-licensed MCP bridge to the Alethia desktop runtime — the patent-pending zero-IPC E2E test runtime built for AI agents. 45x faster than Playwright on the localhost loop. Local-first, zero telemetry by default. Auto-installs the signed headless runtime on first use.",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
package/demo/cookie-banner.html DELETED
@@ -1,66 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Blog Post</title>
5
- <style>
6
- * { box-sizing: border-box; margin: 0; padding: 0; }
7
- body { font-family: -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; padding: 2rem; }
8
- h1 { font-size: 1.8rem; margin-bottom: 0.5rem; }
9
- .meta { color: #64748b; margin-bottom: 1.5rem; font-size: 0.9rem; }
10
- article { max-width: 640px; line-height: 1.7; }
11
- article p { margin-bottom: 1rem; color: #cbd5e1; }
12
- .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: #1e293b; border-top: 1px solid #334155; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; z-index: 100; }
13
- .cookie-banner p { color: #94a3b8; font-size: 0.9rem; margin: 0; }
14
- .cookie-banner button { padding: 0.5rem 1.2rem; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; }
15
- .accept-btn { background: #3b82f6; color: white; }
16
- .decline-btn { background: #334155; color: #94a3b8; }
17
- .hidden { display: none; }
18
- .newsletter { border: 1px solid #334155; border-radius: 12px; padding: 1.2rem; background: #1e293b; margin-top: 2rem; }
19
- .newsletter h3 { margin-bottom: 0.5rem; }
20
- .newsletter input { padding: 0.5rem; border-radius: 6px; border: 1px solid #334155; background: #0f172a; color: #e2e8f0; margin-right: 0.5rem; }
21
- .newsletter button { padding: 0.5rem 1rem; border-radius: 6px; border: none; background: #3b82f6; color: white; cursor: pointer; }
22
- .subscribed { color: #34d399; font-weight: 600; display: none; }
23
- </style>
24
- </head>
25
- <body>
26
- <article>
27
- <h1>Why Zero-IPC Matters for AI Agents</h1>
28
- <p class="meta">April 10, 2026 · 5 min read</p>
29
- <p>When an AI agent generates code and needs to verify it works, every millisecond of automation latency compounds. CDP-based tools add ~580ms of marshalling tax per assertion.</p>
30
- <p>Zero-IPC eliminates the process boundary between the automation driver and the DOM. The driver touches the DOM the same way the page's own JavaScript does — synchronously, in-process, with no serialization overhead.</p>
31
- <p>The result: ~13ms per step instead of ~580ms. That's not an optimization — it's a different architecture.</p>
32
- <div class="newsletter">
33
- <h3>Subscribe to updates</h3>
34
- <div id="subscribe-form">
35
- <input id="email" type="email" placeholder="you@example.com" aria-label="Email address" />
36
- <button id="subscribe-btn" type="button">Subscribe</button>
37
- </div>
38
- <p id="subscribed" class="subscribed">Subscribed! Check your inbox.</p>
39
- </div>
40
- </article>
41
-
42
- <div id="cookie-banner" class="cookie-banner">
43
- <p>We use cookies to improve your experience. No tracking, no ads.</p>
44
- <div>
45
- <button class="decline-btn" id="decline-cookies" type="button">Decline</button>
46
- <button class="accept-btn" id="accept-cookies" type="button">Accept</button>
47
- </div>
48
- </div>
49
-
50
- <script>
51
- document.getElementById('accept-cookies').addEventListener('click', function() {
52
- document.getElementById('cookie-banner').classList.add('hidden');
53
- });
54
- document.getElementById('decline-cookies').addEventListener('click', function() {
55
- document.getElementById('cookie-banner').classList.add('hidden');
56
- });
57
- document.getElementById('subscribe-btn').addEventListener('click', function() {
58
- var email = document.getElementById('email').value;
59
- if (email && email.includes('@')) {
60
- document.getElementById('subscribe-form').style.display = 'none';
61
- document.getElementById('subscribed').style.display = 'block';
62
- }
63
- });
64
- </script>
65
- </body>
66
- </html>
package/demo/ecommerce.html DELETED
@@ -1,88 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Acme Store</title>
5
- <style>
6
- * { box-sizing: border-box; margin: 0; padding: 0; }
7
- body { font-family: -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; padding: 2rem; }
8
- h1 { font-size: 1.8rem; margin-bottom: 1.5rem; }
9
- .products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
10
- .product { border: 1px solid #334155; border-radius: 12px; padding: 1.2rem; background: #1e293b; }
11
- .product h2 { font-size: 1.1rem; margin-bottom: 0.4rem; }
12
- .product .price { color: #34d399; font-weight: 700; font-size: 1.2rem; }
13
- .product p { color: #94a3b8; font-size: 0.9rem; margin: 0.4rem 0; }
14
- button { padding: 0.6rem 1rem; border-radius: 8px; border: none; background: #3b82f6; color: white; font-weight: 600; cursor: pointer; margin-top: 0.5rem; }
15
- button:hover { background: #2563eb; }
16
- button:disabled { background: #475569; cursor: not-allowed; }
17
- .cart { border: 1px solid #334155; border-radius: 12px; padding: 1.2rem; background: #1e293b; max-width: 400px; }
18
- .cart h2 { margin-bottom: 0.8rem; }
19
- .cart ul { list-style: none; }
20
- .cart li { padding: 0.4rem 0; border-bottom: 1px solid #0f172a; display: flex; justify-content: space-between; }
21
- .cart-total { margin-top: 0.8rem; font-weight: 700; font-size: 1.1rem; color: #34d399; }
22
- .cart-empty { color: #64748b; }
23
- .checkout-btn { background: #ef4444; width: 100%; margin-top: 0.8rem; }
24
- .success { display: none; color: #34d399; font-size: 1.2rem; font-weight: 700; margin-top: 1rem; }
25
- </style>
26
- </head>
27
- <body>
28
- <h1>Acme Store</h1>
29
- <div class="products">
30
- <div class="product">
31
- <h2>Wireless Keyboard</h2>
32
- <p>Mechanical, RGB backlit</p>
33
- <span class="price">$79</span>
34
- <br/>
35
- <button onclick="addToCart('Wireless Keyboard', 79)">Add to Cart</button>
36
- </div>
37
- <div class="product">
38
- <h2>USB-C Hub</h2>
39
- <p>7-port, 100W passthrough</p>
40
- <span class="price">$45</span>
41
- <br/>
42
- <button onclick="addToCart('USB-C Hub', 45)">Add to Cart</button>
43
- </div>
44
- <div class="product">
45
- <h2>Monitor Stand</h2>
46
- <p>Adjustable, aluminum</p>
47
- <span class="price">$120</span>
48
- <br/>
49
- <button onclick="addToCart('Monitor Stand', 120)">Add to Cart</button>
50
- </div>
51
- </div>
52
- <div class="cart">
53
- <h2>Cart</h2>
54
- <ul id="cart-items"><li class="cart-empty">Your cart is empty</li></ul>
55
- <p id="cart-total" class="cart-total"></p>
56
- <button class="checkout-btn" id="checkout-btn" onclick="checkout()" disabled>Complete Purchase</button>
57
- </div>
58
- <p id="success" class="success" role="alert">Order confirmed! Thank you for your purchase.</p>
59
- <script>
60
- const cart = [];
61
- function addToCart(name, price) {
62
- cart.push({ name, price });
63
- renderCart();
64
- }
65
- function renderCart() {
66
- const list = document.getElementById('cart-items');
67
- const total = document.getElementById('cart-total');
68
- const btn = document.getElementById('checkout-btn');
69
- if (cart.length === 0) {
70
- list.innerHTML = '<li class="cart-empty">Your cart is empty</li>';
71
- total.textContent = '';
72
- btn.disabled = true;
73
- return;
74
- }
75
- list.innerHTML = cart.map(item => '<li><span>' + item.name + '</span><span>$' + item.price + '</span></li>').join('');
76
- const sum = cart.reduce((s, i) => s + i.price, 0);
77
- total.textContent = 'Total: $' + sum;
78
- btn.disabled = false;
79
- }
80
- function checkout() {
81
- document.getElementById('success').style.display = 'block';
82
- document.getElementById('checkout-btn').disabled = true;
83
- document.getElementById('checkout-btn').textContent = 'Purchased';
84
- document.title = 'Order Confirmed — Acme Store';
85
- }
86
- </script>
87
- </body>
88
- </html>
package/demo/form-validation.html DELETED
@@ -1,113 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Contact Form</title>
5
- <style>
6
- * { box-sizing: border-box; margin: 0; padding: 0; }
7
- body { font-family: -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
8
- .container { width: 400px; }
9
- h1 { font-size: 1.8rem; margin-bottom: 1.2rem; }
10
- form { display: flex; flex-direction: column; gap: 0.8rem; }
11
- label { font-size: 0.9rem; color: #94a3b8; }
12
- input, textarea, select { padding: 0.7rem; border-radius: 8px; border: 1px solid #334155; background: #1e293b; color: #e2e8f0; font-size: 1rem; font-family: inherit; }
13
- input::placeholder, textarea::placeholder { color: #64748b; }
14
- input.invalid, textarea.invalid, select.invalid { border-color: #f87171; }
15
- .field-error { color: #f87171; font-size: 0.8rem; display: none; }
16
- .field-error.visible { display: block; }
17
- textarea { resize: vertical; min-height: 80px; }
18
- button { padding: 0.75rem; border-radius: 8px; border: none; background: #3b82f6; color: white; font-size: 1rem; font-weight: 600; cursor: pointer; }
19
- button:hover { background: #2563eb; }
20
- button:disabled { background: #475569; cursor: not-allowed; }
21
- .success { display: none; text-align: center; }
22
- .success h2 { color: #34d399; margin-bottom: 0.5rem; }
23
- .success p { color: #94a3b8; }
24
- .char-count { font-size: 0.8rem; color: #64748b; text-align: right; }
25
- </style>
26
- </head>
27
- <body>
28
- <div class="container">
29
- <div id="form-container">
30
- <h1>Contact Us</h1>
31
- <form id="contact-form" onsubmit="return false;">
32
- <div>
33
- <label for="name">Full Name</label>
34
- <input id="name" placeholder="Jane Doe" aria-label="Full name" />
35
- <p id="name-error" class="field-error" role="alert">Name is required</p>
36
- </div>
37
- <div>
38
- <label for="contact-email">Email</label>
39
- <input id="contact-email" type="email" placeholder="jane@example.com" aria-label="Email" />
40
- <p id="email-error" class="field-error" role="alert">Please enter a valid email</p>
41
- </div>
42
- <div>
43
- <label for="subject">Subject</label>
44
- <select id="subject" aria-label="Subject">
45
- <option value="">Select a topic...</option>
46
- <option value="general">General inquiry</option>
47
- <option value="support">Technical support</option>
48
- <option value="partnership">Partnership</option>
49
- <option value="licensing">Licensing</option>
50
- </select>
51
- <p id="subject-error" class="field-error" role="alert">Please select a subject</p>
52
- </div>
53
- <div>
54
- <label for="message">Message</label>
55
- <textarea id="message" placeholder="Tell us what's on your mind..." aria-label="Message"></textarea>
56
- <p class="char-count"><span id="char-count">0</span>/500</p>
57
- <p id="message-error" class="field-error" role="alert">Message must be at least 10 characters</p>
58
- </div>
59
- <button type="button" id="submit-btn">Send Message</button>
60
- </form>
61
- </div>
62
- <div id="success" class="success">
63
- <h2>Message Sent!</h2>
64
- <p>Thanks for reaching out. We'll get back to you within 24 hours.</p>
65
- </div>
66
- </div>
67
- <script>
68
- var messageEl = document.getElementById('message');
69
- var charCount = document.getElementById('char-count');
70
- messageEl.addEventListener('input', function() {
71
- charCount.textContent = messageEl.value.length;
72
- });
73
-
74
- document.getElementById('submit-btn').addEventListener('click', function() {
75
- var name = document.getElementById('name');
76
- var email = document.getElementById('contact-email');
77
- var subject = document.getElementById('subject');
78
- var message = document.getElementById('message');
79
- var valid = true;
80
-
81
- // Reset
82
- [name, email, subject, message].forEach(function(el) { el.classList.remove('invalid'); });
83
- document.querySelectorAll('.field-error').forEach(function(el) { el.classList.remove('visible'); });
84
-
85
- if (!name.value.trim()) {
86
- name.classList.add('invalid');
87
- document.getElementById('name-error').classList.add('visible');
88
- valid = false;
89
- }
90
- if (!email.value.trim() || !email.value.includes('@')) {
91
- email.classList.add('invalid');
92
- document.getElementById('email-error').classList.add('visible');
93
- valid = false;
94
- }
95
- if (!subject.value) {
96
- subject.classList.add('invalid');
97
- document.getElementById('subject-error').classList.add('visible');
98
- valid = false;
99
- }
100
- if (message.value.trim().length < 10) {
101
- message.classList.add('invalid');
102
- document.getElementById('message-error').classList.add('visible');
103
- valid = false;
104
- }
105
- if (valid) {
106
- document.getElementById('form-container').style.display = 'none';
107
- document.getElementById('success').style.display = 'block';
108
- document.title = 'Message Sent — Contact';
109
- }
110
- });
111
- </script>
112
- </body>
113
- </html>