GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Planner UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #120A2A;14 color: #fff;15 }16 17 /* Status bar */18 .status-bar {19 height: 80px;20 padding: 0 40px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 opacity: 0.95;25 }26 .status-left { font-weight: 600; letter-spacing: 1px; }27 .status-right svg { margin-left: 24px; }28 29 /* Header area */30 .header {31 padding: 20px 40px 32px 40px;32 }33 .back-row {34 display: flex;35 align-items: center;36 margin-top: 14px;37 }38 .back-row .back-icon {39 width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;40 margin-right: 20px;41 }42 .title {43 font-size: 64px;44 font-weight: 700;45 margin: 6px 0 26px 0;46 }47 48 .card {49 background: #F2F2F4;50 color: #1C1C2E;51 border-radius: 24px;52 box-shadow: 0 6px 12px rgba(0,0,0,0.2);53 margin-bottom: 26px;54 }55 .card .row {56 display: flex; align-items: center; padding: 28px 32px;57 }58 .card .row + .row { border-top: 1px solid #ddd; }59 .card .label {60 font-size: 40px; font-weight: 600;61 }62 .card .sub {63 font-size: 36px; color: #6A6A7A;64 }65 .icon-circle {66 margin-left: auto;67 width: 96px; height: 96px;68 border-radius: 48px;69 border: 2px solid rgba(0,0,0,0.1);70 display: flex; align-items: center; justify-content: center;71 color: #8B8B99;72 background: rgba(255,255,255,0.6);73 }74 75 /* Departure card */76 .dep-card .row { padding: 26px 32px; }77 .dep-card .label { font-size: 40px; font-weight: 700; }78 79 /* Filters row */80 .filters {81 display: flex; gap: 28px; align-items: center;82 margin-top: 8px;83 }84 .chip {85 border-radius: 18px;86 padding: 22px 28px;87 font-size: 36px;88 border: 2px solid rgba(255,255,255,0.2);89 color: #D3D0E8;90 background: rgba(255,255,255,0.08);91 display: inline-flex; align-items: center; gap: 18px;92 }93 .chip.yellow {94 background: #FFB800;95 color: #1C1C2E;96 border: none;97 box-shadow: 0 6px 12px rgba(0,0,0,0.25);98 }99 100 /* Update note */101 .update-note {102 text-align: center;103 color: #EDEDED;104 font-size: 32px;105 margin: 32px 0 24px;106 }107 .update-note b { color: #fff; }108 109 /* Content area */110 .content {111 background: #FFFFFF;112 color: #10122F;113 border-top-left-radius: 28px;114 border-top-right-radius: 28px;115 padding-bottom: 240px;116 }117 118 .earlier {119 background: #F3F3F5;120 color: #3A3A4A;121 font-size: 40px;122 padding: 32px 40px;123 display: flex; align-items: center; justify-content: space-between;124 border-top-left-radius: 28px; border-top-right-radius: 28px;125 }126 127 .result {128 padding: 40px;129 border-bottom: 2px solid #ECECF1;130 position: relative;131 }132 .result .time {133 font-size: 56px; font-weight: 700; color: #0E1846;134 }135 .result .meta {136 display: flex; align-items: center; gap: 12px;137 font-size: 34px; color: #7C8098; margin-top: 16px;138 }139 .result .note {140 font-size: 34px; color: #EB6619; margin-top: 16px;141 }142 .result .note.red { color: #C02D2D; }143 .result .price {144 position: absolute; right: 40px; top: 48px; font-size: 40px; color: #0E1846;145 }146 .result .left-mark {147 position: absolute; left: 0; top: 56px; width: 16px; height: 40px; background: #F36D2F; border-radius: 4px;148 }149 150 /* Bottom navigation */151 .bottom-nav {152 position: absolute; bottom: 68px; left: 0; right: 0;153 height: 170px; background: #FFFFFF; border-top: 2px solid #E6E6EA;154 display: flex; align-items: center; justify-content: space-around;155 }156 .tab {157 display: flex; flex-direction: column; align-items: center; gap: 16px; color: #A7A9B8; font-size: 30px;158 }159 .tab.active { color: #10122F; font-weight: 700; }160 .tab svg { width: 60px; height: 60px; }161 .home-indicator {162 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);163 width: 360px; height: 16px; background: #D9D9DE; border-radius: 20px;164 opacity: 0.9;165 }166 167 /* Utility icons */168 .svg-24 { width: 48px; height: 48px; }169 .muted { color: #8D90A8; }170</style>171</head>172<body>173<div id="render-target">174 175 <!-- Status Bar -->176 <div class="status-bar">177 <div class="status-left">1:12</div>178 <div class="status-right">179 <!-- small dots to mimic status icons -->180 <svg class="svg-24" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="10"/></svg>181 <svg class="svg-24" viewBox="0 0 24 24" fill="#fff"><rect x="4" y="4" width="16" height="16" rx="4"/></svg>182 <!-- WiFi -->183 <svg class="svg-24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">184 <path d="M3 9c4-3 14-3 18 0"/><path d="M6 12c3-2 9-2 12 0"/><path d="M9 15c2-1 4-1 6 0"/><circle cx="12" cy="18" r="1.5" fill="#fff"/>185 </svg>186 <!-- Battery -->187 <svg class="svg-24" viewBox="0 0 28 24" fill="none" stroke="#fff" stroke-width="2">188 <rect x="2" y="5" width="20" height="14" rx="3"/><rect x="22" y="9" width="4" height="6" rx="1" fill="#fff"/>189 </svg>190 </div>191 </div>192 193 <!-- Header -->194 <div class="header">195 <div class="back-row">196 <div class="back-icon">197 <svg class="svg-24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><path d="M15 6l-6 6 6 6"/></svg>198 </div>199 <div class="title">Where to next?</div>200 </div>201 202 <!-- From/To Card -->203 <div class="card">204 <div class="row">205 <svg class="svg-24" viewBox="0 0 24 24" fill="none" stroke="#6E6E80" stroke-width="2" style="margin-right:16px;">206 <circle cx="12" cy="12" r="5"/>207 </svg>208 <div class="label">Madrid City (Spain)</div>209 <div class="icon-circle">210 <!-- swap arrows -->211 <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#8B8B99" stroke-width="2">212 <path d="M7 7h10l-3-3"/><path d="M17 17H7l3 3"/>213 </svg>214 </div>215 </div>216 <div class="row">217 <svg class="svg-24" viewBox="0 0 24 24" fill="none" stroke="#6E6E80" stroke-width="2" style="margin-right:16px;">218 <path d="M12 2C8.7 2 6 4.7 6 8c0 5 6 12 6 12s6-7 6-12c0-3.3-2.7-6-6-6z"/>219 <circle cx="12" cy="8" r="2"/>220 </svg>221 <div class="label">Barcelona City (Spain)</div>222 </div>223 </div>224 225 <!-- Departure Card -->226 <div class="card dep-card">227 <div class="row">228 <svg class="svg-24" viewBox="0 0 24 24" fill="none" stroke="#6E6E80" stroke-width="2" style="margin-right:18px;">229 <rect x="3" y="5" width="18" height="16" rx="3"/><path d="M8 3v4M16 3v4"/><path d="M7 11h10"/>230 </svg>231 <div class="label">Dep: 27 Aug 08:00</div>232 </div>233 </div>234 235 <!-- Filters -->236 <div class="filters">237 <div class="chip yellow">238 <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#1C1C2E" stroke-width="2">239 <path d="M4 6h16M7 12h10M10 18h4"/>240 </svg>241 <span>Filters</span>242 </div>243 <div class="chip">244 <span>No seat reservations</span>245 </div>246 <div class="chip">247 <span>Transfer time</span>248 </div>249 </div>250 251 <div class="update-note">Last timetable update: <b>01 August 2023</b></div>252 </div>253 254 <!-- Results content -->255 <div class="content">256 <div class="earlier">257 <div>Earlier</div>258 <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#3A3A4A" stroke-width="3"><path d="M9 6l6 6-6 6"/></svg>259 </div>260 261 <!-- Result 1 -->262 <div class="result">263 <div class="left-mark"></div>264 <div class="time">08:30 → 11:15</div>265 <div class="meta">266 <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="#7C8098" stroke-width="2">267 <circle cx="12" cy="12" r="9"/><path d="M12 6v6l4 2"/>268 </svg>269 <span>2h 45m</span>270 </div>271 <div class="note">Seat reservations required</div>272 <div class="price">from €12</div>273 </div>274 275 <!-- Result 2 -->276 <div class="result">277 <div class="left-mark"></div>278 <div class="time">09:30 → 12:37</div>279 <div class="meta">280 <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="#7C8098" stroke-width="2">281 <circle cx="12" cy="12" r="9"/><path d="M12 6v6l4 2"/>282 </svg>283 <span>3h 7m</span>284 </div>285 <div class="note">Seat reservations required</div>286 <div class="price">from €12</div>287 </div>288 289 <!-- Result 3 -->290 <div class="result">291 <div class="left-mark" style="background:#C02D2D;"></div>292 <div class="time">10:05 → 13:00</div>293 <div class="meta">294 <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="#7C8098" stroke-width="2">295 <circle cx="12" cy="12" r="9"/><path d="M12 6v6l4 2"/>296 </svg>297 <span>2h 55m</span>298 </div>299 <div class="note red">Not in Pass network</div>300 </div>301 302 <!-- Result 4 -->303 <div class="result">304 <div class="left-mark" style="background:#C02D2D;"></div>305 <div class="time">10:30 → 13:15</div>306 <div class="meta">307 <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="#7C8098" stroke-width="2">308 <circle cx="12" cy="12" r="9"/><path d="M12 6v6l4 2"/>309 </svg>310 <span>2h 45m</span>311 </div>312 <div class="note red">Not in Pass network</div>313 </div>314 </div>315 316 <!-- Bottom Navigation -->317 <div class="bottom-nav">318 <div class="tab active">319 <svg viewBox="0 0 24 24" fill="none" stroke="#10122F" stroke-width="2">320 <circle cx="12" cy="12" r="9"/><path d="M12 6v6l4 2"/>321 </svg>322 <div>Planner</div>323 </div>324 <div class="tab">325 <svg viewBox="0 0 24 24" fill="none" stroke="#A7A9B8" stroke-width="2">326 <path d="M3 6h18M3 12h18M3 18h12"/>327 </svg>328 <div>My Trip</div>329 </div>330 <div class="tab">331 <svg viewBox="0 0 24 24" fill="none" stroke="#A7A9B8" stroke-width="2">332 <rect x="5" y="2" width="14" height="20" rx="3"/><circle cx="12" cy="17" r="2"/>333 </svg>334 <div>My Pass</div>335 </div>336 <div class="tab">337 <svg viewBox="0 0 24 24" fill="none" stroke="#A7A9B8" stroke-width="2">338 <path d="M4 6h16M4 12h16M4 18h16"/>339 </svg>340 <div>More</div>341 </div>342 </div>343 344 <div class="home-indicator"></div>345</div>346</body>347</html>