375 lines
22 KiB
HTML
375 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<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=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--bg:#fff;--card-bg:#F2F4F7;--hero-bg:#0F1218;--hero-text:#fff;--hero-p:#9aa3b2;--border:#E2E6EB;--input-bg:#fff;--shadow:0 2px 12px rgba(0,0,0,0.06)}
|
||
body.dark{--ink:#EDF2F7;--cyan:#00E5FF;--cyan-50:#1a2a35;--white:#0F1218;--gray-500:#8892A0;--gray-100:#1A202C;--bg:#0F1218;--card-bg:#1A202C;--hero-bg:#0a0c10;--hero-text:#EDF2F7;--hero-p:#8892A0;--border:#2D3748;--input-bg:#1A202C;--shadow:0 2px 12px rgba(0,0,0,0.3)}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:17px/1.6 'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--bg);transition:background .3s,color .3s}
|
||
.container{max-width:1140px;margin:0 auto;padding:0 24px}
|
||
/* Header */
|
||
header{position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:1px solid var(--border);backdrop-filter:blur(12px);background:rgba(255,255,255,0.9)}
|
||
body.dark header{background:rgba(15,18,24,0.9)}
|
||
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
|
||
.logo{font-size:22px;font-weight:800;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:8px;white-space:nowrap}
|
||
.logo span{color:var(--cyan)}
|
||
nav{display:flex;gap:24px;font-size:15px;font-weight:600}
|
||
nav a{text-decoration:none;color:var(--gray-500);transition:color .2s}
|
||
nav a:hover{color:var(--cyan)}
|
||
.header-actions{display:flex;align-items:center;gap:12px}
|
||
.search-box{display:flex;align-items:center;background:var(--input-bg);border:1px solid var(--border);border-radius:8px;padding:0 12px;transition:border .2s}
|
||
.search-box:focus-within{border-color:var(--cyan)}
|
||
.search-box input{border:none;background:transparent;padding:8px 4px;font-size:14px;outline:none;color:var(--ink);width:140px}
|
||
.search-box input::placeholder{color:var(--gray-500)}
|
||
.search-box button{background:none;border:none;cursor:pointer;font-size:16px;padding:4px;color:var(--gray-500)}
|
||
.theme-toggle{background:none;border:1px solid var(--border);border-radius:8px;width:38px;height:38px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:border .2s}
|
||
.theme-toggle:hover{border-color:var(--cyan)}
|
||
/* Hero */
|
||
.hero{background:var(--hero-bg);color:var(--hero-text);padding:80px 0;position:relative;overflow:hidden}
|
||
.hero::before{content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;background:radial-gradient(circle,rgba(0,229,255,0.08),transparent 70%);pointer-events:none}
|
||
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}
|
||
.hero h1{font-size:52px;font-weight:800;line-height:1.05;margin-bottom:20px}
|
||
.hero h1 span{color:var(--cyan)}
|
||
.hero p{font-size:19px;color:var(--hero-p);max-width:520px;margin-bottom:32px;line-height:1.7}
|
||
.hero-btns{display:flex;gap:16px;flex-wrap:wrap}
|
||
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:8px;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;border:none;transition:transform .2s,box-shadow .2s}
|
||
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,229,255,0.25)}
|
||
.btn-primary{background:var(--cyan);color:var(--ink)}
|
||
.btn-secondary{background:transparent;color:var(--hero-text);border:2px solid rgba(255,255,255,0.2)}
|
||
.btn-secondary:hover{background:rgba(255,255,255,0.05);box-shadow:none}
|
||
.hero-img{width:100%;border-radius:20px;background:linear-gradient(135deg,#1A202C,#2D3748);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;font-size:80px;position:relative;overflow:hidden}
|
||
.hero-img img{width:100%;height:100%;object-fit:cover;border-radius:20px}
|
||
.hero-img-placeholder{font-size:100px;opacity:0.3}
|
||
/* Sections */
|
||
.section{padding:80px 0}
|
||
.section-header{text-align:center;margin-bottom:48px}
|
||
.section-header h2{font-size:36px;font-weight:700;margin-bottom:12px}
|
||
.section-header p{color:var(--gray-500);max-width:600px;margin:0 auto;font-size:17px}
|
||
/* Categories */
|
||
.categories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}
|
||
.cat-card{background:var(--card-bg);border-radius:16px;padding:24px 16px;text-align:center;text-decoration:none;color:var(--ink);transition:transform .25s,box-shadow .25s;border:1px solid var(--border)}
|
||
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
|
||
.cat-card .emoji{font-size:40px;display:block;margin-bottom:10px}
|
||
.cat-card .name{font-weight:700;font-size:15px}
|
||
.cat-card .count{font-size:13px;color:var(--gray-500);margin-top:4px}
|
||
/* Recipe card */
|
||
.featured-recipe{background:var(--card-bg);border-radius:20px;overflow:hidden;border:1px solid var(--border)}
|
||
.featured-recipe-img{width:100%;height:340px;background:linear-gradient(135deg,#2D3748,#1A202C);display:flex;align-items:center;justify-content:center;font-size:120px;position:relative;overflow:hidden}
|
||
.featured-recipe-img img{width:100%;height:100%;object-fit:cover}
|
||
.featured-recipe-body{padding:40px}
|
||
.recipe-meta{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:24px;font-size:14px}
|
||
.recipe-meta-item{display:flex;align-items:center;gap:6px;color:var(--gray-500)}
|
||
.recipe-meta-item strong{color:var(--ink)}
|
||
.recipe-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
|
||
.recipe-section-title{font-size:18px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}
|
||
.ingredients-table{width:100%;border-collapse:collapse;font-size:15px}
|
||
.ingredients-table td{padding:10px 0;border-bottom:1px solid var(--border)}
|
||
.ingredients-table td:last-child{text-align:right;font-weight:600}
|
||
.steps-list{list-style:none;counter-reset:step}
|
||
.steps-list li{counter-increment:step;padding:16px 0 16px 48px;position:relative;border-bottom:1px solid var(--border)}
|
||
.steps-list li::before{content:counter(step);position:absolute;left:0;top:16px;width:32px;height:32px;background:var(--cyan);color:var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
|
||
.step-img{width:100%;height:120px;background:var(--gray-100);border-radius:8px;margin-top:10px;display:flex;align-items:center;justify-content:center;font-size:32px;color:var(--gray-500);overflow:hidden}
|
||
.step-img img{width:100%;height:100%;object-fit:cover}
|
||
.tips-box{background:var(--cyan-50);border-radius:12px;padding:24px;margin-top:24px}
|
||
.tips-box h4{font-weight:700;margin-bottom:12px;font-size:16px}
|
||
.tips-box ul{list-style:none}
|
||
.tips-box li{padding:6px 0;padding-left:24px;position:relative}
|
||
.tips-box li::before{content:'✅';position:absolute;left:0}
|
||
.notes-box{background:var(--card-bg);border-radius:12px;padding:24px;margin-top:16px;border:1px solid var(--border);font-style:italic;color:var(--gray-500)}
|
||
/* Popular */
|
||
.popular-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
|
||
.pop-card{background:var(--card-bg);border-radius:16px;overflow:hidden;border:1px solid var(--border);transition:transform .25s,box-shadow .25s}
|
||
.pop-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
|
||
.pop-card-img{height:200px;background:linear-gradient(135deg,#2D3748,#1A202C);display:flex;align-items:center;justify-content:center;font-size:60px}
|
||
.pop-card-img img{width:100%;height:100%;object-fit:cover}
|
||
.pop-card-body{padding:20px}
|
||
.pop-card-body h3{font-size:18px;font-weight:700;margin-bottom:6px}
|
||
.pop-card-meta{display:flex;justify-content:space-between;font-size:14px;color:var(--gray-500)}
|
||
.stars{color:#F59E0B}
|
||
/* About */
|
||
.about-content{max-width:700px;margin:0 auto;text-align:center;font-size:18px;color:var(--gray-500);line-height:1.8}
|
||
.about-content strong{color:var(--ink)}
|
||
/* Search results */
|
||
.search-results{display:none;padding:40px 0}
|
||
.search-results.active{display:block}
|
||
.search-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:24px}
|
||
.search-result-item{display:none;background:var(--card-bg);border-radius:12px;padding:20px;border:1px solid var(--border)}
|
||
.search-result-item.visible{display:block}
|
||
/* Footer */
|
||
footer{background:var(--hero-bg);color:var(--hero-text);padding:40px 0;text-align:center}
|
||
footer p{color:var(--hero-p);font-size:14px}
|
||
footer .social{display:flex;justify-content:center;gap:16px;margin-bottom:16px}
|
||
footer .social a{color:var(--hero-text);text-decoration:none;font-size:14px;opacity:.7;transition:opacity .2s}
|
||
footer .social a:hover{opacity:1;color:var(--cyan)}
|
||
/* Mobile */
|
||
@media (max-width:768px){
|
||
.hero-grid{grid-template-columns:1fr;gap:32px}
|
||
.hero h1{font-size:34px}
|
||
.hero{padding:48px 0}
|
||
.section{padding:48px 0}
|
||
.recipe-grid{grid-template-columns:1fr}
|
||
.featured-recipe-body{padding:24px}
|
||
.featured-recipe-img{height:200px}
|
||
.section-header h2{font-size:28px}
|
||
.categories-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
|
||
.popular-grid{grid-template-columns:1fr}
|
||
.header-inner{flex-wrap:wrap;height:auto;padding:12px 0;gap:12px}
|
||
nav{order:3;width:100%;overflow-x:auto;display:flex;gap:16px;padding-bottom:4px}
|
||
nav a{white-space:nowrap;font-size:14px}
|
||
.search-box input{width:100px}
|
||
}
|
||
@media (max-width:640px){
|
||
.hero h1{font-size:28px}
|
||
.container{padding:0 16px}
|
||
.categories-grid{grid-template-columns:repeat(4,1fr);gap:10px}
|
||
.cat-card{padding:16px 8px}
|
||
.cat-card .emoji{font-size:28px}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header>
|
||
<div class="container header-inner">
|
||
<a href="#" class="logo">🍳 <span>Проверенные</span> рецепты</a>
|
||
<nav>
|
||
<a href="#categories">Категории</a>
|
||
<a href="#recipe">Рецепт</a>
|
||
<a href="#popular">Популярные</a>
|
||
<a href="#about">О проекте</a>
|
||
</nav>
|
||
<div class="header-actions">
|
||
<div class="search-box">
|
||
<input type="text" id="searchInput" placeholder="Поиск рецептов..." oninput="doSearch(this.value)">
|
||
<button onclick="doSearch(document.getElementById('searchInput').value)">🔍</button>
|
||
</div>
|
||
<button class="theme-toggle" onclick="toggleTheme()" id="themeBtn" title="Тёмная тема">🌙</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="hero">
|
||
<div class="container hero-grid">
|
||
<div>
|
||
<h1>Только рецепты,<br>которые я <span>приготовила лично</span></h1>
|
||
<p>Добро пожаловать в мою коллекцию проверенных рецептов. Каждый рецепт приготовлен лично и содержит реальные советы и фотографии результата.</p>
|
||
<div class="hero-btns">
|
||
<a href="#categories" class="btn btn-primary">🍽️ Смотреть рецепты</a>
|
||
<a href="#about" class="btn btn-secondary">О проекте</a>
|
||
</div>
|
||
</div>
|
||
<div class="hero-img">
|
||
<div class="hero-img-placeholder">🍳</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Search Results -->
|
||
<section class="search-results active" id="searchResults">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>🔍 Результаты поиска</h2>
|
||
<p id="searchStatus">Введите название или ингредиент</p>
|
||
</div>
|
||
<div class="search-results-grid" id="searchResultsGrid"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="categories" class="section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>📂 Категории</h2>
|
||
<p>Выбери категорию и найди любимое блюдо</p>
|
||
</div>
|
||
<div class="categories-grid">
|
||
<a href="#" class="cat-card" data-cat="bake"><span class="emoji">🥐</span><span class="name">Выпечка</span><span class="count">12 рецептов</span></a>
|
||
<a href="#" class="cat-card" data-cat="soup"><span class="emoji">🍲</span><span class="name">Супы</span><span class="count">8 рецептов</span></a>
|
||
<a href="#" class="cat-card" data-cat="meat"><span class="emoji">🥩</span><span class="name">Мясные блюда</span><span class="count">15 рецептов</span></a>
|
||
<a href="#" class="cat-card" data-cat="salad"><span class="emoji">🥗</span><span class="name">Салаты</span><span class="count">10 рецептов</span></a>
|
||
<a href="#" class="cat-card" data-cat="pasta"><span class="emoji">🍝</span><span class="name">Паста</span><span class="count">6 рецептов</span></a>
|
||
<a href="#" class="cat-card" data-cat="dessert"><span class="emoji">🍰</span><span class="name">Десерты</span><span class="count">14 рецептов</span></a>
|
||
<a href="#" class="cat-card" data-cat="fast"><span class="emoji">⚡</span><span class="name">Быстрые рецепты</span><span class="count">9 рецептов</span></a>
|
||
<a href="#" class="cat-card" data-cat="holiday"><span class="emoji">🎉</span><span class="name">Праздничные</span><span class="count">7 рецептов</span></a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="recipe" class="section" style="padding-top:0">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>🍕 Домашняя пицца</h2>
|
||
<p>Классический рецепт итальянской пиццы на тонком тесте</p>
|
||
</div>
|
||
<div class="featured-recipe">
|
||
<div class="featured-recipe-img">
|
||
<span style="font-size:80px;opacity:0.3">🍕</span>
|
||
</div>
|
||
<div class="featured-recipe-body">
|
||
<div class="recipe-meta">
|
||
<span class="recipe-meta-item">⏱️ <strong>2 часа</strong></span>
|
||
<span class="recipe-meta-item">📊 Сложность: <strong>Средняя</strong></span>
|
||
<span class="recipe-meta-item">🍽️ Порций: <strong>4</strong></span>
|
||
<span class="recipe-meta-item">✅ Проверено: <strong>5 приготовлений</strong></span>
|
||
</div>
|
||
<div class="recipe-grid">
|
||
<div>
|
||
<div class="recipe-section-title">🧂 Ингредиенты</div>
|
||
<table class="ingredients-table">
|
||
<tr><td>Мука пшеничная</td><td>500 г</td></tr>
|
||
<tr><td>Вода тёплая</td><td>300 мл</td></tr>
|
||
<tr><td>Дрожжи сухие</td><td>7 г</td></tr>
|
||
<tr><td>Соль</td><td>10 г</td></tr>
|
||
<tr><td>Оливковое масло</td><td>2 ст.л.</td></tr>
|
||
<tr><td>Томатный соус</td><td>100 г</td></tr>
|
||
<tr><td>Моцарелла</td><td>200 г</td></tr>
|
||
<tr><td>Базилик свежий</td><td>по вкусу</td></tr>
|
||
</table>
|
||
</div>
|
||
<div>
|
||
<div class="recipe-section-title">👩🍳 Приготовление</div>
|
||
<ol class="steps-list">
|
||
<li>Смешайте муку и дрожжи. Добавьте соль.<div class="step-img"><span>📸</span></div></li>
|
||
<li>Добавьте тёплую воду и оливковое масло. Замесите тесто.<div class="step-img"><span>📸</span></div></li>
|
||
<li>Оставьте тесто под плёнкой на 1 час — оно должно удвоиться.<div class="step-img"><span>📸</span></div></li>
|
||
<li>Раскатайте тесто, выложите соус и начинку.<div class="step-img"><span>📸</span></div></li>
|
||
<li>Выпекайте 12-15 минут при 250°C.<div class="step-img"><span>📸</span></div></li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
<div class="tips-box">
|
||
<h4>💡 Советы автора</h4>
|
||
<ul>
|
||
<li>Лучше использовать муку с содержанием белка от 12%</li>
|
||
<li>После выпечки дать пицце отдохнуть 3–5 минут</li>
|
||
<li>Пеките на максимально разогретом противне</li>
|
||
</ul>
|
||
</div>
|
||
<div class="notes-box">
|
||
📝 <strong>Мои заметки:</strong> Готовила 5 раз. Лучший результат получился при температуре духовки 250°C. В следующий раз попробую с камамбером.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="popular" class="section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>⭐ Популярные рецепты</h2>
|
||
<p>Лучшее по версии читателей</p>
|
||
</div>
|
||
<div class="popular-grid">
|
||
<div class="pop-card">
|
||
<div class="pop-card-img"><span>🍕</span></div>
|
||
<div class="pop-card-body">
|
||
<h3>Домашняя пицца</h3>
|
||
<div class="pop-card-meta"><span class="stars">⭐ 4.9</span><span>⏱️ 2 ч</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="pop-card">
|
||
<div class="pop-card-img"><span>🍯</span></div>
|
||
<div class="pop-card-body">
|
||
<h3>Медовик</h3>
|
||
<div class="pop-card-meta"><span class="stars">⭐ 4.8</span><span>⏱️ 3 ч</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="pop-card">
|
||
<div class="pop-card-img"><span>🍲</span></div>
|
||
<div class="pop-card-body">
|
||
<h3>Борщ</h3>
|
||
<div class="pop-card-meta"><span class="stars">⭐ 4.7</span><span>⏱️ 1.5 ч</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="about" class="section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>👩🍳 О проекте</h2>
|
||
</div>
|
||
<div class="about-content">
|
||
<p>Меня зовут <strong>[Твоё имя]</strong>. Я люблю готовить и публикую только те рецепты, которые лично проверила на своей кухне. Никаких непроверенных советов — только то, что действительно работает.</p>
|
||
<br>
|
||
<p>Каждый рецепт здесь — это минимум 2-3 приготовления, реальные фото и честные заметки. Если что-то пошло не по плану, я тоже об этом пишу 🙃</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<div class="social">
|
||
<a href="#">Instagram</a>
|
||
<a href="#">Telegram</a>
|
||
<a href="#">VK</a>
|
||
<a href="#">YouTube</a>
|
||
</div>
|
||
<p>🍳 Проверенные рецепты — только то, что приготовлено лично</p>
|
||
<p style="margin-top:8px;font-size:13px">© 2026</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Theme
|
||
function toggleTheme(){
|
||
document.body.classList.toggle('dark');
|
||
const btn = document.getElementById('themeBtn');
|
||
btn.textContent = document.body.classList.contains('dark') ? '☀️' : '🌙';
|
||
localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
|
||
}
|
||
if(localStorage.getItem('theme')==='dark'){document.body.classList.add('dark');document.getElementById('themeBtn').textContent='☀️'}
|
||
|
||
// Recipe data for search
|
||
const recipes = [
|
||
{name:'Домашняя пицца',cat:'Выпечка',time:'2 ч',rating:'4.9',emoji:'🍕',ingredients:'мука дрожжи моцарелла томатный соус базилик'},
|
||
{name:'Медовик',cat:'Десерты',time:'3 ч',rating:'4.8',emoji:'🍯',ingredients:'мука мёд сметана сахар масло'},
|
||
{name:'Борщ',cat:'Супы',time:'1.5 ч',rating:'4.7',emoji:'🍲',ingredients:'свёкла капуста картофель мясо морковь'},
|
||
{name:'Куриный суп',cat:'Супы',time:'1 ч',rating:'4.5',emoji:'🍜',ingredients:'курица лапша морковь лук'},
|
||
{name:'Курица в духовке',cat:'Мясные блюда',time:'1.5 ч',rating:'4.6',emoji:'🍗',ingredients:'курица чеснок розмарин лимон'},
|
||
{name:'Курица терияки',cat:'Мясные блюда',time:'40 мин',rating:'4.7',emoji:'🍛',ingredients:'курица соевый соус мёд кунжут'},
|
||
{name:'Паста карбонара',cat:'Паста',time:'25 мин',rating:'4.8',emoji:'🍝',ingredients:'спагетти яйцо бекон пармезан'},
|
||
{name:'Цезарь',cat:'Салаты',time:'20 мин',rating:'4.6',emoji:'🥗',ingredients:'курица салат пармезан сухарики'},
|
||
{name:'Блины',cat:'Выпечка',time:'40 мин',rating:'4.7',emoji:'🥞',ingredients:'мука молоко яйца сахар'},
|
||
{name:'Шарлотка',cat:'Десерты',time:'1 ч',rating:'4.5',emoji:'🍎',ingredients:'яблоки мука сахар яйца'},
|
||
];
|
||
|
||
function doSearch(query){
|
||
const q = query.trim().toLowerCase();
|
||
const section = document.getElementById('searchResults');
|
||
const grid = document.getElementById('searchResultsGrid');
|
||
const status = document.getElementById('searchStatus');
|
||
grid.innerHTML = '';
|
||
if(!q){section.classList.remove('active');status.textContent='Введите название или ингредиент';return}
|
||
section.classList.add('active');
|
||
const results = recipes.filter(r => r.name.toLowerCase().includes(q) || r.ingredients.toLowerCase().includes(q) || r.cat.toLowerCase().includes(q) || r.time.includes(q));
|
||
if(results.length===0){
|
||
status.textContent='😕 Ничего не найдено. Попробуй другое слово.';
|
||
return
|
||
}
|
||
status.textContent=`Найдено ${results.length} рецепт${results.length>1?'ов':''}:`;
|
||
results.forEach(r => {
|
||
const div = document.createElement('div');
|
||
div.className='search-result-item visible';
|
||
div.innerHTML=`<div style="display:flex;align-items:center;gap:12px"><span style="font-size:36px">${r.emoji}</span><div><h3 style="font-size:17px;font-weight:700">${r.name}</h3><div style="font-size:13px;color:var(--gray-500)">${r.cat} · ⏱️ ${r.time} · ⭐ ${r.rating}</div></div></div>`;
|
||
grid.appendChild(div);
|
||
});
|
||
}
|
||
|
||
// Smooth scroll
|
||
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
||
a.addEventListener('click', function(e){
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if(target){e.preventDefault();target.scrollIntoView({behavior:'smooth',block:'start'})}
|
||
})
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|