Created
August 18, 2026 15:29
-
-
Save NikolayS/f095ed8c8c43bdc12b486510e06a46c8 to your computer and use it in GitHub Desktop.
samogrow landing redesign canvas — public mobile viewer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>samogrow Landing Redesign — design proposal</title> | |
| <meta name="description" content="Five artboards proposing a two-voice redesign of the samogrow.dev landing page: warm field-guide editorial paired with a precise console register."> | |
| <style> | |
| :root{--paper:#f2ede0;--card:#f7f3e8;--ink:#1c2216;--ink-soft:#4a5340;--ink-faint:#636b59; | |
| --line:#cdc4ac;--leaf:#35722f;--leaf-dk:#2b5c26; | |
| --serif:Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif; | |
| --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace} | |
| *{box-sizing:border-box} | |
| body{margin:0;background:#dcd6c6;color:var(--ink);font-family:var(--serif);line-height:1.6} | |
| header{background:var(--paper);border-bottom:1px solid var(--line);padding:44px 28px 38px} | |
| .wrap{max-width:1200px;margin:0 auto} | |
| .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase; | |
| color:var(--leaf);font-weight:600} | |
| h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,5vw,46px);line-height:1.08; | |
| letter-spacing:-.02em;margin:14px 0 12px} | |
| header p{margin:0;max-width:66ch;color:var(--ink-soft);font-size:17px} | |
| header .fine{font-family:var(--mono);font-size:12px;color:var(--ink-faint);margin-top:18px; | |
| padding-top:14px;border-top:1px solid var(--line);max-width:70ch;line-height:1.7} | |
| .sheet{padding:38px 28px} | |
| .sheet .wrapin{max-width:1200px;margin:0 auto} | |
| .meta{max-width:1200px;margin:0 auto 18px;display:grid;grid-template-columns:auto 1fr auto; | |
| gap:6px 14px;align-items:baseline} | |
| .idx{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--leaf);letter-spacing:.14em} | |
| .meta h2{font-family:var(--serif);font-weight:400;font-size:26px;margin:0;letter-spacing:-.015em} | |
| .dim{font-family:var(--mono);font-size:12px;color:#6b6552} | |
| .note{grid-column:1 / -1;background:#f6e7a8;border:1px solid #ddc978;padding:13px 15px;margin-top:8px; | |
| font-family:var(--mono);font-size:12.5px;line-height:1.55;color:#33380f} | |
| .note b{display:block;font-size:11px;letter-spacing:.16em;color:#6c6320;margin-bottom:6px} | |
| .note p{margin:7px 0 0} | |
| .stage{max-width:1200px;margin:0 auto;overflow-x:auto;-webkit-overflow-scrolling:touch} | |
| .stage iframe{display:block;border:0;background:var(--paper); | |
| box-shadow:0 24px 60px -32px rgba(28,34,22,.55),0 0 0 1px rgba(28,34,22,.16)} | |
| footer{background:var(--paper);border-top:1px solid var(--line);padding:34px 28px 54px; | |
| font-family:var(--mono);font-size:12px;color:var(--ink-faint);line-height:1.8} | |
| footer a{color:var(--leaf-dk)} | |
| @media (max-width:760px){ .sheet{padding:26px 14px} header{padding:32px 18px 28px} } | |
| </style> | |
| </head> | |
| <body> | |
| <header><div class="wrap"> | |
| <div class="eyebrow">Design proposal · not a shipped page</div> | |
| <h1>samogrow Landing Redesign</h1> | |
| <p>Five artboards proposing a two-voice system for <b>samogrow.dev</b>: warm field-guide | |
| editorial for the garden and the human, a precise console register for the machine — | |
| the loop, the plug state, the safety caps and every number.</p> | |
| <p class="fine">Static export of a working design canvas. Content is lifted from the live | |
| samogrow.dev page; safety-cap values show as placeholders because the live page does not | |
| state them. Interactive controls shown here are mockups — the cost artboard is captured | |
| with tier B selected.</p> | |
| </div></header> | |
| <section class="sheet"> | |
| <div class="meta"> | |
| <span class="idx">01</span> | |
| <h2>Desktop hero</h2> | |
| <span class="dim">1200 × 790</span> | |
| <div class="note"><b>HERO</b><p>The h1 is the proposition now, not the wordmark — which fixes the permanent 96px 'by Nombox' orphan.</p><p>The mock-mode command is the conversion device; GitHub is the primary button.</p></div> | |
| </div> | |
| <div class="stage"><iframe title="Desktop hero" width="1200" height="790" scrolling="no" sandbox="allow-same-origin" srcdoc="<!doctype html><html><head><meta charset="utf-8"><title>Desktop hero</title><style>html,body{margin:0;padding:0;background:#f2ede0}</style><style> | |
| :root { | |
| --paper:#f2ede0; --paper-2:#ebe4d2; --card:#f7f3e8; | |
| --ink:#1c2216; --ink-soft:#4a5340; --ink-faint:#636b59; | |
| --line:#cdc4ac; --line-soft:#ddd5bf; | |
| --leaf:#35722f; --leaf-dk:#2b5c26; --leaf-br:#4a9640; --leaf-lit:#8fd67f; | |
| --soil:#a8632a; | |
| --slab:#1c2216; --slab-ink:#e9e7d7; --slab-line:#2f3826; --slab-soft:#8b9380; | |
| --serif:Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif; | |
| --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; | |
| } | |
| * { box-sizing:border-box; } | |
| body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif); } | |
| a { color:var(--leaf-dk); text-decoration-color:var(--line); text-underline-offset:3px; } | |
| a:hover { color:var(--leaf); text-decoration-color:var(--leaf); } | |
| .board { width:1200px; height:790px; position:relative; overflow:hidden; background:var(--paper); } | |
| .grain { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.045; mix-blend-mode:multiply; | |
| background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } | |
| .layer { position:relative; z-index:1; } | |
| .col { width:1080px; margin:0 auto; } | |
| .topbar { height:54px; border-bottom:1px solid var(--line); display:flex; align-items:center; | |
| background:color-mix(in srgb, var(--paper) 88%, transparent); } | |
| .topbar .col { display:flex; align-items:center; justify-content:space-between; } | |
| .brand { font-family:var(--serif); font-size:19px; display:flex; align-items:center; gap:7px; letter-spacing:0; } | |
| .brand b { color:var(--leaf); font-weight:700; } | |
| .nav { display:flex; align-items:center; gap:20px; font-family:var(--mono); font-size:11.5px; | |
| letter-spacing:.16em; text-transform:uppercase; } | |
| .nav a { color:var(--ink-soft); text-decoration:none; } | |
| .nav a.gh { display:inline-flex; align-items:center; gap:7px; background:var(--leaf); border:1px solid var(--leaf); | |
| color:var(--paper); padding:7px 12px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; | |
| text-transform:uppercase; text-decoration:none; } | |
| .hero { padding:52px 0 0; } | |
| .hgrid { display:grid; grid-template-columns:1.15fr 1fr; gap:48px; align-items:start; } | |
| .lead { min-width:0; } | |
| .side { min-width:0; display:flex; flex-direction:column; gap:24px; } | |
| .eyebrow { font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; | |
| color:var(--leaf); font-weight:600; } | |
| h1 { font-family:var(--serif); font-weight:400; font-size:52px; line-height:1.06; letter-spacing:-.022em; | |
| margin:18px 0 20px; text-wrap:pretty; } | |
| h1 em { font-style:normal; color:var(--leaf); } | |
| .lede { font-size:21px; line-height:1.45; color:var(--ink-soft); margin:0 0 26px; max-width:46ch; text-wrap:pretty; } | |
| .lede b { color:var(--ink); font-weight:400; font-style:italic; } | |
| .cmd { background:var(--slab); border:1px solid var(--slab-line); } | |
| .cmd-head { display:flex; align-items:center; justify-content:space-between; gap:12px; | |
| padding:9px 14px; border-bottom:1px solid var(--slab-line); } | |
| .cmd-tag { font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; | |
| color:var(--leaf-lit); font-weight:600; } | |
| .copy { font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; | |
| color:var(--slab-soft); border:1px solid var(--slab-line); padding:4px 9px; | |
| display:inline-flex; align-items:center; gap:6px; } | |
| .cmd-body { padding:13px 14px 4px; display:grid; gap:8px; } | |
| .cmd-line { font-family:var(--mono); font-size:13.5px; line-height:1.4; color:var(--slab-ink); | |
| display:flex; gap:9px; white-space:pre-wrap; overflow-wrap:anywhere; } | |
| .cmd-line .p { color:var(--leaf-lit); } | |
| .cmd-line .env { color:#d9c98d; } | |
| .cmd-foot { padding:10px 14px 13px; font-family:var(--mono); font-size:11px; color:var(--slab-soft); | |
| letter-spacing:.03em; } | |
| .btns { display:flex; gap:14px; align-items:center; margin-top:26px; } | |
| .btn { font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; | |
| padding:14px 20px; text-decoration:none; border:1px solid var(--ink); | |
| display:inline-flex; align-items:center; gap:9px; } | |
| .btn-solid { background:var(--leaf); border-color:var(--leaf); color:var(--paper); } | |
| .btn-ghost { color:var(--ink); } | |
| .btn-text { font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; | |
| color:var(--ink-faint); text-decoration:none; } | |
| .trust { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:32px; padding-top:14px; | |
| border-top:1px solid var(--line); font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); | |
| letter-spacing:.03em; } | |
| .trust .dot { color:var(--line); } | |
| .trust b { color:var(--leaf-dk); font-weight:600; } | |
| .illo { border:1px solid var(--line); border-radius:10px; background:#faf7ee; overflow:hidden; | |
| box-shadow:0 22px 50px -30px rgba(28,34,22,.30); } | |
| .illo svg { display:block; width:100%; height:auto; } | |
| .cap { font-family:var(--mono); font-size:11px; color:var(--ink-faint); line-height:1.55; margin:10px 0 0; } | |
| .glance { border:1px solid var(--line); background:var(--card); padding:18px 20px; | |
| box-shadow:0 18px 40px -28px rgba(28,34,22,.30); } | |
| .glance .eyebrow { display:block; margin-bottom:12px; } | |
| .grow { display:flex; justify-content:space-between; gap:12px; padding:8px 0; | |
| border-bottom:1px dotted var(--line); font-family:var(--mono); font-size:12.5px; } | |
| .grow:last-child { border-bottom:0; } | |
| .grow span:first-child { color:var(--ink-soft); } | |
| .grow span:last-child { text-align:right; color:var(--ink); } | |
| .grow .hi { color:var(--leaf-dk); font-weight:600; } | |
| </style></head><body><div class="board"> | |
| <div class="grain"></div> | |
| <div class="layer"> | |
| <div class="topbar"> | |
| <div class="col"> | |
| <div class="brand"> | |
| samo<b>grow</b> | |
| <svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="#35722f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| <path d="M3 17c0-6 4.5-11 13-12 .6 5.5-3 12-13 12Z"></path> | |
| <path d="M3 17c3-3.5 6-5.6 10-7"></path> | |
| </svg> | |
| </div> | |
| <nav class="nav"> | |
| <a href="#">Architecture</a> | |
| <a href="#">Cost</a> | |
| <a href="#">Features</a> | |
| <a href="#">Quickstart</a> | |
| <a class="gh" href="#"> | |
| <svg width="13" height="13" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| <circle cx="6" cy="4.5" r="2.2"></circle> | |
| <circle cx="6" cy="15.5" r="2.2"></circle> | |
| <circle cx="14.5" cy="7.5" r="2.2"></circle> | |
| <path d="M6 6.7v6.6"></path> | |
| <path d="M14.5 9.7c0 2.6-2.4 3.2-4.6 3.6"></path> | |
| </svg> | |
| GitHub | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| <div class="hero"> | |
| <div class="col hgrid"> | |
| <div class="lead"> | |
| <div class="eyebrow">A service you can read · open source · it feeds you</div> | |
| <h1>Give the machine you already leave on <em>one more job.</em></h1> | |
| <p class="lede"> | |
| samogrow runs a <b>herb garden</b> from a camera, two smart plugs, and a Claude | |
| API key — open source (MIT), no pods, no subscription. | |
| </p> | |
| <div class="cmd"> | |
| <div class="cmd-head"> | |
| <span class="cmd-tag">Try the whole loop — zero hardware</span> | |
| <span class="copy"> | |
| <svg width="11" height="11" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| <rect x="7" y="7" width="10" height="10" rx="1.5"></rect> | |
| <path d="M13 4H4.5A1.5 1.5 0 0 0 3 5.5V14"></path> | |
| </svg> | |
| Copy | |
| </span> | |
| </div> | |
| <div class="cmd-body"> | |
| <div class="cmd-line"><span class="p">$</span><span>git clone github.com/NikolayS/samogrow</span></div> | |
| <div class="cmd-line"><span class="p">$</span><span><span class="env">SAMOGROW_MOCK=1</span> bun run src/main.ts</span></div> | |
| </div> | |
| <div class="cmd-foot">real Claude call · real Telegram push · against a sample photo</div> | |
| </div> | |
| <div class="btns"> | |
| <a class="btn btn-solid" href="#"> | |
| <svg width="14" height="14" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| <circle cx="6" cy="4.5" r="2.2"></circle> | |
| <circle cx="6" cy="15.5" r="2.2"></circle> | |
| <circle cx="14.5" cy="7.5" r="2.2"></circle> | |
| <path d="M6 6.7v6.6"></path> | |
| <path d="M14.5 9.7c0 2.6-2.4 3.2-4.6 3.6"></path> | |
| </svg> | |
| Get the code | |
| </a> | |
| <a class="btn btn-ghost" href="#">Quickstart →</a> | |
| <a class="btn-text" href="#">Read the spec</a> | |
| </div> | |
| <div class="trust"> | |
| <span><b>MIT</b> licensed</span><span class="dot">·</span> | |
| <span><b>108</b> tests, CI green</span><span class="dot">·</span> | |
| <span>No soldering, no Pi</span><span class="dot">·</span> | |
| <span><b>$0</b> subscription</span> | |
| </div> | |
| </div> | |
| <div class="side"> | |
| <figure style="margin:0"> | |
| <div class="illo"> | |
| <svg viewBox="0 0 480 300" role="img" aria-label="Field-guide line drawing of the samogrow build: a T5 light bar over a DWC tote of herbs in net cups, a top-up jug and pump, an air pump, a Wi-Fi camera watching the canopy, and a smart plug strip."> | |
| <g stroke="#1c2216" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M182 26v14M258 26v14"></path> | |
| <rect x="150" y="40" width="140" height="13" rx="3" fill="#f6efdb"></rect> | |
| <path d="M162 47h116" stroke="#a8632a" stroke-width="1.2" stroke-dasharray="3 5"></path> | |
| <path d="M168 62v9M192 62v13M216 62v9M240 62v13M264 62v9" stroke="#4a9640" stroke-width="1.1" opacity=".75"></path> | |
| <path d="M186 150c-8-13-3-25 6-30 3 11 2 22-6 30Z" fill="rgba(53,114,47,.18)"></path> | |
| <path d="M186 150c5-12 12-18 22-19-4 10-11 17-22 19Z" fill="rgba(53,114,47,.12)"></path> | |
| <path d="M216 152c-9-15-4-27 5-33 4 13 3 24-5 33Z" fill="rgba(53,114,47,.18)"></path> | |
| <path d="M216 152c6-11 13-16 23-17-5 10-12 16-23 17Z" fill="rgba(53,114,47,.12)"></path> | |
| <path d="M246 150c-8-12-3-24 6-29 3 11 2 21-6 29Z" fill="rgba(53,114,47,.18)"></path> | |
| <path d="M156 152c-7-11-2-21 6-25 2 9 1 18-6 25Z" fill="rgba(53,114,47,.15)"></path> | |
| <path d="M276 152c-7-11-2-21 6-25 2 9 1 18-6 25Z" fill="rgba(53,114,47,.15)"></path> | |
| <rect x="140" y="152" width="200" height="14" rx="2" fill="#efe7d2"></rect> | |
| <circle cx="156" cy="159" r="5" fill="#faf7ee"></circle> | |
| <circle cx="186" cy="159" r="5" fill="#faf7ee"></circle> | |
| <circle cx="216" cy="159" r="5" fill="#faf7ee"></circle> | |
| <circle cx="246" cy="159" r="5" fill="#faf7ee"></circle> | |
| <circle cx="276" cy="159" r="5" fill="#faf7ee"></circle> | |
| <path d="M146 166h188l-11 66H157Z" fill="rgba(53,114,47,.20)"></path> | |
| <path d="M156 200h168" stroke="#4a9640" stroke-width="1.1" stroke-dasharray="4 6"></path> | |
| <path d="M40 168h44v56H40Z" fill="rgba(74,150,64,.12)"></path> | |
| <path d="M52 168v-9h20v9" fill="none"></path> | |
| <path d="M84 178c9 0 9 10 0 10" fill="none"></path> | |
| <path d="M84 210c22 0 26-14 46-16" stroke="#a8632a" stroke-width="1.3"></path> | |
| <rect x="46" y="228" width="26" height="14" rx="2" fill="#e7dfc8"></rect> | |
| <rect x="36" y="256" width="44" height="24" rx="3" fill="#e7dfc8"></rect> | |
| <path d="M80 264c26 2 40 6 62 14" stroke="#4a9640" stroke-width="1.2" stroke-dasharray="4 5"></path> | |
| <path d="M46 264h6M58 264h6"></path> | |
| <rect x="392" y="112" width="34" height="24" rx="4" fill="#e7dfc8"></rect> | |
| <circle cx="409" cy="124" r="6.5" fill="#faf7ee"></circle> | |
| <circle cx="409" cy="124" r="2.2" fill="#1c2216" stroke="none"></circle> | |
| <path d="M409 136v22M398 158h22"></path> | |
| <path d="M392 128c-30 6-58 14-84 22" stroke="#a8632a" stroke-width="1.2" stroke-dasharray="3 5"></path> | |
| <rect x="330" y="248" width="112" height="30" rx="4" fill="#e7dfc8"></rect> | |
| <rect x="342" y="256" width="18" height="14" rx="2" fill="#faf7ee"></rect> | |
| <rect x="368" y="256" width="18" height="14" rx="2" fill="#faf7ee"></rect> | |
| <rect x="394" y="256" width="18" height="14" rx="2" fill="#faf7ee"></rect> | |
| <path d="M330 263c-24 0-36-10-52-18" stroke="#a8632a" stroke-width="1.2" stroke-dasharray="3 5"></path> | |
| </g> | |
| <g font-family="ui-monospace, Menlo, monospace" font-size="10" fill="#a8632a" letter-spacing=".08em"> | |
| <text x="330" y="106">SEES</text> | |
| <text x="298" y="292">SWITCHES</text> | |
| </g> | |
| </svg> | |
| </div> | |
| <figcaption class="cap">The build, illustrated — real photos replace this once the first unit is assembled.</figcaption> | |
| </figure> | |
| <aside class="glance"> | |
| <span class="eyebrow">At a glance</span> | |
| <div class="grow"><span>All-in hardware</span><span class="hi">~$255 – $335</span></div> | |
| <div class="grow"><span>Recurring</span><span>$3–7/mo API · ~$35/yr</span></div> | |
| <div class="grow"><span>Vendor subscription</span><span class="hi">none</span></div> | |
| <div class="grow"><span>Source</span><span class="hi">MIT · 108 tests · CI</span></div> | |
| <div class="grow"><span>Dry run</span><span class="hi">mock mode, 0 hardware</span></div> | |
| </aside> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div></body></html>"></iframe></div> | |
| </section> | |
| <section class="sheet"> | |
| <div class="meta"> | |
| <span class="idx">02</span> | |
| <h2>Section rail + nav</h2> | |
| <span class="dim">1200 × 725</span> | |
| <div class="note"><b>SECTION RAIL + NAV</b><p>Sticky section identity plus a scroll-spy — the answer to a 15.7-screen page whose mobile nav is display:none.</p><p>Intro measure goes from 503px to the full 824px content column, so sections stop opening half-empty.</p></div> | |
| </div> | |
| <div class="stage"><iframe title="Section rail + nav" width="1200" height="725" scrolling="no" sandbox="allow-same-origin" srcdoc="<!doctype html><html><head><meta charset="utf-8"><title>Section rail + nav</title><style>html,body{margin:0;padding:0;background:#f2ede0}</style><style> | |
| :root { | |
| --paper:#f2ede0; --paper-2:#ebe4d2; --card:#f7f3e8; | |
| --ink:#1c2216; --ink-soft:#4a5340; --ink-faint:#636b59; | |
| --line:#cdc4ac; --line-soft:#ddd5bf; | |
| --leaf:#35722f; --leaf-dk:#2b5c26; --leaf-br:#4a9640; --leaf-lit:#8fd67f; | |
| --soil:#a8632a; | |
| --slab:#1c2216; --slab-ink:#e9e7d7; --slab-line:#2f3826; --slab-soft:#8b9380; | |
| --serif:Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif; | |
| --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; | |
| } | |
| * { box-sizing:border-box; } | |
| body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif); } | |
| a { color:var(--leaf-dk); text-decoration-color:var(--line); text-underline-offset:3px; } | |
| a:hover { color:var(--leaf); text-decoration-color:var(--leaf); } | |
| .board { width:1200px; height:725px; position:relative; overflow:hidden; background:var(--paper); } | |
| .grain { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.045; mix-blend-mode:multiply; | |
| background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } | |
| .layer { position:relative; z-index:1; } | |
| .col { width:1080px; margin:0 auto; } | |
| .topbar { height:54px; border-bottom:1px solid var(--line); display:flex; align-items:center; | |
| background:color-mix(in srgb, var(--paper) 88%, transparent); } | |
| .topbar .col { display:flex; align-items:center; justify-content:space-between; } | |
| .brand { font-family:var(--serif); font-size:19px; display:flex; align-items:center; gap:7px; } | |
| .brand b { color:var(--leaf); font-weight:700; } | |
| .nav { display:flex; align-items:center; gap:20px; font-family:var(--mono); font-size:11.5px; | |
| letter-spacing:.16em; text-transform:uppercase; } | |
| .nav a { color:var(--ink-soft); text-decoration:none; padding-bottom:3px; border-bottom:2px solid transparent; } | |
| .nav a.on { color:var(--leaf); border-bottom-color:var(--leaf); font-weight:600; } | |
| .nav a.gh { display:inline-flex; align-items:center; gap:7px; background:var(--leaf); border:1px solid var(--leaf); | |
| color:var(--paper); padding:7px 12px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; | |
| text-transform:uppercase; text-decoration:none; border-bottom:1px solid var(--leaf); } | |
| .sec { display:grid; grid-template-columns:168px 1fr; gap:40px; padding:44px 0 40px; } | |
| .sec + .sec { border-top:1px solid var(--line); } | |
| .rail { position:relative; } | |
| .rail::after { content:""; position:absolute; top:4px; right:-20px; bottom:0; width:1px; background:var(--line-soft); } | |
| .rail .num { font-family:var(--mono); font-size:13px; font-weight:600; color:var(--leaf); letter-spacing:.14em; } | |
| .rail h2 { font-family:var(--serif); font-weight:400; font-size:34px; line-height:1.05; letter-spacing:-.018em; | |
| margin:10px 0 0; text-wrap:balance; } | |
| .spy { margin:26px 0 0; padding:0; list-style:none; display:grid; gap:0; } | |
| .spy li { position:relative; padding:7px 0 7px 18px; font-family:var(--mono); font-size:12px; | |
| letter-spacing:.04em; color:var(--ink-faint); } | |
| .spy li::before { content:""; position:absolute; left:0; top:12px; width:7px; height:7px; border-radius:50%; | |
| border:1px solid var(--line); background:var(--paper); } | |
| .spy li.on { color:var(--leaf); font-weight:600; } | |
| .spy li.on::before { background:var(--leaf); border-color:var(--leaf); } | |
| .spy li.done { color:var(--ink-soft); } | |
| .spy li.done::before { background:var(--line); border-color:var(--line); } | |
| .intro { font-size:18px; line-height:1.62; color:var(--ink-soft); margin:6px 0 0; max-width:74ch; text-wrap:pretty; } | |
| .intro b { color:var(--ink); font-weight:400; } | |
| code { font-family:var(--mono); font-size:.84em; background:color-mix(in srgb, var(--leaf) 10%, transparent); | |
| border:1px solid var(--line); border-radius:4px; padding:.08em .4em; overflow-wrap:anywhere; } | |
| .cards { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin-top:28px; } | |
| .kcard { border:1px solid var(--line); background:var(--card); padding:18px 18px 20px; min-width:0; | |
| box-shadow:0 14px 34px -30px rgba(28,34,22,.35); } | |
| .kcard .ic { color:var(--leaf); display:block; margin-bottom:12px; } | |
| .kcard .lbl { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; | |
| color:var(--ink-faint); display:block; } | |
| .kcard h3 { font-family:var(--serif); font-weight:400; font-size:20px; margin:7px 0 8px; } | |
| .kcard p { margin:0; font-size:14.5px; line-height:1.55; color:var(--ink-soft); } | |
| .kcard.slab { background:var(--slab); border-color:var(--slab-line); } | |
| .kcard.slab .ic { color:var(--leaf-lit); } | |
| .kcard.slab .lbl { color:var(--slab-soft); } | |
| .kcard.slab h3 { color:var(--slab-ink); font-family:var(--mono); font-size:15px; letter-spacing:.02em; } | |
| .kcard.slab p { color:var(--slab-soft); font-family:var(--mono); font-size:12.5px; line-height:1.6; } | |
| .measure { display:flex; align-items:center; gap:10px; margin-top:26px; font-family:var(--mono); | |
| font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); } | |
| .measure .bar { height:1px; background:var(--soil); flex:1; max-width:824px; } | |
| </style></head><body><div class="board"> | |
| <div class="grain"></div> | |
| <div class="layer"> | |
| <div class="topbar"> | |
| <div class="col"> | |
| <div class="brand"> | |
| samo<b>grow</b> | |
| <svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="#35722f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| <path d="M3 17c0-6 4.5-11 13-12 .6 5.5-3 12-13 12Z"></path> | |
| <path d="M3 17c3-3.5 6-5.6 10-7"></path> | |
| </svg> | |
| </div> | |
| <nav class="nav"> | |
| <a class="on" href="#">Architecture</a> | |
| <a href="#">Cost</a> | |
| <a href="#">Features</a> | |
| <a href="#">Quickstart</a> | |
| <a class="gh" href="#"> | |
| <svg width="13" height="13" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| <circle cx="6" cy="4.5" r="2.2"></circle><circle cx="6" cy="15.5" r="2.2"></circle> | |
| <circle cx="14.5" cy="7.5" r="2.2"></circle><path d="M6 6.7v6.6"></path> | |
| <path d="M14.5 9.7c0 2.6-2.4 3.2-4.6 3.6"></path> | |
| </svg> | |
| GitHub | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <section class="sec"> | |
| <div class="rail"> | |
| <span class="num">01</span> | |
| <h2>How it works</h2> | |
| <ul class="spy"> | |
| <li class="on">How it works</li> | |
| <li>What it costs</li> | |
| <li>Key features</li> | |
| <li>Quickstart</li> | |
| <li>The genre is real</li> | |
| </ul> | |
| </div> | |
| <div class="body"> | |
| <p class="intro"> | |
| The garden is three off-the-shelf Wi-Fi gadgets — two smart plugs and a camera — with | |
| nothing to maintain. The brain is <b>nombox</b>, a small TypeScript/Bun service | |
| (<code>@anthropic-ai/sdk</code> for vision, <code>grammY</code> for Telegram, everything in one | |
| <code>config.json</code>) that runs on a machine you already leave on. | |
| </p> | |
| <div class="cards"> | |
| <div class="kcard slab"> | |
| <span class="ic"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| <rect x="3" y="5" width="18" height="12" rx="2"></rect> | |
| <path d="M2 20h20"></path><path d="M8 9h8M8 13h5"></path> | |
| </svg> | |
| </span> | |
| <span class="lbl">The brain</span> | |
| <h3>nombox service</h3> | |
| <p>Pulls the snapshot, calls Claude, switches the plugs, runs the Telegram bot. The only thing you maintain.</p> | |
| </div> | |
| <div class="kcard slab"> | |
| <span class="ic"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| <path d="M6.5 18a4 4 0 0 1 0-8 5.5 5.5 0 0 1 10.6-1.6A3.9 3.9 0 0 1 18.5 18Z"></path> | |
| <path d="M9.5 13.5h5"></path> | |
| </svg> | |
| </span> | |
| <span class="lbl">Cloud</span> | |
| <h3>Claude &amp; Telegram</h3> | |
| <p>Only the still image leaves your network. The camera is local RTSP — no cloud camera account.</p> | |
| </div> | |
| <div class="kcard"> | |
| <span class="ic"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| <path d="M12 4v3M5.5 6.5l2 2M18.5 6.5l-2 2"></path> | |
| <rect x="6" y="10" width="12" height="4" rx="1.5"></rect> | |
| <path d="M8 17v2M12 17v3M16 17v2"></path> | |
| </svg> | |
| </span> | |
| <span class="lbl">The appliances</span> | |
| <h3>Three Wi-Fi gadgets</h3> | |
| <p>Two Kasa smart plugs and a Tapo camera. Nothing to flash, nothing to solder, no GPIO.</p> | |
| </div> | |
| </div> | |
| <div class="measure"> | |
| <span>Intro measure — 74ch across the full content column</span> | |
| <span class="bar"></span> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="sec"> | |
| <div class="rail"> | |
| <span class="num">02</span> | |
| <h2>What it costs</h2> | |
| </div> | |
| <div class="body"> | |
| <p class="intro"> | |
| One price frame: <b>~$255</b> for the manual build, <b>~$280</b> for the automated core, up to | |
| <b>~$335</b> with the water-safety add-ons — the same one-time bracket as the <i>no-AI</i> | |
| countertop units. | |
| </p> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| </div></body></html>"></iframe></div> | |
| </section> | |
| <section class="sheet"> | |
| <div class="meta"> | |
| <span class="idx">03</span> | |
| <h2>Console + safety</h2> | |
| <span class="dim">1200 × 800</span> | |
| <div class="note"><b>TWO VOICES IN ONE FRAME</b><p>The machine speaks in mono on a dark slab: loop, plug state, safety caps, JSON verdict.</p><p>The human-facing Senses note stays warm serif — and left-aligned, replacing 92 words of centred prose.</p><p>All 8 emoji icons are drawn on a 20px / 1.5px stroke grid.</p></div> | |
| </div> | |
| <div class="stage"><iframe title="Console + safety" width="1200" height="800" scrolling="no" sandbox="allow-same-origin" srcdoc="<!doctype html><html><head><meta charset="utf-8"><title>Console + safety</title><style>html,body{margin:0;padding:0;background:#f2ede0}</style><style> | |
| :root { | |
| --paper:#f2ede0; --paper-2:#ebe4d2; --card:#f7f3e8; | |
| --ink:#1c2216; --ink-soft:#4a5340; --ink-faint:#636b59; | |
| --line:#cdc4ac; --line-soft:#ddd5bf; | |
| --leaf:#35722f; --leaf-dk:#2b5c26; --leaf-br:#4a9640; --leaf-lit:#8fd67f; | |
| --soil:#a8632a; --amber:#d9c98d; | |
| --slab:#1c2216; --slab-ink:#e9e7d7; --slab-line:#2f3826; --slab-soft:#8b9380; | |
| --serif:Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif; | |
| --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; | |
| } | |
| * { box-sizing:border-box; } | |
| body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif); } | |
| a { color:var(--leaf-dk); text-decoration-color:var(--line); text-underline-offset:3px; } | |
| a:hover { color:var(--leaf); text-decoration-color:var(--leaf); } | |
| .board { width:1200px; height:800px; position:relative; overflow:hidden; background:var(--paper); padding:40px 60px; } | |
| .grain { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.045; mix-blend-mode:multiply; | |
| background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } | |
| .layer { position:relative; z-index:1; } | |
| .head { display:flex; align-items:baseline; gap:14px; margin-bottom:8px; } | |
| .head .num { font-family:var(--mono); font-size:13px; font-weight:600; color:var(--leaf); letter-spacing:.14em; } | |
| .head h2 { font-family:var(--serif); font-weight:400; font-size:30px; margin:0; letter-spacing:-.018em; } | |
| .head .voice { margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:.16em; | |
| text-transform:uppercase; color:var(--ink-faint); } | |
| .panel { background:var(--slab); border:1px solid var(--slab-line); margin-top:22px; } | |
| .panel-head { display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--slab-line); } | |
| .panel-head .tag { font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; | |
| color:var(--leaf-lit); font-weight:600; } | |
| .panel-head .meta { margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--slab-soft); letter-spacing:.04em; } | |
| .pulse { width:7px; height:7px; border-radius:50%; background:var(--leaf-lit); flex:none; } | |
| .loop { display:grid; grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr; align-items:stretch; padding:20px 16px; } | |
| .step { min-width:0; } | |
| .step .ic { color:var(--leaf-lit); display:block; margin-bottom:9px; } | |
| .step .n { font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; color:var(--slab-soft); display:block; } | |
| .step h3 { font-family:var(--mono); font-size:14px; font-weight:600; color:var(--slab-ink); margin:6px 0 6px; | |
| letter-spacing:.02em; } | |
| .step p { margin:0; font-family:var(--mono); font-size:11.5px; line-height:1.6; color:var(--slab-soft); } | |
| .arrow { display:flex; align-items:center; justify-content:center; color:#4a5340; } | |
| .states { display:flex; gap:0; border-top:1px solid var(--slab-line); } | |
| .state { flex:1; display:flex; align-items:center; gap:10px; padding:13px 16px; | |
| border-right:1px solid var(--slab-line); min-width:0; } | |
| .state:last-child { border-right:0; } | |
| .state .ic { color:var(--slab-soft); flex:none; } | |
| .state .nm { font-family:var(--mono); font-size:12px; color:var(--slab-ink); } | |
| .chip { margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; | |
| padding:3px 8px; border:1px solid currentColor; flex:none; } | |
| .chip.on { color:var(--leaf-lit); } | |
| .chip.off { color:var(--slab-soft); } | |
| .grid2 { display:grid; grid-template-columns:1.18fr 1fr; gap:26px; margin-top:26px; align-items:start; } | |
| .caps { background:var(--slab); border:1px solid var(--slab-line); min-width:0; } | |
| .caps .said { padding:15px 16px; font-family:var(--mono); font-size:13px; line-height:1.6; color:var(--slab-ink); | |
| border-bottom:1px solid var(--slab-line); } | |
| .caps .said b { color:var(--leaf-lit); font-weight:600; } | |
| .caprow { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:10px 16px; | |
| border-bottom:1px solid var(--slab-line); font-family:var(--mono); font-size:12px; color:var(--slab-soft); } | |
| .caprow .v { color:var(--slab-ink); text-align:right; } | |
| .caprow .ph { color:var(--amber); border:1px dashed #55502f; padding:1px 6px; font-size:11px; } | |
| .caps .foot { padding:11px 16px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; | |
| text-transform:uppercase; color:var(--leaf-lit); } | |
| .json { margin-top:0; } | |
| .json pre { margin:0; padding:15px 16px; font-family:var(--mono); font-size:12.5px; line-height:1.75; | |
| color:var(--slab-soft); white-space:pre-wrap; overflow-wrap:anywhere; } | |
| .json .k { color:var(--leaf-lit); } | |
| .json .t { color:var(--amber); } | |
| .aside { border:1px solid var(--line); background:var(--card); padding:22px 24px 24px; min-width:0; | |
| box-shadow:0 18px 40px -30px rgba(28,34,22,.35); } | |
| .aside .eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; | |
| color:var(--leaf); font-weight:600; display:block; } | |
| .aside h3 { font-family:var(--serif); font-weight:400; font-size:23px; line-height:1.2; margin:10px 0 10px; | |
| letter-spacing:-.012em; } | |
| .aside p { margin:0 0 14px; font-size:16px; line-height:1.6; color:var(--ink-soft); text-align:left; text-wrap:pretty; } | |
| .aside p b { color:var(--ink); font-weight:400; font-style:italic; } | |
| .warn { display:flex; gap:12px; border-top:1px solid var(--line); padding-top:15px; margin-top:4px; } | |
| .warn .ic { color:var(--soil); flex:none; } | |
| .warn p { margin:0; font-size:14.5px; line-height:1.55; color:var(--ink); } | |
| .warn .x10 { font-family:var(--mono); font-size:.86em; border:1px solid var(--soil); padding:.05em .4em; | |
| color:var(--ink); white-space:nowrap; } | |
| </style></head><body><div class="board"> | |
| <div class="grain"></div> | |
| <div class="layer"> | |
| <div class="head"> | |
| <span class="num">01</span> | |
| <h2>How it works</h2> | |
| <span class="voice">Console voice — the machine speaks in mono</span> | |
| </div> | |
| <div class="panel"> | |
| <div class="panel-head"> | |
| <span class="pulse"></span> | |
| <span class="tag">Control loop</span> | |
| <span class="meta">runs every N minutes during light hours</span> | |
| </div> | |
| <div class="loop"> | |
| <div class="step"> | |
| <span class="ic"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| <rect x="3" y="6" width="18" height="13" rx="2"></rect> | |
| <path d="M8 6l1.6-2.4h4.8L16 6"></path><circle cx="12" cy="12.5" r="3.4"></circle> | |
| </svg> | |
| </span> | |
| <span class="n">STEP 01</span> | |
| <h3>snapshot</h3> | |
| <p>local RTSP still<br>no cloud camera account</p> | |
| </div> | |
| <div class="arrow"> | |
| <svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10h11M11 6l4 4-4 4"></path></svg> | |
| </div> | |
| <div class="step"> | |
| <span class="ic"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| <circle cx="11" cy="11" r="6"></circle><path d="M15.5 15.5L20 20"></path><path d="M8.6 11h4.8M11 8.6v4.8"></path> | |
| </svg> | |
| </span> | |
| <span class="n">STEP 02</span> | |
| <h3>analyze</h3> | |
| <p>claude haiku vision<br>returns typed JSON</p> | |
| </div> | |
| <div class="arrow"> | |
| <svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10h11M11 6l4 4-4 4"></path></svg> | |
| </div> | |
| <div class="step"> | |
| <span class="ic"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| <rect x="5" y="8" width="14" height="11" rx="2"></rect> | |
| <path d="M9 8V5.5M15 8V5.5"></path><path d="M10 13h4"></path> | |
| </svg> | |
| </span> | |
| <span class="n">STEP 03</span> | |
| <h3>act</h3> | |
| <p>kasa plugs switched<br>within fixed caps</p> | |
| </div> | |
| <div class="arrow"> | |
| <svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10h11M11 6l4 4-4 4"></path></svg> | |
| </div> | |
| <div class="step"> | |
| <span class="ic"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| <path d="M4 6.5h16v11H8l-4 3.5Z"></path><path d="M8 11h8M8 14h5"></path> | |
| </svg> | |
| </span> | |
| <span class="n">STEP 04</span> | |
| <h3>report</h3> | |
| <p>telegram digest<br>alerts + your commands</p> | |
| </div> | |
| </div> | |
| <div class="states"> | |
| <div class="state"> | |
| <span class="ic"> | |
| <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| <path d="M12 3v2.5M5.6 6.6l1.8 1.8M18.4 6.6l-1.8 1.8"></path> | |
| <rect x="6" y="10" width="12" height="4" rx="1.5"></rect><path d="M9 17v2M15 17v2"></path> | |
| </svg> | |
| </span> | |
| <span class="nm">grow light</span><span class="chip on">on</span> | |
| </div> | |
| <div class="state"> | |
| <span class="ic"> | |
| <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| <path d="M12 3.5c3.6 4.3 5.5 7.2 5.5 9.6a5.5 5.5 0 0 1-11 0c0-2.4 1.9-5.3 5.5-9.6Z"></path> | |
| </svg> | |
| </span> | |
| <span class="nm">top-up pump</span><span class="chip off">off</span> | |
| </div> | |
| <div class="state"> | |
| <span class="ic"> | |
| <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| <circle cx="8" cy="15" r="3"></circle><circle cx="15" cy="11" r="2.2"></circle><circle cx="17.5" cy="17" r="1.6"></circle> | |
| </svg> | |
| </span> | |
| <span class="nm">air pump</span><span class="chip on">24/7</span> | |
| </div> | |
| <div class="state"> | |
| <span class="ic"> | |
| <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| <rect x="3" y="6" width="18" height="13" rx="2"></rect><circle cx="12" cy="12.5" r="3.4"></circle> | |
| </svg> | |
| </span> | |
| <span class="nm">tapo camera</span><span class="chip on">rtsp</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid2"> | |
| <div class="caps"> | |
| <div class="said">The AI can request water; <b>it cannot override the cap.</b></div> | |
| <div class="caprow"><span>per-run pump cap</span><span class="v"><span class="ph">SET IN config.json</span></span></div> | |
| <div class="caprow"><span>per-day pump cap</span><span class="v"><span class="ph">SET IN config.json</span></span></div> | |
| <div class="caprow"><span>top-up jug (bounds worst-case spill)</span><span class="v">1–2 gal</span></div> | |
| <div class="caprow"><span>float / leak sensor</span><span class="v">optional</span></div> | |
| <div class="json"> | |
| <pre><span class="k">verdict</span> { | |
| <span class="k">water</span>: <span class="t">bool</span>, | |
| <span class="k">light_hours</span>: <span class="t">int</span>, | |
| <span class="k">pots</span>: [<span class="t">{ id, health }</span>], | |
| <span class="k">confidence</span>: <span class="t">0–1</span> | |
| }</pre> | |
| </div> | |
| <div class="foot">Enforced in code, not by the model</div> | |
| </div> | |
| <aside class="aside"> | |
| <span class="eyebrow">Senses</span> | |
| <h3>The camera is the only automatic sensor</h3> | |
| <p> | |
| The EC/TDS meter and pH kit are <b>handheld manual tools</b>: you dip and read them | |
| yourself, and the AI only learns a value when you type it into Telegram. | |
| </p> | |
| <div class="warn"> | |
| <span class="ic"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| <path d="M12 4.5 21 19.5H3Z"></path><path d="M12 10v4"></path><path d="M12 16.8v.2"></path> | |
| </svg> | |
| </span> | |
| <p> | |
| One gotcha with cheap TDS pens: the <span class="x10">×10</span> multiplier. | |
| “115 ×10” means 1,150 ppm — missing it burned our first plants. | |
| Target <b>80–110 with ×10 lit.</b> | |
| </p> | |
| </div> | |
| </aside> | |
| </div> | |
| </div> | |
| </div></body></html>"></iframe></div> | |
| </section> | |
| <section class="sheet"> | |
| <div class="meta"> | |
| <span class="idx">04</span> | |
| <h2>Cost comparison</h2> | |
| <span class="dim">1200 × 710</span> | |
| <div class="note"><b>COST</b><p>The TCO table becomes a bar chart with samogrow anchored and direct-labelled. The AI column stays, so the cheaper no-AI Auk is not quietly hidden.</p><p>The tier selector is live — click A / B / C and the stack total follows.</p></div> | |
| </div> | |
| <div class="stage"><iframe title="Cost comparison" width="1200" height="710" scrolling="no" sandbox="allow-same-origin" srcdoc="<!doctype html><html><head><meta charset="utf-8"><title>Cost comparison</title><style>html,body{margin:0;padding:0;background:#f2ede0}</style><style> | |
| :root { | |
| --paper:#f2ede0; --paper-2:#ebe4d2; --card:#f7f3e8; | |
| --ink:#1c2216; --ink-soft:#4a5340; --ink-faint:#636b59; | |
| --line:#cdc4ac; --line-soft:#ddd5bf; | |
| --leaf:#35722f; --leaf-dk:#2b5c26; --leaf-br:#4a9640; --leaf-lit:#8fd67f; | |
| --soil:#a8632a; --neutral:#a79e84; | |
| --slab:#1c2216; --slab-ink:#e9e7d7; --slab-line:#2f3826; --slab-soft:#8b9380; | |
| --serif:Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif; | |
| --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; | |
| } | |
| * { box-sizing:border-box; } | |
| body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif); } | |
| a { color:var(--leaf-dk); text-decoration-color:var(--line); text-underline-offset:3px; } | |
| a:hover { color:var(--leaf); text-decoration-color:var(--leaf); } | |
| .board { width:1200px; height:710px; position:relative; overflow:hidden; background:var(--paper); padding:40px 60px; } | |
| .grain { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.045; mix-blend-mode:multiply; | |
| background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } | |
| .layer { position:relative; z-index:1; } | |
| .head { display:flex; align-items:baseline; gap:14px; } | |
| .head .num { font-family:var(--mono); font-size:13px; font-weight:600; color:var(--leaf); letter-spacing:.14em; } | |
| .head h2 { font-family:var(--serif); font-weight:400; font-size:30px; margin:0; letter-spacing:-.018em; } | |
| .head .voice { margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:.16em; | |
| text-transform:uppercase; color:var(--ink-faint); } | |
| .grid { display:grid; grid-template-columns:398px 1fr; gap:44px; margin-top:26px; align-items:start; } | |
| .eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; | |
| color:var(--leaf); font-weight:600; display:block; margin-bottom:12px; } | |
| .tiers { display:grid; gap:8px; margin:0 0 22px; } | |
| .tier { display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer; | |
| border:1px solid var(--line); background:var(--card); padding:12px 14px; font-family:var(--mono); | |
| color:var(--ink-soft); font-size:12.5px; } | |
| .tier .nm { display:block; color:var(--ink); font-size:13px; } | |
| .tier .sub { display:block; font-size:11px; color:var(--ink-faint); margin-top:3px; } | |
| .tier .amt { margin-left:auto; font-size:14px; color:var(--ink); white-space:nowrap; } | |
| .tier .tick { width:16px; flex:none; color:var(--leaf); } | |
| .tier.on { border-color:var(--leaf); background:color-mix(in srgb, var(--leaf) 9%, var(--card)); } | |
| .tier.on .nm, .tier.on .amt { color:var(--leaf-dk); font-weight:600; } | |
| .stack { border:1px solid var(--slab-line); background:var(--slab); } | |
| .line { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:13px 16px; | |
| border-bottom:1px solid var(--slab-line); font-family:var(--mono); font-size:12.5px; color:var(--slab-soft); } | |
| .line .lbl { color:var(--slab-ink); } | |
| .line small { display:block; font-size:10.5px; color:var(--slab-soft); margin-top:4px; letter-spacing:.02em; } | |
| .line .amt { color:var(--slab-ink); font-size:14px; white-space:nowrap; } | |
| .line.total { background:var(--leaf); border-bottom:0; padding:16px; } | |
| .line.total .lbl { color:var(--paper); font-size:11px; letter-spacing:.16em; text-transform:uppercase; } | |
| .line.total .amt { color:var(--paper); font-size:22px; font-weight:600; } | |
| .chart { margin-top:2px; } | |
| .crow { display:grid; grid-template-columns:126px 1fr 76px 62px; align-items:center; gap:14px; | |
| padding:9px 8px; } | |
| .crow.us { background:color-mix(in srgb, var(--leaf) 12%, transparent); } | |
| .clab { font-family:var(--mono); font-size:12px; color:var(--ink-soft); } | |
| .crow.us .clab { color:var(--leaf-dk); font-weight:600; } | |
| .ctrack { min-width:0; display:flex; } | |
| .cbar { height:20px; background:var(--neutral); border-radius:0 4px 4px 0; flex:none; } | |
| .crow.us .cbar { background:var(--leaf); } | |
| .cval { font-family:var(--mono); font-size:13px; color:var(--ink); text-align:right; } | |
| .crow.us .cval { color:var(--leaf-dk); font-weight:600; } | |
| .cai { display:flex; align-items:center; gap:5px; font-family:var(--mono); font-size:11px; | |
| letter-spacing:.06em; color:var(--ink-faint); } | |
| .cai.yes { color:var(--leaf-dk); } | |
| .caxis { display:grid; grid-template-columns:126px 1fr 76px 62px; gap:14px; margin:2px 8px 0; } | |
| .caxis .scale { display:flex; justify-content:space-between; border-top:1px solid var(--line); | |
| padding-top:7px; font-family:var(--mono); font-size:11px; color:var(--ink-faint); } | |
| .caxis .cap { grid-column:3 / span 2; padding-top:7px; text-align:right; | |
| font-family:var(--mono); font-size:11px; color:var(--ink-faint); } | |
| .callout { display:flex; gap:14px; align-items:flex-start; border-left:3px solid var(--leaf); | |
| padding:14px 0 14px 16px; margin-top:20px; } | |
| .callout .big { font-family:var(--serif); font-size:30px; color:var(--leaf-dk); line-height:1; white-space:nowrap; } | |
| .callout p { margin:0; font-size:15px; line-height:1.5; color:var(--ink-soft); text-wrap:pretty; } | |
| .callout p b { color:var(--ink); font-weight:400; font-style:italic; } | |
| .ongoing { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; margin-top:22px; } | |
| .ongoing div { border-top:2px solid var(--soil); padding-top:10px; min-width:0; } | |
| .ongoing .big { font-family:var(--serif); font-size:26px; color:var(--ink); display:block; line-height:1.1; } | |
| .ongoing small { font-family:var(--mono); font-size:11px; color:var(--ink-faint); line-height:1.55; | |
| display:block; margin-top:5px; } | |
| .fine { font-family:var(--mono); font-size:11px; color:var(--ink-faint); line-height:1.6; margin:18px 0 0; } | |
| .note { font-size:15px; line-height:1.55; color:var(--ink-soft); margin:16px 0 0; text-wrap:pretty; } | |
| .note b { color:var(--ink); font-weight:400; font-style:italic; } | |
| </style></head><body><div class="board"> | |
| <div class="grain"></div> | |
| <div class="layer"> | |
| <div class="head"> | |
| <span class="num">02</span> | |
| <h2>What it costs</h2> | |
| <span class="voice">Console voice — numbers are tabular</span> | |
| </div> | |
| <div class="grid"> | |
| <div> | |
| <span class="eyebrow">Build it in tiers</span> | |
| <div class="tiers"> | |
| <button class="tier"><span><span class="nm">A · Manual start</span><span class="sub">you pour when the AI says</span></span><span class="amt">~$255</span><span class="tick"></span></button> | |
| <button class="tier on"><span><span class="nm">B · Auto top-up</span><span class="sub">pump does the watering</span></span><span class="amt">~$280</span><span class="tick"><svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10.5l4 4 8-9"></path></svg></span></button> | |
| <button class="tier"><span><span class="nm">C · Water safety</span><span class="sub">gauge · leak sensor · tray</span></span><span class="amt">~$335</span><span class="tick"></span></button> | |
| </div> | |
| <div class="stack"> | |
| <div class="line"> | |
| <span class="lbl">network appliances<small>2-pack plugs · camera · pump · tubing</small></span> | |
| <span class="amt">$68</span> | |
| </div> | |
| <div class="line"> | |
| <span class="lbl">grow side<small>DWC reservoir · light · nutrient · seeds · EC meter</small></span> | |
| <span class="amt">$211</span> | |
| </div> | |
| <div class="line"> | |
| <span class="lbl">tier adjustment<small>the automated core build</small></span> | |
| <span class="amt">$0</span> | |
| </div> | |
| <div class="line total"> | |
| <span class="lbl">Build total</span> | |
| <span class="amt">~$280</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <span class="eyebrow">2-year total cost of ownership</span> | |
| <div class="chart"> | |
| <div class="crow"> | |
| <span class="clab">Gardyn Home 4</span> | |
| <span class="ctrack"><span class="cbar" style="width:301px"></span></span> | |
| <span class="cval">~$1,715</span> | |
| <span class="cai yes"> | |
| <svg width="13" height="13" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10.5l4 4 8-9"></path></svg> | |
| AI | |
| </span> | |
| </div> | |
| <div class="crow"> | |
| <span class="clab">Click &amp; Grow SG9</span> | |
| <span class="ctrack"><span class="cbar" style="width:105px"></span></span> | |
| <span class="cval">~$600</span> | |
| <span class="cai"> | |
| <svg width="13" height="13" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M5 10h10"></path></svg> | |
| no AI | |
| </span> | |
| </div> | |
| <div class="crow us"> | |
| <span class="clab">samogrow</span> | |
| <span class="ctrack"><span class="cbar" style="width:83px"></span></span> | |
| <span class="cval">~$470</span> | |
| <span class="cai yes"> | |
| <svg width="13" height="13" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10.5l4 4 8-9"></path></svg> | |
| AI | |
| </span> | |
| </div> | |
| <div class="crow"> | |
| <span class="clab">Auk Mini 2</span> | |
| <span class="ctrack"><span class="cbar" style="width:40px"></span></span> | |
| <span class="cval">~$229</span> | |
| <span class="cai"> | |
| <svg width="13" height="13" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M5 10h10"></path></svg> | |
| no AI | |
| </span> | |
| </div> | |
| <div class="caxis"><span></span><span class="scale"><span>$0</span><span>hardware + 2 years of extras</span><span>$1,800</span></span></div> | |
| </div> | |
| <div class="callout"> | |
| <span class="big">−$1,245</span> | |
| <p>under Gardyn over two years — <b>the only commercial unit with real camera + AI.</b> And below even a Click &amp; Grow, which has neither.</p> | |
| </div> | |
| <div class="ongoing"> | |
| <div><span class="big">~$35</span><small>/ year — plants or seeds, pH refills. Pebbles reusable.</small></div> | |
| <div><span class="big">$3–7</span><small>/ month — Claude Haiku vision, 24–48 photos a day.</small></div> | |
| <div><span class="big">$0</span><small>/ month — vendor subscription. No proprietary pods, ever.</small></div> | |
| </div> | |
| <p class="fine">The API line is arithmetic, not a guess: ~$0.0036 per analysis on Claude Haiku × 24 images/day ≈ $2.6/mo (≈ $5/mo at 48/day).</p> | |
| <p class="note">Nothing here is a black box: commodity seeds, code you can fork, and no vendor who can deprecate your garden — the way <b>AeroGarden owners were stranded</b> when the company wound down and the app and pods went with it.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div></body></html>"></iframe></div> | |
| </section> | |
| <section class="sheet"> | |
| <div class="meta"> | |
| <span class="idx">05</span> | |
| <h2>Mobile — 390px</h2> | |
| <span class="dim">390 × 1400</span> | |
| <div class="note"><b>MOBILE — 390px</b><p>GitHub is reachable from the top bar and from a sticky dock, instead of one footer link at y=13,296.</p><p>The command block wraps instead of scrolling 703px inside a 278px box.</p><p>Cost cards align to the same 28px margins as the prose — the min-width:0 fix.</p></div> | |
| </div> | |
| <div class="stage"><iframe title="Mobile — 390px" width="390" height="1400" scrolling="no" sandbox="allow-same-origin" srcdoc="<!doctype html><html><head><meta charset="utf-8"><title>Mobile — 390px</title><style>html,body{margin:0;padding:0;background:#f2ede0}</style><style> | |
| :root { | |
| --paper:#f2ede0; --paper-2:#ebe4d2; --card:#f7f3e8; | |
| --ink:#1c2216; --ink-soft:#4a5340; --ink-faint:#636b59; | |
| --line:#cdc4ac; --line-soft:#ddd5bf; | |
| --leaf:#35722f; --leaf-dk:#2b5c26; --leaf-br:#4a9640; --leaf-lit:#8fd67f; | |
| --soil:#a8632a; | |
| --slab:#1c2216; --slab-ink:#e9e7d7; --slab-line:#2f3826; --slab-soft:#8b9380; | |
| --serif:Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif; | |
| --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; | |
| } | |
| * { box-sizing:border-box; } | |
| body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif); } | |
| a { color:var(--leaf-dk); text-decoration-color:var(--line); text-underline-offset:3px; } | |
| a:hover { color:var(--leaf); text-decoration-color:var(--leaf); } | |
| .board { width:390px; height:1400px; position:relative; overflow:hidden; background:var(--paper); } | |
| .grain { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.045; mix-blend-mode:multiply; | |
| background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } | |
| .layer { position:relative; z-index:1; } | |
| .col { padding:0 28px; } | |
| .topbar { height:54px; border-bottom:1px solid var(--line); display:flex; align-items:center; | |
| background:color-mix(in srgb, var(--paper) 92%, transparent); } | |
| .topbar .col { display:flex; align-items:center; gap:12px; width:100%; } | |
| .brand { font-family:var(--serif); font-size:19px; display:flex; align-items:center; gap:6px; } | |
| .brand b { color:var(--leaf); font-weight:700; } | |
| .tb-actions { margin-left:auto; display:flex; align-items:center; gap:8px; } | |
| .iconbtn { width:44px; height:38px; border:1px solid var(--line); display:flex; align-items:center; | |
| justify-content:center; color:var(--ink-soft); background:transparent; } | |
| .iconbtn.solid { background:var(--leaf); border-color:var(--leaf); color:var(--paper); } | |
| .hero { padding:30px 0 0; } | |
| .eyebrow { font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; | |
| color:var(--leaf); font-weight:600; } | |
| h1 { font-family:var(--serif); font-weight:400; font-size:38px; line-height:1.08; letter-spacing:-.02em; | |
| margin:14px 0 14px; text-wrap:pretty; } | |
| h1 em { font-style:normal; color:var(--leaf); } | |
| .lede { font-size:17px; line-height:1.5; color:var(--ink-soft); margin:0 0 22px; text-wrap:pretty; } | |
| .lede b { color:var(--ink); font-weight:400; font-style:italic; } | |
| .cmd { background:var(--slab); border:1px solid var(--slab-line); } | |
| .cmd-head { display:flex; align-items:center; justify-content:space-between; gap:10px; | |
| padding:9px 12px; border-bottom:1px solid var(--slab-line); } | |
| .cmd-tag { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; | |
| color:var(--leaf-lit); font-weight:600; } | |
| .copy { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; | |
| color:var(--slab-soft); border:1px solid var(--slab-line); padding:4px 8px; | |
| display:inline-flex; align-items:center; gap:5px; flex:none; } | |
| .cmd-body { padding:12px; display:grid; gap:9px; } | |
| .cmd-line { font-family:var(--mono); font-size:12.5px; line-height:1.5; color:var(--slab-ink); | |
| display:flex; gap:8px; white-space:pre-wrap; overflow-wrap:anywhere; } | |
| .cmd-line .p { color:var(--leaf-lit); flex:none; } | |
| .cmd-line .env { color:#d9c98d; } | |
| .cmd-foot { padding:0 12px 12px; font-family:var(--mono); font-size:10.5px; color:var(--slab-soft); | |
| line-height:1.55; } | |
| .btns { display:grid; gap:12px; margin-top:20px; } | |
| .btn { font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; | |
| padding:16px 18px; text-decoration:none; border:1px solid var(--ink); | |
| display:flex; align-items:center; justify-content:center; gap:9px; } | |
| .btn-solid { background:var(--leaf); border-color:var(--leaf); color:var(--paper); } | |
| .btn-ghost { color:var(--ink); } | |
| .trust { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:22px; padding-top:14px; | |
| border-top:1px solid var(--line); font-family:var(--mono); font-size:11px; color:var(--ink-faint); } | |
| .trust b { color:var(--leaf-dk); font-weight:600; } | |
| .sec { margin-top:34px; border-top:1px solid var(--line); padding:30px 0 0; } | |
| .sec .num { font-family:var(--mono); font-size:12px; font-weight:600; color:var(--leaf); letter-spacing:.14em; } | |
| .sec h2 { font-family:var(--serif); font-weight:400; font-size:30px; margin:8px 0 12px; letter-spacing:-.018em; } | |
| .sec .intro { font-size:16.5px; line-height:1.58; color:var(--ink-soft); margin:0 0 20px; text-wrap:pretty; } | |
| .sec .intro b { color:var(--ink); font-weight:400; } | |
| .tiers { display:grid; gap:8px; } | |
| .tier { display:flex; align-items:center; gap:10px; border:1px solid var(--line); background:var(--card); | |
| padding:12px 13px; font-family:var(--mono); } | |
| .tier .nm { display:block; color:var(--ink); font-size:12.5px; } | |
| .tier .sub { display:block; font-size:10.5px; color:var(--ink-faint); margin-top:3px; } | |
| .tier .amt { margin-left:auto; font-size:13.5px; color:var(--ink); white-space:nowrap; } | |
| .tier.on { border-color:var(--leaf); background:color-mix(in srgb, var(--leaf) 9%, var(--card)); } | |
| .tier.on .nm, .tier.on .amt { color:var(--leaf-dk); font-weight:600; } | |
| .stack { border:1px solid var(--slab-line); background:var(--slab); margin-top:14px; } | |
| .line { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:12px 14px; | |
| border-bottom:1px solid var(--slab-line); font-family:var(--mono); font-size:12px; } | |
| .line .lbl { color:var(--slab-ink); min-width:0; } | |
| .line small { display:block; font-size:11px; color:var(--slab-soft); margin-top:4px; line-height:1.5; } | |
| .line .amt { color:var(--slab-ink); font-size:13.5px; white-space:nowrap; } | |
| .line.total { background:var(--leaf); border-bottom:0; } | |
| .line.total .lbl { color:var(--paper); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; } | |
| .line.total .amt { color:var(--paper); font-size:20px; font-weight:600; } | |
| .dock { position:absolute; left:0; right:0; bottom:0; z-index:3; display:grid; grid-template-columns:1.25fr 1fr; | |
| gap:10px; padding:12px 16px 16px; background:color-mix(in srgb, var(--paper) 94%, transparent); | |
| border-top:1px solid var(--line); box-shadow:0 -14px 30px -26px rgba(28,34,22,.6); } | |
| .dock .btn { padding:14px 12px; font-size:11.5px; } | |
| </style></head><body><div class="board"> | |
| <div class="grain"></div> | |
| <div class="layer"> | |
| <div class="topbar"> | |
| <div class="col"> | |
| <div class="brand"> | |
| samo<b>grow</b> | |
| <svg width="17" height="17" viewBox="0 0 20 20" fill="none" stroke="#35722f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| <path d="M3 17c0-6 4.5-11 13-12 .6 5.5-3 12-13 12Z"></path> | |
| <path d="M3 17c3-3.5 6-5.6 10-7"></path> | |
| </svg> | |
| </div> | |
| <div class="tb-actions"> | |
| <span class="iconbtn solid" role="link" aria-label="GitHub repository"> | |
| <svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| <circle cx="6" cy="4.5" r="2.2"></circle><circle cx="6" cy="15.5" r="2.2"></circle> | |
| <circle cx="14.5" cy="7.5" r="2.2"></circle><path d="M6 6.7v6.6"></path> | |
| <path d="M14.5 9.7c0 2.6-2.4 3.2-4.6 3.6"></path> | |
| </svg> | |
| </span> | |
| <span class="iconbtn" role="button" aria-label="Open navigation menu"> | |
| <svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"> | |
| <path d="M3 6h14M3 10h14M3 14h14"></path> | |
| </svg> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hero col"> | |
| <div class="eyebrow">Open source · it feeds you</div> | |
| <h1>Give the machine you already leave on <em>one more job.</em></h1> | |
| <p class="lede"> | |
| samogrow runs a <b>herb garden</b> from a camera, two smart plugs, and a Claude API key — | |
| open source (MIT), no pods, no subscription. | |
| </p> | |
| <div class="cmd"> | |
| <div class="cmd-head"> | |
| <span class="cmd-tag">Try it — zero hardware</span> | |
| <span class="copy"> | |
| <svg width="10" height="10" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| <rect x="7" y="7" width="10" height="10" rx="1.5"></rect> | |
| <path d="M13 4H4.5A1.5 1.5 0 0 0 3 5.5V14"></path> | |
| </svg> | |
| Copy | |
| </span> | |
| </div> | |
| <div class="cmd-body"> | |
| <div class="cmd-line"><span class="p">$</span><span>git clone github.com/NikolayS/samogrow</span></div> | |
| <div class="cmd-line"><span class="p">$</span><span><span class="env">SAMOGROW_MOCK=1</span> bun run src/main.ts</span></div> | |
| </div> | |
| <div class="cmd-foot">real Claude call · real Telegram push · against a sample photo</div> | |
| </div> | |
| <div class="btns"> | |
| <a class="btn btn-solid" href="#"> | |
| <svg width="14" height="14" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| <circle cx="6" cy="4.5" r="2.2"></circle><circle cx="6" cy="15.5" r="2.2"></circle> | |
| <circle cx="14.5" cy="7.5" r="2.2"></circle><path d="M6 6.7v6.6"></path> | |
| <path d="M14.5 9.7c0 2.6-2.4 3.2-4.6 3.6"></path> | |
| </svg> | |
| Get the code | |
| </a> | |
| <a class="btn btn-ghost" href="#">Quickstart →</a> | |
| </div> | |
| <div class="trust"> | |
| <span><b>MIT</b> licensed</span> | |
| <span><b>108</b> tests, CI green</span> | |
| <span>No soldering</span> | |
| <span><b>$0</b> subscription</span> | |
| </div> | |
| </div> | |
| <div class="sec col"> | |
| <span class="num">02</span> | |
| <h2>What it costs</h2> | |
| <p class="intro"> | |
| One price frame: <b>~$255</b> manual, <b>~$280</b> automated core, up to <b>~$335</b> | |
| with the water-safety add-ons. | |
| </p> | |
| <div class="tiers"> | |
| <div class="tier"><span><span class="nm">A · Manual start</span><span class="sub">you pour when the AI says</span></span><span class="amt">~$255</span></div> | |
| <div class="tier on"><span><span class="nm">B · Auto top-up</span><span class="sub">pump does the watering</span></span><span class="amt">~$280</span></div> | |
| <div class="tier"><span><span class="nm">C · Water safety</span><span class="sub">gauge · leak sensor · tray</span></span><span class="amt">~$335</span></div> | |
| </div> | |
| <div class="stack"> | |
| <div class="line"><span class="lbl">network appliances<small>2-pack plugs · camera · pump · tubing</small></span><span class="amt">$68</span></div> | |
| <div class="line"><span class="lbl">grow side<small>DWC reservoir · light · nutrient · seeds · EC meter</small></span><span class="amt">$211</span></div> | |
| <div class="line total"><span class="lbl">Build total</span><span class="amt">~$280</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dock"> | |
| <a class="btn btn-solid" href="#"> | |
| <svg width="13" height="13" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| <circle cx="6" cy="4.5" r="2.2"></circle><circle cx="6" cy="15.5" r="2.2"></circle> | |
| <circle cx="14.5" cy="7.5" r="2.2"></circle><path d="M6 6.7v6.6"></path> | |
| <path d="M14.5 9.7c0 2.6-2.4 3.2-4.6 3.6"></path> | |
| </svg> | |
| Get the code | |
| </a> | |
| <a class="btn btn-ghost" href="#">Quickstart</a> | |
| </div> | |
| </div></body></html>"></iframe></div> | |
| </section> | |
| <footer><div class="wrap"> | |
| samogrow is open source (MIT) — <a href="https://github.com/NikolayS/samogrow">github.com/NikolayS/samogrow</a><br> | |
| This file is self-contained: no accounts, no network, no external assets. Open it anywhere. | |
| </div></footer> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment