Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tarist - Local Experiences</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/styles-1.css') }}"> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/explore_style.css') }}"> | |
| <script src="{{ url_for('static', filename='js/auth.js') }}" defer></script> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const isLoggedIn = sessionStorage.getItem('tarist_session_active') === 'true'; | |
| // 1. Popup Logic (2 minutes) | |
| setTimeout(() => { | |
| const stillLoggedOut = sessionStorage.getItem('tarist_session_active') !== 'true'; | |
| if (stillLoggedOut) { | |
| const popup = document.getElementById('auth-popup'); | |
| if (popup) popup.style.display = 'flex'; | |
| } | |
| }, 120000); | |
| // 2. Stats Card Logic | |
| const statsCard = document.getElementById('user-stats-card'); | |
| if (isLoggedIn) { | |
| statsCard.style.display = 'flex'; // Show if logged in | |
| // Sync numbers | |
| const tripCount = sessionStorage.getItem('tarist_trip_count') || '0'; | |
| document.getElementById('card-trip-count').innerText = tripCount; | |
| // Mock "Places" count (e.g., trips * 3 + random) or store separate | |
| // For now, let's keep it static-ish or derive it to show it's "real" | |
| // Simple logic: Trips * 4 | |
| document.getElementById('card-place-count').innerText = parseInt(tripCount) * 4; | |
| } else { | |
| statsCard.style.display = 'none'; // Hide if not logged in | |
| } | |
| }); | |
| </script> | |
| <!-- PWA Setup --> | |
| <link rel="manifest" href="/manifest.json"> | |
| <meta name="theme-color" content="#d4af37"> | |
| <link rel="apple-touch-icon" href="/static/images/hero2.jpg"> | |
| <script> | |
| if ('serviceWorker' in navigator) { | |
| window.addEventListener('load', () => { | |
| navigator.serviceWorker.register('/sw.js') | |
| .then(reg => console.log('ServiceWorker registered')) | |
| .catch(err => console.log('ServiceWorker registration failed: ', err)); | |
| }); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <!-- Navbar --> | |
| <nav class="navbar-landingpage"> | |
| <div class="logo-navbar"> | |
| <img src="{{ url_for('static', filename='images/tarist-logo.jpg') }}" alt="Tarist Logo" class="logo-image"> | |
| </div> | |
| <!-- Mobile Menu Toggle --> | |
| <input type="checkbox" id="nav-toggle" class="nav-toggle"> | |
| <label for="nav-toggle" class="nav-toggle-label"> | |
| <span></span> | |
| </label> | |
| <div class="nav-links"> | |
| <a href="{{ url_for('how_it_works') }}" class="nav-item">How It Works</a> | |
| <a href="{{ url_for('explore') }}" class="nav-item active">Local Experiences</a> | |
| <a href="{{ url_for('about') }}" class="nav-item">About Tarist</a> | |
| <div class="mobile-auth-links auth-buttons"> | |
| <!-- Dynamic Auth via auth.js --> | |
| </div> | |
| </div> | |
| <div class="auth-buttons"> | |
| <!-- Dynamic Auth via auth.js --> | |
| </div> | |
| </nav> | |
| <!-- Auth Requirement Popup --> | |
| <div id="auth-popup" class="popup-overlay" style="display: none;"> | |
| <div class="popup-content"> | |
| <h2>Join the Experience!</h2> | |
| <p>You've been exploring for a while. Sign up to book trips and see more details.</p> | |
| <div class="popup-actions"> | |
| <a href="{{ url_for('login') }}" class="login-btn">Log In</a> | |
| <a href="{{ url_for('signup') }}" class="signup-btn">Sign Up</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="explore-container"> | |
| <!-- Welcome Header --> | |
| <header class="explore-header"> | |
| <h1>Ahlan, User!</h1> | |
| <div class="stats-card" id="user-stats-card" style="display: none;"> <!-- Hidden by default --> | |
| <div class="stat-item"> | |
| <span class="stat-number" id="card-trip-count">0</span> | |
| <span class="stat-label">Trips</span> | |
| </div> | |
| <div class="stat-item"> | |
| <span class="stat-number" id="card-place-count">0</span> | |
| <span class="stat-label">Places</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Search/Filter Bar --> | |
| <div class="filter-bar"> | |
| <button class="filter-btn active">All</button> | |
| <button class="filter-btn">Historical</button> | |
| <button class="filter-btn">Cultural</button> | |
| <button class="filter-btn">Food</button> | |
| <button class="filter-btn">Adventure</button> | |
| </div> | |
| <h2 class="section-title">Experiences</h2> | |
| <!-- Experiences Grid --> | |
| <!-- Experiences Grid --> | |
| <div class="experiences-grid"> | |
| {% for experience in experiences %} | |
| <div class="experience-card" | |
| onclick="window.location.href='{{ url_for('experience_details', id=experience.id) }}'"> | |
| <div class="card-image" | |
| style="background-image: url('{{ url_for('static', filename='images/' + experience.image) }}'); background-size: cover; background-position: center;"> | |
| </div> | |
| <div class="card-content"> | |
| <div class="card-price">{{ experience.duration }}</div> | |
| <h3>{{ experience.title }}</h3> | |
| <div class="card-meta"> | |
| <span>{{ experience.category }}</span> | |
| <span>{{ experience.rating }}</span> | |
| </div> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| <!-- Taribot AI --> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/ai_button.css') }}"> | |
| <script src="{{ url_for('static', filename='js/ai_chat.js') }}" defer></script> | |
| </body> | |
| </html> |