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 App Mock</title>6<style>7 :root{8 --bg:#101317;9 --card:#1a1f24;10 --card-deep:#11161b;11 --text:#e8edf3;12 --muted:#a5afb9;13 --accent:#ff4f86;14 --accent2:#27d28a;15 --chip:#262c33;16 }17 body{ margin:0; padding:0; background:transparent; font-family: "Inter", Arial, sans-serif; }18 #render-target{19 width:1080px; height:2400px;20 position:relative; overflow:hidden;21 background:var(--bg); color:var(--text);22 }23 24 /* Status bar */25 .status-bar{26 height:110px; padding:0 36px;27 display:flex; align-items:center; justify-content:space-between;28 font-weight:600; font-size:42px; color:#fff;29 }30 .sb-right{ display:flex; align-items:center; gap:28px; }31 .sb-icon{ width:40px; height:40px; }32 .battery{ display:flex; align-items:center; gap:10px; color:#fff; font-size:32px; }33 /* Hero */34 .hero{35 height:520px;36 background: linear-gradient(90deg,#b6e38f 0%, #9fe1a5 40%, #a7e4b1 70%, #9fe3b1 100%);37 position:relative;38 }39 .hamburger{40 position:absolute; left:36px; top:40px; width:68px; height:48px; display:flex; flex-direction:column; justify-content:space-between;41 }42 .hamburger span{ height:6px; background:#fff; border-radius:6px; }43 .region-label{44 position:absolute; right:36px; top:40px; color:#fff; font-size:38px; opacity:0.95;45 }46 .hero-title{47 position:absolute; left:36px; bottom:240px; font-size:64px; font-weight:700; color:#ffffff;48 }49 .search-row{50 position:absolute; left:36px; right:36px; bottom:110px;51 display:flex; gap:24px;52 }53 .search-input{54 flex:1; height:120px; background:#dfe6e3; border-radius:18px; display:flex; align-items:center; padding:0 32px; color:#2b3035; font-size:48px; box-shadow:inset 0 2px 0 rgba(255,255,255,0.3);55 }56 .search-btn{57 width:160px; height:120px; border-radius:18px; background:var(--accent); display:flex; align-items:center; justify-content:center;58 }59 /* Image placeholder on hero */60 .hero-img{61 position:absolute; right:120px; bottom:20px; width:360px; height:300px;62 background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;63 display:flex; align-items:center; justify-content:center; text-align:center; border-radius:12px;64 }65 66 /* Cards */67 .content{ padding:30px 36px 0; }68 .card{69 background:var(--card); border-radius:22px; padding:30px; box-shadow:0 8px 16px rgba(0,0,0,0.35);70 }71 .route-card{ margin-top:24px; }72 .rc-header{73 display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;74 }75 .rc-title{ font-size:40px; font-weight:700; }76 .rc-actions{ display:flex; align-items:center; gap:16px; }77 .pill-icon{ width:92px; height:60px; border-radius:30px; background:#292f36; display:flex; align-items:center; justify-content:center; }78 .route-main .to{ font-size:52px; font-weight:800; margin-bottom:14px; }79 .route-main .sub{ font-size:36px; color:var(--muted); margin-bottom:22px; }80 .chips{ display:flex; align-items:center; gap:16px; margin-bottom:26px; flex-wrap:wrap; }81 .chip{82 background:var(--chip); color:#e5ebf2; border-radius:16px; padding:16px 26px; font-size:34px; display:inline-flex; align-items:center; gap:14px;83 }84 .chip .mini{ display:inline-flex; align-items:center; gap:10px; }85 .rc-footer{ font-size:34px; color:var(--muted); }86 87 .info-dot{88 position:absolute; transform:translate(32px,-22px);89 width:38px; height:38px; border-radius:50%; background:#f1c40f; color:#000; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:700;90 }91 92 .carousel{ display:flex; align-items:center; gap:24px; justify-content:center; margin:22px 0 36px; }93 .dot{ width:26px; height:26px; border-radius:50%; background:#2d333a; }94 .dot.active{ background:var(--accent); }95 .refresh{ width:72px; height:72px; border-radius:36px; background:#242a31; display:flex; align-items:center; justify-content:center; }96 97 .promo{98 display:flex; align-items:center; justify-content:space-between;99 background:var(--card-deep); padding:30px; border-radius:20px; margin-bottom:30px;100 }101 .promo-left{ display:flex; align-items:center; gap:24px; }102 .promo-title{ font-size:44px; font-weight:800; }103 .promo-sub{ font-size:36px; color:var(--muted); }104 .btn-buy{ background:var(--accent); color:#fff; padding:28px 34px; border-radius:18px; font-size:36px; font-weight:700; }105 106 .section-header{ display:flex; align-items:center; justify-content:space-between; padding:24px 6px; font-size:42px; font-weight:800; }107 .section-header .action{ color:#ff6f9e; font-size:38px; }108 109 .rides-card{110 position:relative; background:var(--card); border-radius:22px; padding:36px; overflow:hidden;111 }112 .rides-img{113 width:100%; height:420px; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575; display:flex; align-items:center; justify-content:center; border-radius:14px;114 }115 .rides-title{ font-size:64px; font-weight:900; margin-top:26px; }116 .rides-desc{ font-size:38px; color:var(--muted); margin-top:12px; }117 .close-x{118 position:absolute; right:26px; top:26px; width:80px; height:80px; border-radius:18px; background:#273038; color:#b9c2cc; display:flex; align-items:center; justify-content:center; font-size:44px; font-weight:800;119 }120 121 /* Bottom nav */122 .bottom-nav{123 position:absolute; left:0; right:0; bottom:0; height:190px; background:#0e1317; border-top:1px solid #1f262d;124 display:flex; align-items:center; justify-content:space-around;125 }126 .nav-item{ display:flex; flex-direction:column; align-items:center; gap:16px; color:#b8c0c8; font-size:38px; }127 .nav-item.active{ color:var(--accent); }128 .nav-underline{ width:160px; height:8px; background:var(--accent); border-radius:8px; margin-top:-10px; }129 .home-indicator{130 position:absolute; bottom:20px; left:50%; transform:translateX(-50%);131 width:300px; height:10px; background:#70767c; border-radius:8px; opacity:0.4;132 }133 134 /* Simple SVG helpers */135 .svg{ width:40px; height:40px; }136 .chip svg{ width:44px; height:44px; }137</style>138</head>139<body>140<div id="render-target">141 142 <!-- Status Bar -->143 <div class="status-bar">144 <div>8:25</div>145 <div class="sb-right">146 <!-- cellular -->147 <svg class="sb-icon" viewBox="0 0 24 24">148 <rect x="2" y="16" width="3" height="6" fill="#fff"/>149 <rect x="7" y="12" width="3" height="10" fill="#fff" opacity="0.85"/>150 <rect x="12" y="8" width="3" height="14" fill="#fff" opacity="0.7"/>151 <rect x="17" y="4" width="3" height="18" fill="#fff" opacity="0.55"/>152 </svg>153 <!-- wifi -->154 <svg class="sb-icon" viewBox="0 0 24 24">155 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none"/>156 <path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" fill="none"/>157 <path d="M9 16c2-2 4-2 6 0" stroke="#fff" stroke-width="2" fill="none"/>158 <circle cx="12" cy="19" r="2" fill="#fff"/>159 </svg>160 <!-- battery -->161 <div class="battery">162 <svg class="sb-icon" viewBox="0 0 30 20">163 <rect x="1" y="3" width="24" height="14" rx="3" fill="none" stroke="#fff" stroke-width="2"/>164 <rect x="26" y="7" width="3" height="6" rx="1" fill="#fff"/>165 <rect x="3" y="5" width="18" height="10" rx="2" fill="#fff"/>166 </svg>167 <span>93%</span>168 </div>169 </div>170 </div>171 172 <!-- Hero -->173 <div class="hero">174 <div class="hamburger">175 <span></span><span></span><span></span>176 </div>177 <div class="region-label">Netherlands</div>178 <div class="hero-title">Where do you want to go?</div>179 180 <div class="search-row">181 <div class="search-input">E</div>182 <div class="search-btn">183 <svg class="svg" viewBox="0 0 24 24">184 <circle cx="10" cy="10" r="7" stroke="#fff" stroke-width="2" fill="none"/>185 <line x1="15" y1="15" x2="22" y2="22" stroke="#fff" stroke-width="2"/>186 </svg>187 </div>188 </div>189 <div class="hero-img">[IMG: Scooter + person illustration]</div>190 </div>191 192 <div class="content">193 194 <!-- My Latest Route Card -->195 <div class="card route-card">196 <div class="rc-header">197 <div class="rc-title">My Latest Route</div>198 <div class="rc-actions">199 <div class="pill-icon" title="alerts">200 <svg viewBox="0 0 24 24" width="38" height="38">201 <path d="M12 2l9 9h-6v9h-6v-9H3z" fill="#ff4f86" opacity="0.9"/>202 </svg>203 </div>204 <div class="pill-icon" title="bus mode">205 <svg viewBox="0 0 24 24" width="38" height="38">206 <rect x="3" y="5" width="18" height="12" rx="2" fill="#ff4f86"/>207 <circle cx="7" cy="18" r="2" fill="#fff"/>208 <circle cx="17" cy="18" r="2" fill="#fff"/>209 </svg>210 </div>211 </div>212 </div>213 214 <div class="route-main">215 <div class="to">To: Amsterdam Centraal</div>216 <div class="sub">4 hr 32 min • Planned arrival: 9:55 AM</div>217 218 <div class="chips">219 <div class="chip">220 <svg viewBox="0 0 24 24">221 <path d="M8 19l-2-6 2-2 2 2h4l2 6" stroke="#e8edf3" stroke-width="2" fill="none"/>222 </svg>223 15224 </div>225 226 <div class="chip">227 <svg viewBox="0 0 24 24">228 <rect x="3" y="6" width="18" height="10" rx="2" fill="#e8edf3"/>229 <circle cx="7" cy="18" r="2" fill="#e8edf3"/>230 <circle cx="17" cy="18" r="2" fill="#e8edf3"/>231 </svg>232 304233 </div>234 235 <div class="chip" style="position:relative;">236 <svg viewBox="0 0 24 24">237 <rect x="3" y="6" width="18" height="10" rx="2" fill="#e8edf3"/>238 <circle cx="7" cy="18" r="2" fill="#e8edf3"/>239 <circle cx="17" cy="18" r="2" fill="#e8edf3"/>240 </svg>241 <span>114 / 14</span>242 <div class="info-dot">i</div>243 </div>244 245 <div class="chip">246 <svg viewBox="0 0 24 24">247 <path d="M8 19l-2-6 2-2 2 2h4l2 6" stroke="#e8edf3" stroke-width="2" fill="none"/>248 </svg>249 </div>250 251 <div class="chip">252 <span class="mini">253 <svg viewBox="0 0 24 24">254 <path d="M5 12h12M13 6l6 6-6 6" stroke="#e8edf3" stroke-width="2" fill="none"/>255 </svg>256 </span>257 </div>258 </div>259 260 <div class="rc-footer">Leaves at 5:39 AM from Groningen, Hoofdstation</div>261 </div>262 </div>263 264 <!-- Carousel & Refresh -->265 <div class="carousel">266 <div class="dot"></div>267 <div class="dot active"></div>268 <div class="refresh">269 <svg viewBox="0 0 24 24" width="40" height="40">270 <path d="M12 5v3l4-4-4-4v3a7 7 0 0 0-7 7c0 3.9 3.1 7 7 7 2.5 0 4.7-1.3 6-3.3" stroke="#fff" stroke-width="2" fill="none"/>271 </svg>272 </div>273 </div>274 275 <!-- Promo -->276 <div class="promo">277 <div class="promo-left">278 <div class="pill-icon" style="background:#2c333a;">279 <svg viewBox="0 0 24 24" width="40" height="40">280 <path d="M3 11l18-8v18L3 13z" fill="#ff4f86"/>281 </svg>282 </div>283 <div>284 <div class="promo-title">New: travel packages</div>285 <div class="promo-sub">Unlimited travel in the region</div>286 </div>287 </div>288 <div class="btn-buy">Buy now</div>289 </div>290 291 <!-- My Rides -->292 <div class="section-header">293 <div>My Rides</div>294 <div class="action">Show all</div>295 </div>296 297 <div class="rides-card">298 <div class="rides-img">[IMG: Scenic transit illustration with QR code]</div>299 <div class="rides-title">Plan, Pay, Ride</div>300 <div class="rides-desc">New! Easily pay for public transit rides in the app</div>301 <div class="close-x">×</div>302 </div>303 304 </div>305 306 <!-- Bottom Navigation -->307 <div class="bottom-nav">308 <div class="nav-item active">309 <div style="display:flex;align-items:center;gap:10px;">310 <svg viewBox="0 0 24 24" width="44" height="44">311 <circle cx="6" cy="12" r="3" fill="#ff4f86"/>312 <circle cx="18" cy="12" r="3" fill="#ff4f86"/>313 <path d="M9 12h6" stroke="#ff4f86" stroke-width="2"/>314 </svg>315 <span>Directions</span>316 </div>317 <div class="nav-underline"></div>318 </div>319 320 <div class="nav-item">321 <svg viewBox="0 0 24 24" width="44" height="44">322 <path d="M12 2c4.4 0 8 3.1 8 7 0 5.3-8 13-8 13S4 14.3 4 9c0-3.9 3.6-7 8-7z" fill="#9aa3ac"/>323 <circle cx="12" cy="9" r="3" fill="#0e1317"/>324 </svg>325 <span>Stops</span>326 </div>327 </div>328 329 <div class="home-indicator"></div>330 331</div>332</body>333</html>