Wiki Hero Image Skill - hero.html

by adom
Design and render a billboard-grade hero image for any Adom wiki page — the 16:10 dark-mode image (set via page.json) that the wiki page, the landing grid, the Hydrogen Desktop installer, the homepage, and the screensaver all reuse. App name + value prop + one gorgeous shot of the real UI in a floating Windows-style webview window. Readable in one second.
Overview Files Skills Discover Packages Releases Dependencies Issues Breadcrumbs Pull Requests Activity
Download
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
<!DOCTYPE html><html><head><meta charset="utf-8">
<style>
@font-face{font-family:'Familjen Grotesk';font-weight:700;font-display:block;
  src:url('assets/fonts/familjen-grotesk-700-normal.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-weight:400;font-display:block;
  src:url('assets/fonts/satoshi-400-normal.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-weight:500;font-display:block;
  src:url('assets/fonts/satoshi-500-normal.woff2') format('woff2')}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:1600px;height:1000px;overflow:hidden}
body{font-family:'Satoshi',sans-serif;color:#e6edf3;position:relative;
  background:
    radial-gradient(1200px 800px at 88% -10%, rgba(0,184,177,.22), transparent 60%),
    radial-gradient(900px 700px at -5% 110%, rgba(140,107,247,.18), transparent 55%),
    radial-gradient(700px 600px at 50% 50%, rgba(0,97,239,.10), transparent 60%),
    linear-gradient(155deg,#0a0e14 0%,#0d1117 45%,#071318 100%);}
.dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.045) 1.4px,transparent 1.4px);
  background-size:34px 34px;mask-image:linear-gradient(180deg,rgba(0,0,0,.6),transparent 70%);}
.zone{position:absolute;inset:0;padding:80px 92px 0;z-index:3;display:flex;flex-direction:column}
.top{display:flex;align-items:flex-start;justify-content:space-between}
.wordmark svg{height:44px;width:auto;display:block}
.chip{border:1px solid rgba(0,184,177,.34);background:rgba(0,184,177,.07);border-radius:999px;
  padding:9px 17px;font-size:14px;letter-spacing:2.5px;text-transform:uppercase;color:#7fe3dd;
  display:inline-flex;align-items:center;gap:9px;font-weight:600}
