GD-ML/AndroidCode
13.4k
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>Learning Purpose UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #101b1e;15 border-radius: 28px;16 box-shadow: 0 20px 60px rgba(0,0,0,0.35);17 font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;18 color: #e9f2f0;19 }20 21 /* Status bar */22 .status-bar {23 height: 100px;24 padding: 22px 32px 0 32px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #cfe3df;29 font-weight: 600;30 font-size: 38px;31 letter-spacing: 0.5px;32 }33 .status-left, .status-right { display: flex; align-items: center; gap: 16px; }34 .status-icon svg { width: 36px; height: 36px; fill: none; stroke: #cfe3df; stroke-width: 3.5; }35 36 /* Back + progress */37 .top-controls {38 position: absolute;39 left: 28px;40 top: 120px;41 right: 28px;42 height: 96px;43 display: flex;44 align-items: center;45 gap: 26px;46 }47 .back-btn {48 width: 72px;49 height: 72px;50 border-radius: 36px;51 display: flex;52 align-items: center;53 justify-content: center;54 }55 .back-btn svg { width: 44px; height: 44px; stroke: #b7c6c3; stroke-width: 6; fill: none; }56 .progress-bar {57 flex: 1;58 height: 40px;59 background: #3c4a4f;60 border-radius: 22px;61 overflow: hidden;62 }63 .progress-fill {64 width: 64%;65 height: 100%;66 background: #95d650;67 border-radius: 22px;68 }69 70 /* Question with avatar */71 .question-wrap {72 position: absolute;73 left: 40px;74 right: 40px;75 top: 220px;76 display: flex;77 gap: 28px;78 align-items: center;79 }80 .avatar {81 width: 200px;82 height: 200px;83 background: #E0E0E0;84 border: 1px solid #BDBDBD;85 border-radius: 24px;86 display: flex;87 align-items: center;88 justify-content: center;89 color: #757575;90 font-weight: 700;91 text-align: center;92 padding: 8px;93 }94 .speech {95 flex: 1;96 padding: 32px 36px;97 background: #172328;98 border: 3px solid #2a3940;99 border-radius: 28px;100 color: #eaf6f4;101 font-size: 46px;102 line-height: 1.24;103 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.03);104 position: relative;105 }106 .speech:before {107 content: "";108 position: absolute;109 left: -26px;110 top: 48px;111 width: 22px; height: 22px;112 border-left: 3px solid #2a3940;113 border-bottom: 3px solid #2a3940;114 background: #172328;115 transform: rotate(45deg);116 border-radius: 4px;117 }118 119 /* Options list */120 .options {121 position: absolute;122 left: 28px;123 right: 28px;124 top: 470px;125 bottom: 260px;126 overflow: hidden;127 padding-top: 6px;128 }129 .card {130 display: flex;131 align-items: center;132 justify-content: space-between;133 background: #172328;134 border: 3px solid #2a3940;135 border-radius: 38px;136 padding: 34px 34px;137 margin-bottom: 34px;138 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.02);139 }140 .card-left { display: flex; align-items: center; gap: 28px; }141 .card-title {142 font-size: 44px;143 font-weight: 800;144 color: #f1fbf8;145 letter-spacing: 0.2px;146 }147 .check {148 width: 86px;149 height: 86px;150 border-radius: 22px;151 border: 6px solid #3a4a51;152 box-sizing: border-box;153 background: transparent;154 }155 156 /* Simple colorful icons */157 .icon { width: 86px; height: 86px; border-radius: 22px; display: flex; align-items: center; justify-content: center; }158 .icon svg { width: 72px; height: 72px; }159 160 .icon.suitcase svg { fill: #b87935; stroke: #8d5a25; stroke-width: 2; }161 .icon.plane svg { fill: #4fa5ff; stroke: #1e6fcc; stroke-width: 3; }162 .icon.book svg { fill: #ffffff; stroke: #bfbfbf; stroke-width: 3; }163 .icon.party svg { fill: #ffbf3f; stroke: #e39d15; stroke-width: 3; }164 .icon.people svg { fill: #f3c55d; stroke: #cba24a; stroke-width: 3; }165 .icon.brain svg { fill: #f2a3d6; stroke: #d682b8; stroke-width: 3; }166 .icon.dots svg { fill: #b895ff; }167 168 /* Bottom action */169 .bottom-area {170 position: absolute;171 left: 28px;172 right: 28px;173 bottom: 80px;174 height: 140px;175 border-radius: 34px;176 background: #2b3940;177 display: flex;178 align-items: center;179 justify-content: center;180 color: #9fb1b7;181 font-size: 42px;182 font-weight: 800;183 letter-spacing: 3px;184 opacity: 0.85;185 }186 187 /* Home indicator */188 .home-indicator {189 position: absolute;190 bottom: 26px;191 left: 50%;192 transform: translateX(-50%);193 width: 260px;194 height: 10px;195 background: #cfd8dc;196 border-radius: 6px;197 opacity: 0.55;198 }199</style>200</head>201<body>202<div id="render-target">203 <!-- Status bar -->204 <div class="status-bar">205 <div class="status-left">206 <div>8:12</div>207 <div class="status-icon">208 <svg viewBox="0 0 24 24"><path d="M4 5h16M4 12h16M4 19h16"/></svg>209 </div>210 <div class="status-icon">211 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>212 </div>213 <div class="status-icon">214 <svg viewBox="0 0 24 24"><path d="M3 18c4-4 14-4 18 0"/><path d="M6 15c3-3 9-3 12 0"/><path d="M9 12c2-2 4-2 6 0"/></svg>215 </div>216 <div>•</div>217 </div>218 <div class="status-right">219 <div class="status-icon">220 <svg viewBox="0 0 24 24"><path d="M2 8h16l4 4-4 4H2z"/></svg>221 </div>222 <div class="status-icon">223 <svg viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="14" rx="2"/><path d="M20 8h2v8h-2"/></svg>224 </div>225 </div>226 </div>227 228 <!-- Back and progress -->229 <div class="top-controls">230 <div class="back-btn">231 <svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></svg>232 </div>233 <div class="progress-bar">234 <div class="progress-fill"></div>235 </div>236 </div>237 238 <!-- Question -->239 <div class="question-wrap">240 <div class="avatar">[IMG: Duolingo Owl]</div>241 <div class="speech">Why are you learning Japanese?</div>242 </div>243 244 <!-- Options -->245 <div class="options">246 <div class="card">247 <div class="card-left">248 <div class="icon suitcase">249 <svg viewBox="0 0 64 64">250 <rect x="12" y="22" width="40" height="28" rx="6"></rect>251 <rect x="22" y="14" width="20" height="6" rx="3"></rect>252 </svg>253 </div>254 <div class="card-title">Boost my career</div>255 </div>256 <div class="check"></div>257 </div>258 259 <div class="card">260 <div class="card-left">261 <div class="icon plane">262 <svg viewBox="0 0 64 64">263 <path d="M6 46l20-10 28 4-12-10 8-8-18 4-26 28z"></path>264 </svg>265 </div>266 <div class="card-title">Prepare for travel</div>267 </div>268 <div class="check"></div>269 </div>270 271 <div class="card">272 <div class="card-left">273 <div class="icon book">274 <svg viewBox="0 0 64 64">275 <rect x="12" y="12" width="40" height="40" rx="6"></rect>276 <path d="M32 12v40"></path>277 <path d="M20 16h10"></path>278 <path d="M44 16l-6 2v10" stroke="#ff4d4d" fill="none"></path>279 </svg>280 </div>281 <div class="card-title">Support my education</div>282 </div>283 <div class="check"></div>284 </div>285 286 <div class="card">287 <div class="card-left">288 <div class="icon party">289 <svg viewBox="0 0 64 64">290 <path d="M20 44l10-20 14 12z"></path>291 <circle cx="46" cy="20" r="4" fill="#ff6f61"></circle>292 <circle cx="18" cy="24" r="3" fill="#81d4fa"></circle>293 </svg>294 </div>295 <div class="card-title">Just for fun</div>296 </div>297 <div class="check"></div>298 </div>299 300 <div class="card">301 <div class="card-left">302 <div class="icon people">303 <svg viewBox="0 0 64 64">304 <circle cx="26" cy="26" r="10"></circle>305 <circle cx="42" cy="30" r="8" fill="#7a5b4a"></circle>306 <path d="M14 48c4-8 16-8 20 0" fill="#f3c55d" stroke="#cba24a"></path>307 </svg>308 </div>309 <div class="card-title">Connect with people</div>310 </div>311 <div class="check"></div>312 </div>313 314 <div class="card">315 <div class="card-left">316 <div class="icon brain">317 <svg viewBox="0 0 64 64">318 <path d="M22 24c-6 0-8 6-6 10s6 6 10 6c4 0 8-2 10-6s-2-10-8-10z"></path>319 <path d="M36 28c6 0 10 6 8 10-2 4-6 6-10 6" opacity="0.8"></path>320 </svg>321 </div>322 <div class="card-title">Spend time productively</div>323 </div>324 <div class="check"></div>325 </div>326 327 <div class="card">328 <div class="card-left">329 <div class="icon dots">330 <svg viewBox="0 0 64 64">331 <circle cx="20" cy="32" r="6"></circle>332 <circle cx="32" cy="32" r="6"></circle>333 <circle cx="44" cy="32" r="6"></circle>334 </svg>335 </div>336 <div class="card-title">Other</div>337 </div>338 <div class="check"></div>339 </div>340 </div>341 342 <!-- Bottom continue (disabled) -->343 <div class="bottom-area">CONTINUE</div>344 345 <!-- Home indicator -->346 <div class="home-indicator"></div>347</div>348</body>349</html>