GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Itinerary UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ECEFF4;14 border-radius: 0;15 box-shadow: none;16 color: #0F2140;17 }18 19 /* Status bar (simplified) */20 .status-bar {21 position: absolute;22 top: 16px;23 left: 28px;24 right: 28px;25 height: 36px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: white;30 z-index: 5;31 pointer-events: none;32 }33 .status-left, .status-right { display: flex; align-items: center; gap: 22px; }34 .status-time { font-weight: 600; font-size: 28px; letter-spacing: 0.2px; }35 .status-dot { width: 10px; height: 10px; background: rgba(255,255,255,0.85); border-radius: 50%; }36 .status-icon {37 width: 22px; height: 22px; border-radius: 50%;38 border: 2px solid rgba(255,255,255,0.9);39 }40 41 /* Hero section */42 .hero {43 position: relative;44 height: 560px;45 }46 .hero-img {47 position: absolute;48 inset: 0;49 background: #E0E0E0;50 border-bottom: 1px solid #BDBDBD;51 display: flex; align-items: center; justify-content: center;52 color: #757575;53 font-size: 28px;54 }55 56 .hero-overlay {57 position: absolute;58 left: 48px;59 right: 48px;60 bottom: 120px;61 color: #FFFFFF;62 }63 .hero-title {64 font-size: 64px;65 line-height: 1.08;66 font-weight: 800;67 margin: 0 0 16px 0;68 text-shadow: 0 2px 4px rgba(0,0,0,0.35);69 }70 .hero-sub {71 font-size: 32px;72 opacity: 0.95;73 font-weight: 500;74 text-shadow: 0 1px 3px rgba(0,0,0,0.35);75 }76 77 /* Hero action icons */78 .hero-actions {79 position: absolute;80 top: 88px;81 left: 32px;82 right: 32px;83 display: flex;84 align-items: center;85 justify-content: space-between;86 z-index: 3;87 }88 .round-btn {89 width: 72px; height: 72px;90 background: rgba(0,0,0,0.45);91 border-radius: 36px;92 display: flex; align-items: center; justify-content: center;93 }94 .icon-white { fill: none; stroke: #FFFFFF; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }95 96 .right-actions { display: flex; align-items: center; gap: 18px; }97 98 /* Tabs pill overlapping hero bottom */99 .tabs-wrap {100 position: absolute;101 left: 32px;102 right: 32px;103 top: 520px;104 height: 120px;105 z-index: 4;106 }107 .tabs {108 height: 120px;109 background: linear-gradient(180deg, #FFFFFF 0%, #FBF9F4 100%);110 border-radius: 60px;111 box-shadow: 0 10px 24px rgba(0,0,0,0.18);112 display: flex; align-items: center;113 padding: 0 36px;114 gap: 64px;115 }116 .tab-item {117 font-size: 36px;118 color: #273C6B;119 opacity: 0.85;120 position: relative;121 padding-bottom: 20px;122 }123 .tab-item.active { color: #3E5CF4; font-weight: 700; opacity: 1; }124 .tab-item.active::after {125 content: "";126 position: absolute;127 height: 6px; width: 110px;128 left: 0; right: 0; bottom: 0;129 margin: 0 auto;130 background: #3E5CF4;131 border-radius: 3px;132 }133 .tabs-plus {134 margin-left: auto;135 width: 64px; height: 64px;136 border-radius: 32px;137 background: #F2F3FF;138 display: flex; align-items: center; justify-content: center;139 border: 2px solid #D9DDFF;140 }141 142 /* Content area */143 .content {144 position: absolute;145 top: 660px; /* below tabs overlap */146 left: 0; right: 0;147 padding: 40px 48px 160px 48px;148 }149 .day {150 margin-bottom: 70px;151 }152 .day-header {153 display: flex; align-items: center; justify-content: space-between;154 margin-bottom: 28px;155 }156 .day-title {157 font-size: 48px;158 font-weight: 800;159 color: #1B2A45;160 letter-spacing: 0.3px;161 }162 .trash {163 width: 52px; height: 52px;164 background: #ECEFF4;165 border-radius: 12px;166 display: flex; align-items: center; justify-content: center;167 border: 2px solid #C9CDD6;168 }169 .trash svg { stroke: #9AA3AF; stroke-width: 5; }170 171 .add-card {172 border: 4px solid #4760F3;173 border-radius: 24px;174 height: 180px;175 display: flex; align-items: center;176 padding: 0 40px;177 gap: 24px;178 background: #F9FAFF;179 }180 .add-icon {181 width: 64px; height: 64px; border-radius: 32px;182 border: 3px solid #4760F3; display: flex; align-items: center; justify-content: center;183 }184 .add-icon svg { stroke: #4760F3; stroke-width: 6; }185 .add-text {186 font-size: 44px; font-weight: 700; color: #4760F3;187 }188 189 /* Bottom gesture bar */190 .gesture-bar {191 position: absolute;192 bottom: 24px; left: 50%;193 transform: translateX(-50%);194 width: 300px; height: 10px;195 background: #D1D5DB;196 border-radius: 6px;197 }198</style>199</head>200<body>201<div id="render-target">202 203 <!-- Status bar (simple, decorative) -->204 <div class="status-bar">205 <div class="status-left">206 <div class="status-time">12:26</div>207 <div class="status-icon"></div>208 <div class="status-icon"></div>209 <div class="status-dot"></div>210 </div>211 <div class="status-right">212 <div class="status-icon"></div>213 <div class="status-icon"></div>214 </div>215 </div>216 217 <!-- Hero with image and overlay -->218 <div class="hero">219 <div class="hero-img">[IMG: Hot Air Balloon Sky]</div>220 221 <div class="hero-actions">222 <div class="round-btn">223 <svg width="40" height="40" viewBox="0 0 40 40">224 <path class="icon-white" d="M26 8 L14 20 L26 32"></path>225 </svg>226 </div>227 <div class="right-actions">228 <div class="round-btn">229 <!-- Share -->230 <svg width="40" height="40" viewBox="0 0 40 40">231 <path class="icon-white" d="M26 10c4 0 4 6 0 6s-4-6 0-6zM14 18c4 0 4 6 0 6s-4-6 0-6zM26 26c4 0 4 6 0 6s-4-6 0-6z"></path>232 <path class="icon-white" d="M16 21 L24 15 M16 23 L24 29"></path>233 </svg>234 </div>235 <div class="round-btn">236 <!-- Edit pencil -->237 <svg width="40" height="40" viewBox="0 0 40 40">238 <path class="icon-white" d="M10 30 L16 30 L30 16 L24 10 L10 24 Z"></path>239 <path class="icon-white" d="M22 12 L28 18"></path>240 </svg>241 </div>242 </div>243 </div>244 245 <div class="hero-overlay">246 <h1 class="hero-title">4-day Itinerary for Vancouver</h1>247 <div class="hero-sub">Dec 16–Dec 19 (4 days) | 0 attractions</div>248 </div>249 </div>250 251 <!-- Tabs overlapping -->252 <div class="tabs-wrap">253 <div class="tabs">254 <div class="tab-item active">Dec 16</div>255 <div class="tab-item">Dec 17</div>256 <div class="tab-item">Dec 18</div>257 <div class="tab-item">Dec 19</div>258 <div class="tabs-plus">259 <svg width="36" height="36" viewBox="0 0 36 36">260 <path d="M18 6 L18 30 M6 18 L30 18" stroke="#3E5CF4" stroke-width="4" stroke-linecap="round"></path>261 </svg>262 </div>263 </div>264 </div>265 266 <!-- Content sections -->267 <div class="content">268 269 <div class="day">270 <div class="day-header">271 <div class="day-title">Sat, Dec 16</div>272 <div class="trash">273 <svg width="32" height="32" viewBox="0 0 40 40">274 <path d="M12 14 L28 14 M16 14 L16 30 M24 14 L24 30 M14 10 L26 10 L25 14 L15 14 Z M14 14 L14 30 L26 30 L26 14" fill="none" stroke="#9AA3AF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>275 </svg>276 </div>277 </div>278 <div class="add-card">279 <div class="add-icon">280 <svg width="40" height="40" viewBox="0 0 40 40">281 <circle cx="20" cy="20" r="18" fill="none" stroke="#4760F3" stroke-width="3"></circle>282 <path d="M20 10 L20 30 M10 20 L30 20" stroke="#4760F3" stroke-width="4" stroke-linecap="round"></path>283 </svg>284 </div>285 <div class="add-text">Add Attractions</div>286 </div>287 </div>288 289 <div class="day">290 <div class="day-header">291 <div class="day-title">Sun, Dec 17</div>292 <div class="trash">293 <svg width="32" height="32" viewBox="0 0 40 40">294 <path d="M12 14 L28 14 M16 14 L16 30 M24 14 L24 30 M14 10 L26 10 L25 14 L15 14 Z M14 14 L14 30 L26 30 L26 14" fill="none" stroke="#9AA3AF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>295 </svg>296 </div>297 </div>298 <div class="add-card">299 <div class="add-icon">300 <svg width="40" height="40" viewBox="0 0 40 40">301 <circle cx="20" cy="20" r="18" fill="none" stroke="#4760F3" stroke-width="3"></circle>302 <path d="M20 10 L20 30 M10 20 L30 20" stroke="#4760F3" stroke-width="4" stroke-linecap="round"></path>303 </svg>304 </div>305 <div class="add-text">Add Attractions</div>306 </div>307 </div>308 309 <div class="day">310 <div class="day-header">311 <div class="day-title">Mon, Dec 18</div>312 <div class="trash">313 <svg width="32" height="32" viewBox="0 0 40 40">314 <path d="M12 14 L28 14 M16 14 L16 30 M24 14 L24 30 M14 10 L26 10 L25 14 L15 14 Z M14 14 L14 30 L26 30 L26 14" fill="none" stroke="#9AA3AF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>315 </svg>316 </div>317 </div>318 <div class="add-card">319 <div class="add-icon">320 <svg width="40" height="40" viewBox="0 0 40 40">321 <circle cx="20" cy="20" r="18" fill="none" stroke="#4760F3" stroke-width="3"></circle>322 <path d="M20 10 L20 30 M10 20 L30 20" stroke="#4760F3" stroke-width="4" stroke-linecap="round"></path>323 </svg>324 </div>325 <div class="add-text">Add Attractions</div>326 </div>327 </div>328 329 <div class="day">330 <div class="day-header">331 <div class="day-title">Tue, Dec 19</div>332 <div class="trash">333 <svg width="32" height="32" viewBox="0 0 40 40">334 <path d="M12 14 L28 14 M16 14 L16 30 M24 14 L24 30 M14 10 L26 10 L25 14 L15 14 Z M14 14 L14 30 L26 30 L26 14" fill="none" stroke="#9AA3AF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>335 </svg>336 </div>337 </div>338 <div class="add-card">339 <div class="add-icon">340 <svg width="40" height="40" viewBox="0 0 40 40">341 <circle cx="20" cy="20" r="18" fill="none" stroke="#4760F3" stroke-width="3"></circle>342 <path d="M20 10 L20 30 M10 20 L30 20" stroke="#4760F3" stroke-width="4" stroke-linecap="round"></path>343 </svg>344 </div>345 <div class="add-text">Add Attractions</div>346 </div>347 </div>348 349 </div>350 351 <!-- Bottom gesture bar -->352 <div class="gesture-bar"></div>353 354</div>355</body>356</html>