From 852e448ef45f97182b492c87dd3f07834d495ac0 Mon Sep 17 00:00:00 2001 From: lars Date: Thu, 20 Aug 2026 16:57:32 +0200 Subject: [PATCH] Improved carrousel --- html/index.html | 836 +++++++++++++++++++++++++++++++++++------------- 1 file changed, 619 insertions(+), 217 deletions(-) diff --git a/html/index.html b/html/index.html index 21b44ad..e084914 100644 --- a/html/index.html +++ b/html/index.html @@ -1,256 +1,658 @@ - -1973 Jaguar E-Type Roadster - - - - - - - - + .carousel-track::-webkit-scrollbar { + display: none; + } + + .slide { + flex: 0 0 100%; + scroll-snap-align: start; + position: relative; + aspect-ratio: 16 / 9; + background-color: #000; + } + + .slide img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; + cursor: zoom-in; + } + + .slide-overlay { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 1.5rem 1.25rem 1rem; + background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent); + display: flex; + justify-content: space-between; + align-items: flex-end; + pointer-events: none; + } + + .slide-overlay h3 { + font-size: 1.15rem; + color: #fff; + font-weight: 500; + } + + .slide-counter { + color: var(--accent-gold); + font-weight: bold; + font-size: 0.9rem; + } + + /* Loading placeholder */ + .loading-state { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 350px; + color: var(--text-muted); + font-size: 1rem; + } + + /* Carousel Nav Arrows */ + .nav-btn { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 44px; + height: 44px; + background: rgba(13, 15, 18, 0.75); + border: 1px solid var(--border-color); + color: #fff; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + backdrop-filter: blur(4px); + transition: all 0.2s; + z-index: 5; + } + + .nav-btn:hover { + background: var(--accent-red); + border-color: var(--accent-red); + } + + .nav-btn.prev { left: 1rem; } + .nav-btn.next { right: 1rem; } + + /* Navigation Dots */ + .dots-nav { + display: flex; + justify-content: center; + gap: 8px; + padding: 1rem 0 0.5rem; + } + + .dot { + width: 10px; + height: 10px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.25); + cursor: pointer; + transition: all 0.2s; + } + + .dot.active { + background: var(--accent-gold); + transform: scale(1.25); + } + + /* Technical Specifications */ + .specs-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1rem; + margin-top: 2.5rem; + } + + .spec-card { + background: var(--bg-card); + padding: 1.25rem; + border-radius: 8px; + border: 1px solid var(--border-color); + } + + .spec-label { + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 1px; + color: var(--text-muted); + margin-bottom: 0.25rem; + } + + .spec-value { + font-size: 1.1rem; + font-weight: 600; + color: #fff; + } + + /* Key Features Box */ + .highlights-box { + background: var(--bg-card); + border-radius: 8px; + border: 1px solid var(--border-color); + padding: 1.5rem; + margin-top: 1.5rem; + } + + .highlights-box h2 { + font-size: 1.25rem; + color: var(--accent-gold); + margin-bottom: 1rem; + } + + .highlights-list { + list-style: none; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 0.75rem; + } + + .highlights-list li { + display: flex; + align-items: center; + gap: 0.5rem; + color: var(--text-main); + font-size: 0.95rem; + } + + .highlights-list li::before { + content: "✓"; + color: var(--accent-gold); + font-weight: bold; + } + + /* Contact Action Bar */ + .contact-section { + text-align: center; + background: linear-gradient(180deg, var(--bg-card), rgba(22, 27, 34, 0.5)); + border: 1px solid var(--border-color); + border-radius: 12px; + padding: 2.5rem 1.5rem; + margin-top: 2.5rem; + } + + .contact-section h2 { + font-size: 1.5rem; + color: #fff; + margin-bottom: 0.5rem; + } + + .btn-group { + display: flex; + justify-content: center; + gap: 1rem; + margin-top: 1.5rem; + flex-wrap: wrap; + } + + .btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.85rem 1.75rem; + border-radius: 6px; + font-weight: 600; + text-decoration: none; + transition: all 0.2s ease; + font-size: 0.95rem; + } + + .btn-phone { + background-color: var(--accent-gold); + color: #000; + } + + .btn-phone:hover { + background-color: #e5be48; + transform: translateY(-2px); + } + + .btn-whatsapp { + background-color: #25D366; + color: #fff; + } + + .btn-whatsapp:hover { + background-color: #20bd5a; + transform: translateY(-2px); + } + + /* Related Links */ + .links-section { + margin-top: 2.5rem; + } + + .links-section h3 { + font-size: 1.1rem; + color: var(--text-muted); + margin-bottom: 1rem; + text-transform: uppercase; + letter-spacing: 1px; + } + + .links-grid { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + } + + .external-link { + background: var(--bg-card); + border: 1px solid var(--border-color); + color: var(--text-main); + padding: 0.6rem 1rem; + border-radius: 6px; + text-decoration: none; + font-size: 0.85rem; + transition: border-color 0.2s, color 0.2s; + } + + .external-link:hover { + border-color: var(--accent-gold); + color: var(--accent-gold); + } + + /* Fullscreen Lightbox Modal */ + .lightbox { + display: none; + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.92); + z-index: 1000; + justify-content: center; + align-items: center; + } + + .lightbox.active { + display: flex; + } + + .lightbox img { + max-width: 90vw; + max-height: 90vh; + object-fit: contain; + border-radius: 4px; + } + + .lightbox-close { + position: absolute; + top: 20px; + right: 25px; + color: #fff; + font-size: 2rem; + cursor: pointer; + } + + footer { + text-align: center; + margin-top: 3rem; + color: var(--text-muted); + font-size: 0.8rem; + } + + @media (max-width: 768px) { + h1 { font-size: 1.8rem; } + .nav-btn { display: none; } + } + - -
-
-
-
-
+
+ + +
+ Private Classic Car Sale +

1973 Jaguar E-Type Roadster

+

Iconic British Classic • 5.3L V12 • Roadster

+
CHF 65'000
+
+ + +
+ + + +
-
-
+ + +
+ + +
+
+
Year
+
1973
+
+
+
Engine
+
5.3L V12
+
+
+
Transmission
+
Automatic
+
+
+
Exterior
+
Red
+
+
+
Body Style
+
Roadster
+
+
+
Condition
+
Very Good
+
-
-

{{ t.title }}

-

{{ t.subtitle }}

-
-
-
-

{{ t.overview }}

- {{ t.privateSeller }} -

{{ t.description }}

-
CHF 65'000
-
- -
-

{{ t.specs }}

-
-
{{ s }}
+ +
+

Vehicle Highlights & Details

+
    +
  • Removable Hardtop
    • +
  • Jaguar Heritage Certificate
    • +
  • US Import 1980
    • +
  • Swiss Technical Control (MFK)
    • +
-
-
-
-
-

{{ t.photos }}

-
- + +
+

Call the Owner

+

For direct inquiries, please call or text the owner:

+ +
+ + 📞 +41 79 375 8510 + + + 💬 Contact via WhatsApp + +
-
-
+ + +
+

Related Links & References

+
+ + Bring a Trailer – Jaguar E-Type Series III + + + Jaguar E-Type Documentary (YouTube) + + + Jaguar E-Type Review (YouTube) + +
+ +
+ © Private Classic Car Sale +
+
-
-
-
-

{{ t.links }}

-
- {{ l.label }} -
+ + -
-
-
-

{{ t.callTitle }}

-

{{ t.callText }}

- 📞 +41 79 375 8510 -
-
+ - - + function scrollToSlide(index) { + if (!slides.length) return; + if (index < 0) index = slides.length - 1; + if (index >= slides.length) index = 0; + + const slideWidth = slides[0].getBoundingClientRect().width; + track.scrollTo({ + left: slideWidth * index, + behavior: 'smooth' + }); + + updateActiveState(index); + currentIndex = index; + } + + function updateActiveState(activeIndex) { + dots.forEach((dot, idx) => { + dot.classList.toggle('active', idx === activeIndex); + }); + } + + function attachEventListeners() { + prevBtn.addEventListener('click', () => scrollToSlide(currentIndex - 1)); + nextBtn.addEventListener('click', () => scrollToSlide(currentIndex + 1)); + + dots.forEach(dot => { + dot.addEventListener('click', (e) => { + const index = parseInt(e.target.dataset.index); + scrollToSlide(index); + }); + }); + + let scrollTimeout; + track.addEventListener('scroll', () => { + clearTimeout(scrollTimeout); + scrollTimeout = setTimeout(() => { + const slideWidth = slides[0].getBoundingClientRect().width; + const newIndex = Math.round(track.scrollLeft / slideWidth); + if (newIndex !== currentIndex) { + currentIndex = newIndex; + updateActiveState(currentIndex); + } + }, 50); + }); + + // Lightbox click handler + slides.forEach(slide => { + const img = slide.querySelector('img'); + if (img) { + img.addEventListener('click', () => { + lightboxImg.src = img.src; + lightbox.classList.add('active'); + }); + } + }); + } + + lightboxClose.addEventListener('click', () => lightbox.classList.remove('active')); + lightbox.addEventListener('click', (e) => { + if (e.target === lightbox) lightbox.classList.remove('active'); + }); + + // Run gallery initialization + initGallery(); + +