GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Lesson Complete UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0F1B20; /* deep dark teal */13    color: #FFFFFF;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 22px;20    left: 28px;21    right: 28px;22    height: 60px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #E7F0F5;27    font-size: 42px;28    letter-spacing: 1px;29    opacity: 0.95;30  }31  .status-right {32    display: flex;33    align-items: center;34    gap: 26px;35    font-size: 38px;36  }37  .icon { display: inline-flex; align-items: center; justify-content: center; }38  .icon svg { display: block; }39 40  /* Decorative sparkle top-right */41  .sparkle {42    position: absolute;43    top: 165px;44    right: 120px;45    width: 115px;46    height: 115px;47  }48  .sparkle span {49    position: absolute;50    left: 50%; top: 50%;51    width: 8px; height: 36px;52    background: #9A7BFF;53    transform-origin: center 90%;54    border-radius: 4px;55  }56  .sparkle span:nth-child(1){ transform: translate(-50%,-50%) rotate(0deg); background:#9A7BFF;}57  .sparkle span:nth-child(2){ transform: translate(-50%,-50%) rotate(45deg); background:#7CC7FF;}58  .sparkle span:nth-child(3){ transform: translate(-50%,-50%) rotate(90deg); background:#B388FF;}59  .sparkle span:nth-child(4){ transform: translate(-50%,-50%) rotate(135deg); background:#7CC7FF;}60 61  /* Illustration placeholder */62  .illustration {63    width: 560px;64    height: 560px;65    margin: 520px auto 40px auto;66    background: #E0E0E0;67    border: 1px solid #BDBDBD;68    border-radius: 24px;69    color: #555;70    display: flex;71    align-items: center;72    justify-content: center;73    text-align: center;74    line-height: 1.3;75    font-weight: 600;76  }77 78  /* Title */79  .title {80    text-align: center;81    font-size: 96px;82    font-weight: 800;83    color: #F5C84A;84    margin-top: 60px;85    letter-spacing: 1px;86  }87 88  /* Stats cards row */89  .stats-row {90    width: 100%;91    max-width: 980px;92    margin: 60px auto 0 auto;93    display: flex;94    justify-content: space-between;95    gap: 28px;96  }97  .card {98    flex: 1;99    height: 260px;100    border-radius: 36px;101    padding: 18px;102    position: relative;103  }104  .card .label {105    font-size: 42px;106    font-weight: 800;107    letter-spacing: 1px;108    text-align: center;109    margin-top: 4px;110  }111  .card .inner {112    margin-top: 24px;113    height: 180px;114    border-radius: 28px;115    background: #0E2329;116    display: flex;117    align-items: center;118    justify-content: center;119    gap: 20px;120  }121  .card .value {122    font-size: 64px;123    font-weight: 800;124  }125  /* specific colors */126  .gold { background: #F6CD3D; color: #0E2329; }127  .gold .value { color: #F6CD3D; }128  .blue { background: #6EC1FF; color: #083042; }129  .blue .value { color: #92D5FF; }130  .green { background: #A7E05A; color: #062E1A; }131  .green .value { color: #C9F78B; }132 133  .card.gold .inner { background:#0E2329; }134  .card.blue .inner { background:#0E2329; }135  .card.green .inner { background:#0E2329; }136 137  /* Bottom continue button */138  .bottom-area {139    position: absolute;140    bottom: 160px;141    width: 100%;142    display: flex;143    justify-content: center;144  }145  .continue {146    width: 940px;147    height: 140px;148    border-radius: 36px;149    background: #74C1FF;150    color: #092638;151    font-size: 64px;152    font-weight: 800;153    letter-spacing: 3px;154    display: flex;155    align-items: center;156    justify-content: center;157    position: relative;158    box-shadow: 0 16px 0 0 #4DA3E6;159  }160 161  /* navigation pill */162  .nav-pill {163    position: absolute;164    bottom: 70px;165    left: 50%;166    transform: translateX(-50%);167    width: 340px;168    height: 14px;169    border-radius: 8px;170    background: rgba(255,255,255,0.8);171  }172 173  /* helper for SVG icon color */174  .icon-light { color: #F6CD3D; }175  .icon-blue { color: #8FD2FF; }176  .icon-green { color: #8EE36A; }177 178</style>179</head>180<body>181<div id="render-target">182 183  <!-- Status bar -->184  <div class="status-bar">185    <div>5:59</div>186    <div class="status-right">187      <!-- WiFi icon -->188      <span class="icon">189        <svg width="46" height="38" viewBox="0 0 24 24" fill="none">190          <path d="M12 20.5l2.5-2.5a3.5 3.5 0 00-5 0L12 20.5z" fill="#FFFFFF"/>191          <path d="M2.5 9.5a13 13 0 0119 0l-1.8 1.7a10.5 10.5 0 00-15.4 0L2.5 9.5z" fill="#ffffff" opacity="0.6"/>192          <path d="M5.7 12.8a8.4 8.4 0 0112.6 0l-1.7 1.6a6 6 0 00-9.2 0l-1.7-1.6z" fill="#ffffff" opacity="0.8"/>193        </svg>194      </span>195      <!-- battery -->196      <span class="icon">197        <svg width="60" height="34" viewBox="0 0 28 14" fill="none">198          <rect x="1" y="1" width="22" height="12" rx="2" stroke="#FFFFFF" stroke-width="2"/>199          <rect x="24" y="4" width="3" height="6" rx="1" fill="#FFFFFF"/>200          <rect x="3" y="3" width="18" height="8" fill="#FFFFFF"/>201        </svg>202      </span>203      <span style="font-weight:700;">100%</span>204    </div>205  </div>206 207  <!-- Decorative sparkle -->208  <div class="sparkle">209    <span></span><span></span><span></span><span></span>210  </div>211 212  <!-- Illustration placeholder -->213  <div class="illustration">[IMG: Duolingo mascot lifted by person celebrating]</div>214 215  <!-- Title -->216  <div class="title">Lesson complete!</div>217 218  <!-- Stats -->219  <div class="stats-row">220    <!-- Total XP -->221    <div class="card gold">222      <div class="label">TOTAL XP</div>223      <div class="inner">224        <svg class="icon-light" width="72" height="72" viewBox="0 0 24 24">225          <path d="M13 2L6 13h5l-1 9 7-12h-5l1-8z" fill="currentColor"/>226        </svg>227        <div class="value" style="color:#F6CD3D;">15</div>228      </div>229    </div>230 231    <!-- Speedy -->232    <div class="card blue">233      <div class="label" style="color:#083042;">SPEEDY</div>234      <div class="inner">235        <svg class="icon-blue" width="72" height="72" viewBox="0 0 24 24">236          <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3" fill="none"/>237          <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="3" stroke-linecap="round" fill="none"/>238        </svg>239        <div class="value">1:48</div>240      </div>241    </div>242 243    <!-- Good -->244    <div class="card green">245      <div class="label" style="color:#062E1A;">GOOD</div>246      <div class="inner">247        <svg class="icon-green" width="72" height="72" viewBox="0 0 24 24">248          <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3" fill="none"/>249          <circle cx="12" cy="12" r="5" stroke="currentColor" stroke-width="3" fill="none"/>250          <circle cx="12" cy="12" r="2" fill="currentColor"/>251          <path d="M4 14l3 3 6-8" stroke="#7CDA4F" stroke-width="3" fill="none" stroke-linecap="round"/>252        </svg>253        <div class="value">88%</div>254      </div>255    </div>256  </div>257 258  <!-- Continue button -->259  <div class="bottom-area">260    <div class="continue">CONTINUE</div>261  </div>262 263  <!-- Navigation pill -->264  <div class="nav-pill"></div>265 266</div>267</body>268</html>