236 lines
18 KiB
HTML
236 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>AI RecSys — Интеллектуальная система рекомендаций</title>
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🤖</text></svg>">
|
||
<style>
|
||
:root{--ink:#0a0e17;--ink2:#131a2b;--cyan:#00E5FF;--purple:#B44AFF;--pink:#FF3D8A;--green:#00E676;--white:#fff;--gray:#5B6573;--gray-light:#9aa3b2}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--white);background:var(--ink);overflow-x:hidden}
|
||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||
|
||
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden}
|
||
.hero::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 40%,rgba(0,229,255,.08) 0%,transparent 50%),radial-gradient(circle at 70% 60%,rgba(180,74,255,.06) 0%,transparent 50%);animation:pulse 8s ease-in-out infinite}
|
||
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
|
||
.hero-content{position:relative;z-index:1}
|
||
.hero-badge{display:inline-block;background:rgba(0,229,255,.1);border:1px solid rgba(0,229,255,.3);color:var(--cyan);padding:6px 16px;border-radius:20px;font-size:14px;font-weight:600;letter-spacing:.5px;margin-bottom:24px}
|
||
.hero h1{font-size:64px;font-weight:800;line-height:1.05;margin-bottom:24px;background:linear-gradient(135deg,var(--cyan),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
|
||
.hero p{font-size:20px;color:var(--gray-light);max-width:600px;margin-bottom:36px;line-height:1.7}
|
||
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--cyan);color:var(--ink);padding:16px 32px;border-radius:10px;font-weight:700;text-decoration:none;font-size:16px;transition:all .3s ease;cursor:pointer;border:none}
|
||
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,229,255,.35)}
|
||
.btn-outline{background:transparent;border:2px solid var(--cyan);color:var(--cyan)}
|
||
.btn-outline:hover{background:rgba(0,229,255,.1)}
|
||
|
||
.section{padding:80px 0}
|
||
.section h2{font-size:42px;font-weight:700;margin-bottom:16px;background:linear-gradient(135deg,var(--white),var(--gray-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
|
||
.section-sub{font-size:18px;color:var(--gray);max-width:650px;margin-bottom:48px}
|
||
|
||
.how-it-works{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
|
||
.step{text-align:center;padding:32px 20px;background:var(--ink2);border:1px solid rgba(255,255,255,.05);border-radius:16px;position:relative;transition:all .3s ease}
|
||
.step:hover{border-color:var(--cyan);transform:translateY(-4px)}
|
||
.step-num{width:44px;height:44px;background:linear-gradient(135deg,var(--cyan),var(--purple));border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:var(--ink);margin:0 auto 16px}
|
||
.step h3{font-size:17px;font-weight:700;margin-bottom:8px}
|
||
.step p{font-size:14px;color:var(--gray);line-height:1.5}
|
||
.step-arrow{position:absolute;right:-14px;top:50%;transform:translateY(-50%);color:var(--cyan);font-size:20px;opacity:.4}
|
||
|
||
.demo-panel{background:var(--ink2);border:1px solid rgba(0,229,255,.15);border-radius:20px;padding:40px;margin-top:48px;position:relative;overflow:hidden}
|
||
.demo-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--cyan),var(--purple),var(--pink))}
|
||
.demo-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
|
||
.demo-header h3{font-size:20px;font-weight:700}
|
||
.demo-tabs{display:flex;gap:8px}
|
||
.demo-tab{padding:8px 18px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;border:1px solid transparent;color:var(--gray)}
|
||
.demo-tab.active{background:rgba(0,229,255,.12);border-color:var(--cyan);color:var(--cyan)}
|
||
.demo-grid{display:grid;grid-template-columns:1fr 320px;gap:28px}
|
||
.client-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:24px}
|
||
.client-info{display:flex;align-items:center;gap:16px;margin-bottom:20px}
|
||
.client-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--pink));display:flex;align-items:center;justify-content:center;font-size:22px}
|
||
.client-name{font-weight:700;font-size:17px}
|
||
.client-id{font-size:13px;color:var(--gray)}
|
||
.purchases-title{font-size:13px;color:var(--gray);margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}
|
||
.purchase-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(255,255,255,.02);border-radius:10px;margin-bottom:8px;transition:all .2s}
|
||
.purchase-item:hover{background:rgba(255,255,255,.05)}
|
||
.purchase-icon{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;background:rgba(0,229,255,.08)}
|
||
.purchase-name{font-size:14px;font-weight:600}
|
||
.purchase-date{font-size:12px;color:var(--gray);margin-left:auto}
|
||
.recommendations-panel{background:rgba(0,229,255,.04);border:1px solid rgba(0,229,255,.12);border-radius:14px;padding:24px}
|
||
.rec-label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--cyan);margin-bottom:16px;font-weight:600}
|
||
.rec-item{display:flex;align-items:center;gap:12px;padding:14px;background:rgba(255,255,255,.04);border-radius:12px;margin-bottom:10px;border-left:3px solid var(--green);transition:all .2s}
|
||
.rec-item:hover{background:rgba(255,255,255,.07);transform:translateX(4px)}
|
||
.rec-icon{font-size:22px}
|
||
.rec-info{flex:1}
|
||
.rec-name{font-size:14px;font-weight:600}
|
||
.rec-reason{font-size:12px;color:var(--gray);margin-top:2px}
|
||
.rec-score{font-size:13px;font-weight:700;color:var(--green);background:rgba(0,230,118,.1);padding:4px 10px;border-radius:6px}
|
||
|
||
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
|
||
.feature-card{background:var(--ink2);border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:32px;transition:all .3s ease}
|
||
.feature-card:hover{border-color:rgba(180,74,255,.4);transform:translateY(-4px)}
|
||
.feature-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:20px}
|
||
.feature-icon.cyan-bg{background:rgba(0,229,255,.1)}
|
||
.feature-icon.purple-bg{background:rgba(180,74,255,.1)}
|
||
.feature-icon.pink-bg{background:rgba(255,61,138,.1)}
|
||
.feature-card h3{font-size:18px;font-weight:700;margin-bottom:10px}
|
||
.feature-card p{font-size:14px;color:var(--gray);line-height:1.6}
|
||
|
||
.tech-stack{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:40px}
|
||
.tech-tag{padding:10px 22px;background:var(--ink2);border:1px solid rgba(255,255,255,.08);border-radius:10px;font-size:14px;font-weight:600;color:var(--gray-light);transition:all .2s}
|
||
.tech-tag:hover{border-color:var(--cyan);color:var(--cyan)}
|
||
|
||
.cta-section{text-align:center;padding:100px 24px;position:relative}
|
||
.cta-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,229,255,.08) 0%,transparent 70%)}
|
||
.cta-content{position:relative;z-index:1;max-width:650px;margin:0 auto}
|
||
.cta-section h2{font-size:44px;font-weight:800;margin-bottom:20px;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background:linear-gradient(135deg,var(--cyan),var(--purple),var(--pink));background-clip:text}
|
||
.cta-section p{font-size:18px;color:var(--gray-light);margin-bottom:36px}
|
||
.cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
|
||
|
||
.footer{text-align:center;padding:40px 24px;border-top:1px solid rgba(255,255,255,.05);color:var(--gray);font-size:14px}
|
||
|
||
@keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
|
||
.reveal{opacity:0;animation:fadeInUp .7s ease forwards}
|
||
.reveal.d1{animation-delay:.1s}.reveal.d2{animation-delay:.2s}.reveal.d3{animation-delay:.3s}.reveal.d4{animation-delay:.4s}
|
||
|
||
@media (max-width:900px){
|
||
.how-it-works{grid-template-columns:repeat(2,1fr)}
|
||
.step-arrow{display:none}
|
||
.demo-grid{grid-template-columns:1fr}
|
||
.features-grid{grid-template-columns:1fr 1fr}
|
||
.hero h1{font-size:42px}
|
||
.section h2{font-size:32px}
|
||
}
|
||
@media (max-width:640px){
|
||
.hero h1{font-size:34px}.hero p{font-size:17px}
|
||
.section h2{font-size:28px}.section{padding:56px 0}
|
||
.how-it-works{grid-template-columns:1fr}
|
||
.features-grid{grid-template-columns:1fr}
|
||
.container{padding:48px 20px}
|
||
.cta-section h2{font-size:30px}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<section class="hero"><div class="container">
|
||
<div class="hero-content reveal">
|
||
<div class="hero-badge">AI-POWERED RECOMMENDATIONS</div>
|
||
<h1>Умные рекомендации<br>для каждого клиента</h1>
|
||
<p>ИИ-агент анализирует историю покупок из базы данных и персонально подбирает товары, которые ваш клиент захочет купить следующим.</p>
|
||
<div style="display:flex;gap:14px;flex-wrap:wrap">
|
||
<a href="#demo" class="btn">Смотреть демо ⚡</a>
|
||
<a href="#features" class="btn btn-outline">Как это работает</a>
|
||
</div>
|
||
</div>
|
||
</div></section>
|
||
|
||
<section id="how" class="section"><div class="container">
|
||
<h2 class="reveal">Как это работает</h2>
|
||
<p class="section-sub reveal d1">Четыре шага от сырых данных до персональных рекомендаций</p>
|
||
<div class="how-it-works">
|
||
<div class="step reveal d1"><div class="step-num">1</div><h3>Сбор данных</h3><p>ИИ подключается к БД и загружает историю покупок каждого клиента</p><span class="step-arrow">→</span></div>
|
||
<div class="step reveal d2"><div class="step-num">2</div><h3>Анализ паттернов</h3><p>Машинное обучение выявляет предпочтения и поведение покупателей</p><span class="step-arrow">→</span></div>
|
||
<div class="step reveal d3"><div class="step-num">3</div><h3>Генерация</h3><p>Нейросеть подбирает релевантные товары с оценкой уверенности</p><span class="step-arrow">→</span></div>
|
||
<div class="step reveal d4"><div class="step-num">4</div><h3>Результат</h3><p>Персональная подборка готова к показу клиенту или интеграции</p></div>
|
||
</div>
|
||
</div></section>
|
||
|
||
<section id="demo" class="section" style="background:var(--ink2)"><div class="container">
|
||
<h2 class="reveal">Демонстрация</h2>
|
||
<p class="section-sub reveal d1">Выберите клиента и посмотрите, какие товары порекомендует ИИ</p>
|
||
<div class="demo-panel reveal d2">
|
||
<div class="demo-header">
|
||
<h3>🧠 Панель рекомендаций</h3>
|
||
<div class="demo-tabs">
|
||
<div class="demo-tab active" onclick="switchClient(0)">Клиент #1</div>
|
||
<div class="demo-tab" onclick="switchClient(1)">Клиент #2</div>
|
||
<div class="demo-tab" onclick="switchClient(2)">Клиент #3</div>
|
||
</div>
|
||
</div>
|
||
<div class="demo-grid">
|
||
<div class="client-card">
|
||
<div class="client-info">
|
||
<div class="client-avatar" id="avatar">👩</div>
|
||
<div><div class="client-name" id="clientName">Анна Козлова</div><div class="client-id">ID: #4821 · Покупок за месяц: 12</div></div>
|
||
</div>
|
||
<div class="purchases-title">📦 Последние покупки</div>
|
||
<div id="purchaseList"></div>
|
||
</div>
|
||
<div class="recommendations-panel">
|
||
<div class="rec-label"><span>✨</span> Рекомендовано ИИ</div>
|
||
<div id="recList"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div></section>
|
||
|
||
<section id="features" class="section"><div class="container">
|
||
<h2 class="reveal">Возможности системы</h2>
|
||
<p class="section-sub reveal d1">Что умеет наш ИИ-агент рекомендаций</p>
|
||
<div class="features-grid">
|
||
<div class="feature-card reveal d1"><div class="feature-icon cyan-bg">🔗</div><h3>Интеграция с любой БД</h3><p>Подключается к PostgreSQL, MySQL, MongoDB и другим базам через настроенный коннектор</p></div>
|
||
<div class="feature-card reveal d2"><div class="feature-icon purple-bg">⚡</div><h3>Реальное время</h3><p>Обновляет рекомендации мгновенно после каждой новой покупки без задержек</p></div>
|
||
<div class="feature-card reveal d3"><div class="feature-icon pink-bg">🎯</div><h3>Персонализация</h3><p>Учитывает историю, сезонность, акции и индивидуальные предпочтения каждого</p></div>
|
||
<div class="feature-card reveal d1"><div class="feature-icon purple-bg">📊</div><h3>Аналитика</h3><p>Dashboard с метриками CTR, конверсии и среднего чека по рекомендациям</p></div>
|
||
<div class="feature-card reveal d2"><div class="feature-icon cyan-bg">🔄</div><h3>Коллаборативная фильтрация</h3><p>«Покупают вместе с вами» — находит похожих пользователей и их выбор</p></div>
|
||
<div class="feature-card reveal d3"><div class="feature-icon pink-bg">🧪</div><h3>A/B тестирование</h3><p>Сравнивайте алгоритмы и автоматически выбирайте лучший для сегмента</p></div>
|
||
</div>
|
||
<div class="tech-stack">
|
||
<span class="tech-tag">Python</span>
|
||
<span class="tech-tag">TensorFlow</span>
|
||
<span class="tech-tag">PostgreSQL</span>
|
||
<span class="tech-tag">FastAPI</span>
|
||
<span class="tech-tag">Redis</span>
|
||
<span class="tech-tag">Docker</span>
|
||
<span class="tech-tag">scikit-learn</span>
|
||
<span class="tech-tag">Pandas</span>
|
||
</div>
|
||
</div></section>
|
||
|
||
<section class="cta-section"><div class="cta-content">
|
||
<h2 class="reveal">Готов построить<br>свою RecSys?</h2>
|
||
<p class="reveal d1">Учебный проект демонстрирует полный цикл: от архитектуры до работающего прототипа</p>
|
||
<div class="cta-buttons reveal d2">
|
||
<a href="#demo" class="btn">Попробовать демо 🚀</a>
|
||
<a href="#how" class="btn btn-outline">Разобрать архитектуру</a>
|
||
</div>
|
||
</div></section>
|
||
|
||
<footer class="footer">
|
||
<p>AI RecSys — Учебный проект · 2026</p>
|
||
</footer>
|
||
|
||
<script>
|
||
var clients=[
|
||
{name:'Анна Козлова',id:'#4821',purchases:12,avatar:'👩',
|
||
buys:[{name:'Беспроводные наушники Sony',icon:'🎧',date:'12 июл'},{name:'Чехол для телефона',icon:'📱',date:'10 июл'},{name:'USB-C хаб 7-in-1',icon:'🔌',date:'8 июл'},{name:'Зарядка беспроводная',icon:'🔋',date:'5 июл'}],
|
||
recs:[{name:'Планшет Samsung Tab S9',icon:'📱',reason:'Купила аксессуары для гаджетов',score:'94%'},{name:'Smart-часы Galaxy Watch',icon:'⌚',reason:'Комplement к электронике',score:'89%'},{name:'Портативная колонка JBL',icon:'🔊',reason:'После наушников — аудио',score:'85%'}]},
|
||
{name:'Дмитрий Волков',id:'#3156',purchases:8,avatar:'👨',
|
||
buys:[{name:'Велосипед горный Trek',icon:'🚴',date:'11 июл'},{name:'Шлем защитный',icon:'⛑️',date:'11 июл'},{name:'Велокомпьютер GPS',icon:'📟',date:'9 июл'},{name:'Фонарь передний LED',icon:'💡',date:'7 июл'},{name:'Велоодежда набор',icon:'👕',date:'4 июл'}],
|
||
recs:[{name:'Тренажёр домашний',icon:'🏋️',reason:'Интерес к спорту и фитнесу',score:'97%'},{name:'Беговые дорожки Xiaomi',icon:'🏃',reason:'Активный образ жизни',score:'91%'},{name:'Гиря наборная 20кг',icon:'🏋️',reason:'Cross-fit интерес',score:'86%'}]},
|
||
{name:'Елена Миронова',id:'#7203',purchases:23,avatar:'👩🦰',
|
||
buys:[{name:'Крем увлажняющий La Roche',icon:'🧴',date:'13 июл'},{name:'Патчи под глаза',icon:'👁️',date:'11 июл'},{name:'Сыворотка витамин C',icon:'✨',date:'9 июл'},{name:'Солнцезащитный SPF50',icon:'☀️',date:'6 июл'}],
|
||
recs:[{name:'Набор масок для лица',icon:'🎭',reason:'Уходовая косметика — фанат',score:'96%'},{name:'Скраб очищающий',icon:'🧽',reason:'Расширение линии ухода',score:'92%'},{name:'Ароматерапия диффузор',icon:'🕯️',reason:'Wellness-сегмент',score:'78%'}]}
|
||
];
|
||
|
||
function renderClient(i){
|
||
var c=clients[i];
|
||
document.getElementById('avatar').textContent=c.avatar;
|
||
document.getElementById('clientName').textContent=c.name;
|
||
document.querySelectorAll('.client-id')[0].textContent='ID: '+c.id+' · Покупок за месяц: '+c.purchases;
|
||
document.getElementById('purchaseList').innerHTML=c.buys.map(function(b){return '<div class="purchase-item"><div class="purchase-icon">'+b.icon+'</div><span class="purchase-name">'+b.name+'</span><span class="purchase-date">'+b.date+'</span></div>'}).join('');
|
||
document.getElementById('recList').innerHTML=c.recs.map(function(r){return '<div class="rec-item"><span class="rec-icon">'+r.icon+'</span><div class="rec-info"><div class="rec-name">'+r.name+'</div><div class="rec-reason">'+r.reason+'</div></div><span class="rec-score">'+r.score+'</span></div>'}).join('');
|
||
document.querySelectorAll('.demo-tab').forEach(function(t,n){t.classList.toggle('active',n===i)});
|
||
}
|
||
|
||
function switchClient(i){
|
||
renderClient(i);
|
||
var panel=document.querySelector('.demo-panel');
|
||
panel.style.opacity='0';panel.style.transform='translateY(8px)';
|
||
setTimeout(function(){panel.style.transition='all .3s ease';panel.style.opacity='1';panel.style.transform='none'},100);
|
||
}
|
||
|
||
renderClient(0);
|
||
</script>
|
||
</body>
|
||
</html>
|