${this.error}
+ ` : ''}
+
+
+
+ `;
+
+ case 'election':
+ return this.renderElectionScreen();
+
+ case 'question':
+ return html`Loading election...
+Question screen - to be implemented in Phase 2
`; + + case 'review': + return html`Review screen - to be implemented in Phase 3
`; + + case 'submit': + return html`Submit screen - to be implemented in Phase 3
`; + + case 'audit': + return html`Audit screen - to be implemented in Phase 3
`; + + default: + return html`Unknown screen
`; + } + } + + /** + * Render the election info screen (start screen). + */ + private renderElectionScreen() { + if (!this.election) { + return html` +
+
+ `;
+ }
+
+ return html`
+ Loading election information...
+${this.election.name}
+ + ${this.election.description ? html` +
+
+ ` : ''}
+
+ ${this.election.description}
+
+
+
+
+
+ ${this.electionMetadata?.help_email ? html`
+ To vote, follow these steps:
+-
+
- Select your preferred options. +
- Review your choices, which are then encrypted. +
- Submit your encrypted ballot and authenticate to verify your eligibility. +
+ You can + + email for help + . +
+ ` : ''} +Loading question...
`; + } + + const ordering = this.answerOrdering.length > 0 + ? this.answerOrdering + : this.question.answers.map((_, i) => i); + + const isFirstQuestion = this.questionIndex === 0; + const isLastQuestion = this.questionIndex === this.totalQuestions - 1; + + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'question-screen': QuestionScreen; + } +} +``` + +**Step 2: Verify TypeScript compiles** + +Run: +```bash +cd heliosbooth2026 && npx tsc --noEmit +``` +Expected: No errors + +**Step 3: Commit** + +```bash +git add heliosbooth2026/src/screens/question-screen.ts +git commit -m "feat(booth2026): add question-screen component with answer selection" +``` + +--- + +## Task 2: Integrate Question Screen into Booth App + +**Files:** +- Modify: `heliosbooth2026/src/booth-app.ts` + +**Step 1: Add import for question-screen** + +At the top of `heliosbooth2026/src/booth-app.ts`, after the existing imports, add: + +```typescript +import './screens/question-screen.js'; +import type { AnswerChangeEvent, NavigationEvent } from './screens/question-screen.js'; +``` + +**Step 2: Add event handlers for answer changes and navigation** + +In the `BoothApp` class, add these methods after the `startVoting()` method: + +```typescript + /** + * Handle answer selection changes from question screen. + */ + private handleAnswerChange(event: CustomEventQuestion screen - to be implemented in Phase 2
`; +``` + +With: +```typescript + case 'question': + return this.renderQuestionScreen(); +``` + +**Step 4: Add the renderQuestionScreen method** + +Add this method to the `BoothApp` class: + +```typescript + /** + * Render the question screen. + */ + private renderQuestionScreen() { + if (!this.election) { + return html`Loading...
`; + } + + const question = this.election.questions[this.currentQuestionIndex]; + const ordering = this.election.question_answer_orderings?.[this.currentQuestionIndex] + ?? question.answers.map((_, i) => i); + + // Show review button once user has seen the last question + // or if they're on the last question + const showReview = this.allQuestionsSeen || + this.currentQuestionIndex === this.election.questions.length - 1; + + return html` +Review your Ballot
+ +
+ ${this.questions.map((question, index) => html`
+
+
+
+
+ `)}
+
+ Question #${index + 1}: ${question.short_name}
+ this.handleChangeQuestion(index, e)}>
+ [change]
+
+
+
+ ${this.choices[index]?.length === 0 ? html`
+ No choice selected
+ ` : this.choices[index]?.map(choice => html`
+ ${choice}
+ `)}
+
+ ${this.choices[index]?.length < question.max ? html`
+
+ [${this.choices[index]?.length || 0} selections out of possible ${question.min}-${question.max}]
+
+ ` : ''}
+
+
+
+ Your ballot tracker is:
+
+ ${this.ballotHash || 'Calculating...'}
+
+
+
+
+
+
+
+ ${this.showAuditSection ? html`
+
+
+ ${this.isLoading ? html`
+
+ ` : ''}
+
+ 
+
+
+ ` : ''}
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'review-screen': ReviewScreen;
+ }
+}
+```
+
+**Step 2: Verify TypeScript compiles**
+
+Run:
+```bash
+cd heliosbooth2026 && npx tsc --noEmit
+```
+Expected: No errors
+
+**Step 3: Commit**
+
+```bash
+git add heliosbooth2026/src/screens/review-screen.ts
+git commit -m "feat(booth2026): add review-screen component with ballot summary"
+```
+
+---
+
+## Task 4: Create Submit Screen Component
+
+**Files:**
+- Create: `heliosbooth2026/src/screens/submit-screen.ts`
+
+**Step 1: Create the submit screen component**
+
+Create `heliosbooth2026/src/screens/submit-screen.ts`:
+```typescript
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import type { Election } from '../crypto/types.js';
+
+/**
+ * Submit screen component - final confirmation before ballot submission.
+ */
+@customElement('submit-screen')
+export class SubmitScreen extends LitElement {
+ static styles = css`
+ :host {
+ display: block;
+ }
+
+ h2 {
+ margin-top: 0;
+ }
+
+ .info-section {
+ margin-bottom: var(--spacing-lg, 24px);
+ }
+
+ .info-section p {
+ margin: var(--spacing-sm, 8px) 0;
+ }
+
+ .tracker-section {
+ background-color: var(--color-surface, #f5f5f5);
+ padding: var(--spacing-md, 16px);
+ border-radius: var(--border-radius, 4px);
+ margin-bottom: var(--spacing-lg, 24px);
+ }
+
+ .tracker-hash {
+ font-family: monospace;
+ font-size: 1.1rem;
+ word-break: break-all;
+ }
+
+ .cast-url {
+ font-family: monospace;
+ font-size: 1.1rem;
+ word-break: break-all;
+ background-color: var(--color-surface, #f5f5f5);
+ padding: var(--spacing-sm, 8px);
+ border-radius: var(--border-radius, 4px);
+ }
+
+ .submit-form {
+ margin-top: var(--spacing-lg, 24px);
+ }
+ `;
+
+ @property({ type: Object }) election: Election | null = null;
+ @property({ type: String }) ballotHash: string = '';
+ @property({ type: String }) encryptedVoteJson: string = '';
+
+ /**
+ * Handle form submission - allow beforeunload to pass.
+ */
+ private handleSubmit(): void {
+ // Dispatch event to let booth-app know we're submitting
+ this.dispatchEvent(new CustomEvent('ballot-submit', {
+ bubbles: true,
+ composed: true
+ }));
+ }
+
+ render() {
+ if (!this.election) {
+ return html`+ Spoil & Audit + [optional] +
+ ${this.auditExpanded ? html` +
+
+ ` : ''}
+ + If you choose, you can spoil this ballot and reveal how your choices + were encrypted. This is an optional auditing process. +
++ You will then be guided to re-encrypt your choices for final casting. +
+ +Loading...
`; + } + + return html` +Submit Your Encrypted Ballot
+ +
+
+
+ + All information, other than your encrypted ballot, + has been removed from memory. +
+
+
+
+ As a reminder, your ballot tracking number is:
+${this.ballotHash}
+
+
+
+
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'submit-screen': SubmitScreen;
+ }
+}
+```
+
+**Step 2: Verify TypeScript compiles**
+
+Run:
+```bash
+cd heliosbooth2026 && npx tsc --noEmit
+```
+Expected: No errors
+
+**Step 3: Commit**
+
+```bash
+git add heliosbooth2026/src/screens/submit-screen.ts
+git commit -m "feat(booth2026): add submit-screen component"
+```
+
+---
+
+## Task 5: Create Audit Screen Component
+
+**Files:**
+- Create: `heliosbooth2026/src/screens/audit-screen.ts`
+
+**Step 1: Create the audit screen component**
+
+Create `heliosbooth2026/src/screens/audit-screen.ts`:
+```typescript
+import { LitElement, html, css } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+
+/**
+ * Events emitted by the audit screen.
+ */
+export interface AuditNavigationEvent {
+ action: 'back-to-voting' | 'post-audit';
+}
+
+/**
+ * Audit screen component - displays audit trail for spoiled ballots.
+ */
+@customElement('audit-screen')
+export class AuditScreen extends LitElement {
+ static styles = css`
+ :host {
+ display: block;
+ }
+
+ h2 {
+ margin-top: 0;
+ }
+
+ .warning {
+ background-color: #fff3cd;
+ border: 1px solid #ffc107;
+ border-radius: var(--border-radius, 4px);
+ padding: var(--spacing-md, 16px);
+ margin-bottom: var(--spacing-lg, 24px);
+ }
+
+ .warning strong {
+ text-decoration: underline;
+ }
+
+ .explanation {
+ margin-bottom: var(--spacing-lg, 24px);
+ }
+
+ .explanation p {
+ margin: var(--spacing-sm, 8px) 0;
+ }
+
+ .audit-trail-section {
+ margin-bottom: var(--spacing-lg, 24px);
+ }
+
+ .audit-textarea {
+ width: 100%;
+ min-height: 200px;
+ font-family: monospace;
+ font-size: var(--font-size-sm, 0.875rem);
+ padding: var(--spacing-sm, 8px);
+ border: 1px solid var(--color-border, #ddd);
+ border-radius: var(--border-radius, 4px);
+ resize: vertical;
+ }
+
+ .instructions {
+ margin: var(--spacing-md, 16px) 0;
+ font-size: var(--font-size-sm, 0.875rem);
+ }
+
+ .actions {
+ display: flex;
+ gap: var(--spacing-md, 16px);
+ flex-wrap: wrap;
+ align-items: center;
+ }
+
+ .post-note {
+ margin-top: var(--spacing-md, 16px);
+ font-size: var(--font-size-sm, 0.875rem);
+ color: var(--color-text-secondary, #666);
+ }
+
+ .post-note strong {
+ color: var(--color-text, #333);
+ }
+ `;
+
+ @property({ type: String }) auditTrail: string = '';
+ @property({ type: String }) electionUrl: string = '';
+ @property({ type: Boolean }) postingAudit: boolean = false;
+
+ @query('#audit_trail') private auditTextarea!: HTMLTextAreaElement;
+
+ /**
+ * Select all text in the audit trail textarea.
+ */
+ private selectAuditTrail(event: Event): void {
+ event.preventDefault();
+ if (this.auditTextarea) {
+ this.auditTextarea.select();
+ }
+ }
+
+ /**
+ * Handle back to voting button click.
+ */
+ private handleBackToVoting(): void {
+ this.dispatchEvent(new CustomEventAccording to the election definition file, this ballot will be submitted to:
+${this.election.cast_url}
+where you will log in to validate your eligibility to vote.
+Your audited ballot
+ +
+
+
+ + IMPORTANT: this ballot, now that it has been audited, + will not be tallied. +
++ To cast a ballot, you must click the "Back to Voting" button below, + re-encrypt it, and choose "cast" instead of "audit." +
+
+
+
+ + Why? Helios prevents you from auditing and casting the + same ballot to provide you with some protection against coercion. +
+ ++ Now what? + Select your ballot audit info, + copy it to your clipboard, then use the + + ballot verifier + + to verify it. +
++ Once you're satisfied, click the "back to voting" button to re-encrypt + and cast your ballot. +
+
+
+
+
+
+ Before going back to voting, you can post this audited ballot to the
+ Helios tracking center so that others might double-check the verification
+ of this ballot.
+
+
+
+
+ Even if you post your audited ballot, you must go back to voting and
+ choose "cast" if you want your vote to count.
+
+
+
+
+
+
+
+
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'audit-screen': AuditScreen;
+ }
+}
+```
+
+**Step 2: Verify TypeScript compiles**
+
+Run:
+```bash
+cd heliosbooth2026 && npx tsc --noEmit
+```
+Expected: No errors
+
+**Step 3: Commit**
+
+```bash
+git add heliosbooth2026/src/screens/audit-screen.ts
+git commit -m "feat(booth2026): add audit-screen component for ballot spoiling"
+```
+
+---
+
+## Task 6: Create Encrypting Screen Component
+
+**Files:**
+- Create: `heliosbooth2026/src/screens/encrypting-screen.ts`
+
+**Step 1: Create the encrypting screen component**
+
+Create `heliosbooth2026/src/screens/encrypting-screen.ts`:
+```typescript
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * Encrypting screen component - shows progress during ballot encryption.
+ */
+@customElement('encrypting-screen')
+export class EncryptingScreen extends LitElement {
+ static styles = css`
+ :host {
+ display: block;
+ text-align: center;
+ padding: var(--spacing-xl, 32px);
+ }
+
+ h2 {
+ margin-bottom: var(--spacing-lg, 24px);
+ }
+
+ .spinner {
+ margin: var(--spacing-lg, 24px) 0;
+ }
+
+ .spinner img {
+ width: 64px;
+ height: 64px;
+ }
+
+ .progress {
+ font-size: var(--font-size-lg, 1.25rem);
+ margin-top: var(--spacing-md, 16px);
+ }
+
+ .note {
+ color: var(--color-text-secondary, #666);
+ margin-top: var(--spacing-lg, 24px);
+ }
+ `;
+
+ @property({ type: Number }) percentDone: number = 0;
+
+ render() {
+ return html`
+ Helios is now encrypting your ballot
+ + + +
+
+ ${this.percentDone}% complete
+
+
+ + This may take up to two minutes. +
+ `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'encrypting-screen': EncryptingScreen; + } +} +``` + +**Step 2: Copy the encrypting.gif from old booth** + +```bash +cp heliosbooth/encrypting.gif heliosbooth2026/ +cp heliosbooth/loading.gif heliosbooth2026/ +``` + +**Step 3: Verify TypeScript compiles** + +Run: +```bash +cd heliosbooth2026 && npx tsc --noEmit +``` +Expected: No errors + +**Step 4: Commit** + +```bash +git add heliosbooth2026/src/screens/encrypting-screen.ts heliosbooth2026/encrypting.gif heliosbooth2026/loading.gif +git commit -m "feat(booth2026): add encrypting-screen with progress display" +``` + +--- + +## Task 7: Integrate Crypto Screens into Booth App + +**Files:** +- Modify: `heliosbooth2026/src/booth-app.ts` + +**Step 1: Add screen imports** + +At the top of `heliosbooth2026/src/booth-app.ts`, after the existing screen import, add: + +```typescript +import './screens/review-screen.js'; +import './screens/submit-screen.js'; +import './screens/audit-screen.js'; +import './screens/encrypting-screen.js'; +import type { ReviewNavigationEvent } from './screens/review-screen.js'; +import type { AuditNavigationEvent } from './screens/audit-screen.js'; +import type { WorkerOutMessage, EncryptedAnswerJSON } from './crypto/types.js'; +``` + +**Step 2: Update the BoothScreen type** + +Find the `BoothScreen` type definition and update it to include 'encrypting': + +```typescript +type BoothScreen = 'loading' | 'election' | 'question' | 'encrypting' | 'review' | 'submit' | 'audit'; +``` + +**Step 3: Add encryption-related state properties** + +In the BoothApp class, add these new state properties after the existing ones: + +```typescript + // Encryption state + @state() private worker: Worker | null = null; + @state() private encryptionProgress: number = 0; + @state() private answerTimestamps: number[] = []; + @state() private dirty: boolean[] = []; + @state() private encryptedBallot: unknown = null; // Full encrypted vote object + @state() private auditTrail: string = ''; + @state() private rawElectionJson: string = ''; + @state() private postingAudit: boolean = false; +``` + +**Step 4: Add worker initialization method** + +Add these methods to the BoothApp class: + +```typescript + /** + * Initialize the encryption worker. + */ + private initializeWorker(): void { + if (this.worker || !this.rawElectionJson) return; + + this.worker = new Worker('/workers/encryption-worker.js'); + + this.worker.onmessage = (event: MessageEvent
+
+ `;
+
+ case 'election':
+ return this.renderElectionScreen();
+
+ case 'question':
+ return this.renderQuestionScreen();
+
+ case 'encrypting':
+ return html`
+ Loading election...
+Unknown screen
`; + } + } +``` + +**Step 11: Update the getProgressStep method** + +```typescript + private getProgressStep(): number { + switch (this.currentScreen) { + case 'question': return 1; + case 'encrypting': + case 'review': return 2; + case 'submit': return 3; + case 'audit': return 4; + default: return 0; + } + } +``` + +**Step 12: Verify TypeScript compiles** + +Run: +```bash +cd heliosbooth2026 && npx tsc --noEmit +``` +Expected: No errors (or only minor type adjustments needed) + +**Step 13: Commit** + +```bash +git add heliosbooth2026/src/booth-app.ts +git commit -m "feat(booth2026): integrate crypto screens and encryption workflow" +``` + +--- + +## Task 8: Verify Complete Phase 3 Implementation + +**Files:** None (verification only) + +**Step 1: Run TypeScript check** + +Run: +```bash +cd heliosbooth2026 && npx tsc --noEmit +``` +Expected: No errors + +**Step 2: Run the build** + +Run: +```bash +cd heliosbooth2026 && npm run build +``` +Expected: Build completes successfully + +**Step 3: Run Django tests** + +Run: +```bash +uv run python manage.py test -v 2 +``` +Expected: All tests pass + +**Step 4: Manual testing** + +Start both servers: +```bash +# Terminal 1 +cd heliosbooth2026 && npm run dev + +# Terminal 2 +uv run python manage.py runserver +``` + +Test with a real election: +1. Create a test election in Helios or use an existing one +2. Access `http://localhost:5173/booth2026/?election_url=http://localhost:8000/helios/elections/Helios Voting Booth
+${this.error}
+ ` : ''}
+
+ Something went wrong
+ + + +
+
+
+ ${this.election?.cast_url ? html`
+
+ ` : ''}
+
+
+
+ `;
+```
+
+Also update the election case to show errors properly:
+
+```typescript
+ case 'election':
+ if (this.error && !this.election) {
+ return this.renderErrorScreen();
+ }
+ return this.renderElectionScreen();
+```
+
+**Step 6: Commit**
+
+```bash
+git add heliosbooth2026/src/booth-app.ts
+git commit -m "feat(booth2026): improve error handling and loading states"
+```
+
+---
+
+## Task 3: Add Responsive CSS and Visual Polish
+
+**Files:**
+- Modify: `heliosbooth2026/src/styles/booth.css`
+
+**Step 1: Update the base CSS with responsive styles**
+
+Replace the content of `heliosbooth2026/src/styles/booth.css`:
+
+```css
+/* Helios Booth 2026 - Base Styles */
+
+:root {
+ --color-primary: #1a73e8;
+ --color-primary-dark: #1557b0;
+ --color-background: #fff;
+ --color-surface: #f5f5f5;
+ --color-border: #ddd;
+ --color-text: #333;
+ --color-text-secondary: #666;
+ --color-success: #28a745;
+ --color-warning: #ffc107;
+ --color-error: #dc3545;
+ --spacing-xs: 4px;
+ --spacing-sm: 8px;
+ --spacing-md: 16px;
+ --spacing-lg: 24px;
+ --spacing-xl: 32px;
+ --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+ --font-size-sm: 0.875rem;
+ --font-size-md: 1rem;
+ --font-size-lg: 1.25rem;
+ --font-size-xl: 1.5rem;
+ --border-radius: 4px;
+ --max-width: 800px;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ font-size: 16px;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ font-family: var(--font-family);
+ font-size: var(--font-size-md);
+ color: var(--color-text);
+ background-color: var(--color-background);
+ line-height: 1.5;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+/* Focus visible for keyboard navigation */
+:focus-visible {
+ outline: 2px solid var(--color-primary);
+ outline-offset: 2px;
+}
+
+/* Remove default focus for mouse users */
+:focus:not(:focus-visible) {
+ outline: none;
+}
+
+/* Utility classes */
+.visually-hidden {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+
+/* Button styles */
+button,
+.button {
+ display: inline-block;
+ padding: var(--spacing-sm) var(--spacing-md);
+ font-family: inherit;
+ font-size: var(--font-size-md);
+ font-weight: 500;
+ text-align: center;
+ text-decoration: none;
+ color: #fff;
+ background-color: var(--color-primary);
+ border: none;
+ border-radius: var(--border-radius);
+ cursor: pointer;
+ transition: background-color 0.2s ease, transform 0.1s ease;
+ min-height: 44px; /* Touch target size */
+ min-width: 44px;
+}
+
+button:hover,
+.button:hover {
+ background-color: var(--color-primary-dark);
+}
+
+button:active,
+.button:active {
+ transform: scale(0.98);
+}
+
+button:disabled,
+.button:disabled {
+ background-color: #ccc;
+ cursor: not-allowed;
+ transform: none;
+}
+
+button:focus-visible,
+.button:focus-visible {
+ outline: 2px solid var(--color-primary);
+ outline-offset: 2px;
+}
+
+/* Secondary button style */
+button.secondary,
+.button.secondary {
+ background-color: transparent;
+ color: var(--color-primary);
+ border: 1px solid var(--color-primary);
+}
+
+button.secondary:hover,
+.button.secondary:hover {
+ background-color: var(--color-surface);
+}
+
+button.secondary:disabled,
+.button.secondary:disabled {
+ color: #999;
+ border-color: #ccc;
+ background-color: transparent;
+}
+
+/* Link styles */
+a {
+ color: var(--color-primary);
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+a:focus-visible {
+ outline: 2px solid var(--color-primary);
+ outline-offset: 2px;
+}
+
+/* Form elements */
+input[type="checkbox"] {
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+}
+
+textarea {
+ font-family: monospace;
+ font-size: var(--font-size-sm);
+}
+
+/* Responsive breakpoints */
+@media (max-width: 600px) {
+ :root {
+ --spacing-md: 12px;
+ --spacing-lg: 16px;
+ --spacing-xl: 24px;
+ --font-size-lg: 1.125rem;
+ --font-size-xl: 1.25rem;
+ }
+
+ button,
+ .button {
+ width: 100%;
+ justify-content: center;
+ }
+}
+
+/* Print styles */
+@media print {
+ body {
+ background: white;
+ color: black;
+ }
+
+ button,
+ .button {
+ display: none;
+ }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+ :root {
+ --color-border: #000;
+ --color-text-secondary: #000;
+ }
+
+ button,
+ .button {
+ border: 2px solid currentColor;
+ }
+}
+```
+
+**Step 2: Commit**
+
+```bash
+git add heliosbooth2026/src/styles/booth.css
+git commit -m "feat(booth2026): add responsive CSS and visual polish"
+```
+
+---
+
+## Task 4: Configure Vite for Production Build
+
+**Files:**
+- Modify: `heliosbooth2026/vite.config.ts`
+- Modify: `heliosbooth2026/index.html`
+
+**Step 1: Update vite.config.ts for production**
+
+Update `heliosbooth2026/vite.config.ts`:
+
+```typescript
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+export default defineConfig({
+ root: '.',
+ base: '/booth2026/',
+ build: {
+ outDir: 'dist',
+ // Ensure single bundle for offline operation
+ cssCodeSplit: false,
+ rollupOptions: {
+ input: {
+ main: resolve(__dirname, 'index.html')
+ },
+ output: {
+ // Force everything into single bundle
+ manualChunks: () => 'booth',
+ entryFileNames: 'assets/booth.[hash].js',
+ chunkFileNames: 'assets/booth.[hash].js',
+ assetFileNames: 'assets/booth.[hash].[ext]'
+ }
+ },
+ // Generate sourcemaps for debugging
+ sourcemap: true,
+ // Minify for production
+ minify: 'terser',
+ terserOptions: {
+ compress: {
+ drop_console: false, // Keep console for debugging crypto issues
+ drop_debugger: true
+ }
+ }
+ },
+ server: {
+ port: 5173,
+ // Proxy API requests to Django during development
+ proxy: {
+ '/helios': {
+ target: 'http://localhost:8000',
+ changeOrigin: true
+ }
+ }
+ },
+ // Copy static assets
+ publicDir: 'public'
+});
+```
+
+**Step 2: Update index.html for production paths**
+
+Update `heliosbooth2026/index.html`:
+
+```html
+
+
+
+
+
+
+
+ ${this.isInitializing ? 'Initializing voting booth...' : 'Loading...'}
+This may take a few seconds
+Something went wrong
+ + + +
+
+
+ ${this.election?.cast_url ? html`
+
+ ` : ''}
+
+ Loading...
`; + } + + const question = this.election.questions[this.currentQuestionIndex]; + const ordering = this.election.question_answer_orderings?.[this.currentQuestionIndex] + ?? question.answers.map((_, i) => i); + + // Show review button once user has seen the last question + // or if they're on the last question + const showReview = this.allQuestionsSeen || + this.currentQuestionIndex === this.election.questions.length - 1; + + return html` +Helios Voting Booth
+${this.error}
+ ` : ''}
+
+
+
+ `;
+
+ case 'election':
+ if (this.error && !this.election) {
+ return this.renderErrorScreen();
+ }
+ return this.renderElectionScreen();
+
+ case 'question':
+ return this.renderQuestionScreen();
+
+ case 'encrypting':
+ return html`
+ ${this.isInitializing ? 'Initializing voting booth...' : 'Loading...'}
+This may take a few seconds
+Unknown screen
`; + } + } + + /** + * Render the election info screen (start screen). + */ + private renderElectionScreen() { + if (!this.election) { + return html` +
+
+ `;
+ }
+
+ return html`
+ Loading election information...
+${this.election.name}
+ + ${this.election.description ? html` +
+
+ ` : ''}
+
+ ${this.election.description}
+
+
+
+
+
+ ${this.electionMetadata?.help_email ? html`
+ To vote, follow these steps:
+-
+
- Select your preferred options. +
- Review your choices, which are then encrypted. +
- Submit your encrypted ballot and authenticate to verify your eligibility. +
+ You can + + email for help + . +
+ ` : ''} +Your audited ballot
+ +
+
+
+ + IMPORTANT: this ballot, now that it has been audited, + will not be tallied. +
++ To cast a ballot, you must click the "Back to Voting" button below, + re-encrypt it, and choose "cast" instead of "audit." +
+
+
+
+ + Why? Helios prevents you from auditing and casting the + same ballot to provide you with some protection against coercion. +
+ ++ Now what? + Select your ballot audit info, + copy it to your clipboard, then use the + + ballot verifier + + to verify it. +
++ Once you're satisfied, click the "back to voting" button to re-encrypt + and cast your ballot. +
+
+
+
+
+
+ Before going back to voting, you can post this audited ballot to the
+ Helios tracking center so that others might double-check the verification
+ of this ballot.
+
+
+
+
+ Even if you post your audited ballot, you must go back to voting and
+ choose "cast" if you want your vote to count.
+
+
+
+
+
+
+
+
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'audit-screen': AuditScreen;
+ }
+}
diff --git a/heliosbooth2026/src/screens/encrypting-screen.ts b/heliosbooth2026/src/screens/encrypting-screen.ts
new file mode 100644
index 000000000..7cdcb94ef
--- /dev/null
+++ b/heliosbooth2026/src/screens/encrypting-screen.ts
@@ -0,0 +1,65 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * Encrypting screen component - shows progress during ballot encryption.
+ */
+@customElement('encrypting-screen')
+export class EncryptingScreen extends LitElement {
+ static styles = css`
+ :host {
+ display: block;
+ text-align: center;
+ padding: var(--spacing-xl, 32px);
+ }
+
+ h2 {
+ margin-bottom: var(--spacing-lg, 24px);
+ }
+
+ .spinner {
+ margin: var(--spacing-lg, 24px) 0;
+ }
+
+ .spinner img {
+ width: 64px;
+ height: 64px;
+ }
+
+ .progress {
+ font-size: var(--font-size-lg, 1.25rem);
+ margin-top: var(--spacing-md, 16px);
+ }
+
+ .note {
+ color: var(--color-text-secondary, #666);
+ margin-top: var(--spacing-lg, 24px);
+ }
+ `;
+
+ @property({ type: Number }) percentDone: number = 0;
+
+ render() {
+ return html`
+ Helios is now encrypting your ballot
+ + + +.href})
+
+ ${this.percentDone}% complete
+
+
+ + This may take up to two minutes. +
+ `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'encrypting-screen': EncryptingScreen; + } +} diff --git a/heliosbooth2026/src/screens/question-screen.ts b/heliosbooth2026/src/screens/question-screen.ts new file mode 100644 index 000000000..ca28baa4e --- /dev/null +++ b/heliosbooth2026/src/screens/question-screen.ts @@ -0,0 +1,344 @@ +import { LitElement, html, css } from 'lit'; +import { customElement, property, state } from 'lit/decorators.js'; +import type { Question } from '../crypto/types.js'; + +/** + * Events emitted by the question screen. + */ +export interface AnswerChangeEvent { + questionIndex: number; + answerIndex: number; + selected: boolean; +} + +export interface NavigationEvent { + direction: 'previous' | 'next' | 'review'; +} + +/** + * Question screen component for displaying and selecting answers. + */ +@customElement('question-screen') +export class QuestionScreen extends LitElement { + static styles = css` + :host { + display: block; + } + + .question-header { + margin-bottom: var(--spacing-md, 16px); + } + + .question-text { + font-size: var(--font-size-lg, 1.25rem); + font-weight: bold; + white-space: pre-line; + margin-bottom: var(--spacing-sm, 8px); + } + + .question-meta { + font-size: var(--font-size-sm, 0.875rem); + color: var(--color-text-secondary, #666); + } + + .answers-list { + list-style: none; + padding: 0; + margin: var(--spacing-md, 16px) 0; + } + + .answer-item { + padding: var(--spacing-sm, 8px) var(--spacing-md, 16px); + margin-bottom: var(--spacing-xs, 4px); + border: 1px solid var(--color-border, #ddd); + border-radius: var(--border-radius, 4px); + cursor: pointer; + transition: background-color 0.15s ease, border-color 0.15s ease; + } + + .answer-item:hover { + background-color: var(--color-surface, #f5f5f5); + } + + .answer-item.selected { + background-color: #e3f2fd; + border-color: var(--color-primary, #1a73e8); + } + + .answer-item.disabled { + opacity: 0.5; + cursor: not-allowed; + } + + .answer-item.disabled:hover { + background-color: transparent; + } + + .answer-checkbox { + margin-right: var(--spacing-sm, 8px); + } + + .answer-label { + display: flex; + align-items: flex-start; + gap: var(--spacing-sm, 8px); + } + + .answer-text { + flex: 1; + } + + .answer-link { + font-size: var(--font-size-sm, 0.875rem); + white-space: nowrap; + } + + .warning-box { + color: var(--color-text-secondary, #666); + text-align: center; + font-size: var(--font-size-sm, 0.875rem); + padding: var(--spacing-sm, 8px); + min-height: 50px; + } + + .navigation { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: var(--spacing-lg, 24px); + padding-top: var(--spacing-md, 16px); + border-top: 1px solid var(--color-border, #ddd); + } + + .nav-left { + display: flex; + gap: var(--spacing-sm, 8px); + } + + .nav-right { + display: flex; + gap: var(--spacing-sm, 8px); + } + `; + + // Props from parent + @property({ type: Object }) question: Question | null = null; + @property({ type: Number }) questionIndex: number = 0; + @property({ type: Number }) totalQuestions: number = 0; + @property({ type: Array }) selectedAnswers: number[] = []; + @property({ type: Array }) answerOrdering: number[] = []; + @property({ type: Boolean }) showReviewButton: boolean = false; + + // Local state + @state() private maxReached: boolean = false; + + /** + * Check if maximum selections reached. + */ + private updateMaxReached(): void { + if (!this.question) return; + this.maxReached = this.question.max !== null && + this.selectedAnswers.length >= this.question.max; + } + + updated(changedProperties: MapLoading question...
`; + } + + const ordering = this.answerOrdering.length > 0 + ? this.answerOrdering + : this.question.answers.map((_, i) => i); + + const isFirstQuestion = this.questionIndex === 0; + const isLastQuestion = this.questionIndex === this.totalQuestions - 1; + + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'question-screen': QuestionScreen; + } +} diff --git a/heliosbooth2026/src/screens/review-screen.ts b/heliosbooth2026/src/screens/review-screen.ts new file mode 100644 index 000000000..4a087cf50 --- /dev/null +++ b/heliosbooth2026/src/screens/review-screen.ts @@ -0,0 +1,277 @@ +import { LitElement, html, css } from 'lit'; +import { customElement, property, state } from 'lit/decorators.js'; +import type { Election, ElectionMetadata, Question } from '../crypto/types.js'; + +/** + * Events emitted by the review screen. + */ +export interface ReviewNavigationEvent { + action: 'change-question' | 'cast' | 'audit'; + questionIndex?: number; +} + +/** + * Review screen component - shows ballot summary, hash, and submission options. + */ +@customElement('review-screen') +export class ReviewScreen extends LitElement { + static styles = css` + :host { + display: block; + } + + h2 { + margin-top: 0; + } + + .ballot-summary { + background-color: var(--color-surface, #f5f5f5); + border: 1px solid var(--color-border, #ddd); + border-radius: var(--border-radius, 4px); + padding: var(--spacing-md, 16px); + margin-bottom: var(--spacing-lg, 24px); + } + + .question-summary { + margin-bottom: var(--spacing-md, 16px); + } + + .question-summary:last-child { + margin-bottom: 0; + } + + .question-label { + font-weight: 500; + margin-bottom: var(--spacing-xs, 4px); + } + + .choice { + margin-left: var(--spacing-md, 16px); + padding: var(--spacing-xs, 4px) 0; + } + + .choice::before { + content: '\\2713 '; + color: var(--color-success, #28a745); + } + + .no-choice { + margin-left: var(--spacing-md, 16px); + font-style: italic; + color: var(--color-text-secondary, #666); + } + + .no-choice::before { + content: '\\2610 '; + } + + .selection-info { + font-size: var(--font-size-sm, 0.875rem); + color: var(--color-text-secondary, #666); + margin-left: var(--spacing-md, 16px); + } + + .change-link { + font-size: var(--font-size-sm, 0.875rem); + margin-left: var(--spacing-sm, 8px); + } + + .ballot-tracker { + margin: var(--spacing-lg, 24px) 0; + } + + .tracker-hash { + font-family: monospace; + font-size: var(--font-size-lg, 1.25rem); + word-break: break-all; + background-color: var(--color-surface, #f5f5f5); + padding: var(--spacing-sm, 8px); + border-radius: var(--border-radius, 4px); + } + + .actions { + display: flex; + flex-direction: column; + gap: var(--spacing-md, 16px); + } + + .primary-action { + display: flex; + align-items: center; + gap: var(--spacing-sm, 8px); + } + + .loading-indicator { + display: inline-block; + width: 20px; + height: 20px; + } + + .audit-section { + background-color: lightyellow; + border: 1px solid var(--color-border, #ddd); + padding: var(--spacing-md, 16px); + border-radius: var(--border-radius, 4px); + margin-top: var(--spacing-lg, 24px); + max-width: 400px; + } + + .audit-section h4 { + margin: 0 0 var(--spacing-sm, 8px) 0; + cursor: pointer; + } + + .audit-section h4:hover { + text-decoration: underline; + } + + .audit-content { + font-size: var(--font-size-sm, 0.875rem); + } + + .audit-content p { + margin: var(--spacing-sm, 8px) 0; + } + + .audit-optional { + font-size: 0.8em; + color: #444; + } + `; + + @property({ type: Object }) election: Election | null = null; + @property({ type: Object }) electionMetadata: ElectionMetadata | null = null; + @property({ type: Array }) questions: Question[] = []; + @property({ type: Array }) choices: string[][] = []; + @property({ type: String }) ballotHash: string = ''; + @property({ type: String }) encryptedVoteJson: string = ''; + @property({ type: Boolean }) isLoading: boolean = false; + @property({ type: Boolean }) showAuditSection: boolean = false; + + @state() private auditExpanded: boolean = false; + + /** + * Handle change question link click. + */ + private handleChangeQuestion(index: number, event: Event): void { + event.preventDefault(); + this.dispatchEvent(new CustomEventReview your Ballot
+ +
+ ${this.questions.map((question, index) => html`
+
+
+
+
+ `)}
+
+ Question #${index + 1}: ${question.short_name}
+ this.handleChangeQuestion(index, e)}>
+ [change]
+
+
+
+ ${this.choices[index]?.length === 0 ? html`
+ No choice selected
+ ` : this.choices[index]?.map(choice => html`
+ ${choice}
+ `)}
+
+ ${(this.choices[index]?.length ?? 0) < question.max ? html`
+
+ [${this.choices[index]?.length || 0} selections out of possible ${question.min}-${question.max}]
+
+ ` : ''}
+
+
+
+ Your ballot tracker is:
+
+ ${this.ballotHash || 'Calculating...'}
+
+
+
+
+ ${this.showAuditSection ? html`
+
+
+ ${this.isLoading ? html`
+
+ ` : ''}
+
+ .href}){kind=small}
+
+
+ ` : ''}
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'review-screen': ReviewScreen;
+ }
+}
diff --git a/heliosbooth2026/src/screens/submit-screen.ts b/heliosbooth2026/src/screens/submit-screen.ts
new file mode 100644
index 000000000..50b0094b2
--- /dev/null
+++ b/heliosbooth2026/src/screens/submit-screen.ts
@@ -0,0 +1,84 @@
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import type { Election } from '../crypto/types.js';
+
+/**
+ * Submit screen component - final confirmation before ballot submission.
+ *
+ * Renders to light DOM (no Shadow DOM) so the
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'submit-screen': SubmitScreen;
+ }
+}
diff --git a/heliosbooth2026/src/screens/verify-screen.ts b/heliosbooth2026/src/screens/verify-screen.ts
new file mode 100644
index 000000000..2a0f1af9f
--- /dev/null
+++ b/heliosbooth2026/src/screens/verify-screen.ts
@@ -0,0 +1,325 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, state, query } from 'lit/decorators.js';
+
+/**
+ * Single ballot verifier component.
+ * Verifies that an audited ballot was encrypted correctly.
+ */
+@customElement('verify-screen')
+export class VerifyScreen extends LitElement {
+ static styles = css`
+ :host {
+ display: block;
+ max-width: 800px;
+ margin: 0 auto;
+ padding: var(--spacing-md, 16px);
+ }
+
+ h2 {
+ margin-top: 0;
+ }
+
+ .description {
+ font-size: 1.1rem;
+ margin-bottom: var(--spacing-lg, 24px);
+ }
+
+ label {
+ display: block;
+ font-weight: 500;
+ margin-bottom: var(--spacing-xs, 4px);
+ }
+
+ .field {
+ margin-bottom: var(--spacing-md, 16px);
+ }
+
+ input[type="text"] {
+ width: 100%;
+ padding: var(--spacing-sm, 8px);
+ font-size: var(--font-size-md, 1rem);
+ border: 1px solid var(--color-border, #ddd);
+ border-radius: var(--border-radius, 4px);
+ box-sizing: border-box;
+ }
+
+ textarea {
+ width: 100%;
+ min-height: 180px;
+ padding: var(--spacing-sm, 8px);
+ font-family: monospace;
+ font-size: var(--font-size-sm, 0.875rem);
+ border: 1px solid var(--color-border, #ddd);
+ border-radius: var(--border-radius, 4px);
+ resize: vertical;
+ box-sizing: border-box;
+ }
+
+ .results {
+ margin-top: var(--spacing-lg, 24px);
+ padding: var(--spacing-md, 16px);
+ background-color: var(--color-surface, #f5f5f5);
+ border-radius: var(--border-radius, 4px);
+ font-family: monospace;
+ font-size: var(--font-size-sm, 0.875rem);
+ white-space: pre-wrap;
+ word-break: break-all;
+ }
+
+ .result-line {
+ margin: var(--spacing-xs, 4px) 0;
+ }
+
+ .result-success {
+ color: var(--color-success, #28a745);
+ font-weight: bold;
+ font-size: 1.1rem;
+ margin-top: var(--spacing-md, 16px);
+ }
+
+ .result-failure {
+ color: var(--color-error, #dc3545);
+ font-weight: bold;
+ font-size: 1.1rem;
+ margin-top: var(--spacing-md, 16px);
+ }
+
+ .loading-indicator {
+ display: inline-block;
+ margin-left: var(--spacing-sm, 8px);
+ }
+
+ .error {
+ color: var(--color-error, #dc3545);
+ margin-top: var(--spacing-md, 16px);
+ }
+
+ .cast-warning {
+ background-color: #fff3cd;
+ border: 1px solid #ffc107;
+ border-radius: var(--border-radius, 4px);
+ padding: var(--spacing-md, 16px);
+ margin-top: var(--spacing-md, 16px);
+ }
+ `;
+
+ @state() private electionUrl: string = '';
+ @state() private auditTrail: string = '';
+ @state() private resultLines: string[] = [];
+ @state() private verifying: boolean = false;
+ @state() private finalResult: 'success' | 'failure' | null = null;
+ @state() private errorMessage: string = '';
+ @state() private castBallotWarning: boolean = false;
+
+ @query('#election_url') private electionUrlInput!: HTMLInputElement;
+ @query('#audit_trail') private auditTrailTextarea!: HTMLTextAreaElement;
+
+ connectedCallback(): void {
+ super.connectedCallback();
+ // Pre-fill election URL from query params
+ const params = new URLSearchParams(window.location.search);
+ const url = params.get('election_url');
+ if (url) {
+ this.electionUrl = url;
+ }
+ }
+
+ /**
+ * Start the verification process.
+ */
+ private async handleVerify(e: Event): Promise+ Spoil & Audit + [optional] +
+ ${this.auditExpanded ? html` +
+
+ ` : ''}
+ + If you choose, you can spoil this ballot and reveal how your choices + were encrypted. This is an optional auditing process. +
++ You will then be guided to re-encrypt your choices for final casting. +
+ +Helios Single-Ballot Verifier
+ ++ This verifier lets you enter an audited ballot and verify + that it was prepared correctly. +
+ + + + ${this.errorMessage ? html` +${this.errorMessage}
+ ` : ''} + + ${this.castBallotWarning ? html` +
+
+ ` : ''}
+
+ ${this.resultLines.length > 0 ? html`
+ + It looks like you are trying to verify a cast ballot. + Only audited ballots can be verified. +
+
+ ${this.resultLines.map(line => html`
+
+ ` : ''}
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'verify-screen': VerifyScreen;
+ }
+}
diff --git a/heliosbooth2026/src/styles/booth.css b/heliosbooth2026/src/styles/booth.css
new file mode 100644
index 000000000..f0ff8a57c
--- /dev/null
+++ b/heliosbooth2026/src/styles/booth.css
@@ -0,0 +1,261 @@
+/* Helios Booth 2026 - Base Styles */
+
+:root {
+ --color-primary: #1a73e8;
+ --color-primary-dark: #1557b0;
+ --color-background: #fff;
+ --color-surface: #f5f5f5;
+ --color-border: #ddd;
+ --color-text: #333;
+ --color-text-secondary: #666;
+ --color-success: #28a745;
+ --color-warning: #ffc107;
+ --color-error: #dc3545;
+ --spacing-xs: 4px;
+ --spacing-sm: 8px;
+ --spacing-md: 16px;
+ --spacing-lg: 24px;
+ --spacing-xl: 32px;
+ --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+ --font-size-sm: 0.875rem;
+ --font-size-md: 1rem;
+ --font-size-lg: 1.25rem;
+ --font-size-xl: 1.5rem;
+ --border-radius: 4px;
+ --max-width: 800px;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ font-size: 16px;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ font-family: var(--font-family);
+ font-size: var(--font-size-md);
+ color: var(--color-text);
+ background-color: var(--color-background);
+ line-height: 1.5;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+/* Focus visible for keyboard navigation */
+:focus-visible {
+ outline: 2px solid var(--color-primary);
+ outline-offset: 2px;
+}
+
+/* Remove default focus for mouse users */
+:focus:not(:focus-visible) {
+ outline: none;
+}
+
+/* Utility classes */
+.visually-hidden {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+
+/* Button styles */
+button,
+.button {
+ display: inline-block;
+ padding: var(--spacing-sm) var(--spacing-md);
+ font-family: inherit;
+ font-size: var(--font-size-md);
+ font-weight: 500;
+ text-align: center;
+ text-decoration: none;
+ color: #fff;
+ background-color: var(--color-primary);
+ border: none;
+ border-radius: var(--border-radius);
+ cursor: pointer;
+ transition: background-color 0.2s ease, transform 0.1s ease;
+ min-height: 44px; /* Touch target size */
+ min-width: 44px;
+}
+
+button:hover,
+.button:hover {
+ background-color: var(--color-primary-dark);
+}
+
+button:active,
+.button:active {
+ transform: scale(0.98);
+}
+
+button:disabled,
+.button:disabled {
+ background-color: #ccc;
+ cursor: not-allowed;
+ transform: none;
+}
+
+button:focus-visible,
+.button:focus-visible {
+ outline: 2px solid var(--color-primary);
+ outline-offset: 2px;
+}
+
+/* Secondary button style */
+button.secondary,
+.button.secondary {
+ background-color: transparent;
+ color: var(--color-primary);
+ border: 1px solid var(--color-primary);
+}
+
+button.secondary:hover,
+.button.secondary:hover {
+ background-color: var(--color-surface);
+}
+
+button.secondary:disabled,
+.button.secondary:disabled {
+ color: #999;
+ border-color: #ccc;
+ background-color: transparent;
+}
+
+/* Link styles */
+a {
+ color: var(--color-primary);
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+a:focus-visible {
+ outline: 2px solid var(--color-primary);
+ outline-offset: 2px;
+}
+
+/* Form elements */
+input[type="checkbox"] {
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+}
+
+textarea {
+ font-family: monospace;
+ font-size: var(--font-size-sm);
+}
+
+/* Responsive breakpoints */
+@media (max-width: 600px) {
+ :root {
+ --spacing-md: 12px;
+ --spacing-lg: 16px;
+ --spacing-xl: 24px;
+ --font-size-lg: 1.125rem;
+ --font-size-xl: 1.25rem;
+ }
+
+ button,
+ .button {
+ width: 100%;
+ justify-content: center;
+ }
+}
+
+/* Print styles */
+@media print {
+ body {
+ background: white;
+ color: black;
+ }
+
+ button,
+ .button {
+ display: none;
+ }
+}
+
+/* Submit screen (light DOM component - styles can't use Shadow DOM adoptedStyleSheets) */
+submit-screen {
+ display: block;
+}
+
+submit-screen h2 {
+ margin-top: 0;
+}
+
+submit-screen .info-section {
+ margin-bottom: var(--spacing-lg);
+}
+
+submit-screen .info-section p {
+ margin: var(--spacing-sm) 0;
+}
+
+submit-screen .tracker-section {
+ background-color: var(--color-surface);
+ padding: var(--spacing-md);
+ border-radius: var(--border-radius);
+ margin-bottom: var(--spacing-lg);
+}
+
+submit-screen .tracker-hash {
+ font-family: monospace;
+ font-size: 1.1rem;
+ word-break: break-all;
+}
+
+submit-screen .cast-url {
+ font-family: monospace;
+ font-size: 1.1rem;
+ word-break: break-all;
+ background-color: var(--color-surface);
+ padding: var(--spacing-sm);
+ border-radius: var(--border-radius);
+}
+
+submit-screen .submit-form {
+ margin-top: var(--spacing-lg);
+}
+
+submit-screen .encrypted-vote-input {
+ display: none;
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+ :root {
+ --color-border: #000;
+ --color-text-secondary: #000;
+ }
+
+ button,
+ .button {
+ border: 2px solid currentColor;
+ }
+}
diff --git a/heliosbooth2026/src/verifier-main.ts b/heliosbooth2026/src/verifier-main.ts
new file mode 100644
index 000000000..c8805e3ce
--- /dev/null
+++ b/heliosbooth2026/src/verifier-main.ts
@@ -0,0 +1,8 @@
+/**
+ * Entry point for the Helios Single-Ballot Verifier page.
+ * Loads the verify-screen component.
+ */
+
+import './screens/verify-screen.js';
+
+console.log('Helios Ballot Verifier loaded');
diff --git a/heliosbooth2026/tsconfig.json b/heliosbooth2026/tsconfig.json
new file mode 100644
index 000000000..113e4911f
--- /dev/null
+++ b/heliosbooth2026/tsconfig.json
@@ -0,0 +1,25 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "module": "ESNext",
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "moduleResolution": "bundler",
+ "skipLibCheck": true,
+ "experimentalDecorators": true,
+ "useDefineForClassFields": false,
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+ "declaration": true,
+ "declarationMap": true,
+ "sourceMap": true,
+ "outDir": "./dist",
+ "rootDir": "./src",
+ "esModuleInterop": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true
+ },
+ "include": ["src/**/*"],
+ "exclude": ["node_modules", "dist"]
+}
diff --git a/heliosbooth2026/verify.html b/heliosbooth2026/verify.html
new file mode 100644
index 000000000..2e97b7af6
--- /dev/null
+++ b/heliosbooth2026/verify.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+ ${line}
+ `)}
+
+ ${this.finalResult === 'success' ? html`
+ SUCCESSFUL VERIFICATION, DONE!
+ ` : ''}
+
+ ${this.finalResult === 'failure' ? html`
+ PROBLEM - THIS BALLOT DOES NOT VERIFY.
+ ` : ''}
+