GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Transit Skeleton UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #1c2948;17 }18 19 /* Top blue header */20 .top {21 width: 100%;22 background: #102754;23 color: #fff;24 }25 .statusbar {26 height: 150px;27 padding: 0 36px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 font-weight: 600;32 font-size: 38px;33 letter-spacing: 1px;34 }35 .status-left { opacity: 0.95; }36 .status-right {37 display: flex; align-items: center; gap: 26px; opacity: 0.95;38 }39 .dot { width: 10px; height: 10px; background: #c5d1ff; border-radius: 50%; display: inline-block; opacity: 0.8; }40 41 .appbar {42 height: 190px;43 display: flex;44 align-items: center;45 padding: 0 36px;46 }47 .back-btn {48 width: 96px; height: 96px;49 background: transparent; border: none; cursor: default;50 }51 .back-btn svg { width: 48px; height: 48px; fill: #cbd7ff; }52 53 /* Tabs */54 .tabs-wrap {55 background: #f7f8fb;56 border-top-left-radius: 24px;57 border-top-right-radius: 24px;58 }59 .tabs {60 height: 220px;61 display: flex;62 align-items: center;63 justify-content: space-around;64 }65 .tab-icon svg { width: 80px; height: 80px; fill: #3f4e7a; opacity: 0.95; }66 .tab-indicator {67 height: 12px;68 width: 360px;69 background: #ff6b6b;70 border-radius: 6px;71 margin-left: 36px;72 }73 74 /* Filter chips section */75 .chips-section {76 background: #f6f7f9;77 padding: 36px;78 padding-top: 48px;79 padding-bottom: 48px;80 }81 .chips-row {82 display: flex;83 gap: 30px;84 justify-content: space-between;85 }86 .chip {87 width: 220px;88 height: 110px;89 border-radius: 55px;90 border: 1px solid #e6e7ea;91 }92 93 /* Skeleton gradient */94 .skeleton {95 background: linear-gradient(90deg, #e3e6ee 0%, #f2f3f7 45%, #e3e6ee 90%);96 }97 98 /* Cards list */99 .list {100 padding: 18px 30px 220px 30px;101 background: #f6f7f9;102 }103 .card {104 background: #ffffff;105 border-radius: 28px;106 box-shadow: 0 6px 18px rgba(16, 39, 84, 0.10);107 margin: 26px 6px 34px 6px;108 padding: 38px 36px;109 }110 .card-grid {111 display: grid;112 grid-template-columns: 1fr 1fr;113 column-gap: 36px;114 }115 .bar { border-radius: 14px; }116 .bar.sm { height: 40px; width: 220px; }117 .bar.md { height: 44px; width: 420px; }118 .bar.lg { height: 58px; width: 520px; }119 .bar.block { height: 120px; width: 320px; border-radius: 18px; }120 .stack { display: flex; flex-direction: column; gap: 26px; }121 .spacer { height: 24px; }122 123 /* Bottom blue bar */124 .bottom-bar {125 position: absolute;126 left: 0; right: 0; bottom: 0;127 height: 140px;128 background: #0f2146;129 display: flex;130 align-items: center;131 justify-content: center;132 }133 .home-indicator {134 width: 320px; height: 14px;135 background: #e6e7ef;136 border-radius: 8px;137 opacity: 0.9;138 }139</style>140</head>141<body>142<div id="render-target">143 <!-- Top blue area -->144 <div class="top">145 <div class="statusbar">146 <div class="status-left">1:44</div>147 <div class="status-right">148 <span class="dot"></span>149 <span class="dot"></span>150 <span class="dot"></span>151 <span class="dot"></span>152 <span style="width:34px; height:26px; border:3px solid #cbd7ff; border-radius:4px; position: relative; display:inline-block"></span>153 <svg width="42" height="34" viewBox="0 0 24 24" fill="#cbd7ff"><path d="M7 18c.8-2.2 2.9-4 5.5-4s4.7 1.8 5.5 4H7zM4 18c1.2-3.2 4.5-5.5 8.5-5.5S19.8 14.8 21 18H4z"/></svg>154 </div>155 </div>156 <div class="appbar">157 <button class="back-btn" aria-label="Back">158 <svg viewBox="0 0 24 24"><path d="M15.4 4.6 8 12l7.4 7.4-1.4 1.4L5.2 12l8.8-8.8 1.4 1.4z"/></svg>159 </button>160 </div>161 </div>162 163 <!-- Tabs -->164 <div class="tabs-wrap">165 <div class="tabs">166 <div class="tab-icon" aria-label="Train">167 <svg viewBox="0 0 24 24"><path d="M7 16h10c1.7 0 3-1.3 3-3V7c0-2.2-2.4-4-5.3-4H9.3C6.4 3 4 4.8 4 7v6c0 1.7 1.3 3 3 3zm2-8h6v2H9V8zm-1 7-2 3h2l2-3h6l2 3h2l-2-3H8z"/></svg>168 </div>169 <div class="tab-icon" aria-label="Bus">170 <svg viewBox="0 0 24 24"><path d="M5 16v3h2v-2h10v2h2v-3c0-1.3-.8-2.4-2-2.8V6c0-2.2-2.5-4-5.5-4S6 3.8 6 6v7.2c-1.2.4-2 1.5-2 2.8zM8 8h8v3H8V8zm1 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm8 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/></svg>171 </div>172 <div class="tab-icon" aria-label="Plane">173 <svg viewBox="0 0 24 24"><path d="M21 10.5 3 3l5 8-5 8 18-7.5v-2z"/></svg>174 </div>175 </div>176 <div class="tab-indicator"></div>177 </div>178 179 <!-- Chips -->180 <div class="chips-section">181 <div class="chips-row">182 <div class="chip skeleton"></div>183 <div class="chip skeleton"></div>184 <div class="chip skeleton"></div>185 <div class="chip skeleton"></div>186 </div>187 </div>188 189 <!-- Cards list -->190 <div class="list">191 <!-- Card 1 -->192 <div class="card">193 <div class="card-grid">194 <div class="stack">195 <div class="bar sm skeleton"></div>196 <div class="bar md skeleton"></div>197 <div class="spacer"></div>198 <div class="bar lg skeleton" style="width:520px;"></div>199 </div>200 <div class="stack" style="align-items:flex-end;">201 <div class="bar sm skeleton" style="width:210px;"></div>202 <div class="bar md skeleton" style="width:500px;"></div>203 <div class="spacer"></div>204 <div class="bar block skeleton"></div>205 </div>206 </div>207 </div>208 <!-- Card 2 -->209 <div class="card">210 <div class="card-grid">211 <div class="stack">212 <div class="bar sm skeleton"></div>213 <div class="bar md skeleton"></div>214 <div class="spacer"></div>215 <div class="bar lg skeleton" style="width:520px;"></div>216 </div>217 <div class="stack" style="align-items:flex-end;">218 <div class="bar sm skeleton" style="width:210px;"></div>219 <div class="bar md skeleton" style="width:500px;"></div>220 <div class="spacer"></div>221 <div class="bar block skeleton"></div>222 </div>223 </div>224 </div>225 <!-- Card 3 -->226 <div class="card">227 <div class="card-grid">228 <div class="stack">229 <div class="bar sm skeleton"></div>230 <div class="bar md skeleton"></div>231 <div class="spacer"></div>232 <div class="bar lg skeleton" style="width:520px;"></div>233 </div>234 <div class="stack" style="align-items:flex-end;">235 <div class="bar sm skeleton" style="width:210px;"></div>236 <div class="bar md skeleton" style="width:500px;"></div>237 <div class="spacer"></div>238 <div class="bar block skeleton"></div>239 </div>240 </div>241 </div>242 <!-- Card 4 -->243 <div class="card">244 <div class="card-grid">245 <div class="stack">246 <div class="bar sm skeleton"></div>247 <div class="bar md skeleton"></div>248 <div class="spacer"></div>249 <div class="bar lg skeleton" style="width:520px;"></div>250 </div>251 <div class="stack" style="align-items:flex-end;">252 <div class="bar sm skeleton" style="width:210px;"></div>253 <div class="bar md skeleton" style="width:500px;"></div>254 <div class="spacer"></div>255 <div class="bar block skeleton"></div>256 </div>257 </div>258 </div>259 </div>260 261 <!-- Bottom bar -->262 <div class="bottom-bar">263 <div class="home-indicator"></div>264 </div>265</div>266</body>267</html>