Привет! Я твой помощник
Выбери с чего начнём
/* ============================================
ПЕРЕМЕННЫЕ — ЗДЕСЬ МЕНЯЕТЕ ЦВЕТА
============================================ */
:root {
/* Главный экран (дефолт) */
--bg-from: #9B9FD4; /* ← ВАШИ ЦВЕТА */
--bg-to: #C4C8F0; /* ← ВАШИ ЦВЕТА */
--accent: #7B7FC4; /* ← ВАШИ ЦВЕТА */
--text-color: #ffffff;
--card-bg: rgba(255,255,255,0.15);
--card-border: rgba(255,255,255,0.25);
/* Радиусы */
--radius-main: 24px;
--radius-card: 20px;
--radius-msg: 18px;
--radius-input: 28px;
/* Тени */
--shadow-soft: 0 8px 32px rgba(0,0,0,0.12);
--shadow-card: 0 4px 16px rgba(0,0,0,0.08);
}
/* ============================================
ОСНОВА
============================================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#ai-assistant {
font-family: 'Inter', -apple-system, sans-serif;
width: 100%;
min-height: 100vh;
background: linear-gradient(145deg, var(--bg-from) 0%, var(--bg-to) 100%);
color: var(--text-color);
transition: background 0.6s ease;
position: relative;
overflow: hidden;
}
/* Фоновый декор-элемент */
#ai-assistant::before {
content: '';
position: fixed;
top: -30%;
right: -20%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
/* ============================================
ЭКРАН ВЫБОРА СФЕРЫ
============================================ */
#sphere-selector {
max-width: 860px;
margin: 0 auto;
padding: 40px 24px 60px;
display: flex;
flex-direction: column;
align-items: center;
}
/* ПЕРСОНАЖ — главный экран */
#main-character-wrap {
position: relative;
margin-bottom: 32px;
}
#main-character {
width: 220px;
height: 220px;
border-radius: 50%;
overflow: hidden;
position: relative;
z-index: 2;
box-shadow: var(--shadow-soft);
/* Скруглённые углы у видео */
border-radius: var(--radius-main);
}
#main-character video,
#main-character img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Свечение под персонажем */
#main-character-glow {
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 160px;
height: 40px;
background: var(--accent);
filter: blur(20px);
opacity: 0.4;
border-radius: 50%;
z-index: 1;
}
/* Лёгкое покачивание */
#main-character {
animation: characterFloat 4s ease-in-out infinite;
}
@keyframes characterFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
}
/* ПРИВЕТСТВИЕ */
#welcome-text {
text-align: center;
margin-bottom: 36px;
}
#welcome-text h1 {
font-size: 26px;
font-weight: 700;
letter-spacing: -0.5px;
margin-bottom: 8px;
text-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
#welcome-text p {
font-size: 16px;
opacity: 0.75;
font-weight: 400;
}
/* СЕТКА СФЕР */
.spheres-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
width: 100%;
}
/* КНОПКА СФЕРЫ */
.sphere-btn {
background: var(--card-bg);
border: 1.5px solid var(--card-border);
border-radius: var(--radius-card);
padding: 20px 12px;
color: var(--text-color);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
position: relative;
overflow: hidden;
}
/* Блик на карточке */
.sphere-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
}
.sphere-btn:hover {
transform: translateY(-4px) scale(1.02);
background: rgba(255,255,255,0.25);
border-color: rgba(255,255,255,0.5);
box-shadow: 0 12px 36px rgba(0,0,0,0.15);
}
.sphere-btn:active {
transform: translateY(-1px) scale(0.98);
}
.sphere-icon {
font-size: 28px;
line-height: 1;
}
.sphere-label {
font-size: 12px;
font-weight: 600;
text-align: center;
line-height: 1.3;
opacity: 0.9;
}
/* ============================================
ЧАТ ИНТЕРФЕЙС
============================================ */
#chat-interface {
max-width: 860px;
margin: 0 auto;
height: 100vh;
display: flex;
flex-direction: column;
padding: 16px;
gap: 0;
}
/* ШАПКА ЧАТА */
#chat-header {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: var(--card-bg);
border: 1.5px solid var(--card-border);
border-radius: var(--radius-card);
backdrop-filter: blur(12px);
margin-bottom: 12px;
flex-shrink: 0;
}
#back-btn {
background: rgba(255,255,255,0.2);
border: none;
border-radius: 12px;
width: 36px;
height: 36px;
color: white;
font-size: 16px;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
#back-btn:hover {
background: rgba(255,255,255,0.35);
transform: translateX(-2px);
}
/* Маленький персонаж в шапке */
#header-character-wrap {
width: 44px;
height: 44px;
border-radius: 14px;
overflow: hidden;
flex-shrink: 0;
box-shadow: var(--shadow-card);
}
#character-video-chat {
width: 100%;
height: 100%;
object-fit: cover;
}
#current-sphere-name {
font-size: 15px;
font-weight: 600;
flex: 1;
}
#voice-status {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255,255,255,0.3);
transition: all 0.3s;
}
#voice-status.active {
background: #ff4444;
box-shadow: 0 0 8px rgba(255,68,68,0.6);
animation: pulse 1s infinite;
}
/* СООБЩЕНИЯ */
#messages-container {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
background: var(--card-bg);
border: 1.5px solid var(--card-border);
border-radius: var(--radius-card);
backdrop-filter: blur(12px);
margin-bottom: 10px;
scroll-behavior: smooth;
}
/* Скроллбар */
#messages-container::-webkit-scrollbar {
width: 4px;
}
#messages-container::-webkit-scrollbar-track {
background: transparent;
}
#messages-container::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.3);
border-radius: 4px;
}
/* СООБЩЕНИЯ */
.message {
max-width: 78%;
padding: 12px 16px;
border-radius: var(--radius-msg);
font-size: 15px;
line-height: 1.55;
animation: msgIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
word-break: break-word;
}
@keyframes msgIn {
from { opacity: 0; transform: translateY(12px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.user-message {
align-self: flex-end;
background: rgba(255,255,255,0.92);
color: #2d2d2d;
border-bottom-right-radius: 6px;
box-shadow: var(--shadow-card);
}
.assistant-message {
align-self: flex-start;
background: rgba(255,255,255,0.18);
color: white;
border-bottom-left-radius: 6px;
border: 1px solid rgba(255,255,255,0.15);
}
/* ИНДИКАТОР ПЕЧАТАНИЯ */
.typing-indicator {
display: flex;
gap: 5px;
padding: 14px 16px;
align-items: center;
}
.typing-dot {
width: 7px;
height: 7px;
background: rgba(255,255,255,0.7);
border-radius: 50%;
animation: typingBounce 1.4s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
30% { transform: translateY(-8px); opacity: 1; }
}
/* БЫСТРЫЕ КОМАНДЫ */
#quick-commands {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 0 2px 10px;
flex-shrink: 0;
scrollbar-width: none;
}
#quick-commands::-webkit-scrollbar { display: none; }
.quick-btn {
background: var(--card-bg);
border: 1.5px solid var(--card-border);
border-radius: 20px;
padding: 8px 16px;
color: white;
font-size: 13px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s;
backdrop-filter: blur(8px);
}
.quick-btn:hover {
background: rgba(255,255,255,0.28);
transform: translateY(-2px);
}
/* ВВОД */
#input-area {
display: flex;
gap: 10px;
align-items: flex-end;
background: var(--card-bg);
border: 1.5px solid var(--card-border);
border-radius: var(--radius-input);
padding: 10px 10px 10px 18px;
backdrop-filter: blur(12px);
flex-shrink: 0;
}
#user-input {
flex: 1;
background: transparent;
border: none;
color: white;
font-size: 15px;
font-family: inherit;
resize: none;
outline: none;
max-height: 120px;
line-height: 1.5;
padding: 4px 0;
}
#user-input::placeholder {
color: rgba(255,255,255,0.5);
}
#voice-btn {
width: 42px;
height: 42px;
border-radius: 14px;
border: 1.5px solid rgba(255,255,255,0.25);
background: rgba(255,255,255,0.15);
color: white;
font-size: 17px;
cursor: pointer;
transition: all 0.3s;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
#voice-btn.listening {
background: #ff4444;
border-color: #ff6666;
animation: pulse 1s infinite;
}
#send-btn {
width: 42px;
height: 42px;
border-radius: 14px;
border: none;
background: rgba(255,255,255,0.9);
color: var(--accent);
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
#send-btn:hover {
background: white;
transform: scale(1.05);
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
/* ТАЙМЕР */
#timer-widget {
position: fixed;
top: 20px;
right: 20px;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.2);
border-radius: var(--radius-card);
padding: 14px 20px;
color: white;
display: flex;
align-items: center;
gap: 12px;
z-index: 1000;
box-shadow: var(--shadow-soft);
}
#timer-display {
font-size: 22px;
font-weight: 700;
font-family: 'SF Mono', monospace;
letter-spacing: 2px;
}
#timer-widget button {
background: rgba(255,255,255,0.15);
border: none;
color: white;
width: 28px;
height: 28px;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
}
/* ============================================
АНИМАЦИИ СМЕНЫ ТЕМЫ
============================================ */
.theme-transition {
transition: background 0.6s ease, color 0.4s ease;
}
@keyframes pulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,68,68,0.4); }
50% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(255,68,68,0); }
}
/* ============================================
МОБИЛЬНАЯ АДАПТАЦИЯ
============================================ */
@media (max-width: 768px) {
.spheres-grid {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
#welcome-text h1 { font-size: 22px; }
#main-character { width: 180px; height: 180px; }
}
@media (max-width: 480px) {
.spheres-grid {
grid-template-columns: repeat(2, 1fr);
}
#sphere-selector { padding: 24px 16px 40px; }
}
// ============================================
// КОНФИГ ПЕРСОНАЖЕЙ И ЦВЕТОВ
// Заполните когда будут готовы видео!
// ============================================
const SPHERE_THEMES = {
general: {
name: '💬 Общение',
colorFrom: 'ЦВЕТ_ОТ', // ← ЗАПОЛНИТЕ
colorTo: 'ЦВЕТ_ДО', // ← ЗАПОЛНИТЕ
accent: 'АКЦЕНТ', // ← ЗАПОЛНИТЕ
videoUrl: 'ССЫЛКА_ВИДЕО', // ← ЗАПОЛНИТЕ
preview