GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Math Tests - Roman numerals</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Georgia, "Times New Roman", serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#0f0f0f;11  }12  /* Top bars */13  .status-bar {14    position:absolute; left:0; top:0; width:100%; height:90px;15    background:#8BC34A; color:#1d1d1d;16    display:flex; align-items:center; padding:0 40px; font-size:32px; font-weight:600;17  }18  .status-icons { margin-left:auto; display:flex; align-items:center; gap:20px; }19  .icon-circle { width:28px; height:28px; border-radius:50%; border:3px solid #2e5f1b; }20  .icon-cloud { width:40px; height:24px; border-radius:14px; background:#d9f0c6; border:2px solid #2e5f1b; }21  .icon-battery { width:50px; height:26px; border:3px solid #2e5f1b; border-radius:6px; position:relative; }22  .icon-battery::after { content:""; position:absolute; right:-10px; top:8px; width:8px; height:10px; background:#2e5f1b; border-radius:2px; }23  .app-bar {24    position:absolute; left:0; top:90px; width:100%; height:140px;25    background:#8BC34A; display:flex; align-items:center; padding:0 30px; color:#2e5f1b;26  }27  .app-title { font-size:48px; color:#1f3c12; margin-left:20px; }28  .app-right { margin-left:auto; display:flex; align-items:center; gap:30px; }29  .premium { font-size:40px; font-weight:700; color:#2e5f1b; }30  .top-icon svg { width:50px; height:50px; fill:#2e5f1b; }31  /* Content */32  .content {33    position:absolute; left:0; top:230px; width:100%; height:2170px; padding:24px;34    box-sizing:border-box;35  }36  .card {37    width:1032px; margin:0 auto; background:#1f1f1f; border-radius:36px;38    box-shadow:0 8px 22px rgba(0,0,0,0.35); color:#fff; padding:48px;39  }40  .card h1 {41    margin:0 0 30px 0; font-size:76px; color:#d66822; letter-spacing:1px;42  }43  .card p { font-size:40px; line-height:1.36; color:#e9e9e9; margin:10px 0; }44  .table-wrap { margin-top:30px; }45  table.info {46    border-collapse:collapse; width:430px; font-size:40px; color:#fff;47  }48  table.info th {49    background:#6f8f2c; color:#ecf0d3; padding:16px 22px; border:4px solid #8ea846; font-weight:800;50  }51  table.info td {52    padding:16px 22px; border:4px solid #8ea846; background:#2a2a2a;53  }54  .list { margin-top:34px; font-size:44px; line-height:1.42; }55  .button-bar {56    position:absolute; left:0; bottom:120px; width:100%; display:flex; justify-content:center;57  }58  .cta {59    width:1000px; height:120px; background:#e07a26; color:#fff; font-size:48px; font-weight:800;60    border-radius:60px; display:flex; justify-content:center; align-items:center;61    box-shadow:0 8px 12px rgba(0,0,0,0.4);62  }63</style>64</head>65<body>66<div id="render-target">67  <!-- Status bar -->68  <div class="status-bar">69    <div>10:24</div>70    <div class="status-icons">71      <div class="icon-circle"></div>72      <div class="icon-circle"></div>73      <div class="icon-cloud"></div>74      <div class="icon-battery"></div>75    </div>76  </div>77 78  <!-- App bar -->79  <div class="app-bar">80    <div class="top-icon">81      <svg viewBox="0 0 48 48">82        <path d="M30 8 L14 24 L30 40" stroke="#2e5f1b" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>83      </svg>84    </div>85    <div class="app-title">Math Tests</div>86    <div class="app-right">87      <div class="premium">PREMIUM</div>88      <div class="top-icon">89        <svg viewBox="0 0 48 48">90          <circle cx="12" cy="12" r="6"></circle>91          <circle cx="36" cy="24" r="6"></circle>92          <circle cx="12" cy="36" r="6"></circle>93          <path d="M18 14 L30 22 M18 34 L30 26" stroke="#2e5f1b" stroke-width="5" fill="none" stroke-linecap="round"/>94        </svg>95      </div>96      <div class="top-icon">97        <svg viewBox="0 0 48 48">98          <circle cx="20" cy="20" r="14" stroke="#2e5f1b" stroke-width="5" fill="none"/>99          <path d="M32 32 L44 44" stroke="#2e5f1b" stroke-width="5" stroke-linecap="round"/>100        </svg>101      </div>102      <div class="top-icon">103        <svg viewBox="0 0 48 48">104          <circle cx="24" cy="10" r="4"></circle>105          <circle cx="24" cy="24" r="4"></circle>106          <circle cx="24" cy="38" r="4"></circle>107        </svg>108      </div>109    </div>110  </div>111 112  <!-- Content Card -->113  <div class="content">114    <div class="card">115      <h1>Roman numerals</h1>116      <p>This numeric system originated in ancient Rome. Numbers in this system are represented by combinations of letters from the Latin alphabet.</p>117      <p>They are based on the following seven symbols, each with a fixed integer value:</p>118 119      <div class="table-wrap">120        <table class="info">121          <tr>122            <th>Symbol</th>123            <th>Value</th>124          </tr>125          <tr><td style="font-weight:800;">I</td><td>1</td></tr>126          <tr><td style="font-weight:800;">V</td><td>5</td></tr>127          <tr><td style="font-weight:800;">X</td><td>10</td></tr>128          <tr><td style="font-weight:800;">L</td><td>50</td></tr>129          <tr><td style="font-weight:800;">C</td><td>100</td></tr>130          <tr><td style="font-weight:800;">D</td><td>500</td></tr>131          <tr><td style="font-weight:800;">M</td><td>1,000</td></tr>132        </table>133      </div>134 135      <div class="list">136        <div>Basic numbers look like this:</div>137        <div>1 - I</div>138        <div>2 - II</div>139        <div>3 - III</div>140        <div>4 - IV</div>141        <div>5 - V</div>142        <div>6 - VI</div>143        <div>7 - VII</div>144        <div>8 - VIII</div>145        <div>9 - IX</div>146        <div>10 - X</div>147        <div>15 - XV</div>148      </div>149    </div>150  </div>151 152  <!-- Bottom button -->153  <div class="button-bar">154    <div class="cta">Start test</div>155  </div>156</div>157</body>158</html>