![[Pasted image 20250102102621.png]]
#### Web Page Example Code
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Community Voting Interface</title>
<style>
:root {
--primary: #2563eb;
--success: #22c55e;
--danger: #ef4444;
}
body {
font-family: system-ui, -apple-system, sans-serif;
line-height: 1.5;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
background: #f9fafb;
}
.card {
background: white;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
padding: 24px;
margin-bottom: 24px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.badge {
padding: 4px 12px;
border-radius: 9999px;
font-size: 14px;
font-weight: 500;
}
.badge-success {
background: var(--success);
color: white;
}
.badge-danger {
background: var(--danger);
color: white;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.button {
padding: 8px 16px;
border-radius: 6px;
border: 1px solid #e5e7eb;
background: white;
cursor: pointer;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.button:hover {
background: #f9fafb;
}
.button-primary {
background: var(--primary);
color: white;
border: none;
}
.button-primary:hover {
background: #1d4ed8;
}
.rationale-item {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.vote-section {
border-top: 1px solid #e5e7eb;
padding-top: 24px;
margin-top: 24px;
}
.commitment-buttons {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 16px;
}
.input {
width: 100%;
padding: 8px;
border: 1px solid #e5e7eb;
border-radius: 6px;
}
</style>
</head>
<body>
<div class="card">
<div class="header">
<div>
<h1>Community Bathing Facility Proposal</h1>
<p>Sponsored by Community Wellness Team</p>
</div>
<span class="badge badge-success">68% Support</span>
</div>
<p>Construction of a multi-pool bathing facility with varying temperatures, indoor/outdoor spaces, and natural landscaping to serve 1000-person community plus visitors.</p>
<div class="grid">
<div>
<h3>Community Demands</h3>
<ul id="demands"></ul>
</div>
<div>
<h3>Expected Outputs</h3>
<ul id="outputs"></ul>
</div>
</div>
<div class="grid">
<div>
<h3 style="color: var(--success)">Supporting Rationales</h3>
<div id="proRationales"></div>
</div>
<div>
<h3 style="color: var(--danger)">Opposing Rationales</h3>
<div id="conRationales"></div>
</div>
</div>
<div class="vote-section">
<h3>Cast Your Vote</h3>
<div style="display: flex; gap: 16px; margin-bottom: 24px;">
<button class="button button-primary" onclick="vote('for')" id="voteFor">Support</button>
<button class="button" onclick="vote('against')" id="voteAgainst">Oppose</button>
</div>
<h4>Commitment Level</h4>
<div class="commitment-buttons" id="commitmentButtons"></div>
<div style="margin-top: 24px;">
<h4>Add New Rationale</h4>
<div style="display: flex; gap: 8px;">
<input type="text" class="input" id="newRationale" placeholder="Enter your rationale...">
<button class="button" onclick="submitRationale()">Submit</button>
</div>
</div>
</div>
</div>
<script>
const data = {
systemsImpact: {
demands: [
"Initial $450k + 2000hrs labor",
"0.5 acre land + water rights",
"478hrs/year maintenance",
"$73.2k annual operating cost"
],
outputs: [
"$30-40k annual revenue",
"Capacity for 50-75 people",
"4-5 temperature-varied pools",
"Year-round operation"
]
},
proRationales: [
{ id: 1, text: "Creates essential community gathering space", votes: 45 },
{ id: 2, text: "Provides year-round health benefits", votes: 38 },
{ id: 3, text: "Revenue from external visitors offsets costs", votes: 32 }
],
conRationales: [
{ id: 1, text: "Should expand capacity to 100+ for more revenue", votes: 25 },
{ id: 2, text: "Reduce scope to lower initial investment", votes: 20 },
{ id: 3, text: "Add dedicated therapy pool for elderly", votes: 15 }
],
commitmentLevels: [
{ label: "Actively support", value: "help" },
{ label: "Accept outcome", value: "neutral" },
{ label: "Cannot accept opposing outcome", value: "quit" }
]
};
// Initialize the UI
function initializeUI() {
// Populate demands
const demandsList = document.getElementById('demands');
data.systemsImpact.demands.forEach(demand => {
const li = document.createElement('li');
li.textContent = demand;
demandsList.appendChild(li);
});
// Populate outputs
const outputsList = document.getElementById('outputs');
data.systemsImpact.outputs.forEach(output => {
const li = document.createElement('li');
li.textContent = output;
outputsList.appendChild(li);
});
// Populate rationales
const proContainer = document.getElementById('proRationales');
data.proRationales.forEach(rationale => {
proContainer.appendChild(createRationaleElement(rationale, 'pro'));
});
const conContainer = document.getElementById('conRationales');
data.conRationales.forEach(rationale => {
conContainer.appendChild(createRationaleElement(rationale, 'con'));
});
// Populate commitment buttons
const commitmentContainer = document.getElementById('commitmentButtons');
data.commitmentLevels.forEach(level => {
const button = document.createElement('button');
button.className = 'button';
button.textContent = level.label;
button.onclick = () => setCommitment(level.value);
commitmentContainer.appendChild(button);
});
}
function createRationaleElement(rationale, type) {
const div = document.createElement('div');
div.className = 'rationale-item';
const button = document.createElement('button');
button.className = 'button';
button.onclick = () => voteRationale(rationale.id, type);
button.innerHTML = `👍 ${rationale.votes}`;
const span = document.createElement('span');
span.textContent = rationale.text;
div.appendChild(button);
div.appendChild(span);
return div;
}
let currentVote = null;
let currentCommitment = null;
function vote(type) {
currentVote = type;
document.getElementById('voteFor').className =
`button ${type === 'for' ? 'button-primary' : ''}`;
document.getElementById('voteAgainst').className =
`button ${type === 'against' ? 'button-primary' : ''}`;
}
function setCommitment(level) {
currentCommitment = level;
const buttons = document.querySelectorAll('#commitmentButtons .button');
buttons.forEach(button => {
button.className = 'button';
if (button.textContent === data.commitmentLevels.find(l => l.value === level).label) {
button.className = 'button button-primary';
}
});
}
function voteRationale(id, type) {
const rationales = type === 'pro' ? data.proRationales : data.conRationales;
const rationale = rationales.find(r => r.id === id);
rationale.votes++;
document.getElementById(type + 'Rationales').innerHTML = '';
rationales.forEach(r => {
document.getElementById(type + 'Rationales')
.appendChild(createRationaleElement(r, type));
});
}
function submitRationale() {
const input = document.getElementById('newRationale');
const text = input.value.trim();
if (text) {
const newRationale = {
id: Date.now(),
text: text,
votes: 1
};
data.proRationales.push(newRationale);
document.getElementById('proRationales').appendChild(
createRationaleElement(newRationale, 'pro')
);
input.value = '';
}
}
// Initialize the UI when the page loads
initializeUI();
</script>
</body>
</html>
```