GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Young Adult - Skeleton Grid</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff;13  }14 15  /* Header */16  .header {17    background: #1f57c9;18    color: #ffffff;19    height: 300px;20    box-shadow: 0 2px 0 rgba(0,0,0,0.08);21  }22  .status-bar {23    height: 86px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 36px;28    font-size: 30px;29    opacity: 0.95;30  }31  .status-icons { display: flex; align-items: center; gap: 18px; }32  .status-dot {33    width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,0.85);34  }35  .appbar {36    height: 214px;37    display: flex;38    align-items: center;39    padding: 0 36px;40    gap: 22px;41  }42  .title {43    font-size: 44px;44    font-weight: 600;45    letter-spacing: 0.2px;46  }47  .grow { flex: 1; }48  .icon-btn { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; margin-left: 30px; }49 50  /* Toolbar */51  .toolbar {52    height: 120px;53    background: #ffffff;54    display: flex;55    border-top: 1px solid #e8e8e8;56    border-bottom: 1px solid #e8e8e8;57  }58  .toolbar .col {59    flex: 1;60    display: flex;61    align-items: center;62    gap: 22px;63    padding: 0 40px;64    color: #555;65    font-size: 38px;66  }67  .toolbar .col:first-child { border-right: 1px solid #e8e8e8; }68 69  /* Grid */70  .content {71    background: #ffffff;72  }73  .grid {74    display: grid;75    grid-template-columns: 1fr 1fr;76  }77  .grid .column {78    padding: 36px 40px 20px 40px;79  }80  .grid .column:nth-child(2) {81    border-left: 1px solid #eeeeee;82  }83  .card {84    margin-bottom: 46px;85  }86  .thumb {87    width: 100%;88    height: 540px;89    background: #c5cdd6;90    border: 1px solid #b9c1ca;91    border-radius: 14px;92    display: flex; align-items: center; justify-content: center;93    color: #6d7680; font-size: 32px;94  }95  .line {96    height: 48px;97    background: #c5cdd6;98    border: 1px solid #b9c1ca;99    border-radius: 10px;100    margin-top: 18px;101  }102  .w-90 { width: 90%; }103  .w-80 { width: 80%; }104  .w-65 { width: 65%; }105  .w-50 { width: 50%; }106  .divider-row {107    height: 1px; background: #eeeeee; margin: 6px 0 6px 0;108    grid-column: 1 / span 2;109  }110 111  /* Bottom loading text */112  .loading {113    text-align: center;114    color: #7a7a7a;115    font-size: 38px;116    font-style: italic;117    padding: 22px 30px 0 30px;118  }119 120  /* Home indicator */121  .home-bar {122    position: absolute;123    bottom: 32px;124    left: 50%;125    transform: translateX(-50%);126    width: 200px; height: 12px;127    background: #000000;128    border-radius: 8px;129    opacity: 0.9;130  }131 132  /* Simple reset for SVGs */133  svg { display: block; }134</style>135</head>136<body>137<div id="render-target">138 139  <!-- Header with status and app bar -->140  <div class="header">141    <div class="status-bar">142      <div>7:15</div>143      <div class="status-icons">144        <div class="status-dot"></div>145        <div class="status-dot" style="width:22px;height:22px;border-radius:50%;"></div>146        <div class="status-dot"></div>147        <div class="status-dot" style="width:22px;height:22px;border-radius:50%;"></div>148      </div>149    </div>150    <div class="appbar">151      <!-- Back icon -->152      <div class="icon-btn">153        <svg width="44" height="44" viewBox="0 0 24 24">154          <path d="M14 6 L8 12 L14 18" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>155        </svg>156      </div>157 158      <!-- Category image placeholder -->159      <div style="width:72px;height:72px;border-radius:50%; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:20px;">160        IMG161      </div>162 163      <div class="title">Young Adult</div>164      <div class="grow"></div>165 166      <!-- Search icon -->167      <div class="icon-btn">168        <svg width="44" height="44" viewBox="0 0 24 24">169          <circle cx="10" cy="10" r="6" stroke="#ffffff" stroke-width="2.4" fill="none"></circle>170          <path d="M16 16 L21 21" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round"></path>171        </svg>172      </div>173 174      <!-- Cart icon -->175      <div class="icon-btn">176        <svg width="44" height="44" viewBox="0 0 24 24">177          <path d="M3 6 H5 L7 17 H18 L20 9 H8" stroke="#ffffff" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>178          <circle cx="9" cy="19" r="1.6" fill="#ffffff"></circle>179          <circle cx="17" cy="19" r="1.6" fill="#ffffff"></circle>180        </svg>181      </div>182    </div>183  </div>184 185  <!-- Toolbar for Sort and Filter -->186  <div class="toolbar">187    <div class="col">188      <svg width="44" height="44" viewBox="0 0 24 24">189        <!-- Simple sort icon: staggered lines -->190        <path d="M4 7 H16" stroke="#444" stroke-width="2.2" stroke-linecap="round"></path>191        <path d="M4 12 H13" stroke="#444" stroke-width="2.2" stroke-linecap="round"></path>192        <path d="M4 17 H10" stroke="#444" stroke-width="2.2" stroke-linecap="round"></path>193      </svg>194      <div>Sort By</div>195    </div>196    <div class="col">197      <svg width="44" height="44" viewBox="0 0 24 24">198        <!-- Funnel filter icon -->199        <path d="M3 5 H21 L14 12 V18 L10 20 V12 Z" fill="#444"></path>200      </svg>201      <div>Filter</div>202    </div>203  </div>204 205  <!-- Content grid with skeleton cards -->206  <div class="content">207    <div class="grid">208      <div class="column">209        <!-- Card 1 -->210        <div class="card">211          <div class="thumb">[IMG: Book Cover]</div>212          <div class="line w-90"></div>213          <div class="line w-80"></div>214          <div class="line w-65"></div>215          <div class="line w-90"></div>216        </div>217        <!-- Card 3 -->218        <div class="card">219          <div class="thumb">[IMG: Book Cover]</div>220          <div class="line w-90"></div>221          <div class="line w-80"></div>222          <div class="line w-65"></div>223          <div class="line w-90"></div>224        </div>225      </div>226 227      <div class="column">228        <!-- Card 2 -->229        <div class="card">230          <div class="thumb">[IMG: Book Cover]</div>231          <div class="line w-90"></div>232          <div class="line w-80"></div>233          <div class="line w-65"></div>234          <div class="line w-90"></div>235        </div>236        <!-- Card 4 -->237        <div class="card">238          <div class="thumb">[IMG: Book Cover]</div>239          <div class="line w-90"></div>240          <div class="line w-80"></div>241          <div class="line w-65"></div>242          <div class="line w-90"></div>243        </div>244      </div>245 246      <!-- Horizontal divider between rows -->247      <div class="divider-row"></div>248    </div>249 250    <div class="loading">Hang on! Loading Content...</div>251  </div>252 253  <!-- Home indicator -->254  <div class="home-bar"></div>255</div>256</body>257</html>