diff --git a/app/static/style.css b/app/static/style.css index 378a25f..ee63947 100644 --- a/app/static/style.css +++ b/app/static/style.css @@ -17,42 +17,48 @@ body { .container { flex: 1; - max-width: 600px; + max-width: 500px; /* Etwas schmaler, sieht auf Handy besser aus */ margin: 0 auto; padding: 20px; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; + justify-content: center; /* Vertikal zentrieren */ } -h1 { text-align: center; color: #333; } +h1 { text-align: center; color: #333; margin-bottom: 30px; } /* SETUP SCREEN */ .section-title { font-weight: bold; - margin: 20px 0 10px; + margin: 25px 0 10px; color: #555; text-transform: uppercase; font-size: 0.9rem; + text-align: center; } +/* WICHTIG: Buttons untereinander erzwingen */ .button-group { display: flex; flex-direction: column; - gap: 10px; + gap: 15px; + width: 100%; } button { - padding: 15px; + padding: 18px; /* Große Klickfläche */ border: 2px solid #ddd; border-radius: 8px; background: white; - font-size: 1rem; + font-size: 1.1rem; cursor: pointer; font-weight: 600; width: 100%; + display: block; /* Erzwingt neue Zeile */ transition: all 0.2s; + text-align: center; } button:hover { background: #f0f0f0; } @@ -70,11 +76,11 @@ button.active { color: #e65100; } -/* Action Buttons */ +/* Action Buttons (Start, Check, Next) */ .action-btn { border: none; color: white; - margin-top: 10px; + margin-top: 15px; } .primary { background: var(--primary); } .secondary { background: #6c757d; } @@ -84,36 +90,48 @@ button:disabled { opacity: 0.5; cursor: not-allowed; } /* QUIZ CARD */ .card { background: white; - padding: 20px; + padding: 30px 20px; border-radius: 12px; - box-shadow: 0 4px 10px rgba(0,0,0,0.1); + box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-align: center; - margin-bottom: 20px; + margin-bottom: 25px; + width: 100%; + box-sizing: border-box; } -.question { font-size: 1.8rem; font-weight: bold; margin: 15px 0; } -.hint { color: #888; font-style: italic; margin-bottom: 15px; } +.label { font-size: 0.9rem; color: #888; text-transform: uppercase; letter-spacing: 1px; } +.question { font-size: 2rem; font-weight: bold; margin: 20px 0; color: #222; } +.hint { color: #888; font-style: italic; margin-bottom: 20px; } input { width: 100%; - padding: 12px; - margin-bottom: 10px; + padding: 15px; + margin-bottom: 15px; border: 2px solid #ddd; - border-radius: 6px; - font-size: 1.1rem; + border-radius: 8px; + font-size: 1.2rem; box-sizing: border-box; text-align: center; + display: block; } input:focus { border-color: var(--primary); outline: none; } #verb-inputs { display: flex; flex-direction: column; - gap: 5px; + gap: 10px; +} + +/* Quiz Controls Container */ +.quiz-controls { + display: flex; + flex-direction: column; + gap: 10px; + width: 100%; } /* FEEDBACK */ -.feedback { font-weight: bold; min-height: 20px; } +.feedback { font-weight: bold; min-height: 25px; font-size: 1.1rem; margin-top: 10px; } .correct { color: var(--success); } .wrong { color: var(--danger); } .typo { color: var(--accent); } @@ -124,7 +142,7 @@ input:focus { border-color: var(--primary); outline: none; } position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,0.5); - z-index: 99; + z-index: 999; align-items: center; justify-content: center; padding: 20px; @@ -132,34 +150,48 @@ input:focus { border-color: var(--primary); outline: none; } .overlay-content { background: white; padding: 20px; - border-radius: 10px; + border-radius: 12px; width: 100%; max-width: 400px; - max-height: 80vh; + max-height: 85vh; display: flex; flex-direction: column; } .page-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); - gap: 8px; + grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); + gap: 10px; overflow-y: auto; margin: 15px 0; + flex: 1; } .page-item label { display: block; - padding: 10px; - background: #eee; + padding: 12px; + background: #f8f9fa; text-align: center; - border-radius: 5px; + border-radius: 6px; cursor: pointer; + font-weight: bold; + color: #555; + border: 2px solid transparent; } .page-item input { display: none; } .page-item input:checked + label { - background: var(--primary); - color: white; + background: #e3f2fd; + border-color: var(--primary); + color: var(--primary); } -/* PROGRESS */ -.progress-bar-bg { height: 6px; background: #ddd; width: 100%; } +/* PROGRESS BAR (STICKY BOTTOM) */ +.progress-container { + background: white; + padding: 15px 20px; + border-top: 1px solid #eee; + text-align: center; + position: fixed; /* Fixiert unten */ + bottom: 0; left: 0; right: 0; +} +#stats-text { margin-bottom: 5px; color: #666; font-size: 0.9rem; } +.progress-bar-bg { height: 8px; background: #eee; width: 100%; border-radius: 4px; overflow: hidden;} .progress-bar-fill { height: 100%; background: var(--success); width: 0%; transition: width 0.3s; } \ No newline at end of file