-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
64 lines (64 loc) · 3.9 KB
/
index.html
File metadata and controls
64 lines (64 loc) · 3.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>zero-code-apps — AI demo platform</title>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Mono:wght@300;400;500&display=swap" rel="stylesheet">
<style>
:root{--bg:#070a0f;--surface:#0d1117;--surface2:#161b22;--border:#21262d;--accent:#00d4aa;--text:#e6edf3;--muted:#8b949e;}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:'Syne',sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(0,212,170,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,170,0.025) 1px,transparent 1px);background-size:48px 48px;pointer-events:none;}
.wrap{text-align:center;padding:40px 24px;position:relative;z-index:1;max-width:700px;width:100%;}
.eyebrow{font-family:'DM Mono',monospace;font-size:11px;color:var(--accent);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:20px;}
h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;line-height:1.1;margin-bottom:14px;}
h1 span{color:var(--accent);}
.sub{font-family:'DM Mono',monospace;font-size:13px;color:var(--muted);margin-bottom:48px;line-height:1.7;}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:32px;}
.demo-card{background:var(--surface);border:0.5px solid var(--border);border-radius:12px;padding:28px 20px;text-decoration:none;transition:all .2s;display:block;}
.demo-card:hover{border-color:var(--accent);transform:translateY(-3px);}
.demo-card.cozy{border-color:rgba(193,127,74,0.3);}
.demo-card.cozy:hover{border-color:#c17f4a;}
.card-icon{font-size:32px;margin-bottom:12px;display:block;}
.card-title{font-size:16px;font-weight:700;margin-bottom:6px;}
.card-fintech .card-title{color:var(--accent);}
.card-cozy .card-title{color:#c17f4a;}
.card-desc{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);line-height:1.6;}
.card-tag{display:inline-block;font-family:'DM Mono',monospace;font-size:10px;padding:3px 8px;border-radius:3px;margin-top:10px;}
.tag-tech{background:rgba(0,212,170,0.1);color:var(--accent);border:0.5px solid rgba(0,212,170,0.3);}
.tag-cozy{background:rgba(193,127,74,0.1);color:#c17f4a;border:0.5px solid rgba(193,127,74,0.3);}
.links{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);}
.links a{color:var(--muted);text-decoration:none;margin:0 8px;}
.links a:hover{color:var(--accent);}
@media(max-width:480px){.cards{grid-template-columns:1fr;}}
</style>
</head>
<body>
<div class="wrap">
<div class="eyebrow">zero-code-apps · AI demo platform</div>
<h1>Build anything<br/>with <span>AI</span></h1>
<p class="sub">Two demos. One for developers. One for everyone.<br/>Both powered by skillforge-ai.</p>
<div class="cards">
<a href="builder/" class="demo-card card-fintech">
<span class="card-icon">💹</span>
<div class="card-title">AI App Builder</div>
<div class="card-desc">Describe a fintech app. Watch Claude, GPT-4o, or Gemini stream it into a live, downloadable web app.</div>
<span class="card-tag tag-tech">for developers</span>
</a>
<a href="cozy/" class="demo-card card-cozy cozy">
<span class="card-icon">✦</span>
<div class="card-title">Cozy Generator</div>
<div class="card-desc">Describe your vibe. Get a beautiful AI image in seconds. Warm, dreamy, instantly downloadable.</div>
<span class="card-tag tag-cozy">for everyone</span>
</a>
</div>
<div class="links">
<a href="https://github.com/kirti/zero-code-apps" target="_blank">github</a>
<a href="https://www.npmjs.com/package/skillforge-ai" target="_blank">npm</a>
<a href="https://www.linkedin.com/in/kirti3/" target="_blank">linkedin</a>
<a href="https://kirtikau.medium.com" target="_blank">medium</a>
</div>
</div>
</body>
</html>