cinnabarflower/sto-k-odnomu
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix

Browse source
This commit is contained in:
Dmitry 2026-01-05 03:12:52 +03:00
parent f689d710a5
commit 249bc2e8cb
3 changed files with 317 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/App.jsx
View file

@ -2,6 +2,7 @@ import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { AuthProvider } from './context/AuthContext'; import { AuthProvider } from './context/AuthContext';
import { ThemeProvider } from './context/ThemeContext'; import { ThemeProvider } from './context/ThemeContext';
import Snowflakes from './components/Snowflakes';
import Home from './pages/Home'; import Home from './pages/Home';
import CreateRoom from './pages/CreateRoom'; import CreateRoom from './pages/CreateRoom';
import JoinRoom from './pages/JoinRoom'; import JoinRoom from './pages/JoinRoom';
@ -14,6 +15,8 @@ function App() {
<ThemeProvider> <ThemeProvider>
<AuthProvider> <AuthProvider>
<Router> <Router>
<>
<Snowflakes />
<Routes> <Routes>
<Route path="/" element={<Home />} /> <Route path="/" element={<Home />} />
<Route path="/create-room" element={<CreateRoom />} /> <Route path="/create-room" element={<CreateRoom />} />
@ -21,6 +24,7 @@ function App() {
<Route path="/room/:roomCode" element={<RoomPage />} /> <Route path="/room/:roomCode" element={<RoomPage />} />
<Route path="/local-game" element={<LocalGame />} /> <Route path="/local-game" element={<LocalGame />} />
</Routes> </Routes>
</>
</Router> </Router>
</AuthProvider> </AuthProvider>
</ThemeProvider> </ThemeProvider>

2
src/components/LocalGameApp.jsx
View file

@ -1,6 +1,5 @@
import { useState, useRef, useEffect } from 'react' import { useState, useRef, useEffect } from 'react'
import Game from './Game' import Game from './Game'
import Snowflakes from './Snowflakes'
import QuestionsModal from './QuestionsModal' import QuestionsModal from './QuestionsModal'
import ThemeSwitcher from './ThemeSwitcher' import ThemeSwitcher from './ThemeSwitcher'
import VoiceSettings from './VoiceSettings' import VoiceSettings from './VoiceSettings'
@ -92,7 +91,6 @@ function LocalGameApp() {
return ( return (
<div className="app"> <div className="app">
<Snowflakes />
<div className="app-content"> <div className="app-content">
<div className="app-title-bar"> <div className="app-title-bar">
<div className="app-control-buttons"> <div className="app-control-buttons">

306
src/index.css
View file

@ -50,3 +50,309 @@ body {
z-index: 1; 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;
}