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 - Quit Modal</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #EEE;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #0d0d0d;21  }22 23  /* Top app bar */24  .appbar {25    position: relative;26    height: 210px;27    background: #6e8d12; /* olive green */28    padding: 40px 36px 0 36px;29    box-sizing: border-box;30  }31  .appbar .row {32    height: 120px;33    display: flex;34    align-items: center;35    justify-content: space-between;36    color: #e7efc1;37  }38  .title {39    display: flex;40    align-items: center;41    gap: 22px;42    font-size: 48px;43    font-weight: 700;44    letter-spacing: 0.5px;45  }46  .title small {47    font-size: 40px;48    opacity: 0.9;49  }50  .actions {51    display: flex;52    align-items: center;53    gap: 34px;54  }55  .icon {56    width: 56px;57    height: 56px;58    display: inline-flex;59    align-items: center;60    justify-content: center;61    color: #e7efc1;62  }63  .status-strip {64    height: 18px;65    width: 100%;66    background: #576e0e;67    opacity: 0.4;68    border-top: 2px solid rgba(255,255,255,0.08);69    border-bottom: 2px solid rgba(0,0,0,0.25);70  }71 72  /* Info row below appbar */73  .info-row {74    display: flex;75    align-items: center;76    gap: 120px;77    padding: 22px 36px;78    color: #b6ff67;79    font-size: 38px;80    letter-spacing: 0.3px;81  }82  .info-item {83    display: flex;84    align-items: center;85    gap: 14px;86  }87  .circle {88    width: 38px;89    height: 38px;90    border: 3px solid #b6ff67;91    border-radius: 50%;92    opacity: 0.9;93  }94 95  /* Question card */96  .question-card {97    margin: 12px 24px 0 24px;98    height: 1160px;99    border-radius: 44px;100    border: 3px solid #5a5a5a;101    background: #131313;102    position: relative;103    padding: 22px;104    box-sizing: border-box;105  }106  .question-inner {107    width: 100%;108    height: 100%;109    border-radius: 36px;110    border: 2px solid rgba(255,255,255,0.05);111    display: flex;112    flex-direction: column;113    align-items: center;114    justify-content: flex-start;115    padding-top: 42px;116    box-sizing: border-box;117  }118  .question-label {119    color: #8b8b8b;120    font-size: 42px;121    margin-bottom: 120px;122  }123  .big-num {124    font-size: 150px;125    line-height: 1.1;126    color: #dcdcdc;127    text-align: center;128  }129  .underlined {130    display: inline-block;131    border-bottom: 4px solid #7e7e7e;132    padding-bottom: 10px;133  }134 135  /* Modal overlay */136  .overlay {137    position: absolute;138    left: 0;139    right: 0;140    top: 0;141    bottom: 0;142    background: rgba(0,0,0,0.35);143  }144  .modal-wrap {145    position: absolute;146    left: 50%;147    top: 58%;148    transform: translate(-50%, -50%);149    background: #b8f012; /* neon lime border background */150    padding: 22px;151    border-radius: 44px;152    width: 780px;153    box-shadow: 0 18px 40px rgba(0,0,0,0.5);154  }155  .modal {156    background: #222;157    border-radius: 36px;158    padding: 56px 48px 44px 48px;159    text-align: center;160    position: relative;161  }162  .modal h2 {163    margin: 0 0 46px 0;164    font-size: 64px;165    letter-spacing: 0.3px;166  }167  .modal-actions {168    display: flex;169    justify-content: center;170    gap: 60px;171  }172  .btn-pill {173    width: 260px;174    height: 110px;175    border-radius: 60px;176    background: #f07a0d;177    color: #fff;178    font-size: 46px;179    font-weight: 700;180    display: inline-flex;181    align-items: center;182    justify-content: center;183    box-shadow: inset 0 -6px 0 rgba(0,0,0,0.2);184  }185  .mascot {186    position: absolute;187    left: -30px;188    top: -150px;189    width: 240px;190    height: 240px;191    background: #E0E0E0;192    border: 1px solid #BDBDBD;193    border-radius: 12px;194    display: flex;195    align-items: center;196    justify-content: center;197    color: #757575;198    transform: rotate(-2deg);199  }200 201  /* Bottom answer buttons */202  .answers {203    position: absolute;204    bottom: 150px;205    left: 0;206    right: 0;207    display: flex;208    justify-content: space-between;209    padding: 0 36px;210    box-sizing: border-box;211    gap: 26px;212  }213  .answer {214    flex: 1;215    height: 140px;216    background: #6a3b12;217    border-radius: 30px;218    display: flex;219    align-items: center;220    justify-content: center;221    color: #8d8d8d;222    font-size: 58px;223    font-weight: 700;224  }225 226  /* Bottom handle */227  .handle {228    position: absolute;229    bottom: 64px;230    left: 50%;231    transform: translateX(-50%);232    width: 320px;233    height: 10px;234    background: rgba(255,255,255,0.85);235    border-radius: 8px;236  }237</style>238</head>239<body>240<div id="render-target">241  <!-- Top App Bar -->242  <div class="appbar">243    <div class="row">244      <div class="title">245        <span class="icon" aria-label="Back">246          <svg viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">247            <path d="M15 18l-6-6 6-6"></path>248          </svg>249        </span>250        <span>Math Tests</span>251      </div>252      <div class="actions">253        <small>PREMIUM</small>254        <span class="icon" aria-label="Share">255          <svg viewBox="0 0 24 24" width="56" height="56" fill="currentColor">256            <path d="M18 8a3 3 0 1 0-2.83-3.99A3 3 0 0 0 18 8ZM6 14a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm12-4.5-10 5M8 15l10-5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>257          </svg>258        </span>259        <span class="icon" aria-label="Search">260          <svg viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="currentColor" stroke-width="2">261            <circle cx="11" cy="11" r="7"></circle>262            <path d="M20 20l-3.5-3.5"></path>263          </svg>264        </span>265        <span class="icon" aria-label="More">266          <svg viewBox="0 0 24 24" width="56" height="56" fill="currentColor">267            <circle cx="5" cy="12" r="2"></circle>268            <circle cx="12" cy="12" r="2"></circle>269            <circle cx="19" cy="12" r="2"></circle>270          </svg>271        </span>272      </div>273    </div>274    <div class="status-strip"></div>275  </div>276 277  <!-- Info row -->278  <div class="info-row">279    <div class="info-item">280      <div class="circle"></div>281      <span>00:46</span>282    </div>283    <div class="info-item">284      <div class="circle"></div>285      <span>0</span>286    </div>287    <div class="info-item">288      <div class="circle"></div>289      <span>0</span>290    </div>291  </div>292 293  <!-- Question Card -->294  <div class="question-card">295    <div class="question-inner">296      <div class="question-label">Question</div>297      <div class="big-num">53</div>298      <div class="big-num"><span class="underlined">+ 44</span></div>299    </div>300  </div>301 302  <!-- Modal Overlay -->303  <div class="overlay"></div>304  <div class="modal-wrap">305    <div class="modal">306      <div class="mascot">[IMG: Mascot Character]</div>307      <h2>Quit test?</h2>308      <div class="modal-actions">309        <div class="btn-pill">Cancel</div>310        <div class="btn-pill">OK</div>311      </div>312    </div>313  </div>314 315  <!-- Bottom answers -->316  <div class="answers">317    <div class="answer">77</div>318    <div class="answer">97</div>319    <div class="answer">87</div>320    <div class="answer">88</div>321  </div>322 323  <!-- Bottom handle -->324  <div class="handle"></div>325</div>326</body>327</html>