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.0">6<title>Hotel Map Detail Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1440px;12 height: 3120px;13 overflow: hidden;14 background: #f3f5f7;15 }16 17 /* Map area */18 .map {19 position: absolute;20 top: 0;21 left: 0;22 width: 1440px;23 height: 1500px;24 background: #E0E0E0;25 border: 1px solid #BDBDBD;26 color: #757575;27 display: flex;28 align-items: center;29 justify-content: center;30 font-family: Inter, Roboto, Arial, sans-serif;31 font-size: 32px;32 }33 34 /* Top search bar */35 .search-wrap {36 position: absolute;37 left: 48px;38 right: 48px;39 top: 140px;40 height: 120px;41 background: #ffffff;42 border-radius: 60px;43 box-shadow: 0 6px 24px rgba(0,0,0,0.15);44 display: flex;45 align-items: center;46 padding: 0 28px;47 gap: 20px;48 font-family: Inter, Roboto, Arial, sans-serif;49 }50 .icon-btn {51 width: 80px;52 height: 80px;53 border-radius: 40px;54 display: flex;55 align-items: center;56 justify-content: center;57 color: #5f6368;58 }59 .search-text {60 flex: 1;61 font-size: 42px;62 color: #202124;63 white-space: nowrap;64 overflow: hidden;65 text-overflow: ellipsis;66 }67 68 /* Nearby hotels pill */69 .nearby-pill {70 position: absolute;71 top: 470px;72 left: 50%;73 transform: translateX(-50%);74 background: #fff;75 border-radius: 48px;76 padding: 26px 44px;77 box-shadow: 0 6px 20px rgba(0,0,0,0.18);78 font-family: Inter, Roboto, Arial, sans-serif;79 font-size: 40px;80 color: #1f1f1f;81 }82 83 /* Small floating photo on map */84 .small-thumb {85 position: absolute;86 left: 48px;87 top: 980px;88 width: 360px;89 height: 220px;90 background: #E0E0E0;91 border: 1px solid #BDBDBD;92 border-radius: 18px;93 display: flex;94 align-items: center;95 justify-content: center;96 color: #757575;97 font-family: Inter, Roboto, Arial, sans-serif;98 font-size: 28px;99 }100 101 /* Bottom sheet */102 .sheet {103 position: absolute;104 left: 0;105 right: 0;106 top: 1180px;107 height: 1940px;108 background: #ffffff;109 border-top-left-radius: 40px;110 border-top-right-radius: 40px;111 box-shadow: 0 -8px 24px rgba(0,0,0,0.15);112 font-family: Inter, Roboto, Arial, sans-serif;113 color: #1f1f1f;114 }115 .grabber {116 width: 160px;117 height: 12px;118 background: #e0e0e0;119 border-radius: 6px;120 margin: 24px auto 24px;121 }122 .sheet-content {123 padding: 0 48px 48px;124 }125 .title {126 font-size: 64px;127 font-weight: 700;128 margin: 12px 0 24px;129 }130 .rating-row {131 display: flex;132 align-items: center;133 gap: 14px;134 color: #5f6368;135 font-size: 38px;136 margin-bottom: 12px;137 }138 .stars svg { width: 40px; height: 40px; }139 .meta {140 color: #5f6368;141 font-size: 40px;142 margin: 8px 0;143 }144 145 /* Action buttons */146 .actions {147 display: flex;148 gap: 24px;149 margin: 36px 0 32px;150 flex-wrap: wrap;151 }152 .chip {153 display: inline-flex;154 align-items: center;155 gap: 18px;156 padding: 26px 36px;157 border-radius: 50px;158 border: 1px solid #E0E0E0;159 font-size: 40px;160 color: #1a73e8;161 background: #fff;162 }163 .chip svg { width: 40px; height: 40px; fill: #1a73e8; }164 165 /* Photo collage */166 .photos {167 display: grid;168 grid-template-columns: 2fr 1fr;169 gap: 28px;170 margin-top: 18px;171 }172 .photo {173 position: relative;174 background: #E0E0E0;175 border: 1px solid #BDBDBD;176 border-radius: 28px;177 overflow: hidden;178 display: flex;179 align-items: center;180 justify-content: center;181 color: #757575;182 font-size: 36px;183 }184 .right-col {185 display: grid;186 grid-template-rows: 1fr 1fr;187 gap: 28px;188 }189 .price-pill {190 position: absolute;191 top: 24px;192 right: 24px;193 background: #fff;194 border-radius: 24px;195 padding: 22px 26px;196 box-shadow: 0 6px 18px rgba(0,0,0,0.18);197 text-align: right;198 }199 .price {200 font-size: 48px;201 font-weight: 700;202 }203 .dates {204 font-size: 32px;205 color: #5f6368;206 margin-top: 4px;207 }208</style>209</head>210<body>211<div id="render-target">212 213 <!-- Map placeholder -->214 <div class="map">[IMG: Map of Winchester area]</div>215 216 <!-- Search / address bar -->217 <div class="search-wrap">218 <div class="icon-btn" aria-hidden="true">219 <svg viewBox="0 0 24 24" width="44" height="44" fill="#5f6368">220 <path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>221 </svg>222 </div>223 <div class="search-text">The Winchester Hotel & Spa, ...</div>224 <div class="icon-btn" aria-hidden="true">225 <svg viewBox="0 0 24 24" width="44" height="44" fill="#5f6368">226 <path d="M18.3 5.71 12 12l6.3 6.29L16.59 20 10.3 13.71 4 20l-1.71-1.71L8.59 12 2.29 5.71 4 4l6.29 6.3L16.59 4z"/>227 </svg>228 </div>229 <div class="icon-btn" aria-hidden="true">230 <svg viewBox="0 0 24 24" width="44" height="44" fill="#5f6368">231 <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21.5 21.5 20zM9.5 14C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>232 </svg>233 </div>234 </div>235 236 <!-- Nearby hotels pill -->237 <div class="nearby-pill">See nearby hotels</div>238 239 <!-- Small floating photo -->240 <div class="small-thumb">[IMG: Street View/Photo]</div>241 242 <!-- Bottom sheet -->243 <div class="sheet">244 <div class="grabber"></div>245 <div class="sheet-content">246 <div class="title">The Winchester Hotel & Spa</div>247 248 <div class="rating-row">249 <div>4.1</div>250 <div class="stars" aria-hidden="true">251 <svg viewBox="0 0 24 24" fill="#fbbc04"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>252 <svg viewBox="0 0 24 24" fill="#fbbc04"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>253 <svg viewBox="0 0 24 24" fill="#fbbc04"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>254 <svg viewBox="0 0 24 24" fill="#fbbc04"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>255 <svg viewBox="0 0 24 24" fill="#dadce0"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>256 </div>257 <div>(1,190)</div>258 </div>259 260 <div class="meta">4-star hotel</div>261 <div class="meta">Chic, modern accommodations & a spa</div>262 263 <div class="actions">264 <div class="chip">265 <svg viewBox="0 0 24 24"><path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v13c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 15H5V10h14v9zm0-11H5V6h14v2z"/></svg>266 <span>Availability</span>267 </div>268 <div class="chip">269 <svg viewBox="0 0 24 24"><path d="M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V21c0 .55-.45 1-1 1C10.61 22 2 13.39 2 3c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>270 <span>Call</span>271 </div>272 <div class="chip" style="color:#1f1f1f;">273 <svg viewBox="0 0 24 24" fill="#1f1f1f"><path d="M17 3H7a2 2 0 0 0-2 2v16l7-3 7 3V5a2 2 0 0 0-2-2z"/></svg>274 <span>Save</span>275 </div>276 <div class="chip" style="color:#1f1f1f;">277 <svg viewBox="0 0 24 24" fill="#1f1f1f"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.02-4.11a2.99 2.99 0 0 0 1.96.77A3 3 0 1 0 15 4a2.99 2.99 0 0 0 .77 1.96L8.74 10.1A3 3 0 1 0 6 12c0 .24.04.47.09.7l7.03 4.11c-.48.53-.78 1.22-.78 1.99a3 3 0 1 0 3-2.72z"/></svg>278 <span>Share</span>279 </div>280 </div>281 282 <div class="photos">283 <div class="photo" style="height: 860px;">[IMG: Hotel exterior]</div>284 <div class="right-col">285 <div class="photo">286 [IMG: Hotel room]287 <div class="price-pill">288 <div class="price">₹7,382</div>289 <div class="dates">26–27 Nov</div>290 </div>291 </div>292 <div class="photo">[IMG: Indoor pool]</div>293 </div>294 </div>295 </div>296 </div>297 298</div>299</body>300</html>