GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Reminder UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #cfd4df;14 border-radius: 0;15 box-shadow: none;16 color: #243245;17 }18 19 /* Top dark header */20 .header {21 position: relative;22 width: 100%;23 height: 470px;24 background: #394a62;25 color: #e9eef6;26 box-sizing: border-box;27 }28 29 /* Status bar */30 .status-bar {31 height: 90px;32 padding: 30px 36px;33 display: flex;34 align-items: center;35 justify-content: space-between;36 font-weight: 500;37 letter-spacing: 0.3px;38 }39 .status-left {40 display: flex;41 align-items: center;42 gap: 20px;43 font-size: 34px;44 }45 .status-right {46 display: flex;47 align-items: center;48 gap: 26px;49 }50 .status-icon svg { width: 38px; height: 38px; fill: none; stroke: #ffffff; stroke-width: 2.5; }51 52 /* App bar row */53 .appbar {54 padding: 12px 36px 0 36px;55 display: flex;56 align-items: center;57 justify-content: space-between;58 }59 .appbar-left {60 display: flex;61 align-items: center;62 gap: 26px;63 }64 .hamburger svg, .app-icon svg { width: 56px; height: 56px; fill: none; stroke: #e9eef6; stroke-width: 5; }65 .title {66 font-size: 66px;67 font-weight: 600;68 letter-spacing: 0.5px;69 margin-top: 8px;70 }71 .appbar-right {72 display: flex;73 align-items: center;74 gap: 36px;75 }76 77 /* Chips */78 .chips {79 margin-top: 40px;80 padding: 0 36px;81 display: flex;82 gap: 26px;83 flex-wrap: nowrap;84 }85 .chip {86 padding: 20px 34px;87 border-radius: 22px;88 border: 2px solid #2e3b52;89 color: #dee6f2;90 font-size: 36px;91 letter-spacing: 0.3px;92 box-shadow: inset 0 0 0 0 rgba(0,0,0,0);93 }94 .chip.active {95 border-color: #d8d161;96 background: rgba(255,255,255,0.05);97 color: #fff;98 }99 100 /* List area */101 .list {102 position: relative;103 background: #d5d9e5;104 }105 .item {106 padding: 34px 36px;107 border-top: 1px solid #b6bfcd;108 border-bottom: 1px solid #b6bfcd;109 background: #d7dbe6;110 }111 .item + .item { margin-top: 0; }112 .item-title {113 font-size: 54px;114 font-weight: 700;115 color: #202a39;116 margin-bottom: 10px;117 }118 .item-meta {119 font-size: 34px;120 color: #667187;121 margin-bottom: 10px;122 }123 .item-repeat {124 font-size: 34px;125 color: #667187;126 }127 .item-right {128 position: absolute;129 right: 36px;130 top: 30px;131 text-align: right;132 }133 .item-right .status {134 font-size: 36px;135 color: #6d7b92;136 margin-bottom: 8px;137 }138 .star {139 width: 40px;140 height: 40px;141 margin-left: auto;142 }143 .star svg { width: 40px; height: 40px; fill: #d33b32; }144 145 /* Floating action button */146 .fab {147 position: absolute;148 right: 70px;149 bottom: 300px;150 width: 140px;151 height: 140px;152 border-radius: 50%;153 background: #3a4c66;154 display: flex;155 align-items: center;156 justify-content: center;157 color: #ffffff;158 font-size: 86px;159 line-height: 0;160 box-shadow: 0 16px 24px rgba(0,0,0,0.25), 0 4px 8px rgba(0,0,0,0.18);161 }162 163 /* Bottom tabs */164 .bottom-tabs {165 position: absolute;166 left: 0;167 bottom: 144px;168 width: 100%;169 height: 120px;170 padding: 0 60px;171 display: flex;172 align-items: center;173 justify-content: space-between;174 color: #333c4c;175 }176 .tab {177 font-size: 42px;178 letter-spacing: 0.4px;179 color: #333c4c;180 }181 .tab.active {182 font-weight: 700;183 text-decoration: underline;184 }185 186 /* Gesture bar */187 .gesture {188 position: absolute;189 left: 50%;190 transform: translateX(-50%);191 bottom: 68px;192 width: 420px;193 height: 14px;194 background: #8a909c;195 border-radius: 8px;196 }197</style>198</head>199<body>200<div id="render-target">201 202 <div class="header">203 <!-- Status bar -->204 <div class="status-bar">205 <div class="status-left">206 <span>12:36</span>207 <span class="status-icon" aria-label="sun">208 <svg viewBox="0 0 24 24">209 <circle cx="12" cy="12" r="4" fill="none" stroke="#ffffff" stroke-width="2.2"></circle>210 <path d="M12 1v3M12 20v3M1 12h3M20 12h3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M19.8 4.2l-2.1 2.1M4.2 19.8l2.1-2.1" stroke="#ffffff" stroke-width="2" />211 </svg>212 </span>213 </div>214 <div class="status-right">215 <span class="status-icon" aria-label="wifi">216 <svg viewBox="0 0 24 24">217 <path d="M2 8c5-4 15-4 20 0" />218 <path d="M5 12c3-3 11-3 14 0" />219 <path d="M8 16c2-2 6-2 8 0" />220 <circle cx="12" cy="19" r="1.6" fill="#ffffff" stroke="none"></circle>221 </svg>222 </span>223 <span class="status-icon" aria-label="battery">224 <svg viewBox="0 0 28 16">225 <rect x="1" y="3" width="22" height="10" rx="2" />226 <rect x="24" y="6" width="3" height="4" rx="1" />227 <rect x="3" y="5" width="16" height="6" fill="#ffffff" stroke="none"></rect>228 </svg>229 </span>230 </div>231 </div>232 233 <!-- App bar -->234 <div class="appbar">235 <div class="appbar-left">236 <div class="hamburger" aria-label="menu">237 <svg viewBox="0 0 24 24">238 <path d="M3 6h18M3 12h18M3 18h18" />239 </svg>240 </div>241 <div class="title">Reminder</div>242 </div>243 <div class="appbar-right">244 <div class="app-icon" aria-label="search">245 <svg viewBox="0 0 24 24">246 <circle cx="11" cy="11" r="6" />247 <path d="M20 20l-4-4" />248 </svg>249 </div>250 <div class="app-icon" aria-label="filter">251 <svg viewBox="0 0 24 24">252 <path d="M4 6h16M8 6v2M16 12h-8M12 12v2M6 18h12M15 18v2" />253 </svg>254 </div>255 </div>256 </div>257 258 <!-- Chips -->259 <div class="chips">260 <div class="chip active">All</div>261 <div class="chip">Critical</div>262 <div class="chip">Important</div>263 <div class="chip">Favorites</div>264 <div class="chip">Optional</div>265 </div>266 </div>267 268 <!-- List items -->269 <div class="list">270 <div class="item" style="position: relative;">271 <div class="item-title">Brother´s birthday</div>272 <div class="item-meta">09/28/2023 8:00 PM</div>273 <div class="item-repeat">Every Day</div>274 <div class="item-right">275 <div class="status">Today</div>276 <div class="star" aria-label="favorite">277 <svg viewBox="0 0 24 24">278 <path d="M12 2l3.1 6.7 7 .9-5.2 4.8 1.4 7.1L12 18l-6.3 3.5 1.4-7.1L2 9.6l7-.9z"></path>279 </svg>280 </div>281 </div>282 </div>283 284 <div class="item" style="position: relative;">285 <div class="item-title">Mom's anniversary</div>286 <div class="item-meta">10/5/2023 12:00 AM</div>287 <div class="item-repeat">One Time</div>288 <div class="item-right">289 <div class="status">in 7 days</div>290 </div>291 </div>292 </div>293 294 <!-- Floating action button -->295 <div class="fab" aria-label="add">+</div>296 297 <!-- Bottom tabs -->298 <div class="bottom-tabs">299 <div class="tab active">ACTIVE</div>300 <div class="tab">COMPLETED</div>301 </div>302 303 <!-- Gesture bar -->304 <div class="gesture"></div>305 306</div>307</body>308</html>