.chip .dot{width:8px;height:8px;border-radius:50%;background:#00e6dc;box-shadow:0 0 10px #00e6dc}
h1{font-family:'Familjen Grotesk',sans-serif;font-weight:700;font-size:70px;line-height:1.0;
  letter-spacing:-2px;color:#f4f8fb;margin-top:48px;margin-bottom:24px;max-width:520px}
h1 .accent{background:linear-gradient(100deg,#00e6dc,#39b8ff 60%,#8c6bf7);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font-size:23px;line-height:1.5;color:#aeb8c4;max-width:500px;margin-bottom:30px}
.sub b{color:#e6edf3;font-weight:500}
.prompt{display:inline-flex;align-items:center;gap:12px;background:rgba(255,255,255,.045);
  border:1px solid rgba(0,230,220,.28);border-radius:14px;padding:15px 20px;font-size:19px;color:#cfd8e2;max-width:500px}
.prompt .q{color:#00e6dc;font-weight:700}.prompt .ask{color:#8b949e;font-size:15px;margin-left:6px}
.url{position:absolute;left:92px;bottom:54px;z-index:3;color:#00b8b1;font-weight:600;font-size:19px;
  font-family:'Familjen Grotesk',sans-serif}
.window{position:absolute;right:72px;top:250px;width:806px;border-radius:16px 16px 0 0;overflow:hidden;z-index:1;
  box-shadow:0 28px 80px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.07), 0 0 130px rgba(0,184,177,.07)}
.chrome{height:42px;background:#1b2128;display:flex;align-items:center;padding-left:13px;border-bottom:1px solid #232a33}.chrome .cic{display:flex;align-items:center;margin-right:9px}.chrome .cic svg{display:block}
.chrome .ct{color:#8b949e;font-size:15px;margin-right:auto}
.winbtns{display:flex;height:100%}
.winbtns .b{width:48px;height:100%;display:flex;align-items:center;justify-content:center;color:#b9c2cd}
.winbtns .min i{display:block;width:12px;height:1.5px;background:#b9c2cd}
.winbtns .max i{display:block;width:11px;height:11px;border:1.5px solid #b9c2cd;border-radius:1px}
.winbtns .cls{font-family:Arial,Helvetica,sans-serif;font-size:18px;line-height:1}
.winbtns .cls:hover{background:#e81123;color:#fff}
.window img{width:100%;height:760px;display:block;object-fit:cover;object-position:top left}
</style></head><body>
  <div class="dots"></div>
  <div class="window">
    <div class="chrome"><span class="cic"><svg viewBox="0 0 236 236" width="16" height="16" style="display:block"><path fill="#00e6dc" d="M212.94,23.05c-25.84-25.84-62.87-30.69-82.73-10.84-8.06,8.06-12.04,18.94-12.21,30.76h0s0,.02,0,.02c0,.04,0,.08,0,.12v73.29c0,.89.72,1.61,1.61,1.61h72.5l-.02-.02c12.17.03,23.42-3.94,31.69-12.2,19.85-19.85,15-56.89-10.84-82.73Z"/><path fill="#00e6dc" d="M23.05,212.95c25.84,25.84,62.87,30.69,82.73,10.84,8.06-8.06,12.04-18.94,12.21-30.76h0s0-.02,0-.02c0-.04,0-.08,0-.12v-73.29c0-.89-.72-1.61-1.61-1.61H43.89l.02.02c-12.17-.03-23.42,3.94-31.69,12.2-19.85,19.85-15,56.89,10.84,82.73Z"/></svg></span><span class="ct">adom-parts-search · hero.png · Adom webview</span>
      <div class="winbtns"><span class="b min"><i></i></span><span class="b max"><i></i></span><span class="b cls">&#10005;</span></div></div>
    <img src="file:///home/adom/project/adom-parts-search/screenshots/hero.png">
  </div>
  <div class="zone">
    <div class="top">
      <div class="wordmark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1072.9 236"><path fill="#fff" d="M212.94,23.05c-25.84-25.84-62.87-30.69-82.73-10.84-8.06,8.06-12.04,18.94-12.21,30.76h0s0,.02,0,.02c0,.04,0,.08,0,.12v73.29c0,.89.72,1.61,1.61,1.61h72.5l-.02-.02c12.17.03,23.42-3.94,31.69-12.2,19.85-19.85,15-56.89-10.84-82.73Z"/><path fill="#fff" d="M23.05,212.95c25.84,25.84,62.87,30.69,82.73,10.84,8.06-8.06,12.04-18.94,12.21-30.76h0s0-.02,0-.02c0-.04,0-.08,0-.12v-73.29c0-.89-.72-1.61-1.61-1.61H43.89l.02.02c-12.17-.03-23.42,3.94-31.69,12.2-19.85,19.85-15,56.89,10.84,82.73Z"/><path fill="#fff" d="M1065.5,25.22h-58.49c-2.98,0-5.68,1.87-6.73,4.65l-44.4,117.54c-.06.17-.31.17-.37,0l-45.44-117.59c-1.07-2.75-3.76-4.6-6.72-4.6h-58.79c-4.09,0-7.4,3.31-7.4,7.4v35.06l-.03-.12c-1.24,4.99-5.89,6-5.89,6,0,0-4.51,1.02-7.61-2.53v.03c-17.82-29.81-50.31-48.93-89.04-48.93-41.5,0-75.86,21.85-92.76,55.23v-.07c-2.86,5.19-8.74,5.13-8.74,5.13,0,0-5.63-.01-8.41-4.61-16.49-32.68-50.56-52.59-94.79-52.59h-73.46c-4.09,0-7.4,3.31-7.4,7.4v121.27s0,.03,0,.04c-.95,5.15-4.75,5.94-4.75,5.94,0,0-3.88.85-6.77-3.32l.05.23-46.05-126.83c-1.03-2.84-3.75-4.74-6.77-4.74h-57.14c-3.01,0-5.73,1.9-6.76,4.73l-68.67,188.38c-1.05,2.88-.18,6.21,2.4,8.19,1.31,1.01,2.98,1.47,4.64,1.47h34.96s6.43,0,6.43,0c2.5,0,4.83-1.39,5.9-3.65,8.49-17.86,26.5-29.64,48.37-29.64s39.71,11.73,48.19,29.53c1.1,2.32,3.49,3.76,6.06,3.76h120.78c31.22,0,57.85-9.95,77.02-28.77,7.38-7.25,13.43-15.72,18.05-25.1v.09c2.74-5.19,8.37-5.13,8.37-5.13,0,0,5.43,0,8.08,4.64,4.88,9.88,11.26,18.78,18.91,26.42,18.6,18.6,44.61,29.78,74.26,29.78,38.74,0,71.23-19.18,89.05-49.07l-.02.07c3.1-3.55,7.61-2.53,7.61-2.53,0,0,4.65,1,5.89,6l.03-.12v36.32c0,4.09,3.31,7.4,7.4,7.4h45.79c4.09,0,7.4-3.31,7.4-7.4v-86.26c0-.23.32-.28.39-.06l30.37,88.86c1,2.91,3.74,4.87,6.81,4.87h39.69c3.08,0,5.82-1.96,6.81-4.87l30.1-88.02c.07-.21.39-.16.39.06v85.43c0,4.09,3.31,7.4,7.4,7.4h45.79c4.09,0,7.4-3.31,7.4-7.4V32.62c0-4.09-3.31-7.4-7.4-7.4ZM372.31,147.57c-.15.21-.5.57-1.1.57h-30.33c-.61,0-.95-.35-1.1-.56-.15-.21-.38-.65-.19-1.23l15.06-45.79c.27-.81.92-.94,1.29-.94h0c.37,0,1.02.12,1.29.93l15.26,45.8c.19.58-.04,1.01-.19,1.23ZM525.72,173.84h-14.52c-.86,0-1.56-.7-1.56-1.56v-92.16c0-.86.7-1.56,1.56-1.56h14.52c30.81,0,48.48,17.47,48.48,47.92s-17.67,47.36-48.48,47.36ZM734.6,173.26c-26.51,0-42.33-17.71-42.34-47.36,0-14.59,3.88-26.68,11.21-34.98,7.33-8.29,18.09-12.67,31.13-12.67,12.11,0,22.28,3.84,29.58,11.13.5.5.98,1.01,1.45,1.54,7.4,8.33,11.31,20.42,11.31,34.97,0,29.21-16.22,47.36-42.34,47.36Z"/></svg></div>
      <div class="chip"><span class="dot"></span>Wiki Skill</div>
    </div>
    <h1>Every app deserves<br>a <span class="accent">billboard.</span></h1>
    <div class="sub">Render a dark-mode, on-brand <b>hero</b> for any Adom wiki page — the <b>one-second billboard</b> the installer, homepage and screensaver all reuse. One name, one screenshot, zero clutter.</div>
    <div class="prompt"><span class="q">"make a hero for my app"</span><span class="ask">— just ask Claude</span></div>
  </div>
  <div class="url">wiki.adom.inc/adom/adom-wiki-hero-image</div>
</body></html>