GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Commit to Learning Portuguese - Mock UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #111a1e;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    padding: 0 40px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #d7e2e9;29    font-size: 40px;30  }31  .sb-left {32    display: flex;33    align-items: center;34    gap: 22px;35  }36  .sb-icons {37    display: flex;38    align-items: center;39    gap: 20px;40  }41  .dot {42    width: 32px; height: 32px; border-radius: 50%; background: #cfd8dc;43  }44  .sb-right { display: flex; align-items: center; gap: 26px; }45  .wifi {46    width: 46px; height: 46px;47  }48  .battery {49    width: 70px; height: 34px;50    border: 3px solid #cfd8dc; border-radius: 6px; position: relative;51  }52  .battery::after {53    content: "";54    position: absolute;55    right: -12px; top: 8px;56    width: 8px; height: 16px; background: #cfd8dc; border-radius: 2px;57  }58  .battery .level {59    position: absolute; left: 4px; top: 4px;60    width: 52px; height: 22px; background: #cfd8dc;61  }62  .percent { font-size: 40px; color: #cfd8dc; }63 64  /* Title */65  .title {66    position: absolute;67    top: 170px;68    left: 40px;69    width: 1000px;70    font-size: 72px;71    font-weight: 800;72    line-height: 1.2;73    letter-spacing: 0.5px;74  }75 76  /* Streak list */77  .streak-list {78    position: absolute;79    top: 430px;80    left: 32px;81    width: 1016px;82    border-radius: 22px;83    box-sizing: border-box;84    padding: 10px 0;85    border: 2px solid rgba(255,255,255,0.06);86    background: rgba(255,255,255,0.02);87  }88  .streak-row {89    position: relative;90    width: 960px;91    margin: 22px auto;92    height: 180px;93    border-radius: 26px;94    background: #172229;95    display: flex;96    align-items: center;97    justify-content: space-between;98    padding: 0 40px;99    box-sizing: border-box;100    color: #ffffff;101  }102  .streak-row .left {103    font-size: 48px;104    font-weight: 800;105    letter-spacing: 0.3px;106  }107  .streak-row .right {108    font-size: 44px;109    color: #c7d1d6;110  }111  .streak-row.selected {112    background: #20303a;113    border: 4px solid #f5a93a;114    box-shadow: inset 0 0 0 2px rgba(245,169,58,0.2);115  }116  .check-badge {117    position: absolute;118    right: -30px;119    top: 62px;120    width: 90px; height: 90px;121    background: #f5a93a;122    border-radius: 50%;123    display: flex; align-items: center; justify-content: center;124    box-shadow: 0 0 0 8px rgba(245,169,58,0.25);125  }126  .check-badge svg { width: 56px; height: 56px; }127  .streak-row:nth-child(1) .right { color: #b8c5cc; }128  .streak-row:nth-child(2) .right { color: #c9d6dc; }129  .streak-row:nth-child(4) .right { color: #c9d6dc; }130 131  /* Owl and speech bubble */132  .bottom-area {133    position: absolute;134    left: 40px;135    top: 1500px;136    width: 1000px;137    display: flex;138    align-items: flex-start;139    gap: 40px;140  }141  .owl-img {142    width: 280px;143    height: 280px;144    background: #E0E0E0;145    border: 1px solid #BDBDBD;146    border-radius: 24px;147    display: flex; align-items: center; justify-content: center;148    color: #757575; font-size: 34px; text-align: center; padding: 10px;149  }150  .speech {151    position: relative;152    width: 640px;153    min-height: 300px;154    background: #1c2a31;155    border-radius: 36px;156    padding: 40px;157    box-sizing: border-box;158    color: #eaf1f5;159    font-size: 44px;160    line-height: 1.35;161  }162  .speech .highlight { color: #f5a93a; font-weight: 800; }163  .speech .tail {164    position: absolute;165    left: -32px; bottom: 56px;166    width: 0; height: 0;167    border-left: 32px solid transparent;168    border-right: 32px solid transparent;169    border-top: 32px solid #1c2a31;170  }171 172  /* Button */173  .cta {174    position: absolute;175    bottom: 180px;176    left: 40px;177    width: 1000px;178    height: 150px;179    background: #73BDFE;180    border-radius: 40px;181    display: flex; align-items: center; justify-content: center;182    color: #0d2a3a;183    font-size: 46px;184    font-weight: 800;185    letter-spacing: 2px;186    box-shadow: 0 8px 0 0 rgba(255,255,255,0.15) inset;187  }188 189  /* Home pill indicator */190  .home-pill {191    position: absolute;192    bottom: 80px; left: 50%;193    width: 300px; height: 12px;194    background: #e6edf2; border-radius: 12px;195    transform: translateX(-50%);196    opacity: 0.9;197  }198</style>199</head>200<body>201<div id="render-target">202 203  <!-- Status Bar -->204  <div class="status-bar">205    <div class="sb-left">206      <div>6:01</div>207      <div class="sb-icons">208        <div class="dot"></div>209        <div class="dot" style="width:28px;height:28px;background:#bfc8cd;"></div>210        <div class="dot" style="width:28px;height:28px;background:#bfc8cd;"></div>211      </div>212    </div>213    <div class="sb-right">214      <svg class="wifi" viewBox="0 0 24 24">215        <path fill="#cfd8dc" d="M12 18a2 2 0 1 0 0.001 0z"></path>216        <path fill="#cfd8dc" d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8z"></path>217        <path fill="#cfd8dc" d="M5 12c3-2 11-2 14 0l-2 2c-2-1-8-1-10 0L5 12z"></path>218      </svg>219      <div class="battery"><div class="level"></div></div>220      <div class="percent">100%</div>221    </div>222  </div>223 224  <!-- Title -->225  <div class="title">Commit to learning Portuguese!</div>226 227  <!-- Streak Options -->228  <div class="streak-list">229    <div class="streak-row">230      <div class="left">7 day streak</div>231      <div class="right">Good</div>232    </div>233    <div class="streak-row">234      <div class="left">14 day streak</div>235      <div class="right">Great</div>236    </div>237    <div class="streak-row selected">238      <div class="left" style="color:#f5a93a;">30 day streak</div>239      <div class="right" style="color:#f5a93a;">Incredible</div>240      <div class="check-badge">241        <svg viewBox="0 0 24 24">242          <path d="M6 12l4 4 8-9" stroke="#072b38" stroke-width="3.2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>243        </svg>244      </div>245    </div>246    <div class="streak-row">247      <div class="left">50 day streak</div>248      <div class="right">Unstoppable</div>249    </div>250  </div>251 252  <!-- Bottom area with owl and speech bubble -->253  <div class="bottom-area">254    <div class="owl-img">[IMG: Duolingo Owl Mascot]</div>255    <div class="speech">256      <div class="tail"></div>257      You’ll be <span class="highlight">7x more</span> likely to complete the course!258    </div>259  </div>260 261  <!-- CTA Button -->262  <div class="cta">COMMIT TO MY GOAL</div>263 264  <!-- Home pill indicator -->265  <div class="home-pill"></div>266 267</div>268</body>269</html>