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>Math Grades List</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0; left: 0; right: 0;21    height: 120px;22    background: #8f8f8f;23    color: #ffffff;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 40px;28    box-sizing: border-box;29    font-size: 38px;30    letter-spacing: 1px;31  }32  .sb-right {33    display: flex;34    align-items: center;35    gap: 26px;36  }37  .sb-icon svg { display: block; height: 40px; width: 40px; }38 39  /* App bar */40  .app-bar {41    position: absolute;42    top: 120px; left: 0; right: 0;43    height: 180px;44    background: #ffffff;45    display: flex;46    align-items: center;47    padding: 0 30px;48    box-sizing: border-box;49    box-shadow: 0 1px 0 #e6e6e6;50  }51  .back-btn {52    width: 120px; height: 120px;53    display: flex; align-items: center; justify-content: center;54    margin-right: 10px;55  }56  .app-title {57    font-size: 64px; color: #202124; font-weight: 600;58  }59 60  /* Content area */61  .content {62    position: absolute;63    top: 300px;64    left: 0; right: 0;65    bottom: 280px; /* bottom nav (200) + gesture (80) */66    overflow: hidden;67    background: #ffffff;68  }69  .list {70    height: 100%;71    overflow-y: auto;72    padding-bottom: 40px;73    box-sizing: border-box;74  }75  .row {76    display: flex;77    align-items: center;78    padding: 40px 40px 40px 40px;79    box-sizing: border-box;80  }81  .icon-badge {82    width: 120px; height: 120px;83    border-radius: 50%;84    background: #0EA9C7;85    color: #ffffff;86    display: flex; align-items: center; justify-content: center;87    flex-direction: column;88    text-align: center;89    margin-right: 36px;90  }91  .icon-badge .small {92    font-size: 26px; line-height: 26px; opacity: 0.95;93  }94  .icon-badge .num {95    font-size: 58px; font-weight: 800; line-height: 58px;96  }97  .title {98    font-size: 54px; color: #1f2933;99  }100  .divider {101    height: 2px;102    background: #EEEEEE;103    margin: 28px 0 0 196px; /* align under titles */104  }105 106  /* Bottom navigation */107  .bottom-nav {108    position: absolute;109    left: 0; right: 0; bottom: 80px;110    height: 200px;111    background: #ffffff;112    border-top: 1px solid #E0E0E0;113    display: flex;114    align-items: center;115    justify-content: space-around;116    box-sizing: border-box;117  }118  .nav-item {119    width: 33.33%;120    height: 100%;121    display: flex; flex-direction: column; align-items: center; justify-content: center;122    gap: 14px;123    color: #9E9E9E;124    font-size: 34px;125  }126  .nav-item svg { width: 64px; height: 64px; }127  .nav-item.active { color: #1976D2; }128  .nav-item.active svg path,129  .nav-item.active svg circle,130  .nav-item.active svg polygon { stroke: #1976D2; fill: none; }131 132  .nav-item svg path,133  .nav-item svg polygon,134  .nav-item svg rect,135  .nav-item svg circle { stroke: #9E9E9E; stroke-width: 4; fill: none; }136 137  /* Gesture bar area */138  .gesture {139    position: absolute; left: 0; right: 0; bottom: 0;140    height: 80px; background: #000;141    display: flex; align-items: center; justify-content: center;142  }143  .gesture .pill {144    width: 260px; height: 12px; border-radius: 6px; background: #cfcfcf;145  }146</style>147</head>148<body>149<div id="render-target">150 151  <!-- Status Bar -->152  <div class="status-bar">153    <div>8:34</div>154    <div class="sb-right">155      <div class="sb-icon">156        <!-- simple phone rectangle -->157        <svg viewBox="0 0 24 24"><rect x="5" y="3" width="14" height="18" rx="2" fill="none" stroke="#ffffff" stroke-width="2"/></svg>158      </div>159      <div class="sb-icon">160        <!-- cloud -->161        <svg viewBox="0 0 24 24"><path d="M6 16h10a4 4 0 0 0 0-8 5 5 0 0 0-9 2 3 3 0 0 0-1 6z" fill="none" stroke="#ffffff" stroke-width="2"/></svg>162      </div>163      <div class="sb-icon">164        <!-- wifi -->165        <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 16c2-2 4-2 6 0M12 20h0" stroke="#ffffff" stroke-width="2" fill="none"/></svg>166      </div>167      <div class="sb-icon">168        <!-- battery -->169        <svg viewBox="0 0 30 24"><rect x="2" y="6" width="22" height="12" rx="2" fill="none" stroke="#ffffff" stroke-width="2"/><rect x="24" y="10" width="4" height="4" fill="#ffffff"/></svg>170      </div>171    </div>172  </div>173 174  <!-- App Bar -->175  <div class="app-bar">176    <div class="back-btn" aria-label="Back">177      <svg viewBox="0 0 24 24" width="56" height="56">178        <path d="M15 19l-7-7 7-7" stroke="#3a6edb" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>179      </svg>180    </div>181    <div class="app-title">Math</div>182  </div>183 184  <!-- Content -->185  <div class="content">186    <div class="list">187 188      <div class="row">189        <div class="icon-badge"><div class="num">K</div></div>190        <div class="title">Kindergarten</div>191      </div>192      <div class="divider"></div>193 194      <div class="row">195        <div class="icon-badge"><div class="small">Grade</div><div class="num">1</div></div>196        <div class="title">1st grade</div>197      </div>198      <div class="divider"></div>199 200      <div class="row">201        <div class="icon-badge"><div class="small">Grade</div><div class="num">2</div></div>202        <div class="title">2nd grade</div>203      </div>204      <div class="divider"></div>205 206      <div class="row">207        <div class="icon-badge"><div class="small">Grade</div><div class="num">3</div></div>208        <div class="title">3rd grade</div>209      </div>210      <div class="divider"></div>211 212      <div class="row">213        <div class="icon-badge"><div class="small">Grade</div><div class="num">4</div></div>214        <div class="title">4th grade</div>215      </div>216      <div class="divider"></div>217 218      <div class="row">219        <div class="icon-badge"><div class="small">Grade</div><div class="num">5</div></div>220        <div class="title">5th grade</div>221      </div>222      <div class="divider"></div>223 224      <div class="row">225        <div class="icon-badge"><div class="small">Grade</div><div class="num">6</div></div>226        <div class="title">6th grade</div>227      </div>228      <div class="divider"></div>229 230      <div class="row">231        <div class="icon-badge"><div class="small">Grade</div><div class="num">7</div></div>232        <div class="title">7th grade</div>233      </div>234      <div class="divider"></div>235 236      <div class="row">237        <div class="icon-badge"><div class="small">Grade</div><div class="num">8</div></div>238        <div class="title">8th grade</div>239      </div>240 241    </div>242  </div>243 244  <!-- Bottom Navigation -->245  <div class="bottom-nav">246    <div class="nav-item">247      <svg viewBox="0 0 24 24" aria-hidden="true">248        <polygon points="12,2 19,6 19,14 12,22 5,14 5,6" />249      </svg>250      <div>Home</div>251    </div>252    <div class="nav-item active">253      <svg viewBox="0 0 24 24" aria-hidden="true">254        <circle cx="10" cy="10" r="6"></circle>255        <path d="M15 15l5 5"></path>256      </svg>257      <div>Explore</div>258    </div>259    <div class="nav-item">260      <svg viewBox="0 0 24 24" aria-hidden="true">261        <path d="M6 3h12v18l-6-4-6 4z"></path>262      </svg>263      <div>Bookmarks</div>264    </div>265  </div>266 267  <!-- Gesture area -->268  <div class="gesture">269    <div class="pill"></div>270  </div>271 272</div>273</body>274</html>