Spaces:
Sleeping
Sleeping
File size: 2,895 Bytes
3c4d71f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | {% extends "base.html" %}
{% block title %}Election Process — Step by Step Guide{% endblock %}
{% block content %}
<section class="page-header">
<h1>Election Process Guide</h1>
<p class="page-sub">Follow these 5 steps to participate in the India 2026 General Election.</p>
</section>
<div class="progress-bar-container" aria-label="Process steps progress">
<div class="progress-track">
<div class="progress-fill" id="progress-fill" style="width:0%"></div>
</div>
<span class="progress-label" id="progress-label">Loading…</span>
</div>
<div id="process-steps" class="process-steps">
<p class="loading-text">Loading process steps…</p>
</div>
{% endblock %}
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
fetch('/api/steps')
.then(r => r.json())
.then(data => {
const container = document.getElementById('process-steps');
const total = data.length;
document.getElementById('progress-label').textContent = total + ' steps';
document.getElementById('progress-fill').style.width = '100%';
container.innerHTML = data.map((step, idx) => `
<div class="step-card glass" style="animation-delay:${idx * 0.1}s">
<div class="step-number">${step.step_number}</div>
<div class="step-body">
<h2>${step.title}</h2>
<p>${step.description}</p>
<div class="step-details">
<h3>Key Points</h3>
<ul class="kp-list">
${step.key_points.map(p => '<li>' + p + '</li>').join('')}
</ul>
${step.resources && step.resources.length ? `
<h3>Resources</h3>
<ul class="res-list">
${step.resources.map(r =>
typeof r === 'object'
? '<li><a href="' + r.url + '" target="_blank" rel="noopener">' + r.name + '</a></li>'
: '<li>' + r + '</li>'
).join('')}
</ul>
` : ''}
</div>
<div class="step-meta">
<span class="badge badge-medium">⏱ ${step.estimated_time}</span>
</div>
</div>
</div>
`).join('');
})
.catch(err => {
document.getElementById('process-steps').innerHTML =
'<p class="error-text">Error loading steps: ' + err.message + '</p>';
});
});
</script>
{% endblock %}
|