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>All Tasks 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: #FFFFFF;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #111;17 }18 19 /* Header */20 .header {21 position: relative;22 padding-top: 110px;23 }24 .top-left-checkbox {25 position: absolute;26 left: 54px;27 top: 120px;28 width: 56px;29 height: 56px;30 border: 2px solid #CFCFCF;31 border-radius: 10px;32 background: #fff;33 }34 .title {35 text-align: center;36 font-weight: 800;37 font-size: 38px;38 letter-spacing: 0.5px;39 color: #111;40 }41 .header-actions {42 position: absolute;43 right: 60px;44 top: 98px;45 display: flex;46 gap: 22px;47 align-items: center;48 }49 .circle-btn {50 width: 92px;51 height: 92px;52 border-radius: 50%;53 background: #fff;54 box-shadow: 0 12px 28px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);55 display: flex;56 align-items: center;57 justify-content: center;58 }59 .circle-btn svg { width: 42px; height: 42px; }60 61 /* Sections */62 .sections {63 margin-top: 60px;64 padding-left: 56px;65 padding-right: 56px;66 }67 .section {68 position: relative;69 margin-bottom: 66px;70 }71 .section-title {72 font-size: 56px;73 font-weight: 800;74 line-height: 1.1;75 color: #111;76 }77 .section .plus {78 position: absolute;79 right: 0;80 top: 6px;81 width: 56px;82 height: 56px;83 opacity: 0.6;84 }85 .plus svg { width: 56px; height: 56px; }86 87 /* Task item inside Upcoming */88 .task {89 display: flex;90 align-items: center;91 margin-top: 26px;92 margin-left: 20px;93 }94 .radio {95 width: 36px;96 height: 36px;97 border-radius: 50%;98 border: 3px solid #B9C1CC;99 margin-right: 16px;100 background: #fff;101 }102 .task-text {103 font-size: 40px;104 color: #333;105 font-weight: 500;106 }107 108 /* Promo pill */109 .promo-pill {110 position: absolute;111 left: 50%;112 bottom: 390px;113 transform: translateX(-50%);114 width: 640px;115 height: 110px;116 border-radius: 55px;117 border: 2px solid #2E73FF;118 background: #fff;119 box-shadow: 0 18px 40px rgba(0,0,0,0.12);120 display: flex;121 overflow: hidden;122 }123 .promo-text {124 flex: 1;125 display: flex;126 align-items: center;127 justify-content: center;128 color: #2E73FF;129 font-weight: 700;130 font-size: 34px;131 letter-spacing: 0.2px;132 }133 .promo-close {134 width: 110px;135 border-left: 2px solid #2E73FF;136 display: flex;137 align-items: center;138 justify-content: center;139 color: #2E73FF;140 font-weight: 800;141 font-size: 32px;142 }143 144 /* Bottom area */145 .bottom-bar {146 position: absolute;147 left: 0;148 right: 0;149 bottom: 160px;150 padding-left: 130px;151 padding-right: 130px;152 display: flex;153 align-items: center;154 gap: 40px;155 }156 .home-wrap {157 position: absolute;158 left: 70px;159 bottom: 190px;160 width: 70px;161 height: 70px;162 }163 .input-prompt {164 flex: 1;165 height: 120px;166 background: #FFFFFF;167 border-radius: 60px;168 box-shadow: 0 24px 60px rgba(0,0,0,0.12);169 display: flex;170 align-items: center;171 padding: 0 44px;172 color: #9AA1A9;173 font-size: 40px;174 font-weight: 600;175 }176</style>177</head>178<body>179<div id="render-target">180 181 <div class="header">182 <div class="top-left-checkbox"></div>183 <div class="title">ALL TASKS</div>184 <div class="header-actions">185 <div class="circle-btn" aria-label="Starred">186 <svg viewBox="0 0 24 24">187 <path d="M12 2.5l3.06 6.21 6.84.99-4.95 4.83 1.17 6.82L12 18.7 5.88 21.35l1.17-6.82-4.95-4.83 6.84-.99L12 2.5z" fill="#2E73FF"/>188 </svg>189 </div>190 <div class="circle-btn" aria-label="More">191 <svg viewBox="0 0 24 24">192 <circle cx="6" cy="12" r="2.2" fill="#8E8E93"></circle>193 <circle cx="12" cy="12" r="2.2" fill="#8E8E93"></circle>194 <circle cx="18" cy="12" r="2.2" fill="#8E8E93"></circle>195 </svg>196 </div>197 </div>198 </div>199 200 <div class="sections">201 <div class="section">202 <div class="section-title">Today</div>203 <div class="plus">204 <svg viewBox="0 0 24 24">205 <path d="M12 5v14M5 12h14" stroke="#9FA5AF" stroke-width="2.6" stroke-linecap="round"/>206 </svg>207 </div>208 </div>209 210 <div class="section">211 <div class="section-title">Tomorrow</div>212 <div class="plus">213 <svg viewBox="0 0 24 24">214 <path d="M12 5v14M5 12h14" stroke="#9FA5AF" stroke-width="2.6" stroke-linecap="round"/>215 </svg>216 </div>217 </div>218 219 <div class="section">220 <div class="section-title">Upcoming</div>221 <div class="plus">222 <svg viewBox="0 0 24 24">223 <path d="M12 5v14M5 12h14" stroke="#9FA5AF" stroke-width="2.6" stroke-linecap="round"/>224 </svg>225 </div>226 <div class="task">227 <div class="radio"></div>228 <div class="task-text">Boxing classes</div>229 </div>230 </div>231 232 <div class="section">233 <div class="section-title">Someday</div>234 <div class="plus">235 <svg viewBox="0 0 24 24">236 <path d="M12 5v14M5 12h14" stroke="#9FA5AF" stroke-width="2.6" stroke-linecap="round"/>237 </svg>238 </div>239 </div>240 </div>241 242 <div class="promo-pill" role="button" aria-label="Promotion">243 <div class="promo-text">3 Days Only - 50% Off!</div>244 <div class="promo-close">X</div>245 </div>246 247 <div class="home-wrap" aria-hidden="true">248 <svg viewBox="0 0 24 24">249 <path d="M4 10.5l8-6 8 6v8.5a1.5 1.5 0 0 1-1.5 1.5H5.5A1.5 1.5 0 0 1 4 19V10.5z" fill="none" stroke="#2E73FF" stroke-width="2.2" stroke-linejoin="round"/>250 <path d="M9 21v-6h6v6" fill="none" stroke="#2E73FF" stroke-width="2.2" stroke-linecap="round"/>251 </svg>252 </div>253 254 <div class="bottom-bar">255 <div class="input-prompt">I want to...</div>256 </div>257 258</div>259</body>260</html>