GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Honolulu UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff; color: #111;13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;14 }15 16 /* Status bar */17 .status-bar {18 height: 90px;19 padding: 0 40px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 font-size: 34px;24 color: #1a1a1a;25 }26 .sb-left { display: flex; align-items: center; gap: 20px; }27 .sb-center { display: flex; align-items: center; gap: 18px; }28 .dot { width: 18px; height: 18px; border-radius: 50%; background: #6B6B6B; opacity: 0.6; }29 .sb-right { display: flex; align-items: center; gap: 24px; }30 .icon { display: inline-block; }31 .icon svg { width: 40px; height: 40px; }32 33 /* Header with title and search */34 .header {35 height: 110px;36 padding: 0 40px;37 display: flex;38 align-items: center;39 justify-content: space-between;40 }41 .header .title {42 font-size: 46px;43 font-weight: 600;44 letter-spacing: 0.3px;45 }46 .icon-btn { width: 60px; height: 60px; border: none; background: transparent; padding: 0; cursor: default; }47 48 /* Tabs */49 .tabs {50 display: flex;51 gap: 44px;52 padding: 20px 40px 24px 40px;53 border-bottom: 1px solid #eee;54 font-size: 40px;55 white-space: nowrap;56 }57 .tab { color: #555; }58 .tab.active { color: #000; font-weight: 700; position: relative; }59 .tab.active::after {60 content: "";61 position: absolute; left: 0; bottom: -26px;62 width: 120px; height: 6px; background: #000; border-radius: 3px;63 }64 65 /* Hero image */66 .hero {67 position: relative;68 width: 100%;69 height: 540px;70 overflow: hidden;71 }72 .img-ph {73 width: 100%; height: 100%;74 background: #E0E0E0;75 border-top: 1px solid #BDBDBD;76 border-bottom: 1px solid #BDBDBD;77 display: flex; align-items: center; justify-content: center;78 color: #757575; font-size: 36px;79 }80 .photo-count {81 position: absolute; right: 40px; bottom: 26px;82 background: #000; color: #fff;83 padding: 14px 22px; border-radius: 24px;84 font-size: 34px; font-weight: 700;85 }86 87 /* Content section */88 .content {89 padding: 50px 44px 0 44px;90 }91 .big-title {92 font-size: 96px; font-weight: 800; margin: 10px 0 40px 0;93 }94 .section-title {95 font-size: 46px; font-weight: 700; margin: 0 0 22px 0;96 }97 .para {98 font-size: 36px; line-height: 52px; color: #333; margin-bottom: 30px;99 }100 .read-more {101 font-size: 36px; color: #333; text-decoration: underline; display: inline-flex; align-items: center; gap: 10px;102 }103 .read-more svg { width: 30px; height: 30px; }104 105 /* View map button */106 .map-btn {107 margin: 40px 0 60px 0;108 width: 640px; height: 120px;109 background: #000; color: #fff;110 border-radius: 60px;111 display: flex; align-items: center; justify-content: center; gap: 18px;112 font-size: 40px; font-weight: 700;113 }114 .map-btn .pin svg { width: 44px; height: 44px; }115 116 /* What to do */117 .row-between { display: flex; align-items: center; justify-content: space-between; }118 .see-all { font-size: 36px; color: #333; text-decoration: underline; }119 .subtext { font-size: 36px; line-height: 52px; color: #5a5a5a; margin-top: 10px; }120 121 /* Cards slider mock */122 .card-strip {123 margin-top: 30px;124 display: flex; gap: 24px;125 padding: 0 44px 0 0;126 overflow: hidden;127 }128 .card {129 width: 880px; height: 320px;130 background: #E0E0E0; border: 1px solid #BDBDBD;131 border-radius: 22px;132 display: flex; align-items: center; justify-content: center;133 color: #757575; font-size: 34px;134 position: relative;135 }136 .card .active-bar {137 position: absolute; top: 0; left: 50%;138 transform: translateX(-50%);139 width: 160px; height: 10px; background: #16c79a; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;140 }141 142 /* Bottom navigation */143 .bottom-nav {144 position: absolute; left: 0; bottom: 60px;145 width: 100%; height: 160px;146 background: #fff; border-top: 1px solid #e5e5e5;147 display: flex; align-items: center; justify-content: space-around;148 }149 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #6d6d6d; }150 .nav-item svg { width: 56px; height: 56px; }151 .nav-item .label { font-size: 32px; }152 .nav-item.active { color: #000; }153 .active-indicator {154 position: absolute; top: -8px; left: 50%;155 transform: translateX(-50%);156 width: 140px; height: 10px; background: #16c79a; border-radius: 6px;157 }158 159 /* Home indicator bar */160 .home-indicator {161 position: absolute; left: 50%; bottom: 18px;162 transform: translateX(-50%);163 width: 360px; height: 12px; background: #bfbfbf; border-radius: 8px;164 }165</style>166</head>167<body>168<div id="render-target">169 170 <!-- Status Bar -->171 <div class="status-bar">172 <div class="sb-left">173 <div>1:00</div>174 <span class="dot"></span>175 <span class="dot"></span>176 <span class="dot"></span>177 </div>178 <div class="sb-center">179 <span class="dot" style="opacity:0.3;"></span>180 <span class="dot" style="opacity:0.3;"></span>181 </div>182 <div class="sb-right">183 <span class="icon">184 <!-- WiFi icon -->185 <svg viewBox="0 0 48 48">186 <path d="M4 16c10-8 30-8 40 0" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round"/>187 <path d="M10 22c7-6 21-6 28 0" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round"/>188 <path d="M20 30c4-3 8-3 12 0" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round"/>189 <circle cx="26" cy="36" r="3" fill="#222"/>190 </svg>191 </span>192 <span class="icon">193 <!-- Battery icon -->194 <svg viewBox="0 0 60 48">195 <rect x="4" y="12" width="44" height="24" rx="4" ry="4" stroke="#222" stroke-width="3" fill="none"/>196 <rect x="8" y="16" width="36" height="16" rx="2" fill="#222"/>197 <rect x="50" y="18" width="6" height="12" rx="2" fill="#222"/>198 </svg>199 </span>200 </div>201 </div>202 203 <!-- Header -->204 <div class="header">205 <button class="icon-btn" aria-label="Back">206 <svg viewBox="0 0 48 48">207 <path d="M30 10 L14 24 L30 38" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>208 </svg>209 </button>210 <div class="title">Honolulu</div>211 <button class="icon-btn" aria-label="Search">212 <svg viewBox="0 0 48 48">213 <circle cx="20" cy="20" r="12" stroke="#111" stroke-width="4" fill="none"/>214 <path d="M32 32 L44 44" stroke="#111" stroke-width="4" stroke-linecap="round"/>215 </svg>216 </button>217 </div>218 219 <!-- Tabs -->220 <div class="tabs">221 <div class="tab active">Overview</div>222 <div class="tab">Hotels</div>223 <div class="tab">Things to do</div>224 <div class="tab">Restaurants</div>225 </div>226 227 <!-- Hero Image -->228 <div class="hero">229 <div class="img-ph">[IMG: Honolulu buildings with mountains and palm trees]</div>230 <div class="photo-count">1/999+</div>231 </div>232 233 <!-- Content -->234 <div class="content">235 <div class="big-title">Honolulu</div>236 237 <div class="section-title">About Honolulu</div>238 <div class="para">239 As the capital of Hawaii, Honolulu delivers on big-city vibes just steps from some of the best nature on the islands (in the world, really). S...240 </div>241 <div class="read-more">242 Read more243 <svg viewBox="0 0 24 24">244 <path d="M6 9 L12 15 L18 9" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>245 </svg>246 </div>247 248 <div class="map-btn">249 <span class="pin">250 <svg viewBox="0 0 48 48">251 <path d="M24 6c-7 0-12 5-12 12 0 9 12 24 12 24s12-15 12-24c0-7-5-12-12-12z" fill="#fff"/>252 <circle cx="24" cy="18" r="5" fill="#000"/>253 </svg>254 </span>255 <span>View map</span>256 </div>257 258 <div class="row-between">259 <div class="section-title" style="margin:0;">What to do</div>260 <div class="see-all">See all</div>261 </div>262 <div class="subtext">Iconic places and can’t-miss experiences that define the city</div>263 264 <div class="card-strip">265 <div class="card">266 <div class="active-bar"></div>267 [IMG: Activity card - Beach and surf]268 </div>269 <div class="card">[IMG: Activity card - City tour]</div>270 </div>271 </div>272 273 <!-- Bottom Navigation -->274 <div class="bottom-nav">275 <div class="nav-item">276 <svg viewBox="0 0 48 48">277 <path d="M6 24 L24 10 L42 24 V42 H6 Z" fill="none" stroke="#6d6d6d" stroke-width="3" stroke-linejoin="round"/>278 </svg>279 <div class="label">Explore</div>280 </div>281 <div class="nav-item">282 <svg viewBox="0 0 48 48">283 <circle cx="20" cy="20" r="12" stroke="#6d6d6d" stroke-width="3" fill="none"/>284 <path d="M30 30 L44 44" stroke="#6d6d6d" stroke-width="3" stroke-linecap="round"/>285 </svg>286 <div class="label">Search</div>287 </div>288 <div class="nav-item active" style="position: relative;">289 <div class="active-indicator"></div>290 <svg viewBox="0 0 48 48">291 <path d="M24 40 L10 26 C6 22 8 14 16 14 C20 14 22 16 24 18 C26 16 28 14 32 14 C40 14 42 22 38 26 L24 40 Z"292 fill="#000"/>293 </svg>294 <div class="label">Plan</div>295 </div>296 <div class="nav-item">297 <svg viewBox="0 0 48 48">298 <path d="M10 38 L32 10 L40 18 L18 40 L10 38 Z" fill="none" stroke="#6d6d6d" stroke-width="3" stroke-linejoin="round"/>299 <path d="M26 14 L34 22" stroke="#6d6d6d" stroke-width="3"/>300 </svg>301 <div class="label">Review</div>302 </div>303 <div class="nav-item">304 <svg viewBox="0 0 48 48">305 <circle cx="24" cy="16" r="8" fill="none" stroke="#6d6d6d" stroke-width="3"/>306 <path d="M8 42c0-8 8-12 16-12s16 4 16 12" fill="none" stroke="#6d6d6d" stroke-width="3"/>307 </svg>308 <div class="label">Account</div>309 </div>310 </div>311 312 <div class="home-indicator"></div>313</div>314</body>315</html>