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 - Roman numerals</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#000000;13    font-family: "Helvetica Neue", Arial, sans-serif;14    color:#ffffff;15  }16 17  /* Status bar */18  .status-bar {19    height:110px;20    background:#8FBF32;21    color:#fff;22    padding:0 36px;23    display:flex;24    align-items:center;25    font-size:38px;26    letter-spacing:1px;27  }28  .status-right {29    margin-left:auto;30    display:flex;31    gap:24px;32    align-items:center;33  }34  .sb-dot {35    width:18px; height:18px; background:#fff; border-radius:50%;36    opacity:.9;37  }38  .sb-rect {39    width:30px; height:22px; border:3px solid #fff; border-radius:4px;40  }41  .sb-pill {42    width:32px; height:18px; border-radius:10px; border:3px solid #fff;43  }44 45  /* App bar */46  .app-bar {47    height:150px;48    background:#8FBF32;49    display:flex;50    align-items:center;51    padding:0 30px;52    gap:26px;53    box-sizing:border-box;54  }55  .app-title {56    font-size:58px;57    font-weight:700;58  }59  .premium {60    margin-left:18px;61    font-size:40px;62    opacity:.95;63    letter-spacing:2px;64  }65  .app-actions {66    margin-left:auto;67    display:flex; align-items:center; gap:36px;68  }69  .icon {70    width:54px; height:54px; fill:#ffffff; opacity:.95;71  }72 73  /* Content card */74  .card {75    position:relative;76    margin:28px 24px 0 24px;77    background:#2b2b2b;78    border-radius:48px;79    padding:64px 56px 56px 56px;80    height:1720px;81    overflow:auto;82    box-sizing:border-box;83  }84  .heading {85    font-family: Georgia, "Times New Roman", serif;86    font-size:96px;87    line-height:1.05;88    color:#df7a2f;89    margin:0 0 30px 0;90    font-weight:700;91  }92  .lead, .para {93    font-family: Georgia, "Times New Roman", serif;94    font-size:48px;95    line-height:1.35;96    color:#e9e9e9;97    margin:22px 0;98  }99 100  /* Table */101  .roman-table {102    margin-top:36px;103    border-collapse:collapse;104    font-family: Georgia, "Times New Roman", serif;105    font-size:48px;106    color:#ffffff;107  }108  .roman-table th, .roman-table td {109    border:3px solid #d8d8d8;110    padding:16px 28px;111  }112  .roman-table th {113    background:#8FBF32;114    color:#ffffff;115    font-weight:800;116  }117  .list {118    margin-top:46px;119    font-family: Georgia, "Times New Roman", serif;120    font-size:48px;121    line-height:1.45;122    color:#eeeeee;123    white-space:pre-line;124  }125 126  /* Bottom button */127  .bottom-wrap {128    position:absolute;129    left:0; right:0; bottom:110px;130    display:flex; justify-content:center;131    pointer-events:none;132  }133  .cta {134    width:920px; height:140px;135    background:#e07e2f;136    border-radius:70px;137    display:flex; align-items:center; justify-content:center;138    font-size:52px; font-weight:800;139    color:#ffffff;140    pointer-events:auto;141    box-shadow:0 6px 0 rgba(0,0,0,0.25) inset;142  }143 144  /* Simple button press effect */145  .cta:active { transform:translateY(2px); }146 147  /* Back arrow icon styling inside a circle touch target (visual alignment only) */148  .back {149    width:64px; height:64px; display:flex; align-items:center; justify-content:center;150  }151</style>152</head>153<body>154<div id="render-target">155 156  <!-- Status bar -->157  <div class="status-bar">158    <div>10:23</div>159    <div class="status-right">160      <div class="sb-dot"></div>161      <div class="sb-rect"></div>162      <div class="sb-pill"></div>163      <div style="width:24px; height:24px; border:3px solid #fff; border-top:none; border-left:none; transform:rotate(45deg);"></div>164      <div style="width:20px; height:34px; border:3px solid #fff; border-radius:4px;"></div>165    </div>166  </div>167 168  <!-- App bar -->169  <div class="app-bar">170    <div class="back">171      <svg class="icon" viewBox="0 0 24 24">172        <path d="M15.5 19.5L8 12l7.5-7.5" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>173      </svg>174    </div>175    <div class="app-title">Math Tests</div>176    <div class="premium">PREMIUM</div>177    <div class="app-actions">178      <!-- share -->179      <svg class="icon" viewBox="0 0 24 24">180        <path d="M18 8a3 3 0 1 0-2.9-3.5L7.5 9a3 3 0 1 0 0 6l7.6 4.5A3 3 0 1 0 16 18" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>181      </svg>182      <!-- search -->183      <svg class="icon" viewBox="0 0 24 24">184        <circle cx="11" cy="11" r="6.5" stroke="#fff" stroke-width="2" fill="none"/>185        <path d="M20 20l-4.5-4.5" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>186      </svg>187      <!-- more -->188      <svg class="icon" viewBox="0 0 24 24">189        <circle cx="12" cy="5" r="2.2" fill="#fff"/>190        <circle cx="12" cy="12" r="2.2" fill="#fff"/>191        <circle cx="12" cy="19" r="2.2" fill="#fff"/>192      </svg>193    </div>194  </div>195 196  <!-- Content card -->197  <div class="card">198    <h1 class="heading">Roman numerals</h1>199    <p class="lead">200      This numeric system originated in ancient Rome. Numbers in this system are201      represented by combinations of letters from the Latin alphabet.202    </p>203    <p class="lead">204      They are based on the following seven symbols, each with a fixed integer value:205    </p>206 207    <table class="roman-table">208      <tr>209        <th>Symbol</th>210        <th>Value</th>211      </tr>212      <tr><td style="font-weight:800;">I</td><td>1</td></tr>213      <tr><td style="font-weight:800;">V</td><td>5</td></tr>214      <tr><td style="font-weight:800;">X</td><td>10</td></tr>215      <tr><td style="font-weight:800;">L</td><td>50</td></tr>216      <tr><td style="font-weight:800;">C</td><td>100</td></tr>217      <tr><td style="font-weight:800;">D</td><td>500</td></tr>218      <tr><td style="font-weight:800;">M</td><td>1,000</td></tr>219    </table>220 221    <div class="list">222Basic numbers look like this:2231 - I2242 - II2253 - III2264 - IV2275 - V2286 - VI2297 - VII2308 - VIII2319 - IX23210 - X23315 - XV23420 - XX23524 - XXIV23640 - XL23750 - L23860 - LX23990 - XC240100 - C241500 - D2421,000 - M243    </div>244  </div>245 246  <!-- Bottom button -->247  <div class="bottom-wrap">248    <div class="cta">Start test</div>249  </div>250 251</div>252</body>253</html>