Add real camp photos to gallery, hero and about sections

Replace emoji placeholders with 13 actual photos from camp.
Wire lightbox to display full-size images.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

index.html

@@ -5,10 +5,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Детский лагерь «Сокол» — лето 2025</title>
   <meta name="description" content="Детский лагерь «Сокол»: смены, цены, расписание, запись онлайн." />
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+  <meta http-equiv="Pragma" content="no-cache" />
+  <meta http-equiv="Expires" content="0" />
   <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=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="style.css" />
+  <link rel="stylesheet" href="style.css?v=4" />
 </head>
 <body>
 
@@ -236,11 +239,11 @@
 </footer>
 
 <!-- Lightbox -->
-<div class="lightbox" id="lightbox" hidden>
+<div class="lightbox" id="lightbox">
   <button class="lightbox__close" id="lightbox-close" aria-label="Закрыть">×</button>
   <div class="lightbox__img" id="lightbox-img"></div>
 </div>
 
-<script src="script.js"></script>
+<script src="script.js?v=4"></script>
 </body>
 </html>

script.js

@@ -15,24 +15,21 @@ const MOCK_SHIFTS = [
     includes: ['3-разовое питание', 'проживание в корпусе', 'все мероприятия', 'выпускной'] },
 ];
 
-// Gallery placeholders (emoji + gradient color pairs).
+// Gallery: real camp photos.
 const GALLERY_ITEMS = [
-  { emoji: '🏕️', from: '#FF6B35', to: '#ffa07a', alt: 'Палатки на поляне' },
+  { src: 'images/photo_01.jpg', alt: 'Арт-объект I love Sokol' },
-  { emoji: '🏊', from: '#00AAFF', to: '#7dd3fc', alt: 'Бассейн' },
+  { src: 'images/photo_02.jpg', alt: 'Армрестлинг на стадионе' },
-  { emoji: '⚽', from: '#16a34a', to: '#86efac', alt: 'Футбол' },
+  { src: 'images/photo_03.jpg', alt: 'Зарядка отряда' },
-  { emoji: '🎨', from: '#a855f7', to: '#d8b4fe', alt: 'Творчество' },
+  { src: 'images/photo_04.jpg', alt: 'Гигантские шахматы' },
-  { emoji: '🔥', from: '#dc2626', to: '#fca5a5', alt: 'Костёр' },
+  { src: 'images/photo_05.jpg', alt: 'Построение лагеря' },
-  { emoji: '🌲', from: '#15803d', to: '#86efac', alt: 'Сосновый лес' },
+  { src: 'images/photo_06.jpg', alt: 'Пенная вечеринка' },
-  { emoji: '🥾', from: '#92400e', to: '#fed7aa', alt: 'Поход' },
+  { src: 'images/photo_07.jpg', alt: 'Английская телефонная будка' },
-  { emoji: '🎸', from: '#7c3aed', to: '#c4b5fd', alt: 'Концерт' },
+  { src: 'images/photo_08.jpg', alt: 'Дружный круг на газоне' },
-  { emoji: '🏹', from: '#ea580c', to: '#fed7aa', alt: 'Стрельба из лука' },
+  { src: 'images/photo_09.jpg', alt: 'Ребята в форме лагеря' },
-  { emoji: '🎭', from: '#be185d', to: '#fbcfe8', alt: 'Театр' },
+  { src: 'images/photo_10.jpg', alt: 'Пенная вечеринка на улице' },
-  { emoji: '🚴', from: '#0891b2', to: '#a5f3fc', alt: 'Велопрогулка' },
+  { src: 'images/photo_11.jpg', alt: 'Юный шахматист' },
-  { emoji: '⭐', from: '#facc15', to: '#fef08a', alt: 'Вечернее небо' },
+  { src: 'images/photo_12.jpg', alt: 'Фоторамка у озера' },
-  { emoji: '🏐', from: '#2563eb', to: '#bfdbfe', alt: 'Волейбол' },
+  { src: 'images/photo_13.jpg', alt: 'Телефонная будка во дворе' },
-  { emoji: '🎤', from: '#db2777', to: '#fbcfe8', alt: 'Дискотека' },
-  { emoji: '🦅', from: '#475569', to: '#cbd5e1', alt: 'Символ лагеря' },
-  { emoji: '🍉', from: '#dc2626', to: '#86efac', alt: 'Полдник' },
 ];
 
 // ========== HELPERS ==========
