Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hooper Auto - Service Gallery</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| automotive: { | |
| 50: '#f3f4f6', | |
| 100: '#e5e7eb', | |
| 200: '#d1d5db', | |
| 300: '#9ca3af', | |
| 400: '#6b7280', | |
| 500: '#374151', | |
| 600: '#1f2937', | |
| 700: '#111827', | |
| 800: '#18181b', | |
| 900: '#0f0f10', | |
| }, | |
| accent: { | |
| red: '#e11d48', | |
| yellow: '#fbbf24', | |
| } | |
| }, | |
| fontFamily: { | |
| 'body': ['Inter', 'Arial', 'sans-serif'], | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { | |
| font-family: 'Inter', Arial, sans-serif; | |
| background: linear-gradient(135deg, #18181b 0%, #374151 100%); | |
| color: #f3f4f6; | |
| min-height: 100vh; | |
| margin: 0; | |
| } | |
| .novel-gallery { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); | |
| gap: 2.5rem 2rem; | |
| padding: 3rem 2vw 2rem 2vw; | |
| max-width: 1800px; | |
| margin: 0 auto; | |
| } | |
| .novel-card { | |
| position: relative; | |
| border-radius: 2rem; | |
| overflow: hidden; | |
| box-shadow: 0 12px 48px -12px #e11d48cc, 0 2px 16px #000a; | |
| background: linear-gradient(120deg, #374151 60%, #1f2937 100%); | |
| border: 4px solid #fbbf24; | |
| transition: box-shadow 0.3s, transform 0.3s, border 0.3s; | |
| cursor: pointer; | |
| } | |
| .novel-card:hover { | |
| box-shadow: 0 24px 80px -10px #e11d48cc, 0 2px 24px #000a; | |
| border: 4px solid #e11d48; | |
| transform: scale(1.04) rotate(-1deg); | |
| z-index: 2; | |
| } | |
| .novel-img { | |
| width: 100%; | |
| height: 420px; | |
| object-fit: cover; | |
| border-radius: 2rem 2rem 0 0; | |
| transition: filter 0.3s, transform 0.3s; | |
| filter: grayscale(10%) brightness(0.98) contrast(1.08); | |
| } | |
| .novel-card:hover .novel-img { | |
| filter: grayscale(0%) brightness(1.05) contrast(1.12) drop-shadow(0 8px 32px #e11d48cc); | |
| transform: scale(1.06); | |
| } | |
| .novel-caption { | |
| padding: 1.1rem 1.5rem 1.2rem 1.5rem; | |
| font-size: 1.18rem; | |
| color: #fbbf24; | |
| background: linear-gradient(90deg, #1f2937 60%, #374151 100%); | |
| border-radius: 0 0 2rem 2rem; | |
| text-align: center; | |
| font-weight: 700; | |
| letter-spacing: 0.01em; | |
| box-shadow: 0 2px 12px #0002; | |
| } | |
| .novel-full { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(24, 24, 27, 0.97); | |
| z-index: 1000; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: opacity 0.3s; | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .novel-full.active { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| .novel-full img { | |
| max-width: 92vw; | |
| max-height: 88vh; | |
| border-radius: 2.5rem; | |
| box-shadow: 0 8px 64px #e11d48cc, 0 2px 24px #000a; | |
| background: #374151; | |
| animation: popin 0.3s cubic-bezier(.4, 2, .6, 1); | |
| } | |
| @keyframes popin { | |
| from { | |
| transform: scale(0.92); | |
| opacity: 0.5; | |
| } | |
| to { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| } | |
| .novel-close { | |
| position: absolute; | |
| top: 2.5vw; | |
| right: 2.5vw; | |
| font-size: 2.5rem; | |
| color: #e11d48; | |
| background: rgba(55, 65, 81, 0.7); | |
| border: none; | |
| border-radius: 1.5rem; | |
| padding: 0.2em 0.7em 0.2em 0.7em; | |
| cursor: pointer; | |
| z-index: 1100; | |
| box-shadow: 0 2px 12px #0002; | |
| transition: background 0.2s, color 0.2s; | |
| } | |
| .novel-close:hover { | |
| background: #fbbf24; | |
| color: #374151; | |
| } | |
| @media (max-width: 700px) { | |
| .novel-gallery { | |
| grid-template-columns: 1fr; | |
| padding: 1.2rem 0.5rem; | |
| } | |
| .novel-img { | |
| height: 220px; | |
| } | |
| .novel-caption { | |
| font-size: 1rem; | |
| padding: 0.7rem 0.7rem 0.9rem 0.7rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header | |
| class="py-4 px-4 flex justify-between items-center bg-gradient-to-r from-automotive-700 via-automotive-600 to-automotive-900 shadow-xl sticky top-0 z-50 border-b-4 border-accent-red"> | |
| <h1 class="text-3xl font-extrabold text-accent-red tracking-tight drop-shadow">Hooper Automotive LLC Service | |
| Gallery</h1> | |
| <div class="flex items-center gap-4"> | |
| <a href="index.html" | |
| class="text-accent-yellow font-bold text-lg hover:text-accent-red transition-colors">Home</a> | |
| <span class="ml-4 text-automotive-100 text-sm">2020 4th Street South, Wisconsin Rapids, WI • (715) | |
| 421-9792</span> | |
| </div> | |
| </header> | |
| <main> | |
| <div class="novel-gallery"> | |
| <div class="novel-card" | |
| data-img="https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?w=800&h=600&fit=crop&crop=center"> | |
| <img class="novel-img" | |
| src="https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?w=400&h=300&fit=crop&crop=center" | |
| alt="Auto Service Work" /> | |
| </div> | |
| <div class="novel-card" | |
| data-img="https://images.unsplash.com/photo-1632823469850-f4b0ce1f4262?w=800&h=600&fit=crop&crop=center"> | |
| <img class="novel-img" | |
| src="https://images.unsplash.com/photo-1632823469850-f4b0ce1f4262?w=400&h=300&fit=crop&crop=center" | |
| alt="Auto Service Work" /> | |
| </div> | |
| <div class="novel-card" | |
| data-img="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&h=600&fit=crop&crop=center"> | |
| <img class="novel-img" | |
| src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=400&h=300&fit=crop&crop=center" | |
| alt="Auto Service Work" /> | |
| </div> | |
| <div class="novel-card" | |
| data-img="https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?w=800&h=600&fit=crop&crop=center"> | |
| <img class="novel-img" | |
| src="https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?w=400&h=300&fit=crop&crop=center" | |
| alt="Auto Service Work" /> | |
| </div> | |
| <div class="novel-card" | |
| data-img="https://images.unsplash.com/photo-1625047509168-a7026f36de04?w=800&h=600&fit=crop&crop=center"> | |
| <img class="novel-img" | |
| src="https://images.unsplash.com/photo-1625047509168-a7026f36de04?w=400&h=300&fit=crop&crop=center" | |
| alt="Auto Service Work" /> | |
| </div> | |
| <div class="novel-card" | |
| data-img="https://images.unsplash.com/photo-1629810070755-751ac1db18b5?w=800&h=600&fit=crop&crop=center"> | |
| <img class="novel-img" | |
| src="https://images.unsplash.com/photo-1629810070755-751ac1db18b5?w=400&h=300&fit=crop&crop=center" | |
| alt="Auto Service Work" /> | |
| </div> | |
| <div class="novel-card" | |
| data-img="https://images.unsplash.com/photo-1606577924081-3b002c5e4d99?w=800&h=600&fit=crop&crop=center"> | |
| <img class="novel-img" | |
| src="https://images.unsplash.com/photo-1606577924081-3b002c5e4d99?w=400&h=300&fit=crop&crop=center" | |
| alt="Auto Service Work" /> | |
| </div> | |
| </div> | |
| <div class="novel-full" id="novelFull"> | |
| <button class="novel-close" id="novelClose" aria-label="Close Gallery">×</button> | |
| <img id="novelFullImg" src="" alt="Full Gallery Image" /> | |
| </div> | |
| </main> | |
| <script> | |
| // APT: Modular, algebraic gallery logic | |
| // x1 = all .novel-card elements, x2 = #novelFull, x3 = #novelFullImg, x4 = #novelClose | |
| // y = f(x1, x2, x3, x4) = interactive full-size modal gallery | |
| const x1 = document.querySelectorAll('.novel-card'); | |
| const x2 = document.getElementById('novelFull'); | |
| const x3 = document.getElementById('novelFullImg'); | |
| const x4 = document.getElementById('novelClose'); | |
| x1.forEach(card => { | |
| card.addEventListener('click', () => { | |
| x3.src = card.getAttribute('data-img'); | |
| x2.classList.add('active'); | |
| }); | |
| }); | |
| x4.addEventListener('click', () => { | |
| x2.classList.remove('active'); | |
| x3.src = ''; | |
| }); | |
| x2.addEventListener('click', (e) => { | |
| if (e.target === x2) { | |
| x2.classList.remove('active'); | |
| x3.src = ''; | |
| } | |
| }); | |
| // Keyboard close | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key === 'Escape') { | |
| x2.classList.remove('active'); | |
| x3.src = ''; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |