GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Duolingo Style UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #DDF6C2; /* light green background */13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 90px;22 padding: 12px 24px;23 box-sizing: border-box;24 color: #2b3b21;25 font-size: 36px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 }30 .status-left {31 display: flex;32 align-items: center;33 gap: 18px;34 }35 .mini-dot { width: 16px; height: 16px; background:#1b1b1b; border-radius: 50%; opacity: 0.7; }36 .status-right { display:flex; align-items:center; gap:26px; }37 .icon-wifi, .icon-battery { width: 46px; height: 26px; }38 39 /* Top counters row */40 .top-counters {41 position: absolute;42 top: 96px;43 left: 24px;44 width: 1032px;45 height: 80px;46 display: flex;47 align-items: center;48 gap: 36px;49 }50 .counter {51 display: flex;52 align-items: center;53 gap: 12px;54 color: #2E4A1E;55 font-weight: 700;56 font-size: 34px;57 }58 .badge {59 width: 64px;60 height: 44px;61 border-radius: 10px;62 background: linear-gradient(90deg, #FF9933 0 33%, #FFFFFF 33% 66%, #138808 66%); /* Indian flag stripes */63 border: 2px solid #bcdca5;64 }65 .pill {66 width: 52px; height: 52px; border-radius: 50%;67 display: inline-flex; align-items: center; justify-content: center;68 background: #fff; border: 3px solid #bcdca5;69 }70 .pill.orange { background: #FFEBD6; border-color:#FFC69A; }71 .pill.blue { background: #DDF3FF; border-color:#9BD0F3; }72 .pill.red { background: #FFE1E8; border-color:#FF9CB3; }73 74 /* Header lesson card */75 .header-card {76 position: absolute;77 top: 186px;78 left: 36px;79 width: 1008px;80 background: #58CC02;81 border-radius: 32px;82 padding: 30px;83 box-sizing: border-box;84 color: #fff;85 box-shadow: 0 6px 0 rgba(0,0,0,0.06) inset;86 }87 .header-card .sub {88 font-size: 32px;89 text-transform: uppercase;90 opacity: 0.95;91 letter-spacing: 1px;92 margin-bottom: 10px;93 }94 .header-card .title {95 font-size: 56px;96 font-weight: 800;97 }98 99 /* Start bubble and main node */100 .start-bubble {101 position: absolute;102 top: 360px;103 left: 330px;104 padding: 18px 36px;105 background: #F0F6D7;106 color: #6F7B4D;107 border-radius: 22px;108 font-weight: 800;109 font-size: 44px;110 border: 4px solid #D5E6A8;111 display: inline-flex; align-items: center; gap: 16px;112 z-index: 5;113 }114 .start-tail {115 position: absolute;116 width: 24px; height: 24px;117 background: #F0F6D7;118 border-left: 4px solid #D5E6A8;119 border-bottom: 4px solid #D5E6A8;120 transform: rotate(45deg);121 left: 180px; top: 68px;122 z-index: 4;123 }124 .main-node {125 position: absolute;126 top: 430px;127 left: 385px;128 width: 310px;129 height: 310px;130 border-radius: 50%;131 background: #7ADF36;132 box-shadow: inset 0 0 0 18px #C9EE9C;133 display: flex; align-items: center; justify-content: center;134 }135 .star {136 width: 140px; height: 140px;137 }138 139 /* Path nodes (disabled) */140 .path {141 position: absolute;142 top: 770px;143 left: 120px;144 width: 840px;145 }146 .node {147 width: 220px; height: 220px; border-radius: 50%;148 background: #CFE7AE;149 box-shadow: inset 0 0 0 18px #B9D995;150 opacity: 0.6;151 display:flex; align-items:center; justify-content:center;152 }153 .node.small { width: 200px; height: 200px; }154 .node.lock svg { width: 72px; height: 72px; opacity: 0.9; }155 .path .row { display:flex; justify-content: space-between; align-items:center; margin: 40px 0; }156 .chest {157 width: 340px; height: 230px; background:#E0E0E0; border:1px solid #BDBDBD;158 color:#757575; display:flex; align-items:center; justify-content:center; border-radius:16px;159 opacity:0.65;160 }161 162 /* Watermark "duolingo" */163 .watermark {164 position: absolute;165 top: 940px;166 left: 200px;167 width: 700px;168 text-align: center;169 font-size: 140px;170 color: rgba(110,150,95,0.45);171 font-weight: 800;172 letter-spacing: 2px;173 }174 .owl-shadow {175 position: absolute;176 top: 1050px;177 right: 150px;178 width: 220px;179 height: 220px;180 background: rgba(110,150,95,0.25);181 border-radius: 24px;182 filter: blur(2px);183 display:flex; align-items:center; justify-content:center;184 color: rgba(110,150,95,0.5);185 font-weight:700;186 }187 188 /* Bottom navigation */189 .bottom-bar {190 position: absolute;191 bottom: 0;192 left: 0;193 width: 1080px;194 height: 160px;195 background: #E5F3C9;196 border-top-left-radius: 28px; border-top-right-radius: 28px;197 box-shadow: 0 -2px 0 rgba(0,0,0,0.05) inset;198 display: flex;199 align-items: center;200 justify-content: space-around;201 padding: 0 20px;202 box-sizing: border-box;203 }204 .nav-item {205 width: 140px; height: 110px; border-radius: 26px;206 display:flex; align-items:center; justify-content:center; flex-direction:column;207 color: #7B8D5F; font-size: 30px; font-weight: 700;208 }209 .nav-item.active { background: #D8EFB8; border: 4px solid #AECF8C; }210 .nav-ic { width: 60px; height: 60px; margin-bottom: 8px; }211</style>212</head>213<body>214<div id="render-target">215 216 <!-- Status Bar -->217 <div class="status-bar">218 <div class="status-left">219 <div>7:59</div>220 <div class="mini-dot"></div>221 <div class="mini-dot"></div>222 <div class="mini-dot"></div>223 <div class="mini-dot"></div>224 <div class="mini-dot"></div>225 <div class="mini-dot" style="opacity:0.3;"></div>226 </div>227 <div class="status-right">228 <!-- WiFi -->229 <svg class="icon-wifi" viewBox="0 0 24 24" fill="#1b1b1b">230 <path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8z"></path>231 <path d="M6 12c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2z"></path>232 <circle cx="12" cy="18" r="2"></circle>233 </svg>234 <!-- Battery -->235 <svg class="icon-battery" viewBox="0 0 28 16">236 <rect x="1" y="3" width="22" height="10" rx="2" fill="#1b1b1b"></rect>237 <rect x="3" y="5" width="14" height="6" fill="#9EE37D"></rect>238 <rect x="23" y="6" width="3" height="4" fill="#1b1b1b"></rect>239 </svg>240 </div>241 </div>242 243 <!-- Top Counters -->244 <div class="top-counters">245 <div class="counter">246 <div class="badge"></div>247 </div>248 <div class="counter">249 <div class="pill orange">250 <svg width="30" height="34" viewBox="0 0 24 24" fill="#FF8A00">251 <path d="M12 2c1 3-2 5-2 7 0 2 2 3 2 5 0 3-2 5-4 5 6 0 10-4 10-9 0-3-3-5-6-8z"></path>252 </svg>253 </div>254 <div>1</div>255 </div>256 <div class="counter">257 <div class="pill blue">258 <svg width="32" height="32" viewBox="0 0 24 24" fill="#00BCD4">259 <path d="M12 2l6 7-6 13-6-13 6-7z"></path>260 </svg>261 </div>262 <div>170</div>263 </div>264 <div class="counter" style="margin-left:auto; margin-right:24px;">265 <div class="pill red">266 <svg width="32" height="32" viewBox="0 0 24 24" fill="#F44336">267 <path d="M12 21s-6-4.35-9-8A5.25 5.25 0 0 1 12 5a5.25 5.25 0 0 1 9 8c-3 3.65-9 8-9 8z"></path>268 </svg>269 </div>270 <div>5</div>271 </div>272 </div>273 274 <!-- Lesson Header Card -->275 <div class="header-card">276 <div class="sub">SECTION 1, UNIT 1</div>277 <div class="title">Pair letters and sounds</div>278 </div>279 280 <!-- Start Bubble -->281 <div class="start-bubble">282 <svg width="38" height="38" viewBox="0 0 24 24" fill="#8A9D5A">283 <path d="M13 2L3 14h6l-2 8 10-12h-6z"></path>284 </svg>285 <div>START</div>286 </div>287 <div class="start-tail"></div>288 289 <!-- Main Node -->290 <div class="main-node">291 <svg class="star" viewBox="0 0 24 24" fill="#fff">292 <path d="M12 2l2.9 6.1L22 9.3l-5 4.9L18 22l-6-3.2L6 22l1-7.8-5-4.9 7.1-1.2L12 2z"></path>293 </svg>294 </div>295 296 <!-- Path Nodes -->297 <div class="path">298 <div class="row" style="justify-content:center;">299 <div class="node lock">300 <svg viewBox="0 0 24 24" fill="#6C8A58">301 <path d="M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z"></path>302 </svg>303 </div>304 </div>305 <div class="row">306 <div class="node small lock">307 <svg viewBox="0 0 24 24" fill="#6C8A58">308 <path d="M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z"></path>309 </svg>310 </div>311 <div class="node small lock">312 <svg viewBox="0 0 24 24" fill="#6C8A58">313 <path d="M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z"></path>314 </svg>315 </div>316 </div>317 <div class="row" style="justify-content:center;">318 <div class="chest">[IMG: Treasure Chest - Locked]</div>319 </div>320 <div class="row">321 <div class="node small lock">322 <svg viewBox="0 0 24 24" fill="#6C8A58">323 <path d="M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z"></path>324 </svg>325 </div>326 <div class="node small lock">327 <svg viewBox="0 0 24 24" fill="#6C8A58">328 <path d="M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z"></path>329 </svg>330 </div>331 </div>332 <div class="row" style="justify-content:center;">333 <div class="node lock">334 <svg viewBox="0 0 24 24" fill="#6C8A58">335 <path d="M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z"></path>336 </svg>337 </div>338 </div>339 </div>340 341 <div class="watermark">duolingo</div>342 <div class="owl-shadow">owl</div>343 344 <!-- Bottom Navigation -->345 <div class="bottom-bar">346 <div class="nav-item active">347 <svg class="nav-ic" viewBox="0 0 24 24" fill="#A96C20">348 <path d="M3 11l9-8 9 8v9a2 2 0 0 1-2 2h-5v-7H10v7H5a2 2 0 0 1-2-2v-9z"></path>349 </svg>350 </div>351 <div class="nav-item">352 <div style="font-size:64px; color:#59B200; font-weight:900;">क</div>353 </div>354 <div class="nav-item">355 <svg class="nav-ic" viewBox="0 0 24 24" fill="#9A9B63">356 <path d="M12 2l7 4v6c0 5-4 8-7 10-3-2-7-5-7-10V6l7-4z"></path>357 </svg>358 </div>359 <div class="nav-item">360 <svg class="nav-ic" viewBox="0 0 24 24" fill="#8A9D5A">361 <circle cx="12" cy="8" r="4"></circle>362 <path d="M4 22c1-5 7-6 8-6s7 1 8 6H4z"></path>363 </svg>364 </div>365 <div class="nav-item">366 <svg class="nav-ic" viewBox="0 0 24 24" fill="#B9A541">367 <rect x="3" y="8" width="18" height="10" rx="2"></rect>368 <rect x="6" y="4" width="12" height="6" rx="2"></rect>369 <rect x="10" y="11" width="4" height="4" fill="#DCCB64"></rect>370 </svg>371 </div>372 <div class="nav-item">373 <svg class="nav-ic" viewBox="0 0 24 24" fill="#C59C2B">374 <path d="M12 2a5 5 0 0 1 5 5v2a6 6 0 0 1 2 4v4a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3v-4a6 6 0 0 1 2-4V7a5 5 0 0 1 5-5z"></path>375 </svg>376 </div>377 </div>378 379</div>380</body>381</html>