Kerala Travel Planner

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_186":187,"_188":189},"routes/_app.x.$handle.$name",{"_97":96,"_32":45,"_105":87,"_27":106,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":25,"_120":121,"_122":123,"_124":-5,"_125":-5,"_126":127},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":64,"_65":66,"_67":68,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":25},"version",81,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","ui.tsx","latestPath","fileId","f5e9d1f4-3b4e-11f1-bf61-42b51c65c3df","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react */\nimport { renderToString } from \"npm:react-dom/server\";\n\n// ── CHANGE THIS to your deployed API val URL ──────────────────────────────────\nconst API_URL = \"https://YOUR_USERNAME-keralaapi.web.val.run\";\n// ─────────────────────────────────────────────────────────────────────────────\n\nconst ALL_KERALA_LOCATIONS = [\n \"Kozhikode\",\n \"Kannur\",\n \"Wayanad\",\n \"Kasargod\",\n \"Thiruvananthapuram\",\n \"Kochi\",\n \"Munnar\",\n \"Alleppey\",\n \"Thrissur\",\n \"Palakkad\",\n \"Varkala\",\n \"Kovalam\",\n];\n\nconst CSS = `\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n :root {\n --bg: #F5F2EB; --card: #FFFFFF; --border: #DDD9CE;\n --text: #1E1C18; --muted: #7A7870;\n --accent: #2B5F3E; --gold: #C4922A; --tag-bg: #EAE7DF;\n }\n body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }\n .hero { background: var(--accent); padding: 48px 16px 64px; text-align: center; position: relative; overflow: hidden; }\n .hero::before { content: ''; position: absolute; inset: 0; background: url(\"data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\"); }\n .hero-title { font-family: 'DM Serif Display', serif; font-size: clamp(28px,6vw,48px); color: #fff; line-height: 1.1; margin-bottom: 8px; position: relative; }\n .hero-title em { font-style: italic; color: #A8D5B5; }\n .hero-sub { color: rgba(255,255,255,0.65); font-size: 14px; margin-bottom: 32px; position: relative; }\n .form-card { background: var(--card); border-radius: 16px; padding: 24px; max-width: 600px; margin: 0 auto; position: relative; box-shadow: 0 4px 32px rgba(0,0,0,0.15); }\n .form-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 8px; }\n .form-section { margin-bottom: 20px; }\n .chips { display: flex; flex-wrap: wrap; gap: 8px; }\n .chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--bg); font-size: 13px; cursor: pointer; transition: all 0.15s; user-select: none; }\n .chip.selected { border-color: var(--accent); background: #EBF4EE; color: var(--accent); font-weight: 500; }\n .chip .check { display: none; font-size: 11px; }\n .chip.selected .check { display: inline; }\n .budget-row { display: flex; align-items: center; gap: 12px; }\n input[type=range] { flex: 1; -webkit-appearance: none; height: 4px; border-radius: 2px; background: var(--border); outline: none; }\n input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: 0 2px 6px rgba(43,95,62,0.35); }\n .budget-value { font-family: 'DM Serif Display', serif; font-size: 18px; color: var(--accent); min-width: 72px; text-align: right; }\n .btn-generate { width: 100%; padding: 14px; border: none; border-radius: 10px; background: var(--accent); color: #fff; font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity 0.15s, transform 0.1s; margin-top: 4px; }\n .btn-generate:hover { opacity: 0.9; }\n .btn-generate:active { transform: scale(0.98); }\n .btn-generate:disabled { opacity: 0.5; cursor: not-allowed; }\n .results { max-width: 680px; margin: -28px auto 40px; padding: 0 16px; }\n .loading-wrap { text-align: center; padding: 60px 0; }\n .spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 16px; }\n @keyframes spin { to { transform: rotate(360deg); } }\n .stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 24px; }\n .stat-pill { background: var(--card); border-radius: 10px; padding: 12px 14px; border: 0.5px solid var(--border); }\n .stat-label { font-size: 11px; color: var(--muted); margin-bottom: 4px; }\n .stat-val { font-family: 'DM Serif Display', serif; font-size: 22px; }\n .tl-row { display: flex; gap: 16px; }\n .tl-spine { display: flex; flex-direction: column; align-items: center; width: 36px; flex-shrink: 0; }\n .tl-dot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }\n .tl-line { width: 2px; background: var(--border); flex: 1; margin-top: 4px; }\n .loc-card { background: var(--card); border: 0.5px solid var(--border); border-radius: 14px; overflow: hidden; flex: 1; margin-bottom: 20px; }\n .loc-img { width: 100%; height: 130px; object-fit: cover; display: block; }\n .loc-img-wrap { position: relative; }\n .loc-name-badge { position: absolute; bottom: 10px; left: 12px; background: rgba(255,255,255,0.93); border-radius: 8px; padding: 4px 12px; font-family: 'DM Serif Display', serif; font-size: 17px; color: var(--text); }\n .loc-body { padding: 14px 16px; }\n .section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }\n .stay-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }\n .stay-img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }\n .stay-name { font-weight: 500; font-size: 14px; }\n .stay-meta { font-size: 13px; color: var(--muted); }\n .stars { color: var(--gold); font-size: 13px; }\n .sight-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }\n .sight-card { background: var(--bg); border: 0.5px solid var(--border); border-radius: 10px; overflow: hidden; }\n .sight-img { width: 100%; height: 68px; object-fit: cover; display: block; }\n .sight-info { padding: 7px 8px; }\n .sight-name { font-size: 12px; font-weight: 500; margin-bottom: 3px; }\n .travel-card { background: var(--card); border: 0.5px solid var(--border); border-radius: 12px; padding: 16px; }\n .leg { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg); border-radius: 8px; font-size: 13px; }\n .leg + .leg { margin-top: 8px; }\n .leg-icon { font-size: 20px; }\n .leg-route { flex: 1; }\n .leg-from { font-weight: 500; }\n .leg-arrow { color: var(--muted); margin: 0 6px; }\n .leg-type-tag { font-size: 11px; background: var(--tag-bg); color: #444441; padding: 2px 7px; border-radius: 6px; margin-left: 8px; }\n .leg-price { font-weight: 500; text-align: right; }\n .leg-dur { font-size: 11px; color: var(--muted); }\n .error-box { background: #FFF2F2; border: 1px solid #FFCACA; border-radius: 10px; padding: 16px; color: #8B1A1A; font-size: 14px; margin-top: 24px; }\n @media (max-width: 420px) {\n .sight-grid { grid-template-columns: repeat(2,1fr); }\n .stats { grid-template-columns: 1fr 1fr; }\n }\n`;\n\n// Kept as a plain string — no backticks or JSX inside, so no parse issues\nfunction buildClientJs(apiUrl: string): string {\n return [\n 'var API_URL=\"' + apiUrl + '\";',\n 'var TICONS={\"taxi\":\"\\\\u{1F695}\",\"bus\":\"\\\\u{1F68C}\",\"auto-rickshaw\":\"\\\\u{1F6FA}\",\"train\":\"\\\\u{1F682}\",\"boat\":\"\\\\u{26F5}\"};',\n 'var ACCENTS=[\"#185FA5\",\"#0F6E56\",\"#854F0B\",\"#6B2FB5\",\"#A3520C\"];',\n 'function stars(n){return\\'\\'+\"\\u2605\".repeat(n)+\\'\\'+\"\\u2605\".repeat(5-n)+\"\";}',\n 'function toggleChip(el){el.classList.toggle(\"selected\");}',\n 'function updateBudget(v){document.getElementById(\"budgetDisplay\").textContent=\"\\u20B9\"+Number(v).toLocaleString();}',\n `async function generate(){\n var sel=Array.from(document.querySelectorAll(\".chip.selected\")).map(function(c){return c.dataset.loc;});\n if(sel.length===0){alert(\"Please select at least one destination.\");return;}\n var budget=Number(document.getElementById(\"budgetSlider\").value);\n var btn=document.getElementById(\"generateBtn\");\n btn.disabled=true;btn.textContent=\"Generating\\u2026\";\n document.getElementById(\"results\").innerHTML='

