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>Tickets UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #1c1c1c; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff; border-radius: 0;12 }13 14 /* Status bar */15 .status-bar {16 height: 110px;17 background: #072a2e;18 color: #ffffff;19 display: flex;20 align-items: center;21 padding: 0 36px;22 font-size: 40px;23 }24 .status-left { flex: 1; }25 .status-right { display: flex; align-items: center; gap: 28px; }26 .warn-icon {27 width: 34px; height: 34px; display: inline-block;28 }29 .status-icon { width: 42px; height: 42px; }30 31 /* Browser/address bar */32 .address-bar {33 height: 150px;34 background: #0d3a3e;35 display: flex;36 align-items: center;37 padding: 0 36px;38 color: #cfe7e5;39 gap: 24px;40 }41 .home-icon { width: 56px; height: 56px; }42 .url-pill {43 background: #1a6a63;44 color: #eaf6f5;45 border-radius: 60px;46 padding: 22px 36px;47 font-size: 36px;48 flex: 1;49 display: flex; align-items: center; gap: 20px;50 }51 .url-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }52 .round-badge {53 background: #2b8b82; color: #fff; border-radius: 32px;54 padding: 10px 22px; font-size: 32px;55 }56 .tool-icon { width: 50px; height: 50px; }57 58 /* Route header */59 .route-header {60 background: #3f3f43;61 color: #ffffff;62 padding: 34px 36px 24px 36px;63 }64 .route-title {65 font-size: 52px; font-weight: 700; margin-bottom: 24px;66 display: flex; justify-content: space-between; align-items: center;67 }68 .chips { display: flex; gap: 16px; margin-bottom: 24px; }69 .chip {70 background: #5a5a5f; color: #e8e8e8; border-radius: 14px;71 font-size: 32px; padding: 14px 20px;72 }73 .edit-icon { width: 42px; height: 42px; }74 75 .modes {76 display: flex; align-items: center; gap: 80px;77 padding: 18px 12px 0 12px; color: #d6d6d6;78 }79 .mode {80 display: flex; align-items: center; gap: 16px; font-size: 34px;81 padding: 0 24px 18px 24px; position: relative;82 }83 .mode.selected::after {84 content: ""; position: absolute; bottom: 0; left: 0; right: 0;85 height: 8px; background: #e24f98; border-radius: 4px;86 }87 .mode svg { width: 46px; height: 46px; fill: none; stroke: #d6d6d6; stroke-width: 5; }88 89 /* Content area */90 .content {91 background: #ffffff;92 border-top-left-radius: 24px; border-top-right-radius: 24px;93 padding: 32px 36px 160px 36px;94 }95 .section-title {96 font-size: 50px; font-weight: 700; margin-bottom: 32px; color: #111;97 }98 .departures-row {99 display: flex; justify-content: space-between; align-items: center;100 font-size: 36px; color: #555; padding: 10px 0 24px 0;101 border-bottom: 1px solid #e7e7e7;102 }103 .departures-row .time { font-weight: 600; color: #1f1f1f; }104 .date-label {105 margin: 28px 0 18px 0; font-size: 34px; color: #777;106 border-top: 1px dashed #e2e2e2; padding-top: 22px;107 }108 109 /* Ticket card */110 .card {111 border: 1px solid #e6e6e6; border-radius: 26px; background: #fff;112 box-shadow: 0 6px 10px rgba(0,0,0,0.06);113 padding: 28px;114 margin-bottom: 28px;115 }116 .card-header {117 display: flex; align-items: center; gap: 18px; font-size: 32px; color: #666;118 margin-bottom: 10px;119 }120 .logo-placeholder {121 width: 84px; height: 56px; background: #E0E0E0; border: 1px solid #BDBDBD;122 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; border-radius: 10px;123 }124 .card-main {125 display: flex; align-items: center; justify-content: space-between;126 margin: 10px 0 8px 0;127 }128 .times { font-size: 64px; font-weight: 700; color: #111; }129 .route { font-size: 34px; color: #333; margin-top: 8px; }130 .meta-row {131 display: flex; align-items: center; gap: 18px; margin-top: 18px;132 }133 .pill {134 border: 1px solid #d8d8d8; border-radius: 36px; padding: 16px 22px;135 font-size: 32px; color: #666; display: inline-flex; align-items: center; gap: 12px; background: #fafafa;136 }137 .down-icon { width: 28px; height: 28px; }138 .price-col {139 text-align: right;140 }141 .price {142 font-size: 46px; font-weight: 700; color: #111; margin-bottom: 18px;143 }144 .select-btn {145 background: #0a8f47; color: #fff; border: none; border-radius: 34px;146 padding: 18px 38px; font-size: 36px; font-weight: 600; cursor: default;147 }148 149 /* Bottom gesture bar */150 .gesture {151 position: absolute; left: 50%; transform: translateX(-50%);152 bottom: 30px; width: 300px; height: 16px; background: #0e0e10; border-radius: 10px;153 }154</style>155</head>156<body>157<div id="render-target">158 159 <!-- Android status bar -->160 <div class="status-bar">161 <div class="status-left">10:38162 <svg class="warn-icon" viewBox="0 0 24 24">163 <path d="M12 3 L2 21 H22 Z" fill="none" stroke="#fff" stroke-width="2"></path>164 <path d="M12 9 V14" stroke="#fff" stroke-width="2"></path>165 <circle cx="12" cy="17.5" r="1.6" fill="#fff"></circle>166 </svg>167 </div>168 <div class="status-right">169 <svg class="status-icon" viewBox="0 0 24 24">170 <path d="M3 18 L9 12 L15 16 L21 8" stroke="#fff" stroke-width="2" fill="none"></path>171 </svg>172 <div>100%</div>173 </div>174 </div>175 176 <!-- Browser/address bar -->177 <div class="address-bar">178 <svg class="home-icon" viewBox="0 0 24 24">179 <path d="M3 11 L12 3 L21 11" stroke="#cfe7e5" stroke-width="2" fill="none"></path>180 <path d="M6 10 V21 H18 V10" stroke="#cfe7e5" stroke-width="2" fill="none"></path>181 </svg>182 <div class="url-pill">183 <svg class="tool-icon" viewBox="0 0 24 24">184 <path d="M8 12 a5 5 0 0 1 5 -5 h2 a5 5 0 0 1 0 10 h-2" stroke="#eaf6f5" stroke-width="2" fill="none"></path>185 <path d="M16 12 a5 5 0 0 1 -5 5 h-2 a5 5 0 0 1 0 -10 h2" stroke="#eaf6f5" stroke-width="2" fill="none"></path>186 </svg>187 <div class="url-text">rome2rio.com/tickets/Berlin-Hauptbahnhof-to-Neu-Ulm</div>188 </div>189 <svg class="tool-icon" viewBox="0 0 24 24">190 <path d="M12 5 V19 M5 12 H19" stroke="#cfe7e5" stroke-width="2" fill="none"></path>191 </svg>192 <div class="round-badge">4</div>193 <svg class="tool-icon" viewBox="0 0 24 24">194 <circle cx="12" cy="5" r="2" fill="#cfe7e5"></circle>195 <circle cx="12" cy="12" r="2" fill="#cfe7e5"></circle>196 <circle cx="12" cy="19" r="2" fill="#cfe7e5"></circle>197 </svg>198 </div>199 200 <!-- Route header -->201 <div class="route-header">202 <div class="route-title">203 <div>Berlin Hauptbahnhof to Neu-Ulm</div>204 <svg class="edit-icon" viewBox="0 0 24 24">205 <path d="M3 17 L3 21 L7 21 L19 9 L15 5 Z" stroke="#fff" stroke-width="2" fill="none"></path>206 </svg>207 </div>208 <div class="chips">209 <div class="chip">Fri, 3 Nov</div>210 <div class="chip">1 passenger</div>211 </div>212 <div class="modes">213 <div class="mode selected">214 <svg viewBox="0 0 24 24">215 <rect x="3" y="8" width="18" height="8" rx="2"></rect>216 <circle cx="7" cy="18" r="1.6"></circle>217 <circle cx="17" cy="18" r="1.6"></circle>218 </svg>219 <div>₹13,260</div>220 </div>221 <div class="mode">222 <svg viewBox="0 0 24 24">223 <rect x="3" y="8" width="14" height="7" rx="2"></rect>224 <path d="M17 10 L21 12 L17 14" stroke="#d6d6d6" stroke-width="5" fill="none"></path>225 </svg>226 <div>N/A</div>227 </div>228 <div class="mode">229 <svg viewBox="0 0 24 24">230 <path d="M2 12 L22 12" stroke="#d6d6d6" stroke-width="5" fill="none"></path>231 <path d="M6 12 L10 8 L14 12 L10 16 Z" stroke="#d6d6d6" stroke-width="5" fill="none"></path>232 </svg>233 <div>N/A</div>234 </div>235 </div>236 </div>237 238 <!-- Main content -->239 <div class="content">240 <div class="section-title">Select your preferred ticket</div>241 <div class="departures-row">242 <div>Show departures from:</div>243 <div class="time">244 08:00245 <svg class="down-icon" viewBox="0 0 24 24">246 <path d="M6 9 L12 15 L18 9" stroke="#555" stroke-width="2" fill="none"></path>247 </svg>248 </div>249 </div>250 251 <div class="date-label">Friday, 3 November 2023</div>252 253 <!-- Card 1 -->254 <div class="card">255 <div class="card-header">256 <div class="logo-placeholder">[IMG: DB Logo]</div>257 <div>Deutsche Bahn</div>258 </div>259 <div class="card-main">260 <div>261 <div class="times">08:04 → 13:53</div>262 <div class="route">Berlin Hbf to Neu-Ulm station</div>263 <div class="meta-row">264 <div class="pill">5h 49m - 2 Changes265 <svg class="down-icon" viewBox="0 0 24 24">266 <path d="M6 9 L12 15 L18 9" stroke="#777" stroke-width="2" fill="none"></path>267 </svg>268 </div>269 </div>270 </div>271 <div class="price-col">272 <div class="price">₹13,260.34</div>273 <button class="select-btn">Select</button>274 </div>275 </div>276 </div>277 278 <!-- Card 2 -->279 <div class="card">280 <div class="card-header">281 <div class="logo-placeholder">[IMG: DB Logo]</div>282 <div>Deutsche Bahn</div>283 </div>284 <div class="card-main">285 <div>286 <div class="times">08:04 → 14:37</div>287 <div class="route">Berlin Hbf to Neu-Ulm station</div>288 <div class="meta-row">289 <div class="pill">6h 33m - 1 Change290 <svg class="down-icon" viewBox="0 0 24 24">291 <path d="M6 9 L12 15 L18 9" stroke="#777" stroke-width="2" fill="none"></path>292 </svg>293 </div>294 </div>295 </div>296 <div class="price-col">297 <div class="price">₹14,056.49</div>298 <button class="select-btn">Select</button>299 </div>300 </div>301 </div>302 303 <!-- Card 3 -->304 <div class="card">305 <div class="card-header">306 <div class="logo-placeholder">[IMG: DB Logo]</div>307 <div>Deutsche Bahn</div>308 </div>309 <div class="card-main">310 <div>311 <div class="times">08:29 → 14:57</div>312 <div class="route">Berlin Hbf to Neu-Ulm station</div>313 <div class="meta-row">314 <div class="pill">6h 28m - 2 Changes315 <svg class="down-icon" viewBox="0 0 24 24">316 <path d="M6 9 L12 15 L18 9" stroke="#777" stroke-width="2" fill="none"></path>317 </svg>318 </div>319 </div>320 </div>321 <div class="price-col">322 <div class="price">₹13,260.34</div>323 <button class="select-btn">Select</button>324 </div>325 </div>326 </div>327 </div>328 329 <div class="gesture"></div>330</div>331</body>332</html>