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>Itinerary UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #EEF2F8;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 100px;24 padding: 0 40px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #2b2f36;29 font-size: 34px;30 }31 .status-left, .status-right {32 display: flex;33 align-items: center;34 gap: 22px;35 }36 .status-dot {37 width: 10px;38 height: 10px;39 background: #4c4c4c;40 border-radius: 50%;41 display: inline-block;42 }43 44 /* App bar */45 .app-bar {46 position: absolute;47 top: 100px;48 left: 0;49 width: 1080px;50 height: 120px;51 padding: 0 24px;52 display: flex;53 align-items: center;54 justify-content: space-between;55 color: #2b2f36;56 }57 .app-left, .app-right {58 display: flex;59 align-items: center;60 gap: 36px;61 }62 .icon-btn {63 width: 88px;64 height: 88px;65 border-radius: 12px;66 display: flex;67 align-items: center;68 justify-content: center;69 color: #394874;70 }71 .icon-btn svg { width: 48px; height: 48px; }72 73 /* Date tabs */74 .date-tabs {75 position: absolute;76 top: 220px;77 left: 0;78 width: 1080px;79 height: 120px;80 background: linear-gradient(180deg, #F5F7FF 0%, #FFF7E9 100%);81 display: flex;82 align-items: flex-end;83 padding: 0 36px 18px 36px;84 box-sizing: border-box;85 border-bottom: 1px solid #dfe5f0;86 }87 .tab {88 margin-right: 60px;89 font-size: 44px;90 color: #5b6a88;91 opacity: 0.85;92 }93 .tab.active {94 color: #4B66FF;95 position: relative;96 font-weight: 600;97 }98 .tab.active::after {99 content: "";100 position: absolute;101 left: 0;102 bottom: -18px;103 height: 6px;104 width: 140px;105 background: #4B66FF;106 border-radius: 3px;107 }108 .tab-plus {109 margin-left: auto;110 display: flex;111 align-items: center;112 gap: 10px;113 color: #3f4d7a;114 font-size: 42px;115 }116 117 /* Content area */118 .content {119 position: absolute;120 top: 340px;121 left: 0;122 width: 100%;123 padding: 0 36px;124 box-sizing: border-box;125 }126 127 .rating-line {128 display: flex;129 align-items: center;130 gap: 20px;131 font-size: 36px;132 color: #2f3a52;133 margin: 12px 0 12px 0;134 }135 .rating-pill {136 background: #264BFF;137 color: #fff;138 font-weight: 700;139 padding: 6px 14px;140 border-radius: 12px;141 font-size: 32px;142 }143 .review-count { color: #73829d; font-size: 34px; }144 145 .text-bubble {146 background: #FFFFFF;147 border-radius: 20px;148 padding: 24px;149 font-size: 36px;150 line-height: 1.5;151 color: #41536c;152 box-shadow: 0 1px 0 #e1e6ef;153 }154 .show-more { color: #4B66FF; font-weight: 600; }155 156 .add-btn {157 margin: 32px 8px 40px 8px;158 border: 3px solid #5570FF;159 color: #5570FF;160 border-radius: 24px;161 height: 140px;162 display: flex;163 align-items: center;164 justify-content: center;165 gap: 24px;166 font-size: 44px;167 font-weight: 600;168 background: #F8FAFF;169 }170 .add-btn svg { width: 56px; height: 56px; }171 172 /* Section headers */173 .day-header {174 display: flex;175 align-items: center;176 justify-content: space-between;177 color: #2b3a57;178 font-size: 52px;179 font-weight: 700;180 margin: 16px 0 20px 0;181 }182 .day-left {183 display: flex;184 align-items: center;185 gap: 18px;186 }187 .day-sub {188 font-weight: 500;189 color: #7282a2;190 font-size: 44px;191 margin-left: 12px;192 }193 .small-icon { width: 52px; height: 52px; color: #7a8cae; }194 .small-icon svg { width: 52px; height: 52px; }195 196 .img-card {197 position: relative;198 width: 100%;199 height: 560px;200 border-radius: 28px;201 overflow: hidden;202 margin-bottom: 18px;203 background: #E0E0E0;204 border: 1px solid #BDBDBD;205 display: flex;206 align-items: center;207 justify-content: center;208 color: #757575;209 font-size: 40px;210 font-weight: 600;211 }212 .img-overlay {213 position: absolute;214 left: 0;215 right: 0;216 bottom: 0;217 padding: 18px 20px;218 display: flex;219 align-items: center;220 justify-content: space-between;221 color: #fff;222 font-size: 36px;223 background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%);224 }225 .overlay-left {226 display: flex;227 align-items: center;228 gap: 12px;229 }230 .overlay-left svg { width: 40px; height: 40px; }231 .overlay-right {232 background: rgba(38, 75, 255, 0.9);233 border-radius: 14px;234 padding: 6px 12px;235 font-size: 32px;236 }237 238 .place-title {239 display: flex;240 align-items: center;241 justify-content: space-between;242 font-size: 56px;243 font-weight: 700;244 color: #2b3a57;245 }246 .place-title .chevron { color: #7282a2; }247 .place-title .chevron svg { width: 44px; height: 44px; }248 249 .place-rating-row {250 display: flex;251 align-items: center;252 gap: 18px;253 margin: 14px 0;254 }255 .place-rating-row .rating-pill { font-size: 34px; padding: 6px 16px; }256 .place-rating-row .review-count { font-size: 34px; }257 258 /* Bottom handle (gesture bar) */259 .gesture-bar {260 position: absolute;261 bottom: 28px;262 left: 50%;263 transform: translateX(-50%);264 width: 300px;265 height: 12px;266 border-radius: 12px;267 background: #1b1b1b;268 opacity: 0.4;269 }270</style>271</head>272<body>273<div id="render-target">274 275 <!-- Status bar -->276 <div class="status-bar">277 <div class="status-left">278 <div>12:32</div>279 <div class="status-dot"></div>280 <div class="status-dot"></div>281 <div class="status-dot"></div>282 <div class="status-dot"></div>283 </div>284 <div class="status-right">285 <div class="status-dot"></div>286 <div class="status-dot"></div>287 <div class="status-dot"></div>288 </div>289 </div>290 291 <!-- App bar -->292 <div class="app-bar">293 <div class="app-left">294 <div class="icon-btn">295 <svg viewBox="0 0 24 24"><path d="M15.5 4l-8 8 8 8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>296 </div>297 </div>298 <div class="app-right">299 <div class="icon-btn" title="Location">300 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="none" stroke="currentColor" stroke-width="2"/></svg>301 </div>302 <div class="icon-btn" title="Share">303 <svg viewBox="0 0 24 24"><path d="M18 8a3 3 0 1 0-2.9-3.5L8.5 8.6a3 3 0 0 0 0 6.8l6.6 4.1A3 3 0 1 0 17 17l-6.6-4.1" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>304 </div>305 <div class="icon-btn" title="Edit">306 <svg viewBox="0 0 24 24"><path d="M3 17.5V21h3.5L18.6 8.9l-3.5-3.5L3 17.5zM20.5 7l-3.5-3.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>307 </div>308 </div>309 </div>310 311 <!-- Date tabs -->312 <div class="date-tabs">313 <div class="tab active">Dec 16</div>314 <div class="tab">Dec 17</div>315 <div class="tab">Dec 18</div>316 <div class="tab">Dec 19</div>317 <div class="tab-plus">318 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 7v10M7 12h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>319 </div>320 </div>321 322 <!-- Content -->323 <div class="content">324 325 <!-- First text card -->326 <div class="rating-line">327 <span class="rating-pill">4.5/5</span>328 <span class="review-count">175 reviews</span>329 </div>330 <div class="text-bubble">331 The 52-hectare green space is the Canadian Botanical Display Garden and Vancouver's largest urban park. The evergreen greenery and sea of flowers make this one of Vancouver's most popular outdoor locations for wedding photos. The famous Four Seasons Restaurant is built on a prominent cliff in the park and has a good ni...332 <span class="show-more">Show More</span>333 </div>334 335 <div class="add-btn">336 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 7v10M7 12h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>337 <div>Add Attractions</div>338 </div>339 340 <!-- Day header -->341 <div class="day-header">342 <div class="day-left">343 <div class="small-icon">344 <svg viewBox="0 0 24 24"><path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" fill="none" stroke="currentColor" stroke-width="2"/><path d="M19 12a7 7 0 1 1-14 0 7 7 0 0 1 14 0z" fill="none" stroke="currentColor" stroke-width="2"/></svg>345 </div>346 <div>Mon, Dec 18 <span class="day-sub">Vancouver</span></div>347 </div>348 <div class="small-icon">349 <svg viewBox="0 0 24 24"><path d="M4 6h16v14H4zM9 6V4h6v2" fill="none" stroke="currentColor" stroke-width="2"/></svg>350 </div>351 </div>352 353 <!-- Image card -->354 <div class="img-card">355 [IMG: Gastown street at night with steam clock]356 <div class="img-overlay">357 <div class="overlay-left">358 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"/><path d="M12 6v6l4 2" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>359 <div>Suggested duration: 0.5-1 hour</div>360 </div>361 <div class="overlay-right">1/4</div>362 </div>363 </div>364 365 <div class="place-title">366 <div>Gastown</div>367 <div class="chevron">368 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>369 </div>370 </div>371 <div class="place-rating-row">372 <span class="rating-pill">4.4/5</span>373 <span class="review-count">384 reviews</span>374 </div>375 <div class="text-bubble">376 Gastown is located in downtown Vancouver, the birthplace of Vancouver. The Victorian buildings on the streets and alleys retain the appearance of the early 20th century, and there are also trendy and creative shops. Vancouver's historic landmark building - the steam clock is located here. Wander the narrow streets of red brick and c...377 <span class="show-more">Show More</span>378 </div>379 380 <div class="add-btn">381 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 7v10M7 12h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>382 <div>Add Attractions</div>383 </div>384 385 <!-- Next day header -->386 <div class="day-header">387 <div class="day-left">388 <div class="small-icon">389 <svg viewBox="0 0 24 24"><path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" fill="none" stroke="currentColor" stroke-width="2"/><path d="M19 12a7 7 0 1 1-14 0 7 7 0 0 1 14 0z" fill="none" stroke="currentColor" stroke-width="2"/></svg>390 </div>391 <div>Tue, Dec 19 <span class="day-sub">Vancouver</span></div>392 </div>393 <div class="small-icon">394 <svg viewBox="0 0 24 24"><path d="M4 6h16v14H4zM9 6V4h6v2" fill="none" stroke="currentColor" stroke-width="2"/></svg>395 </div>396 </div>397 398 <div class="img-card" style="height: 380px;">399 [IMG: Vancouver aerial waterfront]400 </div>401 402 </div>403 404 <div class="gesture-bar"></div>405</div>406</body>407</html>