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>Daily Goal Selection</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13  }14  * { box-sizing: border-box; }15 16  #render-target {17    width: 1080px;18    height: 2400px;19    position: relative;20    overflow: hidden;21    background: #111a1d;22    border-radius: 32px;23  }24 25  /* Status bar (simplified) */26  .status-bar {27    position: absolute;28    top: 24px;29    left: 36px;30    right: 36px;31    height: 80px;32    color: #e6f1f3;33    display: flex;34    align-items: center;35    justify-content: space-between;36    opacity: 0.85;37    font-weight: 600;38    font-size: 40px;39  }40  .status-right {41    display: flex;42    align-items: center;43    gap: 24px;44    color: #e6f1f3;45    font-size: 34px;46  }47  .icon-wifi, .icon-battery {48    width: 38px; height: 38px;49  }50 51  /* Back button */52  .back-btn {53    position: absolute;54    top: 180px;55    left: 36px;56    width: 72px;57    height: 72px;58    display: flex;59    align-items: center;60    justify-content: center;61  }62  .back-btn svg {63    width: 60px; height: 60px;64    fill: none; stroke: #91a0a6; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round;65  }66 67  /* Progress bar */68  .progress {69    position: absolute;70    top: 190px;71    left: 120px;72    width: 840px;73    height: 42px;74    background: #3a434a;75    border-radius: 24px;76  }77  .progress .fill {78    position: absolute;79    left: 6px;80    top: 6px;81    bottom: 6px;82    width: 56%;83    border-radius: 20px;84    background: linear-gradient(90deg, #78d22e 0%, #b5f652 100%);85  }86 87  /* Question row */88  .question-row {89    position: absolute;90    top: 300px;91    left: 72px;92    right: 72px;93    display: flex;94    align-items: center;95    gap: 40px;96  }97  .avatar {98    width: 220px;99    height: 220px;100    background: #E0E0E0;101    border: 1px solid #BDBDBD;102    border-radius: 28px;103    display: flex;104    align-items: center;105    justify-content: center;106    color: #757575;107    font-weight: 700;108    text-align: center;109    padding: 10px;110  }111  .bubble {112    position: relative;113    flex: 1;114    padding: 40px 48px;115    border: 3px solid #3b4b50;116    border-radius: 28px;117    color: #e8f2f5;118    font-size: 46px;119    line-height: 1.2;120    background: #131f23;121  }122  .bubble-tail {123    position: absolute;124    left: -26px;125    top: 80px;126    width: 34px;127    height: 34px;128    background: #131f23;129    border-left: 3px solid #3b4b50;130    border-bottom: 3px solid #3b4b50;131    border-bottom-left-radius: 14px;132    transform: rotate(45deg);133  }134 135  /* Options */136  .option {137    position: relative;138    margin: 40px 72px;139    padding: 44px 48px;140    border-radius: 36px;141    border: 3px solid #3a4a50;142    background: #142227;143    color: #eaf2f4;144    display: flex;145    align-items: center;146    justify-content: space-between;147    box-shadow: 0 2px 0 rgba(0,0,0,0.25) inset;148  }149  .option .left {150    font-size: 52px;151    font-weight: 800;152    letter-spacing: 0.4px;153  }154  .option .right {155    font-size: 42px;156    color: #c9d6db;157    font-weight: 700;158  }159  .option.selected {160    border: 5px solid #5aa7e6;161    background: #1a2a31;162  }163  .option.selected .left,164  .option.selected .right {165    color: #7fb9ea;166  }167 168  /* Continue button */169  .cta {170    position: absolute;171    left: 72px;172    bottom: 200px;173    width: 936px;174    height: 140px;175    border-radius: 38px;176    background: #a8e64d;177    color: #0e1a1d;178    display: flex;179    align-items: center;180    justify-content: center;181    font-size: 44px;182    font-weight: 900;183    letter-spacing: 2px;184    box-shadow: 0 16px 0 #7fbe3a;185  }186 187  /* Home pill */188  .home-indicator {189    position: absolute;190    bottom: 92px;191    left: 50%;192    transform: translateX(-50%);193    width: 240px;194    height: 12px;195    background: #dfe3e6;196    border-radius: 8px;197    opacity: 0.8;198  }199</style>200</head>201<body>202<div id="render-target">203 204  <div class="status-bar">205    <div class="status-left">8:15</div>206    <div class="status-right">207      <span>•</span>208      <svg class="icon-wifi" viewBox="0 0 24 24">209        <path d="M2 8c5-4 15-4 20 0M5 11c3-3 11-3 14 0M8 14c2-2 6-2 8 0M12 18h0" stroke="#e6f1f3" stroke-width="2" fill="none" stroke-linecap="round"/>210      </svg>211      <svg class="icon-battery" viewBox="0 0 26 14">212        <rect x="1" y="2" width="20" height="10" rx="2" ry="2" fill="none" stroke="#e6f1f3" stroke-width="2"/>213        <rect x="3" y="4" width="14" height="6" rx="1" fill="#e6f1f3"/>214        <rect x="22" y="5" width="3" height="4" rx="1" fill="#e6f1f3"/>215      </svg>216    </div>217  </div>218 219  <div class="back-btn">220    <svg viewBox="0 0 24 24">221      <path d="M15 5l-7 7 7 7" />222    </svg>223  </div>224 225  <div class="progress">226    <div class="fill"></div>227  </div>228 229  <div class="question-row">230    <div class="avatar">[IMG: Duolingo mascot]</div>231    <div class="bubble">232      What's your daily learning goal?233      <div class="bubble-tail"></div>234    </div>235  </div>236 237  <div class="option">238    <div class="left">3 min / day</div>239    <div class="right">Casual</div>240  </div>241 242  <div class="option selected">243    <div class="left">10 min / day</div>244    <div class="right">Regular</div>245  </div>246 247  <div class="option">248    <div class="left">15 min / day</div>249    <div class="right">Serious</div>250  </div>251 252  <div class="option">253    <div class="left">30 min / day</div>254    <div class="right">Intense</div>255  </div>256 257  <div class="cta">CONTINUE</div>258 259  <div class="home-indicator"></div>260</div>261</body>262</html>