From 249bc2e8cbb1ae4fbc2bcb432cc0d602c3b238cf Mon Sep 17 00:00:00 2001 From: Dmitry Date: Mon, 5 Jan 2026 03:12:52 +0300 Subject: [PATCH] fix --- src/App.jsx | 18 +- src/components/LocalGameApp.jsx | 2 - src/index.css | 306 ++++++++++++++++++++++++++++++++ 3 files changed, 317 insertions(+), 9 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 99ee135..1f91843 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,6 +2,7 @@ import React from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import { AuthProvider } from './context/AuthContext'; import { ThemeProvider } from './context/ThemeContext'; +import Snowflakes from './components/Snowflakes'; import Home from './pages/Home'; import CreateRoom from './pages/CreateRoom'; import JoinRoom from './pages/JoinRoom'; @@ -14,13 +15,16 @@ function App() { - - } /> - } /> - } /> - } /> - } /> - + <> + + + } /> + } /> + } /> + } /> + } /> + + diff --git a/src/components/LocalGameApp.jsx b/src/components/LocalGameApp.jsx index 2d4d1b7..8b501cc 100644 --- a/src/components/LocalGameApp.jsx +++ b/src/components/LocalGameApp.jsx @@ -1,6 +1,5 @@ import { useState, useRef, useEffect } from 'react' import Game from './Game' -import Snowflakes from './Snowflakes' import QuestionsModal from './QuestionsModal' import ThemeSwitcher from './ThemeSwitcher' import VoiceSettings from './VoiceSettings' @@ -92,7 +91,6 @@ function LocalGameApp() { return (
-
diff --git a/src/index.css b/src/index.css index 0cafd9b..c914888 100644 --- a/src/index.css +++ b/src/index.css @@ -50,3 +50,309 @@ body { z-index: 1; } +/* Page styles */ +.home-page, +.create-room-page, +.join-room-page, +.room-page { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: 2rem; +} + +.home-container, +.create-room-container, +.join-room-container, +.room-container { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + border: 2px solid rgba(255, 215, 0, 0.3); + border-radius: 20px; + padding: 2rem; + max-width: 600px; + width: 100%; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); +} + +.home-container h1, +.create-room-container h1, +.join-room-container h1, +.room-container h1 { + color: gold; + text-align: center; + margin-bottom: 1.5rem; + font-size: 2rem; + text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); +} + +.welcome-text { + text-align: center; + color: #fff; + margin-bottom: 2rem; + font-size: 1.2rem; +} + +.menu-buttons { + display: flex; + flex-direction: column; + gap: 1rem; + margin-bottom: 2rem; +} + +.menu-button { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + border: 2px solid rgba(255, 255, 255, 0.3); + border-radius: 12px; + padding: 1rem 2rem; + color: #fff; + font-size: 1rem; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; + text-align: center; +} + +.menu-button:hover { + background: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 215, 0, 0.6); + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3); +} + +.menu-button:active { + transform: translateY(0); +} + +.menu-button.primary { + background: linear-gradient(135deg, #ffd700, #ffed4e); + color: #1a1f3a; + border-color: gold; +} + +.menu-button.primary:hover { + background: linear-gradient(135deg, #ffed4e, #ffd700); + box-shadow: 0 4px 20px rgba(255, 215, 0, 0.6); +} + +.user-stats { + text-align: center; + color: #fff; + margin-top: 2rem; + padding-top: 2rem; + border-top: 1px solid rgba(255, 255, 255, 0.2); +} + +.user-stats p { + margin: 0.5rem 0; + font-size: 1rem; +} + +.form-group { + margin-bottom: 1.5rem; +} + +.form-group label { + display: block; + color: #fff; + margin-bottom: 0.5rem; + font-weight: 500; +} + +.form-group input, +.form-group select { + width: 100%; + padding: 0.75rem; + border: 2px solid rgba(255, 215, 0, 0.3); + border-radius: 8px; + background: rgba(255, 255, 255, 0.1); + color: #fff; + font-size: 1rem; + outline: none; + transition: all 0.3s ease; +} + +.form-group input::placeholder { + color: rgba(255, 255, 255, 0.5); +} + +.form-group input:focus, +.form-group select:focus { + border-color: gold; + background: rgba(255, 255, 255, 0.15); + box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); +} + +.form-group.checkbox { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.form-group.checkbox label { + display: flex; + align-items: center; + gap: 0.5rem; + margin: 0; + cursor: pointer; +} + +.form-group.checkbox input[type="checkbox"] { + width: auto; + cursor: pointer; +} + +.button-group { + display: flex; + gap: 1rem; + justify-content: center; + margin-top: 2rem; +} + +.button-group button { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + border: 2px solid rgba(255, 255, 255, 0.3); + border-radius: 12px; + padding: 0.75rem 1.5rem; + color: #fff; + font-size: 1rem; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; +} + +.button-group button:hover:not(:disabled) { + background: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 215, 0, 0.6); + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3); +} + +.button-group button:active:not(:disabled) { + transform: translateY(0); +} + +.button-group button:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.button-group button.primary { + background: linear-gradient(135deg, #ffd700, #ffed4e); + color: #1a1f3a; + border-color: gold; +} + +.button-group button.primary:hover:not(:disabled) { + background: linear-gradient(135deg, #ffed4e, #ffd700); + box-shadow: 0 4px 20px rgba(255, 215, 0, 0.6); +} + +.loading, +.error-page { + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 2rem; + color: #fff; + text-align: center; +} + +.error-page h1 { + color: gold; + margin-bottom: 1rem; + font-size: 2rem; + text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); +} + +.error-page p { + margin-bottom: 2rem; + font-size: 1.2rem; +} + +.error-page button { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + border: 2px solid rgba(255, 255, 255, 0.3); + border-radius: 12px; + padding: 0.75rem 1.5rem; + color: #fff; + font-size: 1rem; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; +} + +.error-page button:hover { + background: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 215, 0, 0.6); + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3); +} + +.room-info { + background: rgba(255, 255, 255, 0.05); + border-radius: 12px; + padding: 1rem; + margin-bottom: 1.5rem; +} + +.room-info p { + color: #fff; + margin: 0.5rem 0; + font-size: 1rem; +} + +.qr-code { + text-align: center; + margin-bottom: 2rem; +} + +.qr-code h3 { + color: gold; + margin-bottom: 1rem; + font-size: 1.2rem; + text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); +} + +.qr-code img { + max-width: 250px; + width: 100%; + border: 2px solid rgba(255, 215, 0, 0.3); + border-radius: 12px; + padding: 1rem; + background: #fff; +} + +.participants-list { + margin-bottom: 2rem; +} + +.participants-list h3 { + color: gold; + margin-bottom: 1rem; + font-size: 1.2rem; + text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); +} + +.participants-list ul { + list-style: none; + padding: 0; +} + +.participants-list li { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + border: 2px solid rgba(255, 255, 255, 0.2); + border-radius: 8px; + padding: 0.75rem 1rem; + margin-bottom: 0.5rem; + color: #fff; + font-size: 1rem; +} +