init
This commit is contained in:
arrelin
46
.gitignore
vendored
Normal file
46
.gitignore
vendored
Normal file
@@ -0,0 +1,46 @@
|
||||
# Dependencies
|
||||
frontend/node_modules/
|
||||
|
||||
# Build output
|
||||
frontend/dist/
|
||||
frontend/.vite/
|
||||
|
||||
# Env files
|
||||
.env
|
||||
.env.local
|
||||
.env.*.local
|
||||
frontend/.env
|
||||
frontend/.env.local
|
||||
frontend/.env.*.local
|
||||
|
||||
# Logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# Editor
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Claude
|
||||
.claude/
|
||||
|
||||
# Java / Spring Boot
|
||||
*.class
|
||||
*.jar
|
||||
*.war
|
||||
*.ear
|
||||
target/
|
||||
.mvn/wrapper/maven-wrapper.jar
|
||||
!**/src/main/**/target/
|
||||
!**/src/test/**/target/
|
||||
|
||||
# Gradle
|
||||
.gradle/
|
||||
build/
|
||||
!gradle/wrapper/gradle-wrapper.jar
|
||||
15
frontend/index.html
Normal file
15
frontend/index.html
Normal file
@@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>КИОН — смотри кино онлайн</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700;900&display=swap" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
1758
frontend/package-lock.json
generated
Normal file
1758
frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
20
frontend/package.json
Normal file
20
frontend/package.json
Normal file
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "kion-game",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.26.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^4.3.1",
|
||||
"vite": "^5.4.2"
|
||||
}
|
||||
}
|
||||
14
frontend/src/App.jsx
Normal file
14
frontend/src/App.jsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom'
|
||||
import HomePage from './pages/HomePage'
|
||||
import GamesPage from './pages/GamesPage'
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<HomePage />} />
|
||||
<Route path="/games" element={<GamesPage />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
)
|
||||
}
|
||||
59
frontend/src/components/CookieBanner.css
Normal file
59
frontend/src/components/CookieBanner.css
Normal file
@@ -0,0 +1,59 @@
|
||||
.cookie-banner {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 200;
|
||||
width: calc(100% - 48px);
|
||||
max-width: 860px;
|
||||
background: rgba(26, 26, 26, 0.92);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
box-shadow: 0 8px 40px rgba(0,0,0,0.5);
|
||||
animation: slideUp 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateX(-50%) translateY(20px); }
|
||||
to { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
}
|
||||
|
||||
.cookie-text {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.5;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.cookie-link {
|
||||
color: var(--accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cookie-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.cookie-accept {
|
||||
flex-shrink: 0;
|
||||
padding: 9px 22px;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border-radius: 9px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cookie-accept:hover {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
20
frontend/src/components/CookieBanner.jsx
Normal file
20
frontend/src/components/CookieBanner.jsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import { useState } from 'react'
|
||||
import './CookieBanner.css'
|
||||
|
||||
export default function CookieBanner() {
|
||||
const [dismissed, setDismissed] = useState(false)
|
||||
|
||||
if (dismissed) return null
|
||||
|
||||
return (
|
||||
<div className="cookie-banner">
|
||||
<p className="cookie-text">
|
||||
Мы используем файлы cookie для улучшения работы сервиса. Продолжая пользоваться сайтом, вы соглашаетесь с нашей{' '}
|
||||
<span className="cookie-link">политикой конфиденциальности</span>.
|
||||
</p>
|
||||
<button className="cookie-accept" onClick={() => setDismissed(true)}>
|
||||
Принимаю
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
136
frontend/src/components/Header.css
Normal file
136
frontend/src/components/Header.css
Normal file
@@ -0,0 +1,136 @@
|
||||
.header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: rgba(13, 13, 13, 0.95);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.5px;
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
padding: 6px 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
border-radius: 8px;
|
||||
transition: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-item.stub {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.nav-games {
|
||||
color: var(--text);
|
||||
background: rgba(107, 47, 217, 0.15);
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.nav-games:hover {
|
||||
background: rgba(107, 47, 217, 0.3);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-games.active {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
border-radius: 8px;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
background: rgba(255,255,255,0.06);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.promo-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 14px;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.promo-btn.stub {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.degi-pill {
|
||||
padding: 5px 12px;
|
||||
background: rgba(255,255,255,0.08);
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.degi-pill.stub {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
padding: 7px 18px;
|
||||
background: rgba(255,255,255,0.08);
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-radius: 8px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.login-btn.stub {
|
||||
cursor: default;
|
||||
}
|
||||
50
frontend/src/components/Header.jsx
Normal file
50
frontend/src/components/Header.jsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import { Link, useLocation } from 'react-router-dom'
|
||||
import './Header.css'
|
||||
|
||||
export default function Header() {
|
||||
const location = useLocation()
|
||||
|
||||
return (
|
||||
<header className="header">
|
||||
<div className="header-inner">
|
||||
<div className="header-left">
|
||||
<Link to="/" className="logo">КИОН</Link>
|
||||
<nav className="nav">
|
||||
<span className="nav-item stub">Главная</span>
|
||||
<span className="nav-item stub">Телеканалы</span>
|
||||
<span className="nav-item stub">Фильмы</span>
|
||||
<span className="nav-item stub">Сериалы</span>
|
||||
<Link to="/games" className={`nav-item nav-games${location.pathname === '/games' ? ' active' : ''}`}>Игры</Link>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="header-right">
|
||||
<button className="icon-btn" aria-label="Фильтры">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<line x1="4" y1="6" x2="20" y2="6"/>
|
||||
<line x1="8" y1="12" x2="16" y2="12"/>
|
||||
<line x1="11" y1="18" x2="13" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button className="icon-btn" aria-label="Поиск">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<circle cx="11" cy="11" r="8"/>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button className="promo-btn stub">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<polyline points="20 12 20 22 4 22 4 12"/>
|
||||
<rect x="2" y="7" width="20" height="5"/>
|
||||
<line x1="12" y1="22" x2="12" y2="7"/>
|
||||
<path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"/>
|
||||
<path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/>
|
||||
</svg>
|
||||
Промокод
|
||||
</button>
|
||||
<div className="degi-pill stub">Деги</div>
|
||||
<button className="login-btn stub">Войти</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
167
frontend/src/components/HeroBanner.css
Normal file
167
frontend/src/components/HeroBanner.css
Normal file
@@ -0,0 +1,167 @@
|
||||
.hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #1a0533 0%, #2d0a5e 30%, #6B2FD9 60%, #c026d3 85%, #e11d87 100%);
|
||||
min-height: 460px;
|
||||
}
|
||||
|
||||
.hero-inner {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 64px 24px 72px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
flex: 1;
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
.hero-eyebrow {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1.5px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255,255,255,0.55);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(36px, 5vw, 56px);
|
||||
font-weight: 900;
|
||||
line-height: 1.05;
|
||||
color: #fff;
|
||||
margin-bottom: 16px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 15px;
|
||||
color: rgba(255,255,255,0.65);
|
||||
line-height: 1.5;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hero-price {
|
||||
font-size: 15px;
|
||||
color: rgba(255,255,255,0.7);
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.hero-price span {
|
||||
color: var(--blue);
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
padding: 12px 28px;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, transform 0.15s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--accent-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
padding: 12px 28px;
|
||||
background: rgba(0,0,0,0.35);
|
||||
color: rgba(255,255,255,0.85);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255,255,255,0.15);
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(8px);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
flex-shrink: 0;
|
||||
width: 240px;
|
||||
height: 340px;
|
||||
}
|
||||
|
||||
.hero-card-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(160deg, #0f0515 0%, #1e0840 50%, #0a0a0a 100%);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
padding: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-card-glow {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
background: radial-gradient(circle, rgba(107,47,217,0.6) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-card-badge {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.hero-card-title {
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.5px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-gradient-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100px;
|
||||
background: linear-gradient(to bottom, transparent, var(--bg));
|
||||
z-index: 1;
|
||||
}
|
||||
28
frontend/src/components/HeroBanner.jsx
Normal file
28
frontend/src/components/HeroBanner.jsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import './HeroBanner.css'
|
||||
|
||||
export default function HeroBanner() {
|
||||
return (
|
||||
<section className="hero">
|
||||
<div className="hero-inner">
|
||||
<div className="hero-text">
|
||||
<p className="hero-eyebrow">Эксклюзивно на КИОН</p>
|
||||
<h1 className="hero-title">Возвращение<br />детективного<br />хита</h1>
|
||||
<p className="hero-subtitle">Новый сезон уже доступен<br />в оригинальном качестве</p>
|
||||
<p className="hero-price">всего за <span>99 ₽/мес</span></p>
|
||||
<div className="hero-actions">
|
||||
<button className="btn-primary">Оформить подписку</button>
|
||||
<button className="btn-secondary">Ввести промокод</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hero-card">
|
||||
<div className="hero-card-inner">
|
||||
<div className="hero-card-badge">НОВЫЙ СЕЗОН</div>
|
||||
<div className="hero-card-title">ЧЁРНОЕ<br />СОЛНЦЕ</div>
|
||||
<div className="hero-card-glow" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hero-gradient-overlay" />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
150
frontend/src/components/PopularSection.css
Normal file
150
frontend/src/components/PopularSection.css
Normal file
@@ -0,0 +1,150 @@
|
||||
.popular {
|
||||
padding: 48px 0 40px;
|
||||
}
|
||||
|
||||
.popular-inner {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
.section-arrow {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255,255,255,0.06);
|
||||
color: var(--text-muted);
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.section-arrow:hover {
|
||||
background: rgba(255,255,255,0.12);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.cards-scroll {
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255,255,255,0.15) transparent;
|
||||
margin: 0 -24px;
|
||||
padding: 4px 24px 16px;
|
||||
}
|
||||
|
||||
.cards-track {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.movie-card {
|
||||
width: 160px;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.movie-card:hover .movie-poster {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 16px 32px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.movie-poster {
|
||||
width: 160px;
|
||||
height: 226px;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: transform 0.25s, box-shadow 0.25s;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.movie-poster-text {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: rgba(255,255,255,0.3);
|
||||
line-height: 1.2;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.movie-badge {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 3px 8px;
|
||||
border-radius: 6px;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.badge-free {
|
||||
background: rgba(59, 130, 246, 0.85);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.badge-sub {
|
||||
background: rgba(107, 47, 217, 0.85);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.movie-info {
|
||||
padding: 10px 2px 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.movie-title {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.movie-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.movie-k {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background: var(--accent);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.movie-rating {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
50
frontend/src/components/PopularSection.jsx
Normal file
50
frontend/src/components/PopularSection.jsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import './PopularSection.css'
|
||||
|
||||
const MOVIES = [
|
||||
{ title: 'Дети перемен', rating: '8.4', badge: 'Подписка', color: 'linear-gradient(160deg,#1a3a5c,#0d6e8c)' },
|
||||
{ title: 'Чёрное солнце', rating: '9.4', badge: 'Бесплатно', color: 'linear-gradient(160deg,#1c0a36,#4a1a7a)' },
|
||||
{ title: 'Трофей', rating: '6.7', badge: 'Подписка', color: 'linear-gradient(160deg,#3d1a00,#8b4000)' },
|
||||
{ title: 'Реализация', rating: '8.9', badge: 'Бесплатно', color: 'linear-gradient(160deg,#0a2e1a,#0d6e40)' },
|
||||
{ title: 'Чебурашка 2', rating: '8.5', badge: 'Подписка', color: 'linear-gradient(160deg,#1a1a3d,#3d3d8c)' },
|
||||
{ title: 'Склиф', rating: '7.7', badge: 'Подписка', color: 'linear-gradient(160deg,#2e0a0a,#8c1a1a)' },
|
||||
{ title: 'Простая просьба', rating: '8.2', badge: 'Подписка', color: 'linear-gradient(160deg,#0a1a2e,#1a4a6e)' },
|
||||
{ title: 'Рикошет', rating: '8.7', badge: 'Бесплатно', color: 'linear-gradient(160deg,#1a2e0a,#4a7a1a)' },
|
||||
]
|
||||
|
||||
export default function PopularSection() {
|
||||
return (
|
||||
<section className="popular">
|
||||
<div className="popular-inner">
|
||||
<div className="section-header">
|
||||
<h2 className="section-title">Популярно сейчас</h2>
|
||||
<button className="section-arrow" aria-label="Показать все">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="cards-scroll">
|
||||
<div className="cards-track">
|
||||
{MOVIES.map((m) => (
|
||||
<div key={m.title} className="movie-card">
|
||||
<div className="movie-poster" style={{ background: m.color }}>
|
||||
<span className="movie-poster-text">{m.title}</span>
|
||||
<div className={`movie-badge ${m.badge === 'Бесплатно' ? 'badge-free' : 'badge-sub'}`}>
|
||||
{m.badge}
|
||||
</div>
|
||||
</div>
|
||||
<div className="movie-info">
|
||||
<p className="movie-title">{m.title}</p>
|
||||
<div className="movie-meta">
|
||||
<span className="movie-k">К</span>
|
||||
<span className="movie-rating">{m.rating}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
58
frontend/src/index.css
Normal file
58
frontend/src/index.css
Normal file
@@ -0,0 +1,58 @@
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg: #0d0d0d;
|
||||
--bg-card: #1a1a1a;
|
||||
--accent: #6B2FD9;
|
||||
--accent-hover: #7c3ff0;
|
||||
--blue: #3b82f6;
|
||||
--text: #ffffff;
|
||||
--text-muted: #9ca3af;
|
||||
--text-dim: #6b7280;
|
||||
--border: rgba(255,255,255,0.08);
|
||||
--radius: 12px;
|
||||
--font: 'Golos Text', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: var(--font);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255,255,255,0.15);
|
||||
border-radius: 2px;
|
||||
}
|
||||
10
frontend/src/main.jsx
Normal file
10
frontend/src/main.jsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.jsx'
|
||||
import './index.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
37
frontend/src/pages/GamesPage.css
Normal file
37
frontend/src/pages/GamesPage.css
Normal file
@@ -0,0 +1,37 @@
|
||||
.games-main {
|
||||
min-height: calc(100vh - 64px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.games-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.games-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(107,47,217,0.12);
|
||||
border-radius: 20px;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.games-title {
|
||||
font-size: 36px;
|
||||
font-weight: 900;
|
||||
color: var(--text);
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.games-subtitle {
|
||||
font-size: 16px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
22
frontend/src/pages/GamesPage.jsx
Normal file
22
frontend/src/pages/GamesPage.jsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import Header from '../components/Header'
|
||||
import './GamesPage.css'
|
||||
|
||||
export default function GamesPage() {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<main className="games-main">
|
||||
<div className="games-placeholder">
|
||||
<div className="games-icon">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<rect x="2" y="6" width="20" height="12" rx="3"/>
|
||||
<path d="M6 10h2m-1-1v2M14 10h.01M16 10h.01"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 className="games-title">Игры</h1>
|
||||
<p className="games-subtitle">Скоро здесь появятся игры</p>
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
)
|
||||
}
|
||||
17
frontend/src/pages/HomePage.jsx
Normal file
17
frontend/src/pages/HomePage.jsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import Header from '../components/Header'
|
||||
import HeroBanner from '../components/HeroBanner'
|
||||
import PopularSection from '../components/PopularSection'
|
||||
import CookieBanner from '../components/CookieBanner'
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<main>
|
||||
<HeroBanner />
|
||||
<PopularSection />
|
||||
</main>
|
||||
<CookieBanner />
|
||||
</>
|
||||
)
|
||||
}
|
||||
6
frontend/vite.config.js
Normal file
6
frontend/vite.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
Reference in New Issue
Block a user