GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Connections UI</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#121212; color:#fff;10 border-radius:22px;11 }12 /* Status bar */13 .status-bar {14 position:absolute; top:0; left:0; right:0; height:90px; background:#1a1a1a;15 display:flex; align-items:center; justify-content:space-between; padding:0 40px; font-size:40px; color:#fff;16 }17 .status-icons { display:flex; align-items:center; gap:26px; }18 .icon {19 width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center;20 }21 .icon svg { width:100%; height:100%; fill:#fff; }22 /* App bar */23 .app-bar {24 position:absolute; top:90px; left:0; right:0; height:170px; background:#c62828;25 display:flex; align-items:center; justify-content:center;26 }27 .app-bar .title { font-size:60px; font-weight:600; }28 .app-bar .left, .app-bar .right {29 position:absolute; top:0; height:100%; display:flex; align-items:center;30 }31 .app-bar .left { left:30px; }32 .app-bar .right { right:30px; }33 .round-btn {34 width:100px; height:100px; border-radius:50%; border:2px solid rgba(255,255,255,0.35);35 display:flex; align-items:center; justify-content:center;36 }37 /* Content area */38 .content { position:absolute; top:260px; left:0; right:0; bottom:0; padding:30px; overflow-y:auto; }39 .card {40 background:#1f1f1f; border-radius:28px; margin-bottom:26px; padding:34px;41 box-shadow:0 4px 12px rgba(0,0,0,0.4);42 }43 .route-summary {44 position:relative; padding:20px 20px 26px 120px;45 }46 .route-rail {47 position:absolute; left:60px; top:30px; bottom:30px; width:8px; background:#2a2a2a; border-radius:6px;48 }49 .stop-dot {50 position:absolute; left:56px; width:16px; height:16px; background:#aaa; border-radius:50%;51 }52 .stop-dot.top { top:30px; }53 .stop-dot.bottom { bottom:30px; }54 .route-summary h3, .route-summary h4 { margin:12px 0; }55 .route-summary h3 { font-size:50px; font-weight:600; }56 .route-summary h4 { font-size:42px; font-weight:500; color:#ddd; }57 .summary-row {58 margin-top:26px; display:flex; align-items:center; gap:18px; font-size:38px; color:#cfcfcf;59 }60 .summary-row .chip { padding:6px 14px; border-radius:16px; background:#2a2a2a; }61 .summary-actions { margin-left:auto; display:flex; align-items:center; gap:18px; }62 .summary-actions .icon { width:52px; height:52px; }63 .date-label { font-size:40px; color:#bdbdbd; margin:12px 12px 18px; }64 /* Connection card */65 .connection {66 display:grid; grid-template-columns:120px 1fr 220px; align-items:center; gap:24px;67 }68 .train-badges { display:flex; align-items:center; gap:16px; }69 .badge-train {70 width:96px; height:76px; background:#2d5bd1; border-radius:12px; display:flex; align-items:center; justify-content:center;71 border:1px solid #3b69dd;72 }73 .badge-train span { font-size:28px; }74 .badge-ic {75 background:#d32f2f; color:#fff; font-weight:700; font-size:34px; padding:18px 24px; border-radius:12px;76 }77 .dir { font-size:44px; font-weight:600; }78 .times { font-size:52px; font-weight:700; }79 .platform { font-size:38px; color:#cfcfcf; margin-top:12px; display:flex; align-items:center; gap:18px; }80 .platform .tag { border:1px solid #777; padding:4px 10px; border-radius:8px; font-size:32px; color:#ddd; }81 .route-line {82 margin-top:16px; height:22px; display:flex; align-items:center; gap:36px;83 }84 .route-line .line {85 flex:1; height:4px; background:#d8d8d8; opacity:0.9;86 }87 .route-line .dot {88 width:18px; height:18px; background:#fff; border-radius:50%;89 }90 .dur { text-align:right; font-size:38px; color:#cfcfcf; margin-top:12px; }91 /* Bottom sheet / nav */92 .bottom-bar {93 position:absolute; left:0; right:0; bottom:0; height:180px; background:#1b1b1b;94 border-top-left-radius:24px; border-top-right-radius:24px;95 display:flex; align-items:center; justify-content:space-around; padding:0 40px; color:#d7d7d7; font-size:34px;96 }97 .nav-item { display:flex; flex-direction:column; align-items:center; gap:14px; }98 .nav-icon { width:92px; height:92px; background:#2a2a2a; border-radius:50%; display:flex; align-items:center; justify-content:center; }99 .nav-icon svg { width:52px; height:52px; fill:#cfcfcf; }100</style>101</head>102<body>103<div id="render-target">104 <!-- Status bar -->105 <div class="status-bar">106 <div>10:40</div>107 <div class="status-icons">108 <!-- simple icons -->109 <div class="icon">110 <svg viewBox="0 0 24 24"><path d="M12 3c3.9 0 7 3.1 7 7h-2c0-2.8-2.2-5-5-5s-5 2.2-5 5H5c0-3.9 3.1-7 7-7zm-7 11h2c0 2.8 2.2 5 5 5s5-2.2 5-5h2c0 3.9-3.1 7-7 7s-7-3.1-7-7z"/></svg>111 </div>112 <div class="icon">113 <svg viewBox="0 0 24 24"><path d="M12 2l6 6h-4v8H10V8H6l6-6z"/></svg>114 </div>115 <div class="icon">116 <svg viewBox="0 0 24 24"><path d="M17 3H7L3 7v10l4 4h10l4-4V7l-4-4zm-1 16H8l-3-3V8l3-3h8l3 3v8l-3 3z"/></svg>117 </div>118 <div class="icon">119 <svg viewBox="0 0 24 24"><path d="M14 2H10v2h4V2zm4 8H6v2h12v-2zm2 8H4v2h16v-2z"/></svg>120 </div>121 </div>122 </div>123 124 <!-- App bar -->125 <div class="app-bar">126 <div class="left">127 <div class="round-btn">128 <svg viewBox="0 0 24 24"><path d="M15.5 19l-7-7 7-7v14z" fill="#fff"/></svg>129 </div>130 </div>131 <div class="title">Connections</div>132 <div class="right">133 <div class="round-btn">134 <svg viewBox="0 0 24 24"><path d="M4 12h16M13 7l7 5-7 5" stroke="#fff" stroke-width="2" fill="none"/></svg>135 </div>136 </div>137 </div>138 139 <!-- Content -->140 <div class="content">141 <!-- Route summary card -->142 <div class="card route-summary">143 <div class="route-rail"></div>144 <div class="stop-dot top"></div>145 <div class="stop-dot bottom"></div>146 <h3>Dundee</h3>147 <h4>Guilford London Road</h4>148 <div class="summary-row">149 <span class="chip">Mon 30.10.</span>150 <span class="chip">06:10 Dep</span>151 <div class="summary-actions">152 <div class="icon">153 <svg viewBox="0 0 24 24"><path d="M12 8v5l4 2M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z" fill="none" stroke="#fff" stroke-width="2"/></svg>154 </div>155 <div class="icon">156 <svg viewBox="0 0 24 24"><path d="M5 5h14M9 12h10M13 19h6" stroke="#fff" stroke-width="2"/></svg>157 </div>158 </div>159 </div>160 </div>161 162 <div class="date-label">Monday 30.10.2023</div>163 164 <!-- Connection 1 -->165 <div class="card">166 <div class="connection">167 <div class="train-badges">168 <div class="badge-train"><span>🚉</span></div>169 <div class="badge-ic">IC</div>170 </div>171 <div>172 <div class="dir">Direction Edinburgh Waverley</div>173 <div class="times">06:35<span style="margin-left:24px; font-weight:400; color:#bdbdbd;">—</span>174 <span style="float:right; font-weight:700;">14:33</span>175 </div>176 <div class="route-line">177 <div class="dot"></div>178 <div class="line"></div>179 <div class="dot"></div>180 <div class="line"></div>181 <div class="dot"></div>182 <div class="line"></div>183 <div class="dot"></div>184 </div>185 <div class="platform">186 <span>Pl. 2</span>187 <span class="tag">R</span>188 </div>189 </div>190 <div class="dur">7 h 58 min</div>191 </div>192 </div>193 194 <!-- Connection 2 -->195 <div class="card">196 <div class="connection">197 <div class="train-badges">198 <div class="badge-train"><span>🚉</span></div>199 <div class="badge-ic">IC</div>200 </div>201 <div>202 <div class="dir">Direction Edinburgh Waverley</div>203 <div class="times">07:15<span style="margin-left:24px; font-weight:400; color:#bdbdbd;">—</span>204 <span style="float:right; font-weight:700;">15:32</span>205 </div>206 <div class="route-line">207 <div class="dot"></div>208 <div class="line"></div>209 <div class="dot"></div>210 <div class="line"></div>211 <div class="dot"></div>212 <div class="line"></div>213 <div class="dot"></div>214 </div>215 <div class="platform">216 <span>Pl. 1</span>217 <span class="tag">R</span>218 </div>219 </div>220 <div class="dur">8 h 17 min</div>221 </div>222 </div>223 224 <!-- Connection 3 -->225 <div class="card">226 <div class="connection">227 <div class="train-badges">228 <div class="badge-train"><span>🚉</span></div>229 <div class="badge-ic">IC</div>230 </div>231 <div>232 <div class="dir">Direction Edinburgh Waverley</div>233 <div class="times">07:40<span style="margin-left:24px; font-weight:400; color:#bdbdbd;">—</span>234 <span style="float:right; font-weight:700;">15:33</span>235 </div>236 <div class="route-line">237 <div class="dot"></div>238 <div class="line"></div>239 <div class="dot"></div>240 <div class="line"></div>241 <div class="dot"></div>242 <div class="line"></div>243 <div class="dot"></div>244 </div>245 <div class="platform">246 <span>Pl. 2</span>247 <span class="tag">R</span>248 </div>249 </div>250 <div class="dur">7 h 53 min</div>251 </div>252 </div>253 254 <!-- Connection 4 -->255 <div class="card">256 <div class="connection">257 <div class="train-badges">258 <div class="badge-train"><span>🚉</span></div>259 <div class="badge-ic">IC</div>260 </div>261 <div>262 <div class="dir">Direction London King's Cross</div>263 <div class="times">09:08<span style="margin-left:24px; font-weight:400; color:#bdbdbd;">—</span>264 <span style="float:right; font-weight:700;">16:32</span>265 </div>266 <div class="route-line">267 <div class="dot"></div>268 <div class="line"></div>269 <div class="dot"></div>270 <div class="line"></div>271 <div class="dot"></div>272 <div class="line"></div>273 <div class="dot"></div>274 </div>275 <div class="platform">276 <span>Pl. 1</span>277 <span class="tag">R</span>278 </div>279 </div>280 <div class="dur">7 h 24 min</div>281 </div>282 </div>283 </div>284 285 <!-- Bottom nav -->286 <div class="bottom-bar">287 <div class="nav-item">288 <div class="nav-icon">289 <svg viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9H6v-9H3l9-8z"/></svg>290 </div>291 <div>Plan</div>292 </div>293 <div class="nav-item">294 <div class="nav-icon">295 <svg viewBox="0 0 24 24"><path d="M4 17h16v2H4zm2-2h12l-1-6H7l-1 6zm5-10h2l1 2H8l1-2z"/></svg>296 </div>297 <div>Trains</div>298 </div>299 <div class="nav-item">300 <div class="nav-icon">301 <svg viewBox="0 0 24 24"><path d="M12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0-5v4m0 12v4m-9-9h4m12 0h4"/></svg>302 </div>303 <div>Map</div>304 </div>305 <div class="nav-item">306 <div class="nav-icon">307 <svg viewBox="0 0 24 24"><path d="M4 4h7v7H4V4zm9 0h7v7h-7V4zM4 12h7v8H4v-8zm9 0h7v8h-7v-8z"/></svg>308 </div>309 <div>Tickets</div>310 </div>311 <div class="nav-item">312 <div class="nav-icon">313 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z"/></svg>314 </div>315 <div>Profile</div>316 </div>317 </div>318</div>319</body>320</html>