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>Language Lesson UI</title>7<style>8  /* Reset and base */9  html, body { margin: 0; padding: 0; }10  body { background: transparent; }11  * { box-sizing: border-box; }12 13  /* Render target */14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #122126; /* dark teal/gray */20    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;21    color: #dfeff0;22  }23 24  /* Status bar (mock) */25  .status-bar {26    position: absolute;27    top: 0;28    left: 0;29    right: 0;30    height: 86px;31    padding: 18px 36px;32    display: flex;33    align-items: center;34    justify-content: space-between;35    color: #cfe3e6;36    font-size: 28px;37    opacity: 0.85;38  }39  .status-icons { display: flex; gap: 18px; align-items: center; }40  .dot { width: 10px; height: 10px; background:#cfe3e6; border-radius:50%; display:inline-block; }41 42  /* Header with progress */43  .top-area {44    position: absolute;45    top: 86px;46    left: 0;47    right: 0;48    padding: 28px 40px 12px 40px;49    display: flex;50    align-items: center;51    gap: 24px;52  }53  .close-btn {54    width: 60px; height: 60px; border-radius: 50%;55    display: flex; align-items: center; justify-content: center;56    cursor: default;57  }58  .close-btn svg { width: 28px; height: 28px; stroke: #8ea5a8; }59  .progress-track {60    flex: 1;61    height: 28px;62    background: #2a3c40;63    border-radius: 18px;64    position: relative;65    overflow: hidden;66  }67  .progress-fill {68    width: 42%;69    height: 100%;70    background: #87d63a;71    border-radius: 18px;72  }73 74  /* Content area */75  .content {76    position: absolute;77    top: 180px;78    left: 0;79    right: 0;80    padding: 10px 60px 0 60px;81  }82 83  /* Badge NEW WORD */84  .badge-row {85    display: flex;86    align-items: center;87    gap: 14px;88    margin: 16px 0 8px;89  }90  .badge-icon {91    width: 40px; height: 40px; border-radius: 50%;92    background: #7a43ff22;93    display: flex; align-items:center; justify-content:center;94  }95  .badge-icon svg { width: 22px; height: 22px; fill: #b077ff; opacity: 0.9; }96  .badge-text {97    color: #b077ff;98    font-weight: 700;99    letter-spacing: 0.5px;100    text-transform: uppercase;101    font-size: 30px;102  }103 104  .title {105    margin: 6px 0 26px 0;106    font-size: 64px;107    line-height: 1.1;108    font-weight: 800;109    color: #e7f3f5;110  }111 112  /* Audio + word */113  .audio-row {114    display: flex;115    align-items: center;116    gap: 22px;117    margin-bottom: 26px;118  }119  .audio-chip {120    width: 110px; height: 110px; border-radius: 28px;121    background: #41b4e6;122    display: flex; align-items: center; justify-content: center;123    box-shadow: inset 0 -6px 0 rgba(0,0,0,0.15);124  }125  .audio-chip svg { width: 46px; height: 46px; fill: #0b3a46; }126  .word {127    font-size: 50px;128    font-weight: 800;129    color: #c691ff;130    position: relative;131  }132  .word:after {133    content: "";134    position: absolute;135    left: 0; right: 0; bottom: -6px;136    height: 0;137    border-bottom: 4px dashed #c691ff;138  }139 140  /* Card grid */141  .card-grid {142    margin-top: 10px;143    display: grid;144    grid-template-columns: 1fr 1fr;145    gap: 46px;146  }147  .card {148    background: #172a2f;149    border: 3px solid #2a3f45;150    border-radius: 36px;151    padding: 34px;152    min-height: 600px;153    display: flex;154    flex-direction: column;155    justify-content: space-between;156  }157  .card.correct {158    border: 5px solid #87d63a;159    box-shadow: 0 0 0 2px #3c4f2b inset;160  }161  .card .img {162    width: 100%;163    height: 440px;164    background: #E0E0E0;165    border: 1px solid #BDBDBD;166    border-radius: 26px;167    display: flex;168    align-items: center;169    justify-content: center;170    color: #757575;171    font-size: 34px;172    text-align: center;173    padding: 10px;174  }175  .caption {176    text-align: center;177    font-size: 40px;178    letter-spacing: 0.5px;179    color: #c9d7d9;180  }181  .card.correct .caption { color: #87d63a; }182 183  /* Footer */184  .footer {185    position: absolute;186    left: 0; right: 0; bottom: 80px;187    background: #16282d;188    padding: 26px 40px 34px;189    border-top: 1px solid #22363b;190  }191  .result-row {192    display: flex;193    align-items: center;194    justify-content: space-between;195    padding: 24px 26px;196    border-radius: 22px;197    background: #20343a;198    margin-bottom: 26px;199  }200  .result-left {201    display: flex; align-items: center; gap: 18px;202    font-size: 44px; font-weight: 800; color: #87d63a;203  }204  .result-left .icon {205    width: 46px; height: 46px; border-radius: 50%;206    background: #2b472f; display:flex; align-items:center; justify-content:center;207  }208  .share {209    width: 54px; height: 54px; border-radius: 12px;210    background: #1d3035; display:flex; align-items:center; justify-content:center;211  }212  .share svg { width: 28px; height: 28px; stroke: #9bb6b9; }213 214  .continue-btn {215    margin-top: 18px;216    width: 100%;217    height: 120px;218    background: #9be22d;219    border: none;220    border-radius: 26px;221    font-size: 44px;222    font-weight: 900;223    color: #0d230f;224    letter-spacing: 3px;225    box-shadow: 0 10px 0 #6da71e;226  }227 228  /* Bottom handle */229  .handle {230    position: absolute;231    bottom: 20px;232    left: 50%;233    width: 300px; height: 10px;234    margin-left: -150px;235    background: #e6e6e6;236    border-radius: 8px;237    opacity: 0.85;238  }239</style>240</head>241<body>242<div id="render-target">243 244  <!-- Mock status bar -->245  <div class="status-bar">246    <div>6:13</div>247    <div class="status-icons">248      <span class="dot"></span><span class="dot"></span><span class="dot"></span>249      <span>94%</span>250    </div>251  </div>252 253  <!-- Top controls + progress -->254  <div class="top-area">255    <div class="close-btn" aria-hidden="true">256      <svg viewBox="0 0 24 24" fill="none">257        <path d="M6 6 L18 18 M18 6 L6 18" stroke-width="2" stroke-linecap="round"/>258      </svg>259    </div>260    <div class="progress-track">261      <div class="progress-fill"></div>262    </div>263  </div>264 265  <!-- Main content -->266  <div class="content">267    <div class="badge-row">268      <span class="badge-icon">269        <svg viewBox="0 0 24 24">270          <circle cx="12" cy="12" r="9"></circle>271          <circle cx="9" cy="9" r="1.6" fill="#122126"></circle>272          <circle cx="15" cy="9" r="1.6" fill="#122126"></circle>273          <circle cx="9" cy="15" r="1.6" fill="#122126"></circle>274          <circle cx="15" cy="15" r="1.6" fill="#122126"></circle>275        </svg>276      </span>277      <div class="badge-text">NEW WORD</div>278    </div>279 280    <div class="title">Select the correct image</div>281 282    <div class="audio-row">283      <div class="audio-chip" ari