<div class="controls">
    <div class="search" role="search" aria-label="Поиск фильмов">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style="opacity:.7"><path d="M21 21l-4.35-4.35" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path><circle cx="11" cy="11" r="6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></circle></svg>
      <input id="q" placeholder="Поиск — фильм, год, актёр, фирма" />
    </div>

    <div class="admin-toggle" title="Админ-панель">
      <button id="admin-btn" class="btn ghost" style="padding:8px">Админ</button>
      <div style="font-size:13px;color:var(--muted);padding-left:6px">управление каталогом</div>
    </div>
  </div>
</header>

<nav id="nav">
  <button class="tab active" data-filter="all">Все</button>
  <button class="tab" data-filter="russian">Российские</button>
  <button class="tab" data-filter="international">Зарубежные</button>
  <button class="tab" data-filter="tajik">Таджикские</button>
  <button class="tab" data-filter="uzbek">Узбекские</button>
</nav>

<section class="hero">
  <div class="text">
    <h2 id="hero-title">Смотри кино красиво</h2>
    <p id="hero-sub">Современный минимализм, удобный интерфейс и быстрый доступ к любимым фильмам — всё в одном месте.</p>
    <div class="cta">
      <button class="btn" id="browse-btn">Перейти к фильмам</button>
      <button class="btn ghost" id="about-btn">О проекте</button>
    </div>
  </div>
  <div style="width:260px;min-width:220px">
    <div style="border-radius:12px;padding:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));">
      <div style="font-size:13px;color:var(--muted)">Популярные</div>
      <div style="display:flex;gap:8px;margin-top:10px">
        <img src="https://via.placeholder.com/80x120?text=1" alt="" style="width:80px;height:120px;border-radius:8px;object-fit:cover">
        <img src="https://via.placeholder.com/80x120?text=2" alt="" style="width:80px;height:120px;border-radius:8px;object-fit:cover">
        <img src="https://via.placeholder.com/80x120?text=3" alt="" style="width:80px;height:120px;border-radius:8px;object-fit:cover">
      </div>
    </div>
  </div>
</section>

<main>
  <div class="grid" id="grid"></div>

  <footer id="footer">
    <div id="essay"></div>
    <div style="margin-top:12px;color:var(--muted)">© <span id="year"></span> CinemaHub — Дизайн: современный • Лёгкая интеграция с backend</div>
  </footer>
</main>

