Hugging Face's logo

Spaces:
GMA2
/
start
Running

App Files Community
start / index.html
GMA2's picture
GMA2
Add 2 files
181e336 verified
Raw History Blame Contribute Delete
27.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Luxury Hero Section with Booking</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');
body {
 font-family: 'Poppins', sans-serif;
 overflow-x: hidden;
 }
.heading-font {
 font-family: 'Playfair Display', serif;
 }
.gold-gradient {
 background: linear-gradient(90deg, #D4AF37 0%, #F4D03F 50%, #D4AF37 100%);
 }
.navy-overlay {
 background: rgba(0, 21, 41, 0.7);
 }
.hero-image {
 background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
 background-size: cover;
 background-position: center;
 }
.scroll-down {
 animation: bounce 2s infinite;
 }
@keyframes bounce {
 0%, 20%, 50%, 80%, 100% {
 transform: translateY(0);
 }
 40% {
 transform: translateY(-10px);
 }
 60% {
 transform: translateY(-5px);
 }
 }
/* Calendar Modal Styles */
 .modal {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.7);
 z-index: 1000;
 overflow-y: auto;
 }
.modal-content {
 background-color: white;
 margin: 5% auto;
 padding: 2rem;
 border-radius: 0.5rem;
 width: 90%;
 max-width: 600px;
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 position: relative;
 }
.close-btn {
 position: absolute;
 top: 1rem;
 right: 1rem;
 font-size: 1.5rem;
 cursor: pointer;
 color: #666;
 }
.calendar {
 width: 100%;
 border-collapse: collapse;
 }
.calendar th {
 padding: 0.75rem;
 text-align: center;
 background-color: #f8f9fa;
 font-weight: 500;
 }
.calendar td {
 padding: 0.75rem;
 text-align: center;
 border: 1px solid #e9ecef;
 cursor: pointer;
 transition: all 0.2s;
 }
.calendar td:hover {
 background-color: #f1f3f5;
 }
.calendar td.selected {
 background-color: #D4AF37;
 color: white;
 font-weight: bold;
 }
.calendar td.disabled {
 color: #adb5bd;
 cursor: not-allowed;
 background-color: #f8f9fa;
 }
.time-slots {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
 gap: 0.5rem;
 margin-top: 1.5rem;
 }
.time-slot {
 padding: 0.5rem;
 border: 1px solid #e9ecef;
 border-radius: 0.25rem;
 text-align: center;
 cursor: pointer;
 transition: all 0.2s;
 }
.time-slot:hover, .time-slot.selected {
 background-color: #D4AF37;
 color: white;
 border-color: #D4AF37;
 }
.time-slot.disabled {
 color: #adb5bd;
 cursor: not-allowed;
 background-color: #f8f9fa;
 }
/* Partners Section Styles */
 .partners-section {
 background-color: #f8f9fa;
 padding: 4rem 0;
 position: relative;
 }
.partners-container {
 overflow: hidden;
 position: relative;
 width: 100%;
 max-width: 1200px;
 margin: 0 auto;
 }
.partners-title {
 text-align: center;
 margin-bottom: 2rem;
 font-size: 2rem;
 font-weight: 700;
 color: #2c3e50;
 }
.partners-track {
 display: flex;
 gap: 2rem;
 padding: 1rem 0;
 animation: scroll 30s linear infinite;
 width: calc(250px * 14); /* Number of partners * width */
 }
.partner-item {
 flex: 0 0 200px;
 height: 120px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: white;
 border-radius: 8px;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
 padding: 1rem;
 transition: transform 0.3s ease;
 }
.partner-item:hover {
 transform: translateY(-5px);
 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
 }
.partner-logo {
 max-width: 100%;
 max-height: 100%;
 object-fit: contain;
 filter: grayscale(100%);
 opacity: 0.7;
 transition: all 0.3s ease;
 }
.partner-item:hover .partner-logo {
 filter: grayscale(0%);
 opacity: 1;
 }
@keyframes scroll {
 0% {
 transform: translateX(0);
 }
 100% {
 transform: translateX(calc(-250px * 7)); /* Half of total width */
 }
 }
.partners-overlay {
 position: absolute;
 top: 0;
 bottom: 0;
 width: 100px;
 z-index: 2;
 }
