GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Math Explore List</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    font-family: Arial, Helvetica, sans-serif;15    color: #222;16  }17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #7B7B7B;25    color: #fff;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 40px;30    box-sizing: border-box;31    font-size: 42px;32    letter-spacing: 0.5px;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 26px;38  }39  /* Header */40  .header {41    position: absolute;42    top: 120px;43    left: 0;44    width: 1080px;45    height: 180px;46    background: #ffffff;47    border-bottom: 1px solid #EAEAEA;48    display: flex;49    align-items: center;50    padding: 0 30px;51    box-sizing: border-box;52  }53  .back-btn {54    width: 80px;55    height: 80px;56    display: flex;57    align-items: center;58    justify-content: center;59    margin-left: 10px;60    margin-right: 20px;61  }62  .header-title {63    font-size: 64px;64    font-weight: 600;65    color: #222;66  }67 68  /* List */69  .list {70    position: absolute;71    top: 300px; /* status (120) + header (180) */72    left: 0;73    width: 1080px;74    bottom: 220px; /* bottom nav height */75    overflow: hidden;76  }77  .item {78    height: 200px;79    display: flex;80    align-items: center;81    border-bottom: 2px solid #EFEFEF;82    padding: 0 40px 0 40px;83    box-sizing: border-box;84  }85  .icon-circle {86    width: 120px;87    height: 120px;88    border-radius: 60px;89    background: #0FB2C8;90    color: #fff;91    display: flex;92    align-items: center;93    justify-content: center;94    margin-right: 40px;95    position: relative;96    font-weight: 700;97  }98  .grade-badge {99    display: flex;100    flex-direction: column;101    align-items: center;102    line-height: 1;103  }104  .grade-badge .small {105    font-size: 26px;106    font-weight: 700;107    opacity: 0.95;108    margin-bottom: 8px;109  }110  .grade-badge .num {111    font-size: 56px;112    font-weight: 800;113  }114  .icon-text {115    font-size: 56px;116    font-weight: 800;117  }118  .item-title {119    font-size: 48px;120    font-weight: 500;121    color: #1F1F1F;122  }123 124  /* Bottom navigation */125  .bottom-nav {126    position: absolute;127    bottom: 0;128    left: 0;129    width: 1080px;130    height: 220px;131    background: #ffffff;132    border-top: 2px solid #EAEAEA;133    display: flex;134    align-items: center;135    justify-content: space-around;136    box-sizing: border-box;137  }138  .tab {139    width: 33.33%;140    height: 100%;141    display: flex;142    align-items: center;143    justify-content: center;144    flex-direction: column;145    gap: 18px;146    color: #8F8F8F;147    font-size: 34px;148  }149  .tab.active {150    color: #0A77FF;151  }152  .tab svg {153    width: 64px;154    height: 64px;155  }156  /* Home indicator */157  .home-indicator {158    position: absolute;159    bottom: 12px;160    left: 50%;161    transform: translateX(-50%);162    width: 260px;163    height: 12px;164    background: #000;165    opacity: 0.12;166    border-radius: 8px;167  }168</style>169</head>170<body>171<div id="render-target">172 173  <!-- Status Bar -->174  <div class="status-bar">175    <div>8:34</div>176    <div class="status-right">177      <!-- Cellular icon (simple bars) -->178      <svg viewBox="0 0 60 40" width="60" height="40">179        <rect x="2" y="24" width="8" height="14" fill="#ffffff" opacity="0.9"></rect>180        <rect x="16" y="18" width="8" height="20" fill="#ffffff" opacity="0.9"></rect>181        <rect x="30" y="12" width="8" height="26" fill="#ffffff" opacity="0.9"></rect>182        <rect x="44" y="6" width="8" height="32" fill="#ffffff" opacity="0.9"></rect>183      </svg>184      <!-- Cloud icon (simple) -->185      <svg viewBox="0 0 60 40" width="60" height="40">186        <ellipse cx="28" cy="22" rx="22" ry="12" fill="#ffffff" opacity="0.9"></ellipse>187        <circle cx="20" cy="18" r="10" fill="#ffffff" opacity="0.9"></circle>188        <circle cx="36" cy="16" r="12" fill="#ffffff" opacity="0.9"></circle>189      </svg>190      <!-- Wi-Fi icon -->191      <svg viewBox="0 0 60 40" width="60" height="40">192        <path d="M6 16 Q30 -2 54 16" stroke="#ffffff" stroke-width="6" fill="none" opacity="0.9"/>193        <path d="M14 22 Q30 8 46 22" stroke="#ffffff" stroke-width="6" fill="none" opacity="0.9"/>194        <path d="M22 28 Q30 18 38 28" stroke="#ffffff" stroke-width="6" fill="none" opacity="0.9"/>195        <circle cx="30" cy="34" r="4" fill="#ffffff" opacity="0.9"/>196      </svg>197      <!-- Battery icon -->198      <svg viewBox="0 0 80 40" width="80" height="40">199        <rect x="2" y="6" width="68" height="28" rx="6" ry="6" fill="none" stroke="#ffffff" stroke-width="4"></rect>200        <rect x="72" y="12" width="6" height="16" fill="#ffffff"></rect>201        <rect x="8" y="10" width="48" height="20" fill="#ffffff" opacity="0.9"></rect>202      </svg>203    </div>204  </div>205 206  <!-- Header -->207  <div class="header">208    <div class="back-btn">209      <svg viewBox="0 0 24 24" width="60" height="60">210        <path d="M15 5 L7 12 L15 19" stroke="#3377FF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>211      </svg>212    </div>213    <div class="header-title">Math</div>214  </div>215 216  <!-- List -->217  <div class="list">218    <div class="item">219      <div class="icon-circle">220        <div class="grade-badge">221          <div class="small">Grade</div>222          <div class="num">6</div>223        </div>224      </div>225      <div class="item-title">6th grade</div>226    </div>227 228    <div class="item">229      <div class="icon-circle">230        <div class="grade-badge">231          <div class="small">Grade</div>232          <div class="num">7</div>233        </div>234      </div>235      <div class="item-title">7th grade</div>236    </div>237 238    <div class="item">239      <div class="icon-circle">240        <div class="grade-badge">241          <div class="small">Grade</div>242          <div class="num">8</div>243        </div>244      </div>245      <div class="item-title">8th grade</div>246    </div>247 248    <div class="item">249      <div class="icon-circle"><span class="icon-text">+</span></div>250      <div class="item-title">Arithmetic</div>251    </div>252 253    <div class="item">254      <div class="icon-circle"><span class="icon-text">▣</span></div>255      <div class="item-title">Basic geometry and measurement</div>256    </div>257 258    <div class="item">259      <div class="icon-circle"><span class="icon-text">x+3</span></div>260      <div class="item-title">Pre-algebra</div>261    </div>262 263    <div class="item">264      <div class="icon-circle"><span class="icon-text">xʸ</span></div>265      <div class="item-title">Algebra basics</div>266    </div>267 268    <div class="item">269      <div class="icon-circle"><span class="icon-text">∕</span></div>270      <div class="item-title">Algebra 1</div>271    </div>272 273    <div class="item">274      <div class="icon-circle"><span class="icon-text">△</span></div>275      <div class="item-title">High school geometry</div>276    </div>277  </div>278 279  <!-- Bottom Navigation -->280  <div class="bottom-nav">281    <div class="tab">282      <svg viewBox="0 0 64 64">283        <polygon points="32,6 52,18 52,44 32,56 12,44 12,18" fill="none" stroke="#8F8F8F" stroke-width="4"></polygon>284      </svg>285      <div>Home</div>286    </div>287    <div class="tab active">288      <svg viewBox="0 0 64 64">289        <circle cx="28" cy="28" r="18" fill="none" stroke="#0A77FF" stroke-width="4"></circle>290        <line x1="44" y1="44" x2="58" y2="58" stroke="#0A77FF" stroke-width="4" stroke-linecap="round"></line>291      </svg>292      <div>Explore</div>293    </div>294    <div class="tab">295      <svg viewBox="0 0 64 64">296        <path d="M20 8 H44 V56 L32 46 L20 56 Z" fill="none" stroke="#8F8F8F" stroke-width="4" stroke-linejoin="round"></path>297      </svg>298      <div>Bookmarks</div>299    </div>300  </div>301 302  <div class="home-indicator"></div>303</div>304</body>305</html>