Zakaria/open-design
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

first-commit
ci / Validate workspace (push) Has been cancelled
Details
landing-page-ci / Validate landing page (push) Has been cancelled
Details
landing-page-deploy / Deploy landing page (push) Has been cancelled
Details
github-metrics / Generate repository metrics SVG (push) Has been cancelled
Details
refresh-contributors-wall / Refresh contributors wall cache bust (push) Waiting to run
Details

Browse Source
This commit is contained in:
Zakaria
2026-05-04 14:58:14 -04:00
commit a46764fb1b
1210 changed files with 233231 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills/html-ppt/templates/full-decks/product-launch/README.md
+8
View File
@@ -0,0 +1,8 @@
# product-launch
8-slide consumer product announcement deck: hero cover, "introducing" moment, three feature slides, how-it-works, pricing tiers, and a closing testimonial + pre-order CTA.
Mixes dark hero slides (for show-off moments) with light slides (for details and pricing). Warm orange→peach gradient accent feels confident and human; easy to re-skin for any brand.
**Use when:** launching a product, announcing a v2, internal all-hands reveals, press kit decks.
**Feel:** Apple-event-on-a-budget — confident, tactile, uncluttered.
skills/html-ppt/templates/full-decks/product-launch/index.html
+121
View File
@@ -0,0 +1,121 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Halo v2 · Launch</title>
<link rel="stylesheet" href="../../../assets/fonts.css">
<link rel="stylesheet" href="../../../assets/base.css">
<link rel="stylesheet" href="../../../assets/animations/animations.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="tpl-product-launch">
<div class="deck">
<!-- 1. Cover / hero -->
<section class="slide dark" data-title="Cover">
<div class="hero-shot"></div>
<div style="position:absolute;top:56px;left:112px" class="brand">◎ Halo</div>
<p class="kicker">Launch · April 2026</p>
<h1 class="h1 anim-fade-up" data-anim="fade-up">Meet Halo v2.<br>Your ears,<br><span style="background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent">rewritten.</span></h1>
<p class="lede mt-m" style="max-width:42ch">Studio-grade spatial audio in the lightest open-ear earbuds ever made.</p>
<div class="deck-footer"><span>halo.audio</span><span class="slide-number" data-current="1" data-total="8"></span></div>
</section>
<!-- 2. Introducing -->
<section class="slide center tc" data-title="Introducing">
<div>
<p class="kicker">Introducing</p>
<h1 class="h1" style="font-size:140px">Halo v2</h1>
<p class="lede" style="margin:24px auto;max-width:56ch">Four years of research. Three generations of silicon. One product you'll forget you're wearing.</p>
</div>
</section>
<!-- 3. Feature 1 -->
<section class="slide" data-title="Sound">
<p class="kicker">01 · The sound</p>
<h2 class="h2">Hear the room<br>around the music.</h2>
<div class="grid g3 mt-l">
<div class="feature-card"><div class="icon">♪</div><h4>Open-ear spatial</h4><p class="dim">16mm titanium drivers angled into the ear canal. You hear the song and the world at once.</p></div>
<div class="feature-card"><div class="icon">◈</div><h4>Lossless 24-bit</h4><p class="dim">aptX Lossless and Hi-Res LDAC over Bluetooth 5.4. No dongles, no compromises.</p></div>
<div class="feature-card"><div class="icon">◐</div><h4>Adaptive EQ</h4><p class="dim">Tunes itself to the shape of your ear every 120 seconds.</p></div>
</div>
</section>
<!-- 4. Feature 2 -->
<section class="slide dark" data-title="Fit">
<p class="kicker">02 · The fit</p>
<h2 class="h2">4.9 grams.<br>All-day forgettable.</h2>
<div class="grid g3 mt-l">
<div class="card"><h4>Liquid-silicone hook</h4><p>Wraps behind the ear like a glasses arm. Never falls out on a run.</p></div>
<div class="card"><h4>IP57 sweat + rain</h4><p>Take them in the ocean. Rinse them under the tap. We dare you.</p></div>
<div class="card"><h4>14h + 42h case</h4><p>A full workweek of commutes on one charge of the case.</p></div>
</div>
</section>
<!-- 5. Feature 3 -->
<section class="slide" data-title="Intelligence">
<p class="kicker">03 · The intelligence</p>
<h2 class="h2">An AI that listens<br>so you don't have to.</h2>
<div class="grid g2 mt-l">
<div class="feature-card"><div class="icon">✦</div><h4>Live translate</h4><p class="dim">Real-time translation in 41 languages. Whispered directly into your ear, with a 380ms lag.</p></div>
<div class="feature-card"><div class="icon">✧</div><h4>Meeting recap</h4><p class="dim">Double-tap to record. Walk away with a summary, action items, and a searchable transcript.</p></div>
</div>
</section>
<!-- 6. How it works -->
<section class="slide" data-title="How it works">
<p class="kicker">How it works</p>
<h2 class="h2">Three taps. You're in.</h2>
<div class="stack mt-l" style="max-width:900px">
<div class="step"><div class="n">1</div><div><h4>Open the case near your phone</h4><p class="dim">iOS and Android pair automatically over Bluetooth LE. No app downloads required.</p></div></div>
<div class="step"><div class="n">2</div><div><h4>Pick your profile</h4><p class="dim">Commute, Focus, Workout, Cinema. Each is a complete audio + transparency recipe.</p></div></div>
<div class="step"><div class="n">3</div><div><h4>Just listen</h4><p class="dim">Halo adapts to your ear shape, your environment, and your hearing profile — continuously.</p></div></div>
</div>
</section>
<!-- 7. Pricing -->
<section class="slide" data-title="Pricing">
<p class="kicker">Pricing</p>
<h2 class="h2">Pick your Halo.</h2>
<div class="grid g3 mt-l" style="align-items:start">
<div class="price-card">
<h4>Halo Lite</h4>
<div class="amount">$179</div>
<p class="dim">Open-ear audio, IP57, 12h battery.</p>
<ul><li>AAC + SBC</li><li>Single-tap controls</li><li>USB-C charging</li></ul>
</div>
<div class="price-card pro">
<h4>Halo v2 · Pro</h4>
<div class="amount">$279</div>
<p class="dim">Everything, in its best form.</p>
<ul><li>Hi-Res Lossless</li><li>Live translate · 41 lang</li><li>Wireless + MagSafe charging</li><li>Adaptive EQ</li></ul>
</div>
<div class="price-card">
<h4>Halo Studio</h4>
<div class="amount">$399</div>
<p class="dim">For creators and field recorders.</p>
<ul><li>32-bit binaural capture</li><li>XLR dongle included</li><li>Lifetime firmware</li></ul>
</div>
</div>
</section>
<!-- 8. Testimonial + CTA combined? Task says 8 slides w/ testimonial + CTA as separate. Keep 8: testimonial on 7, but we've used 7 already. Re-plan: cover(1) intro(2) f1(3) f2(4) f3(5) how(6) pricing(7) testimonial+CTA(8) -->
<section class="slide dark" data-title="Ship">
<p class="kicker">One more thing</p>
<div class="row" style="gap:80px;align-items:center">
<div style="flex:1">
<p class="testimonial">"I forgot I was wearing them. Then I remembered, and I didn't want to take them off."</p>
<p class="dim mt-m">— Marques Lin, The Verge · early review</p>
</div>
<div style="flex:0 0 auto;text-align:center">
<p class="dim mb-m">Ships May 14 · from</p>
<div style="font-size:96px;font-weight:900;letter-spacing:-.04em">$279</div>
<a class="cta-btn mt-l" href="#">Pre-order Halo v2 →</a>
<p class="dim mt-m" style="font-size:13px">Free shipping · 45-day return · 2-year warranty</p>
</div>
</div>
</section>
</div>
<script src="../../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/full-decks/product-launch/style.css
+39
View File
@@ -0,0 +1,39 @@
/* product-launch — modern announcement deck */
.tpl-product-launch{
--bg:#ffffff;--bg-soft:#f5f5f7;--surface:#ffffff;--surface-2:#f2f2f6;
--ink:#0a0a12;--ink-2:#3a3a44;
--border:rgba(10,10,18,.08);--border-strong:rgba(10,10,18,.18);
--text-1:#0a0a12;--text-2:#4a4a58;--text-3:#8a8a96;
--accent:#ff5a36;--accent-2:#ff8c5a;--accent-3:#ffb36b;
--grad:linear-gradient(120deg,#ff5a36 0%,#ff8c5a 60%,#ffb36b 100%);
--radius:22px;--radius-lg:32px;
--shadow:0 20px 60px rgba(10,10,18,.1);
font-family:'Inter','Noto Sans SC',sans-serif;
}
.tpl-product-launch .slide{padding:80px 112px}
.tpl-product-launch .slide.dark{background:#0a0a12;color:#f5f5f7}
.tpl-product-launch .slide.dark .h1,.tpl-product-launch .slide.dark .h2,.tpl-product-launch .slide.dark h3,.tpl-product-launch .slide.dark h4{color:#fff}
.tpl-product-launch .slide.dark .lede,.tpl-product-launch .slide.dark .dim{color:rgba(245,245,247,.72)}
.tpl-product-launch .slide.dark .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);box-shadow:none;backdrop-filter:blur(20px)}
.tpl-product-launch .slide.dark .kicker{color:var(--accent-2)}
.tpl-product-launch .h1{font-size:96px;line-height:.98;font-weight:900;letter-spacing:-.045em}
.tpl-product-launch .h2{font-size:64px;font-weight:800;letter-spacing:-.035em}
.tpl-product-launch .hero-shot{position:absolute;right:-60px;top:50%;transform:translateY(-50%);width:640px;height:640px;border-radius:50%;background:var(--grad);filter:blur(2px);opacity:.85}
.tpl-product-launch .hero-shot::after{content:"";position:absolute;inset:80px;border-radius:40px;background:linear-gradient(160deg,rgba(255,255,255,.3),transparent 60%),#1a1a28;box-shadow:inset 0 2px 0 rgba(255,255,255,.2)}
.tpl-product-launch .hero-shot::before{content:"Halo v2";position:absolute;inset:80px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:44px;font-weight:900;letter-spacing:-.02em;z-index:2;border-radius:40px}
.tpl-product-launch .brand{font-size:18px;font-weight:800;letter-spacing:-.02em}
.tpl-product-launch .feature-card{padding:40px 36px;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border);position:relative;overflow:hidden}
.tpl-product-launch .feature-card .icon{width:60px;height:60px;border-radius:18px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px;font-weight:900;margin-bottom:20px}
.tpl-product-launch .step{display:flex;gap:24px;align-items:flex-start}
.tpl-product-launch .step .n{flex:none;width:56px;height:56px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:22px}
.tpl-product-launch .price-card{padding:40px 32px;border-radius:var(--radius-lg);border:1.5px solid var(--border);background:var(--surface);text-align:left}
.tpl-product-launch .price-card.pro{background:#0a0a12;color:#fff;border-color:#0a0a12;transform:scale(1.04);box-shadow:0 30px 80px rgba(255,90,54,.25)}
.tpl-product-launch .price-card.pro .dim{color:rgba(255,255,255,.7)}
.tpl-product-launch .price-card h4{font-size:16px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}
.tpl-product-launch .price-card.pro h4{color:var(--accent-2)}
.tpl-product-launch .price-card .amount{font-size:64px;font-weight:900;letter-spacing:-.035em;margin:14px 0}
.tpl-product-launch .price-card ul{list-style:none;padding:0;margin:20px 0 0}
.tpl-product-launch .price-card li{padding:8px 0;font-size:15px;color:var(--text-2);border-top:1px solid var(--border)}
.tpl-product-launch .price-card.pro li{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.12)}
.tpl-product-launch .cta-btn{display:inline-block;padding:20px 40px;border-radius:999px;background:var(--grad);color:#fff;font-weight:700;font-size:20px;box-shadow:0 20px 50px rgba(255,90,54,.4)}
.tpl-product-launch .testimonial{max-width:44ch;font-family:'Playfair Display',serif;font-size:44px;line-height:1.25;font-weight:500;letter-spacing:-.01em}