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>Courses UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F1F1F4;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0; right: 0;22    height: 120px;23    background: #000;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 40px;28    font-size: 42px;29  }30  .status-icons {31    margin-left: auto;32    display: flex;33    align-items: center;34    gap: 26px;35    opacity: 0.9;36  }37  .dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; display: inline-block; opacity: 0.9; }38 39  /* Top app bar */40  .app-bar {41    position: absolute;42    top: 120px;43    left: 0; right: 0;44    height: 138px;45    background: #FFFFFF;46    border-bottom: 1px solid #E3E3E7;47    display: flex;48    align-items: center;49    justify-content: center;50    color: #6A5D6F;51    font-weight: 600;52    font-size: 56px;53  }54  .app-bar .left,55  .app-bar .right {56    position: absolute;57    top: 0;58    height: 100%;59    display: flex;60    align-items: center;61    padding: 0 36px;62    color: #9A8FA1;63  }64  .app-bar .left { left: 0; }65  .app-bar .right { right: 0; }66 67  /* Main scroll area */68  .content {69    position: absolute;70    top: 258px; /* 120 + 138 */71    bottom: 120px; /* gesture area */72    left: 0; right: 0;73    overflow-y: auto;74    padding: 32px 36px 32px 36px;75  }76 77  .section-title {78    text-align: center;79    color: #5F5864;80    font-size: 52px;81    font-weight: 600;82    margin: 18px 0 28px;83  }84 85  /* Course card */86  .course-card {87    background: #FFFFFF;88    border-radius: 24px;89    box-shadow: 0 6px 18px rgba(0,0,0,0.1);90    overflow: hidden;91    margin-bottom: 36px;92  }93  .course-header {94    position: relative;95    height: 360px;96    display: flex;97    align-items: center;98    padding: 28px 28px;99    color: #fff;100    border-top-left-radius: 24px;101    border-top-right-radius: 24px;102  }103  .course-header.yellow { background: linear-gradient(0deg, #F6A400, #FFBB19); }104  .course-header.purple { background: linear-gradient(0deg, #7B3FB5, #A566EE); }105 106  .flag-badge {107    background: #222;108    color: #fff;109    padding: 10px 16px;110    border-radius: 14px;111    font-size: 28px;112    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.4);113    margin-right: 18px;114  }115  .course-title {116    font-size: 72px;117    font-weight: 700;118    letter-spacing: -0.5px;119    line-height: 1.1;120  }121  .header-right-illustration {122    position: absolute;123    right: 20px;124    bottom: 20px;125    width: 380px;126    height: 300px;127    background: #E0E0E0;128    border: 1px solid #BDBDBD;129    border-radius: 16px;130    display: flex;131    align-items: center;132    justify-content: center;133    color: #757575;134    text-align: center;135    font-size: 28px;136  }137  .corner-gear {138    position: absolute;139    right: 24px;140    top: 24px;141    width: 72px; height: 72px;142    background: rgba(255,255,255,0.9);143    border-radius: 18px;144    display: flex; align-items: center; justify-content: center;145    color: #8E8193;146    box-shadow: 0 2px 8px rgba(0,0,0,0.15);147  }148  .progress-row {149    position: absolute;150    left: 28px; right: 28px;151    bottom: 20px;152    display: flex;153    align-items: center;154    gap: 14px;155    color: rgba(255,255,255,0.95);156    font-size: 36px;157  }158  .progress-bar {159    flex: 1;160    height: 10px;161    background: rgba(255,255,255,0.6);162    border-radius: 8px;163  }164 165  .module-list { padding: 16px 0; }166  .module-item {167    display: flex;168    align-items: center;169    padding: 28px 22px 28px 26px;170    border-bottom: 2px solid #ECEDEF;171  }172  .module-item:last-child { border-bottom: none; }173  .hex {174    width: 92px;175    height: 92px;176    background: #F39C12;177    border-radius: 18px;178    margin-right: 26px;179    box-shadow: inset 0 -6px 0 rgba(0,0,0,0.06);180  }181  .module-title {182    font-size: 46px;183    color: #4F4A54;184    flex: 1;185  }186  .chev {187    width: 44px; height: 44px;188    color: #B6AEBB;189  }190 191  .hint {192    color: #1E1E1F;193    font-size: 46px;194    margin: 28px 10px 18px;195  }196 197  .add-course {198    margin-top: 24px;199    background: #FFC916;200    height: 160px;201    border-radius: 14px;202    display: flex;203    align-items: center;204    justify-content: center;205    font-size: 56px;206    color: #1F1B1E;207    font-weight: 600;208    letter-spacing: 0.3px;209    box-shadow: 0 8px 18px rgba(0,0,0,0.1);210  }211 212  /* Gesture area */213  .gesture-area {214    position: absolute;215    left: 0; right: 0; bottom: 0;216    height: 120px;217    background: #000;218    display: flex;219    align-items: center;220    justify-content: center;221  }222  .gesture-pill {223    width: 300px; height: 14px; background: #DCDDE0; border-radius: 10px;224    opacity: 0.9;225  }226 227  /* Small utility */228  .row { display: flex; align-items: center; }229  .muted { opacity: .9; }230</style>231</head>232<body>233<div id="render-target">234 235  <!-- Status Bar -->236  <div class="status-bar">237    <div>12:37</div>238    <div class="status-icons">239      <span class="dot"></span><span class="dot"></span><span class="dot"></span>240      <span style="width:28px;height:28px;border:2px solid #fff;border-radius:50%;display:inline-block;"></span>241      <span style="width:34px;height:20px;border:2px solid #fff;border-radius:4px;display:inline-block;position:relative;">242        <span style="position:absolute;right:2px;top:3px;width:6px;height:14px;background:#fff;"></span>243      </span>244    </div>245  </div>246 247  <!-- App Bar -->248  <div class="app-bar">249    <div class="left">250      <svg width="64" height="64" viewBox="0 0 48 48">251        <path d="M28 8 L16 24 L28 40" stroke="#9A8FA1" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>252      </svg>253    </div>254    <div>Courses</div>255    <div class="right">256      <svg width="64" height="64" viewBox="0 0 48 48">257        <circle cx="24" cy="24" r="18" stroke="#9A8FA1" stroke-width="4" fill="none"></circle>258        <path d="M14 24 H34" stroke="#9A8FA1" stroke-width="4" stroke-linecap="round"></path>259      </svg>260    </div>261  </div>262 263  <!-- Content -->264  <div class="content">265    <div class="section-title">Active Course</div>266 267    <!-- German Card -->268    <div class="course-card">269      <div class="course-header yellow">270        <div class="flag-badge">DE</div>271        <div class="course-title">German</div>272 273        <div class="corner-gear">274          <svg width="40" height="40" viewBox="0 0 24 24">275            <path d="M12 8a4 4 0 100 8 4 4 0 000-8zm9 4l-2.1.7c-.1.4-.3.8-.5 1.1l1 2-2 2-2-1c-.4.2-.8.4-1.2.5L12 21l-2.1-.7c-.4-.1-.8-.3-1.1-.5l-2 1-2-2 1-2c-.2-.4-.4-.8-.5-1.2L3 12l.7-2.1c.1-.4.3-.8.5-1.1l-1-2 2-2 2 1c.4-.2.8-.4 1.2-.5L12 3l2.1.7c.4.1.8.3 1.1.5l2-1 2 2-1 2c.2.4.4.8.5 1.2L21 12z" fill="#8E8193"></path>276          </svg>277        </div>278 279        <div class="header-right-illustration">[IMG: German Illustration]</div>280 281        <div class="progress-row">282          <div style="display:flex; align-items:center; gap:10px;">283            <span>0</span>284            <span style="font-size: 34px;">🐝</span>285          </div>286          <div class="progress-bar"></div>287          <div style="opacity:.9;">🏆</div>288        </div>289      </div>290 291      <div class="module-list">292        <div class="module-item">293          <div class="hex"></div>294          <div class="module-title">Alphabet</div>295          <svg class="chev" viewBox="0 0 24 24">296            <path d="M9 6l6 6-6 6" stroke="currentColor" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>297          </svg>298        </div>299        <div class="module-item">300          <div class="hex" style="background:#F39C12;"></div>301          <div class="module-title">Basic Words: 1</div>302          <svg class="chev" viewBox="0 0 24 24">303            <path d="M9 6l6 6-6 6" stroke="currentColor" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>304          </svg>305        </div>306        <div class="module-item">307          <div class="hex" style="background:#F39C12;"></div>308          <div class="module-title">Basic Sentences: 1</div>309          <svg class="chev" viewBox="0 0 24 24">310            <path d="M9 6l6 6-6 6" stroke="currentColor" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>311          </svg>312        </div>313      </div>314    </div>315 316    <div class="hint">Tap on a card to choose the active course</div>317 318    <!-- Spanish Card -->319    <div class="course-card">320      <div class="course-header purple">321        <div class="flag-badge" style="background:#7A1636;">ES</div>322        <div class="course-title">Spanish</div>323 324        <div class="header-right-illustration">[IMG: Spanish Illustration]</div>325 326        <div class="progress-row">327          <div style="display:flex; align-items:center; gap:10px;">328            <span>0</span>329            <span style="font-size: 34px;">🐝</span>330          </div>331          <div class="progress-bar" style="background: rgba(255,255,255,0.6);"></div>332          <div style="opacity:.9;">🏆</div>333        </div>334      </div>335    </div>336 337    <div class="add-course">338      <span style="font-size: 64px; margin-right: 18px;">+</span> Add Course339    </div>340 341  </div>342 343  <!-- Gesture area -->344  <div class="gesture-area">345    <div class="gesture-pill"></div>346  </div>347</div>348</body>349</html>