GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Reminder UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #d9dee9; /* page background */14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;15 color: #e6eef7;16 }17 18 /* Top dark header area */19 .top-header {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 520px;25 background: #2f4a66;26 }27 28 /* Status bar */29 .status-bar {30 height: 90px;31 display: flex;32 align-items: center;33 padding: 0 40px;34 font-size: 38px;35 color: #d9e4ef;36 }37 .status-spacer { flex: 1; }38 .status-icons {39 display: flex;40 align-items: center;41 gap: 26px;42 color: #d9e4ef;43 }44 .icon svg { fill: none; stroke: #d9e4ef; stroke-width: 6; }45 46 /* App bar */47 .app-bar {48 height: 140px;49 display: flex;50 align-items: center;51 padding: 0 40px;52 gap: 26px;53 color: #e6eef7;54 }55 .title {56 font-size: 58px;57 font-weight: 600;58 letter-spacing: 0.5px;59 }60 .app-bar .actions {61 margin-left: auto;62 display: flex;63 align-items: center;64 gap: 40px;65 }66 .app-bar .icon svg { stroke-width: 7; }67 68 /* Chips row */69 .chips {70 height: 150px;71 display: flex;72 align-items: center;73 padding: 0 40px 0 40px;74 gap: 24px;75 }76 .chip {77 color: #cdd7e3;78 border: 2px solid #546a84;79 border-radius: 26px;80 padding: 26px 40px;81 font-size: 36px;82 background: transparent;83 }84 .chip.active {85 border-color: #e0d25f;86 color: #fff7bf;87 }88 89 /* Content area beneath header */90 .content {91 position: absolute;92 top: 520px;93 left: 0;94 right: 0;95 bottom: 0;96 background: #d9dee9;97 }98 99 /* Reminder list */100 .list {101 padding-top: 20px;102 }103 .item {104 padding: 40px;105 border-top: 1px solid #c7ccd6;106 border-bottom: 1px solid #c7ccd6;107 background: rgba(255,255,255,0.15);108 }109 .item + .item { margin-top: 10px; }110 .item-row {111 display: flex;112 align-items: flex-start;113 }114 .left {115 flex: 1;116 color: #2b3a4a;117 }118 .right {119 width: 280px;120 text-align: right;121 color: #6a86a7;122 font-size: 34px;123 margin-top: 16px;124 }125 .title-item {126 font-size: 48px;127 font-weight: 600;128 margin-bottom: 16px;129 color: #2b3a4a;130 }131 .meta {132 font-size: 34px;133 color: #708090;134 margin-bottom: 8px;135 }136 .meta.small {137 font-size: 34px;138 color: #7a8a9b;139 }140 141 /* Floating action button */142 .fab {143 position: absolute;144 right: 60px;145 bottom: 320px;146 width: 150px;147 height: 150px;148 background: #2f4a66;149 border-radius: 50%;150 box-shadow: 0 20px 30px rgba(0,0,0,0.25);151 display: flex;152 justify-content: center;153 align-items: center;154 }155 .fab span {156 color: #ffffff;157 font-size: 88px;158 line-height: 1;159 }160 161 /* Bottom tabs */162 .bottom-tabs {163 position: absolute;164 bottom: 140px;165 left: 0;166 width: 100%;167 display: flex;168 justify-content: space-between;169 padding: 0 120px;170 color: #2b2b2b;171 }172 .tab {173 font-size: 38px;174 letter-spacing: 1px;175 color: #2b2b2b;176 }177 .tab.active {178 font-weight: 700;179 text-decoration: underline;180 }181 182 /* Gesture bar */183 .gesture {184 position: absolute;185 bottom: 70px;186 left: 50%;187 transform: translateX(-50%);188 width: 420px;189 height: 16px;190 background: #7a7a7a;191 border-radius: 10px;192 opacity: 0.9;193 }194</style>195</head>196<body>197<div id="render-target">198 <!-- Top header -->199 <div class="top-header">200 <div class="status-bar">201 <div>3:23</div>202 <div class="status-spacer"></div>203 <div class="status-icons">204 <div class="icon">205 <!-- Wi-Fi (simple) -->206 <svg width="40" height="40" viewBox="0 0 40 40">207 <path d="M6 16c8-8 20-8 28 0" />208 <path d="M11 21c6-6 12-6 18 0" />209 <path d="M16 26c4-4 8-4 12 0" />210 <circle cx="20" cy="31" r="2.5" fill="#d9e4ef" stroke="none"></circle>211 </svg>212 </div>213 <div class="icon">214 <!-- Battery -->215 <svg width="54" height="40" viewBox="0 0 54 40">216 <rect x="2" y="8" width="42" height="24" rx="4" />217 <rect x="46" y="14" width="6" height="12" rx="2" />218 <rect x="6" y="12" width="28" height="16" fill="#d9e4ef" stroke="none"></rect>219 </svg>220 </div>221 </div>222 </div>223 224 <div class="app-bar">225 <div class="icon">226 <!-- Hamburger -->227 <svg width="60" height="60" viewBox="0 0 60 60">228 <path d="M8 14h44" />229 <path d="M8 30h44" />230 <path d="M8 46h44" />231 </svg>232 </div>233 <div class="title">Reminder</div>234 <div class="actions">235 <div class="icon">236 <!-- Search -->237 <svg width="60" height="60" viewBox="0 0 60 60">238 <circle cx="26" cy="26" r="16"></circle>239 <path d="M40 40l12 12"></path>240 </svg>241 </div>242 <div class="icon">243 <!-- Filter -->244 <svg width="60" height="60" viewBox="0 0 60 60">245 <path d="M8 16h44"></path>246 <path d="M16 30h28"></path>247 <path d="M24 44h12"></path>248 </svg>249 </div>250 </div>251 </div>252 253 <div class="chips">254 <div class="chip active">All</div>255 <div class="chip">Default</div>256 <div class="chip">Critical</div>257 <div class="chip">Important</div>258 <div class="chip">Favorites</div>259 </div>260 </div>261 262 <!-- Content -->263 <div class="content">264 <div class="list">265 <div class="item">266 <div class="item-row">267 <div class="left">268 <div class="title-item">movie</div>269 <div class="meta">06/15/2023 9:30 PM</div>270 <div class="meta small">One Time</div>271 </div>272 <div class="right">in 3 days</div>273 </div>274 </div>275 276 <div class="item">277 <div class="item-row">278 <div class="left">279 <div class="title-item">Health checkup</div>280 <div class="meta">06/28/2023 11:45 AM</div>281 <div class="meta small">One Time</div>282 </div>283 <div class="right">in 16 days</div>284 </div>285 </div>286 </div>287 288 <div class="fab"><span>+</span></div>289 290 <div class="bottom-tabs">291 <div class="tab active">ACTIVE</div>292 <div class="tab">COMPLETED</div>293 </div>294 295 <div class="gesture"></div>296 </div>297</div>298</body>299</html>