<script> /* ========== Storage keys ========== */ const KEY_MOVIES = 'ch_movies_v1'; const KEY_COMPANIES = 'ch_companies_v1'; const KEY_ADMIN = 'ch_admin_v1'; // stores hashed password or flag /* ========== Demo initial data (if empty) ========== */ const demoMovies = [ { id:1, title:{ru:"Зимняя дорога", en:"Winter Road", tg:"Роҳи зимистона"}, year:2023, country:"russian", tags:["драма","путешествие"], poster:"https://via.placeholder.com/600x900?text=Зимняя", src:"https://www.youtube.com/embed/tgbNymZ7vqY", companyId:null, ratings: [5,4,5] }, { id:2, title:{ru:"Город света", en:"City of Light", tg:"Шаҳри нур"}, year:2024, country:"international", tags:["фантастика"], poster:"https://via.placeholder.com/600x900?text=Город+света", src:"https://www.youtube.com/embed/dQw4w9WgXcQ", companyId:null, ratings: [4,4] }, { id:3, title:{ru:"Дарахт", en:"The Tree", tg:"Дарахт"}, year:2022, country:"tajik", tags:["семейный"], poster:"https://via.placeholder.com/600x900?text=Дарахт", src:"https://www.youtube.com/embed/tgbNymZ7vqY", companyId:null, ratings: [] }, ]; /* ========== Utilities ========== */ const q = document.getElementById('q'); const gridEl = document.getElementById('grid'); const modal = document.getElementById('modal'); const player = document.getElementById('player'); const modalTitle = document.getElementById('modal-title'); const modalMeta = document.getElementById('modal-meta'); const modalCompany = document.getElementById('modal-company'); const modalClose = document.getElementById('modal-close'); const yearEl = document.getElementById('year'); const langButtons = document.querySelectorAll('.lang button'); let currentLang = 'ru'; let currentFilter = 'all'; /* ========== Load & save ========== */ function loadMovies(){ try{ const raw = localStorage.getItem(KEY_MOVIES); if(!raw){ localStorage.setItem(KEY_MOVIES, JSON.stringify(demoMovies)); return demoMovies.slice(); } return JSON.parse(raw); }catch(e){ console.error(e); return demoMovies.slice(); } } function saveMovies(arr){ localStorage.setItem(KEY_MOVIES, JSON.stringify(arr)); } function loadCompanies(){ try{ const raw = localStorage.getItem(KEY_COMPANIES); if(!raw){ localStorage.setItem(KEY_COMPANIES, JSON.stringify([])); return []; } return JSON.parse(raw); }catch(e){ console.error(e); return []; } } function saveCompanies(arr){ localStorage.setItem(KEY_COMPANIES, JSON.stringify(arr)); } let movies = loadMovies(); let companies = loadCompanies(); /* ========== Helper functions ========== */ function countryLabel(code){ return ({russian:'Россия', international:'Зарубежье', tajik:'Таджикистан', uzbek:'Узбекستان'})[code] || code; } function avgRating(arr){ if(!arr || arr.length===0) return 0; return Math.round((arr.reduce((s,x)=>s+x,0)/arr.length)*10)/10; } function uid(){ return Date.now() + Math.floor(Math.random()*999); } function escapeHtml(s){ return (s||'').replace(/[&<>"']/g, (c)=>({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])); } /* ========== Render grid ========== */ function renderGrid(){ gridEl.innerHTML = ''; const term = q.value.trim().toLowerCase(); const filtered = movies.filter(m=>{ if(currentFilter !== 'all' && m.country !== currentFilter) return false; if(!term) return true; const compName = (companies.find(c=>c.id===m.companyId)||{}).name || ''; const t = `${m.title.ru} ${m.title.en} ${m.title.tg} ${m.year} ${m.tags.join(' ')} ${compName}`.toLowerCase(); return t.includes(term); }); if(filtered.length===0){ gridEl.innerHTML = ``; return; } filtered.forEach(m=>{ const el = document.createElement('div'); el.className='card'; const posterStyle = `background-image:url('${m.poster || 'https://via.placeholder.com/600x900?text=No+Image'}')`; const company = companies.find(c=>c.id===m.companyId); const avg = avgRating(m.ratings); el.innerHTML = ` `; gridEl.appendChild(el); }); } /* render small star icons based on average (read-only) */ function renderStarsInline(avg){ const full = Math.floor(avg); const half = (avg - full) >= 0.5 ? 1 : 0; let out = ''; for(let i=1;i<=5;i++){ if(i<=full) out += '★'; else if(i===full+1 && half) out += '☆'; else out += '☆'; } return out; } /* ========== Player modal ========== */ document.addEventListener('click', (ev)=>{ const p = ev.target.closest('[data-play]'); if(p){ const id = +p.dataset.play; const m = movies.find(x=>x.id===id); if(m){ openModal(m); } } }); function openModal(m){ modalTitle.innerText = m.title[currentLang] || m.title.ru; const comp = companies.find(c=>c.id===m.companyId); modalMeta.innerText = `${m.year} • ${countryLabel(m.country)}`; modalCompany.innerText = comp? ` • ${comp.name}` : ''; player.src = m.src + (m.src.includes('?')? '&autoplay=1' : '?autoplay=1'); modal.classList.add('open'); document.body.style.overflow = 'hidden'; } function closeModal(){ modal.classList.remove('open'); player.src=''; document.body.style.overflow=''; } modalClose.addEventListener('click', closeModal); modal.addEventListener('click', (e)=>{ if(e.target===modal) closeModal(); }); document.addEventListener('keydown', (e)=>{ if(e.key==='Escape') closeModal(); }); /* ========== Rating interaction (public) ========== Пользователь может кликнуть на звезду — добавляется оценка в массив ratings фильма. */ document.addEventListener('click', (e)=>{ const star = e.target.closest('.star[data-star]'); if(star){ const id = +star.closest('.rating').dataset.id; const score = +star.dataset.star; const film = movies.find(x=>x.id===id); if(film){ film.ratings = film.ratings || []; film.ratings.push(score); saveMovies(movies); renderGrid(); } } }); /* helper to produce star elements (interactive) */ function makeStarsInteractive(id){ let out=''; for(let i=1;i<=5;i++){ out += `★`; } return ``; } /* but for grid we show readonly; clicking rating area still handled above via separate overlay: we will attach interactive stars on top when clicked */ gridEl.addEventListener('click', (e)=>{ const ratingBox = e.target.closest('.rating'); if(ratingBox && ratingBox.dataset.id){ // replace the rating area with interactive stars for that card (temporary) const id = +ratingBox.dataset.id; const container = ratingBox; container.innerHTML = makeStarsInteractive(id) + `Нажмите звезду`; } }); /* ========== Admin: login & UI ========== */ const adminBtn = document.getElementById('admin-btn'); const adminPanel = document.getElementById('admin-panel'); const loginBlock = document.getElementById('login-block'); const panel = document.getElementById('panel'); const loginBtn = document.getElementById('login-btn'); const adminPassInput = document.getElementById('admin-pass'); const closeAdmin = document.getElementById('close-admin'); const logoutBtn = document.getElementById('logout-btn'); adminBtn.addEventListener('click', ()=>{ adminPanel.classList.toggle('open'); }); closeAdmin.addEventListener('click', ()=>{ adminPanel.classList.remove('open'); }); /* simple auth: default password 'admin' stored hashed (naive) */ function isLogged(){ return localStorage.getItem(KEY_ADMIN) === '1'; } function setLogged(v){ localStorage.setItem(KEY_ADMIN, v? '1' : '0'); } /* init auth UI */ function initAuthUI(){ if(isLogged()){ loginBlock.style.display='none'; panel.style.display='block'; renderCompaniesList(); renderCompanySelect(); renderAdminFilms(); } else { loginBlock.style.display='block'; panel.style.display='none'; } } initAuthUI(); /* login/logout */ loginBtn.addEventListener('click', ()=>{ const pass = adminPassInput.value || ''; // for demo: password is 'admin' — you can change this behavior to hash compare or integrate backend if(pass === 'admin'){ setLogged(true); adminPassInput.value=''; initAuthUI(); } else { alert('Неверный пароль (по умолчанию: admin)'); } }); logoutBtn.addEventListener('click', ()=>{ setLogged(false); initAuthUI(); }); /* ========== Companies management ========== */ const companyNameInput = document.getElementById('company-name'); const addCompanyBtn = document.getElementById('add-company'); const companiesListEl = document.getElementById('companies-list'); const filmCompanySelect = document.getElementById('film-company'); addCompanyBtn.addEventListener('click', ()=>{ const name = (companyNameInput.value||'').trim(); if(!name) return alert('Введите название фирмы'); const c = { id: uid(), name }; companies.push(c); saveCompanies(companies); companyNameInput.value=''; renderCompaniesList(); renderCompanySelect(); }); function renderCompaniesList(){ companiesListEl.innerHTML = ''; if(companies.length===0){ companiesListEl.innerHTML = ''; return; } companies.forEach(c=>{ const div = document.createElement('div'); div.style.display='flex'; div.style.justifyContent='space-between'; div.style.alignItems='center'; div.style.marginBottom='6px'; div.innerHTML = ``; companiesListEl.appendChild(div); }); } companiesListEl.addEventListener('click', (e)=>{ const idEdit = e.target.closest('[data-edit-company]'); const idDel = e.target.closest('[data-del-company]'); if(idEdit){ const id = +idEdit.dataset.editCompany; const c = companies.find(x=>x.id===id); const newName = prompt('Новое имя фирмы', c.name); if(newName){ c.name = newName; saveCompanies(companies); renderCompaniesList(); renderCompanySelect(); } } if(idDel){ const id = +idDel.dataset.delCompany; if(confirm('Удалить фирму? Это не удалит фильмы, но отвяжет их.')){ companies = companies.filter(x=>x.id!==id); movies = movies.map(m=> (m.companyId===id? {...m, companyId:null} : m)); saveCompanies(companies); saveMovies(movies); renderCompaniesList(); renderCompanySelect(); renderGrid(); renderAdminFilms(); } } }); /* ========== Film form (add/edit) ========== */ const filmTitle = document.getElementById('film-title'); const filmYear = document.getElementById('film-year'); const filmCountry = document.getElementById('film-country'); const filmTags = document.getElementById('film-tags'); const posterFile = document.getElementById('poster-file'); const posterUrl = document.getElementById('poster-url'); const filmSrc = document.getElementById('film-src'); const saveFilmBtn = document.getElementById('save-film'); const clearFormBtn = document.getElementById('clear-form'); const editingIdInput = document.getElementById('editing-id'); function renderCompanySelect(){ filmCompanySelect.innerHTML = '— без фирмы —'; companies.forEach(c=> filmCompanySelect.innerHTML += `${escapeHtml(c.name)}`); } clearFormBtn.addEventListener('click', clearFilmForm); function clearFilmForm(){ filmTitle.value=''; filmYear.value=''; filmCountry.value='russian'; filmTags.value=''; posterFile.value=''; posterUrl.value=''; filmSrc.value=''; editingIdInput.value=''; filmCompanySelect.value=''; } /* helper to read file input as dataURL */ function fileToDataUrl(file){ return new Promise((res,rej)=>{ const fr = new FileReader(); fr.onload = ()=> res(fr.result); fr.onerror = ()=> rej('Ошибка чтения файла'); fr.readAsDataURL(file); }); } saveFilmBtn.addEventListener('click', async ()=>{ // parse title ru||en||tg const rawTitle = (filmTitle.value||'').trim(); if(!rawTitle) return alert('Введите название (ru||en||tg)'); const parts = rawTitle.split('||').map(s=>s.trim()); const titleObj = { ru: parts[0]||'', en: parts[1]||parts[0]||'', tg: parts[2]||parts[0]||'' }; const year = parseInt(filmYear.value) || new Date().getFullYear(); const country = filmCountry.value; const tags = (filmTags.value||'').split(',').map(s=>s.trim()).filter(Boolean); const companyId = filmCompanySelect.value ? Number(filmCompanySelect.value) : null; // poster: either file or url let poster = posterUrl.value.trim(); if(posterFile.files && posterFile.files[0]){ try{ poster = await fileToDataUrl(posterFile.files[0]); }catch(e){ console.error(e); alert('Не удалось прочитать файл постера'); return; } } const src = filmSrc.value.trim() || ''; const editingId = editingIdInput.value; if(editingId){ // update const idx = movies.findIndex(x=>x.id==editingId); if(idx>=0){ movies[idx] = { ...movies[idx], title: titleObj, year, country, tags, poster, src, companyId }; } }else{ // create const newFilm = { id: uid(), title: titleObj, year, country, tags, poster, src, companyId, ratings: [] }; movies.unshift(newFilm); } saveMovies(movies); renderGrid(); renderAdminFilms(); clearFilmForm(); alert('Фильм сохранён'); }); /* ========== Admin: list films and actions ========== */ const adminFilmsEl = document.getElementById('admin-films'); function renderAdminFilms(){ adminFilmsEl.innerHTML = ''; if(movies.length===0){ adminFilmsEl.innerHTML = ''; return; } movies.forEach(m=>{ const div = document.createElement('div'); div.className='film-item'; const comp = companies.find(c=>c.id===m.companyId); div.innerHTML = ` `; adminFilmsEl.appendChild(div); }); } adminFilmsEl.addEventListener('click', (e)=>{ const ed = e.target.closest('[data-edit]'); const del = e.target.closest('[data-del]'); if(ed){ const id = +ed.dataset.edit; const f = movies.find(x=>x.id===id); if(f){ filmTitle.value = `${f.title.ru}||${f.title.en}||${f.title.tg}`; filmYear.value = f.year; filmCountry.value=f.country; filmTags.value=(f.tags||[]).join(', '); posterUrl.value = f.poster && !f.poster.startsWith('data:')? f.poster : ''; filmCompanySelect.value = f.companyId||''; filmSrc.value = f.src||''; editingIdInput.value = f.id; adminPanel.scrollTop = 0; } } if(del){ const id = +del.dataset.del; if(confirm('Удалить фильм?')){ movies = movies.filter(x=>x.id!==id); saveMovies(movies); renderGrid(); renderAdminFilms(); } } }); /* ========== Tabs & search ========== */ const tabs = document.querySelectorAll('.tab'); tabs.forEach(t=>{ t.addEventListener('click', ()=>{ tabs.forEach(x=>x.classList.remove('active')); t.classList.add('active'); currentFilter = t.dataset.filter==='all'? 'all': t.dataset.filter; renderGrid(); }); }); q.addEventListener('input', debounce(renderGrid, 200)); /* ========== Init UI ========== */ yearEl.innerText = new Date().getFullYear(); document.getElementById('browse-btn').addEventListener('click', ()=> document.getElementById('grid').scrollIntoView({behavior:'smooth'}) ); document.getElementById('about-btn').addEventListener('click', ()=> document.getElementById('essay').scrollIntoView({behavior:'smooth'})); /* essay text (i18n simplified) */ document.getElementById('essay').innerHTML = `

