Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TripNav Andaman | Explore the Andaman Islands</title> | |
| <!-- Google Fonts for Modern Typography --> | |
| <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=Montserrat:wght@400;600;700;800&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| <!-- Font Awesome for Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| /* Andaman Theme Colors: Ocean Blue, Sandy White, Coral Accent */ | |
| --primary-color: #006994; /* Deep Ocean */ | |
| --primary-light: #008fb3; | |
| --accent-color: #ff6b6b; /* Coral Sunset */ | |
| --text-dark: #333333; | |
| --text-light: #666666; | |
| --bg-light: #f8f9fa; | |
| --white: #ffffff; | |
| --shadow: 0 4px 20px rgba(0,0,0,0.1); | |
| --transition: all 0.3s ease; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| color: var(--text-dark); | |
| background-color: var(--bg-light); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| h1, h2, h3, h4, h5 { | |
| font-family: 'Montserrat', sans-serif; | |
| font-weight: 700; | |
| color: var(--text-dark); | |
| } | |
| a { text-decoration: none; color: inherit; } | |
| ul { list-style: none; } | |
| /* --- Utility Classes --- */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| .btn { | |
| display: inline-block; | |
| padding: 12px 30px; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| text-align: center; | |
| border: none; | |
| } | |
| .btn-primary { | |
| background-color: var(--primary-color); | |
| color: var(--white); | |
| box-shadow: 0 4px 10px rgba(0, 105, 148, 0.3); | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--primary-light); | |
| transform: translateY(-2px); | |
| } | |
| .btn-outline { | |
| border: 2px solid var(--primary-color); | |
| color: var(--primary-color); | |
| background: transparent; | |
| } | |
| .btn-outline:hover { | |
| background-color: var(--primary-color); | |
| color: var(--white); | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 50px; | |
| } | |
| .section-title h2 { | |
| font-size: 2.5rem; | |
| margin-bottom: 10px; | |
| } | |
| .section-title p { | |
| color: var(--text-light); | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .hidden { display: none ; } | |
| .fade-in { animation: fadeIn 0.5s ease-in-out; } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* --- Navigation --- */ | |
| nav { | |
| background: var(--white); | |
| padding: 1rem 0; | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.05); | |
| } | |
| .nav-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: 1.8rem; | |
| font-weight: 800; | |
| color: var(--primary-color); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .logo i { color: var(--accent-color); } | |
| .nav-links { | |
| display: flex; | |
| gap: 30px; | |
| align-items: center; | |
| } | |
| .nav-item { | |
| font-weight: 500; | |
| color: var(--text-dark); | |
| cursor: pointer; | |
| transition: color 0.3s; | |
| } | |
| .nav-item:hover { color: var(--primary-color); } | |
| .nav-item.active { color: var(--primary-color); font-weight: 700; border-bottom: 2px solid var(--accent-color); padding-bottom: 5px; } | |
| .user-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| } | |
| .cart-icon { | |
| position: relative; | |
| cursor: pointer; | |
| font-size: 1.2rem; | |
| } | |
| .cart-count { | |
| position: absolute; | |
| top: -8px; | |
| right: -10px; | |
| background: var(--accent-color); | |
| color: white; | |
| font-size: 0.7rem; | |
| width: 18px; | |
| height: 18px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .auth-btn { | |
| font-size: 0.9rem; | |
| padding: 8px 20px; | |
| } | |
| /* --- Hero Section --- */ | |
| .hero { | |
| position: relative; | |
| height: 80vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| color: var(--white); | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; width: 100%; height: 100%; | |
| background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7)); | |
| z-index: 1; | |
| } | |
| .hero-bg { | |
| position: absolute; | |
| top: 0; left: 0; width: 100%; height: 100%; | |
| background: url('https://images.unsplash.com/photo-1518199266791-5375a83190b7?q=80&w=2070&auto=format&fit=crop') no-repeat center center/cover; | |
| z-index: 0; | |
| } | |
| .hero-content { | |
| position: relative; | |
| z-index: 2; | |
| max-width: 800px; | |
| padding: 20px; | |
| } | |
| .hero h1 { | |
| font-size: 4rem; | |
| margin-bottom: 20px; | |
| line-height: 1.1; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.5); | |
| } | |
| .hero p { | |
| font-size: 1.5rem; | |
| margin-bottom: 40px; | |
| opacity: 0.9; | |
| } | |
| .search-bar { | |
| background: var(--white); | |
| padding: 20px; | |
| border-radius: 50px; | |
| display: flex; | |
| gap: 20px; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.2); | |
| } | |
| .search-item { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .search-label { font-size: 0.8rem; color: var(--text-light); margin-bottom: 5px; font-weight: 600; } | |
| .search-input { padding: 10px; border: 1px solid #ddd; border-radius: 8px; font-family: inherit; } | |
| /* --- Categories --- */ | |
| .categories { | |
| padding: 80px 0; | |
| background: var(--white); | |
| } | |
| .category-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 30px; | |
| } | |
| .category-card { | |
| position: relative; | |
| height: 300px; | |
| border-radius: 20px; | |
| overflow: hidden; | |
| cursor: pointer; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| } | |
| .category-card:hover { transform: translateY(-10px); } | |
| .category-img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.5s; | |
| } | |
| .category-card:hover .category-img { transform: scale(1.1); } | |
| .category-overlay { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| padding: 30px; | |
| background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); | |
| color: var(--white); | |
| } | |
| /* --- Packages Section --- */ | |
| .packages-section { | |
| padding: 80px 0; | |
| background: var(--bg-light); | |
| } | |
| .packages-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); | |
| gap: 40px; | |
| } | |
| .package-card { | |
| background: var(--white); | |
| border-radius: 20px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .package-card:hover { box-shadow: 0 10px 40px rgba(0,0,0,0.15); } | |
| .package-img { | |
| height: 220px; | |
| width: 100%; | |
| object-fit: cover; | |
| } | |
| .package-content { | |
| padding: 25px; | |
| flex-grow: 1; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .package-tag { | |
| background: #e0f7fa; | |
| color: var(--primary-color); | |
| padding: 5px 10px; | |
| border-radius: 20px; | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| width: fit-content; | |
| margin-bottom: 15px; | |
| } | |
| .package-title { font-size: 1.5rem; margin-bottom: 10px; } | |
| .package-rating { color: #f1c40f; margin-bottom: 10px; font-size: 0.9rem; } | |
| .package-desc { color: var(--text-light); font-size: 0.95rem; margin-bottom: 20px; flex-grow: 1; } | |
| .package-footer { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-top: 1px solid #eee; | |
| padding-top: 20px; | |
| margin-top: auto; | |
| } | |
| .price { font-size: 1.5rem; font-weight: 800; color: var(--primary-color); } | |
| .price span { font-size: 1rem; color: var(--text-light); font-weight: 400; } | |
| /* --- Package Details Modal/Overlay --- */ | |
| .detail-overlay { | |
| position: fixed; | |
| top: 0; left: 0; width: 100%; height: 100%; | |
| background: rgba(0,0,0,0.8); | |
| z-index: 2000; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 20px; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s; | |
| } | |
| .detail-overlay.active { opacity: 1; pointer-events: all; } | |
| .detail-content { | |
| background: var(--white); | |
| width: 100%; | |
| max-width: 900px; | |
| max-height: 90vh; | |
| border-radius: 20px; | |
| overflow-y: auto; | |
| position: relative; | |
| animation: slideUp 0.4s ease; | |
| } | |
| @keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } | |
| .close-detail { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| background: var(--white); | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| z-index: 10; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.2); | |
| } | |
| .detail-header { position: relative; height: 400px; } | |
| .detail-img { width: 100%; height: 100%; object-fit: cover; } | |
| .detail-badge { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| background: var(--white); | |
| padding: 10px 20px; | |
| border-radius: 30px; | |
| font-weight: 700; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.2); | |
| } | |
| .detail-body { padding: 40px; } | |
| .detail-header-info { margin-bottom: 30px; } | |
| .detail-header-info h2 { font-size: 2.5rem; margin-bottom: 10px; } | |
| .detail-meta { display: flex; gap: 20px; color: var(--text-light); font-size: 0.9rem; } | |
| .meta-item { display: flex; align-items: center; gap: 5px; } | |
| .itinerary-section { margin: 30px 0; } | |
| .itinerary-item { display: flex; gap: 20px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; } | |
| .day-tag { background: var(--primary-color); color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; } | |
| .booking-section { background: #f8f9fa; padding: 30px; border-radius: 15px; margin-top: 40px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; } | |
| .total-price { font-size: 2rem; font-weight: 800; color: var(--primary-color); } | |
| /* --- Dashboard & Admin Tables --- */ | |
| .dashboard-container { padding: 60px 0; } | |
| .dashboard-header { margin-bottom: 40px; } | |
| .table-container { | |
| background: var(--white); | |
| border-radius: 15px; | |
| box-shadow: var(--shadow); | |
| overflow: hidden; | |
| } | |
| table { width: 100%; border-collapse: collapse; } | |
| th, td { padding: 20px; text-align: left; border-bottom: 1px solid #eee; } | |
| th { background-color: #f8f9fa; font-weight: 700; color: var(--text-dark); } | |
| tr:hover { background-color: #f8f9fa; } | |
| .status-badge { padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; } | |
| .status-upcoming { background: #d4edda; color: #155724; } | |
| .status-completed { background: #e2e3e5; color: #383d41; } | |
| .status-pending { background: #fff3cd; color: #856404; } | |
| /* --- Admin Panel --- */ | |
| .admin-panel { display: flex; gap: 30px; } | |
| .admin-sidebar { width: 250px; background: var(--white); padding: 20px; border-radius: 15px; box-shadow: var(--shadow); height: fit-content; } | |
| .admin-sidebar ul li { padding: 15px; cursor: pointer; border-radius: 10px; transition: 0.3s; margin-bottom: 5px; } | |
| .admin-sidebar ul li:hover, .admin-sidebar ul li.active { background: var(--primary-color); color: white; } | |
| .admin-main { flex: 1; } | |
| .form-group { margin-bottom: 20px; } | |
| .form-group label { display: block; margin-bottom: 8px; font-weight: 600; } | |
| .form-control { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-family: inherit; } | |
| .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } | |
| .action-btn { padding: 10px 20px; border-radius: 8px; cursor: pointer; border: none; font-weight: 600; } | |
| .btn-save { background: var(--primary-color); color: white; } | |
| .btn-delete { background: var(--accent-color); color: white; } | |
| /* --- Footer --- */ | |
| footer { | |
| background: #2c3e50; | |
| color: #ecf0f1; | |
| padding: 60px 0 20px; | |
| } | |
| .footer-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 40px; | |
| margin-bottom: 40px; | |
| } | |
| .footer-col h3 { margin-bottom: 20px; color: var(--accent-color); } | |
| .footer-col ul li { margin-bottom: 10px; } | |
| .footer-col ul li a { color: #bdc3c7; transition: 0.3s; } | |
| .footer-col ul li a:hover { color: var(--white); } | |
| .copyright { | |
| text-align: center; | |
| padding-top: 20px; | |
| border-top: 1px solid #34495e; | |
| font-size: 0.9rem; | |
| color: #bdc3c7; | |
| } | |
| .copyright a { color: var(--accent-color); text-decoration: underline; } | |
| /* --- Responsive --- */ | |
| @media (max-width: 768px) { | |
| .hero h1 { font-size: 2.5rem; } | |
| .nav-links { display: none; } /* Simple hide for mobile in this demo, would need hamburger menu in production */ | |
| .user-actions { gap: 10px; } | |
| .search-bar { flex-direction: column; } | |
| .form-row { grid-template-columns: 1fr; } | |
| .detail-overlay { padding: 10px; } | |
| .detail-content { max-height: 95vh; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav> | |
| <div class="container nav-container"> | |
| <a href="#" class="logo" onclick="app.navigate('home')"> | |
| <i class="fa-solid fa-island-tropical"></i> TripNav Andaman | |
| </a> | |
| <ul class="nav-links"> | |
| <li class="nav-item active" onclick="app.navigate('home')">Home</li> | |
| <li class="nav-item" onclick="app.navigate('packages')">Packages</li> | |
| <li class="nav-item" onclick="app.navigate('dashboard')">My Trips</li> | |
| <li class="nav-item" onclick="app.navigate('admin')">Admin</li> | |
| </ul> | |
| <div class="user-actions"> | |
| <div class="cart-icon" onclick="alert('This is a demo cart feature!')"> | |
| <i class="fa-solid fa-cart-shopping"></i> | |
| <span class="cart-count" id="cartCount">0</span> | |
| </div> | |
| <button class="btn auth-btn" onclick="app.toggleAuth()">Login / Sign Up</button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content Area --> | |
| <main id="main-content"> | |
| <!-- Content injected via JS --> | |
| </main> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-grid"> | |
| <div class="footer-col"> | |
| <h3>TripNav Andaman</h3> | |
| <p>Your trusted partner for unforgettable experiences in the Andaman Islands. Curated adventures, luxury stays, and cultural immersion.</p> | |
| </div> | |
| <div class="footer-col"> | |
| <h3>Quick Links</h3> | |
| <ul> | |
| <li><a href="#" onclick="app.navigate('home')">Home</a></li> | |
| <li><a href="#" onclick="app.navigate('packages')">Book a Tour</a></li> | |
| <li><a href="#">Contact Us</a></li> | |
| <li><a href="#">FAQs</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-col"> | |
| <h3>Categories</h3> | |
| <ul> | |
| <li><a href="#" onclick="app.filterPackages('water-sports')">Water Sports</a></li> | |
| <li><a href="#" onclick="app.filterPackages('cultural')">Cultural Tours</a></li> | |
| <li><a href="#" onclick="app.filterPackages('luxury')">Luxury Escapes</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-col"> | |
| <h3>Contact</h3> | |
| <ul> | |
| <li><i class="fa-solid fa-phone" style="color: var(--accent-color); margin-right: 10px;"></i> +91 8888 123 456</li> | |
| <li><i class="fa-solid fa-envelope" style="color: var(--accent-color); margin-right: 10px;"></i> support@tripnavandaman.com</li> | |
| <li><i class="fa-solid fa-location-dot" style="color: var(--accent-color); margin-right: 10px;"></i> Port Blair, Andaman</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="copyright"> | |
| © 2023 TripNav Andaman. All Rights Reserved. <br> | |
| Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: var(--accent-color);">anycoder</a> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Package Detail Modal --> | |
| <div id="packageDetailModal" class="detail-overlay" onclick="if(event.target === this) app.closeDetail()"> | |
| <div class="detail-content"> | |
| <div class="close-detail" onclick="app.closeDetail()"> | |
| <i class="fa-solid fa-xmark"></i> | |
| </div> | |
| <div id="detailContentContainer"> | |
| <!-- Content injected via JS --> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |