Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Qiddiya Smart Guide</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <link rel="stylesheet" href="/static/css/style.css" /> | |
| </head> | |
| <body> | |
| <div class="shell"> | |
| <div class="hero"> | |
| <div class="hero-left"> | |
| <div class="badge"> | |
| <span class="badge-dot"></span> | |
| LIVE PARK PLANNER | |
| </div> | |
| <h1> | |
| Qiddiya Smart Guide | |
| <span class="logo-pill">Multi‑Agent</span> | |
| </h1> | |
| <div class="hero-tagline"> | |
| Plan an intelligent day in Qiddiya City that balances queue time, walking, and pure enjoyment — | |
| powered by an offline multi‑agent engine and optional Groq narration. | |
| </div> | |
| <div class="hero-metrics"> | |
| <div class="metric-chip"> | |
| <span class="metric-dot"></span> Offline & deterministic | |
| </div> | |
| <div class="metric-chip"> | |
| <span class="metric-dot" style="background:#3fd5a1;"></span> 5 collaborating agents | |
| </div> | |
| <div class="metric-chip"> | |
| <span class="metric-dot" style="background:#66a0ff;"></span> Tool‑augmented routing | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hero-right"> | |
| <div class="map-card"> | |
| <div class="map-header"> | |
| <span style="font-weight:500;">Park Zones Map</span> | |
| <div class="map-legend"> | |
| <span class="legend-item"> | |
| <span class="legend-swatch" style="background:#66a0ff;"></span> Route | |
| </span> | |
| <span class="legend-item"> | |
| <span class="legend-swatch" style="background:#ffb347;"></span> Stop | |
| </span> | |
| </div> | |
| </div> | |
| <div class="map-svg-wrapper"> | |
| <svg id="park-map" viewBox="0 0 300 220"> | |
| <defs> | |
| <radialGradient id="bgGrad" cx="0.5" cy="0.4" r="1"> | |
| <stop offset="0%" stop-color="#0d3d4a"/> | |
| <stop offset="100%" stop-color="#0a1628"/> | |
| </radialGradient> | |
| <linearGradient id="pathBlue" x1="0" y1="0" x2="1" y2="0"> | |
| <stop offset="0%" stop-color="#7ec8e3"/> | |
| <stop offset="100%" stop-color="#9fd3ff"/> | |
| </linearGradient> | |
| <linearGradient id="pathGreen" x1="0" y1="0" x2="0" y2="1"> | |
| <stop offset="0%" stop-color="#8fdf9e"/> | |
| <stop offset="100%" stop-color="#7fd3a0"/> | |
| </linearGradient> | |
| </defs> | |
| <rect width="300" height="220" fill="url(#bgGrad)" rx="12"/> | |
| <!-- Pathway network (dashed lines like reference image) --> | |
| <g stroke-width="1.5" stroke-dasharray="4 5" fill="none" opacity="0.85"> | |
| <line x1="150" y1="110" x2="70" y2="55" stroke="url(#pathBlue)"/> | |
| <line x1="150" y1="110" x2="70" y2="165" stroke="url(#pathBlue)"/> | |
| <line x1="150" y1="110" x2="230" y2="65" stroke="url(#pathGreen)"/> | |
| <line x1="150" y1="110" x2="235" y2="165" stroke="url(#pathGreen)"/> | |
| <line x1="150" y1="110" x2="150" y2="195" stroke="url(#pathBlue)"/> | |
| <line x1="70" y1="55" x2="230" y2="65" stroke="url(#pathGreen)"/> | |
| <line x1="230" y1="65" x2="235" y2="165" stroke="url(#pathBlue)"/> | |
| <line x1="235" y1="165" x2="150" y2="195" stroke="url(#pathGreen)"/> | |
| <line x1="150" y1="195" x2="70" y2="165" stroke="url(#pathBlue)"/> | |
| <line x1="70" y1="165" x2="70" y2="55" stroke="url(#pathGreen)"/> | |
| </g> | |
| <!-- Junction nodes along paths --> | |
| <circle cx="110" cy="82" r="3" fill="#5a6b7a"/> | |
| <circle cx="190" cy="88" r="3" fill="#5a6b7a"/> | |
| <circle cx="232" cy="115" r="3" fill="#5a6b7a"/> | |
| <circle cx="192" cy="180" r="3" fill="#5a6b7a"/> | |
| <circle cx="110" cy="160" r="3" fill="#5a6b7a"/> | |
| <!-- Zones (styled like reference: circles with labels) --> | |
| <g data-node="HUB"> | |
| <circle cx="150" cy="110" r="24" fill="#0f2438" stroke="#9fd3ff" stroke-width="2.2"/> | |
| <circle cx="150" cy="110" r="12" fill="#1a3a52"/> | |
| <text x="150" y="106" fill="#e8f4fc" font-size="8" text-anchor="middle" font-weight="700">HUB</text> | |
| <text x="150" y="118" fill="#b8d4e8" font-size="6.5" text-anchor="middle">Entrance</text> | |
| </g> | |
| <g data-node="ZONE_FAMILY_N"> | |
| <circle cx="70" cy="55" r="18" fill="#162745" stroke="#7fd3ff" stroke-width="1.6"/> | |
| <text x="70" y="52" fill="#dce7ff" font-size="7.5" text-anchor="middle">Family</text> | |
| <text x="70" y="62" fill="#9fb5ff" font-size="6" text-anchor="middle">North</text> | |
| </g> | |
| <g data-node="ZONE_FAMILY_S"> | |
| <circle cx="70" cy="165" r="18" fill="#162745" stroke="#7fd3ff" stroke-width="1.6"/> | |
| <text x="70" y="162" fill="#dce7ff" font-size="7.5" text-anchor="middle">Family</text> | |
| <text x="70" y="172" fill="#9fb5ff" font-size="6" text-anchor="middle">South</text> | |
| </g> | |
| <g data-node="ZONE_THRILL"> | |
| <circle cx="230" cy="65" r="19" fill="#261633" stroke="#ff6b9c" stroke-width="1.8"/> | |
| <text x="230" y="62" fill="#ffe9f3" font-size="7.5" text-anchor="middle">Thrill</text> | |
| <text x="230" y="72" fill="#f9a5c9" font-size="6" text-anchor="middle">Mountain</text> | |
| </g> | |
| <g data-node="ZONE_WATER"> | |
| <circle cx="235" cy="165" r="18" fill="#153043" stroke="#66e0ff" stroke-width="1.8"/> | |
| <text x="235" y="162" fill="#e6fbff" font-size="7.5" text-anchor="middle">Water</text> | |
| <text x="235" y="172" fill="#b9f2ff" font-size="6" text-anchor="middle">Oasis</text> | |
| </g> | |
| <g data-node="ZONE_DINING"> | |
| <circle cx="150" cy="195" r="17" fill="#25233d" stroke="#ffd58a" stroke-width="1.6"/> | |
| <text x="150" y="192" fill="#fff2d4" font-size="7.5" text-anchor="middle">Dining</text> | |
| <text x="150" y="201" fill="#e8d9a8" font-size="6" text-anchor="middle">Court</text> | |
| </g> | |
| <g id="route-layer"></g> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="content"> | |
| <section class="panel"> | |
| <div class="panel-header"> | |
| <div> | |
| <div class="panel-title">Plan your visit</div> | |
| <div class="panel-sub">Tell Qiddiya Smart Guide how you like to explore.</div> | |
| </div> | |
| </div> | |
| <form id="plan-form" onsubmit="return false;"> | |
| <div class="form-grid"> | |
| <div> | |
| <label for="visit-date">Visit date</label> | |
| <input id="visit-date" type="text" placeholder="YYYY-MM-DD" value="2026-02-15" /> | |
| </div> | |
| <div> | |
| <label for="start-time">Start time</label> | |
| <input id="start-time" type="text" placeholder="10:00" value="10:00" /> | |
| </div> | |
| <div> | |
| <label for="end-time">End time</label> | |
| <input id="end-time" type="text" placeholder="20:00" value="20:00" /> | |
| </div> | |
| <div class="form-row-full"> | |
| <label for="must-do-select">Must‑do attractions</label> | |
| <select id="must-do-select"> | |
| <option value="">Select attraction</option> | |
| <option value="Family River Cruise">Family River Cruise</option> | |
| <option value="Sky Carousel">Sky Carousel</option> | |
| <option value="Falcon Coaster">Falcon Coaster</option> | |
| <option value="Desert Drop">Desert Drop</option> | |
| <option value="Oasis Rapids">Oasis Rapids</option> | |
| <option value="Wave Lagoon">Wave Lagoon</option> | |
| <option value="Qiddiya Dining Court">Qiddiya Dining Court</option> | |
| <option value="Sunset Plaza Show">Sunset Plaza Show</option> | |
| </select> | |
| <div class="chips" id="must-do-chips"></div> | |
| </div> | |
| <div> | |
| <label for="intensity-range">Intensity preference</label> | |
| <input id="intensity-range" type="range" min="1" max="5" step="1" value="3" /> | |
| <div class="slider-labels"> | |
| <span>Relaxed</span><span id="intensity-label">3</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="walking-range">Walking tolerance</label> | |
| <input id="walking-range" type="range" min="1" max="5" step="1" value="3" /> | |
| <div class="slider-labels"> | |
| <span>Short walks</span><span id="walking-label">3</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button type="button" id="plan-btn" class="primary-btn"> | |
| <span>Plan My Day</span> | |
| <span class="spinner" id="plan-spinner" style="display:none;"></span> | |
| </button> | |
| <div class="error-banner" id="error-banner"></div> | |
| </form> | |
| </section> | |
| <section class="panel"> | |
| <div class="panel-header"> | |
| <div> | |
| <div class="panel-title">Your itinerary</div> | |
| <div class="panel-sub">Fine‑tuned for queues, walking, and coverage.</div> | |
| </div> | |
| </div> | |
| <div class="metrics-grid"> | |
| <div class="metric-card"> | |
| <div class="metric-label">Total wait</div> | |
| <div class="metric-value" id="metric-wait">–</div> | |
| <div class="metric-bar"><div class="metric-bar-fill" id="bar-wait"></div></div> | |
| </div> | |
| <div class="metric-card"> | |
| <div class="metric-label">Total walking</div> | |
| <div class="metric-value" id="metric-walk">–</div> | |
| <div class="metric-bar"><div class="metric-bar-fill" id="bar-walk"></div></div> | |
| </div> | |
| <div class="metric-card"> | |
| <div class="metric-label">Enjoyment score (out of 10)</div> | |
| <div class="metric-value" id="metric-enjoyment">–</div> | |
| <div class="metric-bar"><div class="metric-bar-fill" id="bar-enjoy"></div></div> | |
| </div> | |
| </div> | |
| <div class="timeline" id="timeline"> | |
| <div class="empty-state"> | |
| Your step‑by‑step plan will appear here after you click <strong>Plan My Day</strong>. | |
| </div> | |
| </div> | |
| <div class="system-response-wrap" id="system-response-wrap" style="display:none;"> | |
| <button type="button" class="system-response-toggle" id="system-response-toggle" aria-expanded="false"> | |
| <span>▼</span> System response (logs, reflection, critique) | |
| </button> | |
| <div class="system-response-body" id="system-response-body"> | |
| <pre id="system-response-json"></pre> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| <script src="/static/js/app.js"></script> | |
| </body> | |
| </html> | |