Crafting your Kerala itinerary\\u2026

';\n try{\n var res=await fetch(API_URL,{method:\"POST\",headers:{\"Content-Type\":\"application/json\"},body:JSON.stringify({locations:sel,budget:budget})});\n var json=await res.json();\n if(json.error)throw new Error(json.error);\n render(json.data);\n }catch(e){\n document.getElementById(\"results\").innerHTML='

\\u26A0\\uFE0F '+(e.message||\"Something went wrong.\")+\"

\";\n }finally{\n btn.disabled=false;btn.textContent=\"Generate Itinerary \\u2192\";\n }\n }`,\n `function render(data){\n var locs=data.locations||[];\n var travel=data.travel||[];\n var totalCost=data.total_cost||0;\n var html='

'\n +'

Locations

'+locs.length+\"

\"\n +'

Travel legs

'+travel.length+\"

\"\n +'

Total cost

\\u20B9'+totalCost.toLocaleString()+\"

\"\n +'

';\n locs.forEach(function(loc,i){\n var accent=ACCENTS[i%ACCENTS.length];\n var sights=(loc.sightseeing||[]).map(function(s){\n return '

'+s.name+\"

\"+stars(s.rating)+\"

\";\n }).join(\"\");\n html+='

'\n +'

'+loc.name+\"

\"\n +'

'\n +'

Stay

'\n +'

'+loc.stay.name+\"

\"\n +'

'+stars(loc.stay.rating)+' \\u20B9'+loc.stay.price+\"/night

\"\n +'

Sightseeing

'\n +'

'+sights+\"

\"\n +\"

\";\n });\n html+=\"

\";\n if(travel.length){\n var legs=travel.map(function(leg){\n return '

'\n +''+(TICONS[leg.type]||\"\\u{1F697}\")+\"\"\n +'

'+leg.from+'\\u2192'+leg.to+''+leg.type+\"

\"\n +'

\\u20B9'+leg.price+\"

\"\n +'

'+leg.duration+\"

\";\n }).join(\"\");\n html+='

Travel legs

'+legs+\"

\";\n }\n document.getElementById(\"results\").innerHTML=html;\n document.getElementById(\"results\").scrollIntoView({behavior:\"smooth\",block:\"start\"});\n }`,\n ].join(\"\\n\");\n}\n\nfunction buildChips(): string {\n return ALL_KERALA_LOCATIONS.map((loc, i) =>\n `

\\u2713 ${loc}

`\n ).join(\"\");\n}\n\nfunction App() {\n return (\n \n \n \n \n Kerala Travel Planner\n \n \n \n

Diff · v81