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 {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Roboto", Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #000000;20  }21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 132px;28    background: #6b8f1a;29    color: #ffffff;30    display: flex;31    align-items: center;32    padding: 0 36px;33    box-sizing: border-box;34    font-size: 38px;35    letter-spacing: 0.5px;36  }37  .status-left {38    display: flex;39    align-items: center;40    gap: 18px;41  }42  .status-right {43    margin-left: auto;44    display: flex;45    align-items: center;46    gap: 26px;47  }48  /* Top app bar */49  .app-bar {50    position: absolute;51    top: 132px;52    left: 0;53    width: 1080px;54    height: 122px;55    background: #b8d63b;56    display: flex;57    align-items: center;58    padding: 0 28px;59    box-sizing: border-box;60    color: #ffffff;61  }62  .app-title {63    font-size: 52px;64    font-weight: 700;65    margin-left: 18px;66  }67  .spacer {68    flex: 1;69  }70  .premium {71    font-size: 38px;72    font-weight: 700;73    margin-right: 30px;74  }75  .icon-btn {76    width: 72px;77    height: 72px;78    display: flex;79    align-items: center;80    justify-content: center;81  }82  /* List */83  .content {84    position: absolute;85    top: 254px;86    left: 0;87    right: 0;88    bottom: 0;89    padding-top: 24px;90    box-sizing: border-box;91  }92  .list {93    padding: 10px 0 0;94    box-sizing: border-box;95  }96  .list-item {97    margin: 28px 42px;98    background: #222222;99    border-radius: 44px;100    height: 150px;101    display: flex;102    align-items: center;103    color: #EDEDED;104    font-size: 44px;105    padding: 0 34px;106    box-sizing: border-box;107  }108  .list-item .text {109    flex: 1;110    line-height: 1.1;111  }112  .chevron {113    width: 70px;114    height: 70px;115  }116  .gesture-bar {117    position: absolute;118    bottom: 24px;119    left: 50%;120    transform: translateX(-50%);121    width: 420px;122    height: 12px;123    background: #E6E6E6;124    border-radius: 8px;125    opacity: 0.9;126  }127</style>128</head>129<body>130<div id="render-target">131  <!-- Status Bar -->132  <div class="status-bar">133    <div class="status-left">134      <div>10:22</div>135    </div>136    <div class="status-right">137      <!-- Simple status icons -->138      <svg width="30" height="30" viewBox="0 0 24 24" fill="#ffffff"><circle cx="12" cy="12" r="3"/></svg>139      <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2"><rect x="3" y="7" width="18" height="10" rx="2"/><path d="M21 10l-3 2 3 2"/></svg>140      <svg width="30" height="30" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 4l-4 8h8l-4 8z"/></svg>141      <svg width="40" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2"><path d="M6 18h12"/><path d="M8 18V8a4 4 0 0 1 8 0v10"/></svg>142    </div>143  </div>144 145  <!-- App Bar -->146  <div class="app-bar">147    <!-- Back -->148    <div class="icon-btn">149      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">150        <path d="M15 18l-6-6 6 Forced 6-6" />151      </svg>152    </div>153    <div class="app-title">Math Tests</div>154    <div class="spacer"></div>155    <div class="premium">PREMIUM</div>156    <!-- Share -->157    <div class="icon-btn">158      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">159        <circle cx="18" cy="5" r="3"></circle>160        <circle cx="6" cy="12" r="3"></circle>161        <circle cx="18" cy="19" r="3"></circle>162        <path d="M8.6 13.5l6.8 3.9M15.4 6.6L8.6 10.5"></path>163      </svg>164    </div>165    <!-- Search -->166    <div class="icon-btn">167      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">168        <circle cx="11" cy="11" r="7"></circle>169        <path d="M21 21l-4.3-4.3"></path>170      </svg>171    </div>172    <!-- More -->173    <div class="icon-btn">174      <svg width="40" height="40" viewBox="0 0 24 24" fill="#ffffff">175        <circle cx="12" cy="5" r="2"></circle>176        <circle cx="12" cy="12" r="2"></circle>177        <circle cx="12" cy="19" r="2"></circle>178      </svg>179    </div>180  </div>181 182  <!-- Content -->183  <div class="content">184    <div class="list">185      <div class="list-item">186        <div class="text">Roman numerals up to 10</div>187        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="#e3b518" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">188          <path d="M8 4l8 8-8 8"></path>189        </svg>190      </div>191 192      <div class="list-item">193        <div class="text">Roman numerals 10-20</div>194        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="#e3b518" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">195          <path d="M8 4l8 8-8 8"></path>196        </svg>197      </div>198 199      <div class="list-item">200        <div class="text">Roman numerals up to 100</div>201        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="#e3b518" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">202          <path d="M8 4l8 8-8 8"></path>203        </svg>204      </div>205 206      <div class="list-item">207        <div class="text">Roman numerals up to 1,000</div>208        <!-- Cart icon -->209        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="#c8da45" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">210          <circle cx="9" cy="20" r="1.8"></circle>211          <circle cx="17" cy="20" r="1.8"></circle>212          <path d="M5 6h2l1.2 7h8.7l1.4-6H7.3"></path>213        </svg>214      </div>215 216      <div class="list-item">217        <div class="text">Greek alphabet</div>218        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="#e3b518" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">219          <path d="M8 4l8 8-8 8"></path>220        </svg>221      </div>222    </div>223  </div>224 225  <!-- Gesture bar -->226  <div class="gesture-bar"></div>227</div>228</body>229</html>