GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Transit Options - Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width:1080px; height:2400px;11 overflow:hidden;12 background:#ffffff;13 color:#222;14 }15 16 /* Status bar */17 .status-bar{18 height:70px;19 padding:20px 28px;20 display:flex; align-items:center; justify-content:space-between;21 font-size:34px; color:#333;22 }23 .status-right{ display:flex; align-items:center; gap:22px; }24 .dot{ width:12px; height:12px; background:#333; border-radius:50%; display:inline-block; }25 .battery{26 width:48px; height:24px; border:3px solid #333; border-radius:6px; position:relative;27 }28 .battery::after{ content:""; position:absolute; right:-8px; top:6px; width:6px; height:12px; background:#333; border-radius:2px; }29 .battery .level{ position:absolute; left:2px; top:2px; bottom:2px; width:65%; background:#333; border-radius:4px; }30 31 /* Header / Search */32 .top-row{33 display:flex; align-items:center; gap:24px;34 padding:10px 24px 8px 24px;35 }36 .icon-btn{ width:72px; height:72px; border-radius:36px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #e5e5e5; }37 .search-section{ padding:0 24px; }38 .field{39 position:relative;40 background:#fff;41 border:2px solid #e3e6ea;42 border-radius:24px;43 padding:24px 110px 24px 28px;44 font-size:44px;45 color:#222;46 margin-bottom:18px;47 }48 .field .hint{ color:#1a73e8; font-weight:600; }49 .field .right-icon{ position:absolute; right:18px; top:50%; transform:translateY(-50%); }50 .swap-ic{ width:48px; height:48px; }51 .kebab{ width:10px; height:40px; display:flex; flex-direction:column; justify-content:space-between; align-items:center; }52 .kebab span{ width:10px; height:10px; background:#555; border-radius:50%; display:block; }53 54 /* Mode tabs */55 .modes{56 display:flex; align-items:center; gap:40px;57 padding:10px 24px 18px 24px;58 font-size:40px;59 }60 .mode{ display:flex; align-items:center; gap:14px; color:#5f6368; }61 .mode.active{ color:#1a73e8; background:#e8f0fe; padding:12px 22px; border-radius:40px; }62 .mode svg{ width:44px; height:44px; }63 64 /* Depart + Options */65 .filters{66 display:flex; justify-content:space-between; align-items:center;67 padding:10px 24px 16px;68 }69 .chip{70 display:flex; align-items:center; gap:16px;71 background:#f2f4f7; border:2px solid #e3e6ea; color:#1f1f1f;72 padding:20px 26px; border-radius:26px; font-size:40px;73 }74 75 /* Section title */76 .section-title{77 padding:26px 24px 10px;78 font-size:54px; font-weight:700; color:#1f1f1f;79 }80 81 /* Results list */82 .result{ padding:26px 24px; border-top:1px solid #e6e6e6; }83 .result:first-of-type{ border-top:none; }84 .result-top{85 display:flex; align-items:center; justify-content:space-between; gap:20px;86 }87 .left-stack{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }88 .rt-icon{89 width:52px; height:52px; border-radius:12px; background:#f1f3f4; display:flex; align-items:center; justify-content:center; border:1px solid #e0e0e0;90 }91 .chips{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }92 .pill{93 padding:12px 20px; border-radius:20px; color:#fff; font-size:38px; font-weight:700;94 }95 .pill.darkblue{ background:#0b3a65; }96 .pill.green{ background:#2e8b57; }97 .pill.lightblue{ background:#a8d1ff; color:#0b3a65; font-weight:700; }98 .pill.navy{ background:#2a56c6; }99 .pill.red{ background:#d64343; }100 .pill.blue{ background:#1e88e5; }101 .pill.gray{ background:#5f6368; }102 .duration{ font-size:52px; font-weight:800; color:#111; }103 .price{ font-size:44px; font-weight:700; color:#5f6368; margin-top:10px; text-align:right; }104 .times{ font-size:44px; color:#1f1f1f; margin-top:14px; }105 .sub{ font-size:34px; color:#6b6f75; margin-top:8px; }106 .inline{ display:flex; align-items:center; gap:12px; }107 .inline .sep{ color:#9aa0a6; }108 109 /* Simple SVG sizing */110 .sm{ width:36px; height:36px; }111 112 /* Helper */113 .muted{ color:#6b6f75; }114</style>115</head>116<body>117<div id="render-target">118 119 <!-- Status Bar -->120 <div class="status-bar">121 <div>10:57</div>122 <div class="status-right">123 <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>124 <svg width="34" height="34" viewBox="0 0 24 24" fill="#444"><path d="M12 3a9 9 0 0 0-9 9h2a7 7 0 0 1 7-7V3zm0 4a5 5 0 0 0-5 5h2a3 3 0 0 1 3-3V7z"></path></svg>125 <div class="battery"><div class="level"></div></div>126 </div>127 </div>128 129 <!-- Top controls -->130 <div class="top-row">131 <div class="icon-btn">132 <svg width="40" height="40" viewBox="0 0 24 24" fill="#333"><path d="M15.5 19 8.5 12l7-7-1.4-1.4L5.7 12l8.4 8.4z"/></svg>133 </div>134 <div class="icon-btn">135 <svg width="40" height="40" viewBox="0 0 24 24" fill="#555"><circle cx="12" cy="12" r="9" stroke="#555" stroke-width="2" fill="none"/><circle cx="12" cy="12" r="2" fill="#555"/></svg>136 </div>137 </div>138 139 <div class="search-section">140 <div class="field">141 Philadelphia142 <div class="right-icon">143 <div class="kebab"><span></span><span></span><span></span></div>144 </div>145 </div>146 <div class="field">147 New York148 <div class="right-icon">149 <svg class="swap-ic" viewBox="0 0 24 24" fill="#333">150 <path d="M7 7h10v2H7l2.5 2.5L8 13 3 8l5-5 1.5 1.5L7 7zm10 10H7v-2h10l-2.5-2.5L16 11l5 5-5 5-1.5-1.5L17 17z"/>151 </svg>152 </div>153 </div>154 </div>155 156 <!-- Modes -->157 <div class="modes">158 <div class="mode">159 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 11h14l-1-4a3 3 0 0 0-3-2H9a3 3 0 0 0-3 2L5 11zm-1 2h16v3H4v-3zm2 4a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 .001 3.999A2 2 0 0 0 16 17z"/></svg>160 <span>1 hr 49</span>161 </div>162 <div class="mode">163 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm14 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM9 10l2-3h2l2 3h-2l-1 2h3l1 2h-3l-2 3h-2l2-3H8l-1-2h3l-1-2H9z"/></svg>164 <span>-</span>165 </div>166 <div class="mode active">167 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 3h10a4 4 0 0 1 4 4v7a4 4 0 0 1-4 4l2 2v1h-2l-3-3H10l-3 3H5v-1l2-2a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v6h14V7a2 2 0 0 0-2-2H7z"/></svg>168 <span>1 hr 50</span>169 </div>170 <div class="mode">171 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M13.5 5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0zM6 21v-2l3-5-1.5-2A3 3 0 0 1 12 9h2l2 3-2 1-1-1h-1l1 2-3 5h6v2H6z"/></svg>172 <span>1 day</span>173 </div>174 <div class="mode">175 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 11h16v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8zm4-6h8l2 5H6l2-5z"/></svg>176 <span>1 hr 49</span>177 </div>178 </div>179 180 <!-- Filters -->181 <div class="filters">182 <div class="chip">183 Depart at 10:51 pm184 <svg class="sm" viewBox="0 0 24 24" fill="#555"><path d="M7 10l5 5 5-5H7z"/></svg>185 </div>186 <div class="chip">187 <svg class="sm" viewBox="0 0 24 24" fill="#1a73e8"><path d="M3 5h18v2H3zm0 6h18v2H3zm0 6h18v2H3z"/></svg>188 Options189 </div>190 </div>191 192 <div class="section-title">Public transport</div>193 194 <!-- Result 1 -->195 <div class="result">196 <div class="result-top">197 <div class="left-stack">198 <div class="rt-icon">199 <svg width="28" height="28" viewBox="0 0 24 24" fill="#3c4043"><path d="M3 6h18l-1 8a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3L3 6zm4 9a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 .001 3.999A2 2 0 0 0 17 15z"/></svg>200 </div>201 <div class="chips">202 <span class="pill darkblue">Greyhound US0305</span>203 <span class="pill green">Peter Pan</span>204 </div>205 </div>206 <div class="duration">1 hr 50 min</div>207 </div>208 <div class="times">1:30 pm – 3:20 pm</div>209 <div class="sub">Scheduled at 1:30 pm, 2:00 pm from Philadelphia Bus Station</div>210 </div>211 212 <!-- Result 2 -->213 <div class="result">214 <div class="result-top">215 <div class="left-stack">216 <div class="rt-icon">217 <svg width="28" height="28" viewBox="0 0 24 24" fill="#3c4043"><path d="M7 3h10a4 4 0 0 1 4 4v7a4 4 0 0 1-4 4l2 2v1h-2l-3-3H10l-3 3H5v-1l2-2a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4z"/></svg>218 </div>219 <div class="chips">220 <span class="pill lightblue">Acela</span>221 <span class="muted" style="font-size:38px;">· 8</span>222 <span class="pill navy">M7</span>223 <span class="pill navy">M20</span>224 </div>225 </div>226 <div class="duration">1 hr 35 min</div>227 </div>228 <div class="price">$212</div>229 <div class="times">1:28 pm – 3:03 pm</div>230 <div class="sub">Scheduled at 1:28 pm, 1:55 pm from William H. Gray III 30th Street</div>231 </div>232 233 <!-- Result 3 -->234 <div class="result">235 <div class="result-top">236 <div class="left-stack">237 <div class="rt-icon">238 <svg width="28" height="28" viewBox="0 0 24 24" fill="#3c4043"><path d="M7 3h10a4 4 0 0 1 4 4v7a4 4 0 0 1-4 4l2 2v1h-2l-3-3H10l-3 3H5v-1l2-2a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4z"/></svg>239 </div>240 <div class="chips">241 <span class="pill lightblue">Keystone</span>242 <span class="muted" style="font-size:38px;">· 8</span>243 <span class="pill navy">M7</span>244 <span class="pill navy">M20</span>245 </div>246 </div>247 <div class="duration">1 hr 38 min</div>248 </div>249 <div class="price">$72</div>250 <div class="times">1:55 pm – 3:33 pm</div>251 <div class="sub">Scheduled at 1:55 pm, 2:15 pm from William H. Gray III 30th Street</div>252 </div>253 254 <!-- Result 4 -->255 <div class="result">256 <div class="result-top">257 <div class="left-stack">258 <div class="rt-icon">259 <svg width="28" height="28" viewBox="0 0 24 24" fill="#3c4043"><path d="M7 3h10a4 4 0 0 1 4 4v7a4 4 0 0 1-4 4l2 2v1h-2l-3-3H10l-3 3H5v-1l2-2a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4z"/></svg>260 </div>261 <div class="chips">262 <span class="pill lightblue">Acela</span>263 <span class="pill red">NEC</span>264 <span class="pill blue">NJ...</span>265 </div>266 </div>267 <div class="duration">1 hr 22 min</div>268 </div>269 <div class="price">$212</div>270 <div class="times">3:22 pm – 4:44 pm</div>271 <div class="sub">Scheduled at 3:22 pm, 3:25 pm from William H. Gray III 30th Street</div>272 </div>273 274 <!-- Result 5 -->275 <div class="result">276 <div class="result-top">277 <div class="left-stack">278 <div class="rt-icon">279 <svg width="28" height="28" viewBox="0 0 24 24" fill="#3c4043"><path d="M7 3h10a4 4 0 0 1 4 4v7a4 4 0 0 1-4 4l2 2v1h-2l-3-3H10l-3 3H5v-1l2-2a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4z"/></svg>280 </div>281 <div class="chips">282 <span class="pill lightblue">Crescent</span>283 <span class="pill red">NEC</span>284 <span class="pill blue">NJ...</span>285 </div>286 </div>287 <div class="duration">1 hr 33 min</div>288 </div>289 <div class="price">$38</div>290 <div class="times">3:25 pm – 4:58 pm</div>291 <div class="sub">Scheduled at 3:25 pm, 3:56 pm from William H. Gray III 30th Street</div>292 </div>293 294 <!-- Result 6 -->295 <div class="result">296 <div class="result-top">297 <div class="left-stack">298 <div class="rt-icon">299 <svg width="28" height="28" viewBox="0 0 24 24" fill="#3c4043"><path d="M7 3h10a4 4 0 0 1 4 4v7a4 4 0 0 1-4 4l2 2v1h-2l-3-3H10l-3 3H5v-1l2-2a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4z"/></svg>300 </div>301 <div class="chips">302 <span class="pill lightblue">Northeast Reg...</span>303 <span class="pill red">NEC</span>304 <span class="pill blue">NJ...</span>305 </div>306 </div>307 <div class="duration">1 hr 32 min</div>308 </div>309 </div>310 311</div>312</body>313</html>