/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useState } from "https://esm.sh/react@18.2.0"; function HotelBookingApp() { const [searchParams, setSearchParams] = useState({ location: "", checkIn: "", checkOut: "", guests: 1, }); const [hotels, setHotels] = useState([ { id: 1, name: "Red House Mumbai", location: "Mumbai", price: 4500, rating: 4.5, image: "https://maxm-imggenurl.web.val.run/luxury-indian-hotel-exterior", }, { id: 2, name: "Red House Jaipur", location: "Jaipur", price: 6000, rating: 4.8, image: "https://maxm-imggenurl.web.val.run/traditional-indian-hotel-interior", }, { id: 3, name: "Red House Goa", location: "Goa", price: 3500, rating: 4.2, image: "https://maxm-imggenurl.web.val.run/beach-resort-india", }, ]); const handleSearch = () => { // Simulated search logic alert(`Searching for hotels in ${searchParams.location}`); }; return (

🏨 Red House Hotels

setSearchParams({ ...searchParams, location: e.target.value })} /> setSearchParams({ ...searchParams, checkIn: e.target.value })} /> setSearchParams({ ...searchParams, checkOut: e.target.value })} />

{hotels.map(hotel => (

{hotel.name}

📍 {hotel.location}

⭐ {hotel.rating}/5

₹{hotel.price} per night

))}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response( ` Red House Hotels

`, { headers: { "content-type": "text/html" }, }, ); } const css = ` body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; } .hotel-booking-app { max-width: 1200px; margin: 0 auto; padding: 20px; } header { background-color: #8B0000; /* Dark Red for Red House theme */ color: white; padding: 15px; text-align: center; } nav { display: flex; justify-content: center; gap: 20px; margin-top: 10px; } nav a { color: white; text-decoration: none; } .search-container { display: flex; gap: 10px; margin: 20px 0; background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .search-container input, .search-container select, .search-container button { padding: 10px; border: 1px solid #ddd; border-radius: 4px; } .hotels-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } .hotel-card { background-color: white; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: transform 0.3s; border: 2px solid #8B0000; /* Red border for Red House theme */ } .hotel-card:hover { transform: scale(1.05); } .hotel-card img { width: 100%; height: 250px; object-fit: cover; } .hotel-details { padding: 15px; } .hotel-details button { width: 100%; background-color: #8B0000; /* Dark Red for Red House theme */ color: white; border: none; padding: 10px; border-radius: 4px; cursor: pointer; } footer { text-align: center; padding: 20px; background-color: #8B0000; /* Dark Red for Red House theme */ color: white; } footer a { color: #FFD700; /* Gold color for contrast */ margin-left: 5px; } @media (max-width: 768px) { .search-container { flex-direction: column; } } `;

Vinod66