Menti-like with database after medlemsmöte

arbetsgrupp-live/Containerfile

@@ -0,0 +1,28 @@
+FROM node:current
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+#RUN npm ci --omit=dev
+RUN npm install -g pnpm
+RUN pnpm pkg set pnpm.onlyBuiltDependencies[0]=better-sqlite3
+RUN pnpm install
+
+# Copy application code
+COPY . .
+
+# Create data directory for SQLite
+RUN mkdir -p /app/data
+
+# Expose port
+EXPOSE 3000
+
+# Set environment variables
+ENV NODE_ENV=production
+ENV PORT=3000
+
+# Start the application
+CMD ["pnpm", "start"]

arbetsgrupp-live/README.md

@@ -0,0 +1,60 @@
+# Live Audience Response System
+
+Ett webbbaserat system för att samla in svar från en live-publik och visa resultaten i realtid. Systemet är byggt med Node.js, Socket.IO och SQLite, och kan köras i en Podman-container.
+
+## Funktioner
+
+- **Live-formulär**: Deltagare kan välja mellan förutbestämda alternativ eller lägga till egna
+- **Flerval**: Användare kan välja flera alternativ
+- **Dynamiska alternativ**: Nya alternativ som läggs till av användare blir automatiskt tillgängliga för andra
+- **Live-resultat**: Admin-panel med realtidsuppdateringar av resultat
+- **QR-kod**: Genereras automatiskt för enkel delning av formuläret
+- **Responsiv design**: Fungerar på både desktop och mobil
+- **Persistent data**: SQLite-databas för säker datalagring
+
+## Teknisk stack
+
+### Backend
+- **Node.js** med Express.js
+- **Socket.IO** för realtidskommunikation
+- **SQLite** för datalagring
+- **QR Code generator** för QR-kodgenerering
+
+### Frontend
+- **Vanilla JavaScript** med Socket.IO client
+- **Chart.js** för datavisualisering
+- **Responsiv CSS** med modern design
+
+### Container
+- **Podman** (eller Docker) för containerisering
+- **Multi-stage build** för optimerad bildstorlek
+
+
+# Kör applikationen
+
+```bash
+podman run -d --restart=on-failure --name aeroklubben-arbetsgrupp-live -p 7000:3000 -v ./data:/app/data:Z aeroklubben-arbetsgrupp-live
+```
+
+## Användning
+
+### För deltagare
+1. Besök huvudsidan: `https://aeroklubben.hostux.fr`
+2. Välj ett eller flera alternativ
+3. Lägg till egna alternativ om önskat
+4. Skicka svaret
+
+### För administratör
+1. Besök admin-panelen: `https://aeroklubben.hostux.fr/admin`
+2. Visa QR-koden för deltagare
+3. Följ live-resultat i realtid
+4. Se statistik och diagram
+
+## API-endpoints
+
+- `GET /` - Huvudformulär
+- `GET /admin` - Admin-panel
+- `GET /api/options` - Hämta tillgängliga alternativ
+- `GET /api/results` - Hämta resultat
+- `POST /api/submit` - Skicka svar
+- `GET /api/qr` - Hämta QR-kod

arbetsgrupp-live/build.sh

@@ -0,0 +1,34 @@
+#!/bin/bash
+
+# On error, exit the script
+set -e
+
+# Build script for the Live Audience Response System
+
+echo "🚀 Building Live Audience Response System..."
+
+# Build the container image
+echo "📦 Building Podman container..."
+podman build -t aeroklubben-arbetsgrupp-live .
+
+# Create data directory on host (for persistence)
+echo "📁 Creating data directory..."
+mkdir -p ./data
+
+echo "✅ Build complete!"
+echo ""
+echo "To run the application:"
+echo "  podman run -d --restart=on-failure --name aeroklubben-arbetsgrupp-live -p 7000:3000 -v ./data:/app/data:Z aeroklubben-arbetsgrupp-live"
+echo ""
+echo "To view logs:"
+echo "  podman logs -f aeroklubben-arbetsgrupp-live"
+echo ""
+echo "To stop:"
+echo "  podman stop aeroklubben-arbetsgrupp-live"
+echo ""
+echo "To remove:"
+echo "  podman rm aeroklubben-arbetsgrupp-live"
+echo ""
+echo "Access URLs:"
+echo "  Form: https://aeroklubben.hostux.fr"
+echo "  Admin: https://aeroklubben.hostux.fr/admin"

arbetsgrupp-live/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "aeroklubben-arbetsgrupp-live",
+  "version": "1.0.0",
+  "description": "Live audience response collection system",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "nodemon server.js"
+  },
+  "dependencies": {
+    "better-sqlite3": "^12.2.0",
+    "cors": "^2.8.5",
+    "express": "^5.1.0",
+    "qrcode": "^1.5.3",
+    "socket.io": "^4.7.2"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.1"
+  },
+  "keywords": [
+    "audience",
+    "response",
+    "live",
+    "polling"
+  ],
+  "author": "",
+  "license": "MIT",
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "better-sqlite3"
+    ]
+  }
+}

