GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Daily 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: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f1c1f;15    color: #e9f2f2;16  }17 18  /* Top status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 42px;29    color: #e7ecec;30    font-weight: 600;31    font-size: 48px;32    letter-spacing: 1px;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 26px;38  }39 40  /* Back + progress */41  .progress-row {42    position: absolute;43    top: 140px;44    left: 42px;45    right: 42px;46    display: flex;47    align-items: center;48    gap: 28px;49  }50  .back-btn {51    width: 72px;52    height: 72px;53  }54  .progress-track {55    flex: 1;56    height: 44px;57    background: #3a454c;58    border-radius: 22px;59    overflow: hidden;60  }61  .progress-fill {62    width: 58%;63    height: 100%;64    background: #97d34f;65    border-radius: 22px;66    box-shadow: inset 0 0 0 10px rgba(255,255,255,0.08);67  }68 69  /* Avatar + prompt bubble */70  .content {71    position: absolute;72    top: 260px;73    left: 42px;74    right: 42px;75  }76  .avatar-and-bubble {77    display: flex;78    align-items: flex-start;79    gap: 36px;80  }81  .avatar {82    width: 190px;83    height: 190px;84    background: #E0E0E0;85    border: 1px solid #BDBDBD;86    border-radius: 28px;87    display: flex;88    align-items: center;89    justify-content: center;90    color: #757575;91    font-weight: 700;92    text-align: center;93    line-height: 1.2;94    padding: 14px;95  }96  .speech-bubble {97    position: relative;98    max-width: 720px;99    border: 4px solid #3b4951;100    border-radius: 38px;101    padding: 36px 40px;102    font-size: 46px;103    line-height: 1.25;104    color: #f5fafb;105    background: transparent;106  }107  .bubble-tail {108    position: absolute;109    left: -18px;110    top: 46px;111    width: 32px;112    height: 32px;113    background: transparent;114    border-left: 4px solid #3b4951;115    border-bottom: 4px solid #3b4951;116    transform: rotate(45deg);117    border-bottom-left-radius: 6px;118  }119 120  /* Options */121  .options {122    margin-top: 60px;123    display: flex;124    flex-direction: column;125    gap: 44px;126  }127  .option {128    width: 900px;129    border: 4px solid #3a4750;130    border-radius: 40px;131    padding: 34px 40px;132    font-size: 54px;133    font-weight: 800;134    color: #ffffff;135    background: rgba(255,255,255,0.01);136    box-shadow: inset 0 -6px 0 rgba(255,255,255,0.03);137  }138 139  /* Continue button */140  .continue-wrap {141    position: absolute;142    left: 36px;143    right: 36px;144    bottom: 190px;145  }146  .continue-btn {147    width: 100%;148    height: 150px;149    background: #3c474e;150    border-radius: 75px;151    display: flex;152    align-items: center;153    justify-content: center;154    color: #778289;155    font-size: 54px;156    font-weight: 900;157    letter-spacing: 4px;158  }159 160  /* Home indicator */161  .home-indicator {162    position: absolute;163    bottom: 80px;164    left: 50%;165    transform: translateX(-50%);166    width: 360px;167    height: 14px;168    background: #dfe3e6;169    border-radius: 8px;170    opacity: 0.8;171  }172</style>173</head>174<body>175<div id="render-target">176 177  <!-- Status bar -->178  <div class="status-bar">179    <div>8:14</div>180    <div class="status-right">181      <!-- simple icons -->182      <svg width="52" height="52" viewBox="0 0 24 24" fill="none">183        <rect x="3" y="3" width="14" height="18" rx="2" stroke="#e7ecec" stroke-width="2"/>184        <rect x="17.5" y="9" width="3" height="6" fill="#e7ecec"/>185      </svg>186      <svg width="52" height="52" viewBox="0 0 24 24" fill="none">187        <path d="M2 8c5-5 13-5 18 0" stroke="#e7ecec" stroke-width="2" stroke-linecap="round"/>188        <path d="M5 11c3-3 11-3 14 0" stroke="#e7ecec" stroke-width="2" stroke-linecap="round"/>189        <circle cx="12" cy="15" r="2" fill="#e7ecec"/>190      </svg>191    </div>192  </div>193 194  <!-- Back and progress -->195  <div class="progress-row">196    <svg class="back-btn" viewBox="0 0 24 24" fill="none">197      <path d="M15 4L7 12l8 8" stroke="#a6b2b8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>198    </svg>199    <div class="progress-track">200      <div class="progress-fill"></div>201    </div>202  </div>203 204  <!-- Main content -->205  <div class="content">206    <div class="avatar-and-bubble">207      <div class="avatar">[IMG: Duolingo mascot]</div>208      <div class="speech-bubble">209        <div class="bubble-tail"></div>210        What’s your daily learning goal?211      </div>212    </div>213 214    <div class="options">215      <div class="option">3 min / day</div>216      <div class="option">10 min / day</div>217      <div class="option">15 min / day</div>218      <div class="option">30 min / day</div>219    </div>220  </div>221 222  <!-- Continue button -->223  <div class="continue-wrap">224    <div class="continue-btn">CONTINUE</div>225  </div>226 227  <div class="home-indicator"></div>228</div>229</body>230</html>