323 lines
14 KiB
HTML
323 lines
14 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="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:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--green:#25D366;--red:#FF4444}
|
||
*{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(--ink);background:var(--white)}
|
||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||
.hero{background:var(--ink);color:var(--white);padding:60px 24px}
|
||
.hero h1{font-size:48px;font-weight:800;line-height:1.05;margin-bottom:16px}
|
||
.hero p{font-size:20px;color:#9aa3b2;max-width:600px}
|
||
.section{padding:60px 24px}
|
||
.section h2{font-size:36px;font-weight:700;margin-bottom:32px;text-align:center}
|
||
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
|
||
.card{background:var(--gray-100);border-radius:16px;overflow:hidden;transition:transform .2s}
|
||
.card:hover{transform:translateY(-4px)}
|
||
.card img{width:100%;height:200px;object-fit:cover}
|
||
.card-body{padding:20px}
|
||
.card-title{font-size:20px;font-weight:700;margin-bottom:8px}
|
||
.card-price{font-size:24px;font-weight:800;color:var(--ink);margin-bottom:12px}
|
||
.card-cat{display:inline-block;background:var(--cyan-50);color:var(--ink);padding:4px 12px;border-radius:20px;font-size:14px;font-weight:600;margin-bottom:12px}
|
||
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none;border:none;cursor:pointer}
|
||
.btn-buy{width:100%;margin-top:12px}
|
||
.btn:hover{opacity:0.9}
|
||
.btn-green{background:var(--green);color:#fff}
|
||
.btn-red{background:var(--red);color:#fff}
|
||
.nav{background:var(--ink);padding:16px 24px;position:sticky;top:0;z-index:100}
|
||
.nav-inner{max-width:1140px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}
|
||
.nav a{color:var(--white);text-decoration:none;font-weight:600;margin-left:24px}
|
||
.nav a.active{color:var(--cyan)}
|
||
.admin-panel{background:var(--cyan-50);padding:32px;border-radius:16px;margin-bottom:40px}
|
||
.form-group{margin-bottom:20px}
|
||
.form-group label{display:block;font-weight:600;margin-bottom:8px}
|
||
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:16px}
|
||
.filter-bar{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px;justify-content:center}
|
||
.filter-btn{padding:10px 20px;border:2px solid var(--gray-100);background:var(--white);border-radius:20px;cursor:pointer;font-weight:600}
|
||
.filter-btn.active{border-color:var(--cyan);background:var(--cyan-50)}
|
||
.empty{text-align:center;padding:60px 24px;color:var(--gray-500)}
|
||
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1000;align-items:center;justify-content:center}
|
||
.modal.on{display:flex}
|
||
.modal-content{background:var(--white);padding:32px;border-radius:16px;max-width:400px;width:90%}
|
||
.modal h3{margin-bottom:20px}
|
||
.password-input{margin-bottom:16px}
|
||
@media (max-width:640px){.hero h1{font-size:32px}.section h2{font-size:28px}.container{padding:40px 16px}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<nav class="nav">
|
||
<div class="nav-inner">
|
||
<strong style="color:var(--white);font-size:20px;">🏪 Школьный магазин</strong>
|
||
<div>
|
||
<a href="#" id="nav-home" class="active">Товары</a>
|
||
<a href="#" id="nav-admin">Админка</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1>Добро пожаловать!</h1>
|
||
<p>Вкусные перекусы, школьные принадлежности и приятные мелочи по доступным ценам</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="shop-section">
|
||
<div class="container">
|
||
<h2>🛒 Наши товары</h2>
|
||
|
||
<div class="filter-bar" id="filters">
|
||
<button class="filter-btn active" data-cat="all">Все</button>
|
||
<button class="filter-btn" data-cat="еда">🍫 Еда</button>
|
||
<button class="filter-btn" data-cat="напитки">🥤 Напитки</button>
|
||
<button class="filter-btn" data-cat="школа">✏️ Школа</button>
|
||
<button class="filter-btn" data-cat="разное">🎁 Разное</button>
|
||
</div>
|
||
|
||
<div class="grid" id="products-grid"></div>
|
||
<div class="empty" id="empty-msg" style="display:none">Товаров пока нет 😔</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="admin-section" style="display:none">
|
||
<div class="container">
|
||
<h2>⚙️ Админка</h2>
|
||
|
||
<div class="admin-panel" id="admin-login">
|
||
<h3>🔐 Вход для владельца</h3>
|
||
<p style="margin-bottom:20px">Введите пароль для управления товарами</p>
|
||
<div class="form-group">
|
||
<input type="password" id="admin-password" class="password-input" placeholder="Пароль">
|
||
</div>
|
||
<button class="btn" onclick="checkPassword()">Войти</button>
|
||
</div>
|
||
|
||
<div id="admin-content" style="display:none">
|
||
<div class="admin-panel">
|
||
<h3>➕ Добавить товар</h3>
|
||
<form id="add-form">
|
||
<div class="form-group">
|
||
<label>Название</label>
|
||
<input type="text" id="prod-name" placeholder="Например: Snickers" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Цена (₸)</label>
|
||
<input type="number" id="prod-price" placeholder="150" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Категория</label>
|
||
<select id="prod-cat">
|
||
<option value="еда">🍫 Еда</option>
|
||
<option value="напитки">🥤 Напитки</option>
|
||
<option value="школа">✏️ Школа</option>
|
||
<option value="разное">🎁 Разное</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Описание</label>
|
||
<textarea id="prod-desc" rows="3" placeholder="Короткое описание"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Картинка (ссылка или оставь пустым)</label>
|
||
<input type="text" id="prod-img" placeholder="https://...">
|
||
</div>
|
||
<button type="submit" class="btn btn-green">Добавить товар</button>
|
||
</form>
|
||
</div>
|
||
|
||
<h3>📦 Все товары</h3>
|
||
<div class="grid" id="admin-grid"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="modal" id="login-modal">
|
||
<div class="modal-content">
|
||
<h3>🔐 Введите пароль</h3>
|
||
<input type="password" id="modal-password" class="password-input" placeholder="Пароль" style="width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;margin-bottom:16px">
|
||
<button class="btn" onclick="checkModalPassword()">Войти</button>
|
||
<button class="btn" style="background:var(--gray-100);margin-top:12px" onclick="closeModal()">Отмена</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// === Данные ===
|
||
const CATEGORIES = {еда:'🍫', напитки:'🥤', школа:'✏️', разное:'🎁'};
|
||
let products = [];
|
||
let isAdmin = false;
|
||
const ADMIN_PASS = 'admin123'; // Поменяй на свой!
|
||
|
||
// === Загрузка/сохранение ===
|
||
function loadProducts() {
|
||
try {
|
||
const saved = localStorage.getItem('shop-products');
|
||
products = saved ? JSON.parse(saved) : getDefaults();
|
||
} catch { products = getDefaults(); }
|
||
}
|
||
|
||
function saveProducts() {
|
||
localStorage.setItem('shop-products', JSON.stringify(products));
|
||
}
|
||
|
||
function getDefaults() {
|
||
return [
|
||
{id:1, name:'Snickers', price:150, cat:'еда', desc:'Шоколадный батончик с нугой', img:'https://picsum.photos/seed/snickers/400/300'},
|
||
{id:2, name:'Coca-Cola', price:200, cat:'напитки', desc:'Газировка 0.5л', img:'https://picsum.photos/seed/coke/400/300'},
|
||
{id:3, name:'Тетрадь 12л', price:80, cat:'школа', desc:'В клетку, 12 листов', img:'https://picsum.photos/seed/notebook/400/300'},
|
||
{id:4, name:'Чипсы Lay\'s', price:350, cat:'еда', desc:'Вкус краба', img:'https://picsum.photos/seed/chips/400/300'},
|
||
{id:5, name:'Ручка синяя', price:120, cat:'школа', desc:'Шариковая, 0.7мм', img:'https://picsum.photos/seed/pen/400/300'},
|
||
{id:6, name:'Жвачка Love Is', price:50, cat:'еда', desc:'Клубничная', img:'https://picsum.photos/seed/gum/400/300'}
|
||
];
|
||
}
|
||
|
||
// === Рендер ===
|
||
function render(filter = 'all') {
|
||
const grid = document.getElementById('products-grid');
|
||
const adminGrid = document.getElementById('admin-grid');
|
||
const empty = document.getElementById('empty-msg');
|
||
|
||
const filtered = filter === 'all' ? products : products.filter(p => p.cat === filter);
|
||
|
||
if (filtered.length === 0) {
|
||
grid.innerHTML = '';
|
||
empty.style.display = 'block';
|
||
} else {
|
||
empty.style.display = 'none';
|
||
grid.innerHTML = filtered.map(p => `
|
||
<div class="card">
|
||
<img src="${p.img || 'https://picsum.photos/400/300'}" alt="${p.name}">
|
||
<div class="card-body">
|
||
<span class="card-cat">${CATEGORIES[p.cat]} ${p.cat}</span>
|
||
<div class="card-title">${p.name}</div>
|
||
<div class="card-price">${p.price} ₸</div>
|
||
<p style="color:var(--gray-500);font-size:14px">${p.desc || ''}</p>
|
||
<button class="btn btn-buy" onclick="askParent('${p.name}', ${p.price})">👨👩👧👦 Попросить родителя</button>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
// Админка
|
||
if (adminGrid) {
|
||
adminGrid.innerHTML = products.map(p => `
|
||
<div class="card">
|
||
<img src="${p.img || 'https://picsum.photos/400/300'}" alt="${p.name}">
|
||
<div class="card-body">
|
||
<span class="card-cat">${CATEGORIES[p.cat]} ${p.cat}</span>
|
||
<div class="card-title">${p.name}</div>
|
||
<div class="card-price">${p.price} ₸</div>
|
||
<button class="btn btn-red" style="margin-top:12px;width:100%" onclick="deleteProduct(${p.id})">Удалить</button>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
}
|
||
|
||
// === Фильтры ===
|
||
document.getElementById('filters').addEventListener('click', (e) => {
|
||
if (e.target.classList.contains('filter-btn')) {
|
||
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
||
e.target.classList.add('active');
|
||
render(e.target.dataset.cat);
|
||
}
|
||
});
|
||
|
||
// === Навигация ===
|
||
document.getElementById('nav-home').addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
showPage('home');
|
||
});
|
||
document.getElementById('nav-admin').addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
showPage('admin');
|
||
});
|
||
|
||
function showPage(page) {
|
||
document.getElementById('shop-section').style.display = page === 'home' ? 'block' : 'none';
|
||
document.getElementById('admin-section').style.display = page === 'admin' ? 'block' : 'none';
|
||
document.getElementById('nav-home').classList.toggle('active', page === 'home');
|
||
document.getElementById('nav-admin').classList.toggle('active', page === 'admin');
|
||
}
|
||
|
||
// === Админка ===
|
||
function checkPassword() {
|
||
const pass = document.getElementById('admin-password').value;
|
||
if (pass === ADMIN_PASS) {
|
||
isAdmin = true;
|
||
document.getElementById('admin-login').style.display = 'none';
|
||
document.getElementById('admin-content').style.display = 'block';
|
||
render();
|
||
} else {
|
||
alert('Неверный пароль!');
|
||
}
|
||
}
|
||
|
||
function checkModalPassword() {
|
||
const pass = document.getElementById('modal-password').value;
|
||
if (pass === ADMIN_PASS) {
|
||
isAdmin = true;
|
||
closeModal();
|
||
showPage('admin');
|
||
document.getElementById('admin-login').style.display = 'none';
|
||
document.getElementById('admin-content').style.display = 'block';
|
||
render();
|
||
} else {
|
||
alert('Неверный пароль!');
|
||
}
|
||
}
|
||
|
||
function closeModal() {
|
||
document.getElementById('login-modal').classList.remove('on');
|
||
}
|
||
|
||
// === Добавление/удаление ===
|
||
document.getElementById('add-form').addEventListener('submit', (e) => {
|
||
e.preventDefault();
|
||
const product = {
|
||
id: Date.now(),
|
||
name: document.getElementById('prod-name').value,
|
||
price: Number(document.getElementById('prod-price').value),
|
||
cat: document.getElementById('prod-cat').value,
|
||
desc: document.getElementById('prod-desc').value,
|
||
img: document.getElementById('prod-img').value || 'https://picsum.photos/400/300'
|
||
};
|
||
products.push(product);
|
||
saveProducts();
|
||
render();
|
||
e.target.reset();
|
||
alert('✅ Товар добавлен!');
|
||
});
|
||
|
||
function deleteProduct(id) {
|
||
if (confirm('Удалить этот товар?')) {
|
||
products = products.filter(p => p.id !== id);
|
||
saveProducts();
|
||
render();
|
||
}
|
||
}
|
||
|
||
// === Запрос родителю ===
|
||
function askParent(name, price) {
|
||
const parentPhone = prompt(
|
||
`Товар: ${name}\nЦена: ${price} ₸\n\nВведите номер телефона родителя (WhatsApp):`,
|
||
'77771234567'
|
||
);
|
||
if (parentPhone) {
|
||
const msg = `Здравствуйте! Я хочу купить ${name} за ${price} ₸. Можно?`;
|
||
const url = `https://wa.me/${parentPhone}?text=${encodeURIComponent(msg)}`;
|
||
window.open(url, '_blank');
|
||
}
|
||
}
|
||
|
||
// === Старт ===
|
||
loadProducts();
|
||
render();
|
||
</script>
|
||
</body>
|
||
</html>
|