Update 2025-04-13_16:27:10

2025-04-13 16:27:11 +02:00
commit 0c0acdc1dc
2225 changed files with 404073 additions and 0 deletions
--- a/static/style.css
+++ b/static/style.css
@ -0,0 +1,142 @@
+/* --- Global Styling --- */
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #ECF0F1;
+    color: #34495E;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.container {
+    background-color: #FFFFFF;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    text-align: center;
+    width: 340px;
+}
+
+/* --- Input Fields --- */
+input {
+    width: 90%;
+    padding: 10px;
+    margin: 10px 0;
+    border: 2px solid #4A90E2;
+    border-radius: 5px;
+    font-size: 16px;
+    text-align: center;
+    outline: none;
+}
+
+input:focus {
+    border-color: #F39C12;
+}
+
+/* --- Buttons --- */
+button {
+    background-color: #4A90E2;
+    color: #FFFFFF;
+    border: none;
+    padding: 10px 15px;
+    font-size: 16px;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+    margin-top: 10px;
+}
+
+button:hover {
+    background-color: #357ABD;
+}
+
+/* Help Button */
+#help-btn {
+    background-color: #F39C12;
+    margin-left: 8px;
+}
+
+#help-btn:hover {
+    background-color: #D68910;
+}
+
+/* --- Feedback and Countdown --- */
+#feedback {
+    margin-top: 15px;
+    font-size: 18px;
+}
+
+.success { color: #2ECC71; }
+.failure { color: #E74C3C; }
+.highlight { color: #F39C12; }
+
+#countdown {
+    margin-top: 10px;
+    font-size: 16px;
+}
+
+/* --- Leaderboard --- */
+#leaderboard {
+    margin-top: 20px;
+    background-color: #F7F9FA;
+    border-radius: 6px;
+    padding: 10px;
+    text-align: left;
+}
+
+#leaderboard h3 {
+    color: #F39C12;
+    text-align: center;
+}
+
+#score-list {
+    padding-left: 20px;
+}
+
+#score-list li {
+    margin: 4px 0;
+    color: #34495E;
+}
+
+/* --- Help Modal --- */
+.modal {
+    position: fixed;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    background-color: rgba(52, 73, 94, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 999;
+}
+
+.modal-content {
+    display: inline-block;      /* Helps size to content */
+    width: auto;               /* Let content define base width */
+    min-width: 400px;          /* Ensure it's not too narrow */
+    max-width: 80%;            /* Let it scale but keep within viewport */
+    white-space: normal;       /* Allows normal line wrapping */
+    word-wrap: break-word;     /* Avoid extremely long unbroken lines */
+    background-color: #FFFFFF;
+    padding: 20px;
+    border-radius: 8px;
+    text-align: left;
+    position: relative;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+}
+
+#close-modal {
+    position: absolute;
+    top: 8px;
+    right: 12px;
+    color: #34495E;
+    cursor: pointer;
+    font-size: 24px;
+}
+
+.hidden {
+    display: none;
+}
+