@@ -98,11 +95,9 @@ function renderShifts(shifts) {
 function renderGallery() {
   const grid = $('#gallery-grid');
   grid.innerHTML = GALLERY_ITEMS.map((g, i) => `
-    <div class="gallery__item" data-i="${i}"
+    <button class="gallery__item" data-i="${i}" aria-label="${g.alt}">
-         style="background: linear-gradient(135deg, ${g.from}, ${g.to});"
+      <img src="${g.src}" alt="${g.alt}" loading="lazy" />
-         aria-label="${g.alt}">
+    </button>
-      ${g.emoji}
-    </div>
   `).join('');
 
   grid.addEventListener('click', (e) => {
@@ -110,18 +105,18 @@ function renderGallery() {
     if (!item) return;
     const g = GALLERY_ITEMS[Number(item.dataset.i)];
     const lb = $('#lightbox-img');
-    lb.style.background = `linear-gradient(135deg, ${g.from}, ${g.to})`;
+    lb.innerHTML = `<img src="${g.src}" alt="${g.alt}" />`;
-    lb.textContent = g.emoji;
+    $('#lightbox').classList.add('is-open');
-    $('#lightbox').hidden = false;
   });
 }
 
 // ========== LIGHTBOX ==========
 function initLightbox() {
   const lb = $('#lightbox');
-  $('#lightbox-close').addEventListener('click', () => { lb.hidden = true; });
+  const close = () => lb.classList.remove('is-open');
-  lb.addEventListener('click', (e) => { if (e.target === lb) lb.hidden = true; });
+  $('#lightbox-close').addEventListener('click', close);
-  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') lb.hidden = true; });
+  lb.addEventListener('click', (e) => { if (e.target === lb) close(); });
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(); });
 }
 
 // ========== BURGER MENU ==========

style.css

@@ -74,8 +74,8 @@ img { max-width: 100%; display: block; }
 .hero__bg {
   position: absolute; inset: 0;
   background:
-    linear-gradient(135deg, rgba(255,107,53,0.85) 0%, rgba(0,170,255,0.75) 100%),
+    linear-gradient(135deg, rgba(255,107,53,0.65) 0%, rgba(0,170,255,0.55) 100%),
-    radial-gradient(circle at 30% 40%, #ffd166 0%, transparent 50%),
+    url('images/photo_08.jpg') center / cover no-repeat,
     linear-gradient(180deg, #4a90e2 0%, #2c5282 100%);
   z-index: -1;
 }
@@ -102,18 +102,9 @@ img { max-width: 100%; display: block; }
 .about__points li { padding: 8px 0; font-size: 1.05rem; }
 .about__photo {
   height: 360px; border-radius: 20px;
-  background:
+  background: url('images/photo_05.jpg') center / cover no-repeat;
-    linear-gradient(135deg, rgba(255,107,53,0.3), rgba(0,170,255,0.3)),
-    repeating-linear-gradient(45deg, #fef3c7, #fef3c7 20px, #fde68a 20px, #fde68a 40px);
-  position: relative;
   box-shadow: var(--shadow);
 }
-.about__photo::before {
-  content: '👨‍👩‍👧‍👦';
-  position: absolute; inset: 0;
-  display: flex; align-items: center; justify-content: center;
-  font-size: 6rem;
-}
 
 /* ========== SHIFTS ========== */
 .shifts {
@@ -175,10 +166,16 @@ img { max-width: 100%; display: block; }
   overflow: hidden;
   position: relative;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
-  display: flex; align-items: center; justify-content: center;
+  padding: 0;
-  font-size: 3rem;
+  border: none;
+  background: #e5e7eb;
+}
+.gallery__item img {
+  width: 100%; height: 100%; object-fit: cover; display: block;
+  transition: transform 0.3s ease;
 }
 .gallery__item:hover { transform: scale(1.03); box-shadow: var(--shadow-hover); }
+.gallery__item:hover img { transform: scale(1.06); }
 
 /* ========== SIGNUP / FORM ========== */
 .signup { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: start; }
@@ -268,18 +265,22 @@ img { max-width: 100%; display: block; }
 .footer__nav a:hover { color: var(--orange); }
 
 /* ========== LIGHTBOX ========== */
-.lightbox[hidden] { display: none !important; }
 .lightbox {
+  display: none;
   position: fixed; inset: 0; z-index: 100;
   background: rgba(0,0,0,0.92);
-  display: flex; align-items: center; justify-content: center;
+  align-items: center; justify-content: center;
   padding: 20px;
 }
+.lightbox.is-open { display: flex; }
 .lightbox__img {
-  width: min(80vw, 600px); height: min(80vh, 600px);
+  width: min(90vw, 900px); max-height: 85vh;
-  border-radius: 16px;
   display: flex; align-items: center; justify-content: center;
-  font-size: 12rem;
+}
+.lightbox__img img {
+  max-width: 100%; max-height: 85vh;
+  border-radius: 12px; object-fit: contain;
+  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
 }
 .lightbox__close {
   position: absolute; top: 16px; right: 24px;