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 - Dec 19</title>7<style>8 body { margin:0; padding:0; background:transparent; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#EEF2F7; color:#2b3650; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;12 }13 14 /* Status bar */15 .status-bar {16 position:absolute; top:0; left:0; right:0; height:120px;17 display:flex; align-items:center; justify-content:space-between;18 padding:0 36px; font-size:40px; color:#2b3650;19 }20 .sb-left { display:flex; align-items:center; gap:24px; }21 .sb-right { display:flex; align-items:center; gap:28px; opacity:.85; }22 .sb-dot { width:14px; height:14px; background:#70757f; border-radius:50%; display:inline-block; }23 24 /* Top app bar */25 .app-bar {26 position:absolute; top:120px; left:0; right:0; height:120px;27 display:flex; align-items:center; justify-content:space-between;28 padding:0 28px;29 }30 .app-actions { display:flex; align-items:center; gap:36px; }31 .icon-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }32 .icon { width:48px; height:48px; }33 .icon path { stroke:#2b3a5f; fill:none; stroke-width:4; }34 35 /* Tabs */36 .tabs {37 position:absolute; top:240px; left:0; right:0; height:150px;38 background:linear-gradient(180deg, #F5F7FB 0%, #FFFFFF 100%);39 display:flex; align-items:flex-end; padding:0 40px; gap:70px;40 border-bottom:1px solid #E3E7EF;41 }42 .tab { font-size:44px; color:#7a879a; padding-bottom:28px; position:relative; }43 .tab.active { color:#2f5eea; font-weight:600; }44 .tab.active::after {45 content:""; position:absolute; left:0; right:0; bottom:12px;46 height:8px; background:#2f5eea; border-radius:8px;47 }48 .tab.plus { margin-left:auto; padding-right:12px; }49 50 /* Content area */51 .content { position:absolute; top:390px; left:0; right:0; padding:0 64px 120px; }52 53 .card {54 background:#fff; border-radius:24px; box-shadow:0 1px 0 rgba(0,0,0,0.04);55 padding:32px; font-size:38px; line-height:1.45; color:#425066;56 }57 .rating-chip {58 display:inline-flex; align-items:center; gap:12px; font-weight:700; margin-bottom:12px;59 }60 .rating-oval {61 background:#2f5eea; color:#fff; border-radius:22px; padding:8px 16px; font-size:36px;62 }63 .muted { color:#7a879a; }64 65 .show-more { color:#2f5eea; font-weight:600; cursor:pointer; float:right; }66 67 .add-btn {68 margin:28px 0 22px; height:140px; border:3px solid #5F79FF; border-radius:24px;69 display:flex; align-items:center; justify-content:center; gap:24px; color:#3957d6;70 font-size:46px; font-weight:600; background:#f9fbff;71 }72 .add-btn .circle {73 width:68px; height:68px; border-radius:50%; border:4px solid #5F79FF;74 display:flex; align-items:center; justify-content:center;75 }76 77 .section-header {78 display:flex; align-items:flex-end; justify-content:space-between; margin-top:32px; margin-bottom:18px;79 }80 .section-title {81 font-size:56px; font-weight:700; color:#2b3650;82 }83 .section-title .city { font-weight:500; color:#7a879a; margin-left:12px; }84 .section-side-icons { display:flex; align-items:center; gap:22px; }85 86 /* Image card */87 .img-card {88 position:relative; width:952px; height:520px; border-radius:28px; overflow:hidden;89 background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center;90 color:#757575; font-size:40px; font-weight:600;91 }92 .img-overlay {93 position:absolute; left:0; right:0; bottom:0; height:110px;94 background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);95 display:flex; align-items:flex-end; padding:0 24px 16px;96 }97 .duration {98 display:flex; align-items:center; color:#fff; font-size:36px; font-weight:600; gap:12px;99 background:rgba(0,0,0,.35); padding:8px 14px; border-radius:18px;100 }101 .counter {102 position:absolute; right:16px; bottom:16px; background:rgba(0,0,0,.6);103 color:#fff; font-size:32px; border-radius:14px; padding:6px 12px;104 }105 106 .poi-title {107 display:flex; align-items:center; gap:12px; margin-top:22px; margin-bottom:8px;108 font-size:54px; font-weight:700; color:#2b3650;109 }110 .poi-title .chev {111 width:28px; height:28px; border-right:6px solid #6c7aa0; border-bottom:6px solid #6c7aa0;112 transform:rotate(-45deg); margin-left:8px;113 }114 115 /* Gesture bar */116 .gesture {117 position:absolute; bottom:24px; left:50%; transform:translateX(-50%);118 width:260px; height:16px; background:#0f172a; opacity:.2; border-radius:10px;119 }120 121 /* Small icons (gear, trash, etc.) */122 .mini-icon { width:52px; height:52px; }123 .mini-icon path { stroke:#8a96ad; fill:none; stroke-width:4; }124 125 .tool-icon path { stroke:#2b3a5f; fill:none; stroke-width:4; }126</style>127</head>128<body>129<div id="render-target">130 131 <!-- Status bar -->132 <div class="status-bar">133 <div class="sb-left">134 <div>12:31</div>135 <div class="sb-dot"></div>136 <div class="sb-dot"></div>137 <div class="sb-dot"></div>138 <div class="sb-dot"></div>139 </div>140 <div class="sb-right">141 <div class="sb-dot"></div>142 <div class="sb-dot"></div>143 </div>144 </div>145 146 <!-- App bar with back and actions -->147 <div class="app-bar">148 <div class="icon-btn" title="Back">149 <svg class="icon" viewBox="0 0 24 24">150 <path d="M15 19l-7-7 7-7" />151 </svg>152 </div>153 <div class="app-actions">154 <!-- Location pin -->155 <div class="icon-btn">156 <svg class="icon tool-icon" viewBox="0 0 24 24">157 <path d="M12 21s-6-7-6-11a6 6 0 1 1 12 0c0 4-6 11-6 11z" />158 <path d="M12 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" />159 </svg>160 </div>161 <!-- Share -->162 <div class="icon-btn">163 <svg class="icon tool-icon" viewBox="0 0 24 24">164 <path d="M4 12v7a2 2 0 0 0 2 2h12" />165 <path d="M16 6l-8 6 8 6" />166 <path d="M16 6h4v12" />167 </svg>168 </div>169 <!-- Edit -->170 <div class="icon-btn">171 <svg class="icon tool-icon" viewBox="0 0 24 24">172 <path d="M4 20h4l12-12-4-4L4 16v4z" />173 </svg>174 </div>175 </div>176 </div>177 178 <!-- Tabs -->179 <div class="tabs">180 <div class="tab">Dec 16</div>181 <div class="tab">Dec 17</div>182 <div class="tab">Dec 18</div>183 <div class="tab active">Dec 19</div>184 <div class="tab plus">185 <svg class="icon" viewBox="0 0 24 24">186 <path d="M12 5v14M5 12h14" stroke="#2f5eea" fill="none" stroke-width="4"/>187 </svg>188 </div>189 </div>190 191 <!-- Content -->192 <div class="content">193 <!-- Intro card -->194 <div class="card">195 <div class="rating-chip">196 <span class="rating-oval">4.5/5</span>197 <span class="muted">175 reviews</span>198 </div>199 <div>200 The 52-hectare green space is the Canadian Botanical Display Garden and Vancouver's largest urban park.201 The evergreen greenery and sea of flowers make this one of Vancouver's most popular outdoor locations for wedding photos.202 The famous Four Seasons Restaurant is built on a prominent cliff in the park and has a good ni<span class="show-more">Show More</span>203 </div>204 </div>205 206 <div class="add-btn">207 <div class="circle">208 <svg viewBox="0 0 24 24" width="40" height="40">209 <path d="M12 5v14M5 12h14" stroke="#5F79FF" stroke-width="3" fill="none"/>210 </svg>211 </div>212 <div>Add Attractions</div>213 </div>214 215 <!-- Section Mon, Dec 18 -->216 <div class="section-header">217 <div style="display:flex; align-items:center; gap:16px;">218 <svg class="mini-icon" viewBox="0 0 24 24">219 <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z" />220 <path d="M12 8v4l3 2" />221 </svg>222 <div class="section-title">Mon, Dec 18 <span class="city">Vancouver</span></div>223 </div>224 <div class="section-side-icons">225 <svg class="mini-icon" viewBox="0 0 24 24">226 <path d="M4 21l16-16" />227 <path d="M15 3l6 6" />228 <path d="M4 21h6" />229 </svg>230 </div>231 </div>232 233 <!-- Image -->234 <div class="img-card">235 [IMG: Gastown night scene with steam clock]236 <div class="img-overlay">237 <div class="duration">238 <svg viewBox="0 0 24 24" width="36" height="36">239 <path d="M12 7v5l3 2" stroke="#fff" fill="none" stroke-width="2"/>240 <path d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18z" stroke="#fff" fill="none" stroke-width="2"/>241 </svg>242 <span>Suggested duration: 0.5–1 hour</span>243 </div>244 </div>245 <div class="counter">1/4</div>246 </div>247 248 <div class="poi-title">249 <div>Gastown</div>250 <div class="chev"></div>251 </div>252 253 <div class="rating-chip" style="margin-bottom:0;">254 <span class="rating-oval" style="background:#2f5eea;">4.4/5</span>255 <span class="muted">384 reviews</span>256 </div>257 258 <div class="card" style="margin-top:10px;">259 Gastown is located in downtown Vancouver, the birthplace of Vancouver.260 The Victorian buildings on the streets and alleys retain the appearance of the early 20th century, and there are also trendy and creative shops.261 Vancouver's historic landmark building - the steam clock is located here. Wander the narrow streets of red brick and c<span class="show-more">Show More</span>262 </div>263 264 <div class="add-btn">265 <div class="circle">266 <svg viewBox="0 0 24 24" width="40" height="40">267 <path d="M12 5v14M5 12h14" stroke="#5F79FF" stroke-width="3" fill="none"/>268 </svg>269 </div>270 <div>Add Attractions</div>271 </div>272 273 <!-- Next day -->274 <div style="display:flex; align-items:center; justify-content:space-between; margin-top:14px; margin-bottom:10px;">275 <div class="section-title" style="font-size:52px;">Tue, Dec 19</div>276 <svg class="mini-icon" viewBox="0 0 24 24">277 <path d="M3 6h18" />278 <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />279 <path d="M10 11v6M14 11v6" />280 </svg>281 </div>282 283 <div class="add-btn">284 <div class="circle">285 <svg viewBox="0 0 24 24" width="40" height="40">286 <path d="M12 5v14M5 12h14" stroke="#5F79FF" stroke-width="3" fill="none"/>287 </svg>288 </div>289 <div>Add Attractions</div>290 </div>291 </div>292 293 <!-- Bottom gesture bar -->294 <div class="gesture"></div>295</div>296</body>297</html>