arbetsgrupp-live/public/admin.html

@@ -0,0 +1,704 @@
+<!DOCTYPE html>
+<html lang="sv">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Live Resultat - Arbetsgrupper</title>
+    <script src="/socket.io/socket.io.js"></script>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
+            color: white;
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .header {
+            text-align: center;
+            margin-bottom: 40px;
+        }
+
+        .header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+            background: linear-gradient(45deg, #3498db, #2ecc71);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .header p {
+            font-size: 1.2rem;
+            opacity: 0.8;
+        }
+
+        .dashboard {
+            display: grid;
+            grid-template-columns: auto 1fr;
+            gap: 30px;
+            max-width: 1400px;
+            margin: 0 auto;
+            align-items: start;
+        }
+
+        .card {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 20px;
+            padding: 30px;
+            backdrop-filter: blur(10px);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .qr-section {
+            text-align: center;
+            min-width: 300px;
+            max-width: 350px;
+        }
+
+        .qr-section h2 {
+            margin-bottom: 20px;
+            color: #3498db;
+        }
+
+        .qr-code {
+            background: white;
+            padding: 20px;
+            border-radius: 15px;
+            display: inline-block;
+            margin-bottom: 15px;
+        }
+
+        .qr-code img {
+            max-width: 200px;
+            height: auto;
+        }
+
+        .url-display {
+            background: rgba(0, 0, 0, 0.3);
+            padding: 15px;
+            border-radius: 10px;
+            font-family: monospace;
+            word-break: break-all;
+            margin-top: 10px;
+        }
+
+        .results-section {
+            flex: 1;
+        }
+
+        .results-section h2 {
+            margin-bottom: 20px;
+            color: #2ecc71;
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+
+        .connection-status {
+            display: inline-flex;
+            align-items: center;
+            padding: 6px 12px;
+            border-radius: 15px;
+            font-size: 0.8rem;
+            font-weight: bold;
+            transition: all 0.3s ease;
+        }
+
+        .connection-status.connected {
+            background: #27ae60;
+            color: white;
+        }
+
+        .connection-status.disconnected {
+            background: #e74c3c;
+            color: white;
+        }
+
+        .status-dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            margin-right: 6px;
+            transition: all 0.3s ease;
+        }
+
+        .connected .status-dot {
+            background: white;
+            animation: pulse 2s infinite;
+        }
+
+        .disconnected .status-dot {
+            background: white;
+            animation: none;
+        }
+
+        .floating-results {
+            position: relative;
+            min-height: 500px;
+            background: rgba(0, 0, 0, 0.2);
+            border-radius: 15px;
+            padding: 20px;
+            overflow: hidden;
+            display: flex;
+            gap: 15px;
+        }
+
+        .option-container {
+            padding: 15px;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 12px;
+            border-left: 4px solid #3498db;
+        }
+
+        .option-text {
+            font-size: 1.3rem;
+            font-weight: 600;
+            color: #3498db;
+            margin-bottom: 15px;
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+        }
+
+        .participants-cloud {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            align-items: center;
+        }
+
+        .participant-cloud {
+            background: linear-gradient(45deg, #3498db, #2ecc71);
+            color: white;
+            padding: 6px 12px;
+            border-radius: 20px;
+            font-size: 0.85rem;
+            font-weight: 500;
+            box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
+            animation: cloudFloat 3s ease-in-out infinite;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .participant-cloud:nth-child(2n) {
+            background: linear-gradient(45deg, #e74c3c, #f39c12);
+            box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
+            animation-delay: -1s;
+        }
+
+        .participant-cloud:nth-child(3n) {
+            background: linear-gradient(45deg, #9b59b6, #e67e22);
+            box-shadow: 0 2px 8px rgba(155, 89, 182, 0.3);
+            animation-delay: -2s;
+        }
+
+        .participant-cloud:nth-child(4n) {
+            background: linear-gradient(45deg, #1abc9c, #27ae60);
+            box-shadow: 0 2px 8px rgba(26, 188, 156, 0.3);
+            animation-delay: -0.5s;
+        }
+
+        .participant-cloud:nth-child(5n) {
+            background: linear-gradient(45deg, #f39c12, #e67e22);
+            box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
+            animation-delay: -1.5s;
+        }
+
+        @keyframes cloudFloat {
+            0%, 100% {
+                transform: translateY(0px) scale(1);
+            }
+            33% {
+                transform: translateY(-3px) scale(1.02);
+            }
+            66% {
+                transform: translateY(1px) scale(0.98);
+            }
+        }
+
+        .participant-cloud::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            animation: shimmer 4s infinite;
+        }
+
+        @keyframes shimmer {
+            0% { left: -100%; }
+            100% { left: 100%; }
+        }
+
+        .option-count {
+            background: rgba(52, 152, 219, 0.8);
+            color: white;
+            padding: 4px 10px;
+            border-radius: 12px;
+            font-size: 0.8rem;
+            font-weight: bold;
+            margin-left: 10px;
+            display: inline-block;
+        }
+
+        .chart-container {
+            position: relative;
+            height: 400px;
+            margin-bottom: 20px;
+        }
+
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+            gap: 15px;
+            margin-top: 20px;
+        }
+
+        .stat-card {
+            background: rgba(255, 255, 255, 0.1);
+            padding: 15px;
+            border-radius: 10px;
+            text-align: center;
+        }
+
+        .stat-value {
+            font-size: 2rem;
+            font-weight: bold;
+            color: #3498db;
+        }
+
+        .stat-label {
+            font-size: 0.9rem;
+            opacity: 0.8;
+            margin-top: 5px;
+        }
+
+        .live-indicator {
+            display: inline-flex;
+            align-items: center;
+            background: #e74c3c;
+            padding: 8px 15px;
+            border-radius: 20px;
+            font-size: 0.9rem;
+            font-weight: bold;
+            margin-bottom: 20px;
+        }
+
+        .live-dot {
+            width: 8px;
+            height: 8px;
+            background: white;
+            border-radius: 50%;
+            margin-right: 8px;
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0% { opacity: 1; }
+            50% { opacity: 0.5; }
+            100% { opacity: 1; }
+        }
+
+        .response-list {
+            max-height: 300px;
+            overflow-y: auto;
+            background: rgba(0, 0, 0, 0.2);
+            border-radius: 10px;
+            padding: 15px;
+            margin-top: 20px;
+        }
+
+        .response-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px;
+            margin-bottom: 8px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 8px;
+        }
+
+        .response-text {
+            font-weight: 500;
+        }
+
+        .response-count {
+            background: #3498db;
+            color: white;
+            padding: 4px 12px;
+            border-radius: 15px;
+            font-size: 0.9rem;
+            font-weight: bold;
+        }
+
+        .participants-grid {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 15px;
+            margin-top: 20px;
+            max-height: 400px;
+            overflow-y: auto;
+            padding: 20px;
+            background: rgba(0, 0, 0, 0.2);
+            border-radius: 15px;
+        }
+
+        .participant-bubble {
+            background: linear-gradient(45deg, #3498db, #2ecc71);
+            color: white;
+            padding: 12px 18px;
+            border-radius: 25px;
+            font-size: 0.9rem;
+            font-weight: 500;
+            text-align: center;
+            min-width: 120px;
+            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
+            animation: bubbleIn 0.5s ease-out;
+            transition: transform 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .participant-bubble:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
+        }
+
+        .participant-bubble::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            animation: shimmer 2s infinite;
+        }
+
+        .participant-name {
+            font-weight: 600;
+            margin-bottom: 4px;
+        }
+
+        .participant-choice {
+            font-size: 0.8rem;
+            opacity: 0.9;
+        }
+
+        @keyframes bubbleIn {
+            0% {
+                opacity: 0;
+                transform: scale(0.5) translateY(20px);
+            }
+            100% {
+                opacity: 1;
+                transform: scale(1) translateY(0);
+            }
+        }
+
+        @keyframes shimmer {
+            0% { left: -100%; }
+            100% { left: 100%; }
+        }
+
+        .bubble-colors {
+            --color1: #3498db;
+            --color2: #2ecc71;
+        }
+
+        .participant-bubble:nth-child(3n+1) {
+            background: linear-gradient(45deg, #e74c3c, #f39c12);
+            box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
+        }
+
+        .participant-bubble:nth-child(3n+2) {
+            background: linear-gradient(45deg, #9b59b6, #e67e22);
+            box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3);
+        }
+
+        .participant-bubble:nth-child(3n+3) {
+            background: linear-gradient(45deg, #1abc9c, #27ae60);
+            box-shadow: 0 4px 15px rgba(26, 188, 156, 0.3);
+        }
+
+        @media (max-width: 1024px) {
+            .dashboard {
+                grid-template-columns: 1fr;
+            }
+
+            .qr-section {
+                max-width: 100%;
+                order: -1;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .header h1 {
+                font-size: 2rem;
+            }
+            
+            .card {
+                padding: 20px;
+            }
+            
+            .stats-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>
+            Vi behöver DIG! Vilken arbetsgrupp skulle du kunna tänka dig delta i?
+        </h1>
+        <p>
+            <span class="connection-status disconnected" id="connectionStatus">
+                <span class="status-dot"></span>
+                <span class="status-text">DISCONNECTED</span>
+            </span>
+        </p>
+    </div>
+
+    <div class="dashboard">
+        <div class="card qr-section">
+            <h2>Scanna för att svara</h2>
+
+            <div class="qr-code" id="qrContainer">
+                <p>Laddar QR-kod...</p>
+            </div>
+            <div class="url-display" id="urlDisplay">
+                Laddar URL...
+            </div>
+            
+            
+            <div class="stats-grid">
+                <div class="stat-card">
+                    <div class="stat-value" id="uniqueParticipants">0</div>
+                    <div class="stat-label">Deltagare</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="card results-section">
+            <h2>
+                Live Resultat
+            </h2>
+            
+            <div class="floating-results" id="results">
+                <p style="text-align: center; opacity: 0.7;">Väntar på svar...</p>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const socket = io();
+        let results = [];
+        let allResponses = [];
+        let availableOptions = [];
+        let participantColour = {};
+
+        // Chart colors
+        const colors = [
+            '#3498db', '#2ecc71', '#e74c3c', '#f39c12', 
+            '#9b59b6', '#1abc9c', '#34495e', '#e67e22',
+            '#95a5a6', '#c0392b', '#8e44ad', '#27ae60'
+        ];
+
+        function updateResults() {
+            // Show a container box for each option, with the option text and a count of responses
+            // In each box, show the list of participants who chose that option
+
+            const resultsContainer = document.getElementById('results');
+            resultsContainer.innerHTML = ''; // Clear previous results
+
+            results.forEach(result => {
+                const optionContainer = document.createElement('div');
+                optionContainer.classList.add('option-container');
+                optionContainer.setAttribute('data-option', result.response);
+
+                const optionText = document.createElement('h3');
+                optionText.classList.add('option-text');
+                optionText.textContent = result.response;
+
+                const optionCount = document.createElement('span');
+                optionCount.classList.add('option-count');
+                optionCount.textContent = result.count;
+
+                optionText.appendChild(optionCount);
+                optionContainer.appendChild(optionText);
+
+                
+                const participantsCloud = document.createElement('div');
+                participantsCloud.classList.add('participants-cloud');
+
+                optionContainer.appendChild(participantsCloud);
+
+                resultsContainer.appendChild(optionContainer);
+            });
+
+            allResponses.forEach(response => {
+                const participantsCloud = document.querySelector(`.option-container[data-option="${response.response}"] .participants-cloud`);
+                if (participantsCloud) {
+                    const participantBubble = document.createElement('div');
+                    participantBubble.classList.add('participant-cloud');
+                    participantBubble.innerText = response.participant_name;
+
+                    participantsCloud.appendChild(participantBubble);           
+                }
+            });
+
+            console.log('Available options updated:', availableOptions);
+
+            availableOptions.forEach(option => {
+                if (!results.some(r => r.response === option)) {
+                    const optionContainer = document.createElement('div');
+                    optionContainer.classList.add('option-container');
+                    optionContainer.setAttribute('data-option', option);
+
+                    const optionText = document.createElement('h3');
+                    optionText.classList.add('option-text');
+                    optionText.textContent = option;
+
+                    const optionCount = document.createElement('span');
+                    optionCount.classList.add('option-count');
+                    optionCount.textContent = '0';
+
+                    optionText.appendChild(optionCount);
+                    optionContainer.appendChild(optionText);
+
+                    resultsContainer.appendChild(optionContainer);
+                }
+            });
+        }
+
+        function updateStats() {
+            const uniqueParticipants = new Set(allResponses.map(r => r.participant_name)).size;
+            
+            // Update participants count
+            const participantCountElement = document.querySelector('.stat-card:last-child .stat-value');
+            participantCountElement.textContent = uniqueParticipants;
+        }
+
+        function loadQRCode() {
+            fetch('/api/qr')
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    if (data.qrCode) {
+                        const qrContainer = document.getElementById('qrContainer');
+                        qrContainer.innerHTML = `<img src="${data.qrCode}" alt="QR Code" style="max-width: 100%; height: auto;">`;
+                        
+                        const urlDisplay = document.getElementById('urlDisplay');
+                        urlDisplay.textContent = window.location.origin;
+                    } else {
+                        throw new Error('No QR code data received');
+                    }
+                })
+                .catch(error => {
+                    console.error('Error loading QR code:', error);
+                    document.getElementById('qrContainer').innerHTML = `<p style="color: #e74c3c;">Fel vid laddning av QR-kod: ${error.message}</p>`;
+                });
+        }
+
+        // Socket.IO event listeners
+        socket.on('resultsUpdated', (newResults) => {
+            results = newResults;
+            updateResults();
+            updateStats();
+        });
+
+        socket.on('allResponsesUpdated', (newAllResponses) => {
+            allResponses = newAllResponses;
+
+            allResponses.forEach(response => {
+                if (!participantColour[response.participant_name]) {
+                    const colourIndex = Object.keys(participantColour).length % colors.length;
+                    participantColour[response.participant_name] = colors[colourIndex];
+                }
+            });
+
+            updateResults();
+            updateStats();
+        });
+
+        // Socket.IO event listeners
+        socket.on('optionsUpdated', (options) => {
+            availableOptions = options;
+
+            updateResults();
+            updateStats();
+        });
+
+        socket.on('disconnect', () => {
+            document.getElementById('connectionStatus').classList.remove('connected');
+            document.getElementById('connectionStatus').classList.add('disconnected');
+            document.getElementById('connectionStatus').querySelector('.status-text').innerText = 'DISCONNECTED';
+        });
+
+        socket.io.on('error', () => {
+            document.getElementById('connectionStatus').classList.remove('connected');
+            document.getElementById('connectionStatus').classList.add('disconnected');
+            document.getElementById('connectionStatus').querySelector('.status-text').innerText = 'DISCONNECTED';
+        });
+
+        socket.on('connect', () => {
+            document.getElementById('connectionStatus').classList.remove('disconnected');
+            document.getElementById('connectionStatus').classList.add('connected');
+            document.getElementById('connectionStatus').querySelector('.status-text').innerText = 'LIVE';
+        });
+
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+            loadQRCode();
+            
+            // Load initial data
+            fetch('/api/results')
+                .then(response => response.json())
+                .then(data => {
+                    results = data;
+                    updateResults();
+                    updateStats();
+                })
+                .catch(error => {
+                    console.error('Error loading initial results:', error);
+                });
+
+            fetch('/api/all-responses')
+                .then(response => response.json())
+                .then(data => {
+                    allResponses = data;
+                    updateResults();
+                    updateStats();
+                })
+                .catch(error => {
+                    console.error('Error loading initial responses:', error);
+                });
+
+            
+            fetch('/api/options')
+                .then(response => response.json())
+                .then(data => {
+                    availableOptions = options;
+                    updateResults();
+                    updateStats();
+                })
+                .catch(error => {
+                    console.error('Error loading options:', error);
+                });
+        });
+    </script>
+</body>
+</html>

arbetsgrupp-live/public/index.html

@@ -0,0 +1,397 @@
+<!DOCTYPE html>
+<html lang="sv">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Arbetsgrupp - Deltagarformulär</title>
+    <script src="/socket.io/socket.io.js"></script>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+
+        .container {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            padding: 40px;
+            max-width: 600px;
+            width: 100%;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+            backdrop-filter: blur(10px);
+        }
+
+        .logo {
+            display: block;
+            margin: 0 auto 20px;
+            height: auto;
+            max-width: 100%;
+            width: 7em;
+        }
+
+        h1 {
+            color: #2c3e50;
+            text-align: center;
+            margin-bottom: 30px;
+            font-size: 2rem;
+            font-weight: 600;
+        }
+
+        .question {
+            background: #f8f9fa;
+            padding: 20px;
+            border-radius: 12px;
+            margin-bottom: 30px;
+            border-left: 4px solid #667eea;
+        }
+
+        .question h2 {
+            color: #2c3e50;
+            font-size: 1.3rem;
+            margin-bottom: 10px;
+        }
+
+        .options {
+            display: grid;
+            gap: 15px;
+            margin-bottom: 25px;
+        }
+
+        .option {
+            display: flex;
+            align-items: center;
+            padding: 15px;
+            background: white;
+            border: 2px solid #e9ecef;
+            border-radius: 10px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+        }
+
+        .option:hover {
+            border-color: #667eea;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
+        }
+
+        .option.selected {
+            border-color: #667eea;
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            color: white;
+        }
+
+        .option input[type="checkbox"] {
+            margin-right: 12px;
+            transform: scale(1.2);
+        }
+
+        .option label {
+            flex: 1;
+            cursor: pointer;
+            font-weight: 500;
+        }
+
+        .custom-input-container {
+            margin-top: 20px;
+        }
+
+        .custom-input {
+            width: 100%;
+            padding: 15px;
+            border: 2px solid #e9ecef;
+            border-radius: 10px;
+            font-size: 16px;
+            transition: border-color 0.3s ease;
+        }
+
+        .custom-input:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+
+        .add-custom {
+            margin-top: 10px;
+            background: #28a745;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 14px;
+            transition: background-color 0.3s ease;
+        }
+
+        .add-custom:hover {
+            background: #218838;
+        }
+
+        .submit-btn {
+            width: 100%;
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            color: white;
+            border: none;
+            padding: 18px;
+            border-radius: 12px;
+            font-size: 18px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            margin-top: 20px;
+        }
+
+        .submit-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+        }
+
+        .submit-btn:disabled {
+            background: #6c757d;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+
+        .success-message {
+            background: #d4edda;
+            color: #155724;
+            padding: 15px;
+            border-radius: 10px;
+            margin-bottom: 20px;
+            text-align: center;
+            font-weight: 500;
+        }
+
+        .error-message {
+            background: #f8d7da;
+            color: #721c24;
+            padding: 15px;
+            border-radius: 10px;
+            margin-bottom: 20px;
+            text-align: center;
+            font-weight: 500;
+        }
+
+        @media (max-width: 768px) {
+            .container {
+                padding: 25px;
+                margin: 10px;
+            }
+            
+            h1 {
+                font-size: 1.5rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <img src="/aeroklubben.png" alt="Aeroklubben i Göteborg" class="logo" />
+        <h1>Vi behöver DIG!</h1>
+        
+        <div id="message"></div>
+        
+        <form id="responseForm">
+            <div class="question">
+                <h2>Vilken arbetsgrupp skulle du kunna tänka dig delta i?</h2>
+                <p style="color: #6c757d; margin-top: 5px;">Du kan välja flera alternativ</p>
+            </div>
+
+            <div style="margin-bottom: 25px;">
+                <input 
+                    type="text" 
+                    id="participantName" 
+                    class="custom-input" 
+                    placeholder="Ditt namn *" 
+                    required
+                    style="margin-bottom: 20px;"
+                >
+            </div>
+            
+            <div class="options" id="options">
+                <!-- Options will be populated dynamically -->
+            </div>
+            
+            <div class="custom-input-container">
+                <input 
+                    type="text" 
+                    id="customInput" 
+                    class="custom-input" 
+                    placeholder="Eller skriv ditt eget alternativ..."
+                >
+                <button type="button" id="addCustom" class="add-custom">Lägg till</button>
+            </div>
+            
+            <button type="submit" id="submitBtn" class="submit-btn">Skicka svar</button>
+        </form>
+    </div>
+
+    <script>
+        const socket = io();
+        const form = document.getElementById('responseForm');
+        const optionsContainer = document.getElementById('options');
+        const customInput = document.getElementById('customInput');
+        const addCustomBtn = document.getElementById('addCustom');
+        const submitBtn = document.getElementById('submitBtn');
+        const messageDiv = document.getElementById('message');
+        const participantNameInput = document.getElementById('participantName');
+
+        let availableOptions = [];
+
+        function showMessage(text, type = 'success') {
+            messageDiv.innerHTML = `<div class="${type}-message">${text}</div>`;
+            scrollTo(0, 0);
+
+            setTimeout(() => {
+                messageDiv.innerHTML = '';
+            }, 5000);
+        }
+
+        function renderOptions() {
+            // Store currently selected options before re-rendering
+            const currentlySelected = Array.from(document.querySelectorAll('input[type="checkbox"]:checked'))
+                .map(checkbox => checkbox.value);
+            
+            optionsContainer.innerHTML = '';
+            availableOptions.forEach((option, index) => {
+                const optionDiv = document.createElement('div');
+                optionDiv.className = 'option';
+                optionDiv.innerHTML = `
+                    <input type="checkbox" id="option${index}" value="${option}">
+                    <label for="option${index}">${option}</label>
+                `;
+                
+                const checkbox = optionDiv.querySelector('input');
+                const label = optionDiv.querySelector('label');
+                label.addEventListener('click', (e) => {
+                    e.stopPropagation(); // Prevent triggering the div click event
+                });
+                
+                // Restore selection state if this option was previously selected
+                if (currentlySelected.includes(option)) {
+                    checkbox.checked = true;
+                    optionDiv.classList.add('selected');
+                }
+                
+                checkbox.addEventListener('change', () => {
+                    if (checkbox.checked) {
+                        optionDiv.classList.add('selected');
+                    } else {
+                        optionDiv.classList.remove('selected');
+                    }
+                });
+                
+                optionDiv.addEventListener('click', (e) => {
+                    if (e.target !== checkbox) {
+                        checkbox.checked = !checkbox.checked;
+                        checkbox.dispatchEvent(new Event('change'));
+                    }
+                });
+                
+                optionsContainer.appendChild(optionDiv);
+            });
+        }
+
+        function addCustomOption() {
+            const customValue = customInput.value.trim();
+            if (customValue && !availableOptions.includes(customValue)) {
+                availableOptions.push(customValue);
+                renderOptions();
+                customInput.value = '';
+                
+                // Auto-select the newly added option
+                const newCheckbox = document.querySelector(`input[value="${customValue}"]`);
+                if (newCheckbox) {
+                    newCheckbox.checked = true;
+                    newCheckbox.dispatchEvent(new Event('change'));
+                }
+            }
+        }
+
+        addCustomBtn.addEventListener('click', addCustomOption);
+
+        customInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                addCustomOption();
+            }
+        });
+
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            
+            const participantName = participantNameInput.value.trim();
+            const selectedOptions = Array.from(document.querySelectorAll('input[type="checkbox"]:checked'))
+                .map(checkbox => checkbox.value);
+            
+            if (!participantName) {
+                showMessage('Ange ditt namn', 'error');
+                return;
+            }
+            
+            if (selectedOptions.length === 0) {
+                showMessage('Välj minst ett alternativ', 'error');
+                return;
+            }
+
+            submitBtn.disabled = true;
+            submitBtn.textContent = 'Skickar...';
+
+            try {
+                const response = await fetch('/api/submit', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ 
+                        responses: selectedOptions,
+                        participantName: participantName
+                    }),
+                });
+
+                if (response.ok) {
+                    showMessage('Tack för ditt svar!');
+                    form.reset();
+                    document.querySelectorAll('.option').forEach(opt => opt.classList.remove('selected'));
+                } else {
+                    throw new Error('Server error');
+                }
+            } catch (error) {
+                showMessage('Ett fel uppstod. Försök igen.', 'error');
+            } finally {
+                submitBtn.disabled = false;
+                submitBtn.textContent = 'Skicka svar';
+            }
+        });
+
+        // Socket.IO event listeners
+        socket.on('optionsUpdated', (options) => {
+            availableOptions = options;
+            renderOptions();
+        });
+
+        // Initial load
+        fetch('/api/options')
+            .then(response => response.json())
+            .then(options => {
+                availableOptions = options;
+                renderOptions();
+            })
+            .catch(error => {
+                console.error('Error loading options:', error);
+            });
+    </script>
+</body>
+</html>

