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 Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F2F0F4;15  }16 17  /* Status bar (mock) */18  .status-bar {19    height: 110px;20    background: #000;21    color: #fff;22    display: flex;23    align-items: center;24    justify-content: space-between;25    padding: 0 36px;26    box-sizing: border-box;27    font-weight: 600;28    letter-spacing: 1px;29  }30  .status-icons {31    display: flex;32    gap: 22px;33    align-items: center;34    opacity: 0.9;35  }36  .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; display: inline-block; opacity: 0.9; }37 38  /* App bar */39  .app-bar {40    height: 150px;41    background: #FFFFFF;42    border-bottom: 1px solid #E5E1E8;43    display: flex;44    align-items: center;45    justify-content: center;46    position: relative;47    color: #7C6C8D;48    font-size: 46px;49    font-weight: 600;50  }51  .back-btn {52    position: absolute;53    left: 28px;54    top: 50%;55    transform: translateY(-50%);56    width: 100px;57    height: 100px;58    display: flex;59    align-items: center;60    justify-content: center;61  }62  .back-btn svg { width: 44px; height: 44px; stroke: #9A82AE; }63 64  /* Section title */65  .section-title {66    text-align: center;67    color: #333;68    font-size: 46px;69    font-weight: 600;70    padding: 36px 0 18px;71  }72 73  /* Card */74  .course-card {75    width: 1000px;76    margin: 0 auto;77    background: #FFFFFF;78    border-radius: 22px;79    box-shadow: 0 6px 16px rgba(0,0,0,0.1);80    overflow: hidden;81  }82  .course-header {83    position: relative;84    height: 360px;85    background: linear-gradient(180deg, #9B58DA 0%, #884FCF 100%);86    color: #fff;87  }88  .flag-badge {89    position: absolute;90    left: 30px;91    top: 36px;92    display: flex;93    align-items: center;94    gap: 16px;95  }96  .flag-box {97    width: 110px; height: 78px;98    background: #E0E0E0; border: 1px solid #BDBDBD;99    display: flex; align-items: center; justify-content: center;100    color: #757575; font-size: 26px; border-radius: 12px;101  }102  .course-title {103    position: absolute;104    left: 30px;105    top: 140px;106    font-size: 88px;107    font-weight: 700;108  }109  .gear-wrap {110    position: absolute;111    right: 26px;112    top: 24px;113    width: 104px; height: 104px;114    background: rgba(255,255,255,0.85);115    border-radius: 20px;116    display: flex; align-items: center; justify-content: center;117    box-shadow: 0 4px 8px rgba(0,0,0,0.12);118  }119  .gear-wrap svg { width: 54px; height: 54px; fill: #7C6C8D; }120 121  .header-illustration {122    position: absolute;123    right: 30px;124    bottom: 26px;125    width: 360px; height: 200px;126    background: #E0E0E0; border: 1px solid #BDBDBD;127    display: flex; align-items: center; justify-content: center;128    color: #757575; font-size: 26px; border-radius: 14px;129  }130 131  .progress-area {132    padding: 22px 30px 10px;133  }134  .progress-track {135    width: 100%;136    height: 14px;137    border-radius: 10px;138    background: #E6D8F7;139    position: relative;140    overflow: hidden;141  }142  .progress-bar {143    width: 8%;144    height: 100%;145    background: #FFFFFF66;146    border-radius: 10px;147  }148 149  /* Lessons list */150  .lessons { padding: 6px 0 12px; }151  .lesson-item {152    position: relative;153    display: flex;154    align-items: center;155    gap: 28px;156    padding: 26px 32px;157    height: 180px;158  }159  .hex {160    width: 118px; height: 118px;161    background: #F5A623;162    clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);163    display: grid; place-items: center;164    color: rgba(255,255,255,0.95); font-weight: 700;165  }166  .lesson-title {167    font-size: 50px; color: #333; font-weight: 600;168    flex: 1;169  }170  .chev {171    width: 40px; height: 40px;172  }173  .chev svg { width: 40px; height: 40px; stroke: #B9B3C0; }174  .divider {175    position: absolute; left: 180px; right: 26px; bottom: 0;176    height: 10px; background: #EEE; border-radius: 6px;177  }178 179  /* Spacer to push content above bottom bar */180  .spacer { height: 680px; }181 182  /* Bottom elements */183  .add-course-bar {184    position: absolute;185    left: 0; right: 0;186    bottom: 120px;187    height: 200px;188    background: #FFCC00;189    display: flex; align-items: center; justify-content: center;190    font-size: 56px; font-weight: 700; color: #2B2B2B;191    box-shadow: 0 -6px 14px rgba(0,0,0,0.1);192  }193  .add-course-bar .plus {194    margin-right: 18px;195    width: 54px; height: 54px; border-radius: 10px;196    display: inline-flex; align-items: center; justify-content: center;197  }198  .add-course-bar .plus svg { width: 44px; height: 44px; fill: #2B2B2B; }199 200  .system-bottom {201    position: absolute; left: 0; right: 0; bottom: 0;202    height: 120px; background: #000;203    display: flex; align-items: center; justify-content: center;204  }205  .home-handle {206    width: 260px; height: 10px; border-radius: 6px; background: #D7D7D7;207    opacity: 0.95;208  }209</style>210</head>211<body>212<div id="render-target">213 214  <!-- Status bar -->215  <div class="status-bar">216    <div>12:34</div>217    <div class="status-icons">218      <span class="dot"></span>219      <span class="dot"></span>220      <span class="dot"></span>221      <span class="dot"></span>222      <span style="width:28px;height:18px;border:2px solid #fff;border-radius:3px;display:inline-block;position:relative;">223        <span style="position:absolute;right:-8px;top:4px;width:4px;height:10px;background:#fff;"></span>224      </span>225    </div>226  </div>227 228  <!-- App bar -->229  <div class="app-bar">230    <div class="back-btn">231      <svg viewBox="0 0 24 24" fill="none">232        <path d="M15 18l-6-6 6-6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>233      </svg>234    </div>235    Courses236  </div>237 238  <div class="section-title">Active Course</div>239 240  <!-- Course card -->241  <div class="course-card">242    <div class="course-header">243      <div class="flag-badge">244        <div class="flag-box">[IMG: ES Flag]</div>245      </div>246      <div class="course-title">Spanish</div>247      <div class="gear-wrap">248        <svg viewBox="0 0 24 24">249          <path d="M12 8.8a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4zm9 3.2l-1.9-.6a7.7 7.7 0 0 0-.7-1.7l1.1-1.7-1.6-1.6-1.7 1.1a7.7 7.7 0 0 0-1.7-.7L14 2.8h-2L9.9 4.2a7.7 7.7 0 0 0-1.7.7L6.5 3.8 4.9 5.4l1.1 1.7c-.3.6-.5 1.1-.7 1.7L3.4 9.9v2l1.9.6c.2.6.4 1.2.7 1.7l-1.1 1.7 1.6 1.6 1.7-1.1c.5.3 1.1.5 1.7.7l.6 1.9h2l.6-1.9c.6-.2 1.2-.4 1.7-.7l1.7 1.1 1.6-1.6-1.1-1.7c.3-.5.5-1.1.7-1.7l1.9-.6v-2z"/>250        </svg>251      </div>252      <div class="header-illustration">[IMG: Flamenco Illustration]</div>253    </div>254 255    <div class="progress-area">256      <div class="progress-track">257        <div class="progress-bar"></div>258      </div>259    </div>260 261    <div class="lessons">262      <div class="lesson-item">263        <div class="hex">•</div>264        <div class="lesson-title">Alphabet</div>265        <div class="chev">266          <svg viewBox="0 0 24 24" fill="none">267            <path d="M9 18l6-6-6-6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>268          </svg>269        </div>270        <div class="divider"></div>271      </div>272 273      <div class="lesson-item">274        <div class="hex">⋯</div>275        <div class="lesson-title">Basic Words: 1</div>276        <div class="chev">277          <svg viewBox="0 0 24 24" fill="none">278            <path d="M9 18l6-6-6-6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>279          </svg>280        </div>281        <div class="divider"></div>282      </div>283 284      <div class="lesson-item">285        <div class="hex">⋯</div>286        <div class="lesson-title">Basic Sentences: 1</div>287        <div class="chev">288          <svg viewBox="0 0 24 24" fill="none">289            <path d="M9 18l6-6-6-6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>290          </svg>291        </div>292        <div class="divider"></div>293      </div>294    </div>295  </div>296 297  <div class="spacer"></div>298 299  <!-- Bottom bar and system area -->300  <div class="add-course-bar">301    <span class="plus">302      <svg viewBox="0 0 24 24">303        <path d="M11 5h2v14h-2zM5 11h14v2H5z"/>304      </svg>305    </span>306    Add Course307  </div>308 309  <div class="system-bottom">310    <div class="home-handle"></div>311  </div>312</div>313</body>314</html>