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 Tests UI</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: #000000;15    font-family: "Segoe UI", Arial, Helvetica, sans-serif;16    color: #FFFFFF;17  }18 19  /* Top app bar */20  .toolbar {21    position: relative;22    height: 180px;23    background: #A6CF00; /* lime green */24    display: flex;25    align-items: center;26    padding: 0 28px;27    box-sizing: border-box;28  }29  .toolbar .title {30    font-size: 48px;31    font-weight: 600;32    margin-left: 18px;33  }34  .toolbar .premium {35    margin-left: 24px;36    font-size: 42px;37    font-weight: 700;38    opacity: 0.95;39  }40  .toolbar .right-icons {41    margin-left: auto;42    display: flex;43    align-items: center;44    gap: 28px;45  }46  .icon {47    width: 54px;48    height: 54px;49    display: inline-block;50  }51 52  /* Score bar under toolbar */53  .scorebar {54    height: 90px;55    border-top: 6px solid #A6CF00;56    display: flex;57    align-items: center;58    padding: 0 26px;59    box-sizing: border-box;60    gap: 60px;61  }62  .score-item {63    display: flex;64    align-items: center;65    gap: 12px;66    color: #C8FFC8;67    font-size: 40px;68  }69  .score-item .small {70    color: #A0FFA0;71    font-size: 36px;72  }73 74  /* Cards area */75  .content {76    padding: 18px 26px 0 26px;77    box-sizing: border-box;78  }79  .card {80    background: #2E2E2E;81    border: 3px solid #D9D9D9;82    border-radius: 34px;83    margin-bottom: 22px;84    position: relative;85    overflow: hidden;86  }87  .card-header {88    position: absolute;89    top: 14px;90    left: 0;91    width: 100%;92    text-align: center;93    color: #CCCCCC;94    font-size: 36px;95    letter-spacing: 0.5px;96  }97 98  .question-card {99    height: 980px;100    display: flex;101    align-items: center;102    justify-content: center;103  }104  .equation {105    text-align: center;106    line-height: 1.3;107  }108  .equation .top {109    font-size: 130px;110    font-weight: 500;111  }112  .equation .bottom {113    font-size: 130px;114    font-weight: 500;115    display: inline-block;116    border-bottom: 6px solid #FFFFFF;117    padding-bottom: 6px;118  }119  .equation .op {120    font-size: 120px;121    margin-right: 12px;122    font-weight: 600;123  }124 125  .answer-card {126    height: 650px;127    padding: 24px;128    box-sizing: border-box;129  }130  .answer-row {131    position: absolute;132    right: 24px;133    top: 24px;134    display: flex;135    gap: 20px;136  }137  .round-btn {138    width: 88px;139    height: 88px;140    border-radius: 50%;141    display: flex;142    align-items: center;143    justify-content: center;144    box-shadow: 0 6px 0 rgba(0,0,0,0.25) inset;145  }146  .round-btn.yellow { background: #F3B300; }147  .round-btn.light { background: #ECECEC; }148 149  .mini-img {150    width: 96px;151    height: 96px;152    background: #E0E0E0;153    border: 1px solid #BDBDBD;154    color: #757575;155    border-radius: 10px;156    display: flex;157    align-items: center;158    justify-content: center;159    position: absolute;160    left: 24px;161    top: 60px;162    font-size: 22px;163  }164  .answer-title {165    position: absolute;166    top: 18px;167    left: 0;168    width: 100%;169    text-align: center;170    color: #CCCCCC;171    font-size: 36px;172  }173 174  /* Bottom answer choices */175  .answers {176    position: absolute;177    bottom: 160px;178    left: 0;179    width: 100%;180    padding: 0 30px;181    box-sizing: border-box;182    display: flex;183    gap: 30px;184    justify-content: space-between;185  }186  .choice {187    flex: 1;188    background: #F57C00;189    height: 170px;190    border-radius: 34px;191    display: flex;192    align-items: center;193    justify-content: center;194    color: #FFFFFF;195    font-size: 64px;196    font-weight: 700;197    box-shadow: 0 6px 0 rgba(0,0,0,0.45) inset;198  }199 200  /* Gesture bar indicator */201  .gesture {202    position: absolute;203    bottom: 80px;204    left: 50%;205    transform: translateX(-50%);206    width: 360px;207    height: 12px;208    border-radius: 8px;209    background: #AFAFAF;210    opacity: 0.8;211  }212</style>213</head>214<body>215<div id="render-target">216 217  <!-- Top toolbar -->218  <div class="toolbar">219    <!-- Back arrow -->220    <svg class="icon" viewBox="0 0 24 24">221      <path d="M14 4 L6 12 L14 20" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round" />222      <path d="M7 12 H22" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round" />223    </svg>224    <div class="title">Math Tests</div>225    <div class="premium">PREMIUM</div>226 227    <div class="right-icons">228      <!-- Share -->229      <svg class="icon" viewBox="0 0 24 24">230        <circle cx="6" cy="12" r="2.4" fill="#ffffff"/>231        <circle cx="16" cy="6" r="2.4" fill="#ffffff"/>232        <circle cx="18" cy="18" r="2.4" fill="#ffffff"/>233        <path d="M7.8 11.2 L14 7.2 M7.8 12.8 L16.8 17" stroke="#ffffff" stroke-width="2" fill="none"/>234      </svg>235      <!-- Search -->236      <svg class="icon" viewBox="0 0 24 24">237        <circle cx="10" cy="10" r="6" stroke="#ffffff" stroke-width="2.5" fill="none"/>238        <path d="M14.5 14.5 L21 21" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round"/>239      </svg>240      <!-- More (vertical dots) -->241      <svg class="icon" viewBox="0 0 24 24">242        <circle cx="12" cy="5" r="2.2" fill="#ffffff"/>243        <circle cx="12" cy="12" r="2.2" fill="#ffffff"/>244        <circle cx="12" cy="19" r="2.2" fill="#ffffff"/>245      </svg>246    </div>247  </div>248 249  <!-- Score/Status bar -->250  <div class="scorebar">251    <div class="score-item">252      <!-- Stopwatch icon -->253      <svg width="40" height="40" viewBox="0 0 24 24">254        <circle cx="12" cy="13" r="8" stroke="#A6CF00" stroke-width="2.2" fill="none"/>255        <path d="M12 9 L12 13 L16 13" stroke="#A6CF00" stroke-width="2.2" fill="none" stroke-linecap="round"/>256        <rect x="9" y="2" width="6" height="3" rx="1.2" fill="#A6CF00"></rect>257      </svg>258      <span class="small">00:12</span>259    </div>260    <div class="score-item">261      <!-- Check icon -->262      <svg width="40" height="40" viewBox="0 0 24 24">263        <circle cx="12" cy="12" r="9" stroke="#A6CF00" stroke-width="2.2" fill="none"/>264        <path d="M7 12 L10.5 15.5 L17 9" stroke="#A6CF00" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>265      </svg>266      <span>0</span>267    </div>268    <div class="score-item">269      <!-- Check icon (again as in screenshot green) -->270      <svg width="40" height="40" viewBox="0 0 24 24">271        <circle cx="12" cy="12" r="9" stroke="#A6CF00" stroke-width="2.2" fill="none"/>272        <path d="M7 12 L10.5 15.5 L17 9" stroke="#A6CF00" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>273      </svg>274      <span>0</span>275    </div>276  </div>277 278  <div class="content">279    <!-- Question card -->280    <div class="card question-card">281      <div class="card-header">Question</div>282      <div class="equation">283        <div class="top">53</div>284        <div><span class="op">+</span><span class="bottom">44</span></div>285      </div>286    </div>287 288    <!-- Correct answer card -->289    <div class="card answer-card">290      <div class="answer-title">Correct answer</div>291      <div class="mini-img">[IMG: Books]</div>292 293      <div class="answer-row">294        <div class="round-btn yellow">295          <!-- Pencil icon -->296          <svg width="42" height="42" viewBox="0 0 24 24">297            <path d="M3 21 L4 16 L15 5 L19 9 L8 20 Z" fill="none" stroke="#1A1A1A" stroke-width="2" stroke-linejoin="round"/>298            <path d="M13 7 L17 11" stroke="#1A1A1A" stroke-width="2"/>299          </svg>300        </div>301        <div class="round-btn light">302          <!-- Bug/simple asterisk icon -->303          <svg width="42" height="42" viewBox="0 0 24 24">304            <circle cx="12" cy="12" r="7" stroke="#FF6700" stroke-width="2" fill="none"/>305            <path d="M12 6 V18 M6 12 H18 M8 8 L16 16 M16 8 L8 16" stroke="#FF6700" stroke-width="2"/>306          </svg>307        </div>308      </div>309    </div>310  </div>311 312  <!-- Bottom answer choices -->313  <div class="answers">314    <div class="choice">77</div>315    <div class="choice">97</div>316    <div class="choice">87</div>317    <div class="choice">88</div>318  </div>319 320  <div class="gesture"></div>321</div>322</body>323</html>