GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #0f1d4b; /* deep navy backdrop seen at top and bottom */13 }14 15 /* Top status bar */16 .status-bar {17 height: 120px;18 background: #0f1d4b;19 color: #fff;20 display: flex;21 align-items: center;22 padding: 0 40px;23 font-size: 42px;24 justify-content: space-between;25 }26 .status-left { display: flex; align-items: center; gap: 24px; }27 .status-right { display: flex; align-items: center; gap: 32px; }28 .status-icon { width: 42px; height: 42px; }29 30 /* App bar with back */31 .app-bar {32 height: 110px;33 background: #0f1d4b;34 display: flex;35 align-items: center;36 padding: 0 40px;37 }38 .back-btn {39 width: 72px;40 height: 72px;41 display: inline-flex;42 align-items: center;43 justify-content: center;44 }45 .back-btn svg { width: 60px; height: 60px; fill: none; stroke: #cdd3ea; stroke-width: 8; }46 47 /* Tab bar */48 .tab-bar {49 background: #ffffff;50 height: 220px;51 display: flex;52 align-items: center;53 justify-content: center;54 gap: 180px;55 }56 .tab {57 color: #2f3a6b;58 display: flex;59 flex-direction: column;60 align-items: center;61 gap: 22px;62 }63 .tab svg { width: 86px; height: 86px; fill: #2f3a6b; }64 .tab-indicator {65 position: absolute;66 left: 120px;67 top: 350px; /* just below tab icons */68 width: 300px;69 height: 10px;70 background: #ff6b6b;71 border-radius: 6px;72 }73 74 /* Content area */75 .content {76 background: #f5f6f8;77 padding-bottom: 180px;78 }79 80 /* Filter chips row */81 .chips {82 height: 170px;83 display: flex;84 align-items: center;85 gap: 40px;86 padding: 0 40px;87 }88 .chip {89 width: 240px;90 height: 92px;91 background: #ECEEF2;92 border-radius: 60px;93 }94 95 /* Cards */96 .card {97 background: #ffffff;98 margin: 30px 30px;99 border-radius: 28px;100 box-shadow: 0 6px 16px rgba(0,0,0,0.08);101 padding: 36px 34px;102 }103 .skeleton {104 background: #D7DBE6;105 border-radius: 18px;106 }107 .row { display: flex; align-items: center; justify-content: space-between; gap: 30px; }108 .line-sm { height: 52px; width: 260px; }109 .line-md { height: 60px; width: 460px; margin-top: 26px; }110 .line-lg { height: 74px; width: 480px; margin-top: 32px; }111 .box-md { height: 120px; width: 360px; margin-top: 32px; }112 113 /* Bottom nav */114 .bottom-bar {115 position: absolute;116 bottom: 0;117 left: 0;118 width: 1080px;119 height: 140px;120 background: #0f1d4b;121 display: flex;122 align-items: center;123 justify-content: center;124 }125 .home-indicator {126 width: 420px;127 height: 12px;128 border-radius: 12px;129 background: #E6EAF8;130 opacity: 0.95;131 }132</style>133</head>134<body>135<div id="render-target">136 137 <!-- Status bar -->138 <div class="status-bar">139 <div class="status-left">140 <div style="font-weight:600;">10:00</div>141 <!-- small placeholders like the ghost icons -->142 <div class="status-icon" style="background:#ffffff22; border-radius:50%;"></div>143 <div class="status-icon" style="background:#ffffff22; border-radius:50%;"></div>144 <div class="status-icon" style="background:#ffffff22; border-radius:50%;"></div>145 <div class="status-icon" style="background:#ffffff22; border-radius:50%;"></div>146 <div class="status-icon" style="background:#ffffff22; border-radius:50%;"></div>147 <div style="width:10px;height:10px;border-radius:50%;background:#ffffff66;"></div>148 </div>149 <div class="status-right">150 <!-- WiFi -->151 <svg class="status-icon" viewBox="0 0 24 24">152 <path fill="#fff" d="M12 20.5c.9 0 1.7-.7 1.7-1.7s-.8-1.7-1.7-1.7-1.7.8-1.7 1.7.8 1.7 1.7 1.7zm5.2-5.8c-3.5-3.1-6.9-3.1-10.4 0l1.6 1.6c2.6-2.3 4.6-2.3 7.2 0l1.6-1.6zm3.5-3.6c-5.6-5-11.3-5-16.9 0l1.6 1.6c4.8-4.3 9-4.3 13.7 0l1.6-1.6z"/>153 </svg>154 <!-- Battery -->155 <svg class="status-icon" viewBox="0 0 28 18">156 <rect x="1" y="3" width="22" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>157 <rect x="3" y="5" width="18" height="8" rx="1" fill="#fff"></rect>158 <rect x="24" y="6" width="3" height="6" rx="1" fill="#fff"></rect>159 </svg>160 <!-- Power icon -->161 <svg class="status-icon" viewBox="0 0 24 24">162 <path fill="#fff" d="M12 2h2v10h-2zM6.5 5.6A8 8 0 1017.5 5.6l-1.4 1.4A6 6 0 1111 7V2H9v5a6 6 0 00-3.1 1.6l-1.4-1.4z"/>163 </svg>164 </div>165 </div>166 167 <!-- App bar with back arrow -->168 <div class="app-bar">169 <div class="back-btn">170 <svg viewBox="0 0 24 24">171 <path d="M15 19l-7-7 7-7" />172 </svg>173 </div>174 </div>175 176 <!-- Tab bar with icons -->177 <div class="tab-bar">178 <div class="tab">179 <!-- Train -->180 <svg viewBox="0 0 24 24">181 <path d="M7 3h10c1.7 0 3 1.3 3 3v7c0 1.7-1.3 3-3 3H7c-1.7 0-3-1.3-3-3V6c0-1.7 1.3-3 3-3zm2 4h6v3H9V7zm-2 8l-2 3h2l2-3h6l2 3h2l-2-3H7z"/>182 </svg>183 </div>184 <div class="tab">185 <!-- Bus -->186 <svg viewBox="0 0 24 24">187 <path d="M5 3h14c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2h-1v2h-2v-2H8v2H6v-2H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2zm2 3v5h10V6H7zm1 10a2 2 0 104 0H8zm8 0a2 2 0 104 0h-4z"/>188 </svg>189 </div>190 <div class="tab">191 <!-- Plane -->192 <svg viewBox="0 0 24 24">193 <path d="M2 12l8-2 5-7 1 1-4 8 8 3-1 1-8-2-4 5-1-1 3-6-7-3z"/>194 </svg>195 </div>196 </div>197 <div class="tab-indicator"></div>198 199 <!-- Main content area -->200 <div class="content">201 <!-- chips -->202 <div class="chips">203 <div class="chip"></div>204 <div class="chip"></div>205 <div class="chip"></div>206 <div class="chip"></div>207 </div>208 209 <!-- Card 1 -->210 <div class="card">211 <div class="row">212 <div class="skeleton line-sm"></div>213 <div class="skeleton line-sm" style="width:220px;"></div>214 </div>215 <div class="row">216 <div class="skeleton line-md"></div>217 <div class="skeleton line-md"></div>218 </div>219 <div class="row" style="align-items:flex-end;">220 <div class="skeleton line-lg"></div>221 <div class="skeleton box-md"></div>222 </div>223 </div>224 225 <!-- Card 2 -->226 <div class="card">227 <div class="row">228 <div class="skeleton line-sm"></div>229 <div class="skeleton line-sm" style="width:220px;"></div>230 </div>231 <div class="row">232 <div class="skeleton line-md"></div>233 <div class="skeleton line-md"></div>234 </div>235 <div class="row" style="align-items:flex-end;">236 <div class="skeleton line-lg"></div>237 <div class="skeleton box-md"></div>238 </div>239 </div>240 241 <!-- Card 3 -->242 <div class="card">243 <div class="row">244 <div class="skeleton line-sm"></div>245 <div class="skeleton line-sm" style="width:220px;"></div>246 </div>247 <div class="row">248 <div class="skeleton line-md"></div>249 <div class="skeleton line-md"></div>250 </div>251 <div class="row" style="align-items:flex-end;">252 <div class="skeleton line-lg"></div>253 <div class="skeleton box-md"></div>254 </div>255 </div>256 257 <!-- Card 4 (partially visible) -->258 <div class="card" style="margin-bottom: 220px;">259 <div class="row">260 <div class="skeleton line-sm"></div>261 <div class="skeleton line-sm" style="width:220px;"></div>262 </div>263 <div class="row">264 <div class="skeleton line-md"></div>265 <div class="skeleton line-md"></div>266 </div>267 <div class="row" style="align-items:flex-end;">268 <div class="skeleton line-lg"></div>269 <div class="skeleton box-md"></div>270 </div>271 </div>272 </div>273 274 <!-- Bottom navigation bar -->275 <div class="bottom-bar">276 <div class="home-indicator"></div>277 </div>278 279</div>280</body>281</html>