GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Transit UI - Dam Stop</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 90px;22 display: flex;23 align-items: center;24 padding: 0 30px;25 color: #2b2b2b;26 font-size: 34px;27 }28 .status-icons {29 margin-left: auto;30 display: flex;31 gap: 22px;32 align-items: center;33 }34 .dot { width: 14px; height: 14px; background:#333; border-radius:50%; opacity:0.7; }35 .bar { width: 34px; height: 22px; border: 2px solid #222; border-radius: 4px; position: relative; }36 .bar::after { content: ""; position: absolute; right: 4px; top: 4px; width: 18px; height: 14px; background: #222; }37 38 /* Map area */39 .map {40 position: absolute;41 top: 90px;42 left: 0;43 width: 1080px;44 height: 520px;45 background: #E0E0E0;46 border-bottom: 1px solid #BDBDBD;47 display: flex;48 align-items: center;49 justify-content: center;50 color: #757575;51 font-size: 28px;52 }53 54 /* Floating buttons on map */55 .circle-btn {56 position: absolute;57 width: 110px;58 height: 110px;59 background: #ffffff;60 border-radius: 55px;61 box-shadow: 0 4px 12px rgba(0,0,0,0.12);62 display: flex;63 align-items: center;64 justify-content: center;65 }66 .btn-back { left: 36px; top: 206px; }67 .btn-star { right: 180px; top: 196px; }68 .btn-menu { right: 46px; top: 196px; }69 70 /* Main green panel */71 .panel {72 position: absolute;73 left: 0;74 top: 470px;75 width: 1080px;76 height: 1930px;77 background: #49a63b; /* rich green */78 border-top-left-radius: 40px;79 border-top-right-radius: 40px;80 padding: 30px 28px 60px;81 box-sizing: border-box;82 color: #fff;83 }84 85 /* Header inside panel */86 .panel-header {87 display: flex;88 align-items: center;89 gap: 22px;90 padding: 18px 12px;91 }92 .panel-title {93 font-size: 56px;94 font-weight: 700;95 }96 .panel-actions {97 margin-left: auto;98 display: flex;99 gap: 26px;100 align-items: center;101 }102 .refresh {103 width: 60px; height: 60px; border-radius: 30px;104 border: 2px solid rgba(255,255,255,0.9);105 display:flex; align-items:center; justify-content:center;106 }107 108 .section-title {109 font-size: 42px;110 font-weight: 700;111 margin: 12px 12px 18px;112 }113 114 /* Cards */115 .card {116 background: #ffffff;117 border-radius: 26px;118 padding: 26px;119 margin: 14px 0;120 display: flex;121 align-items: center;122 box-shadow: 0 4px 10px rgba(0,0,0,0.08);123 }124 .route-icon {125 width: 92px; height: 92px; background: #f4f4f4; border-radius: 18px;126 display:flex; align-items:center; justify-content:center; margin-right: 26px;127 border: 1px solid #d0d0d0;128 }129 .route-info {130 flex: 1;131 }132 .code {133 font-size: 68px; color: #bfbfbf; font-weight: 800; line-height: 1;134 }135 .dest {136 font-size: 36px; color: #7c7c7c; margin-top: 6px;137 }138 .pill {139 display:inline-block; margin-top: 12px; background:#e8f3ff; color:#3a8ad4;140 padding: 10px 18px; border-radius: 12px; font-weight:700; font-size: 28px;141 }142 .next {143 text-align: right;144 color: #bfbfbf;145 font-size: 34px;146 }147 .next .time {148 display:block; font-size: 48px; color: #bfbfbf; font-weight: 800; margin-top: 6px;149 }150 151 /* Timetables header with clock */152 .timelines-head {153 display:flex; align-items:center; justify-content: space-between;154 padding: 22px 12px 8px;155 color:#fff;156 }157 .clockwrap { display:flex; align-items:center; gap:14px; }158 .stamp { font-size: 34px; opacity: 0.95; }159 160 .timetable-item {161 background: #ffffff;162 border-radius: 26px;163 padding: 28px;164 margin: 16px 0;165 display:flex; align-items:center; justify-content: space-between;166 box-shadow: 0 4px 10px rgba(0,0,0,0.08);167 }168 .tt-left {169 display:flex; align-items: center; gap: 22px;170 }171 .tt-title {172 font-size: 40px; color:#333; font-weight: 800;173 }174 .tt-sub {175 font-size: 32px; color:#777;176 }177 .tt-pill {178 background:#e8f3ff; color:#3a8ad4; padding:10px 16px; border-radius:12px; font-weight:700; font-size:28px;179 }180 .tt-time {181 font-size: 44px; color:#333; font-weight: 800;182 }183 184 /* Simple placeholder marker on map */185 .map-marker {186 position: absolute;187 top: 370px;188 left: 480px;189 width: 120px;190 height: 120px;191 background: rgba(73,166,59,0.95);192 border-radius: 60px;193 display: flex;194 align-items: center;195 justify-content: center;196 color: #fff;197 font-weight: 700;198 box-shadow: 0 8px 18px rgba(0,0,0,0.2);199 }200 201 /* SVG icon helpers */202 .svg-icon { width: 46px; height: 46px; }203</style>204</head>205<body>206<div id="render-target">207 208 <!-- Status bar -->209 <div class="status-bar">210 11:25211 <div class="status-icons">212 <span class="dot"></span>213 <span class="dot"></span>214 <div class="bar"></div>215 </div>216 </div>217 218 <!-- Map placeholder -->219 <div class="map">[IMG: Map around Damrak / Dam - Amsterdam]</div>220 221 <!-- Floating buttons -->222 <div class="circle-btn btn-back">223 <svg class="svg-icon" viewBox="0 0 24 24">224 <path d="M15 18L9 12l6-6" fill="none" stroke="#3b3b3b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>225 </svg>226 </div>227 <div class="circle-btn btn-star">228 <svg class="svg-icon" viewBox="0 0 24 24">229 <path d="M12 3l3 6 6 .9-4.5 4.2 1.2 6.5L12 17l-5.7 3.6 1.2-6.5L3 9.9 9 9l3-6z" fill="#3b3b3b"/>230 </svg>231 </div>232 <div class="circle-btn btn-menu">233 <svg class="svg-icon" viewBox="0 0 24 24">234 <circle cx="12" cy="5" r="2.3" fill="#3b3b3b"/>235 <circle cx="12" cy="12" r="2.3" fill="#3b3b3b"/>236 <circle cx="12" cy="19" r="2.3" fill="#3b3b3b"/>237 </svg>238 </div>239 240 <!-- Map marker label -->241 <div class="map-marker">Dam</div>242 243 <!-- Green Panel -->244 <div class="panel">245 <!-- Header -->246 <div class="panel-header">247 <div class="route-icon" style="background:#eaf6ea;">248 <svg viewBox="0 0 24 24" width="40" height="40">249 <rect x="3" y="5" width="18" height="12" rx="2" ry="2" fill="#49a63b"/>250 <circle cx="8" cy="18" r="2" fill="#49a63b"/>251 <circle cx="16" cy="18" r="2" fill="#49a63b"/>252 </svg>253 </div>254 <div class="panel-title">Dam</div>255 <div class="panel-actions">256 <div class="refresh">257 <svg viewBox="0 0 24 24" width="34" height="34">258 <path d="M3 12a9 9 0 0 1 15-6l2-2v6h-6l2-2A6 6 0 1 0 6 12" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>259 </svg>260 </div>261 </div>262 </div>263 264 <!-- Departures -->265 <div class="section-title">Departures</div>266 267 <!-- Card: N87 -->268 <div class="card">269 <div class="route-icon">270 <svg viewBox="0 0 24 24" width="44" height="44">271 <rect x="3" y="5" width="18" height="12" rx="2" ry="2" fill="#bfbfbf"/>272 <circle cx="8" cy="18" r="2" fill="#bfbfbf"/>273 <circle cx="16" cy="18" r="2" fill="#bfbfbf"/>274 </svg>275 </div>276 <div class="route-info">277 <div class="code">N87</div>278 <div class="dest">Centraal Station</div>279 <span class="pill">GVB</span>280 </div>281 <div class="next">282 Next:283 <span class="time">5:31 AM</span>284 </div>285 </div>286 287 <!-- Card: N85 -->288 <div class="card">289 <div class="route-icon">290 <svg viewBox="0 0 24 24" width="44" height="44">291 <rect x="3" y="5" width="18" height="12" rx="2" ry="2" fill="#bfbfbf"/>292 <circle cx="8" cy="18" r="2" fill="#bfbfbf"/>293 <circle cx="16" cy="18" r="2" fill="#bfbfbf"/>294 </svg>295 </div>296 <div class="route-info">297 <div class="code">N85</div>298 <div class="dest">Centraal Station</div>299 <span class="pill">GVB</span>300 </div>301 <div class="next">302 Next:303 <span class="time">5:48 AM</span>304 </div>305 </div>306 307 <!-- Card: N88 -->308 <div class="card">309 <div class="route-icon">310 <svg viewBox="0 0 24 24" width="44" height="44">311 <rect x="3" y="5" width="18" height="12" rx="2" ry="2" fill="#bfbfbf"/>312 <circle cx="8" cy="18" r="2" fill="#bfbfbf"/>313 <circle cx="16" cy="18" r="2" fill="#bfbfbf"/>314 </svg>315 </div>316 <div class="route-info">317 <div class="code">N88</div>318 <div class="dest">Centraal Station</div>319 <span class="pill">GVB</span>320 </div>321 <div class="next">322 Next:323 <span class="time">Nov 3 - 6:21 AM</span>324 </div>325 </div>326 327 <!-- Timetables -->328 <div class="timelines-head">329 <div class="section-title" style="margin:0;">Timetables</div>330 <div class="clockwrap">331 <svg viewBox="0 0 24 24" width="46" height="46">332 <circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"/>333 <path d="M12 12V7M12 12l4 3" stroke="#fff" stroke-width="2" stroke-linecap="round"/>334 </svg>335 <div class="stamp">Today, 10:41 AM</div>336 </div>337 </div>338 339 <!-- Timetable items -->340 <div class="timetable-item">341 <div class="tt-left">342 <div class="tt-title">N85</div>343 <div class="tt-sub">Centraal Station</div>344 <span class="tt-pill">GVB</span>345 </div>346 <div class="tt-time">10:48 AM</div>347 </div>348 349 <div class="timetable-item">350 <div class="tt-left">351 <div class="tt-title">N87</div>352 <div class="tt-sub">Centraal Station</div>353 <span class="tt-pill">GVB</span>354 </div>355 <div class="tt-time">5:31 AM</div>356 </div>357 358 <div class="timetable-item">359 <div class="tt-left">360 <div class="tt-title">N85</div>361 <div class="tt-sub">Centraal Station</div>362 <span class="tt-pill">GVB</span>363 </div>364 <div class="tt-time">5:48 AM</div>365 </div>366 367 <div class="timetable-item">368 <div class="tt-left">369 <div class="tt-title">N87</div>370 <div class="tt-sub">Centraal Station</div>371 <span class="tt-pill">GVB</span>372 </div>373 <div class="tt-time">6:27 AM</div>374 </div>375 376 </div>377</div>378</body>379</html>