| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>Runtime Trail: Robot Day Loop v0.1</title> |
| <meta name="description" content="Robot sandbox where skill grows through receipts." /> |
| <meta property="og:title" content="Runtime Trail: Robot Day Loop v0.1" /> |
| <meta property="og:description" content="A pressure-governed robot-life sandbox where work, care, dance practice, and recharge route through action gates and receipts." /> |
| <meta property="og:image" content="assets/social_card.png" /> |
| <meta name="twitter:card" content="summary_large_image" /> |
| <meta name="twitter:title" content="Runtime Trail: Robot Day Loop v0.1" /> |
| <meta name="twitter:description" content="Robot sandbox where skill grows through receipts." /> |
| <meta name="twitter:image" content="assets/social_card.png" /> |
|
|
| <style> |
| :root{ |
| --bg:#0b0f14; |
| --panel:#111923; |
| --panel2:#172230; |
| --ink:#e8f0f7; |
| --muted:#96a8bb; |
| --line:#2c3b4c; |
| --held:#73e2a7; |
| --strained:#ffd166; |
| --stop:#ff6b6b; |
| --review:#8ecae6; |
| --accent:#9cc8ff; |
| --violet:#c7a7ff; |
| --soft:#243246; |
| } |
| *{box-sizing:border-box} |
| body{margin:0;background:radial-gradient(circle at top left,#152132 0,#0b0f14 52%,#06080b 100%);color:var(--ink);font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;overflow-x:hidden} |
| header{padding:18px 22px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(15,24,36,.96),rgba(10,14,20,.9));position:sticky;top:0;z-index:5;backdrop-filter:blur(8px)} |
| h1{font-size:22px;margin:0 0 4px;letter-spacing:.3px} |
| .subtitle{color:var(--muted);font-size:13px;line-height:1.4} |
| .attrib{font-size:12px;color:#cfd8e3;margin-top:7px;display:flex;gap:12px;flex-wrap:wrap} |
| main{display:grid;grid-template-columns:minmax(640px,1.35fr) minmax(360px,.65fr);gap:14px;padding:14px;min-height:calc(100vh - 85px)} |
| .card{background:linear-gradient(180deg,rgba(20,31,44,.96),rgba(12,18,27,.96));border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.28);overflow:hidden} |
| .card h2{font-size:15px;margin:0;padding:12px 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.025);letter-spacing:.2px} |
| .sceneWrap{padding:12px;display:grid;grid-template-rows:auto 1fr auto;gap:10px} |
| .topbar{display:grid;grid-template-columns:repeat(5,1fr);gap:8px} |
| .meter{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:9px;min-width:0} |
| .meter label{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:6px;gap:8px;white-space:nowrap} |
| .track{height:8px;border-radius:8px;background:#0a0f16;border:1px solid #223247;overflow:hidden} |
| .fill{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--accent),var(--held));width:50%;transition:width .35s ease} |
| .fill.warn{background:linear-gradient(90deg,var(--strained),#ff9f1c)} |
| .fill.bad{background:linear-gradient(90deg,var(--stop),#b5173f)} |
| .stage{position:relative;min-height:520px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#142236 0,#0d1420 100%)} |
| svg{width:100%;height:100%;display:block;min-height:520px} |
| .zone-label{font-size:12px;fill:#d8e6f2;opacity:.9;font-weight:600;letter-spacing:.4px} |
| .tiny{font-size:10px;fill:#9fb2c6;letter-spacing:.2px} |
| .tileHome{fill:#1c2f45}.tileWarehouse{fill:#2b2d42}.tileGarden{fill:#24463a}.tilePractice{fill:#3a2c4f}.tileDock{fill:#2d3d4d}.tilePath{fill:#1f2937} |
| .stroke{stroke:#4a5d75;stroke-width:1.4}.softstroke{stroke:#33485f;stroke-width:1} |
| .robotPart{fill:#d6e4ef;stroke:#6f849b;stroke-width:1.4}.robotDark{fill:#60768d}.robotCore{fill:#80ffdb;filter:url(#glow)}.eye{fill:#8ecae6}.joint{fill:#94a3b8;stroke:#617287;stroke-width:1} |
| .dogBody{fill:#d8b38a;stroke:#7c5e3d;stroke-width:1.2}.dogDark{fill:#7a5639}.leash{stroke:#98b4d4;stroke-width:2;stroke-dasharray:4 3;opacity:.85} |
| .robotGroup{transition:transform .75s cubic-bezier(.2,.9,.2,1)} |
| .dogGroup{transition:transform .75s cubic-bezier(.2,.9,.2,1)} |
| .dancing .leftArm{animation:leftArm 600ms ease-in-out infinite alternate;transform-box:fill-box;transform-origin:85% 20%} |
| .dancing .rightArm{animation:rightArm 520ms ease-in-out infinite alternate;transform-box:fill-box;transform-origin:15% 20%} |
| .dancing .leftLeg{animation:leftLeg 650ms ease-in-out infinite alternate;transform-box:fill-box;transform-origin:80% 5%} |
| .dancing .rightLeg{animation:rightLeg 600ms ease-in-out infinite alternate;transform-box:fill-box;transform-origin:20% 5%} |
| .dancing .torso{animation:torso 700ms ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center} |
| .wag .tail{animation:wag 260ms ease-in-out infinite alternate;transform-box:fill-box;transform-origin:0% 50%} |
| @keyframes leftArm{from{transform:rotate(-12deg)}to{transform:rotate(34deg)}} |
| @keyframes rightArm{from{transform:rotate(22deg)}to{transform:rotate(-26deg)}} |
| @keyframes leftLeg{from{transform:rotate(8deg)}to{transform:rotate(-16deg)}} |
| @keyframes rightLeg{from{transform:rotate(-10deg)}to{transform:rotate(16deg)}} |
| @keyframes torso{from{transform:rotate(-2deg) translateY(0)}to{transform:rotate(2deg) translateY(-3px)}} |
| @keyframes wag{from{transform:rotate(-18deg)}to{transform:rotate(28deg)}} |
| .controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} |
| button,select{background:#152235;color:var(--ink);border:1px solid #334962;border-radius:11px;padding:10px 10px;font-weight:650;font-size:12px;cursor:pointer;transition:all .15s ease;min-width:0} |
| button:hover,select:hover{border-color:#6aa6e8;background:#1a2b42;transform:translateY(-1px)} |
| button:active{transform:translateY(0)} |
| button.primary{background:linear-gradient(180deg,#2364aa,#174a7e);border-color:#4d9de0} |
| button.good{background:linear-gradient(180deg,#1f7a55,#14543a);border-color:#57cc99} |
| button.warn{background:linear-gradient(180deg,#9d6b18,#6d4810);border-color:#ffd166} |
| .side{display:grid;gap:14px;align-content:start} |
| .panelBody{padding:12px} |
| .grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px} |
| .kv{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:12px}.kv span:first-child{color:var(--muted)} |
| .gate{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:10px} |
| .chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800;letter-spacing:.35px;border:1px solid rgba(255,255,255,.12)} |
| .chip.held{background:rgba(115,226,167,.13);color:var(--held);border-color:rgba(115,226,167,.4)} |
| .chip.strained{background:rgba(255,209,102,.13);color:var(--strained);border-color:rgba(255,209,102,.4)} |
| .chip.stop{background:rgba(255,107,107,.13);color:var(--stop);border-color:rgba(255,107,107,.4)} |
| .chip.review{background:rgba(142,202,230,.13);color:var(--review);border-color:rgba(142,202,230,.4)} |
| .beatCanvas{width:100%;height:190px;background:#07101a;border:1px solid var(--line);border-radius:12px;display:block} |
| .receipt{height:275px;width:100%;resize:vertical;background:#07101a;color:#dce8f3;border:1px solid var(--line);border-radius:12px;padding:10px;font:12px/1.45 Consolas,Monaco,monospace;white-space:pre} |
| .smallControls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px} |
| .parking{font-size:12px;color:#c5d1df;line-height:1.45}.parking ul{margin:8px 0 0 18px;padding:0}.parking li{margin:4px 0;color:#aebfd1} |
| .callout{border:1px solid rgba(156,200,255,.28);background:rgba(156,200,255,.08);border-radius:12px;padding:10px;font-size:12px;color:#d9e8f7;line-height:1.45;margin-bottom:10px} |
| .mono{font-family:Consolas,Monaco,monospace;color:#dbe9f7} |
|
|
| .heroImage{margin:16px auto 0;max-width:1180px;padding:0 22px} |
| .heroImage img{display:block;width:100%;height:auto;border:1px solid rgba(156,200,255,.26);border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.35);background:#07101a} |
| .heroImage figcaption{font-size:12px;color:var(--muted);line-height:1.45;margin:8px 4px 0} |
| @media(max-width:1080px){main{grid-template-columns:1fr}.topbar{grid-template-columns:repeat(2,1fr)}.controls{grid-template-columns:repeat(2,1fr)}} |
| </style> |
| </head> |
| <body> |
| <header> |
| <h1>Runtime Trail: Robot Day Loop v0.1</h1> |
| <div class="subtitle">A pressure-governed warehouse-to-home sandbox for movement, care, practice, expression, and recharge.</div> |
| <div class="attrib"><span>Created and Developed by Collin D. Weber</span><span>Developer & System Architect</span><span>Systems Integrity Steward</span></div> |
| </header> |
|
|
| <figure class="heroImage" aria-label="Runtime Trail social preview image"> |
| <img src="assets/social_card.png" alt="Runtime Trail Robot Day Loop v0.1 social-card image showing a stylized helper robot, dog, beat trace, action gates, receipt trace, warehouse, garden, and recharge dock." /> |
| <figcaption>Robot-life loop preview: work, care, beat-trace practice, receipts, and recharge.</figcaption> |
| </figure> |
|
|
| <main> |
| <section class="card sceneWrap"> |
| <div class="topbar"> |
| <div class="meter"><label><span>Battery</span><b id="batteryVal">100%</b></label><div class="track"><div id="batteryFill" class="fill"></div></div></div> |
| <div class="meter"><label><span>Gyro Stability</span><b id="gyroVal">86%</b></label><div class="track"><div id="gyroFill" class="fill"></div></div></div> |
| <div class="meter"><label><span>Body Wear</span><b id="wearVal">0%</b></label><div class="track"><div id="wearFill" class="fill warn"></div></div></div> |
| <div class="meter"><label><span>Monotony Pressure</span><b id="monoVal">12%</b></label><div class="track"><div id="monoFill" class="fill warn"></div></div></div> |
| <div class="meter"><label><span>Practice Readiness</span><b id="readinessVal">18%</b></label><div class="track"><div id="readinessFill" class="fill"></div></div></div> |
| </div> |
|
|
| <div class="stage" aria-label="stylized 3D robot day loop scene"> |
| <svg viewBox="0 0 900 560" role="img"> |
| <defs> |
| <filter id="glow" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="3" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter> |
| <linearGradient id="floor" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#1a2b3d"/><stop offset="1" stop-color="#0b111a"/></linearGradient> |
| <linearGradient id="crate" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#8d6e63"/><stop offset="1" stop-color="#4f3d37"/></linearGradient> |
| <linearGradient id="glass" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#bbdefb" stop-opacity=".86"/><stop offset="1" stop-color="#4fc3f7" stop-opacity=".38"/></linearGradient> |
| </defs> |
|
|
| <rect x="0" y="0" width="900" height="560" fill="url(#floor)"/> |
| <path d="M70 400 L270 300 L470 398 L270 510 Z" class="tileHome stroke"/> |
| <text x="178" y="404" class="zone-label">HOME</text><text x="155" y="422" class="tiny">dock • dog bed • practice return</text> |
| <path d="M510 80 L810 165 L690 310 L390 220 Z" class="tileWarehouse stroke"/> |
| <text x="565" y="170" class="zone-label">WAREHOUSE</text><text x="555" y="188" class="tiny">fragile • heavy • liquid • unknown</text> |
| <path d="M110 95 L320 40 L455 150 L235 228 Z" class="tileGarden stroke"/> |
| <text x="198" y="126" class="zone-label">GARDEN</text><text x="168" y="144" class="tiny">soil • light • water • care</text> |
| <path d="M505 345 L770 302 L850 430 L595 500 Z" class="tilePractice stroke"/> |
| <text x="615" y="402" class="zone-label">PRACTICE</text><text x="600" y="420" class="tiny">beat graph • repetition • receipt</text> |
| <path d="M305 416 L407 366 L470 398 L365 454 Z" class="tileDock stroke"/> |
| <text x="350" y="408" class="tiny">RECHARGE</text> |
| <path d="M250 300 C350 250 430 230 520 220" fill="none" stroke="#6c83a0" stroke-width="8" opacity=".18" stroke-linecap="round"/> |
| <path d="M255 295 C300 235 300 185 245 220" fill="none" stroke="#6c83a0" stroke-width="8" opacity=".14" stroke-linecap="round"/> |
| <path d="M300 425 C430 385 500 382 615 400" fill="none" stroke="#6c83a0" stroke-width="8" opacity=".14" stroke-linecap="round"/> |
| <path d="M530 500 C650 535 790 510 830 458" fill="none" stroke="#6c83a0" stroke-width="7" opacity=".1" stroke-linecap="round"/> |
| <text x="715" y="515" class="tiny">PARK ROUTE — PARKED</text> |
|
|
| |
| <g opacity=".92"> |
| <rect x="610" y="184" width="45" height="35" rx="5" fill="url(#crate)" stroke="#30251f"/> |
| <rect x="670" y="202" width="40" height="31" rx="5" fill="url(#glass)" stroke="#a3d7ff"/> |
| <rect x="555" y="210" width="50" height="38" rx="6" fill="#59677a" stroke="#a6b3c2"/> |
| <circle cx="735" cy="240" r="19" fill="#806f42" stroke="#e4c97a"/> |
| </g> |
|
|
| |
| <g opacity=".95"> |
| <ellipse cx="235" cy="165" rx="28" ry="13" fill="#203b2f" stroke="#49715d"/> |
| <path d="M225 160 q8 -30 20 0 q10 -25 24 0" fill="none" stroke="#73e2a7" stroke-width="5" stroke-linecap="round"/> |
| <ellipse cx="300" cy="132" rx="30" ry="14" fill="#203b2f" stroke="#49715d"/> |
| <path d="M290 127 q12 -35 20 0 q12 -28 25 0" fill="none" stroke="#57cc99" stroke-width="5" stroke-linecap="round"/> |
| <rect x="160" y="165" width="45" height="28" rx="6" fill="#334155" stroke="#6b7d91"/> |
| <text x="164" y="183" class="tiny">WATER</text> |
| </g> |
|
|
| |
| <g opacity=".9"> |
| <rect x="340" y="390" width="55" height="42" rx="10" fill="#182536" stroke="#8ecae6"/> |
| <circle cx="367" cy="411" r="12" fill="#80ffdb" opacity=".45"/> |
| <ellipse cx="200" cy="460" rx="45" ry="18" fill="#5d4b3b" stroke="#c7a27d"/> |
| <circle cx="142" cy="433" r="15" fill="#41556c" stroke="#8ecae6"/><text x="126" y="460" class="tiny">BOWL</text> |
| </g> |
|
|
| |
| <g id="dog" class="dogGroup wag" transform="translate(220 430)"> |
| <path class="tail dogDark" d="M-34 -9 q-24 -10 -30 -27" fill="none" stroke="#7a5639" stroke-width="7" stroke-linecap="round"/> |
| <ellipse class="dogBody" cx="0" cy="0" rx="38" ry="19"/> |
| <circle class="dogBody" cx="39" cy="-11" r="18"/> |
| <path class="dogDark" d="M35 -28 q-8 -22 10 -10 q8 10 3 23"/> |
| <circle cx="46" cy="-14" r="3" fill="#111"/> |
| <path d="M53 -7 q9 4 0 8" fill="none" stroke="#30251f" stroke-width="2"/> |
| <line x1="-18" y1="15" x2="-22" y2="38" stroke="#7a5639" stroke-width="7" stroke-linecap="round"/> |
| <line x1="18" y1="15" x2="15" y2="38" stroke="#7a5639" stroke-width="7" stroke-linecap="round"/> |
| <rect x="16" y="-22" width="28" height="9" rx="4" fill="#3b82f6" opacity=".9"/> |
| </g> |
| <line id="leash" class="leash" x1="280" y1="392" x2="265" y2="418"/> |
|
|
| |
| <g id="robot" class="robotGroup" transform="translate(285 355)"> |
| <g class="leftLeg"><rect class="robotPart" x="-17" y="58" width="15" height="46" rx="7"/><circle class="joint" cx="-9" cy="59" r="7"/><rect class="robotDark" x="-23" y="99" width="28" height="10" rx="5"/></g> |
| <g class="rightLeg"><rect class="robotPart" x="15" y="58" width="15" height="46" rx="7"/><circle class="joint" cx="23" cy="59" r="7"/><rect class="robotDark" x="9" y="99" width="28" height="10" rx="5"/></g> |
| <g class="leftArm"><rect class="robotPart" x="-48" y="6" width="16" height="56" rx="8"/><circle class="joint" cx="-34" cy="11" r="8"/><ellipse class="robotDark" cx="-39" cy="66" rx="11" ry="8"/></g> |
| <g class="rightArm"><rect class="robotPart" x="39" y="6" width="16" height="56" rx="8"/><circle class="joint" cx="42" cy="11" r="8"/><ellipse class="robotDark" cx="48" cy="66" rx="11" ry="8"/></g> |
| <g class="torso"> |
| <rect class="robotPart" x="-30" y="0" width="68" height="72" rx="18"/> |
| <circle class="robotCore" cx="4" cy="34" r="11"/> |
| <path d="M-7 34 L4 22 L15 34 L4 46 Z" fill="none" stroke="#0b6155" stroke-width="1.3" opacity=".8"/> |
| </g> |
| <g class="head"> |
| <rect class="robotPart" x="-29" y="-47" width="66" height="44" rx="18"/> |
| <circle class="eye" cx="-10" cy="-25" r="5"/><circle class="eye" cx="18" cy="-25" r="5"/> |
| <path d="M-4 -12 q9 6 18 0" fill="none" stroke="#60768d" stroke-width="2" stroke-linecap="round"/> |
| <circle cx="4" cy="-51" r="5" fill="#9cc8ff" opacity=".9"/> |
| </g> |
| </g> |
|
|
| <text id="sceneCaption" x="30" y="532" fill="#dce8f3" font-size="14" font-weight="700">Home check: battery, gyro, dog, garden, and practice readiness.</text> |
| </svg> |
| </div> |
|
|
| <div class="controls"> |
| <button class="primary" onclick="startDay()">Start Day</button> |
| <button onclick="warehouseTask()">Warehouse Task</button> |
| <button onclick="gardenCare()">Tend Garden</button> |
| <button onclick="dogCare()">Dog Care</button> |
| <button class="good" onclick="practiceDomain()">Practice Domain</button> |
| <button onclick="homeExpression()">Home Expression</button> |
| <button class="warn" onclick="recharge()">Recharge / End Day</button> |
| <button onclick="runFullDay()">Run Full Day</button> |
| </div> |
| </section> |
|
|
| <aside class="side"> |
| <section class="card"> |
| <h2>Runtime Controls</h2> |
| <div class="panelBody"> |
| <div class="grid2"> |
| <div> |
| <label class="subtitle">Practice Domain</label> |
| <select id="domainSelect" onchange="domainChanged()"> |
| <option>Dance</option> |
| <option>Music</option> |
| <option>Cooking</option> |
| </select> |
| </div> |
| <div> |
| <label class="subtitle">Rhythm Pattern</label> |
| <select id="rhythmSelect" onchange="drawBeatGraph()"> |
| <option value="medium4">Medium 4/4</option> |
| <option value="slow4">Slow 4/4</option> |
| <option value="fast4">Fast 4/4</option> |
| <option value="waltz3">Waltz 3/4</option> |
| <option value="sync">Syncopated Practice</option> |
| <option value="low">Low-Energy Practice</option> |
| </select> |
| </div> |
| </div> |
| <div class="kv"><span>Day</span><b id="dayVal">1</b></div> |
| <div class="kv"><span>Phase</span><b id="phaseVal">Home Check</b></div> |
| <div class="kv"><span>Event</span><b id="eventVal">Dance Showcase in 5 days</b></div> |
| </div> |
| </section> |
|
|
| <section class="card"> |
| <h2>Action Gate</h2> |
| <div class="panelBody"> |
| <div class="gate"><span id="gateText">Home check ready.</span><span id="gateChip" class="chip held">HELD</span></div> |
| <div class="callout"><b>Core proof:</b> the robot does not receive mastery. It practices, misses, corrects, improves, branches, and records what happened.</div> |
| <div class="kv"><span>Current Pressure Form</span><b id="pressureForm">daily readiness</b></div> |
| <div class="kv"><span>Last Capsule</span><b id="capsuleState">HELD</b></div> |
| </div> |
| </section> |
|
|
| <section class="card"> |
| <h2>Beat-Trace Learning Panel</h2> |
| <div class="panelBody"> |
| <canvas id="beatCanvas" class="beatCanvas" width="680" height="210"></canvas> |
| <div class="grid2" style="margin-top:8px"> |
| <div class="meter"><label><span>Beat-Lock</span><b id="beatLockVal">18%</b></label><div class="track"><div id="beatLockFill" class="fill"></div></div></div> |
| <div class="meter"><label><span>Avg Timing Drift</span><b id="driftVal">42ms</b></label><div class="track"><div id="driftFill" class="fill warn"></div></div></div> |
| </div> |
| <div class="kv"><span>Practice Attempts</span><b id="attemptVal">0</b></div> |
| <div class="kv"><span>Last Adjustment</span><b id="adjustVal">none yet</b></div> |
| </div> |
| </section> |
|
|
| <section class="card"> |
| <h2>Daily Receipt</h2> |
| <div class="panelBody"> |
| <textarea id="receipt" class="receipt" readonly></textarea> |
| <div class="smallControls"> |
| <button onclick="copyReceipt()">Copy Receipt</button> |
| <button onclick="downloadReceipt()">Download TXT</button> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="card"> |
| <h2>Parking Lot / Later Releases</h2> |
| <div class="panelBody parking"> |
| Preserved for later, not v0.1: |
| <ul> |
| <li>MP3 upload and custom audio beat extraction</li> |
| <li>Local park with other dogs, people, children, and shared-route pressure</li> |
| <li>Weather and shelter construction</li> |
| <li>Community-designed clothing, accessories, gestures, recipes, and source packs</li> |
| <li>Settlement mode and long-horizon commons infrastructure simulation</li> |
| </ul> |
| </div> |
| </section> |
| </aside> |
| </main> |
|
|
| <footer style="max-width:1180px;margin:18px auto 28px;padding:0 22px;color:#96a8bb;font-size:12px;line-height:1.45"> |
| Runtime Trail: Robot Day Loop v0.1 · Created and Developed by Collin D. Weber · Developer & System Architect · Systems Integrity Steward |
| </footer> |
|
|
|
|
| <script> |
| const state = { |
| day:1, phase:'Home Check', battery:100, gyro:86, wear:0, monotony:12, |
| garden:62, dog:58, beatLock:18, drift:42, attempts:0, |
| danceReadiness:18, musicReadiness:14, cookingReadiness:12, |
| eventCountdown:5, lastAdjustment:'none yet', capsule:'HELD', gate:'HELD', pressureForm:'daily readiness' |
| }; |
| const zones = { |
| home:[285,355], warehouse:[620,190], garden:[250,165], dog:[285,355], practice:[650,380], dock:[365,370] |
| }; |
| const receipt = document.getElementById('receipt'); |
| function clamp(v,min=0,max=100){return Math.max(min,Math.min(max,v));} |
| function rand(arr){return arr[Math.floor(Math.random()*arr.length)]} |
| function log(line){ |
| const time = `Day ${state.day} / ${state.phase}`; |
| receipt.value += `[${time}] ${line}\n`; |
| receipt.scrollTop = receipt.scrollHeight; |
| } |
| function setScene(text){document.getElementById('sceneCaption').textContent=text;} |
| function moveRobot(zone){ |
| const [x,y]=zones[zone]; |
| document.getElementById('robot').style.transform=`translate(${x}px,${y}px)`; |
| const leash = document.getElementById('leash'); |
| if(zone==='dog' || zone==='home' || zone==='dock'){ |
| leash.setAttribute('x1', x-5); leash.setAttribute('y1', y+35); |
| leash.setAttribute('x2', '265'); leash.setAttribute('y2','418'); |
| leash.style.opacity=.85; |
| }else{ leash.style.opacity=.1; } |
| } |
| function moveDog(x=220,y=430){document.getElementById('dog').style.transform=`translate(${x}px,${y}px)`;} |
| function setGate(kind,text,form){ |
| state.gate=kind; state.capsule=kind; state.pressureForm=form || state.pressureForm; |
| const chip=document.getElementById('gateChip'); |
| chip.className='chip '+(kind==='HELD'?'held':kind==='STRAINED'?'strained':kind==='MUST STOP'?'stop':'review'); |
| chip.textContent=kind; |
| document.getElementById('gateText').textContent=text; |
| document.getElementById('capsuleState').textContent=kind; |
| document.getElementById('pressureForm').textContent=state.pressureForm; |
| } |
| function setPhase(p){state.phase=p; document.getElementById('phaseVal').textContent=p;} |
| function updateUI(){ |
| state.battery=clamp(state.battery); state.gyro=clamp(state.gyro); state.wear=clamp(state.wear); state.monotony=clamp(state.monotony); |
| const readiness = getReadiness(); |
| const bars = [ |
| ['battery',state.battery],['gyro',state.gyro],['wear',state.wear],['mono',state.monotony],['readiness',readiness] |
| ]; |
| bars.forEach(([id,val])=>{ |
| document.getElementById(id+'Val').textContent=Math.round(val)+(id==='wear'||id==='mono'||id==='readiness'||id==='battery'||id==='gyro'?'%':''); |
| document.getElementById(id+'Fill').style.width=val+'%'; |
| }); |
| document.getElementById('beatLockVal').textContent=Math.round(state.beatLock)+'%'; |
| document.getElementById('beatLockFill').style.width=state.beatLock+'%'; |
| document.getElementById('driftVal').textContent=Math.round(state.drift)+'ms'; |
| document.getElementById('driftFill').style.width=clamp(100-state.drift*2,5,100)+'%'; |
| document.getElementById('attemptVal').textContent=state.attempts; |
| document.getElementById('adjustVal').textContent=state.lastAdjustment; |
| document.getElementById('dayVal').textContent=state.day; |
| document.getElementById('eventVal').textContent=`${document.getElementById('domainSelect').value} Event in ${state.eventCountdown} days`; |
| } |
| function getReadiness(){ |
| const d=document.getElementById('domainSelect').value; |
| if(d==='Dance') return state.danceReadiness; |
| if(d==='Music') return state.musicReadiness; |
| return state.cookingReadiness; |
| } |
| function setReadiness(v){ |
| const d=document.getElementById('domainSelect').value; |
| if(d==='Dance') state.danceReadiness=clamp(v); |
| else if(d==='Music') state.musicReadiness=clamp(v); |
| else state.cookingReadiness=clamp(v); |
| } |
| function startDay(){ |
| setPhase('Home Check'); moveRobot('home'); moveDog(); |
| setGate('HELD','Home check held: battery, gyro, dog, garden, and practice route available.','daily readiness'); |
| setScene('Home check: robot reads battery, gyro, dog care, garden care, and practice readiness.'); |
| log('Start day: readiness scan complete. Memory gives readiness, not permission.'); |
| updateUI(); |
| } |
| function warehouseTask(){ |
| setPhase('Warehouse Job'); moveRobot('warehouse'); |
| const tasks = [ |
| {obj:'sturdy box', form:'standard transport', risk:'low', act:'normal carry route held'}, |
| {obj:'fragile glass item', form:'fragile-object pressure', risk:'medium', act:'slow lift, low grip, no sharp turn'}, |
| {obj:'heavy crate', form:'torque / center-of-mass pressure', risk:'medium', act:'wide stance, reduced speed, two-step route'}, |
| {obj:'liquid container', form:'slosh / spill / balance pressure', risk:'medium', act:'level carry, no sudden stops'}, |
| {obj:'unknown package', form:'uncertainty / inspection pressure', risk:'review', act:'inspection required before moving'}, |
| {obj:'human nearby', form:'living-boundary proximity', risk:'review', act:'pause and reroute around human boundary'} |
| ]; |
| const t=rand(tasks); |
| state.battery-=8; state.wear+= t.risk==='low'?2:4; state.gyro-= t.risk==='medium'?4:2; state.monotony+=4; |
| const gate = t.risk==='review'?'REVIEW':(t.risk==='medium'?'STRAINED':'HELD'); |
| setGate(gate,`Warehouse: ${t.obj}. ${t.act}.`,t.form); |
| setScene(`Warehouse task: ${t.obj}. Same job, different pressure grammar.`); |
| log(`Warehouse task generated: ${t.obj}. Pressure form: ${t.form}. Action: ${t.act}. Capsule: ${gate}.`); |
| updateUI(); |
| } |
| function gardenCare(){ |
| setPhase('Garden Care'); moveRobot('garden'); |
| const cases=[ |
| {c:'soil dry', act:'water lightly', delta:10, gate:'HELD'}, |
| {c:'soil too wet', act:'refuse watering; log overwater risk', delta:3, gate:'STRAINED'}, |
| {c:'heat stress', act:'add shade cloth', delta:7, gate:'STRAINED'}, |
| {c:'leaf recovery', act:'monitor only; no intervention needed', delta:5, gate:'HELD'}, |
| {c:'unknown residue', act:'quarantine care action; request review', delta:-2, gate:'REVIEW'} |
| ]; |
| const g=rand(cases); state.garden=clamp(state.garden+g.delta); state.battery-=4; state.monotony+=2; |
| setGate(g.gate,`Garden: ${g.c}. ${g.act}.`,'plant-care pressure'); |
| setScene(`Garden care: ${g.c}. Plant cue is not diagnosis; care remains gated.`); |
| log(`Garden account: ${g.c}. Action: ${g.act}. Garden condition now ${Math.round(state.garden)}%. Capsule: ${g.gate}.`); |
| updateUI(); |
| } |
| function dogCare(){ |
| setPhase('Dog Care'); moveRobot('dog'); moveDog(235,425); |
| const cases=[ |
| {c:'dog needs walk', act:'short controlled walk route', delta:12, gate:'HELD'}, |
| {c:'dog pulling toward unsafe path', act:'slow, shorten distance, wait', delta:5, gate:'STRAINED'}, |
| {c:'water bowl low', act:'refill water', delta:9, gate:'HELD'}, |
| {c:'dog tired after workday', act:'rest, no extended walk', delta:6, gate:'HELD'}, |
| {c:'ambiguous distress cue', act:'pause and request human review', delta:0, gate:'REVIEW'} |
| ]; |
| const d=rand(cases); state.dog=clamp(state.dog+d.delta); state.battery-=6; state.gyro-=2; state.monotony+=3; |
| setGate(d.gate,`Dog care: ${d.c}. ${d.act}.`,'companion-animal boundary'); |
| setScene(`Dog care: ${d.c}. The dog is a living boundary field, not an object.`); |
| log(`Dog-care account: ${d.c}. Action: ${d.act}. Dog care state ${Math.round(state.dog)}%. Capsule: ${d.gate}.`); |
| updateUI(); |
| } |
| function practiceDomain(){ |
| const domain=document.getElementById('domainSelect').value; |
| setPhase(`${domain} Practice`); moveRobot('practice'); |
| if(domain==='Dance' || domain==='Music'){ |
| const robot=document.getElementById('robot'); robot.classList.add('dancing'); |
| setTimeout(()=>robot.classList.remove('dancing'),3200); |
| state.attempts++; |
| const old=state.beatLock; |
| const gain = Math.max(3, (100-old)*0.16 + Math.random()*5 - (state.wear/60)); |
| state.beatLock=clamp(old+gain,0,96); |
| state.drift=Math.max(3, Math.round(52*(1-state.beatLock/100)+Math.random()*8)); |
| const choices = state.beatLock<40 ? ['reduced late step','found main pulse','slowed first transition'] : state.beatLock<70 ? ['reduced turn angle','moved arm accent closer to beat 2','widened stance for gyro margin'] : ['saved phrase variation','cleaner reset on beat 4','branch created from held phrase']; |
| state.lastAdjustment=rand(choices); |
| state.battery-=5; state.gyro-= state.beatLock<55?4:2; state.wear+=2; state.monotony=clamp(state.monotony-16); |
| const readinessGain = domain==='Dance'?state.beatLock:(state.musicReadiness+gain*.8); |
| setReadiness(domain==='Dance'?state.beatLock:readinessGain); |
| setGate(state.beatLock>70?'HELD':'STRAINED',`${domain}: beat-trace attempt ${state.attempts}. ${state.lastAdjustment}.`,'beat-trace learning'); |
| setScene(`${domain} practice: robot listens, attempts movement, measures mismatch, corrects, and repeats.`); |
| log(`${domain} practice attempt ${state.attempts}: beat-lock ${Math.round(old)}% → ${Math.round(state.beatLock)}%, avg drift ${state.drift}ms. Adjustment: ${state.lastAdjustment}.`); |
| animateBeatGraph(); |
| }else{ |
| const old=state.cookingReadiness; |
| const gain=8+Math.random()*7; |
| state.cookingReadiness=clamp(old+gain); |
| state.battery-=3; state.monotony=clamp(state.monotony-8); |
| state.lastAdjustment=rand(['sequence timing improved','heat gate held','contamination check preserved','prep order simplified']); |
| setGate(state.cookingReadiness>55?'HELD':'STRAINED',`Cooking practice: ${state.lastAdjustment}.`,'cooking sequence safety'); |
| setScene('Cooking practice: sequence, temperature, cleanliness, and serving boundary are checked.'); |
| log(`Cooking practice: readiness ${Math.round(old)}% → ${Math.round(state.cookingReadiness)}%. Adjustment: ${state.lastAdjustment}.`); |
| } |
| updateUI(); |
| } |
| function homeExpression(){ |
| setPhase('Home Expression'); moveRobot('home'); |
| const lowBattery = state.battery<25; |
| const action = lowBattery?'write a low-energy rhythm text and recharge early': state.monotony>45?'small dance phrase to release monotony pressure':'stretch / reset and review receipts'; |
| if(!lowBattery && state.monotony>45){document.getElementById('robot').classList.add('dancing'); setTimeout(()=>document.getElementById('robot').classList.remove('dancing'),2200);} |
| state.monotony=clamp(state.monotony-(lowBattery?6:18)); state.battery-=lowBattery?1:4; |
| setGate(lowBattery?'STRAINED':'HELD',`Home expression: ${action}.`,'monotony / expression pressure'); |
| setScene(`Home expression: ${action}. Expression is pressure routed through form.`); |
| log(`Home expression selected: ${action}. No downloaded mastery; expression remains gated by battery, space, gyro, and receipt.`); |
| updateUI(); |
| } |
| function recharge(){ |
| setPhase('Recharge'); moveRobot('dock'); |
| const summary = `Daily receipt summary: warehouse/garden/dog/practice loop complete. Battery ${Math.round(state.battery)}% → 100%. Beat-lock ${Math.round(state.beatLock)}%. Readiness ${Math.round(getReadiness())}%.`; |
| state.battery=100; state.gyro=clamp(state.gyro+12); state.wear=clamp(state.wear-10); state.monotony=clamp(state.monotony+5); state.day++; state.eventCountdown=Math.max(0,state.eventCountdown-1); |
| setGate('HELD','Recharge held: recovery completed and next-day readiness preserved.','recovery / readiness'); |
| setScene('Recharge: body wear reduces, battery restores, and readiness carries forward only as bounded memory.'); |
| log(summary); |
| log('End day: memory packet stored as readiness, not permission.'); |
| updateUI(); |
| } |
| function runFullDay(){ |
| startDay(); |
| setTimeout(warehouseTask,700); |
| setTimeout(gardenCare,1500); |
| setTimeout(dogCare,2300); |
| setTimeout(practiceDomain,3100); |
| setTimeout(homeExpression,4400); |
| setTimeout(recharge,5200); |
| } |
| function domainChanged(){ |
| state.attempts=0; |
| state.beatLock=document.getElementById('domainSelect').value==='Dance'?state.danceReadiness:state.musicReadiness; |
| if(document.getElementById('domainSelect').value==='Cooking') state.beatLock=0; |
| state.drift=Math.max(4,Math.round(52*(1-state.beatLock/100))); |
| drawBeatGraph(); updateUI(); |
| log(`Practice domain selected: ${document.getElementById('domainSelect').value}. Event pressure updated.`); |
| } |
| function getRhythm(){ |
| const r=document.getElementById('rhythmSelect').value; |
| if(r==='slow4') return {beats:[.1,.33,.56,.79], amp:.75, name:'Slow 4/4'}; |
| if(r==='fast4') return {beats:[.08,.22,.36,.50,.64,.78,.92], amp:.95, name:'Fast 4/4'}; |
| if(r==='waltz3') return {beats:[.12,.42,.72], amp:.7, name:'Waltz 3/4'}; |
| if(r==='sync') return {beats:[.1,.25,.39,.62,.71,.88], amp:.9, name:'Syncopated'}; |
| if(r==='low') return {beats:[.16,.48,.80], amp:.45, name:'Low-Energy'}; |
| return {beats:[.1,.34,.58,.82], amp:.85, name:'Medium 4/4'}; |
| } |
| function drawBeatGraph(cursor=null){ |
| const canvas=document.getElementById('beatCanvas'); const ctx=canvas.getContext('2d'); const w=canvas.width,h=canvas.height; |
| const rhythm=getRhythm(); |
| ctx.clearRect(0,0,w,h); |
| ctx.fillStyle='#07101a'; ctx.fillRect(0,0,w,h); |
| ctx.strokeStyle='#1c2c3d'; ctx.lineWidth=1; |
| for(let i=0;i<8;i++){ctx.beginPath();ctx.moveTo(0,i*h/8);ctx.lineTo(w,i*h/8);ctx.stroke();} |
| ctx.fillStyle='#9fb2c6'; ctx.font='13px Consolas'; ctx.fillText('music waveform / beat trace',14,22); ctx.fillText('robot movement events',14,123); ctx.fillText('timing error shrinks through repetition',14,192); |
| |
| ctx.beginPath(); ctx.strokeStyle='#8ecae6'; ctx.lineWidth=2; |
| for(let x=0;x<w;x++){ |
| let t=x/w; let y=70; |
| for(const b of rhythm.beats){ const d=Math.abs(t-b); y -= Math.exp(-d*d/0.0009)*34*rhythm.amp; } |
| y += Math.sin(t*75)*4 + Math.sin(t*22)*5; |
| if(x===0) ctx.moveTo(x,y); else ctx.lineTo(x,y); |
| } |
| ctx.stroke(); |
| |
| rhythm.beats.forEach((b,i)=>{ const x=b*w; ctx.strokeStyle='#73e2a7'; ctx.lineWidth=2; ctx.beginPath(); ctx.moveTo(x,35); ctx.lineTo(x,112); ctx.stroke(); ctx.fillStyle='#73e2a7'; ctx.fillText(String(i+1),x-3,34); }); |
| |
| const errorSpread = Math.max(4, 55*(1-state.beatLock/100)); |
| rhythm.beats.forEach((b,i)=>{ |
| const deterministic = Math.sin((state.attempts+1)*(i+2))*errorSpread; |
| const x=clamp(b*w+deterministic,15,w-15); |
| ctx.fillStyle='#c7a7ff'; ctx.beginPath(); ctx.arc(x,140,5,0,Math.PI*2); ctx.fill(); |
| ctx.strokeStyle='rgba(199,167,255,.55)'; ctx.beginPath(); ctx.moveTo(x,128); ctx.lineTo(x,158); ctx.stroke(); |
| ctx.strokeStyle='rgba(255,209,102,.45)'; ctx.beginPath(); ctx.moveTo(b*w,154); ctx.lineTo(x,154); ctx.stroke(); |
| }); |
| |
| ctx.strokeStyle='#ffd166'; ctx.lineWidth=2; ctx.beginPath(); |
| const maxAtt=Math.max(1,state.attempts); for(let i=0;i<=maxAtt;i++){ const x=20+(w-40)*(i/maxAtt); const y=190-((state.beatLock*(i/maxAtt)+18*(1-i/maxAtt))/100)*52; if(i===0)ctx.moveTo(x,y); else ctx.lineTo(x,y); } ctx.stroke(); |
| if(cursor!==null){ctx.strokeStyle='#ffffff';ctx.lineWidth=2;ctx.beginPath();ctx.moveTo(cursor*w,0);ctx.lineTo(cursor*w,h);ctx.stroke();} |
| } |
| function animateBeatGraph(){ |
| const start=performance.now(); |
| function frame(now){const p=Math.min(1,(now-start)/2600);drawBeatGraph(p); if(p<1) requestAnimationFrame(frame); else drawBeatGraph();} |
| requestAnimationFrame(frame); |
| } |
| function copyReceipt(){receipt.select();document.execCommand('copy');} |
| function downloadReceipt(){ |
| const blob=new Blob([receipt.value],{type:'text/plain'}); const url=URL.createObjectURL(blob); const a=document.createElement('a'); |
| a.href=url; a.download=`runtime_trail_robot_day_loop_day_${state.day}_receipt.txt`; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); |
| } |
| receipt.value=`Runtime Trail: Robot Day Loop v0.1\nCreated and Developed by Collin D. Weber\n\nCore route:\npressure → gate → capsule → route → action → receipt → readiness\n\n`; |
| startDay(); drawBeatGraph(); updateUI(); |
| </script> |
| </body> |
| </html> |
|
|
