✨ Добро пожаловать

Привет!

Это небольшая приветственная страница, созданная с использованием FastAPI, HTML и CSS.

/* Базовые настройки */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Цветовая палитра */ :root { --background: #0f172a; --surface: rgba(30, 41, 59, 0.55); --text-primary: #ffffff; --text-secondary: #cbd5e1; --accent: #60a5fa; --border: rgba(255, 255, 255, 0.08); --shadow: 0 20px 60px rgba(0, 0, 0, 0.35); } /* Страница */ body { min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 32px; font-family: Inter, Arial, sans-serif; background: linear-gradient( 135deg, #020617, #0f172a, #1e293b ); color: var(--text-primary); } /* Первый экран */ .hero { width: 100%; max-width: 900px; } /* Карточка */ .hero-content { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; backdrop-filter: blur(18px); padding: 80px 60px; text-align: center; box-shadow: var(--shadow); } /* Badge */ .badge { display: inline-block; margin-bottom: 24px; padding: 8px 16px; border-radius: 999px; background: rgba(96,165,250,.12); color: var(--accent); font-size: 14px; font-weight: 600; letter-spacing: .5px; } /* Заголовок */ h1 { font-size: 64px; font-weight: 700; margin-bottom: 24px; } /* Описание */ p { max-width: 650px; margin: 0 auto 40px; color: var(--text-secondary); line-height: 1.8; font-size: 20px; } /* Кнопка */ button { border: none; cursor: pointer; padding: 16px 34px; border-radius: 14px; background: var(--accent); color: white; font-size: 17px; font-weight: 600; transition: .25s; } button:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(96,165,250,.35); } /* Базовые настройки */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Цветовая палитра */ :root { --background: #0f172a; --surface: rgba(30, 41, 59, 0.55); --text-primary: #ffffff; --text-secondary: #cbd5e1; --accent: #60a5fa; --border: rgba(255,255,255,.08); --shadow: 0 20px 60px rgba(0,0,0,.35); } /* Страница */ body { min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 32px; overflow: hidden; font-family: Arial, Helvetica, sans-serif; background: linear-gradient( 135deg, #020617, #0f172a, #1e293b ); color: var(--text-primary); } /* Декоративный фон */ .background { position: fixed; inset: 0; overflow: hidden; z-index: -1; } .blob { position: absolute; width: 500px; height: 500px; border-radius: 50%; filter: blur(100px); opacity: .35; } .blob-1 { background: #2563eb; top: -120px; left: -120px; } .blob-2 { background: #7c3aed; bottom: -150px; right: -120px; } /* Hero */ .hero { width: 100%; max-width: 900px; } /* Карточка */ .hero-content { padding: 80px 60px; text-align: center; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(18px); box-shadow: var(--shadow); animation: fadeUp .8s ease; } /* Badge */ .badge { display: inline-block; margin-bottom: 24px; padding: 8px 16px; border-radius: 999px; background: rgba(96,165,250,.12); color: var(--accent); font-size: 14px; font-weight: 600; letter-spacing: .5px; } /* Заголовок */ h1 { font-size: 64px; font-weight: 800; line-height: 1.1; letter-spacing: -2px; margin-bottom: 24px; } /* Текст */ p { max-width: 650px; margin: 0 auto 40px; color: var(--text-secondary); line-height: 1.8; font-size: 20px; } /* Кнопка */ button { cursor: pointer; border: none; padding: 16px 34px; border-radius: 14px; background: var(--accent); color: white; font-size: 17px; font-weight: 600; transition: transform .25s ease, box-shadow .25s ease; } button:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(96,165,250,.35); } /* Анимация */ @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }