GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Transit UI Mock</title>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:#e9ecef;11 border-radius:0;12 }13 14 /* Map area */15 .map {16 position:absolute; left:0; top:0; width:1080px; height:1180px;17 background:#E0E0E0;18 border-bottom:1px solid #BDBDBD;19 display:flex; align-items:center; justify-content:center;20 color:#757575; font-weight:600; letter-spacing:0.5px;21 }22 23 /* Status bar */24 .status-bar {25 position:absolute; top:22px; left:24px; right:24px; height:64px;26 display:flex; align-items:center; justify-content:space-between;27 color:#222; font-size:36px;28 }29 .status-right { display:flex; align-items:center; gap:22px; font-size:34px; color:#333; }30 31 /* Floating gear button */32 .fab {33 position:absolute; left:48px; top:210px; width:140px; height:140px;34 background:#fff; border-radius:50%;35 box-shadow:0 10px 20px rgba(0,0,0,0.15);36 display:flex; align-items:center; justify-content:center;37 }38 .fab svg { width:62px; height:62px; fill:#4a4a4a; }39 40 /* Green panel */41 .green-panel {42 position:absolute; left:0; top:1100px; width:1080px; height:1100px;43 background:linear-gradient(#3aa64a, #2f8f45);44 }45 46 /* Search card */47 .search-card {48 position:absolute; left:30px; top:945px; width:1020px; height:430px;49 background:#fff; border-radius:28px; box-shadow:0 10px 30px rgba(0,0,0,0.18);50 }51 .search-top {52 display:flex; align-items:center; justify-content:space-between;53 padding:38px 32px 18px 32px;54 }55 .search-title {56 display:flex; align-items:center; gap:22px;57 font-size:56px; font-weight:800; color:#2e2e2e;58 }59 .circle-icon {60 width:84px; height:84px; border-radius:50%; background:#e8f0ff;61 display:flex; align-items:center; justify-content:center;62 }63 .circle-icon svg { width:44px; height:44px; stroke:#2d5fff; stroke-width:4; fill:none; }64 .kebab svg { width:36px; height:36px; fill:#777; }65 66 .tabs {67 display:flex; align-items:center; gap:24px;68 padding:10px 24px 26px;69 }70 .tab {71 background:#f3f5f7; color:#333; padding:26px 30px; border-radius:22px;72 font-size:42px; font-weight:700; display:flex; align-items:center; gap:18px;73 }74 .tab svg { width:44px; height:44px; fill:#4f5b66; }75 76 /* Quick grid of actions */77 .grid {78 position:absolute; left:30px; top:1400px; width:1020px;79 display:flex; flex-wrap:wrap; gap:36px;80 }81 .cat-btn {82 width:318px; height:188px; background:#2e7d32; border-radius:28px;83 box-shadow: inset 0 2px 0 rgba(255,255,255,0.12);84 color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center;85 position:relative;86 }87 .cat-btn .mini-icon {88 position:absolute; top:26px; left:26px; width:74px; height:74px; border-radius:18px;89 background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center;90 }91 .cat-btn .mini-icon svg { width:44px; height:44px; fill:#fff; }92 .cat-title { margin-top:18px; font-size:40px; font-weight:700; letter-spacing:0.2px; }93 .badge {94 position:absolute; top:14px; right:16px; width:66px; height:66px; border-radius:50%;95 background:#FFA726; color:#fff; font-weight:800; font-size:34px;96 display:flex; align-items:center; justify-content:center; box-shadow:0 2px 0 rgba(0,0,0,0.12);97 }98 99 /* Trip stats */100 .section-title {101 position:absolute; left:36px; top:1800px; color:#fff; font-size:52px; font-weight:800;102 }103 .co2-card {104 position:absolute; left:30px; top:1860px; width:1020px; height:200px;105 background:#1f6f2b; border-radius:28px; color:#eaffea;106 display:flex; align-items:center; justify-content:flex-start; gap:24px;107 padding:0 28px;108 box-shadow:0 6px 18px rgba(0,0,0,0.15);109 }110 .co2-icon {111 width:92px; height:92px; border-radius:50%; background:#2aa54a;112 display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900;113 font-size:44px;114 }115 .co2-text { font-size:48px; font-weight:800; }116 .go-pill {117 margin-left:auto; margin-right:18px;118 background:#e6ffe6; color:#0a7a2a; font-weight:900; font-size:42px;119 padding:10px 26px; border-radius:28px;120 }121 .arrow { margin-left:6px; font-size:56px; }122 123 /* Orange banner */124 .orange-banner {125 position:absolute; left:0; bottom:0; width:1080px; height:220px; background:#F5A343;126 display:flex; align-items:center; padding:0 34px; color:#2b1b05;127 box-shadow:0 -2px 8px rgba(0,0,0,0.1);128 }129 .helper {130 width:116px; height:116px; background:#ffd9a8; border-radius:30px; border:3px solid #e6a15c;131 display:flex; align-items:center; justify-content:center; font-size:58px; font-weight:800; color:#2b1b05;132 margin-right:22px;133 }134 .banner-text { font-size:48px; font-weight:800; }135 .chev { margin-left:auto; font-size:64px; font-weight:900; }136 137 /* Home indicator */138 .home-indicator {139 position:absolute; left:50%; transform:translateX(-50%);140 bottom:18px; width:360px; height:12px; background:#1f1f1f; border-radius:8px; opacity:0.8;141 pointer-events:none;142 }143 144 /* Simple icon helpers */145 .icon { display:inline-block; }146</style>147</head>148<body>149<div id="render-target">150 151 <!-- Map placeholder -->152 <div class="map">[IMG: Google Map with transit icons]</div>153 154 <!-- Status bar -->155 <div class="status-bar">156 <div>7:39</div>157 <div class="status-right">158 <span>28°</span>159 <span>🔔</span>160 <span>📶</span>161 <span>🔋</span>162 </div>163 </div>164 165 <!-- Floating gear -->166 <div class="fab">167 <svg viewBox="0 0 24 24">168 <path d="M12 8.8a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4zm10 3.2-2.1-.6a8 8 0 0 0-.7-1.6l1.3-1.8-2.2-2.2-1.8 1.3c-.5-.3-1-.6-1.6-.8L13.9 2h-3.8L9.5 5.3c-.6.2-1.1.5-1.6.8L6 4.8 3.8 7l1.3 1.8c-.3.5-.5 1-.7 1.6L2 12l2.4.6c.1.6.4 1.1.7 1.6L3.8 16l2.2 2.2 1.8-1.3c.5.3 1 .6 1.6.7L10.1 22h3.8l.5-2.4c.6-.1 1.1-.4 1.6-.7l1.8 1.3 2.2-2.2-1.3-1.8c.3-.5.5-1 .7-1.6L22 12z"/>169 </svg>170 </div>171 172 <!-- White search card -->173 <div class="search-card">174 <div class="search-top">175 <div class="search-title">176 <div class="circle-icon">177 <svg viewBox="0 0 24 24">178 <circle cx="10" cy="10" r="6"></circle>179 <line x1="14.5" y1="14.5" x2="21" y2="21"></line>180 </svg>181 </div>182 <div>Get Me Somewhere</div>183 </div>184 <div class="kebab">185 <svg viewBox="0 0 24 24">186 <circle cx="12" cy="5" r="2.2"></circle>187 <circle cx="12" cy="12" r="2.2"></circle>188 <circle cx="12" cy="19" r="2.2"></circle>189 </svg>190 </div>191 </div>192 193 <div class="tabs">194 <div class="tab">195 <svg viewBox="0 0 24 24"><path d="M12 3 3 10h2v10h6V14h2v6h6V10h2z"/></svg>196 <span>Get Me Home</span>197 </div>198 <div class="tab">199 <svg viewBox="0 0 24 24"><path d="M4 7h16v4H4V7zm2 6h12v6H6v-6zm3-9h6v2H9V4z"/></svg>200 <span>Work</span>201 </div>202 <div class="tab">203 <svg viewBox="0 0 24 24"><path d="M12 17.3 6.2 21l1.6-6.9L2 8.6l7-.6L12 1l3 7 7 .6-5.8 5.5L17.8 21z"/></svg>204 <span>Places</span>205 </div>206 </div>207 </div>208 209 <!-- Green panel content -->210 <div class="green-panel"></div>211 212 <!-- Grid of quick actions -->213 <div class="grid">214 <div class="cat-btn">215 <div class="mini-icon">216 <svg viewBox="0 0 24 24"><path d="M3 15h18v4H3v-4zm1-4h16l-2-4H6l-2 4z"/></svg>217 </div>218 <div class="cat-title">All</div>219 </div>220 221 <div class="cat-btn">222 <div class="mini-icon">223 <svg viewBox="0 0 24 24"><path d="M7 20v-5H5l3-6h2l3 6h-2v5H7zm8-9a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>224 </div>225 <div class="cat-title">Walk</div>226 </div>227 228 <div class="cat-btn">229 <div class="mini-icon">230 <svg viewBox="0 0 24 24"><path d="M5 17a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm14 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM9 9h3l2 3h-3l-2 5H7l2-5H7l2-3z"/></svg>231 </div>232 <div class="cat-title">Citi Bike</div>233 </div>234 235 <div class="cat-btn">236 <div class="mini-icon">237 <svg viewBox="0 0 24 24"><path d="M3 11h8V3H3v8zm10 10h8v-8h-8v8zM3 21h8v-8H3v8zm10-10h8V3h-8v8z"/></svg>238 </div>239 <div class="cat-title">Maps</div>240 </div>241 242 <div class="cat-btn" style="position:relative;">243 <div class="mini-icon">244 <svg viewBox="0 0 24 24"><path d="M12 2 1 21h22L12 2zm0 6 6 11H6l6-11zm-1 3h2v4h-2v-4zm0 6h2v2h-2v-2z"/></svg>245 </div>246 <div class="badge">11</div>247 <div class="cat-title">Issues</div>248 </div>249 250 <div class="cat-btn">251 <div class="mini-icon">252 <svg viewBox="0 0 24 24"><path d="M6 6h12v2H6V6zm-2 6h16v6H4v-6zm3 1h3v3H7v-3zm7 0h3v3h-3v-3z"/></svg>253 </div>254 <div class="cat-title">Subway</div>255 </div>256 257 <div class="cat-btn">258 <div class="mini-icon">259 <svg viewBox="0 0 24 24"><path d="M4 5h16v10H4V5zm2 12h3v2H6v-2zm9 0h3v2h-3v-2z"/></svg>260 </div>261 <div class="cat-title">Bus</div>262 </div>263 264 <div class="cat-btn">265 <div class="mini-icon">266 <svg viewBox="0 0 24 24"><path d="M3 4h18v12H3V4zm3 13h3v3H6v-3zm9 0h3v3h-3v-3z"/></svg>267 </div>268 <div class="cat-title">Rail</div>269 </div>270 271 <div class="cat-btn">272 <div class="mini-icon">273 <svg viewBox="0 0 24 24"><path d="M7 17a2 2 0 1 1 0-4c1.1 0 2 .9 2 2s-.9 2-2 2zm10 0a2 2 0 1 1 0-4c1.1 0 2 .9 2 2s-.9 2-2 2zM8 9h5l2 2h2v2h-4l-2-2H8V9z"/></svg>274 </div>275 <div class="cat-title">Moped</div>276 </div>277 278 <div class="cat-btn">279 <div class="mini-icon">280 <svg viewBox="0 0 24 24"><path d="M9 16 4 12l5-4v8zm6-8 5 4-5 4V8z"/></svg>281 </div>282 <div class="cat-title">More</div>283 </div>284 </div>285 286 <div class="section-title">Trip Stats</div>287 288 <div class="co2-card">289 <div class="co2-icon">♻</div>290 <div class="co2-text">Track CO2 savings with</div>291 <div class="go-pill">GO</div>292 <div class="arrow">›</div>293 </div>294 295 <!-- Orange permission banner -->296 <div class="orange-banner">297 <div class="helper">?</div>298 <div class="banner-text">Allow location for a better experience</div>299 <div class="chev">›</div>300 </div>301 302 <div class="home-indicator"></div>303</div>304</body>305</html>