Community Appeal Budget Planner
Complete the budget configuration sheet in a community appeal scenario: includes real content, actionable controls, clear status feedback, and layouts that adapt across sizes.
With JavaScript enabled, you can edit, run, and save this example. The fixed source is as follows:
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Community Appeal Budget Planner</title>
<style>
:root { --ink:#111111; --paper:#f8f8f4; --accent:#111111; --secondary:#8d8d88; --line:color-mix(in srgb, var(--ink) 18%, transparent); --shadow:0 24px 60px color-mix(in srgb, var(--ink) 16%, transparent); color-scheme:light; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--paper); }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); font-family:Helvetica,"PingFang SC",sans-serif; background:repeating-linear-gradient(0deg,transparent 0 31px,color-mix(in srgb,var(--ink) 7%,transparent) 32px),var(--paper); }
button,input,select,textarea { color:inherit; font:inherit; }
button,[role="button"],input,select,textarea { accent-color:var(--accent); }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none !important; }
@media (max-width:700px) { .mast h1 { line-height:1.08 !important; letter-spacing:-.035em !important; overflow-wrap:anywhere; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
.page{width:min(1120px,calc(100% - 30px));margin:auto;padding:48px 0 80px}.mast{display:grid;grid-template-columns:1fr auto;border-top:10px solid var(--ink);padding-top:20px;gap:20px;align-items:end;margin-bottom:26px}.mast h1{font-family:Helvetica,"PingFang SC",sans-serif;font-weight:900;font-size:clamp(44px,10vw,106px);letter-spacing:-.075em;margin:0;line-height:.82}.eyebrow{display:inline-block;margin-bottom:12px;padding:5px 8px;color:var(--paper);background:var(--ink);font:900 10px/1 ui-monospace,monospace;letter-spacing:.14em}.intro{max-width:700px;line-height:1.55}.scenario{padding:9px 12px;border:3px solid var(--ink);font-weight:900}.demo{border:3px solid var(--ink);border-radius:0;box-shadow:12px 12px 0 var(--ink);position:relative;min-height:410px;overflow:hidden;padding:clamp(22px,4vw,46px);background:var(--paper)}@media(max-width:700px){.page{width:calc(100% - 18px);padding:20px 0}.mast{grid-template-columns:1fr}.demo{padding:15px}}
.panel{padding:30px;border:0;border-radius:42px 12px;background:color-mix(in srgb,var(--secondary) 18%,var(--paper))}.row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}.stack{display:flex;flex-direction:column;gap:20px}.action{min-height:48px;padding:12px 22px;border:0;border-radius:50% 50% 18px 18px;background:color-mix(in srgb,var(--secondary) 42%,transparent);font-weight:800}.action.primary,.action.is-active{color:var(--paper);background:var(--accent)}.muted{color:color-mix(in srgb,var(--ink) 64%,transparent);line-height:1.7}.status{min-height:25px;margin-top:16px;color:var(--accent)}.metric{font-size:clamp(32px,7vw,66px);font-weight:800}.meter{height:11px;border-radius:50%;background:color-mix(in srgb,var(--ink) 10%,transparent)}.meter>i{display:block;height:100%;border-radius:inherit;background:var(--accent)}.chip{padding:8px 12px;border-radius:50%;background:var(--paper)}
.composition-index{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px}.index-mark{display:grid;align-content:space-between;width:76px;padding:16px 10px;border:1px solid var(--line);color:var(--accent);background:color-mix(in srgb,var(--paper) 82%,transparent);text-align:center}.index-mark strong{font:900 34px/1 ui-monospace,monospace}.index-mark span{writing-mode:vertical-rl;font:800 10px/1.2 ui-monospace,monospace;letter-spacing:.18em}.composition-index .demo{grid-column:1;grid-row:1}.composition-index::before{content:"";position:absolute;left:-12px;top:38px;width:5px;height:45%;background:linear-gradient(var(--accent),var(--secondary))}@media(max-width:700px){.composition-index{grid-template-columns:1fr}.index-mark{grid-row:1;width:auto;grid-template-columns:auto 1fr}.index-mark span{writing-mode:horizontal-tb}.composition-index .demo{grid-row:2}}
.budget-studio{display:grid;gap:16px;max-width:940px;margin:auto}.budget-studio header{display:flex;justify-content:space-between;gap:18px;align-items:end}.budget-studio h2{margin:.3em 0}.budget-studio header label{display:grid;gap:8px;font-weight:800}.budget-studio header select{min-height:42px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}.budget-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.budget-grid article{display:grid;gap:10px;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}.budget-grid strong{font-size:clamp(32px,6vw,52px)}.budget-inline-field{display:grid;gap:6px;font-weight:800}.budget-inline-field input{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}.budget-grid input[type="range"]{width:100%}.budget-ledger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:18px;border-radius:22px;color:var(--paper);background:var(--ink)}.budget-ledger dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-column:1/-1;gap:12px;margin:0}.budget-ledger dl div{display:grid;gap:6px;padding:12px;border:1px solid #ffffff24;border-radius:14px}.budget-ledger dd{margin:0;font-size:28px;font-weight:900}.budget-ledger ol{grid-column:1/-1;display:grid;gap:8px;padding-left:18px;margin:0}@media(max-width:760px){.budget-studio header{align-items:stretch;flex-direction:column}.budget-grid,.budget-ledger dl{grid-template-columns:1fr}.budget-ledger{grid-template-columns:1fr}}.workflow-session{display:grid;gap:14px}.session-command{display:grid;grid-template-columns:1fr auto minmax(170px,.45fr) auto;gap:16px;align-items:end;padding:18px;border-block:4px double var(--ink)}.session-command h2{margin:.2em 0}.session-command output{font:900 clamp(28px,5vw,54px)/1 ui-monospace,monospace}.session-command label{display:grid;grid-template-columns:1fr auto;gap:7px;font-size:12px}.session-command input{grid-column:1/-1;width:100%}#workflowSessionProgress{height:12px;overflow:hidden;border-radius:2px;background:var(--line)}#workflowSessionProgress i{display:block;width:0;height:100%;background:var(--accent)}.session-stage{min-width:0;transition:filter .25s,transform .25s}.session-stage[data-session-phase="running"]{transform:translateY(-3px)}.session-stage[data-session-phase="paused"]{filter:grayscale(.65)}.session-stage[data-session-phase="complete"]{filter:contrast(.78);opacity:.72}.session-log{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}.session-log ol{display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0;list-style:none}.session-log li{padding:5px 8px;border:1px solid var(--line);font-size:12px}@media(max-width:900px){.session-stage{order:-1}.session-command{grid-template-columns:1fr auto}.session-command label{grid-column:1/-1}.session-log{grid-template-columns:1fr}}
</style>
</head>
<body data-aesthetic="monochrome" data-composition="field-index">
<main class="page">
<header class="mast"><div><span class="eyebrow">monochrome / Budget Allocation Form / BEGINNER</span><h1>Community Appeal Budget Planner</h1><p class="intro">Complete the budget configuration sheet in a community appeal scenario: includes real content, actionable controls, clear status feedback, and layouts that adapt across sizes.</p></div><span class="scenario">Community Appeal</span></header>
<div class="composition-index"><section class="demo" aria-label="Community Appeal Budget Allocation Table Interactive Area"><div class="workflow-session"><header class="session-command"><div><span class="eyebrow">Community Appeal SESSION</span><h2>Community Appeals Timer</h2></div><output id="workflowSessionClock">00:45</output><label>Round Duration<input id="workflowSessionLength" type="range" min="15" max="90" step="15" value="45"><span>sec</span></label><button id="workflowSessionToggle" class="action primary" type="button">Start confirmation submission</button></header><div id="workflowSessionProgress" role="progressbar" aria-label="Community Appeal Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><i></i></div><section id="workflowCore" class="workflow-core session-stage" data-session-phase="ready" tabindex="-1"><!-- 11DZ_CORE_START:forms-input-budget-builder --><section class="budget-studio"><header><div><span class="eyebrow">BUDGET BUILDER</span><h2>Community Appeal Budget Pool</h2><p>Turn the budget into drag-and-drop quotas, then sync them to the key summary on the right.</p></div><label>Budget tier <select id="budgetPreset"><option value="520">Compact · ¥520</option><option value="760" selected>Standard · ¥760</option><option value="980">Expand · ¥980</option></select></label></header><div class="budget-grid"><article><span>Venue</span><strong id="budgetCardValue0">¥120</strong><label class="budget-inline-field"><span>Direct input</span><input data-budget-line="0" type="number" min="40" max="320" step="10" value="120" aria-label="Venue budget values" data-core-bridge="forms-input-budget-builder"></label><input data-budget-range="0" type="range" min="40" max="320" step="10" value="120" aria-label="Venue budget"><small>Priority Protection</small></article><article><span>Materials</span><strong id="budgetCardValue1">¥160</strong><label class="budget-inline-field"><span>Direct input</span><input data-budget-line="1" type="number" min="40" max="320" step="10" value="160" aria-label="Material budget value"></label><input data-budget-range="1" type="range" min="40" max="320" step="10" value="160" aria-label="Material budget"><small>Flexible adjustment possible</small></article><article><span>Transportation</span><strong id="budgetCardValue2">¥200</strong><label class="budget-inline-field"><span>Direct input</span><input data-budget-line="2" type="number" min="40" max="320" step="10" value="200" aria-label="Transportation Budget Values"></label><input data-budget-range="2" type="range" min="40" max="320" step="10" value="200" aria-label="Transportation Budget"><small>Priority Protection</small></article><article><span>Catering</span><strong id="budgetCardValue3">¥240</strong><label class="budget-inline-field"><span>Direct input</span><input data-budget-line="3" type="number" min="40" max="320" step="10" value="240" aria-label="Catering budget values"></label><input data-budget-range="3" type="range" min="40" max="320" step="10" value="240" aria-label="Catering budget"><small>Flexible adjustment possible</small></article></div><aside class="budget-ledger"><dl><div><dt>Budget cap</dt><dd id="budgetLimit">¥760</dd></div><div><dt>Current total</dt><dd id="budgetTotal">¥0</dd></div><div><dt>Remaining space</dt><dd id="budgetBalance">¥0</dd></div></dl><ol id="budgetHighlights"><li>Waiting to be reassigned</li></ol></aside></section><!-- 11DZ_CORE_END --></section><footer class="session-log"><strong id="workflowSessionScore">0 interaction checkpoints</strong><ol id="workflowSessionLaps" aria-label="Round Log"></ol></footer></div><p id="status" class="status" role="status" aria-live="polite"></p></section><aside class="index-mark" aria-hidden="true"><strong>05</strong><span>Community Request FIELD INDEX</span></aside></div>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:forms-input-budget-builder */
const budgetRanges=[...document.querySelectorAll('[data-budget-range]')];const budgetNumbers=[...document.querySelectorAll('[data-budget-line]')];const budgetPreset=document.querySelector('#budgetPreset');const budgetNames=["Venue","Materials","Transportation","Catering"];function syncBudgetValue(index,next){const value=Math.min(320,Math.max(40,Math.round((Number(next)||40)/10)*10));budgetRanges[index].value=String(value);budgetNumbers[index].value=String(value);return value;}function renderBudgetStudio(){const limit=Math.max(0,Number(budgetPreset.value)||0);const entries=budgetRanges.map((input,index)=>({name:budgetNames[index],value:syncBudgetValue(index,input.value),index}));const total=entries.reduce((sum,entry)=>sum+entry.value,0);entries.forEach(entry=>{document.querySelector('#budgetCardValue'+entry.index).textContent='¥'+entry.value;});document.querySelector('#budgetLimit').textContent='¥'+limit;document.querySelector('#budgetTotal').textContent='¥'+total;const balance=limit-total;document.querySelector('#budgetBalance').textContent=(balance>=0?'Remaining ':'Over ')+'¥'+Math.abs(balance);const highlights=entries.slice().sort((left,right)=>right.value-left.value).slice(0,3);document.querySelector('#budgetHighlights').replaceChildren(...highlights.map((entry,rank)=>{const item=document.createElement('li');item.textContent='Key focus '+(rank+1)+' · '+entry.name+' · ¥'+entry.value;return item;}));announce('Total Budget '+total+' yuan');}budgetRanges.forEach((input,index)=>input.addEventListener('input',()=>{syncBudgetValue(index,input.value);renderBudgetStudio();}));budgetNumbers.forEach((input,index)=>input.addEventListener('input',()=>{syncBudgetValue(index,input.value);renderBudgetStudio();}));budgetPreset.addEventListener('change',renderBudgetStudio);renderBudgetStudio();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"forms-input-budget-builder","selector":"[data-core-bridge=\"forms-input-budget-builder\"]","mode":"number","key":"ArrowUp"};const workflowBridgeCore=document.querySelector('#workflowCore');const workflowBridgeControl=workflowBridgeCore.querySelector(workflowBridgeSpec.selector);if(!workflowBridgeControl)throw new Error('Missing core bridge: '+workflowBridgeSpec.name);const workflowBridgeControlledId=workflowBridgeControl.getAttribute('aria-controls');const workflowBridgeControlled=workflowBridgeControlledId?document.getElementById(workflowBridgeControlledId):null;workflowBridgeCore.dataset.workflowBridge=workflowBridgeSpec.name;workflowBridgeCore.dataset.workflowVersion='0';function workflowBridgeSerialize(){const visualNode=workflowBridgeCore.firstElementChild||workflowBridgeCore;const visual=getComputedStyle(visualNode);const outputs=[...workflowBridgeCore.querySelectorAll('output,[role="status"],[aria-live],meter,progress')].map(node=>node.textContent.trim()+'|'+node.getAttribute('aria-valuenow')+'|'+node.getAttribute('value'));const canvas=[...workflowBridgeCore.querySelectorAll('canvas')].map(node=>{try{return node.toDataURL().slice(-160);}catch{return 'canvas-unavailable';}});return JSON.stringify({html:workflowBridgeCore.innerHTML,status:statusOutput.textContent,outputs,canvas,visual:[visual.display,visual.visibility,visual.opacity,visual.transform,visual.filter,visual.backgroundColor,visual.width,visual.height],scroll:workflowBridgeSpec.mode==='scroll'?workflowBridgeControl.scrollTop:null});}let workflowBridgeLastEffect=workflowBridgeSerialize();function workflowBridgeSummary(){const label=(workflowBridgeControl.getAttribute('aria-label')||workflowBridgeControl.textContent||workflowBridgeControl.value||workflowBridgeSpec.name).trim().replace(/\s+/g,' ').slice(0,72);return label+' · Core Version '+workflowBridgeCore.dataset.workflowVersion;}function workflowBridgeCommit(){const effect=workflowBridgeSerialize();if(effect===workflowBridgeLastEffect)return {changed:false,summary:workflowBridgeSummary()};workflowBridgeLastEffect=effect;workflowBridgeCore.dataset.workflowVersion=String(Number(workflowBridgeCore.dataset.workflowVersion||0)+1);return {changed:true,summary:workflowBridgeSummary()};}function workflowBridgeScheduleCommit(){queueMicrotask(workflowBridgeCommit);setTimeout(workflowBridgeCommit,0);}workflowBridgeControl.addEventListener("input",workflowBridgeScheduleCommit);workflowBridgeControl.addEventListener('change',workflowBridgeScheduleCommit);const workflowBridgeStateTargets=new Set(workflowBridgeCore.querySelectorAll('dialog'));if(workflowBridgeControlled&&workflowBridgeCore.contains(workflowBridgeControlled))workflowBridgeStateTargets.add(workflowBridgeControlled);workflowBridgeStateTargets.forEach(target=>['close','cancel','toggle'].forEach(eventName=>target.addEventListener(eventName,workflowBridgeScheduleCommit)));function workflowBridgeActivate(){workflowBridgeControl.focus();const step=Number(workflowBridgeControl.step)||1;const min=workflowBridgeControl.min===''?-Infinity:Number(workflowBridgeControl.min);const max=workflowBridgeControl.max===''?Infinity:Number(workflowBridgeControl.max);let next=Math.min(max,Math.max(min,(Number(workflowBridgeControl.value)||0)+step));if(next===Number(workflowBridgeControl.value))next=Math.max(min,Number(workflowBridgeControl.value)-step);workflowBridgeControl.value=String(next);workflowBridgeControl.dispatchEvent(new Event('input',{bubbles:true}));workflowBridgeControl.dispatchEvent(new Event('change',{bubbles:true}));const result=workflowBridgeCommit();setTimeout(workflowBridgeCommit,0);return result;}function workflowBridgeReset(){workflowBridgeCore.dataset.workflowVersion='0';workflowBridgeLastEffect=workflowBridgeSerialize();}
const workflowSessionCore=document.querySelector('#workflowCore');const workflowSessionToggle=document.querySelector('#workflowSessionToggle');const workflowSessionLength=document.querySelector('#workflowSessionLength');const workflowSessionState={phase:'ready',elapsed:0,limit:Number(workflowSessionLength.value),checkpoints:[],timer:null};function workflowSessionFormat(seconds){return String(Math.floor(seconds/60)).padStart(2,'0')+':'+String(seconds%60).padStart(2,'0');}function workflowSessionDrive(){const percent=Math.min(100,Math.round(workflowSessionState.elapsed/workflowSessionState.limit*100));document.querySelector('#workflowSessionClock').textContent=workflowSessionFormat(Math.max(0,workflowSessionState.limit-workflowSessionState.elapsed));const progress=document.querySelector('#workflowSessionProgress');progress.setAttribute('aria-valuenow',String(percent));progress.querySelector('i').style.width=percent+'%';workflowSessionCore.dataset.sessionPhase=workflowSessionState.phase;document.querySelector('#workflowSessionScore').textContent=workflowSessionState.checkpoints.length+' interactive checkpoints';}function workflowSessionLap(label){workflowSessionState.checkpoints.push({label,at:workflowSessionState.elapsed});const item=document.createElement('li');item.textContent=label+' · '+workflowSessionFormat(workflowSessionState.elapsed);document.querySelector('#workflowSessionLaps').append(item);workflowSessionDrive();}function workflowSessionStop(complete=false){clearInterval(workflowSessionState.timer);workflowSessionState.timer=null;workflowSessionState.phase=complete?'complete':'paused';workflowSessionToggle.textContent=complete?'Restart':'Continue round';workflowSessionToggle.setAttribute('aria-pressed','false');workflowSessionDrive();announce(complete?'Community Appeal Round Complete':'Round paused');}function workflowSessionStart(){if(workflowSessionState.phase==='complete'){workflowSessionState.elapsed=0;workflowSessionState.checkpoints=[];document.querySelector('#workflowSessionLaps').replaceChildren();}workflowSessionState.phase='running';workflowSessionToggle.textContent='Pause round';workflowSessionToggle.setAttribute('aria-pressed','true');const bridge=workflowBridgeActivate();workflowSessionLap(bridge.summary);clearInterval(workflowSessionState.timer);workflowSessionState.timer=setInterval(()=>{workflowSessionState.elapsed+=1;if(workflowSessionState.elapsed>=workflowSessionState.limit){workflowSessionStop(true);return;}workflowSessionDrive();},1000);workflowSessionDrive();announce('Community appeal round has started · '+bridge.summary);}workflowSessionToggle.addEventListener('click',()=>workflowSessionState.phase==='running'?workflowSessionStop():workflowSessionStart());workflowSessionLength.addEventListener('input',()=>{workflowSessionState.limit=Number(workflowSessionLength.value);workflowSessionState.elapsed=Math.min(workflowSessionState.elapsed,workflowSessionState.limit);workflowSessionDrive();});workflowSessionCore.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){workflowSessionLap('Keyboard Interaction');}});workflowSessionCore.addEventListener('click',event=>{if(event.target.closest('[data-core-bridge]'))workflowSessionLap('Core action · '+workflowBridgeSummary());});document.addEventListener('visibilitychange',()=>{if(document.hidden&&workflowSessionState.phase==='running')workflowSessionStop();});workflowSessionDrive();
workflowBridgeReset();
</script>
</body>
</html>