GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Found routes UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #e9f4fb;13 }14 15 /* Status bar */16 .statusbar {17 position: absolute; top: 0; left: 0;18 width: 100%; height: 120px; background: #000; color: #fff;19 display: flex; align-items: center; justify-content: space-between;20 padding: 0 40px; box-sizing: border-box; font-size: 42px;21 letter-spacing: 0.5px;22 }23 .status-icons { display: flex; align-items: center; gap: 28px; color: #fff; }24 .battery {25 display: inline-flex; align-items: center; gap: 12px; color: #fff; font-size: 38px;26 }27 .battery svg { width: 60px; height: 32px; }28 29 /* App header */30 .header {31 position: absolute; top: 120px; left: 0;32 width: 100%; height: 190px; background: #354351; color: #fff;33 display: flex; align-items: center; padding: 0 36px; box-sizing: border-box;34 }35 .header-title { font-size: 64px; font-weight: 600; margin-left: 20px; }36 .header-right { margin-left: auto; display: flex; align-items: center; gap: 36px; }37 .icon-btn { width: 72px; height: 72px; border-radius: 36px; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; }38 39 /* Filters row */40 .filters {41 position: absolute; top: 310px; left: 0; width: 100%;42 padding: 32px 36px 24px; box-sizing: border-box;43 display: flex; align-items: center; gap: 32px;44 }45 .pill {46 background: #ffffff; border-radius: 40px; padding: 26px 38px;47 font-size: 44px; color: #374552; box-shadow: 0 1px 0 rgba(0,0,0,0.06);48 display: flex; align-items: center; gap: 22px;49 border: 1px solid #d7e3ef;50 }51 .filters .spacer { flex: 1; }52 .pill .label { font-weight: 600; }53 .filter-icon { width: 100px; height: 90px; border-radius: 40px; background: #ffffff; border: 1px solid #d7e3ef; display: flex; align-items: center; justify-content: center; }54 55 /* Cards list container */56 .list {57 position: absolute; top: 420px; left: 0; width: 100%;58 padding: 0 30px 40px; box-sizing: border-box;59 }60 61 .card {62 background: #ffffff; border-radius: 28px; border: 1px solid #d9e6f2;63 margin-bottom: 40px; overflow: hidden;64 box-shadow: 0 2px 0 rgba(0,0,0,0.02);65 }66 .card-header {67 padding: 30px 34px 18px; display: flex; align-items: center; gap: 22px; color: #73879a; font-size: 38px;68 }69 .card-header .dot { width: 12px; height: 12px; background: #cbd7e3; border-radius: 50%; }70 .card-body {71 padding: 10px 34px 20px; display: flex; align-items: flex-start; gap: 30px;72 }73 .time-col { width: 170px; text-align: left; }74 .time { font-size: 62px; font-weight: 700; color: #0d1d2b; line-height: 1.2; }75 .route-col { flex: 1; }76 .stop-row { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }77 .circle {78 width: 38px; height: 38px; border-radius: 50%; border: 8px solid #3c4e60;79 box-sizing: border-box;80 }81 .circle.blue { border-color: #2aa4f0; }82 .city { font-size: 56px; font-weight: 600; color: #1c2d3d; }83 .city.small { font-size: 36px; font-weight: 500; color: #8fa1b3; margin-left: 10px; }84 .transfer {85 display: inline-flex; align-items: center; gap: 16px; margin: 10px 0 0 56px;86 }87 .tag {88 background: #29b36a; color: #fff; font-weight: 700; border-radius: 16px;89 padding: 12px 18px; font-size: 36px;90 }91 .link { color: #2aa4f0; font-size: 36px; font-weight: 600; }92 .divider { height: 2px; background: #e6eef5; margin: 24px 34px; }93 .train-img {94 margin: 0 34px 24px; width: 220px; height: 80px;95 background: #E0E0E0; border: 1px solid #BDBDBD;96 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px;97 border-radius: 8px;98 }99 .price-bar {100 background: #13a4f6; color: #fff; font-weight: 800; font-size: 52px;101 padding: 28px 34px; text-align: center;102 }103 104 /* Simple SVG styles */105 .svg { fill: none; stroke: #fff; stroke-width: 5; }106 .svg-dark { fill: none; stroke: #3b4a58; stroke-width: 6; }107 108</style>109</head>110<body>111<div id="render-target">112 113 <!-- Status bar -->114 <div class="statusbar">115 <div>8:09</div>116 <div class="status-icons">117 <span>•</span>118 <span>•</span>119 <div class="battery">120 <svg viewBox="0 0 50 26">121 <rect x="2" y="4" width="40" height="18" rx="3" ry="3" stroke="#fff" fill="none" stroke-width="3"></rect>122 <rect x="44" y="9" width="6" height="8" fill="#fff"></rect>123 <rect x="5" y="7" width="33" height="12" fill="#fff"></rect>124 </svg>125 <span>97%</span>126 </div>127 </div>128 </div>129 130 <!-- App header -->131 <div class="header">132 <div class="icon-btn">133 <svg width="56" height="56" viewBox="0 0 24 24">134 <path d="M15 18L9 12l6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>135 </svg>136 </div>137 <div class="header-title">Found routes</div>138 <div class="header-right">139 <div class="icon-btn">140 <!-- Headphone -->141 <svg width="40" height="40" viewBox="0 0 24 24">142 <path d="M3 12a9 9 0 0118 0" class="svg"></path>143 <rect x="3" y="12" width="4" height="7" rx="2" fill="#fff"></rect>144 <rect x="17" y="12" width="4" height="7" rx="2" fill="#fff"></rect>145 </svg>146 </div>147 <div class="icon-btn">148 <!-- Share -->149 <svg width="40" height="40" viewBox="0 0 24 24">150 <circle cx="6" cy="12" r="2" fill="#fff"></circle>151 <circle cx="18" cy="6" r="2" fill="#fff"></circle>152 <circle cx="18" cy="18" r="2" fill="#fff"></circle>153 <path d="M8 12l8-6M8 12l8 6" stroke="#fff" stroke-width="2"></path>154 </svg>155 </div>156 </div>157 </div>158 159 <!-- Filters -->160 <div class="filters">161 <div class="pill">162 <svg width="30" height="30" viewBox="0 0 24 24">163 <path d="M6 14l6-6 6 6" stroke="#3b4a58" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>164 </svg>165 <span class="label">Time</span>166 </div>167 <div class="pill">168 <svg width="30" height="30" viewBox="0 0 24 24">169 <path d="M6 14l6-6 6 6" stroke="#3b4a58" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>170 </svg>171 <span class="label">Price</span>172 </div>173 <div class="spacer"></div>174 <div class="filter-icon">175 <!-- sliders icon -->176 <svg width="48" height="48" viewBox="0 0 24 24">177 <path d="M5 6h14M5 12h14M5 18h14" stroke="#3b4a58" stroke-width="2"></path>178 <circle cx="9" cy="6" r="2" fill="#3b4a58"></circle>179 <circle cx="15" cy="12" r="2" fill="#3b4a58"></circle>180 <circle cx="12" cy="18" r="2" fill="#3b4a58"></circle>181 </svg>182 </div>183 </div>184 185 <!-- Cards list -->186 <div class="list">187 188 <!-- Card 0 (short top example) -->189 <div class="card">190 <div class="card-body" style="padding-top:24px;">191 <div class="time-col">192 <div class="time">11:44</div>193 </div>194 <div class="route-col">195 <div class="stop-row">196 <div class="circle blue"></div>197 <div class="city">Ulm<span class="city small">Ulm</span></div>198 </div>199 </div>200 </div>201 <div class="divider"></div>202 <div class="train-img">[IMG: Train icon]</div>203 <div class="price-bar">from 105.16 EUR</div>204 </div>205 206 <!-- Card 1 -->207 <div class="card">208 <div class="card-header">209 <span>Sun 11/5</span>210 <svg width="34" height="34" viewBox="0 0 24 24">211 <circle cx="12" cy="12" r="9" stroke="#8ea3b6" stroke-width="2" fill="none"></circle>212 <path d="M12 7v6h5" stroke="#8ea3b6" stroke-width="2" fill="none" stroke-linecap="round"></path>213 </svg>214 <span>Duration 6 h 16 min</span>215 </div>216 <div class="card-body">217 <div class="time-col">218 <div class="time">06:29</div>219 </div>220 <div class="route-col">221 <div class="stop-row">222 <div class="circle"></div>223 <div class="city">Berlin<span class="city small">Berlin</span></div>224 </div>225 <div class="transfer">226 <span class="tag">1 transfer</span>227 <span class="link">Show</span>228 </div>229 </div>230 </div>231 <div class="card-body" style="padding-top:0;">232 <div class="time-col">233 <div class="time">12:45</div>234 </div>235 <div class="route-col">236 <div class="stop-row">237 <div class="circle blue"></div>238 <div class="city">Ulm<span class="city small">Ulm</span></div>239 </div>240 </div>241 </div>242 <div class="divider"></div>243 <div class="train-img">[IMG: Train icon]</div>244 <div class="price-bar">from 105.16 EUR</div>245 </div>246 247 <!-- Card 2 -->248 <div class="card">249 <div class="card-header">250 <span>Sun 11/5</span>251 <svg width="34" height="34" viewBox="0 0 24 24">252 <circle cx="12" cy="12" r="9" stroke="#8ea3b6" stroke-width="2" fill="none"></circle>253 <path d="M12 7v6h5" stroke="#8ea3b6" stroke-width="2" fill="none" stroke-linecap="round"></path>254 </svg>255 <span>Duration 5 h 42 min</span>256 </div>257 <div class="card-body">258 <div class="time-col">259 <div class="time">07:34</div>260 </div>261 <div class="route-col">262 <div class="stop-row">263 <div class="circle"></div>264 <div class="city">Berlin<span class="city small">Berlin</span></div>265 </div>266 <div class="transfer">267 <span class="tag">1 transfer</span>268 <span class="link">Show</span>269 </div>270 </div>271 </div>272 <div class="card-body" style="padding-top:0;">273 <div class="time-col">274 <div class="time">13:16</div>275 </div>276 <div class="route-col">277 <div class="stop-row">278 <div class="circle blue"></div>279 <div class="city">Ulm<span class="city small">Ulm</span></div>280 </div>281 </div>282 </div>283 <div class="divider"></div>284 <div class="train-img">[IMG: Train icon]</div>285 <div class="price-bar">from 131.47 EUR</div>286 </div>287 288 <!-- Card 3 -->289 <div class="card">290 <div class="card-header">291 <span>Sun 11/5</span>292 <svg width="34" height="34" viewBox="0 0 24 24">293 <circle cx="12" cy="12" r="9" stroke="#8ea3b6" stroke-width="2" fill="none"></circle>294 <path d="M12 7v6h5" stroke="#8ea3b6" stroke-width="2" fill="none" stroke-linecap="round"></path>295 </svg>296 <span>Duration 6 h 6 min</span>297 </div>298 <div class="card-body">299 <div class="time-col">300 <div class="time">07:34</div>301 </div>302 <div class="route-col">303 <div class="stop-row">304 <div class="circle"></div>305 <div class="city" style="text-transform: uppercase;">Berlin<span class="city small" style="text-transform: uppercase;">Berlin</span></div>306 </div>307 <div class="transfer">308 <span class="tag">1 transfer</span>309 <span class="link">Show</span>310 </div>311 </div>312 </div>313 <div class="card-body" style="padding-top:0;">314 <div class="time-col">315 <div class="time">13:40</div>316 </div>317 <div class="route-col">318 <div class="stop-row">319 <div class="circle blue"></div>320 <div class="city" style="text-transform: uppercase;">Ulm<span class="city small" style="text-transform: uppercase;">Ulm</span></div>321 </div>322 </div>323 </div>324 <div class="divider"></div>325 <div class="train-img">[IMG: Train icon]</div>326 <div class="price-bar">from 131.47 EUR</div>327 </div>328 329 </div>330 331 <!-- Bottom gesture bar (for realism) -->332 <div style="position:absolute; bottom:28px; left:50%; transform:translateX(-50%); width:320px; height:14px; background:#000; border-radius:8px; opacity:0.2;"></div>333 334</div>335</body>336</html>