GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Transit Routes UI</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 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#ffffff; border-radius:0;11 }12 13 /* Background map */14 .map {15 position:absolute; left:0; top:0; width:1080px; height:2400px;16 background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;17 display:flex; align-items:center; justify-content:center; font-size:32px;18 letter-spacing:.5px;19 }20 21 /* Top controls */22 .top-controls{ position:absolute; top:40px; left:24px; right:24px; display:flex; align-items:center; gap:20px; }23 .circle-btn{24 width:110px; height:110px; border-radius:55px; background:#ffffff; box-shadow:0 4px 10px rgba(0,0,0,0.15);25 display:flex; align-items:center; justify-content:center;26 }27 .circle-btn svg{ width:48px; height:48px; fill:#2c3e50; }28 .spacer{ flex:1; }29 .pill{30 padding:22px 36px; background:#ffffff; border-radius:50px; box-shadow:0 4px 10px rgba(0,0,0,0.15);31 display:flex; align-items:center; gap:16px; font-size:38px; color:#1e3a56;32 }33 .pill svg{ width:40px; height:40px; fill:#1e3a56; }34 35 /* Overlay panel */36 .panel{37 position:absolute; left:20px; right:20px; top:270px; bottom:160px;38 background:#2f5e7b; border-radius:36px; padding:26px;39 box-shadow:0 12px 28px rgba(0,0,0,0.25) inset;40 overflow:hidden;41 }42 43 /* Search rows */44 .search-row{45 background:#2c5975; border-radius:18px; padding:28px 26px; margin:18px 0;46 color:#ffffff; font-size:40px; display:flex; align-items:center; gap:24px;47 border:1px solid rgba(255,255,255,0.1);48 }49 .search-row .bar-icon{50 width:54px; height:54px; border-radius:10px; background:#1f4762; display:flex; align-items:center; justify-content:center;51 }52 .search-row .bar-icon svg{ width:36px; height:36px; fill:#9ed0ff; }53 54 /* Section header */55 .section{56 background:#2a5671; border-radius:22px; padding:26px; margin-top:16px; color:#d5e9ff;57 display:flex; align-items:center; gap:20px; font-size:46px; font-weight:600;58 border:1px solid rgba(255,255,255,0.08);59 }60 .train-ico{61 width:70px; height:70px; border-radius:16px; background:#20465e; display:flex; align-items:center; justify-content:center;62 }63 .train-ico svg{ width:44px; height:44px; fill:#ffffff; }64 65 /* Results list area */66 .results{67 position:absolute; left:26px; right:26px; top:360px; bottom:240px; overflow:auto; padding-bottom:20px;68 }69 .card{70 background:#ffffff; border-radius:26px; box-shadow:0 6px 16px rgba(0,0,0,0.08);71 padding:28px; margin-bottom:22px; display:flex; align-items:center; justify-content:space-between;72 }73 .left{ display:flex; align-items:center; gap:22px; }74 .badge{75 width:60px; height:60px; border-radius:30px; color:#fff; display:flex; align-items:center; justify-content:center;76 font-weight:700; font-size:30px; border:2px solid rgba(0,0,0,0.05);77 }78 .b-green{ background:#1abc9c; }79 .b-blue{ background:#2e6bd1; }80 .b-orange{ background:#f39c12; }81 .b-yellow{ background:#f1c40f; color:#000; }82 .muted{ color:#7f8c8d; font-size:34px; }83 .right{ text-align:right; }84 .price{ color:#1e7fd7; font-weight:800; font-size:44px; }85 .time{ color:#555; font-size:44px; margin-left:10px; }86 .dot{ width:10px; height:10px; background:#cbd5e1; border-radius:50%; display:inline-block; margin:0 14px; }87 88 /* Bottom mode bar */89 .mode-bar{90 position:absolute; left:0; right:0; bottom:0; height:160px; background:#2f5e7b;91 display:flex; align-items:center; justify-content:space-around; padding:16px 20px;92 border-top:1px solid rgba(255,255,255,0.06);93 }94 .mode{95 display:flex; flex-direction:column; align-items:center; gap:12px; color:#d7ecff; font-size:34px;96 }97 .mode .circle{98 width:120px; height:120px; border-radius:60px; background:#20465e; display:flex; align-items:center; justify-content:center;99 box-shadow:inset 0 0 0 6px rgba(255,255,255,0.08);100 }101 .mode svg{ width:56px; height:56px; fill:#e7f3ff; }102 .active .circle{ box-shadow:0 0 0 8px #ffffff inset, 0 0 0 6px #2f5e7b; background:#355f76; }103</style>104</head>105<body>106<div id="render-target">107 108 <div class="map">[IMG: Google Map]</div>109 110 <!-- Top controls -->111 <div class="top-controls">112 <div class="circle-btn" title="Back">113 <svg viewBox="0 0 24 24"><path d="M15.5 19L9 12l6.5-7 1.5 1.4L12.9 12l4.1 4.6L15.5 19z"/></svg>114 </div>115 <div class="circle-btn" title="Refresh">116 <svg viewBox="0 0 24 24"><path d="M17.7 6.3A8 8 0 1 0 20 12h-2a6 6 0 1 1-1.8-4.3l-2.2 2.2H21V4l-3.3 2.3z"/></svg>117 </div>118 <div class="spacer"></div>119 <div class="pill">120 <svg viewBox="0 0 24 24"><path d="M12 6a1 1 0 0 1 1 1v4.6l3.2 1.8a1 1 0 1 1-1 1.8l-3.8-2.1a1 1 0 0 1-.4-.7V7a1 1 0 0 1 1-1zm0-4a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"/></svg>121 Leave: Now122 </div>123 </div>124 125 <!-- Overlay panel -->126 <div class="panel">127 128 <div class="search-row">129 <div class="bar-icon">130 <svg viewBox="0 0 24 24"><path d="M3 10h14v2H3v-2zm0-5h18v2H3V5zm0 10h10v2H3v-2z"/></svg>131 </div>132 Upper East Side, New York, NY, USA133 </div>134 135 <div class="search-row">136 <div class="bar-icon">137 <svg viewBox="0 0 24 24"><path d="M3 10h14v2H3v-2zm0-5h18v2H3V5zm0 10h10v2H3v-2z"/></svg>138 </div>139 Jamaica, Queens, NY, USA140 </div>141 142 <div class="section">143 <div class="train-ico">144 <svg viewBox="0 0 24 24"><path d="M7 2h10a4 4 0 0 1 4 4v8a5 5 0 0 1-5 5l2 2h-2l-2-2H10l-2 2H6l2-2a5 5 0 0 1-5-5V6a4 4 0 0 1 4-4zm0 4v6h10V6H7zm2 10h6a3 3 0 0 0 3-3H6a3 3 0 0 0 3 3z"/></svg>145 </div>146 Train+ · More train and rail options147 </div>148 149 <!-- Results list -->150 <div class="results">151 152 <div class="card">153 <div class="left">154 <div class="badge b-green">6</div>155 <div class="badge b-green">6</div>156 <span class="dot"></span>157 <div class="badge b-blue">E</div>158 <div class="muted">Next 7:48 PM, 7:48 PM from 77 St</div>159 </div>160 <div class="right">161 <span class="price">$2.90</span>162 <span class="time">57 min</span>163 </div>164 </div>165 166 <div class="card">167 <div class="left">168 <div class="badge b-green">6</div>169 <div class="badge b-green">6</div>170 <span class="dot"></span>171 <div class="badge b-orange">F</div>172 <div class="muted">Next 7:48 PM, 7:48 PM from 77 St</div>173 </div>174 <div class="right">175 <span class="price">$2.90</span>176 <span class="time">64 min</span>177 </div>178 </div>179 180 <div class="card">181 <div class="left">182 <div style="display:flex; gap:10px;">183 <div class="badge b-green">6</div>184 <div class="badge b-green">6</div>185 <div class="badge b-green">6</div>186 </div>187 <span class="dot"></span>188 <div class="badge b-yellow" style="color:#000;">R</div>189 <div class="badge b-blue">E</div>190 <div class="muted">Next 7:48 PM, 7:48 PM from 77 St</div>191 </div>192 <div class="right">193 <span class="price">$2.90</span>194 <span class="time">66 min</span>195 </div>196 </div>197 198 <div class="card">199 <div class="left">200 <div class="badge b-green">6</div>201 <div class="badge b-green">6</div>202 <span class="dot"></span>203 <div class="badge b-blue">E</div>204 <div class="muted">Next 7:48 PM, 7:48 PM from 77 St</div>205 </div>206 <div class="right">207 <span class="price">$2.90</span>208 <span class="time">63 min</span>209 </div>210 </div>211 212 <div class="card">213 <div class="left">214 <div class="badge b-green">6</div>215 <div class="badge b-green">6</div>216 <span class="dot"></span>217 <div class="badge b-orange">F</div>218 <div class="muted">Next 7:48 PM, 7:48 PM from 77 St</div>219 </div>220 <div class="right">221 <span class="price">$2.90</span>222 <span class="time">73 min</span>223 </div>224 </div>225 226 <div class="card">227 <div class="left">228 <div class="badge b-yellow">Q</div>229 <span class="dot"></span>230 <div class="badge b-blue">E</div>231 <div class="muted">Next 7:53 PM, 8:01 PM from 86 St</div>232 </div>233 <div class="right">234 <span class="price">$5.80</span>235 <span class="time">70 min</span>236 </div>237 </div>238 239 <div class="card">240 <div class="left">241 <div class="badge b-green">6</div>242 <div class="badge b-green">6</div>243 <span class="dot"></span>244 <div style="display:flex; gap:6px; align-items:center;">245 <div class="badge b-yellow" style="width:52px; height:52px; font-size:22px; border-radius:12px; color:#000;">BAB</div>246 <div class="badge b-orange" style="width:52px; height:52px; font-size:22px; border-radius:12px;">ROCK</div>247 <div class="badge b-blue" style="width:52px; height:52px; font-size:22px; border-radius:12px;">HEMP</div>248 <div class="badge b-yellow" style="width:52px; height:52px; font-size:22px; border-radius:12px; color:#000;">PJ</div>249 <div class="badge b-blue" style="width:52px; height:52px; font-size:22px; border-radius:12px;">RON</div>250 </div>251 <div class="muted">LIRR options</div>252 </div>253 <div class="right">254 <span class="price">$11.15</span>255 <span class="time">61 min</span>256 </div>257 </div>258 259 </div>260 261 </div>262 263 <!-- Bottom mode selector -->264 <div class="mode-bar">265 <div class="mode">266 <div class="circle">267 <svg viewBox="0 0 24 24"><path d="M10 2l6 6-6 6-6-6 6-6zm8 14H6v2h12v-2z"/></svg>268 </div>269 Classic270 </div>271 <div class="mode">272 <div class="circle">273 <svg viewBox="0 0 24 24"><path d="M4 4h16v6H4V4zm2 2v2h12V6H6zM4 12h16v8H4v-8zm2 2v4h12v-4H6z"/></svg>274 </div>275 Step-free276 </div>277 <div class="mode">278 <div class="circle">279 <svg viewBox="0 0 24 24"><path d="M4 16h16v2H4v-2zm1-9h14l1 6H4l1-6zm3-3h8v2H8V4zm1 13l-2 3h2l2-3h-2zm8 0l2 3h-2l-2-3h2z"/></svg>280 </div>281 Bus+282 </div>283 <div class="mode active">284 <div class="circle">285 <svg viewBox="0 0 24 24"><path d="M7 2h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4l2 2h-2l-2-2H9l-2 2H5l2-2a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4zm0 4v7h10V6H7z"/></svg>286 </div>287 Train+288 </div>289 <div class="mode">290 <div class="circle">291 <svg viewBox="0 0 24 24"><path d="M6 20a2 2 0 1 1 0-4h12a2 2 0 1 1 0 4H6zm4-7l-2 2-2-2 4-7h2l4 7-2 2-2-2H10z"/></svg>292 </div>293 Walk Less294 </div>295 </div>296 297</div>298</body>299</html>