GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Payment UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #222;17 }18 .top {19 width: 100%;20 background: #1E0D7A;21 color: #fff;22 }23 .status-bar {24 height: 100px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 padding: 0 40px;29 font-size: 34px;30 opacity: 0.95;31 }32 .status-icons { display: flex; align-items: center; gap: 28px; }33 .app-bar {34 height: 160px;35 display: flex;36 align-items: center;37 padding: 0 40px;38 position: relative;39 }40 .back-btn {41 width: 80px;42 height: 80px;43 display: flex;44 align-items: center;45 justify-content: center;46 margin-right: 20px;47 }48 .app-title {49 font-size: 52px;50 font-weight: 700;51 letter-spacing: 0.2px;52 }53 .sign-in {54 position: absolute;55 right: 40px;56 top: 50%;57 transform: translateY(-50%);58 font-size: 40px;59 font-weight: 600;60 }61 62 .content {63 width: 100%;64 padding: 24px 24px 120px 24px;65 background: #F3F5F8;66 }67 68 .ticket-card {69 background: #fff;70 border-radius: 28px;71 box-shadow: 0 6px 16px rgba(0,0,0,0.12);72 margin: 24px 16px;73 padding: 0;74 }75 .card-header {76 display: grid;77 grid-template-columns: 120px 1fr auto;78 align-items: center;79 gap: 24px;80 padding: 28px 28px 12px 28px;81 }82 .left-box {83 width: 96px;84 height: 96px;85 border-radius: 18px;86 background: #143A73;87 display: flex;88 align-items: center;89 justify-content: center;90 }91 .title-row {92 display: flex;93 align-items: center;94 gap: 14px;95 }96 .title-row .title {97 font-size: 46px;98 font-weight: 800;99 color: #223;100 }101 .price {102 font-size: 44px;103 font-weight: 800;104 color: #223;105 }106 .desc {107 color: #6D7A86;108 font-size: 34px;109 line-height: 1.35;110 padding: 4px 28px;111 }112 .ticket-body {113 display: grid;114 grid-template-columns: 320px 1fr;115 gap: 24px;116 padding: 16px 28px 24px 28px;117 }118 .img-ph {119 width: 100%;120 height: 260px;121 background: #E0E0E0;122 border: 1px solid #BDBDBD;123 border-radius: 16px;124 display: flex;125 align-items: center;126 justify-content: center;127 color: #757575;128 font-size: 30px;129 }130 .times .time-row {131 display: flex;132 align-items: baseline;133 gap: 28px;134 margin-top: 6px;135 }136 .times .time {137 font-size: 80px;138 font-weight: 800;139 color: #2E2E2E;140 }141 .stations {142 display: flex;143 justify-content: space-between;144 margin-top: 8px;145 margin-right: 12px;146 }147 .stations div {148 font-size: 34px;149 color: #6D7A86;150 }151 .meta {152 font-size: 34px;153 color: #45515E;154 margin-top: 18px;155 }156 .meta.light {157 color: #81909E;158 margin-top: 10px;159 }160 161 .eco-banner {162 margin: 16px 24px 28px 24px;163 background: #DFF0E7;164 border-radius: 18px;165 padding: 24px;166 display: grid;167 grid-template-columns: 84px 1fr 60px;168 align-items: center;169 gap: 18px;170 }171 .eco-text {172 font-size: 34px;173 color: #2B5241;174 }175 .eco-text b { font-weight: 800; }176 .eco-info {177 width: 48px;178 height: 48px;179 border-radius: 24px;180 display: flex;181 align-items: center;182 justify-content: center;183 color: #2B5241;184 }185 186 .list-group {187 background: #fff;188 border-radius: 26px;189 box-shadow: 0 6px 16px rgba(0,0,0,0.08);190 margin: 24px 16px;191 padding: 8px 0;192 }193 .list-item {194 display: grid;195 grid-template-columns: 120px 1fr;196 align-items: center;197 padding: 26px 28px;198 gap: 10px;199 }200 .list-item .icon {201 width: 84px;202 height: 84px;203 border-radius: 16px;204 display: flex;205 align-items: center;206 justify-content: center;207 color: #1E0D7A;208 }209 .list-item .texts .primary {210 font-size: 40px;211 color: #222;212 }213 .list-item .texts .primary .muted {214 color: #6D7A86;215 font-weight: 600;216 }217 .list-item .texts .secondary {218 font-size: 34px;219 color: #7A8896;220 margin-top: 8px;221 }222 .divider {223 height: 1px;224 background: #E6EBF0;225 margin: 0 28px;226 }227 228 .section-header {229 margin: 32px 16px 12px 16px;230 padding: 36px 28px;231 background: #F6F8FA;232 border-top: 1px solid #E6EBF0;233 border-bottom: 1px solid #E6EBF0;234 font-size: 44px;235 font-weight: 800;236 color: #222;237 border-radius: 18px;238 }239 .thumb-row {240 display: grid;241 grid-template-columns: repeat(3, 1fr);242 gap: 18px;243 padding: 0 16px;244 }245 .thumb {246 height: 220px;247 background: #E0E0E0;248 border: 1px solid #BDBDBD;249 border-radius: 18px;250 display: flex;251 align-items: center;252 justify-content: center;253 color: #757575;254 font-size: 28px;255 }256 257 .nav-pill {258 position: absolute;259 bottom: 22px;260 left: 50%;261 transform: translateX(-50%);262 width: 240px;263 height: 16px;264 background: #000;265 opacity: 0.7;266 border-radius: 16px;267 }268 269 /* Simple icon styles */270 svg { display: block; }271</style>272</head>273<body>274<div id="render-target">275 276 <div class="top">277 <div class="status-bar">278 <div>1:32</div>279 <div class="status-icons">280 <!-- Network icon -->281 <svg width="42" height="42" viewBox="0 0 24 24">282 <path d="M2 9c5-5 15-5 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>283 <path d="M6 13c3-3 9-3 12 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>284 <circle cx="12" cy="17" r="2" fill="#fff"/>285 </svg>286 <!-- Mail dot -->287 <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#fff"/></svg>288 <!-- WiFi -->289 <svg width="40" height="40" viewBox="0 0 24 24">290 <path d="M2 8c5-5 15-5 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>291 <path d="M6 12c3-3 9-3 12 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>292 <circle cx="12" cy="16" r="2" fill="#fff"/>293 </svg>294 <!-- Battery -->295 <svg width="50" height="40" viewBox="0 0 28 16">296 <rect x="1" y="3" width="22" height="10" rx="2" stroke="#fff" stroke-width="2" fill="none"/>297 <rect x="3" y="5" width="18" height="6" rx="1" fill="#fff"/>298 <rect x="24" y="6" width="3" height="4" rx="1" fill="#fff"/>299 </svg>300 </div>301 </div>302 <div class="app-bar">303 <div class="back-btn">304 <svg width="52" height="52" viewBox="0 0 24 24">305 <path d="M15 6l-6 6 6 6" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>306 </svg>307 </div>308 <div class="app-title">Payment</div>309 <div class="sign-in">Sign in</div>310 </div>311 </div>312 313 <div class="content">314 315 <div class="ticket-card">316 <div class="card-header">317 <div class="left-box">318 <svg width="40" height="40" viewBox="0 0 24 24">319 <path d="M6 12h12M12 6l6 6-6 6" stroke="#fff" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>320 </svg>321 </div>322 <div class="title-row">323 <div class="title">Multiple Tickets</div>324 <!-- info icon -->325 <svg width="36" height="36" viewBox="0 0 24 24">326 <circle cx="12" cy="12" r="10" stroke="#73819A" stroke-width="2" fill="none"/>327 <rect x="11" y="10" width="2" height="7" fill="#73819A"/>328 <circle cx="12" cy="7" r="1.5" fill="#73819A"/>329 </svg>330 </div>331 <div class="price">$142.74</div>332 </div>333 334 <div class="desc">Show different tickets along your journey.</div>335 <div class="desc">must call at Stevenage.</div>336 337 <div class="ticket-body">338 <div class="img-ph">[IMG: Journey details graphic]</div>339 <div class="times">340 <div class="time-row">341 <div class="time">8:46 AM</div>342 <svg width="56" height="56" viewBox="0 0 24 24">343 <path d="M6 12h12M12 6l6 6-6 6" stroke="#5C6776" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>344 </svg>345 <div class="time">5:09 PM</div>346 </div>347 <div class="stations">348 <div>Cambridge</div>349 <div>Edinburgh Gateway</div>350 </div>351 <div class="meta">5h 23m, 2 changes</div>352 <div class="meta light">Valid same day</div>353 </div>354 </div>355 356 <div class="eco-banner">357 <div class="leaf-icon">358 <svg width="64" height="64" viewBox="0 0 24 24">359 <path d="M5 13c6-9 11-7 14-5-2 5-5 10-11 10-2 0-3-2-3-5z" fill="#2B5241"/>360 <path d="M9 16c2-2 4-3 7-4" stroke="#DFF0E7" stroke-width="2" fill="none" stroke-linecap="round"/>361 </svg>362 </div>363 <div class="eco-text">Travelling by train emits <b>70% less CO2</b> than by car.</div>364 <div class="eco-info">365 <svg width="40" height="40" viewBox="0 0 24 24">366 <circle cx="12" cy="12" r="10" stroke="#2B5241" stroke-width="2" fill="none"/>367 <rect x="11" y="10" width="2" height="7" fill="#2B5241"/>368 <circle cx="12" cy="7" r="1.5" fill="#2B5241"/>369 </svg>370 </div>371 </div>372 </div>373 374 <div class="list-group">375 <div class="list-item">376 <div class="icon">377 <svg width="64" height="64" viewBox="0 0 24 24">378 <circle cx="12" cy="8" r="4" fill="#1E0D7A"/>379 <path d="M4 20c1-4 5-6 8-6s7 2 8 6" fill="none" stroke="#1E0D7A" stroke-width="2" stroke-linecap="round"/>380 </svg>381 </div>382 <div class="texts">383 <div class="primary">1 Adult</div>384 </div>385 </div>386 <div class="divider"></div>387 <div class="list-item">388 <div class="icon">389 <svg width="64" height="64" viewBox="0 0 24 24">390 <rect x="3" y="5" width="10" height="7" rx="1.5" stroke="#1E0D7A" stroke-width="2" fill="none"/>391 <path d="M7 12h9c2 0 3 1 3 3v2H7" stroke="#1E0D7A" stroke-width="2" fill="none" stroke-linecap="round"/>392 </svg>393 </div>394 <div class="texts">395 <div class="primary">Seat requested <span class="muted">(free)</span></div>396 <div class="secondary">Change seating preferences</div>397 </div>398 </div>399 <div class="divider"></div>400 <div class="list-item">401 <div class="icon">402 <svg width="64" height="64" viewBox="0 0 24 24">403 <circle cx="6" cy="16" r="3" stroke="#1E0D7A" stroke-width="2" fill="none"/>404 <circle cx="18" cy="16" r="3" stroke="#1E0D7A" stroke-width="2" fill="none"/>405 <path d="M9 16h6l-2-4h-3l-2 4z" stroke="#1E0D7A" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>406 <path d="M12 12l2-2h3" stroke="#1E0D7A" stroke-width="2" fill="none" stroke-linecap="round"/>407 </svg>408 </div>409 <div class="texts">410 <div class="primary">Bike spaces</div>411 <div class="secondary">Not available on this journey</div>412 </div>413 </div>414 </div>415 416 <div class="section-header">How to get your ticket</div>417 418 <div class="thumb-row">419 <div class="thumb">[IMG: Ticket method card]</div>420 <div class="thumb">[IMG: Ticket method card]</div>421 <div class="thumb">[IMG: Ticket method card]</div>422 </div>423 424 </div>425 426 <div class="nav-pill"></div>427 428</div>429</body>430</html>