hey make this website more attractive with dynamic moves ,etc:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>🏨 Hotels Finder</title>
<style>
/* Global theme */
body {
font-family: "Poppins", "Segoe UI", sans-serif;
margin: 0;
display: flex;
height: 100vh;
background: linear-gradient(135deg, #fdfbfb, #ebedee);
color: #2d3436;
}
/* Sidebar (Hotel list) */
#hotel-list {
width: 35%;
overflow-y: auto;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
border-right: 1px solid #eaeaea;
padding: 24px;
box-shadow: 4px 0 12px rgba(0,0,0,0.05);
}
#hotel-list h2 {
margin: 0 0 8px;
font-size: 1.6em;
font-weight: 600;
color: #009688; /* Mint accent */
}
#hotel-list p {
margin: 0 0 20px;
font-size: 0.95em;
color: #666;
}
/* Map container */
#map {
width: 65%;
height: 100%;
border-left: 1px solid #f0f0f0;
}
/* Hotel cards */
.hotel-card {
padding: 16px;
margin-bottom: 18px;
border-radius: 16px;
background: #ffffff;
border: 1px solid #f3f3f3;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 3px 10px rgba(0,0,0,0.04);
}
.hotel-card:hover {
transform: translateY(-6px);
box-shadow: 0 10px 24px rgba(0,0,0,0.12);
border-color: #80deea; /* Light cyan accent */
}
.hotel-card img {
width: 100%;
height: 170px;
border-radius: 14px;
object-fit: cover;
margin-bottom: 12px;
}
.hotel-name {
font-size: 1.15em;
font-weight: 600;
color: #37474f;
margin-bottom: 6px;
}
.rating {
font-size: 0.95em;
color: #f39c12;
font-weight: 500;
}
.reviews {
font-size: 0.85em;
color: #888;
}
.address {
font-size: 0.9em;
color: #555;
margin-top: 6px;
}
/* Loading overlay */
#loading {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(255, 255, 255, 0.95);
padding: 10px 22px;
border-radius: 20px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
font-weight: 500;
color: #009688;
display: none;
}
</style>
</head>
<body>
<!-- Left: Hotel info -->
<div id="hotel-list">
<h2>🏨 Hotels Nearby</h2>
<p>Showing hotels in <span id="city-name">your city</span>...</p>
</div>
<!-- Right: Map -->
<div id="map"></div>
<!-- Loading indicator -->
<div id="loading">🔎 Finding premium stays...</div>
<!-- Google Maps -->
<script src="https://maps.googleapis.com/maps/api/js?key=key&libraries=places"></script>
<script>
let map;
let markers = [];
function initMap() {
let place = localStorage.getItem("selectedCity") || "Hyderabad";
document.getElementById("city-name").innerText = place;
// Base map with soft style
map = new google.maps.Map(document.getElementById("map"), {
zoom: 13,
center: { lat: 17.3850, lng: 78.4867 },
styles: [
{ featureType: "poi", elementType: "labels", stylers: [{ visibility: "off" }] },
{ featureType: "road", elementType: "geometry", stylers: [{ color: "#e8f5e9" }] },
{ featureType: "water", stylers: [{ color: "#e1f5fe" }] },
{ featureType: "landscape", stylers: [{ color: "#f9fbe7" }] }
]
});
// Show loading
document.getElementById("loading").style.display = "block";
const geocoder = new google.maps.Geocoder();
geocoder.geocode({ address: place }, (results, status) => {
if (status === "OK" && results[0]) {
map.setCenter(results[0].geometry.location);
const service = new google.maps.places.PlacesService(map);
service.nearbySearch(
{
location: results[0].geometry.location,
radius: 5000,
type: "lodging"
},
(results, status) => {
document.getElementById("loading").style.display = "none";
if (status === google.maps.places.PlacesServiceStatus.OK) {
displayHotels(results);
}
}
);
} else {
alert("❌ Could not find location: " + place);
document.getElementById("loading").style.display = "none";
}
});
}
function displayHotels(hotels) {
const hotelList = document.getElementById("hotel-list");
hotelList.innerHTML = `<h2>🏨 Hotels Nearby</h2>
<p>Showing hotels in <span id="city-name">${localStorage.getItem("selectedCity")}</span>...</p>`;
hotels.forEach((hotel) => {
let marker = new google.maps.Marker({
map,
position: hotel.geometry.location,
title: hotel.name
});
markers.push(marker);
const card = document.createElement("div");
card.className = "hotel-card";
let photoUrl = hotel.photos && hotel.photos.length > 0
? hotel.photos[0].getUrl({ maxWidth: 400, maxHeight: 300 })
: "https://via.placeholder.com/400x300?text=No+Image";
card.innerHTML = `
<img src="${photoUrl}" alt="Hotel photo">
<div class="hotel-name">${hotel.name}</div>
<div class="rating">⭐ ${hotel.rating || "N/A"} <span class="reviews">(${hotel.user_ratings_total || 0} reviews)</span></div>
<div class="address">📍 ${hotel.vicinity || "Address not available"}</div>
`;
card.addEventListener("click", () => {
map.setCenter(hotel.geometry.location);
map.setZoom(15);
new google.maps.InfoWindow({
content: `<strong>${hotel.name}</strong><br>⭐ ${hotel.rating || "N/A"}`
}).open(map, marker);
});
hotelList.appendChild(card);
});
}
window.onload = initMap;
</script>
</body>
</html>