GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Daily Learning Goal UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">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    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #0f191b; /* deep dark teal */15    border-radius: 0;16    box-shadow: none;17    color: #e7f0f3;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 120px;27    color: #e7f0f3;28    display: flex;29    align-items: center;30    justify-content: space-between;31    padding: 0 40px;32    font-weight: 600;33    letter-spacing: 0.5px;34    font-size: 40px;35    opacity: 0.9;36  }37  .status-right {38    display: flex;39    align-items: center;40    gap: 24px;41  }42  .icon-battery,43  .icon-signal {44    width: 44px; height: 44px;45  }46 47  /* Back + progress */48  .top-ui {49    position: absolute;50    top: 140px;51    left: 40px;52    right: 40px;53    height: 80px;54    display: flex;55    align-items: center;56    gap: 24px;57  }58  .back-btn {59    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;60  }61  .progress-track {62    flex: 1;63    height: 40px;64    background: #3b454c;65    border-radius: 24px;66    position: relative;67    overflow: hidden;68  }69  .progress-fill {70    position: absolute;71    left: 0; top: 0; bottom: 0;72    width: 65%;73    background: linear-gradient(0deg, #8dd03e, #a4e046);74    border-radius: 24px;75    margin: 6px;76  }77 78  /* Prompt row */79  .prompt-row {80    position: absolute;81    top: 260px;82    left: 40px;83    right: 40px;84    display: flex;85    align-items: center;86    gap: 32px;87  }88  .img-placeholder {89    width: 220px;90    height: 220px;91    background: #E0E0E0;92    border: 1px solid #BDBDBD;93    border-radius: 32px;94    display: flex; align-items: center; justify-content: center;95    color: #757575;96    font-weight: 700;97    text-align: center;98    padding: 12px;99  }100 101  .speech-bubble {102    flex: 1;103    min-height: 170px;104    border: 4px solid #3b454c;105    border-radius: 40px;106    color: #e7f0f3;107    font-size: 48px;108    line-height: 1.3;109    padding: 34px 36px;110    position: relative;111  }112  .bubble-tail {113    position: absolute;114    left: -34px;115    top: 74px;116    width: 0; height: 0;117    border-top: 22px solid transparent;118    border-bottom: 22px solid transparent;119    border-right: 34px solid #3b454c; /* outer border color */120  }121  .bubble-tail-inner {122    position: absolute;123    left: -29px;124    top: 80px;125    width: 0; height: 0;126    border-top: 16px solid transparent;127    border-bottom: 16px solid transparent;128    border-right: 29px solid #0f191b; /* page background */129  }130 131  /* Options list */132  .options {133    position: absolute;134    top: 560px;135    left: 40px;136    right: 40px;137    display: flex;138    flex-direction: column;139    gap: 42px;140  }141  .option {142    height: 176px;143    border-radius: 40px;144    border: 4px solid #3b454c;145    background: rgba(255,255,255,0.02);146    display: flex;147    align-items: center;148    justify-content: space-between;149    padding: 0 48px;150  }151  .option .left {152    font-size: 54px;153    font-weight: 800;154    color: #eff6f8;155  }156  .option .right {157    font-size: 46px;158    font-weight: 600;159    color: #cbd6da;160  }161 162  /* Continue button */163  .footer {164    position: absolute;165    left: 40px;166    right: 40px;167    bottom: 180px;168  }169  .btn {170    height: 140px;171    border-radius: 44px;172    background: #3b454c;173    opacity: 0.6;174    display: flex; align-items: center; justify-content: center;175    font-size: 48px; letter-spacing: 2px; font-weight: 800;176    color: #8ea1a9;177  }178 179  /* Gesture bar hint */180  .gesture {181    position: absolute;182    bottom: 68px;183    left: 50%;184    transform: translateX(-50%);185    width: 320px;186    height: 12px;187    background: #e5e7ea;188    border-radius: 8px;189    opacity: 0.8;190  }191</style>192</head>193<body>194<div id="render-target">195  <!-- Status bar -->196  <div class="status-bar">197    <div>8:14</div>198    <div class="status-right">199      <!-- simple placeholders for icons -->200      <svg class="icon-signal" viewBox="0 0 24 24" fill="#e7f0f3">201        <rect x="2" y="14" width="3" height="8" rx="1"></rect>202        <rect x="7" y="10" width="3" height="12" rx="1"></rect>203        <rect x="12" y="6" width="3" height="16" rx="1"></rect>204      </svg>205      <svg class="icon-battery" viewBox="0 0 28 16">206        <rect x="1" y="2" width="22" height="12" rx="2" fill="none" stroke="#e7f0f3" stroke-width="2"></rect>207        <rect x="3" y="4" width="16" height="8" rx="1" fill="#e7f0f3"></rect>208        <rect x="24" y="6" width="3" height="4" rx="1" fill="#e7f0f3"></rect>209      </svg>210    </div>211  </div>212 213  <!-- Back and progress -->214  <div class="top-ui">215    <div class="back-btn">216      <svg viewBox="0 0 24 24" width="64" height="64" fill="none" stroke="#cfd7db" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">217        <path d="M15 19l-7-7 7-7"></path>218      </svg>219    </div>220    <div class="progress-track">221      <div class="progress-fill"></div>222    </div>223  </div>224 225  <!-- Prompt -->226  <div class="prompt-row">227    <div class="img-placeholder">[IMG: Duolingo Owl]</div>228 229    <div class="speech-bubble">230      What’s your daily<br>learning goal?231      <span class="bubble-tail"></span>232      <span class="bubble-tail-inner"></span>233    </div>234  </div>235 236  <!-- Options -->237  <div class="options">238    <div class="option">239      <div class="left">3 min / day</div>240      <div class="right">Casual</div>241    </div>242    <div class="option">243      <div class="left">10 min / day</div>244      <div class="right">Regular</div>245    </div>246    <div class="option">247      <div class="left">15 min / day</div>248      <div class="right">Serious</div>249    </div>250    <div class="option">251      <div class="left">30 min / day</div>252      <div class="right">Intense</div>253    </div>254  </div>255 256  <!-- Footer -->257  <div class="footer">258    <div class="btn">CONTINUE</div>259  </div>260 261  <div class="gesture"></div>262</div>263</body>264</html>