Админ-панель позволяет: добавлять/редактировать/удалять фильмы, создавать фирмы (студии), привязывать фильмы к фирмам, загружать постеры и указывать embed src. Рейтинг — пользователи оценивают фильмы звёздами; оценки сохраняются локально и считаются в среднем.

Для production: замените localStorage на сервер и хранение файлов на облако (S3, CDN) или используйте CMS.

`; renderCompanySelect(); renderGrid(); renderAdminFilms(); /* ========== Small utils ========== */ function debounce(fn, ms=200){ let t; return (...a)=>{ clearTimeout(t); t=setTimeout(()=>fn(...a), ms); } } /* ========== Extra: clicking company badge in grid to filter by it ========= */ document.addEventListener('click', (e)=>{ const badge = e.target.closest('.company-badge'); if(badge){ const name = badge.innerText; // find company id const c = companies.find(x=>x.name===name); if(c){ currentFilter='all'; tabs.forEach(x=>x.classList.remove('active')); tabs[0].classList.add('active'); q.value = ''; // clear search // filter grid by company const filtered = movies.filter(m=>m.companyId===c.id); gridEl.innerHTML = ''; if(filtered.length===0){ gridEl.innerHTML = ``; return;} filtered.forEach(m=>{ const el = document.createElement('div'); el.className='card'; el.innerHTML = ` `; gridEl.appendChild(el); }); } } }); /* ========== Notes for deployment ========== - Сейчас все данные в localStorage: movies, companies, admin flag. - Постеры загружаются как dataURL (base64) при загрузке файла — это удобно для демо, но для real prod используйте загрузку на сервер/CDN. - Для интеграции: замените функции loadMovies/saveMovies и loadCompanies/saveCompanies на обращения к API. - Для защиты админки — реализуйте полноценную аутентификацию на сервере. */ </script>