.partners-overlay.left {
 left: 0;
 background: linear-gradient(to right, #f8f9fa, rgba(248, 249, 250, 0));
 }
.partners-overlay.right {
 right: 0;
 background: linear-gradient(to left, #f8f9fa, rgba(248, 249, 250, 0));
 }
@media (max-width: 640px) {
 .modal-content {
 margin: 2% auto;
 padding: 1rem;
 width: 95%;
 }
.calendar th, .calendar td {
 padding: 0.5rem;
 font-size: 0.875rem;
 }
.time-slots {
 grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
 }
.partners-title {
 font-size: 1.5rem;
 }
.partner-item {
 flex: 0 0 150px;
 height: 90px;
 }
.partners-track {
 gap: 1rem;
 animation: scroll 20s linear infinite;
 }
 }
 </style>
</head>
<body>
 <!-- Hero Section -->
 <section class="relative h-screen hero-image flex items-center justify-center">
 <!-- Overlay -->
 <div class="absolute inset-0 navy-overlay"></div>
<!-- Content Container -->
 <div class="relative z-10 container mx-auto px-6 text-center">
 <div class="max-w-4xl mx-auto">
 <!-- Tagline -->
 <div class="mb-4">
 <span class="inline-block px-4 py-2 text-sm font-semibold tracking-wider text-white bg-[#D4AF37] rounded-full">
 EXCLUSIVE COLLECTION
 </span>
 </div>
<!-- Main Heading -->
 <h1 class="heading-font text-5xl md:text-6xl lg:text-7xl font-bold text-white mb-6 leading-tight">
 Discover <span class="gold-gradient bg-clip-text text-transparent">Luxury</span> Living
 </h1>
<!-- Subheading -->
 <p class="text-lg md:text-xl text-gray-200 mb-10 max-w-2xl mx-auto">
 Experience unparalleled elegance with our premium collection of properties designed for those who appreciate the finer things in life.
 </p>
<!-- CTA Buttons -->
 <div class="flex flex-col sm:flex-row justify-center gap-4">
 <a href="#" class="px-8 py-4 bg-[#D4AF37] hover:bg-[#C4A030] text-white font-semibold rounded-lg transition duration-300 transform hover:scale-105">
 Explore Properties
 <i class="fas fa-arrow-right ml-2"></i>
 </a>
 <button id="scheduleTourBtn" class="px-8 py-4 bg-transparent border-2 border-white hover:bg-white hover:bg-opacity-10 text-white font-semibold rounded-lg transition duration-300">
 Schedule Tour
 </button>
 </div>
 </div>
<!-- Scroll Down Indicator -->
 <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 scroll-down">
 <a href="#partners" class="text-white">
 <i class="fas fa-chevron-down text-2xl"></i>
 </a>
 </div>
<!-- Decorative Elements -->
 <div class="absolute top-10 left-10 w-16 h-16 border-t-2 border-l-2 border-[#D4AF37] opacity-50"></div>
 <div class="absolute bottom-10 right-10 w-16 h-16 border-b-2 border-r-2 border-[#D4AF37] opacity-50"></div>
 </div>
 </section>
<!-- Partners Section -->
 <section id="partners" class="partners-section">
 <div class="container mx-auto px-6">
 <h2 class="partners-title">Our Valued Partners</h2>
 <div class="partners-container">
 <div class="partners-overlay left"></div>
 <div class="partners-overlay right"></div>
 <div class="partners-track">
 <!-- Partner logos will be duplicated for infinite scroll effect -->
 <div class="partner-item">
 <img src="https://duluthcivitanclub.org/wp-content/uploads/2022/06/logo.png" alt="Duluth Civitan Club" class="partner-logo">
 </div>
 <div class="partner-item">
 <img src="https://duluthcivitanclub.org/wp-content/uploads/2022/06/kiwanis-logo.png" alt="Kiwanis" class="partner-logo">
 </div>
 <div class="partner-item">
 <img src="https://duluthcivitanclub.org/wp-content/uploads/2022/06/rotary-logo.png" alt="Rotary" class="partner-logo">
 </div>
 <div class="partner-item">
 <img src="https://duluthcivitanclub.org/wp-content/uploads/2022/06/lions-logo.png" alt="Lions Club" class="partner-logo">
 </div>
 <div class="partner-item">
 <img src="https://duluthcivitanclub.org/wp-content/uploads/2022/06/optimist-logo.png" alt="Optimist Club" class="partner-logo">
 </div>
 <div class="partner-item">
 <img src="https://duluthcivitanclub.org/wp-content/uploads/2022/06/united-way-logo.png" alt="United Way" class="partner-logo">
 </div>
 <div class="partner-item">
 <img src="https://duluthcivitanclub.org/wp-content/uploads/2022/06/boys-girls-club-logo.png" alt="Boys & Girls Club" class="partner-logo">
 </div>
 <!-- Duplicate the partners for seamless infinite scroll -->
 <div class="partner-item">
 <img src="https://duluthcivitanclub.org/wp-content/uploads/2022/06/logo.png" alt="Duluth Civitan Club" class="partner-logo">
 </div>
 <div class="partner-item">
 <img src="https://duluthcivitanclub.org/wp-content/uploads/2022/06/kiwanis-logo.png" alt="Kiwanis" class="partner-logo">
 </div>
 <div class="partner-item">
 <img src="https://duluthcivitanclub.org/wp-content/uploads/2022/06/rotary-logo.png" alt="Rotary" class="partner-logo">
 </div>
 <div class="partner-item">
 <img src="https://duluthcivitanclub.org/wp-content/uploads/2022/06/lions-logo.png" alt="Lions Club" class="partner-logo">
 </div>
 <div class="partner-item">
 <img src="https://duluthcivitanclub.org/wp-content/uploads/2022/06/optimist-logo.png" alt="Optimist Club" class="partner-logo">
 </div>
 <div class="partner-item">
 <img src="https://duluthcivitanclub.org/wp-content/uploads/2022/06/united-way-logo.png" alt="United Way" class="partner-logo">
 </div>
 <div class="partner-item">
 <img src="https://duluthcivitanclub.org/wp-content/uploads/2022/06/boys-girls-club-logo.png" alt="Boys & Girls Club" class="partner-logo">
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Calendar Modal -->
 <div id="calendarModal" class="modal">
 <div class="modal-content">
 <span class="close-btn">&times;</span>
 <h2 class="text-2xl font-bold mb-6 text-gray-800">Schedule Your Tour</h2>
<div class="mb-6">
 <label class="block text-gray-700 mb-2">Select Date</label>
 <div class="overflow-x-auto">
 <table class="calendar">
 <thead>
 <tr>
 <th>Sun</th>
 <th>Mon</th>
 <th>Tue</th>
 <th>Wed</th>
 <th>Thu</th>
 <th>Fri</th>
 <th>Sat</th>
 </tr>
 </thead>
 <tbody id="calendarBody">
 <!-- Calendar will be generated by JavaScript -->
 </tbody>
 </table>
 </div>
 </div>
<div class="mb-6">
 <label class="block text-gray-700 mb-2">Available Time Slots</label>
 <div class="time-slots" id="timeSlots">
 <!-- Time slots will be generated by JavaScript -->
 </div>
 </div>
<div class="mb-6">
 <label class="block text-gray-700 mb-2">Your Information</label>
 <input type="text" id="nameInput" placeholder="Full Name" class="w-full px-4 py-2 mb-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#D4AF37]">
 <input type="email" id="emailInput" placeholder="Email Address" class="w-full px-4 py-2 mb-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#D4AF37]">
 <input type="tel" id="phoneInput" placeholder="Phone Number" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#D4AF37]">
 </div>
<button id="confirmBookingBtn" class="w-full py-3 bg-[#D4AF37] hover:bg-[#C4A030] text-white font-semibold rounded-lg transition duration-300">
 Confirm Booking
 </button>
 </div>
 </div>
<!-- Booking Confirmation Modal -->
 <div id="confirmationModal" class="modal">
 <div class="modal-content text-center">
 <span class="close-btn">&times;</span>
 <div class="mb-6 text-[#D4AF37]">
 <i class="fas fa-check-circle text-6xl"></i>
 </div>
 <h2 class="text-2xl font-bold mb-4 text-gray-800">Tour Scheduled Successfully!</h2>
 <p class="text-gray-600 mb-6" id="confirmationDetails"></p>
 <div class="mb-6">
 <button id="addToCalendarBtn" class="px-6 py-2 bg-[#D4AF37] hover:bg-[#C4A030] text-white font-semibold rounded-lg transition duration-300 mr-3">
 <i class="far fa-calendar-plus mr-2"></i> Add to Calendar
 </button>
 <button id="closeConfirmationBtn" class="px-6 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold rounded-lg transition duration-300">
 Close
 </button>
 </div>
 </div>
 </div>
<script>
 // Smooth scrolling for anchor links
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 anchor.addEventListener('click', function (e) {
 e.preventDefault();
 document.querySelector(this.getAttribute('href')).scrollIntoView({
 behavior: 'smooth'
 });
 });
 });
