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 - Explore</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: Arial, Helvetica, sans-serif;16    color: #212121;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    background: #7a7a7a;27    color: #ffffff;28    display: flex;29    align-items: center;30    padding: 0 40px;31    box-sizing: border-box;32    font-size: 40px;33  }34  .status-right {35    margin-left: auto;36    display: flex;37    align-items: center;38    gap: 26px;39  }40  .status-icon {41    display: inline-flex;42    align-items: center;43    justify-content: center;44  }45 46  /* App bar */47  .app-bar {48    position: absolute;49    top: 120px;50    left: 0;51    width: 1080px;52    height: 168px;53    background: #ffffff;54    border-bottom: 1px solid #eeeeee;55    display: flex;56    align-items: center;57    padding: 0 32px;58    box-sizing: border-box;59  }60  .back-btn {61    width: 88px;62    height: 88px;63    display: flex;64    align-items: center;65    justify-content: center;66    margin-right: 18px;67  }68  .app-title {69    font-size: 60px;70    font-weight: 600;71  }72 73  /* Content list */74  .content {75    position: absolute;76    top: 288px; /* status(120) + appbar(168) */77    left: 0;78    width: 1080px;79    bottom: 240px; /* leave room for bottom nav */80    overflow-y: auto;81    -webkit-overflow-scrolling: touch;82  }83  .divider {84    height: 2px;85    background: #eeeeee;86    margin-left: 160px;87    width: calc(100% - 160px);88  }89  .row {90    display: flex;91    align-items: center;92    padding: 34px 32px;93    box-sizing: border-box;94  }95  .circle {96    width: 112px;97    height: 112px;98    border-radius: 50%;99    display: inline-flex;100    align-items: center;101    justify-content: center;102    margin-right: 40px;103    box-shadow: 0 1px 0 rgba(0,0,0,0.04) inset;104  }105  .circle.yellow { background: #ffb300; }106  .circle.teal { background: #12a3b7; }107  .circle.blue { background: #18a2c6; }108 109  .badge-text {110    font-size: 42px;111    font-weight: 700;112    color: #ffffff;113  }114  .mini-grid {115    width: 84px;116    height: 84px;117    display: grid;118    grid-template-columns: repeat(2, 1fr);119    grid-template-rows: repeat(2, 1fr);120    gap: 6px;121  }122  .mini-cell {123    background: #fff3e0;124    display: flex;125    align-items: center;126    justify-content: center;127    font-size: 34px;128    font-weight: 700;129    color: #3d2c2c;130    border-radius: 8px;131  }132  .row-title {133    font-size: 46px;134    line-height: 56px;135    color: #2b2b2b;136  }137 138  /* Bottom navigation */139  .bottom-nav {140    position: absolute;141    left: 0;142    bottom: 84px;143    width: 1080px;144    height: 180px;145    background: #ffffff;146    border-top: 1px solid #e6e6e6;147    display: flex;148    align-items: center;149    justify-content: space-around;150  }151  .nav-item {152    width: 300px;153    height: 140px;154    display: flex;155    flex-direction: column;156    align-items: center;157    justify-content: center;158    color: #888888;159    font-size: 34px;160  }161  .nav-item.active { color: #1e73ff; }162  .nav-icon {163    width: 64px;164    height: 64px;165    margin-bottom: 16px;166  }167 168  /* Gesture bar */169  .gesture-bar {170    position: absolute;171    bottom: 24px;172    left: 50%;173    transform: translateX(-50%);174    width: 360px;175    height: 18px;176    border-radius: 9px;177    background: #000000;178    opacity: 0.8;179  }180</style>181</head>182<body>183<div id="render-target">184 185  <!-- Status Bar -->186  <div class="status-bar">187    <div>8:34</div>188    <div class="status-right">189      <!-- Cellular -->190      <div class="status-icon">191        <svg width="34" height="34" viewBox="0 0 24 24" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">192          <rect x="2" y="18" width="3" height="3"></rect>193          <rect x="6" y="15" width="3" height="6"></rect>194          <rect x="10" y="12" width="3" height="9"></rect>195        </svg>196      </div>197      <!-- Cloud -->198      <div class="status-icon">199        <svg width="34" height="34" viewBox="0 0 24 24" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">200          <path d="M7 17h9a4 4 0 0 0 0-8h-1a5 5 0 0 0-9 2H5a3 3 0 0 0 2 6z"></path>201        </svg>202      </div>203      <!-- WiFi -->204      <div class="status-icon">205        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" xmlns="http://www.w3.org/2000/svg">206          <path d="M2 8c5-4 15-4 20 0"></path>207          <path d="M4 12c3-3 13-3 16 0"></path>208          <path d="M7 16c2-2 8-2 10 0"></path>209          <circle cx="12" cy="19" r="1.6" fill="#ffffff"></circle>210        </svg>211      </div>212      <!-- Battery -->213      <div class="status-icon">214        <svg width="42" height="34" viewBox="0 0 28 16" xmlns="http://www.w3.org/2000/svg">215          <rect x="1" y="2" width="22" height="12" rx="2" fill="none" stroke="#ffffff" stroke-width="2"></rect>216          <rect x="3" y="4" width="14" height="8" fill="#ffffff"></rect>217          <rect x="23" y="6" width="4" height="4" rx="1" fill="#ffffff"></rect>218        </svg>219      </div>220    </div>221  </div>222 223  <!-- App Bar -->224  <div class="app-bar">225    <div class="back-btn">226      <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#3a6cff" stroke-width="3" xmlns="http://www.w3.org/2000/svg">227        <path d="M15 6l-6 6 6 6"></path>228      </svg>229    </div>230    <div class="app-title">Math</div>231  </div>232 233  <!-- Content List -->234  <div class="content">235 236    <div class="divider"></div>237    <div class="row">238      <div class="circle yellow">239        <div class="mini-grid">240          <div class="mini-cell">+</div>241          <div class="mini-cell">-</div>242          <div class="mini-cell">×</div>243          <div class="mini-cell">÷</div>244        </div>245      </div>246      <div class="row-title">Class 8 Math (India) - Hindi</div>247    </div>248 249    <div class="divider"></div>250    <div class="row">251      <div class="circle yellow">252        <div class="mini-grid">253          <div class="mini-cell">+</div>254          <div class="mini-cell">-</div>255          <div class="mini-cell">×</div>256          <div class="mini-cell">÷</div>257        </div>258      </div>259      <div class="row-title">Class 9 Math (India) - Hindi</div>260    </div>261 262    <div class="divider"></div>263    <div class="row">264      <div class="circle yellow">265        <div class="mini-grid">266          <div class="mini-cell">+</div>267          <div class="mini-cell">-</div>268          <div class="mini-cell">×</div>269          <div class="mini-cell">÷</div>270        </div>271      </div>272      <div class="row-title">Class 10 Math (India) - Hindi</div>273    </div>274 275    <div class="divider"></div>276    <div class="row">277      <div class="circle yellow">278        <div class="mini-grid">279          <div class="mini-cell">+</div>280          <div class="mini-cell">-</div>281          <div class="mini-cell">×</div>282          <div class="mini-cell">÷</div>283        </div>284      </div>285      <div class="row-title">Class 11 Math (India) - Hindi</div>286    </div>287 288    <div class="divider"></div>289    <div class="row">290      <div class="circle teal">291        <span class="badge-text">123</span>292      </div>293      <div class="row-title">Early math review</div>294    </div>295 296    <div class="divider"></div>297    <div class="row">298      <div class="circle teal">299        <span class="badge-text">K</span>300      </div>301      <div class="row-title">Kindergarten</div>302    </div>303 304    <div class="divider"></div>305    <div class="row">306      <div class="circle teal">307        <span class="badge-text">1</span>308      </div>309      <div class="row-title">1st grade</div>310    </div>311 312    <div class="divider"></div>313    <div class="row">314      <div class="circle teal">315        <span class="badge-text">2</span>316      </div>317      <div class="row-title">2nd grade</div>318    </div>319 320    <div class="divider"></div>321    <div class="row">322      <div class="circle blue">323        <span class="badge-text">3</span>324      </div>325      <div class="row-title">3rd grade</div>326    </div>327 328  </div>329 330  <!-- Bottom Navigation -->331  <div class="bottom-nav">332    <div class="nav-item">333      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#9e9e9e" stroke-width="2" xmlns="http://www.w3.org/2000/svg">334        <polygon points="12 2 20 7 20 17 12 22 4 17 4 7"></polygon>335      </svg>336      <div>Home</div>337    </div>338    <div class="nav-item active">339      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#1e73ff" stroke-width="2.5" xmlns="http://www.w3.org/2000/svg">340        <circle cx="11" cy="11" r="6"></circle>341        <line x1="16.5" y1="16.5" x2="22" y2="22"></line>342      </svg>343      <div>Explore</div>344    </div>345    <div class="nav-item">346      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#9e9e9e" stroke-width="2" xmlns="http://www.w3.org/2000/svg">347        <path d="M6 2h12v20l-6-4-6 4V2z"></path>348      </svg>349      <div>Bookmarks</div>350    </div>351  </div>352 353  <!-- Gesture Bar -->354  <div class="gesture-bar"></div>355</div>356</body>357</html>