GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Shop Skeleton UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #ffffff;13    color: #222;14  }15 16  /* Status bar */17  .status-bar {18    height: 56px;19    padding: 0 28px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #666;24    font-size: 28px;25  }26  .status-icons span {27    display: inline-block;28    width: 18px;29    height: 18px;30    background: #9e9e9e;31    border-radius: 3px;32    margin-left: 16px;33    opacity: .7;34  }35 36  /* Top app bar */37  .app-bar {38    height: 100px;39    display: flex;40    align-items: center;41    justify-content: space-between;42    padding: 0 36px;43  }44  .icon-btn {45    width: 72px;46    height: 72px;47    display: inline-flex;48    align-items: center;49    justify-content: center;50    border-radius: 12px;51    color: #222;52  }53  .icons-row {54    display: flex;55    gap: 28px;56  }57  svg { width: 44px; height: 44px; }58 59  /* Skeleton */60  .content {61    padding: 20px 36px 220px;62  }63  .skeleton {64    background: linear-gradient(90deg, #e5e5e5 0%, #efefef 60%, #e9e9e9 100%);65    border-radius: 14px;66  }67  .row { display: flex; gap: 28px; }68  .m8 { margin-top: 8px; }69  .m16 { margin-top: 16px; }70  .m24 { margin-top: 24px; }71  .m32 { margin-top: 32px; }72 73  .bar { height: 54px; }74  .card {75    height: 620px;76    flex: 1;77  }78  .card-tall { height: 820px; flex: 1; }79 80  /* Center white circle with logo text */81  .center-circle {82    position: absolute;83    top: 980px;84    left: 50%;85    transform: translateX(-50%);86    width: 620px;87    height: 620px;88    background: #ffffff;89    border-radius: 50%;90    box-shadow: 0 6px 30px rgba(0,0,0,0.08);91    display: flex;92    align-items: center;93    justify-content: center;94    z-index: 5;95    text-align: center;96    color: #000;97    font-size: 120px;98    line-height: 1;99  }100  .center-circle small {101    display: block;102    font-size: 28px;103    color: #444;104    margin-top: 8px;105    letter-spacing: 2px;106  }107 108  /* Bottom navigation */109  .bottom-nav {110    position: absolute;111    left: 0;112    bottom: 0;113    width: 1080px;114    height: 170px;115    background: #ffffff;116    border-top: 1px solid #e5e5e5;117    display: flex;118    align-items: center;119    justify-content: space-around;120    padding-bottom: 18px;121  }122  .nav-item {123    display: flex;124    flex-direction: column;125    align-items: center;126    color: #8a8f95;127    font-size: 28px;128    gap: 10px;129  }130  .nav-item.active {131    color: #101214;132    font-weight: 700;133  }134  .nav-item .big svg { width: 56px; height: 56px; }135  .badge {136    position: absolute;137    right: 88px;138    bottom: 128px;139    width: 56px;140    height: 56px;141    background: #c7b08a;142    color: #fff;143    border-radius: 50%;144    font-size: 28px;145    display: flex;146    align-items: center;147    justify-content: center;148    font-weight: 700;149  }150</style>151</head>152<body>153<div id="render-target">154 155  <!-- Fake status bar -->156  <div class="status-bar">157    <div>12:36</div>158    <div class="status-icons">159      <span></span><span></span><span></span><span></span>160    </div>161  </div>162 163  <!-- App bar -->164  <div class="app-bar">165    <div class="icon-btn" aria-label="Back">166      <svg viewBox="0 0 24 24">167        <path d="M14.7 18.3a1 1 0 0 1-1.4 1.4l-7-7a1 1 0 0 1 0-1.4l7-7a1 1 0 1 1 1.4 1.4L9.4 11H21a1 1 0 1 1 0 2H9.4l5.3 5.3z" fill="#111"/>168      </svg>169    </div>170    <div class="icons-row">171      <div class="icon-btn" aria-label="Filter">172        <svg viewBox="0 0 24 24">173          <path d="M3 6h14a1 1 0 1 0 0-2H3a1 1 0 1 0 0 2zm4 7h14a1 1 0 1 0 0-2H7a1 1 0 0 0 0 2zm6 7h7a1 1 0 1 0 0-2h-7a1 1 0 1 0 0 2z" fill="#111"/>174        </svg>175      </div>176      <div class="icon-btn" aria-label="Search">177        <svg viewBox="0 0 24 24">178          <path d="M10 2a8 8 0 1 1 5.3 14.1l4.6 4.6a1 1 0 0 1-1.4 1.4l-4.6-4.6A8 8 0 0 1 10 2zm0 2a6 6 0 1 0 .001 12.001A6 6 0 0 0 10 4z" fill="#111"/>179        </svg>180      </div>181    </div>182  </div>183 184  <!-- Content skeleton blocks -->185  <div class="content">186    <!-- Top tiny bars -->187    <div class="row">188      <div class="skeleton bar" style="width: 380px;"></div>189    </div>190    <div class="row m16">191      <div class="skeleton bar" style="width: 540px;"></div>192      <div class="skeleton bar" style="width: 380px;"></div>193    </div>194 195    <!-- Two big cards -->196    <div class="row m24">197      <div class="skeleton card"></div>198      <div class="skeleton card"></div>199    </div>200 201    <!-- Small bars under first section -->202    <div class="row m24">203      <div class="skeleton bar" style="width: 280px;"></div>204      <div class="skeleton bar" style="width: 520px;"></div>205    </div>206    <div class="row m16">207      <div class="skeleton bar" style="width: 920px;"></div>208    </div>209    <div class="row m16">210      <div class="skeleton bar" style="width: 620px;"></div>211    </div>212 213    <!-- Spacer to account for center circle -->214    <div class="row m32">215      <div class="skeleton bar" style="width: 280px;"></div>216      <div class="skeleton bar" style="width: 220px;"></div>217    </div>218 219    <!-- Lower two tall cards -->220    <div class="row m32">221      <div class="skeleton card-tall"></div>222      <div class="skeleton card-tall"></div>223    </div>224 225    <!-- Bottom bars above navigation -->226    <div class="row m24">227      <div class="skeleton bar" style="width: 320px;"></div>228      <div class="skeleton bar" style="width: 360px;"></div>229    </div>230    <div class="row m16">231      <div class="skeleton bar" style="width: 720px;"></div>232    </div>233    <div class="row m16">234      <div class="skeleton bar" style="width: 560px;"></div>235    </div>236    <div class="row m16">237      <div class="skeleton bar" style="width: 720px;"></div>238    </div>239  </div>240 241  <!-- Center brand circle -->242  <div class="center-circle" aria-label="Brand logo">243    <div>244      <div style="font-size:140px;">🐆</div>245      <small>Loading products…</small>246    </div>247  </div>248 249  <!-- Bottom navigation -->250  <div class="bottom-nav">251    <div class="nav-item">252      <svg viewBox="0 0 24 24">253        <path d="M12 3l9 8h-3v8a1 1 0 0 1-1 1h-4v-6H11v6H7a1 1 0 0 1-1-1v-8H3l9-8z" fill="#8a8f95"/>254      </svg>255      <div>HOME</div>256    </div>257    <div class="nav-item">258      <svg viewBox="0 0 24 24">259        <path d="M7 3h10a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm0 4h10M8 12h3m-3 4h8" stroke="#8a8f95" stroke-width="2" fill="none" stroke-linecap="round"/>260      </svg>261      <div>DROPS</div>262    </div>263    <div class="nav-item active">264      <div class="big">265        <svg viewBox="0 0 24 24">266          <path d="M10 2a8 8 0 1 1 5.3 14.1l4.6 4.6a1 1 0 0 1-1.4 1.4l-4.6-4.6A8 8 0 0 1 10 2zm0 2a6 6 0 1 0 .001 12.001A6 6 0 0 0 10 4z" fill="#101214"/>267        </svg>268      </div>269      <div>SHOP</div>270    </div>271    <div class="nav-item">272      <svg viewBox="0 0 24 24">273        <path d="M7 7h14l-2 11a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L5 4H2" stroke="#8a8f95" stroke-width="2" fill="none" stroke-linecap="round"/>274      </svg>275      <div>CART</div>276    </div>277    <div class="nav-item" style="position: relative;">278      <svg viewBox="0 0 24 24">279        <path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5z" fill="#8a8f95"/>280      </svg>281      <div>ACCOUNT</div>282    </div>283    <div class="badge">1</div>284  </div>285 286</div>287</body>288</html>