DGCchat

Running

App Files Files Community

John2121 commited on Oct 6, 2025

Commit

8fe75bc

1 Parent(s): 0f1dd9b

chore: remove quick online quote button, update gallery to image-only, all recent changes

Browse files

Files changed (2) hide show

gallery.html +240 -0
index.html +0 -4

gallery.html ADDED Viewed

	@@ -0,0 +1,240 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>BuckRub Taxidermy - Novel 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>
+    <style>
+        body {
+            font-family: 'Inter', Georgia, serif;
+            background: linear-gradient(135deg, #0f4223 0%, #18392b 100%);
+            color: #f0fdf4;
+            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 #4ade80cc, 0 2px 16px #000a;
+            background: linear-gradient(120deg, #14532d 60%, #166534 100%);
+            transition: box-shadow 0.3s, transform 0.3s;
+            cursor: pointer;
+        }
+        .novel-card:hover {
+            box-shadow: 0 24px 80px -10px #facc15cc, 0 2px 24px #000a;
+            transform: scale(1.03) 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 #4ade80cc);
+            transform: scale(1.04);
+        }
+        .novel-caption {
+            padding: 1.1rem 1.5rem 1.2rem 1.5rem;
+            font-size: 1.18rem;
+            color: #f0fdf4;
+            background: linear-gradient(90deg, #166534 60%, #14532d 100%);
+            border-radius: 0 0 2rem 2rem;
+            text-align: center;
+            font-weight: 600;
+            letter-spacing: 0.01em;
+            box-shadow: 0 2px 12px #0002;
+        }
+        .novel-full {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(10, 30, 20, 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 #4ade80cc, 0 2px 24px #000a;
+            background: #18392b;
+            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: #facc15;
+            background: rgba(20, 40, 30, 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: #facc15;
+            color: #14532d;
+        }
+        @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-green-900/90 shadow-lg sticky top-0 z-50">
+        <h1 class="text-2xl font-bold text-green-200 tracking-tight">BuckRub Taxidermy Gallery</h1>
+        <a href="index.html" class="text-amber-400 font-bold text-lg hover:text-amber-300 transition-colors">Home</a>
+    </header>
+    <main>
+        <div class="novel-gallery">
+            <div class="novel-card"
+                data-img="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5360.jpg">
+                <img class="novel-img"
+                    src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5360.jpg"
+                    alt="Gallery Image" />
+            </div>
+            <div class="novel-card"
+                data-img="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5381.jpg">
+                <img class="novel-img"
+                    src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5381.jpg"
+                    alt="Gallery Image" />
+            </div>
+            <div class="novel-card"
+                data-img="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5386.jpg">
+                <img class="novel-img"
+                    src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5386.jpg"
+                    alt="Gallery Image" />
+            </div>
+            <div class="novel-card"
+                data-img="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5388.jpg">
+                <img class="novel-img"
+                    src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5388.jpg"
+                    alt="Gallery Image" />
+            </div>
+            <div class="novel-card"
+                data-img="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5398.jpg">
+                <img class="novel-img"
+                    src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5398.jpg"
+                    alt="Gallery Image" />
+            </div>
+            <div class="novel-card"
+                data-img="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5402.jpg">
+                <img class="novel-img"
+                    src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5402.jpg"
+                    alt="Gallery Image" />
+            </div>
+            <div class="novel-card"
+                data-img="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5403.jpg">
+                <img class="novel-img"
+                    src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5403.jpg"
+                    alt="Gallery Image" />
+            </div>
+        </div>
+        <div class="novel-full" id="novelFull">
+            <button class="novel-close" id="novelClose" aria-label="Close Gallery">&times;</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>

index.html CHANGED Viewed

@@ -167,10 +167,6 @@
                 class="inline-block bg-green-600 text-white px-8 py-4 rounded-2xl font-bold text-lg md:text-xl hover:bg-green-500 hover:scale-105 transition-all duration-200 shadow-lg mr-2 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2">
                 Get Instant Quote
             </a>
-            <a href="https://buckrubtaxidermy.s3.us-east-2.amazonaws.com/formsubmit-quote-form.html" target="_blank"
-                class="inline-block bg-amber-500 text-white px-8 py-4 rounded-2xl font-bold text-lg md:text-xl hover:bg-amber-400 hover:scale-105 transition-all duration-200 shadow-lg ml-2 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2">
-                Quick Online Quote (Email)
-            </a>
         </div>
     </section>
     <!-- Portfolio Grid (larger, more visual) -->

                 class="inline-block bg-green-600 text-white px-8 py-4 rounded-2xl font-bold text-lg md:text-xl hover:bg-green-500 hover:scale-105 transition-all duration-200 shadow-lg mr-2 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2">
                 Get Instant Quote
             </a>
         </div>
     </section>
     <!-- Portfolio Grid (larger, more visual) -->