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=1080, initial-scale=1.0">6<title>Hotels - Vancouver</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0f1a22;15 color: #e9eef2;16 }17 .status-bar {18 height: 100px;19 padding: 0 36px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #e9eef2;24 font-weight: 600;25 font-size: 36px;26 }27 .status-left, .status-right { display: flex; align-items: center; gap: 28px; }28 .app-bar {29 height: 120px;30 padding: 0 36px;31 display: flex;32 align-items: center;33 gap: 28px;34 border-bottom: 1px solid rgba(255,255,255,0.06);35 }36 .back-btn {37 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;38 }39 .tabs {40 flex: 1;41 display: flex;42 align-items: center;43 justify-content: center;44 gap: 140px;45 font-size: 40px;46 letter-spacing: 2px;47 color: #98a8b4;48 }49 .tab-active { color: #77d1c7; position: relative; }50 .tab-active::after {51 content: "";52 position: absolute;53 left: 0; right: 0; bottom: -22px;54 height: 6px; background: #2ab5a7; border-radius: 3px;55 }56 .filters {57 padding: 28px 36px;58 display: flex;59 gap: 20px;60 }61 .pill {62 background: #1c2731;63 color: #dbe2e6;64 border-radius: 16px;65 height: 88px;66 display: flex;67 align-items: center;68 padding: 0 28px;69 font-size: 40px;70 border: 1px solid rgba(255,255,255,0.08);71 gap: 18px;72 }73 .pill.small { width: auto; white-space: nowrap; font-size: 34px; }74 .info-line {75 padding: 10px 36px 28px 36px;76 color: #cfd7dc;77 font-size: 36px;78 display: flex;79 align-items: center;80 gap: 16px;81 }82 .info-icon {83 width: 42px; height: 42px; border-radius: 21px;84 background: #1c2731; border: 1px solid rgba(255,255,255,0.1);85 display: inline-flex; align-items: center; justify-content: center;86 color: #77d1c7; font-weight: 700; font-size: 28px;87 }88 .card {89 margin: 20px 24px;90 background: #18222b;91 border: 1px solid rgba(255,255,255,0.06);92 border-radius: 28px;93 overflow: hidden;94 box-shadow: 0 10px 24px rgba(0,0,0,0.35);95 }96 .image-box {97 position: relative;98 background: #E0E0E0;99 border-bottom: 1px solid #BDBDBD;100 height: 420px;101 display: flex; align-items: center; justify-content: center;102 color: #757575; font-weight: 600; font-size: 40px;103 }104 .img-label {105 position: absolute; left: 24px; bottom: 24px;106 color: #ffffff; font-size: 44px; font-weight: 700;107 text-shadow: 0 2px 6px rgba(0,0,0,0.6);108 display: flex; align-items: center; gap: 12px;109 }110 .stars { display: inline-flex; gap: 6px; margin-left: 12px; }111 .star { width: 28px; height: 28px; }112 .card-body { padding: 28px; font-size: 34px; color: #dbe2e6; }113 .rating-row { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; color: #ffffff; }114 .ta-dots { display: inline-flex; gap: 6px; }115 .dot { width: 18px; height: 18px; border-radius: 50%; background: #49d494; }116 .muted { color: #a9b8c3; }117 .distance-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; color: #cfd7dc; }118 .price-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }119 .price { font-size: 56px; font-weight: 800; color: #ffffff; }120 .sub { color: #a9b8c3; font-size: 32px; }121 .badge {122 background: #ffffff; color: #1b232b; border-radius: 16px; padding: 16px 20px;123 font-size: 32px; font-weight: 700;124 box-shadow: 0 4px 10px rgba(0,0,0,0.25);125 }126 .save { color: #a9b8c3; font-size: 32px; margin-left: 14px; }127 .map-card .image-box { height: 340px; }128 .map-overlay {129 position: absolute; left: 24px; top: 18px; color: #ffffff; font-size: 40px; font-weight: 700;130 text-shadow: 0 2px 6px rgba(0,0,0,0.6);131 }132 .tax-note { padding: 18px 36px 12px 36px; color: #cfd7dc; font-size: 34px; }133 .bottom-bar {134 position: absolute; left: 24px; right: 24px; bottom: 80px;135 height: 100px; background: #1b242d; border: 1px solid rgba(255,255,255,0.08);136 border-radius: 22px; display: flex; align-items: center; justify-content: center;137 color: #e9eef2; font-size: 44px; font-weight: 800; letter-spacing: 1px;138 gap: 18px;139 }140 /* Simple icons */141 .icon { width: 44px; height: 44px; fill: none; stroke: #e9eef2; stroke-width: 4px; }142 .icon-teal { stroke: #2ab5a7; }143 .icon-muted { stroke: #a9b8c3; }144 .pin { width: 34px; height: 34px; }145 .calendar, .person { width: 40px; height: 40px; }146 .sort { width: 42px; height: 42px; stroke-width: 5px; }147 .google-tag {148 position: absolute; left: 24px; bottom: 22px; color: #ffffff; font-weight: 800; font-size: 40px; text-shadow: 0 2px 6px rgba(0,0,0,0.6);149 }150</style>151</head>152<body>153<div id="render-target">154 155 <!-- Status bar -->156 <div class="status-bar">157 <div class="status-left">158 <span>10:03</span>159 <!-- Search icon -->160 <svg class="icon" viewBox="0 0 24 24"><circle cx="10" cy="10" r="7"></circle><line x1="15" y1="15" x2="22" y2="22"></line></svg>161 <span style="font-weight:800;">N</span>162 <span style="font-weight:800; border: 2px solid #e9eef2; padding: 6px 10px; border-radius: 6px;">LR</span>163 <span>•</span>164 </div>165 <div class="status-right">166 <svg class="icon" viewBox="0 0 24 24"><path d="M2 17h20M4 13h16M7 9h10M11 5h2"/></svg>167 <svg class="icon" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"></rect><path d="M8 8h8v8H8z"/></svg>168 </div>169 </div>170 171 <!-- App bar with tabs -->172 <div class="app-bar">173 <div class="back-btn">174 <svg class="icon" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg>175 </div>176 <div class="tabs">177 <div>FLIGHTS</div>178 <div class="tab-active">HOTELS</div>179 </div>180 </div>181 182 <!-- Filter pills -->183 <div class="filters">184 <div class="pill" style="flex:1;">185 Vancouver186 </div>187 <div class="pill small">188 <svg class="calendar icon-muted" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="8" y1="3" x2="8" y2="7"></line><line x1="16" y1="3" x2="16" y2="7"></line></svg>189 <div>Dec 15<br>Dec 16</div>190 </div>191 <div class="pill small">192 <svg class="person icon-muted" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"></circle><path d="M4 21c1-4 6-6 8-6s7 2 8 6"/></svg>193 <div>3</div>194 </div>195 </div>196 197 <div class="info-line">198 <span>98 results sorted by Best</span>199 <span class="info-icon">i</span>200 </div>201 202 <!-- Map card -->203 <div class="card map-card" style="margin-top: 12px;">204 <div class="image-box">205 [IMG: Vancouver Map with pins]206 <div class="map-overlay">Vancouver</div>207 <div class="google-tag">Google</div>208 </div>209 </div>210 211 <div class="tax-note">Taxes and fees not included</div>212 213 <!-- Hotel card 1 -->214 <div class="card">215 <div class="image-box">216 [IMG: City skyline hotel]217 <div class="img-label">218 Hyatt Regency Vancouver219 <span class="stars">220 <svg class="star" viewBox="0 0 24 24"><path fill="#ff6e4a" d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9L7.5 12.8 3 8.8 9 8z"/></svg>221 <svg class="star" viewBox="0 0 24 24"><path fill="#ff6e4a" d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9L7.5 12.8 3 8.8 9 8z"/></svg>222 <svg class="star" viewBox="0 0 24 24"><path fill="#ff6e4a" d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9L7.5 12.8 3 8.8 9 8z"/></svg>223 <svg class="star" viewBox="0 0 24 24"><path fill="#ff6e4a" d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9L7.5 12.8 3 8.8 9 8z"/></svg>224 <svg class="star" viewBox="0 0 24 24"><path fill="#ff6e4a" d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9L7.5 12.8 3 8.8 9 8z"/></svg>225 </span>226 </div>227 </div>228 <div class="card-body">229 <div class="rating-row">230 <span style="font-weight:700;">4.5</span>231 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M8 13l2 2 6-6"></path></svg>232 <div class="ta-dots">233 <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>234 </div>235 <span class="muted">(5,945)</span>236 </div>237 <div class="distance-row">238 <svg class="pin icon-teal" viewBox="0 0 24 24"><path d="M12 22s8-7 8-12a8 8 0 1 0-16 0c0 5 8 12 8 12z"></path><circle cx="12" cy="10" r="3"></circle></svg>239 <span>1.69 miles from downtown</span>240 <div style="flex:1;"></div>241 <div class="price">$395 <span class="sub">a night</span></div>242 </div>243 <div class="muted">Free cancellation</div>244 </div>245 </div>246 247 <!-- Hotel card 2 -->248 <div class="card" style="margin-bottom: 220px;">249 <div class="image-box">250 [IMG: Courtyard hotel with garden]251 <div class="img-label">252 L'Hermitage Hotel253 <span class="stars">254 <svg class="star" viewBox="0 0 24 24"><path fill="#ff6e4a" d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9L7.5 12.8 3 8.8 9 8z"/></svg>255 <svg class="star" viewBox="0 0 24 24"><path fill="#ff6e4a" d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9L7.5 12.8 3 8.8 9 8z"/></svg>256 <svg class="star" viewBox="0 0 24 24"><path fill="#ff6e4a" d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9L7.5 12.8 3 8.8 9 8z"/></svg>257 <svg class="star" viewBox="0 0 24 24"><path fill="#ff6e4a" d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9L7.5 12.8 3 8.8 9 8z"/></svg>258 <svg class="star" viewBox="0 0 24 24"><path fill="#ff6e4a" d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9L7.5 12.8 3 8.8 9 8z"/></svg>259 </span>260 </div>261 </div>262 <div class="card-body">263 <div class="rating-row">264 <span style="font-weight:700;">5.0</span>265 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M8 13l2 2 6-6"></path></svg>266 <div class="ta-dots">267 <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>268 </div>269 <span class="muted">(5,638)</span>270 </div>271 <div class="distance-row">272 <svg class="pin icon-teal" viewBox="0 0 24 24"><path d="M12 22s8-7 8-12a8 8 0 1 0-16 0c0 5 8 12 8 12z"></path><circle cx="12" cy="10" r="3"></circle></svg>273 <span>1.33 miles from downtown</span>274 </div>275 <div class="price-row">276 <div style="display:flex; align-items:center;">277 <span class="badge">Great saving</span>278 <span class="save">Save 21%</span>279 </div>280 <div class="price">$406 <span class="sub">a night</span></div>281 </div>282 </div>283 </div>284 285 <!-- Bottom sort & filters bar -->286 <div class="bottom-bar">287 <svg class="sort icon-teal" viewBox="0 0 24 24"><path d="M3 7h10M3 12h7M3 17h4M17 7l4 4M21 7l-4 4"/></svg>288 <span>SORT & FILTERS</span>289 </div>290 291</div>292</body>293</html>