GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Honolulu - Hotel List</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #ffffff; color: #111;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13 }14 /* App bar */15 .appbar {16 position: relative;17 height: 140px;18 padding: 40px 40px 20px 40px;19 }20 .appbar .title {21 text-align: center; font-size: 40px; font-weight: 600; line-height: 60px;22 }23 .icon-btn {24 position: absolute; top: 48px;25 width: 72px; height: 72px; border-radius: 36px;26 display: flex; align-items: center; justify-content: center;27 background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.08);28 }29 .icon-left { left: 24px; }30 .icon-right { right: 24px; }31 32 /* Filter chips */33 .filters {34 display: flex; gap: 24px;35 padding: 24px 40px 28px 40px;36 }37 .chip {38 height: 96px; padding: 0 40px;39 border-radius: 48px; border: 2px solid #E5E5E5;40 display: inline-flex; align-items: center; gap: 18px;41 font-size: 34px; color: #111; background: #fff;42 box-shadow: 0 2px 0 rgba(0,0,0,0.04) inset;43 }44 .chip.filled {45 background: #000; color: #fff; border-color: #000;46 font-weight: 600;47 }48 .chip svg { width: 40px; height: 40px; }49 .chip .subtle-arrow { font-size: 34px; color: #666; }50 51 /* Cards */52 .card {53 margin-top: 18px;54 border-top: 1px solid #eee;55 }56 .hero-img {57 position: relative;58 width: 1080px; height: 380px;59 background: #E0E0E0; border-bottom: 1px solid #BDBDBD;60 display: flex; align-items: center; justify-content: center;61 color: #757575; font-size: 34px; letter-spacing: 0.2px;62 }63 .img-label { background: rgba(255,255,255,0.85); padding: 10px 16px; border-radius: 16px; border: 1px solid #BDBDBD; }64 .img-badge {65 position: absolute; left: 24px; bottom: 24px;66 background: #1fd07a; color: #111; font-weight: 700;67 border-radius: 18px; padding: 12px 18px; font-size: 28px;68 display: flex; align-items: center; gap: 10px;69 }70 .carousel-dots {71 position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);72 display: flex; gap: 12px;73 }74 .dot { width: 14px; height: 14px; border-radius: 7px; background: rgba(255,255,255,0.8); }75 .dot.active { width: 18px; height: 18px; border-radius: 9px; background: #fff; }76 77 .favorite-circle {78 position: absolute; right: 24px; top: 24px;79 width: 92px; height: 92px; border-radius: 46px;80 background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.08);81 display: flex; align-items: center; justify-content: center;82 }83 84 .content {85 position: relative;86 padding: 36px 40px 40px 40px;87 background: #fff;88 }89 .content h2 {90 font-size: 40px; margin: 0 0 26px 0; font-weight: 700;91 }92 .rating-row {93 display: flex; align-items: center; gap: 16px;94 margin-bottom: 16px;95 font-size: 30px; color: #666;96 }97 .green-dot {98 width: 26px; height: 26px; border-radius: 13px; background: #1fd07a; display: inline-block;99 }100 .subtitle { font-size: 32px; color: #666; margin-bottom: 18px; }101 .link { font-size: 34px; color: #444; text-decoration: underline; margin-bottom: 18px; display: inline-block; }102 .price { font-size: 54px; font-weight: 700; margin: 12px 0 10px 0; }103 .site { font-size: 32px; color: #666; margin-bottom: 20px; }104 .mobile-rate {105 display: inline-flex; align-items: center; gap: 14px;106 background: #c9f1dd; color: #106b4c;107 padding: 16px 20px; border-radius: 14px;108 font-size: 30px; font-weight: 600; border: 1px solid #a4dfc1;109 margin-bottom: 18px;110 }111 .free { font-size: 30px; color: #757575; margin-top: 12px; }112 .cta {113 position: absolute; right: 40px; top: 160px;114 background: #f4b000; color: #111; border: none;115 padding: 26px 40px; border-radius: 48px; font-size: 34px; font-weight: 700;116 box-shadow: 0 2px 0 rgba(0,0,0,0.06);117 }118 119 /* Divider */120 .divider { height: 1px; background: #eee; margin: 18px 0; }121 122 /* Bottom navigation */123 .bottom-nav {124 position: absolute; bottom: 0; left: 0; width: 1080px; height: 210px;125 background: #fff; border-top: 1px solid #e6e6e6;126 display: flex; align-items: center; justify-content: space-around;127 }128 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 20%; }129 .nav-item svg { width: 52px; height: 52px; }130 .nav-label { font-size: 28px; color: #666; }131 .nav-item.active .nav-label { color: #111; font-weight: 600; }132 .active-indicator {133 position: absolute; top: 0;134 width: 140px; height: 8px; background: #1fd07a; border-radius: 4px;135 left: 50%; transform: translateX(-50%);136 }137 .gesture-bar {138 position: absolute; bottom: 220px; left: 50%; transform: translateX(-50%);139 width: 360px; height: 16px; background: #cfcfcf; border-radius: 8px;140 }141</style>142</head>143<body>144<div id="render-target">145 <!-- App Bar -->146 <div class="appbar">147 <div class="icon-btn icon-left">148 <svg viewBox="0 0 24 24">149 <path d="M15 3 L6 12 L15 21" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>150 </svg>151 </div>152 <div class="title">Honolulu</div>153 <div class="icon-btn icon-right">154 <svg viewBox="0 0 24 24">155 <circle cx="11" cy="11" r="8" stroke="#111" stroke-width="2.5" fill="none"/>156 <path d="M20 20 L16 16" stroke="#111" stroke-width="2.5" stroke-linecap="round"/>157 </svg>158 </div>159 </div>160 161 <!-- Filters -->162 <div class="filters">163 <div class="chip filled">Map</div>164 <div class="chip">165 <span>Jan 24</span>166 <span class="subtle-arrow">→</span>167 <span>29</span>168 </div>169 <div class="chip">170 <svg viewBox="0 0 24 24">171 <circle cx="12" cy="8" r="4" fill="#111"/>172 <path d="M4 22 C4 16 20 16 20 22" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round"/>173 </svg>174 <span>1</span>175 </div>176 <div class="chip">177 <svg viewBox="0 0 24 24">178 <path d="M4 7 H18" stroke="#111" stroke-width="2.5" stroke-linecap="round"/>179 <circle cx="7" cy="7" r="2" fill="#111"/>180 <path d="M4 13 H20" stroke="#111" stroke-width="2.5" stroke-linecap="round"/>181 <circle cx="14" cy="13" r="2" fill="#111"/>182 <path d="M6 19 H20" stroke="#111" stroke-width="2.5" stroke-linecap="round"/>183 <circle cx="18" cy="19" r="2" fill="#111"/>184 </svg>185 <span>Filters</span>186 </div>187 </div>188 189 <!-- Card 1 -->190 <div class="card">191 <div class="hero-img">192 <div class="img-label">[IMG: Waikiki beach aerial]</div>193 <div class="img-badge">2023</div>194 <div class="carousel-dots">195 <div class="dot active"></div>196 <div class="dot"></div>197 <div class="dot"></div>198 </div>199 </div>200 <div class="content">201 <h2>2. OUTRIGGER Waikiki Beach Resort</h2>202 <div class="rating-row">203 <span class="green-dot"></span>204 <span class="green-dot"></span>205 <span class="green-dot"></span>206 <span class="green-dot"></span>207 <span>6,820</span>208 </div>209 <div class="subtitle">Waikiki</div>210 <div class="link">Visit website ↗</div>211 <div class="price">$450</div>212 <div class="site">Expedia.com ↗</div>213 <div class="mobile-rate">214 <svg viewBox="0 0 24 24">215 <rect x="6" y="3" width="12" height="18" rx="2" ry="2" stroke="#106b4c" stroke-width="2" fill="none"/>216 <rect x="10" y="18" width="4" height="1.8" fill="#106b4c"/>217 </svg>218 <span>Mobile rate</span>219 </div>220 <div class="free">Free cancellation • Reserve now, pay at stay</div>221 <button class="cta">View deal</button>222 </div>223 </div>224 225 <div class="divider"></div>226 227 <!-- Card 2 -->228 <div class="card">229 <div class="hero-img">230 <div class="img-label">[IMG: Oceanfront pool at night]</div>231 <div class="favorite-circle">232 <svg viewBox="0 0 24 24">233 <path d="M12 20 C12 20 5 15 5 9 C5 6.5 7 5 9 5 C10.5 5 12 6.2 12 6.2 C12 6.2 13.5 5 15 5 C17 5 19 6.5 19 9 C19 15 12 20 12 20 Z" stroke="#111" stroke-width="2.2" fill="none" stroke-linejoin="round"/>234 </svg>235 </div>236 <div class="img-badge">2023</div>237 <div class="carousel-dots">238 <div class="dot active"></div>239 <div class="dot"></div>240 <div class="dot"></div>241 <div class="dot"></div>242 </div>243 </div>244 <div class="content">245 <h2>3. Halekulani Hotel</h2>246 <div class="rating-row">247 <span class="green-dot"></span>248 <span class="green-dot"></span>249 <span class="green-dot"></span>250 <span class="green-dot"></span>251 <span>3,453</span>252 </div>253 <div class="subtitle">Waikiki</div>254 <div class="price">$1,003</div>255 <div class="site">Trip.com ↗</div>256 <button class="cta" style="top: 130px;">View deal</button>257 </div>258 </div>259 260 <!-- Gesture Bar -->261 <div class="gesture-bar"></div>262 263 <!-- Bottom Navigation -->264 <div class="bottom-nav">265 <div class="nav-item">266 <svg viewBox="0 0 24 24">267 <path d="M3 10 L12 3 L21 10" stroke="#111" stroke-width="2.2" fill="none" stroke-linecap="round"/>268 <rect x="6" y="10" width="12" height="10" stroke="#111" stroke-width="2.2" fill="none" rx="1"/>269 </svg>270 <div class="nav-label">Explore</div>271 </div>272 <div class="nav-item">273 <svg viewBox="0 0 24 24">274 <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2.2" fill="none"/>275 <path d="M20 20 L16 16" stroke="#111" stroke-width="2.2" stroke-linecap="round"/>276 </svg>277 <div class="nav-label">Search</div>278 </div>279 <div class="nav-item active" style="position: relative;">280 <div class="active-indicator"></div>281 <svg viewBox="0 0 24 24">282 <path d="M12 20 C12 20 5 15 5 9 C5 6.5 7 5 9 5 C10.5 5 12 6.2 12 6.2 C12 6.2 13.5 5 15 5 C17 5 19 6.5 19 9 C19 15 12 20 12 20 Z" stroke="#111" stroke-width="2.2" fill="none" stroke-linejoin="round"/>283 </svg>284 <div class="nav-label">Plan</div>285 </div>286 <div class="nav-item">287 <svg viewBox="0 0 24 24">288 <path d="M5 19 L15 9 L19 13 L9 23 L5 23 Z" stroke="#111" stroke-width="2" fill="none" stroke-linejoin="round"/>289 <path d="M13 7 L17 11" stroke="#111" stroke-width="2" stroke-linecap="round"/>290 </svg>291 <div class="nav-label">Review</div>292 </div>293 <div class="nav-item">294 <svg viewBox="0 0 24 24">295 <circle cx="12" cy="8" r="4" stroke="#111" stroke-width="2.2" fill="none"/>296 <path d="M4 22 C4 16 20 16 20 22" stroke="#111" stroke-width="2.2" fill="none" stroke-linecap="round"/>297 </svg>298 <div class="nav-label">Account</div>299 </div>300 </div>301</div>302</body>303</html>