GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Transit Options Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; }7 #render-target{8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#ffffff; font-family: Arial, Helvetica, sans-serif; color:#222;10 }11 12 /* Top status bar */13 .status-bar{14 height:90px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;15 color:#111; font-weight:600; font-size:38px;16 }17 .status-icons{ display:flex; gap:22px; align-items:center; }18 .dot{ width:16px; height:16px; background:#111; border-radius:50%; opacity:.8; }19 .signal{ width:28px; height:28px; border:3px solid #111; border-radius:6px; }20 21 /* Search header */22 .header{23 padding:8px 24px 16px 24px;24 }25 .search-row{26 display:flex; align-items:center; gap:18px; margin-top:8px;27 }28 .icon-btn{29 width:72px; height:72px; border-radius:50%; background:#f1f1f1; display:flex; align-items:center; justify-content:center;30 }31 .stack{32 flex:1; display:flex; flex-direction:column; gap:14px;33 }34 .field{35 background:#f6f7f8; border:1px solid #dcdcdc; border-radius:18px;36 height:96px; display:flex; align-items:center; padding:0 22px; gap:16px;37 font-size:38px; color:#222;38 }39 .kebab{ width:50px; text-align:center; font-size:54px; color:#7a7a7a; }40 .swap{ width:56px; height:56px; border-radius:50%; background:#f1f1f1; display:flex; align-items:center; justify-content:center; }41 42 /* Transport chips row */43 .modes{44 display:flex; align-items:center; gap:28px; padding:8px 24px 8px 24px;45 overflow:hidden;46 }47 .chip{48 background:#f5f5f5; border:1px solid #e1e1e1; padding:18px 26px; border-radius:38px;49 display:flex; align-items:center; gap:12px; font-size:34px; color:#2a2a2a;50 }51 .chip.active{ background:#eaf1ff; border-color:#cfe0ff; }52 .chip .icon{ width:34px; height:34px; }53 54 /* depart/options row */55 .control-row{56 display:flex; justify-content:space-between; align-items:center; padding:6px 24px 18px 24px;57 }58 .dropdown{59 background:#fff; border:1px solid #e1e1e1; border-radius:16px; padding:18px 22px; font-size:36px;60 display:flex; align-items:center; gap:12px;61 }62 .btn-outline{63 background:#fff; border:1px solid #e1e1e1; border-radius:16px; padding:18px 22px; font-size:36px;64 display:flex; align-items:center; gap:18px;65 }66 67 /* content area */68 .content{69 background:#f6f6f7; border-top:1px solid #eaeaea;70 padding:24px;71 height:1870px; overflow:hidden;72 }73 .section-title{74 font-size:48px; font-weight:700; margin:8px 6px 20px 6px;75 }76 77 .trip-card{78 background:#fff; border:1px solid #e6e6e6; border-radius:22px;79 padding:26px; margin:18px 6px; box-shadow:0 1px 0 rgba(0,0,0,0.04);80 }81 .top-line{82 display:flex; align-items:center; justify-content:space-between;83 }84 .route{85 display:flex; align-items:center; gap:16px; font-size:34px; color:#2e2e2e;86 }87 .pill{88 background:#2e7d32; color:#fff; font-weight:700; padding:8px 16px; border-radius:12px; font-size:34px;89 }90 .right-time{91 font-size:46px; font-weight:700;92 }93 .times{ color:#3b3b3b; font-size:36px; margin-top:16px; }94 .fare{ color:#3b3b3b; font-size:36px; margin-top:8px; text-align:right; }95 .note{96 display:flex; align-items:center; gap:12px; color:#c87313; font-size:34px; margin-top:14px; font-weight:700;97 }98 99 .buspill{ background:#ef6c00; }100 .bluepill{ background:#2d72d9; }101 102 /* Bottom gesture bar */103 .home-bar{104 position:absolute; bottom:24px; left:50%; transform:translateX(-50%);105 width:300px; height:10px; background:#cfcfcf; border-radius:8px;106 }107 108 /* Simple SVG styles */109 svg{ display:block; }110</style>111</head>112<body>113<div id="render-target">114 115 <!-- Status bar -->116 <div class="status-bar">117 <div>11:05</div>118 <div class="status-icons">119 <div class="dot"></div>120 <div class="dot"></div>121 <div class="dot"></div>122 <div class="dot"></div>123 <div class="signal"></div>124 </div>125 </div>126 127 <!-- Search and header -->128 <div class="header">129 <div class="search-row">130 <div class="icon-btn" aria-label="Back">131 <svg width="34" height="34" viewBox="0 0 24 24">132 <path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>133 </svg>134 </div>135 <div class="stack">136 <div class="field">137 <svg width="34" height="34" viewBox="0 0 24 24">138 <path d="M12 2L12 22" stroke="#666" stroke-width="2"/>139 <circle cx="12" cy="8" r="3" fill="#666"/>140 </svg>141 <div>Grays Ferry Crescent Skatep...</div>142 <div style="margin-left:auto;" class="kebab">⋮</div>143 </div>144 <div class="field">145 <svg width="34" height="34" viewBox="0 0 24 24">146 <path d="M12 2c-3.9 0-7 3.1-7 7 0 5 7 13 7 13s7-8 7-13c0-3.9-3.1-7-7-7z" fill="#e53935"/>147 <circle cx="12" cy="9" r="3" fill="#fff"/>148 </svg>149 <div>Philadelphia</div>150 <div class="swap" title="Swap">151 <svg width="28" height="28" viewBox="0 0 24 24">152 <path d="M7 7h12l-3-3m3 3l-3 3M17 17H5l3 3m-3-3l3-3" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>153 </svg>154 </div>155 </div>156 </div>157 </div>158 </div>159 160 <!-- Modes row -->161 <div class="modes">162 <div class="chip">163 <svg class="icon" viewBox="0 0 24 24">164 <path d="M3 12h14l-2-5H5zM6 17a2 2 0 114 0M14 17a2 2 0 114 0" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>165 </svg>166 <div>17 min</div>167 </div>168 <div class="chip">169 <svg class="icon" viewBox="0 0 24 24">170 <path d="M5 17l3-5 3 5M13 17l2-3 3 3M6 12h4" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>171 </svg>172 <div>—</div>173 </div>174 <div class="chip active">175 <svg class="icon" viewBox="0 0 24 24">176 <rect x="4" y="6" width="16" height="10" rx="2" ry="2" stroke="#1a57c7" stroke-width="2" fill="none"/>177 <circle cx="8" cy="17" r="1.6" fill="#1a57c7"/>178 <circle cx="16" cy="17" r="1.6" fill="#1a57c7"/>179 </svg>180 <div>26 min</div>181 </div>182 <div class="chip">183 <svg class="icon" viewBox="0 0 24 24">184 <path d="M5 12h10M9 7l-4 5 4 5" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>185 </svg>186 <div>1 hr 15</div>187 </div>188 <div class="chip">189 <svg class="icon" viewBox="0 0 24 24">190 <path d="M5 12h10l3-4M15 12l3 4" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>191 </svg>192 <div>17 min</div>193 </div>194 </div>195 196 <!-- Depart and options -->197 <div class="control-row">198 <div class="dropdown">199 Depart at 11:05 pm200 <svg width="20" height="20" viewBox="0 0 24 24">201 <path d="M6 9l6 6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>202 </svg>203 </div>204 <div class="btn-outline">205 <svg width="28" height="28" viewBox="0 0 24 24">206 <path d="M4 6h16M8 12h12M12 18h8" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>207 </svg>208 Options209 </div>210 </div>211 212 <!-- Content listing -->213 <div class="content">214 <div class="section-title">Public transport</div>215 216 <!-- Card 1 -->217 <div class="trip-card">218 <div class="top-line">219 <div class="route">220 <svg width="34" height="34" viewBox="0 0 24 24">221 <path d="M12 3v12m0 6v0M7 12h10" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>222 </svg>223 <svg width="34" height="34" viewBox="0 0 24 24">224 <rect x="3" y="6" width="18" height="10" rx="2" stroke="#1a57c7" stroke-width="2" fill="none"/>225 </svg>226 <span class="pill">36</span>227 </div>228 <div class="right-time">26 min</div>229 </div>230 <div class="times">1:39 pm – 2:05 pm</div>231 <div class="fare">$2.50</div>232 <div class="times" style="color:#666;">Scheduled at 1:50 pm, 2:00 pm from 49th St & Paschall Av</div>233 <div class="note">234 <svg width="26" height="26" viewBox="0 0 24 24">235 <path d="M12 2l10 18H2z" fill="#f5a25b"/>236 <rect x="11" y="9" width="2" height="5" fill="#fff"/>237 <rect x="11" y="15.5" width="2" height="2" fill="#fff"/>238 </svg>239 Modified schedule240 </div>241 </div>242 243 <!-- Card 2 -->244 <div class="trip-card">245 <div class="top-line">246 <div class="route">247 <svg width="34" height="34" viewBox="0 0 24 24">248 <path d="M12 3v12m0 6v0M7 12h10" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>249 </svg>250 <svg width="34" height="34" viewBox="0 0 24 24">251 <rect x="3" y="6" width="18" height="10" rx="2" stroke="#1a57c7" stroke-width="2" fill="none"/>252 </svg>253 <span class="pill">11</span>254 </div>255 <div class="right-time">27 min</div>256 </div>257 <div class="times">1:41 pm – 2:08 pm</div>258 <div class="fare">$2.50</div>259 <div class="times" style="color:#666;">Scheduled at 1:54 pm, 2:04 pm from Woodland Av & 47th St</div>260 <div class="note">261 <svg width="26" height="26" viewBox="0 0 24 24">262 <path d="M12 2l10 18H2z" fill="#f5a25b"/>263 <rect x="11" y="9" width="2" height="5" fill="#fff"/>264 <rect x="11" y="15.5" width="2" height="2" fill="#fff"/>265 </svg>266 Modified schedule267 </div>268 </div>269 270 <!-- Card 3 -->271 <div class="trip-card">272 <div class="top-line">273 <div class="route">274 <svg width="34" height="34" viewBox="0 0 24 24">275 <path d="M12 3v12m0 6v0M7 12h10" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>276 </svg>277 <svg width="34" height="34" viewBox="0 0 24 24">278 <rect x="3" y="6" width="18" height="10" rx="2" stroke="#1a57c7" stroke-width="2" fill="none"/>279 </svg>280 <span class="buspill pill" style="background:#e24d36;">64</span>281 <span class="pill bluepill" style="background:#2f6cdf;">MFL</span>282 </div>283 <div class="right-time">32 min</div>284 </div>285 <div class="times">1:48 pm – 2:20 pm</div>286 <div class="fare">$3.50</div>287 <div class="times" style="color:#666;">in 17 min (early), 38 min (scheduled) from Grays Ferry Av & Grove St – FS</div>288 <div class="note">289 <svg width="26" height="26" viewBox="0 0 24 24">290 <path d="M12 2l10 18H2z" fill="#f5a25b"/>291 <rect x="11" y="9" width="2" height="5" fill="#fff"/>292 <rect x="11" y="15.5" width="2" height="2" fill="#fff"/>293 </svg>294 Detour295 </div>296 </div>297 298 <!-- Card 4 -->299 <div class="trip-card">300 <div class="top-line">301 <div class="route">302 <svg width="34" height="34" viewBox="0 0 24 24">303 <path d="M12 3v12m0 6v0M7 12h10" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>304 </svg>305 <span class="buspill pill" style="background:#e24d36;">64</span>306 <svg width="34" height="34" viewBox="0 0 24 24">307 <rect x="3" y="6" width="18" height="10" rx="2" stroke="#1a57c7" stroke-width="2" fill="none"/>308 </svg>309 <span class="pill">13</span>310 </div>311 <div class="right-time">33 min</div>312 </div>313 <div class="times">1:48 pm – 2:21 pm</div>314 <div class="fare">$3.50</div>315 <div class="times" style="color:#666;">in 17 min (early), 38 min (scheduled) from Grays Ferry Av & Grove St – FS</div>316 <div class="note">317 <svg width="26" height="26" viewBox="0 0 24 24">318 <path d="M12 2l10 18H2z" fill="#f5a25b"/>319 <rect x="11" y="9" width="2" height="5" fill="#fff"/>320 <rect x="11" y="15.5" width="2" height="2" fill="#fff"/>321 </svg>322 Detour323 </div>324 </div>325 326 </div>327 328 <div class="home-bar"></div>329</div>330</body>331</html>