ËLOOK PWA Магазин

{ "name": "ËLOOK PWA Магазин", "short_name": "ËLOOK", "start_url": ".", "display": "standalone", "background_color": "#22223b", "theme_color": "#22223b", "description": "PWA-магазин ËLOOK: каталог, фильтры, авторизация, админка.", "icons": [ { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "icon-512.png", "sizes": "512x512", "type": "image/png" } ] } const CACHE_NAME = 'elook-pwa-v1'; const ASSETS = [ '/', '/index.html', '/main.js', '/styles.css', '/manifest.json', '/icon-192.png', '/icon-512.png' ]; self.addEventListener('install', e => { e.waitUntil( caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS)) ); }); self.addEventListener('activate', e => { e.waitUntil( caches.keys().then(keys => Promise.all( keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k)) ) ) ); }); self.addEventListener('fetch', e => { e.respondWith( caches.match(e.request).then(resp => resp || fetch(e.request)) ); }); :root { --primary: #22223b; --accent: #4a4e69; --bg: #f2e9e4; --white: #fff; --radius: 8px; } html, body { margin: 0; padding: 0; font-family: 'Segoe UI', Arial, sans-serif; background: var(--bg); color: var(--primary); min-height: 100vh; } #app { min-height: 100vh; display: flex; flex-direction: column; } header { background: var(--primary); color: var(--white); padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; } header h1 { margin: 0; font-size: 1.5rem; letter-spacing: 2px; } nav { display: flex; gap: 1rem; } nav button, nav a { background: none; border: none; color: var(--white); font-size: 1rem; cursor: pointer; text-decoration: none; padding: 0.5rem 1rem; border-radius: var(--radius); transition: background 0.2s; } nav button:hover, nav a:hover { background: var(--accent); } main { flex: 1; padding: 2rem 1rem; max-width: 900px; margin: 0 auto; width: 100%; } .auth-form, .admin-form, .product-form { background: var(--white); border-radius: var(--radius); box-shadow: 0 2px 8px rgba(34,34,59,0.07); padding: 2rem; max-width: 400px; margin: 2rem auto; display: flex; flex-direction: column; gap: 1rem; } .auth-form input, .admin-form input, .product-form input, .product-form select { padding: 0.5rem; border-radius: var(--radius); border: 1px solid #ccc; font-size: 1rem; } .auth-form button, .admin-form button, .product-form button { background: var(--primary); color: var(--white); border: none; border-radius: var(--radius); padding: 0.7rem 1rem; font-size: 1rem; cursor: pointer; transition: background 0.2s; } .auth-form button:hover, .admin-form button:hover, .product-form button:hover { background: var(--accent); } .catalog-filters { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; align-items: center; } .catalog-filters select, .catalog-filters input[type="range"] { padding: 0.5rem; border-radius: var(--radius); border: 1px solid #ccc; font-size: 1rem; } .product-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; } .product-card { background: var(--white); border-radius: var(--radius); box-shadow: 0 2px 8px rgba(34,34,59,0.07); padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; } .product-card h3 { margin: 0 0 0.5rem 0; font-size: 1.1rem; } .product-card .price { color: var(--accent); font-weight: bold; font-size: 1.1rem; } .admin-panel { display: flex; flex-direction: column; gap: 2rem; } .admin-products-list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; } .admin-product-card { background: var(--white); border-radius: var(--radius); box-shadow: 0 2px 8px rgba(34,34,59,0.07); padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; } .admin-product-card button { background: #c9184a; color: var(--white); border: none; border-radius: var(--radius); padding: 0.3rem 0.7rem; font-size: 0.9rem; cursor: pointer; margin-top: 0.5rem; align-self: flex-end; } .admin-product-card button:hover { background: #a4133c; } @media (max-width: 700px) { main { padding: 1rem 0.2rem; } .admin-products-list { grid-template-columns: 1fr; } } @media (max-width: 500px) { .product-list { grid-template-columns: 1fr; } .auth-form, .admin-form, .product-form { padding: 1rem; } } import { renderApp } from './src/app.js'; renderApp(document.getElementById('app')); import { renderHeader } from './components/header.js'; import { renderAuth } from './components/auth.js'; import { renderCatalog } from './components/catalog.js'; import { renderAdmin } from './components/admin.js'; import { getUser, logout } from './services/authService.js'; let root, currentView = ''; function route(view) { currentView = view; render(); } function render() { root.innerHTML = ''; root.appendChild(renderHeader({ user: getUser(), onNav: route, onLogout: () => { logout(); route('auth'); } })); const main = document.createElement('main'); if (currentView === 'auth') { main.appendChild(renderAuth({ onAuth: () => route('catalog') })); } else if (currentView === 'admin') { main.appendChild(renderAdmin()); } else { main.appendChild(renderCatalog()); } root.appendChild(main); } export function renderApp(container) { root = container; // Initial route if (getUser()) { route(getUser().isAdmin ? 'admin' : 'catalog'); } else { route('auth'); } // Handle hash navigation (optional) window.addEventListener('hashchange', () => { if (location.hash === '#admin') route('admin'); else if (location.hash === '#catalog') route('catalog'); else route('auth'); }); } export function renderHeader({ user, onNav, onLogout }) { const header = document.createElement('header'); const h1 = document.createElement('h1'); h1.textContent = 'ËLOOK'; header.appendChild(h1); const nav = document.createElement('nav'); if (user) { if (user.isAdmin) { const adminBtn = document.createElement('button'); adminBtn.textContent = 'Админка'; adminBtn.onclick = () => onNav('admin'); nav.appendChild(adminBtn); } const catalogBtn = document.createElement('button'); catalogBtn.textContent = 'Каталог'; catalogBtn.onclick = () => onNav('catalog'); nav.appendChild(catalogBtn); const logoutBtn = document.createElement('button'); logoutBtn.textContent = 'Выйти'; logoutBtn.onclick = onLogout; nav.appendChild(logoutBtn); } else { const loginBtn = document.createElement('button'); loginBtn.textContent = 'Войти'; loginBtn.onclick = () => onNav('auth'); nav.appendChild(loginBtn); } header.appendChild(nav); return header; } import { login, register } from '../services/authService.js'; export function renderAuth({ onAuth }) { const wrapper = document.createElement('div'); wrapper.className = 'auth-form'; const title = document.createElement('h2'); title.textContent = 'Вход / Регистрация'; wrapper.appendChild(title); const form = document.createElement('form'); form.autocomplete = 'on'; const emailInput = document.createElement('input'); emailInput.type = 'email'; emailInput.placeholder = 'Email'; emailInput.required = true; form.appendChild(emailInput); const phoneInput = document.createElement('input'); phoneInput.type = 'tel'; phoneInput.placeholder = 'Телефон (необязательно)'; phoneInput.pattern = '[0-9+\\-() ]*'; form.appendChild(phoneInput); const passInput = document.createElement('input'); passInput.type = 'password'; passInput.placeholder = 'Пароль'; passInput.required = true; form.appendChild(passInput); const error = document.createElement('div'); error.style.color = '#c9184a'; error.style.fontSize = '0.95em'; error.style.minHeight = '1.5em'; wrapper.appendChild(error); const loginBtn = document.createElement('button'); loginBtn.type = 'submit'; loginBtn.textContent = 'Войти'; form.appendChild(loginBtn); const regBtn = document.createElement('button'); regBtn.type = 'button'; regBtn.textContent = 'Регистрация'; regBtn.style.background = '#4a4e69'; regBtn.style.marginTop = '0.5rem'; form.appendChild(regBtn); form.onsubmit = async e => { e.preventDefault(); error.textContent = ''; try { await login(emailInput.value, passInput.value); onAuth(); } catch (err) { error.textContent = err.message; } }; regBtn.onclick = async () => { error.textContent = ''; try { await register(emailInput.value, passInput.value, phoneInput.value); onAuth(); } catch (err) { error.textContent = err.message; } }; wrapper.appendChild(form); return wrapper; } import { getProducts, getCategories } from '../services/productService.js'; export function renderCatalog() { const wrapper = document.createElement('div'); // Filters const filters = document.createElement('div'); filters.className = 'catalog-filters'; const categories = getCategories(); const catSelect = document.createElement('select'); const allOpt = document.createElement('option'); allOpt.value = ''; allOpt.textContent = 'Все категории'; catSelect.appendChild(allOpt); categories.forEach(cat => { const opt = document.createElement('option'); opt.value = cat; opt.textContent = cat; catSelect.appendChild(opt); }); filters.appendChild(catSelect); const priceLabel = document.createElement('label'); priceLabel.textContent = 'Цена до: '; const priceInput = document.createElement('input'); priceInput.type = 'range'; priceInput.min = 0; priceInput.max = 10000; priceInput.value = 10000; priceInput.step = 100; priceInput.style.width = '120px'; priceLabel.appendChild(priceInput); const priceVal = document.createElement('span'); priceVal.textContent = '10000'; priceLabel.appendChild(priceVal); filters.appendChild(priceLabel); priceInput.oninput = () => { priceVal.textContent = priceInput.value; renderList(); }; catSelect.onchange = renderList; wrapper.appendChild(filters); // Product list const list = document.createElement('div'); list.className = 'product-list'; wrapper.appendChild(list); function renderList() { const cat = catSelect.value; const maxPrice = Number(priceInput.value); const products = getProducts().filter(p => (!cat || p.category === cat) && p.price <= maxPrice ); list.innerHTML = ''; if (products.length === 0) { list.textContent = 'Нет товаров по выбранным фильтрам.'; return; } products.forEach(p => { const card = document.createElement('div'); card.className = 'product-card'; card.innerHTML = `

${p.name}

${p.price} ₽

${p.category}

${p.desc || ''}

`; list.appendChild(card); }); } renderList(); return wrapper; } import { getProducts, addProduct, removeProduct, getCategories } from '../services/productService.js'; export function renderAdmin() { const wrapper = document.createElement('div'); wrapper.className = 'admin-panel'; // Add product form const form = document.createElement('form'); form.className = 'product-form'; form.innerHTML = `

Добавить товар

`; // Fill datalist const datalist = form.querySelector('#cat-list'); getCategories().forEach(cat => { const opt = document.createElement('option'); opt.value = cat; datalist.appendChild(opt); }); form.onsubmit = e => { e.preventDefault(); const name = form.name.value.trim(); const price = Number(form.price.value); const category = form.category.value.trim(); const desc = form.desc.value.trim(); const error = form.querySelector('.error'); error.textContent = ''; if (!name || !category || isNaN(price)) { error.textContent = 'Заполните все обязательные поля.'; return; } addProduct({ name, price, category, desc }); renderList(); form.reset(); }; wrapper.appendChild(form); // Product list const list = document.createElement('div'); list.className = 'admin-products-list'; wrapper.appendChild(list); function renderList() { list.innerHTML = ''; getProducts().forEach((p, idx) => { const card = document.createElement('div'); card.className = 'admin-product-card'; card.innerHTML = ` ${p.name} ${p.price} ₽ ${p.category} ${p.desc || ''} `; const delBtn = document.createElement('button'); delBtn.textContent = 'Удалить'; delBtn.onclick = () => { removeProduct(idx); renderList(); }; card.appendChild(delBtn); list.appendChild(card); }); } renderList(); return wrapper; } import { hash, compare } from '../utils/bcrypt.js'; import { createJWT, verifyJWT } from '../utils/jwt.js'; const LS_KEY = 'elook-user'; const USERS_KEY = 'elook-users'; // Demo: первый пользователь - админ function getUsers() { let users = JSON.parse(localStorage.getItem(USERS_KEY) || '[]'); if (users.length === 0) { // Добавим дефолтного админа users = [{ email: 'admin@elook.ru', phone: '', password: hash('admin123'), isAdmin: true }]; localStorage.setItem(USERS_KEY, JSON.stringify(users)); } return users; } function saveUsers(users) { localStorage.setItem(USERS_KEY, JSON.stringify(users)); } export function getUser() { const token = localStorage.getItem(LS_KEY); if (!token) return null; try { return verifyJWT(token); } catch { localStorage.removeItem(LS_KEY); return null; } } export function logout() { localStorage.removeItem(LS_KEY); } export async function login(email, password) { const users = getUsers(); const user = users.find(u => u.email === email); if (!user) throw new Error('Пользователь не найден'); if (!compare(password, user.password)) throw new Error('Неверный пароль'); const token = createJWT({ email: user.email, phone: user.phone, isAdmin: !!user.isAdmin }); localStorage.setItem(LS_KEY, token); } export async function register(email, password, phone) { if (!email || !password) throw new Error('Email и пароль обязательны'); let users = getUsers(); if (users.find(u => u.email === email)) throw new Error('Пользователь уже существует'); const user = { email, phone, password: hash(password), isAdmin: false }; users.push(user); saveUsers(users); const token = createJWT({ email: user.email, phone: user.phone, isAdmin: false }); localStorage.setItem(LS_KEY, token); } const LS_KEY = 'elook-products'; const DEMO_PRODUCTS = [ { name: 'Очки Classic', price: 2500, category: 'Очки', desc: 'Классические солнцезащитные очки' }, { name: 'Сумка Urban', price: 4200, category: 'Сумки', desc: 'Городская сумка через плечо' }, { name: 'Часы Minimal', price: 7800, category: 'Часы', desc: 'Минималистичные наручные часы' }, { name: 'Очки Retro', price: 3200, category: 'Очки', desc: 'Ретро стиль' }, { name: 'Сумка Mini', price: 1800, category: 'Сумки', desc: 'Маленькая сумка' } ]; function getAll() { let products = JSON.parse(localStorage.getItem(LS_KEY) || 'null'); if (!products) { products = DEMO_PRODUCTS; localStorage.setItem(LS_KEY, JSON.stringify(products)); } return products; } function saveAll(products) { localStorage.setItem(LS_KEY, JSON.stringify(products)); } export function getProducts() { return getAll(); } export function addProduct(product) { const products = getAll(); products.push(product); saveAll(products); } export function removeProduct(idx) { const products = getAll(); products.splice(idx, 1); saveAll(products); } export function getCategories() { const products = getAll(); const cats = new Set(products.map(p => p.category)); return Array.from(cats); } // Simple bcrypt-like hash/compare for demo (not secure, for localStorage only) function hash(str) { // Fake hash: base64 + salt return btoa(str + '|elook'); } function compare(str, hashed) { return hash(str) === hashed; } export { hash, compare }; // Simple JWT-like (not secure, for demo only) const SECRET = 'elook-demo'; function base64url(str) { return btoa(unescape(encodeURIComponent(str))) .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, ''); } function decodeBase64url(str) { str = str.replace(/-/g, '+').replace(/_/g, '/'); while (str.length % 4) str += '='; return decodeURIComponent(escape(atob(str))); } export function createJWT(payload) { const header = { alg: 'HS256', typ: 'JWT' }; const ts = Math.floor(Date.now() / 1000); const pl = { ...payload, iat: ts }; const h = base64url(JSON.stringify(header)); const p = base64url(JSON.stringify(pl)); const s = base64url(btoa(h + '.' + p + SECRET)); return [h, p, s].join('.'); } export function verifyJWT(token) { const [h, p, s] = token.split('.'); if (!h || !p || !s) throw new Error('Invalid token'); const check = base64url(btoa(h + '.' + p + SECRET)); if (s !== check) throw new Error('Invalid signature'); return JSON.parse(decodeBase64url(p)); }