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 - Add Attractions</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #F2F4F8;15 color: #1E2A3A;16 }17 18 /* Top app bar */19 .app-bar {20 position: relative;21 width: 100%;22 height: 200px;23 background: #ffffff;24 box-shadow: 0 1px 0 rgba(0,0,0,0.08);25 }26 .app-bar .row {27 height: 96px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 padding: 0 36px;32 }33 .icon-btn {34 width: 72px;35 height: 72px;36 display: inline-flex;37 align-items: center;38 justify-content: center;39 border-radius: 12px;40 color: #263459;41 }42 .icon {43 width: 40px; height: 40px;44 }45 /* Date tabs */46 .date-tabs {47 position: absolute;48 left: 0; right: 0; bottom: 0;49 height: 104px;50 padding: 0 24px;51 display: flex;52 align-items: center;53 gap: 36px;54 background: linear-gradient(90deg, #e7efff 0%, #fff6df 100%);55 overflow: hidden;56 }57 .tab {58 font-size: 36px;59 color: #5b6a8a;60 }61 .tab.active { color: #3157ff; font-weight: 700; }62 .tab.plus {63 margin-left: auto;64 display: flex; align-items: center; gap: 12px;65 color: #3157ff;66 font-weight: 600;67 }68 69 /* Add Attractions button */70 .add-btn {71 margin: 28px 72px;72 height: 120px;73 border: 3px solid #4A66F8;74 border-radius: 20px;75 background: #ffffff;76 color: #3157ff;77 display: flex; align-items: center; justify-content: center;78 gap: 20px;79 font-size: 42px; font-weight: 700;80 }81 .add-btn .circle {82 width: 56px; height: 56px; border-radius: 50%;83 border: 3px solid #4A66F8;84 display: flex; align-items: center; justify-content: center;85 }86 87 /* Section headers */88 .day-section {89 margin: 12px 72px;90 }91 .day-title {92 font-size: 54px;93 font-weight: 800;94 color: #2A3551;95 display: flex; align-items: center;96 gap: 16px;97 }98 .day-sub {99 font-size: 38px;100 font-weight: 500;101 color: #5c6b89;102 }103 .day-controls {104 position: absolute;105 right: 72px;106 margin-top: -72px;107 display: flex; align-items: center; gap: 24px;108 }109 .mini-icon { width: 36px; height: 36px; }110 111 /* Card */112 .card {113 margin: 24px 72px;114 background: #ffffff;115 border-radius: 26px;116 box-shadow: 0 10px 24px rgba(37,61,94,0.08);117 overflow: hidden;118 }119 .card-image {120 position: relative;121 width: 936px; height: 420px;122 margin: 24px;123 background: #E0E0E0;124 border: 1px solid #BDBDBD;125 border-radius: 20px;126 display: flex; align-items: center; justify-content: center;127 color: #757575; font-size: 36px; font-weight: 600;128 }129 .img-overlay {130 position: absolute;131 left: 24px; bottom: 20px;132 padding: 12px 18px;133 background: rgba(0,0,0,0.55);134 color: #ffffff;135 border-radius: 12px;136 display: flex; align-items: center; gap: 12px;137 font-size: 32px;138 }139 .img-count {140 position: absolute; right: 18px; bottom: 18px;141 padding: 10px 16px;142 background: #22314F;143 color: #ffffff; font-size: 32px; border-radius: 12px;144 }145 .card-body {146 padding: 0 36px 36px 36px;147 color: #2a3a56;148 }149 .card-title {150 font-size: 48px; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 14px;151 }152 .arrow-inline {153 width: 26px; height: 26px;154 }155 .rating-row {156 margin-top: 18px; display: flex; align-items: center; gap: 16px; color: #5b6a8a; font-size: 34px;157 }158 .rating-pill {159 background: #193A8E; color: #ffffff; font-weight: 800;160 padding: 8px 18px; border-radius: 14px; font-size: 34px;161 }162 .rating-pill span { opacity: 0.85; }163 .card-desc {164 margin-top: 16px; font-size: 34px; line-height: 1.46; color: #4f5f7f;165 }166 .show-more { color: #3157ff; font-weight: 700; }167 168 /* Repeated sections */169 .section-row {170 display: flex; align-items: center; justify-content: space-between;171 margin: 24px 72px 6px;172 }173 .trash {174 width: 40px; height: 40px; color: #a3acbf;175 }176 177 /* Bottom gesture bar (placeholder) */178 .gesture-bar {179 position: absolute; left: 0; right: 0; bottom: 0;180 height: 18px; background: #000; opacity: 0.85;181 border-radius: 9px; width: 360px; margin: 0 auto 24px;182 }183</style>184</head>185<body>186<div id="render-target">187 188 <!-- Top App Bar -->189 <div class="app-bar">190 <div class="row">191 <div class="icon-btn" title="Back">192 <svg class="icon" viewBox="0 0 48 48">193 <path d="M28 8 L14 24 L28 40" fill="none" stroke="#2A3A56" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>194 </svg>195 </div>196 <div style="display:flex; gap:28px;">197 <div class="icon-btn" title="Location">198 <svg class="icon" viewBox="0 0 48 48">199 <path d="M24 4 C15 4 8 11 8 20 c0 11 16 24 16 24 s16-13 16-24 C40 11 33 4 24 4 z" fill="none" stroke="#2A3A56" stroke-width="4"/>200 <circle cx="24" cy="20" r="6" fill="none" stroke="#2A3A56" stroke-width="4"/>201 </svg>202 </div>203 <div class="icon-btn" title="Share">204 <svg class="icon" viewBox="0 0 48 48">205 <circle cx="12" cy="24" r="6" fill="none" stroke="#2A3A56" stroke-width="4"/>206 <circle cx="36" cy="12" r="6" fill="none" stroke="#2A3A56" stroke-width="4"/>207 <circle cx="36" cy="36" r="6" fill="none" stroke="#2A3A56" stroke-width="4"/>208 <path d="M18 24 L30 14 M18 24 L30 34" fill="none" stroke="#2A3A56" stroke-width="4" stroke-linecap="round"/>209 </svg>210 </div>211 <div class="icon-btn" title="Edit">212 <svg class="icon" viewBox="0 0 48 48">213 <path d="M10 34 L10 38 L14 38 L34 18 L30 14 z" fill="none" stroke="#2A3A56" stroke-width="4"/>214 <path d="M28 12 L36 20" fill="none" stroke="#2A3A56" stroke-width="4"/>215 </svg>216 </div>217 </div>218 </div>219 <div class="date-tabs">220 <div class="tab">Dec 16</div>221 <div class="tab">Dec 17</div>222 <div class="tab">Dec 18</div>223 <div class="tab active">Dec 19</div>224 <div class="tab plus">225 <svg viewBox="0 0 48 48" class="icon">226 <path d="M24 10 L24 38 M10 24 L38 24" stroke="#3157ff" stroke-width="5" stroke-linecap="round"/>227 </svg>228 </div>229 </div>230 </div>231 232 <!-- Top Add Button -->233 <div class="add-btn">234 <div class="circle">235 <svg viewBox="0 0 48 48" class="mini-icon">236 <path d="M24 12 L24 36 M12 24 L36 24" stroke="#4A66F8" stroke-width="5" stroke-linecap="round"/>237 </svg>238 </div>239 Add Attractions240 </div>241 242 <!-- Day Section Header -->243 <div class="day-section">244 <div class="day-title">245 <svg class="mini-icon" viewBox="0 0 48 48">246 <circle cx="24" cy="24" r="14" fill="none" stroke="#8090A8" stroke-width="4"/>247 <path d="M24 16 L24 24 L30 28" fill="none" stroke="#8090A8" stroke-width="4" stroke-linecap="round"/>248 </svg>249 Sun, Dec 17 <span class="day-sub"> Vancouver</span>250 </div>251 </div>252 <div class="day-controls">253 <svg class="trash" viewBox="0 0 48 48">254 <path d="M16 12 L32 12 M18 16 L30 16 L30 36 L18 36 Z" fill="none" stroke="#A3ACBF" stroke-width="4"/>255 </svg>256 </div>257 258 <!-- Attraction Card -->259 <div class="card">260 <div class="card-image">261 [IMG: Vancouver Park Landscape]262 <div class="img-overlay">263 <svg viewBox="0 0 48 48" class="mini-icon" style="color:#fff;">264 <circle cx="24" cy="24" r="18" fill="none" stroke="#fff" stroke-width="4"/>265 <path d="M24 16 L24 24 L32 28" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round"/>266 </svg>267 Suggested duration: 2-3 hours268 </div>269 <div class="img-count">1/5</div>270 </div>271 272 <div class="card-body">273 <h3 class="card-title">274 Queen Elizabeth Park275 <svg class="arrow-inline" viewBox="0 0 24 24">276 <path d="M8 6 L14 12 L8 18" fill="none" stroke="#2A3A56" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>277 </svg>278 </h3>279 <div class="rating-row">280 <div class="rating-pill">4.5<span>/5</span></div>281 175 reviews282 </div>283 <div class="card-desc">284 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...285 <span class="show-more">Show More</span>286 </div>287 </div>288 </div>289 290 <!-- Add Button Below Card -->291 <div class="add-btn">292 <div class="circle">293 <svg viewBox="0 0 48 48" class="mini-icon">294 <path d="M24 12 L24 36 M12 24 L36 24" stroke="#4A66F8" stroke-width="5" stroke-linecap="round"/>295 </svg>296 </div>297 Add Attractions298 </div>299 300 <!-- Next Day - Mon, Dec 18 -->301 <div class="section-row">302 <div class="day-title" style="font-size:48px;">Mon, Dec 18</div>303 <svg class="trash" viewBox="0 0 48 48">304 <path d="M16 12 L32 12 M18 16 L30 16 L30 36 L18 36 Z" fill="none" stroke="#A3ACBF" stroke-width="4"/>305 </svg>306 </div>307 <div class="add-btn" style="margin-top: 12px;">308 <div class="circle">309 <svg viewBox="0 0 48 48" class="mini-icon">310 <path d="M24 12 L24 36 M12 24 L36 24" stroke="#4A66F8" stroke-width="5" stroke-linecap="round"/>311 </svg>312 </div>313 Add Attractions314 </div>315 316 <!-- Next Day - Tue, Dec 19 -->317 <div class="section-row">318 <div class="day-title" style="font-size:48px;">Tue, Dec 19</div>319 <svg class="trash" viewBox="0 0 48 48">320 <path d="M16 12 L32 12 M18 16 L30 16 L30 36 L18 36 Z" fill="none" stroke="#A3ACBF" stroke-width="4"/>321 </svg>322 </div>323 <div class="add-btn" style="margin-top: 12px;">324 <div class="circle">325 <svg viewBox="0 0 48 48" class="mini-icon">326 <path d="M24 12 L24 36 M12 24 L36 24" stroke="#4A66F8" stroke-width="5" stroke-linecap="round"/>327 </svg>328 </div>329 Add Attractions330 </div>331 332 <!-- Bottom gesture bar placeholder -->333 <div class="gesture-bar"></div>334</div>335</body>336</html>