← back to Jill Website
views/gallery-demo.ejs
138 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery Demo - Nosara Beachfront Rentals</title>
<meta name="description" content="Responsive image gallery component demonstration with lazy loading and lightbox functionality.">
<!-- Google Fonts -->
<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=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Stylesheets -->
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/gallery.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="nav-container">
<div class="nav-logo">
<h2><a href="/" style="text-decoration: none; color: inherit;">Nosara Beachfront</a></h2>
</div>
<ul class="nav-menu">
<li><a href="/" class="nav-link">Home</a></li>
<li><a href="/#properties" class="nav-link">Properties</a></li>
<li><a href="/beaches" class="nav-link">Beaches</a></li>
<li><a href="/#contact" class="nav-link">Contact</a></li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero" style="background: linear-gradient(135deg, rgba(44, 95, 141, 0.6) 0%, rgba(22, 160, 133, 0.6) 100%),
url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=85&w=2400&auto=format&fit=crop&ixlib=rb-4.0.3'); background-size: cover; background-position: center;">
<div class="hero-content">
<div class="hero-text">
<h1 class="hero-title">Gallery Component Demo</h1>
<p class="hero-subtitle">Responsive, accessible image gallery with lazy loading and lightbox</p>
</div>
</div>
</section>
<!-- Gallery Demo Section -->
<section class="experiences" style="padding: 5rem 0;">
<div class="container">
<div class="section-header">
<h2>Nosara Beach Gallery</h2>
<p>Click any image to view in full-screen lightbox. Navigate with keyboard arrows or swipe on mobile.</p>
</div>
<% const galleryImages = [ { src: 'https://images.unsplash.com/photo-1559827260-dc66d52bef19?q=85&w=1200&auto=format&fit=crop', alt: 'Pristine beach with turquoise waters and golden sand', caption: 'Playa Guiones - The crown jewel of Nosara beaches' }, { src: 'https://images.unsplash.com/photo-1505142468610-359e7d316be0?q=85&w=1200&auto=format&fit=crop', alt: 'Surfer riding a wave at sunset', caption: 'World-class surf breaks perfect for all skill levels' }, { src: 'https://images.unsplash.com/photo-1473496169904-658ba7c44d8a?q=85&w=1200&auto=format&fit=crop', alt: 'Spectacular sunset over the Pacific Ocean', caption: 'Breathtaking sunsets every evening' }, { src: 'https://images.unsplash.com/photo-1544551763-46a013bb70d5?q=85&w=1200&auto=format&fit=crop', alt: 'Sea turtle swimming in crystal clear water', caption: 'Abundant marine life and wildlife encounters' }, { src: 'https://images.unsplash.com/photo-1520454974749-611b7248ffdb?q=85&w=1200&auto=format&fit=crop', alt: 'Tropical beach with palm trees', caption: 'Lush tropical paradise setting' }, { src: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=85&w=1200&auto=format&fit=crop', alt: 'Yoga on the beach at sunrise', caption: 'Perfect location for yoga and wellness' }, { src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=85&w=1200&auto=format&fit=crop', alt: 'Dramatic coastal landscape with mountains', caption: 'Stunning natural beauty and landscapes' }, { src: 'https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?q=85&w=1200&auto=format&fit=crop', alt: 'Beautiful beach panorama with clear sky', caption: 'Miles of pristine, uncrowded beaches' }, { src: 'https://images.unsplash.com/photo-1495954484750-af469f2f9be5?q=85&w=1200&auto=format&fit=crop', alt: 'Tropical wildlife in natural habitat', caption: 'Rich biodiversity and protected wildlife' } ]; %>
<%- include('partials/gallery', { images: galleryImages }) %>
</div>
</section>
<!-- Features Section -->
<section class="villas" style="background: var(--light); padding: 4rem 0;">
<div class="container">
<div class="section-header">
<h2>Gallery Features</h2>
<p>Built with modern web technologies and best practices</p>
</div>
<div class="villas-grid" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));">
<div class="villa-card" style="cursor: default;">
<div class="villa-content">
<div style="font-size: 3rem; margin-bottom: 1rem;">🖼️</div>
<h3>Lazy Loading</h3>
<p>Images load only when needed using Intersection Observer API for optimal performance.</p>
</div>
</div>
<div class="villa-card" style="cursor: default;">
<div class="villa-content">
<div style="font-size: 3rem; margin-bottom: 1rem;">🔍</div>
<h3>Lightbox View</h3>
<p>Click any image for full-screen viewing with smooth animations and transitions.</p>
</div>
</div>
<div class="villa-card" style="cursor: default;">
<div class="villa-content">
<div style="font-size: 3rem; margin-bottom: 1rem;">⌨️</div>
<h3>Keyboard Navigation</h3>
<p>Full keyboard support: Arrow keys to navigate, Escape to close lightbox.</p>
</div>
</div>
<div class="villa-card" style="cursor: default;">
<div class="villa-content">
<div style="font-size: 3rem; margin-bottom: 1rem;">📱</div>
<h3>Touch Gestures</h3>
<p>Swipe left/right on mobile devices to navigate between images naturally.</p>
</div>
</div>
<div class="villa-card" style="cursor: default;">
<div class="villa-content">
<div style="font-size: 3rem; margin-bottom: 1rem;">♿</div>
<h3>Accessibility</h3>
<p>ARIA labels, semantic HTML, screen reader support, and keyboard navigation.</p>
</div>
</div>
<div class="villa-card" style="cursor: default;">
<div class="villa-content">
<div style="font-size: 3rem; margin-bottom: 1rem;">📐</div>
<h3>Responsive Design</h3>
<p>Adapts seamlessly to all screen sizes from mobile phones to large desktop displays.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer style="background: var(--dark); color: white; padding: 2rem 0; text-align: center;">
<div class="container">
<p>© <%= currentYear %> Nosara Beachfront Rentals. All rights reserved.</p>
</div>
</footer>
<!-- Scripts -->
<script src="/js/main.js"></script>
<script src="/js/gallery.js"></script>
</body>
</html>