GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Daily Quest Complete UI</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10  }11  #render-target {12    width: 1080px;13    height: 2400px;14    position: relative;15    overflow: hidden;16    background: #121A1E; /* dark app background */17    font-family: Arial, Helvetica, sans-serif;18    color: #FFFFFF;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 95px;28    padding: 0 36px;29    box-sizing: border-box;30    display: flex;31    align-items: center;32    justify-content: space-between;33    color: #EAEAEA;34    font-size: 36px;35    letter-spacing: 1px;36  }37  .status-left, .status-right {38    display: flex;39    align-items: center;40    gap: 26px;41  }42  .dot {43    width: 10px;44    height: 10px;45    background: #B0B0B0;46    border-radius: 50%;47    display: inline-block;48  }49  .icon {50    width: 36px;51    height: 36px;52  }53  .battery {54    display: flex;55    align-items: center;56    gap: 14px;57    font-size: 34px;58  }59  .home-indicator {60    position: absolute;61    bottom: 40px;62    left: 290px;63    width: 500px;64    height: 12px;65    background: rgba(255,255,255,0.85);66    border-radius: 8px;67  }68 69  /* Main content */70  .owl {71    position: absolute;72    top: 730px;73    left: 50%;74    transform: translateX(-50%);75    width: 420px;76    height: 420px;77    background: #E0E0E0;78    border: 1px solid #BDBDBD;79    border-radius: 24px;80    display: flex;81    align-items: center;82    justify-content: center;83    color: #757575;84    font-weight: bold;85    text-align: center;86    line-height: 1.25;87  }88  .confetti {89    position: absolute;90    width: 26px;91    height: 26px;92    background: #B59A34;93    transform: rotate(35deg);94    border-radius: 4px;95    opacity: 0.9;96  }97  .title {98    position: absolute;99    top: 1180px;100    width: 100%;101    text-align: center;102    font-size: 72px;103    font-weight: 800;104    color: #F2C84B;105    letter-spacing: 1px;106  }107 108  /* Card */109  .card {110    position: absolute;111    top: 1450px;112    left: 60px;113    width: 960px;114    height: 610px;115    border-radius: 36px;116    background: #1B2429;117    box-shadow: 0 0 0 2px rgba(255,255,255,0.05) inset;118    border: 2px solid rgba(120,150,170,0.25);119    overflow: hidden;120  }121  .card-inner {122    padding: 54px;123    box-sizing: border-box;124  }125  .row {126    display: grid;127    grid-template-columns: 110px 1fr 150px;128    align-items: center;129    column-gap: 24px;130  }131  .bolt {132    width: 100px;133    height: 100px;134    background: #2A2F33;135    border-radius: 22px;136    display: flex;137    align-items: center;138    justify-content: center;139  }140  .label {141    font-size: 52px;142    font-weight: 800;143    color: #F6D160;144  }145  .progress-wrap {146    margin-top: 30px;147  }148  .progress {149    width: 100%;150    height: 94px;151    background: #3B3F34;152    border-radius: 50px;153    position: relative;154    overflow: hidden;155    box-shadow: inset 0 0 0 4px rgba(0,0,0,0.25);156  }157  .progress-fill {158    position: absolute;159    left: 8px;160    top: 8px;161    height: 78px;162    width: calc(100% - 16px);163    background: linear-gradient(0deg, #E7B935, #F1CA53);164    border-radius: 40px;165    box-shadow: inset 0 -6px 0 rgba(120,90,20,0.35);166  }167  .progress-text {168    position: absolute;169    width: 100%;170    text-align: center;171    top: 24px;172    font-size: 46px;173    font-weight: 800;174    color: #7A5A12;175  }176  .chest {177    width: 130px;178    height: 100px;179    border-radius: 12px;180    background: #A66B3A;181    position: relative;182    margin-left: auto;183    box-shadow: inset 0 -10px 0 rgba(0,0,0,0.25);184  }185  .chest:before {186    content: "";187    position: absolute;188    left: 0;189    top: -26px;190    width: 130px;191    height: 34px;192    background: #C08A51;193    border-radius: 10px 10px 6px 6px;194    box-shadow: 0 4px 0 rgba(0,0,0,0.25);195  }196  .lock {197    position: absolute;198    right: 10px;199    bottom: -12px;200    width: 58px;201    height: 48px;202    background: #E9B685;203    border-radius: 8px;204    box-shadow: 0 0 0 4px rgba(120,90,50,0.35) inset;205  }206  .lock:after {207    content: "";208    position: absolute;209    left: 50%;210    top: 10px;211    transform: translateX(-50%);212    width: 22px;213    height: 18px;214    background: #9A6A3C;215    border-radius: 4px;216  }217 218  .divider {219    width: 100%;220    height: 2px;221    background: rgba(255,255,255,0.06);222    margin: 30px 0 26px 0;223  }224  .desc {225    font-size: 46px;226    line-height: 1.4;227    text-align: center;228    color: #D6E0E5;229  }230 231  /* decorative yellow dots around bar */232  .dot-yellow {233    position: absolute;234    width: 20px;235    height: 20px;236    background: #D3A233;237    border-radius: 50%;238    opacity: 0.9;239  }240</style>241</head>242<body>243<div id="render-target">244 245  <!-- Status bar -->246  <div class="status-bar">247    <div class="status-left">248      <div>6:00</div>249      <span class="dot"></span>250      <svg class="icon" viewBox="0 0 24 24">251        <path d="M4 4h16v16H4z" fill="none"/>252        <path d="M2 12l4-6h4l-4 6h4l-4 6H2l4-6H2z" fill="#EAEAEA"/>253      </svg>254      <svg class="icon" viewBox="0 0 24 24">255        <circle cx="10" cy="10" r="9" stroke="#EAEAEA" stroke-width="2" fill="none"/>256        <path d="M10 5v6l4 2" stroke="#EAEAEA" stroke-width="2" fill="none" stroke-linecap="round"/>257      </svg>258    </div>259    <div class="status-right">260      <svg class="icon" viewBox="0 0 24 24">261        <path d="M3 18h18l-9-12z" fill="#EAEAEA"/>262      </svg>263      <div class="battery">264        <svg class="icon" viewBox="0 0 28 24">265          <rect x="1" y="4" width="22" height="16" rx="3" ry="3" fill="#EAEAEA"/>266          <rect x="23" y="8" width="4" height="8" rx="1" fill="#EAEAEA"/>267        </svg>268        <div>100%</div>269      </div>270    </div>271  </div>272 273  <!-- Owl mascot -->274  <div class="owl">[IMG: Duolingo Owl mascot waving flag]</div>275 276  <!-- Confetti squares near owl -->277  <div class="confetti" style="top: 760px; left: 360px;"></div>278  <div class="confetti" style="top: 840px; left: 720px;"></div>279  <div class="confetti" style="top: 900px; left: 280px;"></div>280  <div class="confetti" style="top: 990px; left: 730px;"></div>281 282  <!-- Title -->283  <div class="title">Daily Quest complete!</div>284 285  <!-- Card -->286  <div class="card">287    <div class="card-inner">288      <div class="row">289        <div class="bolt">290          <svg viewBox="0 0 100 100">291            <polygon points="60,6 34,52 52,52 40,94 88,38 66,38 80,6" fill="#F4C542"/>292          </svg>293        </div>294        <div class="label">Earn 10 XP</div>295        <div class="chest">296          <div class="lock"></div>297        </div>298      </div>299 300      <div class="progress-wrap">301        <div class="progress">302          <div class="progress-fill"></div>303          <div class="progress-text">10 / 10</div>304          <!-- decorative dots -->305          <span class="dot-yellow" style="top: -14px; left: 120px;"></span>306          <span class="dot-yellow" style="top: -20px; left: 350px;"></span>307          <span class="dot-yellow" style="top: -10px; left: 620px;"></span>308          <span class="dot-yellow" style="top: -18px; left: 860px;"></span>309          <span class="dot-yellow" style="bottom: -16px; left: 220px;"></span>310          <span class="dot-yellow" style="bottom: -22px; left: 470px;"></span>311          <span class="dot-yellow" style="bottom: -20px; left: 720px;"></span>312        </div>313      </div>314 315      <div class="divider"></div>316      <div class="desc">317        You earned a reward by completing your<br>318        daily learning quest!319      </div>320    </div>321  </div>322 323  <!-- Home indicator -->324  <div class="home-indicator"></div>325</div>326</body>327</html>