GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Duolingo Achievements UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #0e1a1d;13 color: #e9f1f4;14 }15 16 /* Status bar */17 .status-bar {18 height: 120px;19 padding: 24px 36px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #cfe4ea;24 font-size: 40px;25 letter-spacing: 0.5px;26 }27 .status-right {28 display: flex;29 align-items: center;30 gap: 28px;31 }32 .status-icon {33 width: 36px;34 height: 36px;35 border-radius: 6px;36 background: #2b3a3f;37 }38 .battery {39 width: 110px;40 height: 40px;41 border: 3px solid #cfe4ea;42 border-radius: 8px;43 position: relative;44 display: flex;45 align-items: center;46 padding: 4px;47 }48 .battery::after {49 content: "";50 position: absolute;51 right: -14px;52 top: 12px;53 width: 12px;54 height: 16px;55 background: #cfe4ea;56 border-radius: 3px;57 }58 .battery-fill {59 height: 100%;60 width: 85%;61 background: #9de052;62 border-radius: 4px;63 }64 .battery-text {65 margin-left: 12px;66 font-size: 34px;67 }68 69 /* Content wrapper */70 .content {71 padding: 0 40px 0 40px;72 }73 74 /* Find friends card */75 .friends-card {76 background: #122326;77 border: 2px solid #1a2f33;78 border-radius: 22px;79 padding: 28px;80 margin-top: 10px;81 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);82 }83 .friends-row {84 display: grid;85 grid-template-columns: 120px 1fr;86 gap: 26px;87 align-items: center;88 }89 .contact-icon {90 width: 120px;91 height: 120px;92 border-radius: 18px;93 background: #f0b03a;94 position: relative;95 }96 .contact-icon::before {97 content: "";98 position: absolute;99 left: 16px; top: 18px;100 width: 34px; height: 84px; background: #d9922f; border-radius: 8px;101 }102 .contact-icon::after {103 content: "";104 position: absolute;105 right: 16px; top: 22px;106 width: 70px; height: 74px; background: #ffd475; border-radius: 10px;107 }108 .friends-text h3 {109 margin: 0;110 font-size: 42px;111 font-weight: 700;112 color: #cfe4ea;113 }114 .friends-text p {115 margin: 10px 0 22px;116 font-size: 36px;117 color: #adc9cf;118 line-height: 1.3;119 }120 .primary-btn {121 display: inline-block;122 background: #5ab6fb;123 color: #051015;124 border-radius: 24px;125 padding: 22px 36px;126 font-size: 42px;127 font-weight: 800;128 box-shadow: 0 8px 0 #3c8ac7;129 text-align: center;130 }131 .primary-btn:active { transform: translateY(3px); box-shadow: 0 5px 0 #3c8ac7; }132 133 /* Achievements header */134 .section-title {135 font-size: 64px;136 font-weight: 800;137 margin: 48px 0 24px;138 letter-spacing: 1px;139 }140 141 /* Achievements container */142 .achievements-wrap {143 background: #0d1a1c;144 border: 2px solid #1a2f33;145 border-radius: 28px;146 padding: 28px;147 }148 149 /* Single achievement row */150 .achievement-row {151 display: grid;152 grid-template-columns: 210px 1fr;153 gap: 32px;154 align-items: center;155 padding: 16px 0;156 border-bottom: 2px solid #182a2d;157 }158 .achievement-row:last-child { border-bottom: none; }159 160 /* Left badge blocks (image replacement) */161 .badge {162 width: 180px;163 height: 180px;164 border-radius: 32px;165 display: flex;166 flex-direction: column;167 align-items: center;168 justify-content: center;169 color: #0d1a1c;170 font-weight: 900;171 }172 .badge.gold { background: #f4c542; box-shadow: inset 0 -12px 0 #e1a92f; }173 .badge.red { background: #f15b4a; box-shadow: inset 0 -12px 0 #ca3e33; color: #0d1a1c; }174 .badge.green { background: #72d65d; box-shadow: inset 0 -12px 0 #57b947; color: #0d1a1c; }175 .badge .level {176 margin-top: 100px;177 font-size: 40px;178 color: #0d1a1c;179 }180 181 /* Right content for achievement */182 .ach-content .title {183 font-size: 56px;184 font-weight: 800;185 margin-bottom: 10px;186 }187 .ach-content .subtitle {188 font-size: 40px;189 color: #a4c2c8;190 margin-bottom: 20px;191 }192 .blue-cta {193 display: inline-block;194 background: #63bbfb;195 box-shadow: 0 10px 0 #3a86be;196 color: #041217;197 padding: 22px 36px;198 border-radius: 22px;199 font-size: 42px;200 font-weight: 900;201 }202 203 /* Progress bars */204 .progress-wrap {205 display: flex;206 align-items: center;207 gap: 20px;208 }209 .progress {210 flex: 1;211 height: 48px;212 background: #2a3b40;213 border-radius: 26px;214 position: relative;215 overflow: hidden;216 }217 .progress .fill {218 height: 100%;219 width: 62%;220 background: #f2c23c;221 border-radius: 26px;222 box-shadow: inset 0 -8px 0 #d6a730;223 }224 .progress .fill.short { width: 45%; }225 .progress .track {226 position: absolute; right: 0; top: 0; bottom: 0; width: 34%;227 background: #1f2f33;228 }229 .progress-value {230 font-size: 44px;231 color: #b5cfd5;232 min-width: 120px;233 text-align: right;234 }235 236 /* View more row */237 .view-more {238 display: flex;239 justify-content: space-between;240 align-items: center;241 color: #cfe4ea;242 font-size: 48px;243 padding: 26px 10px 6px;244 }245 .chev {246 width: 24px; height: 24px; border-top: 6px solid #cfe4ea; border-right: 6px solid #cfe4ea; transform: rotate(45deg); margin-right: 6px;247 }248 249 /* Bottom navigation */250 .bottom-nav {251 position: absolute;252 left: 0;253 bottom: 0;254 width: 100%;255 height: 200px;256 background: #0d1a1c;257 border-top: 2px solid #1a2f33;258 display: flex;259 align-items: center;260 justify-content: space-around;261 }262 .nav-item {263 width: 110px; height: 110px; border-radius: 26px;264 display: flex; align-items: center; justify-content: center;265 background: transparent;266 }267 .nav-item.active { outline: 6px solid #2f4c53; border-radius: 28px; }268 269 /* Simple SVG icon styling */270 svg { display: block; }271 .icon-fill { fill: #e5f3f6; }272 .icon-accent { fill: #f2c23c; }273</style>274</head>275<body>276<div id="render-target">277 278 <!-- Status Bar -->279 <div class="status-bar">280 <div>5:49</div>281 <div class="status-right">282 <div class="status-icon"></div>283 <div class="status-icon"></div>284 <div class="status-icon"></div>285 <div style="display:flex; align-items:center;">286 <div class="battery">287 <div class="battery-fill"></div>288 </div>289 <div class="battery-text">96%</div>290 </div>291 </div>292 </div>293 294 <div class="content">295 296 <!-- Find friends card -->297 <div class="friends-card">298 <div class="friends-row">299 <div class="contact-icon"></div>300 <div class="friends-text">301 <h3>Find friends on Duolingo</h3>302 <p>Sync your contacts to easily find people you know on Duolingo.</p>303 <div class="primary-btn">SYNC CONTACTS</div>304 </div>305 </div>306 </div>307 308 <!-- Achievements -->309 <div class="section-title">Achievements</div>310 311 <div class="achievements-wrap">312 313 <!-- Photogenic -->314 <div class="achievement-row">315 <div class="badge gold">316 <div style="position:absolute; top:40px; width:120px; height:80px; background:#ffd86c; border-radius:16px;"></div>317 <div class="level">LEVEL 1</div>318 </div>319 <div class="ach-content">320 <div class="title">Photogenic</div>321 <div>322 <div class="blue-cta">CLAIM REWARD</div>323 </div>324 </div>325 </div>326 327 <!-- Wildfire -->328 <div class="achievement-row">329 <div class="badge red">330 <div style="position:absolute; top:48px; width:100px; height:110px; background:#ffb099; border-radius:40px 40px 60px 60px;"></div>331 <div class="level">LEVEL 1</div>332 </div>333 <div class="ach-content">334 <div class="title">Wildfire</div>335 <div class="subtitle">Reach a 3 day streak</div>336 <div class="progress-wrap">337 <div class="progress">338 <div class="fill"></div>339 <div class="track"></div>340 </div>341 <div class="progress-value">2/3</div>342 </div>343 </div>344 </div>345 346 <!-- Sage -->347 <div class="achievement-row">348 <div class="badge green">349 <div style="position:absolute; top:40px; width:120px; height:80px; background:#a4e9a0; border-radius:14px;"></div>350 <div class="level">LEVEL 1</div>351 </div>352 <div class="ach-content">353 <div class="title">Sage</div>354 <div class="subtitle">Earn 100 XP</div>355 <div class="progress-wrap">356 <div class="progress">357 <div class="fill short"></div>358 </div>359 <div class="progress-value">50/100</div>360 </div>361 </div>362 </div>363 364 </div>365 366 <!-- View more -->367 <div class="view-more">368 <div>View 10 more</div>369 <div class="chev"></div>370 </div>371 372 </div>373 374 <!-- Bottom Navigation -->375 <div class="bottom-nav">376 <div class="nav-item">377 <svg width="84" height="84" viewBox="0 0 24 24">378 <path class="icon-fill" d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3z"/>379 </svg>380 </div>381 <div class="nav-item">382 <svg width="84" height="84" viewBox="0 0 24 24">383 <path class="icon-fill" d="M12 2l7 5v6c0 4.418-3.582 8-8 8s-8-3.582-8-8V7l9-5z"/>384 </svg>385 </div>386 <div class="nav-item active">387 <svg width="84" height="84" viewBox="0 0 24 24">388 <circle class="icon-fill" cx="12" cy="8" r="4"/>389 <path class="icon-fill" d="M4 22c0-4.418 3.582-8 8-8s8 3.582 8 8"/>390 </svg>391 </div>392 <div class="nav-item">393 <svg width="84" height="84" viewBox="0 0 24 24">394 <path class="icon-fill" d="M4 7h16v12H4z"/>395 <path class="icon-accent" d="M8 11h8v4H8z"/>396 </svg>397 </div>398 <div class="nav-item">399 <svg width="84" height="84" viewBox="0 0 24 24">400 <path class="icon-fill" d="M12 2a6 6 0 016 6v4l2 3H4l2-3V8a6 6 0 016-6z"/>401 <circle class="icon-accent" cx="12" cy="20" r="2"/>402 </svg>403 </div>404 </div>405 406</div>407</body>408</html>