GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Commit to learning Portuguese - UI</title>5<style>6 body {7 margin: 0;8 padding: 0;9 background: transparent;10 font-family: Arial, Helvetica, sans-serif;11 }12 #render-target {13 width: 1080px;14 height: 2400px;15 position: relative;16 overflow: hidden;17 background: #0f171a;18 color: #e8edf2;19 }20 21 /* Status bar */22 .status-bar {23 position: absolute;24 top: 0;25 left: 0;26 width: 100%;27 height: 96px;28 padding: 0 40px;29 box-sizing: border-box;30 display: flex;31 align-items: center;32 justify-content: space-between;33 color: #cfd6db;34 font-size: 36px;35 letter-spacing: 1px;36 }37 .status-left {38 display: flex;39 align-items: center;40 gap: 20px;41 }42 .status-icons {43 display: flex;44 align-items: center;45 gap: 18px;46 }47 .icon-circle {48 width: 26px;49 height: 26px;50 border-radius: 50%;51 border: 3px solid #cfd6db;52 opacity: 0.8;53 }54 .icon-dot { 55 width: 8px; height: 8px; border-radius: 50%; background:#cfd6db; 56 }57 .status-right {58 display: flex;59 align-items: center;60 gap: 12px;61 font-size: 34px;62 }63 /* Simple battery/wifi icons */64 .wifi {65 width: 36px; height: 24px; position: relative;66 }67 .wifi:before, .wifi:after {68 content: '';69 position: absolute;70 left: 0; right: 0;71 border: 3px solid #cfd6db;72 border-top: none;73 border-left-color: transparent;74 border-right-color: transparent;75 border-radius: 50%;76 }77 .wifi:before { top: 0; height: 18px; }78 .wifi:after { top: 8px; height: 10px; }79 .battery {80 width: 48px; height: 24px;81 border: 3px solid #cfd6db;82 position: relative;83 border-radius: 4px;84 }85 .battery:after {86 content: '';87 position: absolute;88 right: -10px; top: 6px;89 width: 6px; height: 12px; background: #cfd6db; border-radius: 2px;90 }91 .battery-level {92 position: absolute; left: 3px; top: 3px;93 height: 18px; width: 34px; background: #cfd6db;94 }95 96 /* Title */97 .title {98 position: absolute;99 top: 160px;100 left: 60px;101 right: 60px;102 font-size: 72px;103 font-weight: 800;104 line-height: 1.15;105 color: #eaf0f7;106 }107 108 /* Streak card */109 .card {110 position: absolute;111 left: 32px;112 right: 32px;113 top: 420px;114 height: 1040px;115 border: 2px solid #2b3a40;116 border-radius: 28px;117 background: #121b1f;118 box-sizing: border-box;119 overflow: hidden;120 }121 .streak-row {122 height: 260px;123 display: flex;124 align-items: center;125 justify-content: space-between;126 padding: 0 36px 0 36px;127 box-sizing: border-box;128 color: #f2f6fb;129 font-weight: 700;130 }131 .streak-row + .streak-row {132 border-top: 1.5px solid #29343a;133 }134 .streak-left {135 font-size: 56px;136 letter-spacing: 0.5px;137 }138 .streak-right {139 font-size: 44px;140 color: #c9d3da;141 }142 143 /* Owl + speech bubble */144 .bottom-area {145 position: absolute;146 left: 60px;147 right: 60px;148 top: 1540px;149 display: flex;150 align-items: center;151 gap: 40px;152 }153 .owl-img {154 width: 300px;155 height: 300px;156 background: #E0E0E0;157 border: 1px solid #BDBDBD;158 border-radius: 24px;159 display: flex;160 align-items: center;161 justify-content: center;162 color: #757575;163 font-size: 28px;164 text-align: center;165 padding: 10px;166 box-sizing: border-box;167 }168 .speech {169 position: relative;170 flex: 1;171 min-height: 240px;172 background: #182429;173 border: 2px solid #2b3a40;174 border-radius: 26px;175 display: flex;176 align-items: center;177 padding: 36px;178 box-sizing: border-box;179 color: #e8edf2;180 font-size: 54px;181 line-height: 1.2;182 letter-spacing: 0.2px;183 }184 .speech:before {185 content: '';186 position: absolute;187 left: -36px;188 bottom: 40px;189 width: 0; height: 0;190 border-top: 26px solid transparent;191 border-bottom: 26px solid transparent;192 border-right: 36px solid #182429;193 }194 .speech:after {195 content: '';196 position: absolute;197 left: -40px;198 bottom: 36px;199 width: 0; height: 0;200 border-top: 30px solid transparent;201 border-bottom: 30px solid transparent;202 border-right: 40px solid #2b3a40;203 z-index: -1;204 }205 206 /* Button */207 .bottom-button {208 position: absolute;209 left: 40px;210 right: 40px;211 bottom: 196px;212 height: 132px;213 background: #2a3338;214 border-radius: 68px;215 display: flex;216 align-items: center;217 justify-content: center;218 color: #8a949b;219 font-weight: 800;220 letter-spacing: 3px;221 font-size: 44px;222 border: 1px solid #3a454b;223 }224 225 /* Home indicator */226 .home-indicator {227 position: absolute;228 bottom: 88px;229 left: 50%;230 transform: translateX(-50%);231 width: 280px;232 height: 10px;233 border-radius: 6px;234 background: #d8dde2;235 opacity: 0.7;236 }237</style>238</head>239<body>240<div id="render-target">241 242 <div class="status-bar">243 <div class="status-left">244 <div>6:00</div>245 <div class="status-icons">246 <div class="icon-circle"></div>247 <div class="icon-circle"></div>248 <div class="icon-dot"></div>249 </div>250 </div>251 <div class="status-right">252 <div class="wifi"></div>253 <div class="battery">254 <div class="battery-level"></div>255 </div>256 <div>100%</div>257 </div>258 </div>259 260 <div class="title">Commit to learning Portuguese!</div>261 262 <div class="card">263 <div class="streak-row">264 <div class="streak-left">7 day streak</div>265 <div class="streak-right">Good</div>266 </div>267 <div class="streak-row">268 <div class="streak-left">14 day streak</div>269 <div class="streak-right">Great</div>270 </div>271 <div class="streak-row">272 <div class="streak-left">30 day streak</div>273 <div class="streak-right">Incredible</div>274 </div>275 <div class="streak-row">276 <div class="streak-left">50 day streak</div>277 <div class="streak-right">Unstoppable</div>278 </div>279 </div>280 281 <div class="bottom-area">282 <div class="owl-img">[IMG: Duolingo Owl holding a flame]</div>283 <div class="speech">Streak goals help you stay committed!</div>284 </div>285 286 <div class="bottom-button">SELECT STREAK GOAL</div>287 <div class="home-indicator"></div>288 289</div>290</body>291</html>