From 179536a32e3673aa5d7b26c28544854fa10f7025 Mon Sep 17 00:00:00 2001 From: YehorI Date: Sun, 28 Sep 2025 14:11:05 +0300 Subject: [PATCH] rocket --- README.md | 5 +- frontend/src/app/login/page.tsx | 2 + .../src/components/SpaceBackground.module.css | 122 +++++++++++ frontend/src/components/SpaceBackground.tsx | 203 ++++++++++++++++++ 4 files changed, 330 insertions(+), 2 deletions(-) create mode 100644 frontend/src/components/SpaceBackground.module.css create mode 100644 frontend/src/components/SpaceBackground.tsx diff --git a/README.md b/README.md index c4f20e6..221ea16 100644 --- a/README.md +++ b/README.md @@ -26,9 +26,10 @@ cp backend/.env.example backend/.env cp frontend/.env.example frontend/.env ``` -3. Запустите окружение: +3. Запустите: ```bash - docker compose up --build + make setup + make start ``` 4. После запуска будут доступны сервисы: - API: http://localhost:8000 (документация Swagger — `/docs`). diff --git a/frontend/src/app/login/page.tsx b/frontend/src/app/login/page.tsx index 0d1cb38..2e4d81c 100644 --- a/frontend/src/app/login/page.tsx +++ b/frontend/src/app/login/page.tsx @@ -1,6 +1,7 @@ import { redirect } from 'next/navigation'; import { apiFetch } from '../../lib/api'; import { createSession, getSession } from '../../lib/auth/session'; +import SpaceBackground from '../../components/SpaceBackground'; import styles from './styles.module.css'; @@ -59,6 +60,7 @@ export default async function LoginPage({ return (
+

Вход в Mission Control

{/* Подсказка для демо-режима, чтобы не искать логин/пароль в README. */} diff --git a/frontend/src/components/SpaceBackground.module.css b/frontend/src/components/SpaceBackground.module.css new file mode 100644 index 0000000..c489b7a --- /dev/null +++ b/frontend/src/components/SpaceBackground.module.css @@ -0,0 +1,122 @@ +.spaceBackground { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + z-index: -1; + pointer-events: none; + overflow: hidden; +} + +.spaceSvg { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; +} + +.stars { + filter: blur(0.5px); +} + +.particles { + filter: blur(1px); +} + +.planets { + filter: blur(2px); +} + +.nebula { + filter: blur(8px); +} + +.shootingStars { + filter: blur(0.5px); +} + +.rocket { + filter: drop-shadow(0 0 8px rgba(116, 185, 255, 0.4)); +} + +/* Animation keyframes for smooth performance */ +@keyframes float { + 0%, 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-20px); + } +} + +@keyframes twinkle { + 0%, 100% { + opacity: 0.3; + } + 50% { + opacity: 1; + } +} + +@keyframes drift { + 0% { + transform: translate(0, 0); + } + 33% { + transform: translate(30px, -30px); + } + 66% { + transform: translate(-20px, 20px); + } + 100% { + transform: translate(0, 0); + } +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .spaceBackground { + opacity: 0.7; + } + + .rocket { + opacity: 0.6; + transform: scale(0.8); + } +} + +@media (max-width: 480px) { + .spaceBackground { + opacity: 0.5; + } + + .stars circle { + opacity: 0.4 !important; + } + + .particles circle { + opacity: 0.3 !important; + } +} + +/* Reduced motion for accessibility */ +@media (prefers-reduced-motion: reduce) { + .stars circle, + .particles circle, + .planets circle, + .nebula ellipse, + .shootingStars line { + animation: none !important; + } + + .stars circle animate, + .particles circle animate, + .particles circle animateTransform, + .planets circle animateTransform, + .nebula ellipse animateTransform, + .shootingStars line animate, + .shootingStars line animateTransform { + display: none; + } +} diff --git a/frontend/src/components/SpaceBackground.tsx b/frontend/src/components/SpaceBackground.tsx new file mode 100644 index 0000000..7a57e2e --- /dev/null +++ b/frontend/src/components/SpaceBackground.tsx @@ -0,0 +1,203 @@ +'use client'; + +import React from 'react'; +import styles from './SpaceBackground.module.css'; + +export default function SpaceBackground() { + return ( +
+ + {/* Animated Stars - More Natural Distribution */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* Floating Particles */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* Distant Planets/Objects */} + + + + + + + + + + + + + {/* Nebula-like background shapes */} + + + + + + + + + + {/* Multiple Shooting Stars */} + + + + + + + + + + + + + + + + + + + + + + + + {/* Flying Rocket - 5x Bigger */} + + + + + {/* Rocket Body */} + + + {/* Rocket Nose */} + + + {/* Rocket Fins */} + + + + {/* Rocket Exhaust */} + + + + + + + + + + {/* Rocket Window */} + + + + + {/* Gradient Definitions */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +}