GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Math Tests - Roman Numeral</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0e0e0e;13  }14 15  /* Header */16  .top-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 190px;22    background: #8fb33a;23    color: #fff;24  }25  .status-line {26    height: 70px;27    display: flex;28    align-items: center;29    padding: 0 30px;30    font-size: 36px;31    letter-spacing: 1px;32    color: #ffffff;33    opacity: 0.95;34  }35  .status-line .right-icons {36    margin-left: auto;37    display: flex;38    gap: 22px;39  }40  .header-main {41    height: 120px;42    display: flex;43    align-items: center;44    padding: 0 30px;45  }46  .back-btn {47    width: 70px;48    height: 70px;49    border-radius: 50%;50    display: flex;51    align-items: center;52    justify-content: center;53    margin-right: 10px;54  }55  .header-title {56    font-size: 58px;57    font-weight: 700;58    margin-left: 10px;59    color: #fff;60  }61  .header-premium {62    font-size: 46px;63    margin-left: 40px;64    color: #f5ffbf;65    letter-spacing: 1px;66  }67  .header-actions {68    margin-left: auto;69    display: flex;70    gap: 36px;71    padding-right: 28px;72  }73  .icon-btn svg { width: 52px; height: 52px; fill: #ffffff; }74 75  /* Main area */76  .content {77    position: absolute;78    top: 190px;79    left: 0;80    width: 1080px;81    height: 2210px;82    background: #0d0d0d;83    color: #fff;84  }85  .mini-status {86    display: flex;87    align-items: center;88    justify-content: space-between;89    padding: 26px 40px 10px 40px;90  }91  .mini-block {92    display: flex;93    align-items: center;94    gap: 16px;95    color: #b6ff71;96    font-size: 40px;97  }98  .mini-icon {99    width: 54px;100    height: 54px;101  }102 103  .card {104    width: 1030px;105    margin: 22px auto;106    border: 3px solid #ffffff;107    border-radius: 32px;108    background: #262626;109    color: #fff;110    box-sizing: border-box;111  }112 113  .card.question {114    height: 1200px;115    padding: 26px 28px;116  }117  .card-title {118    text-align: center;119    font-size: 46px;120    margin-top: 6px;121    color: #ffffff;122  }123  .card-subtitle {124    text-align: center;125    margin-top: 18px;126    font-size: 38px;127    color: #a9d66a;128    font-style: italic;129  }130  .roman {131    width: 100%;132    height: 950px;133    display: flex;134    align-items: center;135    justify-content: center;136    font-size: 170px;137    letter-spacing: 4px;138    color: #ffffff;139  }140 141  .card.answer {142    height: 530px;143    padding: 20px 28px;144  }145  .answer-title {146    font-size: 42px;147    color: #ffffff;148    margin: 10px 0 18px 20px;149  }150  .answer-area {151    height: 420px;152    margin: 0 12px 12px 12px;153    border-radius: 22px;154    background: #2a2a2a;155    border: 1px solid #3b3b3b;156    position: relative;157  }158  .answer-tools {159    position: absolute;160    right: 24px;161    top: -8px;162    display: flex;163    gap: 18px;164  }165  .tool-btn {166    width: 86px;167    height: 86px;168    border-radius: 50%;169    background: #f0b93b;170    display: flex;171    align-items: center;172    justify-content: center;173  }174  .tool-btn.bug { background: #f07b3b; }175  .tool-btn svg { width: 50px; height: 50px; fill: #2b2b2b; }176 177  /* Options row */178  .options-bar {179    position: absolute;180    bottom: 30px;181    left: 0;182    width: 1080px;183    display: flex;184    justify-content: space-between;185    padding: 0 40px;186    box-sizing: border-box;187  }188  .opt {189    width: 180px;190    height: 130px;191    background: #e1782f;192    color: #fff;193    border-radius: 28px;194    display: flex;195    align-items: center;196    justify-content: center;197    font-size: 56px;198    font-weight: 700;199    box-shadow: inset 0 -6px 0 rgba(0,0,0,0.15);200  }201</style>202</head>203<body>204<div id="render-target">205 206  <!-- Header -->207  <div class="top-bar">208    <div class="status-line">209      <div>10:25</div>210      <div class="right-icons">211        <!-- simple placeholders resembling status icons -->212        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="rgba(255,255,255,0.4)"/></svg>213        <svg viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2" fill="rgba(255,255,255,0.6)"/></svg>214        <svg viewBox="0 0 24 24"><rect x="6" y="5" width="12" height="14" rx="2" fill="rgba(255,255,255,0.9)"/></svg>215      </div>216    </div>217    <div class="header-main">218      <div class="back-btn">219        <svg viewBox="0 0 24 24">220          <path d="M15 6L9 12l6 6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>221        </svg>222      </div>223      <div class="header-title">Math Tests</div>224      <div class="header-premium">PREMIUM</div>225      <div class="header-actions">226        <div class="icon-btn">227          <svg viewBox="0 0 24 24"><path d="M18 8l-6-6v4H6v4h6v4zM6 18h12v2H6z"/></svg>228        </div>229        <div class="icon-btn">230          <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"/><path d="M15 15l5 5" stroke="#fff" stroke-width="2"/></svg>231        </div>232        <div class="icon-btn">233          <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>234        </div>235      </div>236    </div>237  </div>238 239  <!-- Main content -->240  <div class="content">241 242    <!-- Mini status row -->243    <div class="mini-status">244      <div class="mini-block">245        <svg class="mini-icon" viewBox="0 0 24 24">246          <circle cx="12" cy="12" r="10" stroke="#b6ff71" stroke-width="2" fill="none"/>247          <path d="M12 6v6l4 2" stroke="#b6ff71" stroke-width="2" fill="none" stroke-linecap="round"/>248        </svg>249        <span>00:02</span>250      </div>251      <div class="mini-block">252        <svg class="mini-icon" viewBox="0 0 24 24">253          <circle cx="12" cy="12" r="10" stroke="#b6ff71" stroke-width="2" fill="none"/>254          <path d="M7 12l3 3 7-7" stroke="#b6ff71" stroke-width="2" fill="none" stroke-linecap="round"/>255        </svg>256        <span>0</span>257      </div>258      <div class="mini-block">259        <svg class="mini-icon" viewBox="0 0 24 24">260          <circle cx="12" cy="12" r="10" stroke="#b6ff71" stroke-width="2" fill="none"/>261          <path d="M8 8l8 8M16 8l-8 8" stroke="#b6ff71" stroke-width="2" fill="none" stroke-linecap="round"/>262        </svg>263        <span>0</span>264      </div>265    </div>266 267    <!-- Question card -->268    <div class="card question">269      <div class="card-title">Question</div>270      <div class="card-subtitle">Choose what number represents this Roman numeral:</div>271      <div class="roman">V ⇒ ?</div>272    </div>273 274    <!-- Answer card -->275    <div class="card answer">276      <div class="answer-title">Correct answer</div>277      <div class="answer-area">278        <div class="answer-tools">279          <div class="tool-btn">280            <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.82 1.82 3.75 3.75 1.82-1.82z"/></svg>281          </div>282          <div class="tool-btn bug">283            <svg viewBox="0 0 24 24"><path d="M11 5h2v2h-2zM7 9h10v9H7z"/><path d="M4 12h4M16 12h4M4 16h4M16 16h4" stroke="#2b2b2b" stroke-width="2"/></svg>284          </div>285        </div>286      </div>287    </div>288 289    <!-- Options -->290    <div class="options-bar">291      <div class="opt">1</div>292      <div class="opt">2</div>293      <div class="opt">4</div>294      <div class="opt">5</div>295      <div class="opt">10</div>296    </div>297 298  </div>299</div>300</body>301</html>