GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1440, initial-scale=1">6<title>The Winchester Hotel & Spa - Map Detail</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #1f1f1f; }9 #render-target {10 position: relative;11 width: 1440px;12 height: 3120px;13 overflow: hidden;14 background: #f6f7f8;15 }16 17 /* Status bar (mock) */18 .status-bar {19 position: absolute;20 top: 28px;21 left: 36px;22 right: 36px;23 height: 48px;24 color: #5f6368;25 font-size: 36px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 pointer-events: none;30 }31 32 /* Map area */33 .map {34 position: absolute;35 top: 0;36 left: 0;37 width: 1440px;38 height: 1500px;39 background: #E0E0E0;40 border-bottom: 1px solid #BDBDBD;41 display: flex;42 align-items: center;43 justify-content: center;44 color: #757575;45 font-size: 40px;46 }47 48 /* Search bar */49 .search-wrap {50 position: absolute;51 top: 116px;52 left: 40px;53 width: 1360px;54 height: 120px;55 background: #fff;56 border-radius: 60px;57 box-shadow: 0 8px 24px rgba(0,0,0,0.15);58 display: flex;59 align-items: center;60 padding: 0 28px;61 gap: 24px;62 }63 .icon-btn {64 width: 80px;65 height: 80px;66 border-radius: 50%;67 display: inline-flex;68 align-items: center;69 justify-content: center;70 background: #ffffff;71 color: #5f6368;72 }73 .search-text {74 flex: 1;75 font-size: 44px;76 color: #202124;77 white-space: nowrap;78 overflow: hidden;79 text-overflow: ellipsis;80 }81 .divider-dot { width: 12px; height: 12px; background: #d0d3d6; border-radius: 50%; }82 83 /* Nearby pill */84 .nearby-pill {85 position: absolute;86 top: 360px;87 left: 50%;88 transform: translateX(-50%);89 padding: 26px 44px;90 background: #fff;91 border-radius: 60px;92 box-shadow: 0 6px 16px rgba(0,0,0,0.15);93 font-size: 38px;94 color: #3c4043;95 }96 97 /* Little street view preview on map */98 .mini-preview {99 position: absolute;100 left: 40px;101 bottom: 540px;102 width: 360px;103 height: 220px;104 background: #E0E0E0;105 border: 1px solid #BDBDBD;106 border-radius: 20px;107 display: flex;108 align-items: center;109 justify-content: center;110 color: #757575;111 font-size: 28px;112 }113 114 /* Bottom sheet */115 .sheet {116 position: absolute;117 left: 0;118 bottom: 0;119 width: 1440px;120 height: 1900px;121 background: #ffffff;122 border-top-left-radius: 36px;123 border-top-right-radius: 36px;124 box-shadow: 0 -10px 30px rgba(0,0,0,0.2);125 padding: 30px 48px 80px 48px;126 }127 .grabber {128 width: 140px;129 height: 12px;130 background: #dfe1e5;131 border-radius: 8px;132 margin: 6px auto 24px auto;133 }134 .title {135 font-size: 64px;136 font-weight: 700;137 margin: 12px 0 18px 0;138 color: #1f1f1f;139 }140 141 .rating-row {142 display: flex;143 align-items: center;144 gap: 12px;145 color: #5f6368;146 font-size: 40px;147 margin-bottom: 10px;148 }149 .stars { display: inline-flex; gap: 6px; transform: translateY(2px); }150 .subtle { color: #6f7377; font-size: 40px; margin-top: 8px; }151 .desc { color: #6b6f73; font-size: 40px; margin-top: 8px; }152 153 /* Action buttons */154 .actions {155 display: flex;156 gap: 28px;157 margin: 36px 0 28px 0;158 flex-wrap: wrap;159 }160 .action-btn {161 display: inline-flex;162 align-items: center;163 gap: 18px;164 padding: 26px 40px;165 border-radius: 60px;166 border: 2px solid #d2d6da;167 color: #1a73e8;168 font-size: 40px;169 background: #fff;170 }171 .action-btn.primary {172 background: #1a73e8;173 color: #fff;174 border-color: #1a73e8;175 }176 .action-btn svg { width: 40px; height: 40px; }177 178 /* Photo grid */179 .photos {180 margin-top: 18px;181 display: grid;182 grid-template-columns: 2fr 1fr;183 grid-gap: 28px;184 }185 .photo {186 background: #E0E0E0;187 border: 1px solid #BDBDBD;188 color: #757575;189 display: flex;190 align-items: center;191 justify-content: center;192 border-radius: 28px;193 height: 720px;194 font-size: 40px;195 position: relative;196 overflow: hidden;197 }198 .photo.tall { height: 350px; }199 .price-pill {200 position: absolute;201 top: 28px;202 right: 28px;203 background: #ffffff;204 border-radius: 28px;205 padding: 22px 28px;206 box-shadow: 0 6px 16px rgba(0,0,0,0.2);207 text-align: right;208 line-height: 1.2;209 }210 .price-pill .amount { font-size: 48px; font-weight: 700; }211 .price-pill .dates { font-size: 32px; color: #5f6368; }212 213</style>214</head>215<body>216<div id="render-target">217 218 <!-- Mock status bar -->219 <div class="status-bar">220 <div>8:22</div>221 <div>• • •</div>222 </div>223 224 <!-- Map area -->225 <div class="map">[IMG: Google Map centered on The Winchester Hotel & Spa]</div>226 227 <!-- Search bar -->228 <div class="search-wrap">229 <div class="icon-btn" aria-label="Back">230 <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#5f6368" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">231 <path d="M15 6l-6 6 6 6"></path>232 </svg>233 </div>234 <div class="search-text">The Winchester Hotel & Spa, ...</div>235 <div class="icon-btn" aria-label="Clear">236 <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#5f6368" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">237 <path d="M6 6l12 12M18 6L6 18"></path>238 </svg>239 </div>240 <div class="divider-dot"></div>241 <div class="icon-btn" aria-label="Search">242 <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#5f6368" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">243 <circle cx="11" cy="11" r="7"></circle>244 <path d="M20 20l-3.5-3.5"></path>245 </svg>246 </div>247 </div>248 249 <!-- Nearby pill -->250 <div class="nearby-pill">See nearby hotels</div>251 252 <!-- Small preview on the map -->253 <div class="mini-preview">[IMG: Street View Preview]</div>254 255 <!-- Bottom sheet with details -->256 <div class="sheet">257 <div class="grabber"></div>258 259 <div class="title">The Winchester Hotel & Spa</div>260 261 <div class="rating-row">262 <span>4.1</span>263 <span class="stars" aria-hidden="true">264 <svg viewBox="0 0 24 24" width="34" height="34" fill="#fbbc04"><path d="M12 2l3 6 6 .9-4.4 4.3 1 6.1L12 16l-5.6 3.3 1-6.1L3 8.9 9 8z"/></svg>265 <svg viewBox="0 0 24 24" width="34" height="34" fill="#fbbc04"><path d="M12 2l3 6 6 .9-4.4 4.3 1 6.1L12 16l-5.6 3.3 1-6.1L3 8.9 9 8z"/></svg>266 <svg viewBox="0 0 24 24" width="34" height="34" fill="#fbbc04"><path d="M12 2l3 6 6 .9-4.4 4.3 1 6.1L12 16l-5.6 3.3 1-6.1L3 8.9 9 8z"/></svg>267 <svg viewBox="0 0 24 24" width="34" height="34" fill="#fbbc04"><path d="M12 2l3 6 6 .9-4.4 4.3 1 6.1L12 16l-5.6 3.3 1-6.1L3 8.9 9 8z"/></svg>268 <svg viewBox="0 0 24 24" width="34" height="34" fill="#e0e0e0" stroke="#fbbc04" stroke-width="1"><path d="M12 2l3 6 6 .9-4.4 4.3 1 6.1L12 16l-5.6 3.3 1-6.1L3 8.9 9 8z"/></svg>269 </span>270 <span>(1,190)</span>271 </div>272 <div class="subtle">4-star hotel</div>273 <div class="desc">Chic, modern accommodations & a spa</div>274 275 <div class="actions">276 <div class="action-btn primary">277 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">278 <path d="M12 2l3 7-7-3 3 7-7-3 11 11"></path>279 </svg>280 <span>Directions</span>281 </div>282 <div class="action-btn">283 <svg viewBox="0 0 24 24" fill="none" stroke="#1a73e8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">284 <path d="M3 10h18M6 10V7a3 3 0 013-3h6a3 3 0 013 3v3"></path>285 <path d="M4 18h16a1 1 0 001-1v-4H3v4a1 1 0 001 1z"></path>286 </svg>287 <span>Availability</span>288 </div>289 <div class="action-btn">290 <svg viewBox="0 0 24 24" fill="none" stroke="#1a73e8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">291 <path d="M22 16.92v2a2 2 0 01-2.18 2c-3.06-.26-6.02-1.56-8.32-3.86S5.34 9.24 5.08 6.18A2 2 0 017.06 4h2a2 2 0 012 1.72c.1.74.26 1.47.48 2.18a2 2 0 01-.45 2.11l-1 1a16 16 0 006.36 6.36l1-1a2 2 0 012.11-.45c.71.22 1.44.38 2.18.48A2 2 0 0122 16.92z"></path>292 </svg>293 <span>Call</span>294 </div>295 <div class="action-btn">296 <svg viewBox="0 0 24 24" fill="none" stroke="#1a73e8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">297 <path d="M4 12v7a1 1 0 001 1h14a1 1 0 001-1v-7"></path>298 <path d="M16 6l-4-4-4 4"></path>299 <path d="M12 2v14"></path>300 </svg>301 <span>Share</span>302 </div>303 </div>304 305 <!-- Photos grid -->306 <div class="photos">307 <div class="photo">[IMG: Exterior Hotel Photo]</div>308 <div style="display: grid; grid-template-rows: 1fr 1fr; grid-gap: 28px;">309 <div class="photo tall">310 [IMG: Room Interior]311 <div class="price-pill">312 <div class="amount">₹7,382</div>313 <div class="dates">26–27 Nov</div>314 </div>315 </div>316 <div class="photo tall">[IMG: Indoor Pool]</div>317 </div>318 </div>319 320 </div>321</div>322</body>323</html>