/** * This web app creates a Side School Seminar location voting system. * Users can vote for their preferred seminar location from four options. * The app uses React for the frontend and SQLite for storing votes on the backend. * The design is inspired by Side.school and includes an image in the first frame. * It features a celebration animation when voting, a distinct style for the selected option, * and allows users to cancel their vote by clicking on the selected option again. */ /** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const locations = [ { id: 1, name: "Au camping", emoji: "⛺" }, { id: 2, name: "Chez Ben", emoji: "🏢" }, { id: 3, name: "Au Château", emoji: "🏰" }, { id: 4, name: "Sur Saturne", emoji: "🪐" }, ]; function App() { const [votes, setVotes] = useState({}); const [selectedLocation, setSelectedLocation] = useState(null); const [showCelebration, setShowCelebration] = useState(false); useEffect(() => { fetchVotes(); }, []); const fetchVotes = async () => { try { const response = await fetch("/votes"); const data = await response.json(); console.log("Fetched votes:", data); setVotes(data); } catch (error) { console.error("Error fetching votes:", error); } }; const handleVote = async (locationId) => { console.log("Voting for location:", locationId); try { const response = await fetch("/vote", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ locationId }), }); if (response.ok) { const result = await response.json(); console.log("Vote result:", result); setVotes(prevVotes => ({ ...prevVotes, [locationId]: result.newCount })); if (selectedLocation === locationId) { // Annuler le vote setSelectedLocation(null); } else { // Nouveau vote setSelectedLocation(locationId); setShowCelebration(true); setTimeout(() => setShowCelebration(false), 2000); } } else { console.error("Vote failed:", await response.text()); } } catch (error) { console.error("Error voting:", error); } }; return (

Side School Seminar

Choose the location:

{locations.map((location) => ( ))}

{selectedLocation !== null &&

Thank you for voting! Click your choice again to cancel.

}

{showCelebration &&

🎉🎊🥳

}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const SCHEMA_VERSION = 1; const KEY = new URL(import.meta.url).pathname.split("/").at(-1); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_votes_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, location_id INTEGER NOT NULL, timestamp DATETIME DEFAULT CURRENT_TIMESTAMP ) `); if (request.method === "POST" && request.url.endsWith("/vote")) { const { locationId } = await request.json(); console.log("Server received vote for location:", locationId); try { const existingVote = await sqlite.execute(`SELECT * FROM ${KEY}_votes_${SCHEMA_VERSION} WHERE location_id = ?`, [locationId]); if (existingVote.rows.length > 0) { await sqlite.execute(`DELETE FROM ${KEY}_votes_${SCHEMA_VERSION} WHERE location_id = ?`, [locationId]); console.log("Deleted existing vote for location:", locationId); } else { await sqlite.execute(`INSERT INTO ${KEY}_votes_${SCHEMA_VERSION} (location_id) VALUES (?)`, [locationId]); console.log("Inserted new vote for location:", locationId); } // Get updated vote count const result = await sqlite.execute(`SELECT COUNT(*) as count FROM ${KEY}_votes_${SCHEMA_VERSION} WHERE location_id = ?`, [locationId]); const newCount = result.rows[0].count; return new Response(JSON.stringify({ success: true, newCount }), { headers: { "Content-Type": "application/json" }, }); } catch (error) { console.error("Error processing vote:", error); return new Response(JSON.stringify({ success: false, error: error.message }), { status: 500, headers: { "Content-Type": "application/json" }, }); } } if (request.url.endsWith("/votes")) { try { const result = await sqlite.execute(` SELECT location_id, COUNT(*) as count FROM ${KEY}_votes_${SCHEMA_VERSION} GROUP BY location_id `); const votes = Object.fromEntries(result.rows.map(row => [row.location_id, row.count])); console.log("Fetched votes:", votes); return new Response(JSON.stringify(votes), { headers: { "Content-Type": "application/json" }, }); } catch (error) { console.error("Error fetching votes:", error); return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: { "Content-Type": "application/json" }, }); } } return new Response(` Side School Seminar

`, { headers: { "Content-Type": "text/html" }, }); } const css = ` body { font-family: 'Inter', sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f4f4f5; } .container { width: 800px; background-color: white; border-radius: 24px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); overflow: hidden; position: relative; } .image-frame { width: 100%; height: 300px; background-image: url('https://media.discordapp.net/attachments/1210186058440900690/1276662221681852446/paKC1TADWHlq2ilOrkbiQNwIbw.png?ex=66cc5218&is=66cb0098&hm=9e97febd99094480aa2c113488311f23db3c2d43af69c607212b05e55b794433&=&format=webp&quality=lossless&width=662&height=936'); background-size: cover; background-position: center; background-repeat: no-repeat; } .content { padding: 40px; } h1 { font-size: 36px; font-weight: 700; text-align: center; color: #111827; margin-bottom: 8px; } h2 { font-size: 24px; font-weight: 600; text-align: center; color: #4b5563; margin-bottom: 32px; } .locations { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } button { display: flex; flex-direction: column; align-items: center; padding: 24px; border: 2px solid #e5e7eb; border-radius: 16px; background-color: white; cursor: pointer; transition: all 0.3s ease; } button:hover { border-color: #d1d5db; transform: translateY(-4px); } button.selected { background-color: #444; color: white; transform: scale(1.05); } button.selected .votes { color: #ccc; } .emoji { font-size: 48px; margin-bottom: 12px; } .name { font-size: 18px; font-weight: 600; color: #111827; margin-bottom: 8px; } .votes { font-size: 14px; color: #6b7280; } p { text-align: center; margin-top: 24px; font-style: italic; color: #4b5563; font-size: 16px; } .celebration { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 64px; animation: celebrate 2s ease-out; } @keyframes celebrate { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } } `; export default server;

linkInBioTemplate