// Calendar functionality
 document.addEventListener('DOMContentLoaded', function() {
 const scheduleTourBtn = document.getElementById('scheduleTourBtn');
 const calendarModal = document.getElementById('calendarModal');
 const confirmationModal = document.getElementById('confirmationModal');
 const closeBtns = document.querySelectorAll('.close-btn');
 const calendarBody = document.getElementById('calendarBody');
 const timeSlots = document.getElementById('timeSlots');
 const confirmBookingBtn = document.getElementById('confirmBookingBtn');
 const addToCalendarBtn = document.getElementById('addToCalendarBtn');
 const closeConfirmationBtn = document.getElementById('closeConfirmationBtn');
 const confirmationDetails = document.getElementById('confirmationDetails');
let selectedDate = null;
 let selectedTime = null;
// Generate calendar
 function generateCalendar() {
 const today = new Date();
 const currentMonth = today.getMonth();
 const currentYear = today.getFullYear();
 const firstDay = new Date(currentYear, currentMonth, 1).getDay();
 const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
let date = 1;
 let html = '';
for (let i = 0; i < 6; i++) {
 // Stop if we've displayed all days
 if (date > daysInMonth) break;
html += '<tr>';
for (let j = 0; j < 7; j++) {
 if (i === 0 && j < firstDay) {
 html += '<td class="disabled"></td>';
 } else if (date > daysInMonth) {
 html += '<td class="disabled"></td>';
 } else {
 const currentDate = new Date(currentYear, currentMonth, date);
 const isPastDate = currentDate < new Date(today.getFullYear(), today.getMonth(), today.getDate());
 const isWeekend = j === 0 || j === 6;
if (isPastDate || isWeekend) {
 html += `<td class="disabled">${date}</td>`;
 } else {
 html += `<td data-date="${currentYear}-${currentMonth + 1}-${date}">${date}</td>`;
 }
 date++;
 }
 }
html += '</tr>';
 }
calendarBody.innerHTML = html;
// Add click event to calendar cells
 const calendarCells = document.querySelectorAll('#calendarBody td:not(.disabled)');
 calendarCells.forEach(cell => {
 cell.addEventListener('click', function() {
 // Remove selected class from all cells
 calendarCells.forEach(c => c.classList.remove('selected'));
// Add selected class to clicked cell
 this.classList.add('selected');
 selectedDate = this.getAttribute('data-date');
// Generate time slots for selected date
 generateTimeSlots();
 });
 });
 }
// Generate time slots
 function generateTimeSlots() {
 const slots = [
 '9:00 AM', '10:00 AM', '11:00 AM',
'1:00 PM', '2:00 PM', '3:00 PM', '4:00 PM'
 ];
let html = '';
 slots.forEach(slot => {
 // Randomly disable some slots for demo purposes
 const isDisabled = Math.random() < 0.3;
if (isDisabled) {
 html += `<div class="time-slot disabled">${slot}</div>`;
 } else {
 html += `<div class="time-slot" data-time="${slot}">${slot}</div>`;
 }
 });
timeSlots.innerHTML = html;
// Add click event to time slots
 const timeSlotElements = document.querySelectorAll('.time-slot:not(.disabled)');
 timeSlotElements.forEach(slot => {
 slot.addEventListener('click', function() {
 // Remove selected class from all slots
 timeSlotElements.forEach(s => s.classList.remove('selected'));
// Add selected class to clicked slot
 this.classList.add('selected');
 selectedTime = this.getAttribute('data-time');
 });
 });
 }
// Open calendar modal
 scheduleTourBtn.addEventListener('click', function() {
 calendarModal.style.display = 'block';
 generateCalendar();
 });
// Close modals
 closeBtns.forEach(btn => {
 btn.addEventListener('click', function() {
 calendarModal.style.display = 'none';
 confirmationModal.style.display = 'none';
 });
 });
// Close modal when clicking outside
 window.addEventListener('click', function(e) {
 if (e.target === calendarModal) {
 calendarModal.style.display = 'none';
 }
 if (e.target === confirmationModal) {
 confirmationModal.style.display = 'none';
 }
 });
// Confirm booking
 confirmBookingBtn.addEventListener('click', function() {
 const name = document.getElementById('nameInput').value;
 const email = document.getElementById('emailInput').value;
 const phone = document.getElementById('phoneInput').value;
if (!selectedDate || !selectedTime) {
 alert('Please select a date and time for your tour.');
 return;
 }
if (!name || !email || !phone) {
 alert('Please fill in all your information.');
 return;
 }
// Format the date for display
 const dateParts = selectedDate.split('-');
 const formattedDate = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]).toLocaleDateString('en-US', {
 weekday: 'long',
 month: 'long',
 day: 'numeric',
 year: 'numeric'
 });
// Show confirmation
 confirmationDetails.innerHTML = `
 Your tour is scheduled for <strong>${formattedDate} at ${selectedTime}</strong>.<br>
 We've sent a confirmation to <strong>${email}</strong>.
 `;
calendarModal.style.display = 'none';
 confirmationModal.style.display = 'block';
 });
// Add to calendar
 addToCalendarBtn.addEventListener('click', function() {
 // In a real app, this would generate an .ics file or use the Calendar API
 alert('This would add the event to your calendar in a real application.');
 });
// Close confirmation
 closeConfirmationBtn.addEventListener('click', function() {
 confirmationModal.style.display = 'none';
// Reset form
 selectedDate = null;
 selectedTime = null;
 document.getElementById('nameInput').value = '';
 document.getElementById('emailInput').value = '';
 document.getElementById('phoneInput').value = '';
// Clear selections
 document.querySelectorAll('.selected').forEach(el => {
 el.classList.remove('selected');
 });
 });
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=GMA2/start" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>