Initial commit: Modernes Harry Potter Escape Quiz Portal (FastAPI & MariaDB)

2026-09-21 11:29:18 +02:00
commit c3a21369ef
50 changed files with 3346 additions and 0 deletions
@@ -0,0 +1,160 @@
+:root {
+    --bg: #0b0b15;
+    --fg: #f5f5f5;
+    --accent: #c9a86a;
+    --accent-soft: #e6c98f;
+    --box-bg: rgba(255,255,255,0.05);
+}
+body {
+    background: var(--bg);
+    color: var(--fg);
+    font-family: "Georgia", serif;
+    text-align: center;
+    padding: 20px;
+}
+.hidden { display: none; }
+
+.box {
+    border: 2px solid var(--accent);
+    padding: 20px;
+    margin: 20px auto;
+    width: 90%;
+    max-width: 600px;
+    background: var(--box-bg);
+    border-radius: 10px;
+}
+
+input, textarea {
+    padding: 10px;
+    border-radius: 5px;
+    border: none;
+    margin-top: 10px;
+    width: 80%;
+    max-width: 250px;
+    text-align: center;
+}
+
+button {
+    padding: 10px 20px;
+    background: var(--accent);
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-top: 10px;
+    font-weight: bold;
+    color: #000;
+}
+button:hover {
+    background: var(--accent-soft);
+}
+
+/* Fortschrittsleiste */
+.progress-container {
+    width: 90%;
+    max-width: 600px;
+    margin: 10px auto;
+    background: rgba(255,255,255,0.1);
+    border-radius: 10px;
+    border: 1px solid var(--accent);
+    overflow: hidden;
+}
+.progress-bar {
+    height: 14px;
+    background: linear-gradient(90deg, #c9a86a, #e6c98f);
+    width: 0%;
+    transition: width 0.3s;
+}
+
+/* Briefumschlag */
+.intro-envelope {
+    position: relative;
+    width: 220px;
+    height: 150px;
+    margin: 0 auto 20px;
+}
+
+.envelope-body {
+    width: 100%;
+    height: 100%;
+    background: #f5f5dc;
+    border-radius: 5px;
+    border: 2px solid #c9a86a;
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+}
+
+.envelope-flap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #e6d8a8;
+    clip-path: polygon(0 0, 50% 60%, 100% 0);
+    transform-origin: top;
+    transition: transform 0.8s ease-in-out;
+    z-index: 2;
+}
+
+.open .envelope-flap {
+    transform: rotateX(180deg);
+}
+
+.sparkle::after {
+    content: "";
+    position: absolute;
+    top: -10px;
+    left: 50%;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #ffeaa7;
+    box-shadow:
+        0 0 8px #ffeaa7,
+        -20px -10px 6px rgba(255,255,255,0.6),
+        15px -5px 6px rgba(255,255,255,0.5),
+        -10px 10px 6px rgba(255,255,255,0.4),
+        20px 15px 6px rgba(255,255,255,0.5);
+    animation: sparkle 0.7s ease-out forwards;
+}
+
+@keyframes sparkle {
+    from { opacity: 1; transform: translate(-50%, 0) scale(1); }
+    to   { opacity: 0; transform: translate(-50%, -20px) scale(0.5); }
+}
+
+/* loesungen.html */
+.loesungen-list .box {
+    background: #222;
+    border-left: 4px solid var(--accent);
+    border: none;
+}
+
+/* vorschlag.html & admin.html */
+body.light-theme {
+    background: #f5f5f5;
+    color: #000;
+}
+body.light-theme .box {
+    background: white;
+    box-shadow: 0 0 5px rgba(0,0,0,0.1);
+}
+
+textarea {
+    resize: vertical;
+    font-family: Arial, sans-serif;
+}
+
+label {
+    display: block;
+    margin-top: 15px;
+    text-align: left;
+    font-weight: bold;
+}
+
+/* admin.html */
+.box strong {
+    display: block;
+    margin-bottom: 10px;
+}