\n \n

🚨 Attention Valued Customer! 🚨

Due to our commitment to maximizing value, we've strategically overbooked your flight. 📈💼

Please state your price for voluntary denial of service. Remember, loyalty is priceless! 💰🔒

\n As a token of our appreciation for your flexibility, enjoy our exclusive
\"Stranded Traveler\" package:\n

🛋️ Lounge access

🥤 A refreshing Coke Zero

🥔 A gourmet bag of chips

\n \n {showModal && (\n

Quantify Your Inconvenience 📊

\n )}\n

\n );\n }\n\n const maxAmount = Math.max(...leaderboard.map(entry => entry.amount));\n\n return (\n

\n \n

Passenger Compliance Leaderboard 🏆

\n \n

= leaderboard.length - 3 ? \"success\" : \"default\"}`}\n style={{\n top: `${index * 40}px`,\n backgroundColor: `rgba(${index >= leaderboard.length - 3 ? \"212, 237, 218\" : \"240, 240, 240\"}, ${\n entry.amount / maxAmount\n })`,\n }}\n >\n {entry.name}: ${entry.amount}\n \n ))}\n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nasync function server(request: Request): Promise {\n return new Response(\n `\n \n \n Flight Rebooking Opportunity Program\n \n \n \n

\n \n

View source: ${\n import.meta.url.replace(\"esm.town\", \"val.town\")\n }

\n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f0f0f0;\n}\n.container {\n max-width: 600px;\n margin: 0 auto;\n padding: 20px;\n background-color: white;\n border-radius: 8px;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n}\n.logo {\n display: block;\n width: 300px;\n height: 300px;\n margin: 0 auto 20px;\n}\nh1, h2 {\n color: #333;\n}\n.alert {\n background-color: #fff3cd;\n border: 1px solid #ffeeba;\n color: #856404;\n padding: 15px;\n border-radius: 5px;\n margin-bottom: 20px;\n}\nbutton {\n background-color: #007bff;\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: 5px;\n cursor: pointer;\n margin-right: 10px;\n}\nbutton:hover {\n background-color: #0056b3;\n}\n.admin-button {\n background-color: #28a745;\n}\n.admin-button:hover {\n background-color: #218838;\n}\n.leaderboard-controls {\n margin-bottom: 20px;\n}\n.modal {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0,0,0,0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.modal-content {\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n}\ninput {\n width: 100%;\n padding: 10px;\n margin-bottom: 10px;\n}\n.leaderboard {\n list-style-type: none;\n padding: 0;\n position: relative;\n height: 400px;\n}\n.leaderboard-item {\n padding: 10px;\n margin-bottom: 5px;\n border-radius: 5px;\n position: absolute;\n width: calc(100% - 20px);\n transition: top 0.5s ease, background-color 0.5s ease, box-shadow 0.5s ease;\n box-shadow: 0 2px 5px rgba(0,0,0,0.2);\n}\n.leaderboard-item:hover {\n box-shadow: 0 5px 15px rgba(0,0,0,0.3);\n transform: translateY(-2px);\n}\n.success {\n color: #155724;\n}\n.default {\n color: #333;\n}\n`;\n\nexport default server;","deleted","label",[99],"permalink","https://www.val.town/x/guillermodoghel/leaderboardApp/code/main.tsx","extension","actionData","errors"]