html-anything/next/src/lib/templates/skills/deck-replit/example.html at main · chenmofei/html-anything · GitHub

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Replit Slides · World Mint</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;700;800;900&family=Inter:wght@400;500&family=JetBrains+Mono&display=swap" rel="stylesheet" />
<style>
  body { font-family:'Inter Tight','Inter',system-ui,sans-serif; background:#020405; margin:0; color:#e7fff0; }
  .deck { display:grid; gap:24px; padding:24px; }
  .slide { width:100%; aspect-ratio:16/9; max-width:1280px; margin:0 auto; position:relative; overflow:hidden; }
  .mint-bg {
    background:
      radial-gradient(ellipse at 80% 0%, rgba(0,255,170,0.25) 0%, transparent 50%),
      radial-gradient(ellipse at 0% 100%, rgba(0,210,140,0.18) 0%, transparent 50%),
      linear-gradient(135deg, #04150f 0%, #0a2a1d 60%, #04241a 100%);
  }
  .mint { color:#7ffec8; }
  .mono { font-family:'JetBrains Mono', ui-monospace, monospace; }
  .chip { font-size:11px; letter-spacing:0.18em; text-transform:uppercase; }
  .pill { background: rgba(127,254,200,0.1); color:#7ffec8; padding:3px 10px; border-radius:999px; }
  .ring { border:1px solid rgba(127,254,200,0.35); }
</style>
</head>
<body>
<div class="deck">

  <!-- COVER -->
  <section class="slide mint-bg">
    <div class="absolute inset-0 p-14 flex flex-col justify-between">
      <header class="flex items-baseline justify-between chip opacity-70 mono">
        <span>REPLIT · SLIDES — WORLD MINT</span>
        <span>№01 / 12</span>
        <span>2026</span>
      </header>

      <div>
        <div class="pill chip mono inline-block">Deck · Tech keynote</div>
        <h1 class="mt-6 font-black tracking-[-0.02em] leading-[0.95]" style="font-size:clamp(48px,7vw,128px);color:#e7fff0">
          Building agents that<br/>ship at <span class="mint">the edge.</span>
        </h1>
        <p class="mt-6 text-[24px] opacity-80 font-medium max-w-[720px] leading-snug">
          17 CLI agents. One stdin/stdout protocol. Zero API keys.
        </p>
      </div>

      <footer class="flex items-baseline justify-between chip opacity-70 mono">
        <span>HTML-ANYTHING.DEV</span>
        <span class="flex items-center gap-3">
          <span class="w-2 h-2 rounded-full" style="background:#7ffec8;box-shadow:0 0 12px #7ffec8"></span>
          <span>LIVE · LOCALHOST:3456</span>
        </span>
        <span>~ S W I P E ~</span>
      </footer>
    </div>
  </section>

  <!-- AGENDA -->
  <section class="slide mint-bg">
    <div class="absolute inset-0 p-14 flex flex-col justify-between">
      <header class="flex items-baseline justify-between chip opacity-70 mono">
        <span>WORLD MINT — AGENDA</span>
        <span>№02 / 12</span>
        <span>5 SCENES</span>
      </header>

      <div>
        <div class="chip mono mint">— Agenda</div>
        <h2 class="mt-2 font-black tracking-[-0.02em] leading-[1.0]" style="font-size:clamp(36px,4.6vw,72px);color:#e7fff0">
          Five short scenes,<br/>
          <span class="mint">one thesis</span>.
        </h2>
      </div>

      <div class="grid grid-cols-5 gap-5">
        <article class="ring rounded-2xl p-4">
          <div class="mono text-[22px] font-bold mint">01</div>
          <div class="mt-2 font-bold leading-snug">The edge moves to your laptop</div>
          <p class="mt-1.5 text-[12px] opacity-70 leading-snug">Cloud agents are a layer. Local agents are a habit.</p>
        </article>
        <article class="ring rounded-2xl p-4">
          <div class="mono text-[22px] font-bold mint">02</div>
          <div class="mt-2 font-bold leading-snug">Why local CLI agents win</div>
          <p class="mt-1.5 text-[12px] opacity-70 leading-snug">Trust, cost, speed. Pick three.</p>
        </article>
        <article class="ring rounded-2xl p-4" style="background:rgba(127,254,200,0.06)">
          <div class="mono text-[22px] font-bold mint">03</div>
          <div class="mt-2 font-bold leading-snug">17 agents · one protocol</div>
          <p class="mt-1.5 text-[12px] opacity-70 leading-snug">stdin/stdout JSON-line, that's it.</p>
        </article>
        <article class="ring rounded-2xl p-4">
          <div class="mono text-[22px] font-bold mint">04</div>
          <div class="mt-2 font-bold leading-snug">Live demo · ⌘+Enter</div>
          <p class="mt-1.5 text-[12px] opacity-70 leading-snug">CSV → magazine in 80 seconds.</p>
        </article>
        <article class="ring rounded-2xl p-4">
          <div class="mono text-[22px] font-bold mint">05</div>
          <div class="mt-2 font-bold leading-snug">Open questions</div>
          <p class="mt-1.5 text-[12px] opacity-70 leading-snug">Templates as a community lib?</p>
        </article>
      </div>

      <footer class="flex items-baseline justify-between chip opacity-60 mono">
        <span>STYLE — WORLD MINT (NEON SANS)</span>
        <span>USE ← / → TO NAVIGATE</span>
        <span>5 / 12</span>
      </footer>
    </div>
  </section>

</div>
</body>
</html>