GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Duolingo Streak UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target{9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#61C39C;11 }12 /* top status area */13 .status{14 position:absolute; left:0; top:0; width:100%; height:140px;15 padding:24px 34px; box-sizing:border-box; color:#0d261f; font-weight:600;16 display:flex; align-items:center; justify-content:space-between; font-size:38px;17 }18 .status .right-icons{ display:flex; gap:30px; align-items:center; color:#0d261f; opacity:.85; }19 .dot-rec{20 width:56px; height:56px; border-radius:14px; background:#FF6B6B;21 box-shadow: inset 0 0 0 6px rgba(0,0,0,0.08);22 }23 24 /* counters row under status */25 .counters{26 position:absolute; left:34px; right:34px; top:110px; height:86px;27 display:flex; gap:48px; align-items:center;28 }29 .counter{ display:flex; align-items:center; gap:16px; color:#0d261f; font-weight:700; }30 .counter .val{ font-size:44px; min-width:70px; text-align:left; }31 .ico{32 width:64px; height:64px; border-radius:18px; display:flex; align-items:center; justify-content:center;33 box-shadow: inset 0 0 0 6px rgba(0,0,0,0.06);34 }35 .ico.flame{ background:#FFB54C; }36 .ico.gem{ background:#7ED0FF; }37 .ico.heart{ background:#FF8597; }38 39 /* main dark card */40 .card{41 position:absolute; left:0; right:0; top:200px; background:#0F181B; color:#D5E7E3;42 border-top-left-radius:28px; border-top-right-radius:28px; padding:36px 34px 34px;43 box-sizing:border-box; min-height:1120px;44 box-shadow: 0 -8px 0 rgba(0,0,0,0.18) inset;45 }46 .split{47 display:flex; gap:26px;48 background:#0E1518; border:1px solid #172126; border-radius:22px; padding:34px;49 }50 .tile{51 flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;52 background:#111A1E; border-radius:20px; border:1px solid #1f2a31; padding:28px 16px;53 }54 .tile h2{ margin:8px 0 4px; font-size:56px; color:#FFD073; }55 .tile p{ margin:0; color:#A8BAB5; font-size:32px; }56 .tile:nth-child(2) h2{ color:#E6F3FF; }57 .flag-ico{58 width:80px; height:80px; border-radius:18px; background:#2A343A;59 display:flex; align-items:center; justify-content:center; margin-bottom:8px;60 }61 .dots{ margin:18px 0 8px; display:flex; gap:16px; justify-content:center; }62 .dot{ width:16px; height:16px; border-radius:50%; background:#2a343a; }63 .dot.active{ background:#FFB54C; }64 65 .section-head{66 margin-top:18px; display:flex; align-items:center; justify-content:space-between;67 padding:18px 6px 10px;68 }69 .section-head .title{ font-size:44px; font-weight:800; letter-spacing:0.5px; }70 .section-head .link{ font-size:36px; color:#8BD3FF; font-weight:800; }71 72 /* calendar */73 .calendar{74 border:1px solid #1f2a31; border-radius:22px; padding:24px; background:#0F171A;75 }76 .calendar .days,77 .calendar .nums{ display:grid; grid-template-columns:repeat(7, 1fr); gap:22px; text-align:center; }78 .calendar .days div{ color:#7F9190; font-weight:800; font-size:36px; }79 .calendar .nums{ margin-top:16px; }80 .calendar .nums .n{ color:#A5B8B3; font-size:38px; font-weight:800; display:flex; align-items:center; justify-content:center; }81 .calendar .nums .n.today{82 background:#FFBF54; color:#1a1a1a; width:94px; height:94px; margin:0 auto; border-radius:50%; box-shadow:0 6px 0 rgba(0,0,0,0.2) inset;83 }84 85 /* streak challenge row */86 .challenge{87 margin-top:24px; display:flex; align-items:center; justify-content:space-between;88 border:1px solid #1f2a31; background:#0F171A; border-radius:22px; padding:24px 26px;89 }90 .challenge .left{ display:flex; align-items:center; gap:20px; }91 .bag{92 width:80px; height:80px; border-radius:18px; background:#FFBF54; display:flex; align-items:center; justify-content:center; color:#222; font-weight:900;93 box-shadow: inset 0 -8px 0 rgba(0,0,0,0.18);94 }95 .challenge .txt{ font-size:42px; font-weight:800; color:#DDE9E6; }96 .btn-join{97 background:#78BDFB; color:#04263C; font-weight:900; padding:22px 44px; border-radius:24px; font-size:44px; border:none;98 box-shadow: 0 8px 0 rgba(0,0,0,0.18) inset;99 }100 101 /* lower course card */102 .course{103 position:absolute; left:60px; right:60px; bottom:360px; height:300px; background:#2F8B6E;104 border-radius:34px; box-shadow: inset 0 -10px 0 rgba(0,0,0,0.25);105 display:flex; flex-direction:column; justify-content:center; align-items:center; color:#D7EFE5; text-align:center; padding:0 40px;106 }107 .course .p{ font-size:42px; line-height:1.3; }108 .course .continue{109 margin-top:28px; background:#0C1113; color:#DDE9E6; border-radius:24px; padding:24px 40px; font-weight:900; font-size:46px;110 }111 112 /* bottom navigation bar */113 .nav{114 position:absolute; left:0; right:0; bottom:0; height:140px; background:#0E1417; border-top:1px solid #1b252a;115 display:flex; align-items:center; justify-content:space-around; padding:0 24px;116 }117 .nav .nav-item{ display:flex; flex-direction:column; align-items:center; color:#9AB2AC; font-size:26px; gap:8px; }118 .nav .icon{119 width:92px; height:92px; border-radius:26px; background:#151F23; border:1px solid #25333a;120 display:flex; align-items:center; justify-content:center;121 }122 .nav .icon.home{ background:#2A3A34; }123 /* simple svg defaults */124 svg{ width:44px; height:44px; fill:currentColor; }125</style>126</head>127<body>128<div id="render-target">129 130 <!-- Status bar -->131 <div class="status">132 <div>10:56</div>133 <div class="right-icons">134 <div style="width:24px;height:24px;border-radius:50%;background:#0d261f;opacity:.55;"></div>135 <div style="width:36px;height:24px;border:3px solid #0d261f;border-radius:6px;"></div>136 </div>137 </div>138 139 <!-- Counters -->140 <div class="counters">141 <div class="dot-rec" title="recording"></div>142 143 <div class="counter">144 <div class="ico flame">145 <svg viewBox="0 0 24 24">146 <path d="M12 2c1 4-2 5-2 7 0 2 2 3 2 5 0 2-2 3-4 2-2-1-3-4-2-6 1-3 4-5 6-8z"/>147 </svg>148 </div>149 <div class="val">1</div>150 </div>151 152 <div class="counter">153 <div class="ico gem">154 <svg viewBox="0 0 24 24">155 <path d="M12 3l5 3 3 5-8 10L4 11l3-5 5-3z"/>156 </svg>157 </div>158 <div class="val">505</div>159 </div>160 161 <div class="counter">162 <div class="ico heart">163 <svg viewBox="0 0 24 24">164 <path d="M12 21s-7-4.4-9-8.5C1.5 9 3.5 6 6.6 6c2 0 3.1 1.1 3.4 2.1C10.3 7.1 11.4 6 13.4 6 16.5 6 18.5 9 21 12.5 19 16.6 12 21 12 21z"/>165 </svg>166 </div>167 <div class="val">5</div>168 </div>169 </div>170 171 <!-- Main dark card -->172 <div class="card">173 <div class="split">174 <div class="tile">175 <div class="flag-ico" style="background:#2a343a;">176 <svg viewBox="0 0 24 24" style="width:60px;height:60px;color:#FFB54C">177 <path d="M12 2c1 4-2 5-2 7 0 2 2 3 2 5 0 2-2 3-4 2-2-1-3-4-2-6 1-3 4-5 6-8z"/>178 </svg>179 </div>180 <h2>1 day</h2>181 <p>Current streak</p>182 </div>183 <div class="tile">184 <div class="flag-ico">185 <svg viewBox="0 0 24 24" style="width:64px;height:64px;color:#FFBF54">186 <path d="M6 3h9l3 3-3 3H8v8H6z"/>187 </svg>188 </div>189 <h2>7 days</h2>190 <p>Next milestone</p>191 </div>192 </div>193 194 <div class="dots">195 <div class="dot active"></div>196 <div class="dot"></div>197 </div>198 199 <div class="section-head">200 <div class="title">Streak Calendar</div>201 <div class="link">VIEW</div>202 </div>203 204 <div class="calendar">205 <div class="days">206 <div>Su</div><div>Mo</div><div>Tu</div><div>We</div><div>Th</div><div>Fr</div><div>Sa</div>207 </div>208 <div class="nums">209 <div class="n">8</div>210 <div class="n today"></div>211 <div class="n">10</div>212 <div class="n">11</div>213 <div class="n">12</div>214 <div class="n">13</div>215 <div class="n">14</div>216 217 <div class="n">15</div>218 <div class="n">16</div>219 <div class="n">17</div>220 <div class="n">18</div>221 <div class="n">19</div>222 <div class="n">20</div>223 <div class="n">21</div>224 </div>225 </div>226 227 <div class="challenge">228 <div class="left">229 <div class="bag">★</div>230 <div class="txt">Streak Challenge</div>231 </div>232 <button class="btn-join">JOIN</button>233 </div>234 </div>235 236 <!-- Lower course content -->237 <div class="course">238 <div class="p">Start with essential phrases and simple grammar concepts</div>239 <div class="continue">CONTINUE</div>240 </div>241 242 <!-- Bottom nav -->243 <div class="nav">244 <div class="nav-item">245 <div class="icon home">246 <svg viewBox="0 0 24 24" style="color:#8DC9B3">247 <path d="M12 3l9 8h-3v8h-12v-8H3z"/>248 </svg>249 </div>250 </div>251 <div class="nav-item">252 <div class="icon">253 <svg viewBox="0 0 24 24" style="color:#8DC9B3">254 <path d="M5 18h14v2H5zM12 2l4 6h-8l4-6zm0 7c-3 0-5 2-5 5h10c0-3-2-5-5-5z"/>255 </svg>256 </div>257 </div>258 <div class="nav-item">259 <div class="icon">260 <svg viewBox="0 0 24 24" style="color:#8DC9B3">261 <path d="M12 2l8 6v12H4V8l8-6zm0 4l-5 3v8h10V9l-5-3z"/>262 </svg>263 </div>264 </div>265 <div class="nav-item">266 <div class="icon">267 <svg viewBox="0 0 24 24" style="color:#8DC9B3">268 <path d="M12 12a5 5 0 100-10 5 5 0 000 10zm-7 10c0-4 3-7 7-7s7 3 7 7H5z"/>269 </svg>270 </div>271 </div>272 <div class="nav-item">273 <div class="icon">274 <svg viewBox="0 0 24 24" style="color:#8DC9B3">275 <path d="M4 9l8-6 8 6-8 11-8-11zm8-2l-5 4 5 7 5-7-5-4z"/>276 </svg>277 </div>278 </div>279 <div class="nav-item">280 <div class="icon">281 <svg viewBox="0 0 24 24" style="color:#8DC9B3">282 <path d="M12 22a2 2 0 002-2h-4a2 2 0 002 2zm6-6V9a6 6 0 10-12 0v7l-2 3h16l-2-3z"/>283 </svg>284 </div>285 </div>286 </div>287 288</div>289</body>290</html>