arbetsgrupp-live/server.js

@@ -0,0 +1,258 @@
+const express = require('express');
+const http = require('http');
+const socketIo = require('socket.io');
+const Database = require('better-sqlite3');
+const QRCode = require('qrcode');
+const path = require('path');
+const cors = require('cors');
+
+const app = express();
+const server = http.createServer(app);
+const io = socketIo(server, {
+  cors: {
+    origin: "*",
+    methods: ["GET", "POST"]
+  }
+});
+
+const PORT = process.env.PORT || 3000;
+
+// Middleware
+app.use(cors());
+app.use(express.json());
+app.use(express.static('public'));
+
+// Initialize better-sqlite3 database
+const db = new Database('./data/responses.db');
+
+// Configure database for better performance
+db.pragma('journal_mode = WAL');
+db.pragma('synchronous = NORMAL');
+db.pragma('cache_size = 1000000');
+db.pragma('temp_store = memory');
+
+// Initialize database tables
+try {
+  // Create responses table
+  db.exec(`CREATE TABLE IF NOT EXISTS responses (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    participant_name TEXT NOT NULL,
+    response TEXT NOT NULL,
+    timestamp DATETIME DEFAULT CURRENT_TIMESTAMP
+  )`);
+  
+  // Create options table for dynamic options
+  db.exec(`CREATE TABLE IF NOT EXISTS options (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    option_text TEXT UNIQUE NOT NULL,
+    is_predefined BOOLEAN DEFAULT FALSE,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+  )`);
+  
+  // Insert predefined options
+  const predefinedOptions = ['Landvetter', 'Backamo', 'Borås', 'Trollhättan'];
+  const insertOption = db.prepare("INSERT OR IGNORE INTO options (option_text, is_predefined) VALUES (?, 1)");
+  
+  predefinedOptions.forEach(option => {
+    insertOption.run(option);
+  });
+} catch (error) {
+  console.error('Database initialization error:', error);
+}
+
+// Prepared statements for better performance
+const getOptionsStmt = db.prepare("SELECT option_text FROM options ORDER BY is_predefined DESC, created_at ASC");
+const getResponseCountsStmt = db.prepare(`
+  SELECT response, COUNT(*) as count 
+  FROM responses 
+  GROUP BY response 
+  ORDER BY response ASC
+`);
+const getAllResponsesStmt = db.prepare(`
+  SELECT participant_name, response, timestamp 
+  FROM responses 
+  ORDER BY timestamp DESC
+`);
+const insertResponseStmt = db.prepare("INSERT INTO responses (participant_name, response) VALUES (?, ?)");
+const insertOptionStmt = db.prepare("INSERT OR IGNORE INTO options (option_text) VALUES (?)");
+
+// Get all available options
+function getOptions() {
+  try {
+    return getOptionsStmt.all().map(row => row.option_text);
+  } catch (error) {
+    console.error('Error getting options:', error);
+    return [];
+  }
+}
+
+// Get response counts
+function getResponseCounts() {
+  try {
+    return getResponseCountsStmt.all();
+  } catch (error) {
+    console.error('Error getting response counts:', error);
+    return [];
+  }
+}
+
+// Get all responses with participant names
+function getAllResponses() {
+  try {
+    return getAllResponsesStmt.all();
+  } catch (error) {
+    console.error('Error getting all responses:', error);
+    return [];
+  }
+}
+
+// Routes
+app.get('/', (req, res) => {
+  res.sendFile(path.join(__dirname, 'public', 'index.html'));
+});
+
+app.get('/admin', (req, res) => {
+  res.sendFile(path.join(__dirname, 'public', 'admin.html'));
+});
+
+app.get('/api/options', (req, res) => {
+  try {
+    const options = getOptions();
+    res.json(options);
+  } catch (error) {
+    console.error('API error - options:', error);
+    res.status(500).json({ error: 'Failed to fetch options' });
+  }
+});
+
+app.get('/api/results', (req, res) => {
+  try {
+    const results = getResponseCounts();
+    res.json(results);
+  } catch (error) {
+    console.error('API error - results:', error);
+    res.status(500).json({ error: 'Failed to fetch results' });
+  }
+});
+
+app.get('/api/all-responses', (req, res) => {
+  try {
+    const responses = getAllResponses();
+    res.json(responses);
+  } catch (error) {
+    console.error('API error - all responses:', error);
+    res.status(500).json({ error: 'Failed to fetch responses' });
+  }
+});
+
+app.post('/api/submit', (req, res) => {
+  const { responses, participantName } = req.body;
+  
+  if (!responses || !Array.isArray(responses) || responses.length === 0) {
+    return res.status(400).json({ error: 'Invalid responses' });
+  }
+
+  if (!participantName || typeof participantName !== 'string' || participantName.trim().length === 0) {
+    return res.status(400).json({ error: 'Participant name is required' });
+  }
+
+  const trimmedName = participantName.trim();
+  
+  try {
+    // Use a transaction for better performance and data integrity
+    const insertTransaction = db.transaction((responses, participantName) => {
+      // Insert all responses
+      responses.forEach(response => {
+        insertResponseStmt.run(participantName, response);
+        // Add new custom options to options table
+        insertOptionStmt.run(response);
+      });
+    });
+
+    insertTransaction(responses, trimmedName);
+    
+    // Emit updated data to all clients
+    const options = getOptions();
+    io.emit('optionsUpdated', options);
+    
+    const results = getResponseCounts();
+    io.emit('resultsUpdated', results);
+
+    const allResponses = getAllResponses();
+    io.emit('allResponsesUpdated', allResponses);
+    
+    res.json({ success: true });
+  } catch (error) {
+    console.error('Error submitting response:', error);
+    res.status(500).json({ error: 'Failed to submit response' });
+  }
+});
+
+app.get('/api/qr', async (req, res) => {
+  try {
+    const url = `https://aeroklubben.hostux.fr`;
+    const qrCode = await QRCode.toDataURL(url);
+    res.json({ qrCode });
+  } catch (err) {
+    res.status(500).json({ error: 'Failed to generate QR code' });
+  }
+});
+
+// Socket.IO connection handling
+io.on('connection', (socket) => {
+  console.log('Client connected');
+  
+  try {
+    // Send current options and results to new client
+    const options = getOptions();
+    socket.emit('optionsUpdated', options);
+    
+    const results = getResponseCounts();
+    socket.emit('resultsUpdated', results);
+
+    const allResponses = getAllResponses();
+    socket.emit('allResponsesUpdated', allResponses);
+  } catch (error) {
+    console.error('Error sending initial data to client:', error);
+  }
+  
+  socket.on('disconnect', () => {
+    console.log('Client disconnected');
+  });
+});
+
+// Start server
+server.listen(PORT, () => {
+  console.log(`Server running on port ${PORT}`);
+  console.log(`Form: https://aeroklubben.hostux.fr`);
+  console.log(`Admin: https://aeroklubben.hostux.fr/admin`);
+});
+
+// Graceful shutdown
+process.on('SIGINT', () => {
+  console.log('Shutting down gracefully...');
+  try {
+    db.close();
+    console.log('Database connection closed.');
+  } catch (error) {
+    console.error('Error closing database:', error);
+  }
+  server.close(() => {
+    console.log('Server closed.');
+    process.exit(0);
+  });
+});
+
+process.on('SIGTERM', () => {
+  console.log('Received SIGTERM, shutting down gracefully...');
+  try {
+    db.close();
+    console.log('Database connection closed.');
+  } catch (error) {
+    console.error('Error closing database:', error);
+  }
+  server.close(() => {
+    console.log('Server closed.');
+    process.exit(0);
+  });
+});