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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15  }16 17  /* Top system status bar (mock) */18  .status-bar {19    height: 96px;20    background: #8BC34A;21    color: #ffffff;22    padding: 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    font-weight: 600;27  }28  .status-left { font-size: 36px; letter-spacing: 0.5px; }29  .status-right { display: flex; align-items: center; gap: 22px; }30  .status-dot {31    width: 22px; height: 22px; border-radius: 50%; background: #ffffff; opacity: 0.9;32  }33  .status-rect {34    width: 28px; height: 20px; border: 3px solid #fff; border-radius: 4px; position: relative;35  }36  .status-rect::after {37    content: ""; position: absolute; right: -6px; top: 6px; width: 4px; height: 8px; background: #fff; border-radius: 1px;38  }39 40  /* App bar */41  .app-bar {42    height: 156px;43    background: #8BC34A;44    color: #ffffff;45    padding: 0 40px;46    display: flex;47    align-items: center;48    justify-content: space-between;49  }50  .app-title {51    font-size: 64px;52    font-weight: 700;53  }54  .app-actions {55    display: flex;56    align-items: center;57    gap: 36px;58    font-size: 40px;59    font-weight: 700;60  }61  .icon { width: 48px; height: 48px; }62  .icon path, .icon circle, .icon line {63    stroke: #ffffff; fill: none; stroke-width: 5;64  }65 66  /* Content area */67  .content {68    position: absolute;69    top: 252px; /* 96 + 156 */70    left: 0;71    right: 0;72    bottom: 0;73    overflow: hidden;74  }75 76  .grid {77    padding: 40px;78    display: grid;79    grid-template-columns: repeat(2, 1fr);80    gap: 40px;81  }82 83  .card {84    background: #252525;85    border-radius: 52px;86    height: 360px;87    color: #ffffff;88    display: flex;89    flex-direction: column;90    align-items: center;91    justify-content: center;92    box-shadow: 0 10px 30px rgba(0,0,0,0.35);93  }94  .card .img {95    width: 220px;96    height: 160px;97    background: #E0E0E0;98    border: 1px solid #BDBDBD;99    border-radius: 12px;100    color: #757575;101    display: flex;102    align-items: center;103    justify-content: center;104    font-size: 30px;105    text-align: center;106    line-height: 1.2;107    margin-bottom: 26px;108  }109  .card .label {110    font-size: 54px;111    font-weight: 600;112    letter-spacing: 0.2px;113  }114 115  .card.wide {116    grid-column: span 2;117    height: 360px;118  }119 120  /* Bottom home indicator (mock) */121  .home-indicator {122    position: absolute;123    bottom: 34px;124    left: 50%;125    transform: translateX(-50%);126    width: 320px;127    height: 12px;128    background: #E0E0E0;129    border-radius: 12px;130    opacity: 0.8;131  }132</style>133</head>134<body>135<div id="render-target">136  <!-- Status bar -->137  <div class="status-bar">138    <div class="status-left">10:20</div>139    <div class="status-right">140      <div class="status-dot" style="opacity:.7"></div>141      <div class="status-rect"></div>142      <div class="status-dot"></div>143      <div class="status-dot" style="width:30px;height:18px;border-radius:4px;background:#ffffff;"></div>144    </div>145  </div>146 147  <!-- App bar -->148  <div class="app-bar">149    <div class="app-title">Math Tests</div>150    <div class="app-actions">151      <div>PREMIUM</div>152      <svg class="icon" viewBox="0 0 24 24" aria-label="share">153        <circle cx="6" cy="12" r="2"></circle>154        <circle cx="18" cy="6" r="2"></circle>155        <circle cx="18" cy="18" r="2"></circle>156        <path d="M8 11 L16 7"></path>157        <path d="M8 13 L16 17"></path>158      </svg>159      <svg class="icon" viewBox="0 0 24 24" aria-label="search">160        <circle cx="11" cy="11" r="7"></circle>161        <line x1="16.5" y1="16.5" x2="22" y2="22"></line>162      </svg>163      <svg class="icon" viewBox="0 0 24 24" aria-label="more">164        <circle cx="12" cy="5" r="1.8" fill="#ffffff" stroke="none"></circle>165        <circle cx="12" cy="12" r="1.8" fill="#ffffff" stroke="none"></circle>166        <circle cx="12" cy="19" r="1.8" fill="#ffffff" stroke="none"></circle>167      </svg>168    </div>169  </div>170 171  <!-- Main content -->172  <div class="content">173    <div class="grid">174      <div class="card">175        <div class="img">[IMG: Books + Apple]</div>176        <div class="label">Theory</div>177      </div>178      <div class="card">179        <div class="img">[IMG: Squirrel + Checklists]</div>180        <div class="label">Tests</div>181      </div>182      <div class="card">183        <div class="img">[IMG: Pencil + List]</div>184        <div class="label">Results</div>185      </div>186      <div class="card">187        <div class="img">[IMG: Growth Chart]</div>188        <div class="label">Statistics</div>189      </div>190      <div class="card">191        <div class="img">[IMG: Notebook]</div>192        <div class="label">Study plan</div>193      </div>194      <div class="card">195        <div class="img">[IMG: Stack of Books]</div>196        <div class="label">More subjects</div>197      </div>198      <div class="card wide">199        <div class="img">[IMG: Trophy]</div>200        <div class="label">Championship</div>201      </div>202    </div>203  </div>204 205  <div class="home-indicator"></div>206</div>207</body>208</html>