GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Math Tests List</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: #0b0b0b;15    font-family: Roboto, Arial, Helvetica, sans-serif;16    color: #fff;17  }18 19  /* Top bars */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 110px;26    background: #8BC34A;27    color: #fff;28    font-weight: 500;29  }30  .status-inner {31    height: 100%;32    display: flex;33    align-items: center;34    padding: 0 36px;35    font-size: 36px;36    letter-spacing: 1px;37  }38  .status-right {39    margin-left: auto;40    display: flex;41    align-items: center;42    gap: 26px;43  }44  .status-dot {45    width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.85);46  }47  .battery {48    width: 42px; height: 24px; border: 3px solid #fff; border-radius: 4px; position: relative;49  }50  .battery::after {51    content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 12px; background: #fff; border-radius: 1px;52  }53  .battery .level {54    position: absolute; left: 3px; top: 3px; bottom: 3px; right: 10px; background: #fff;55  }56 57  .appbar {58    position: absolute;59    top: 110px;60    left: 0;61    width: 1080px;62    height: 140px;63    background: #8BC34A;64    display: flex;65    align-items: center;66    padding: 0 24px 0 12px;67  }68  .nav-left {69    display: flex; align-items: center; gap: 12px;70  }71  .title {72    font-size: 50px;73    font-weight: 700;74    margin-left: 12px;75  }76  .premium {77    margin-left: 20px;78    font-size: 36px;79    font-weight: 700;80    opacity: 0.95;81  }82  .actions {83    margin-left: auto; display: flex; align-items: center; gap: 30px; padding-right: 10px;84  }85  .icon {86    width: 56px; height: 56px; fill: #f0f0f0;87  }88 89  /* Content list */90  .content {91    position: absolute;92    top: 250px; /* 110 + 140 */93    left: 0;94    right: 0;95    bottom: 110px;96    padding: 18px 18px 130px 18px;97    overflow-y: auto;98    background: #000;99  }100  .card {101    background: #2d2d2d;102    border-radius: 32px;103    padding: 36px 120px 34px 36px;104    margin: 22px 18px;105    position: relative;106    color: #f5f5f5;107    box-shadow: 0 2px 0 rgba(255,255,255,0.04) inset;108  }109  .card-title {110    font-size: 54px;111    line-height: 1.15;112    font-weight: 400;113    margin-bottom: 12px;114  }115  .card-sub {116    font-size: 34px;117    color: #c8c8c8;118    line-height: 1.35;119  }120  .chev {121    position: absolute;122    right: 34px;123    top: 50%;124    transform: translateY(-50%);125    width: 56px; height: 56px;126    fill: #FFD54F;127  }128 129  /* Bottom gesture pill */130  .home-indicator {131    position: absolute;132    bottom: 30px;133    left: 50%;134    transform: translateX(-50%);135    width: 360px;136    height: 12px;137    background: #e6e6e6;138    border-radius: 10px;139    opacity: 0.9;140  }141</style>142</head>143<body>144<div id="render-target">145 146  <!-- Status bar -->147  <div class="status-bar">148    <div class="status-inner">149      <div>10:22</div>150      <div class="status-right">151        <div class="status-dot" title="notifications"></div>152        <div class="status-dot" title="signal"></div>153        <div class="status-dot" title="wifi"></div>154        <div class="battery" title="battery"><div class="level"></div></div>155      </div>156    </div>157  </div>158 159  <!-- App bar -->160  <div class="appbar">161    <div class="nav-left">162      <!-- back arrow -->163      <svg class="icon" viewBox="0 0 24 24">164        <path d="M14.7 6.3L9 12l5.7 5.7-1.4 1.4L6.2 12l7.1-7.1z"></path>165      </svg>166      <div class="title">Math Tests</div>167      <div class="premium">PREMIUM</div>168    </div>169    <div class="actions">170      <!-- share -->171      <svg class="icon" viewBox="0 0 24 24">172        <path d="M18 16a3 3 0 0 0-2.5 1.3L8.9 13a3.2 3.2 0 0 0 0-2l6.6-4.3A3 3 0 1 0 15 5.1L8.4 9.4a3 3 0 1 0 0 5.2l6.6 4.3A3 3 0 1 0 18 16z"></path>173      </svg>174      <!-- search -->175      <svg class="icon" viewBox="0 0 24 24">176        <path d="M21 20l-4.3-4.3a7 7 0 1 0-1.4 1.4L20 21l1-1zM5 10a5 5 0 1 1 10 0A5 5 0 0 1 5 10z"></path>177      </svg>178      <!-- more -->179      <svg class="icon" viewBox="0 0 24 24">180        <path d="M5 12a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm7 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm7 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path>181      </svg>182    </div>183  </div>184 185  <!-- Content list -->186  <div class="content">187 188    <div class="card">189      <div class="card-title">Ten based system and place value</div>190      <div class="card-sub">Ones, tens, hundreds...</div>191      <svg class="chev" viewBox="0 0 24 24">192        <path d="M9 6l6 6-6 6" stroke="#FFD54F" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>193      </svg>194    </div>195 196    <div class="card">197      <div class="card-title">Rounding</div>198      <div class="card-sub">Round to the nearest ten or hundred. Rounding decimal numbers.</div>199      <svg class="chev" viewBox="0 0 24 24">200        <path d="M9 6l6 6-6 6" stroke="#FFD54F" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>201      </svg>202    </div>203 204    <div class="card">205      <div class="card-title">Units of measurement</div>206      <div class="card-sub">Converting metric units of time, length, mass and volume. 3 kg = 3,000 g  ·  5 dm = 50 cm  ·  1 m² = 10,000 cm²</div>207      <svg class="chev" viewBox="0 0 24 24">208        <path d="M9 6l6 6-6 6" stroke="#FFD54F" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>209      </svg>210    </div>211 212    <div class="card">213      <div class="card-title">Roman numerals and Greek alphabet</div>214      <div class="card-sub">Do you know symbols from ancient times? X, XIV, M, L, C, α, β, γ…</div>215      <svg class="chev" viewBox="0 0 24 24">216        <path d="M9 6l6 6-6 6" stroke="#FFD54F" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>217      </svg>218    </div>219 220    <div class="card">221      <div class="card-title">Fractions</div>222      <div class="card-sub">Fraction as a part of whole numbers. Add, subtract, multiply and compare. 1/2 > 1/4  ·  1/3 + 3/9 = ?  ·  1 − 3/7 = ?</div>223      <svg class="chev" viewBox="0 0 24 24">224        <path d="M9 6l6 6-6 6" stroke="#FFD54F" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>225      </svg>226    </div>227 228    <div class="card">229      <div class="card-title">Decimals</div>230      <div class="card-sub">Get familiar with decimal numbers. 0.7 + 0.9 = ?   ·   4 − 3.992 = ?   ·   0.3 × 7 = ?   ·   1.6 ÷ 6 = ?</div>231      <svg class="chev" viewBox="0 0 24 24">232        <path d="M9 6l6 6-6 6" stroke="#FFD54F" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>233      </svg>234    </div>235 236    <div class="card">237      <div class="card-title">Negative numbers and absolute value</div>238      <div class="card-sub">There is something less than zero… (−7) > (−8)   (−3) − 5 × (−6) = ?   6 − |7 − 8| = ?</div>239      <svg class="chev" viewBox="0 0 24 24">240        <path d="M9 6l6 6-6 6" stroke="#FFD54F" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>241      </svg>242    </div>243 244  </div>245 246  <!-- Home indicator -->247  <div class="home-indicator"></div>248</div>249</body>250</html>