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>Reminder UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #d7dcea; /* soft bluish-gray */15 }16 17 /* Top bars */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 96px;24 background: #354760;25 color: #dfe7f3;26 display: flex;27 align-items: center;28 justify-content: space-between;29 padding: 0 36px;30 box-sizing: border-box;31 letter-spacing: 0.5px;32 font-size: 36px;33 }34 .app-bar {35 position: absolute;36 top: 96px;37 left: 0;38 width: 1080px;39 height: 156px;40 background: #354760;41 color: #eaf0f8;42 display: flex;43 align-items: center;44 padding: 0 36px;45 box-sizing: border-box;46 gap: 28px;47 }48 .title {49 font-size: 56px;50 font-weight: 600;51 letter-spacing: 0.5px;52 }53 .spacer { flex: 1; }54 55 /* Chips row */56 .chips {57 position: absolute;58 top: 252px;59 left: 0;60 width: 100%;61 padding: 26px 32px 22px;62 box-sizing: border-box;63 background: #354760;64 display: flex;65 gap: 24px;66 }67 .chip {68 padding: 18px 34px;69 border: 2px solid #2a374a;70 background: rgba(255,255,255,0.03);71 color: #e8edf5;72 border-radius: 22px;73 font-size: 38px;74 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);75 }76 .chip.active {77 border-color: #f1e66a;78 color: #f7f3a0;79 box-shadow: inset 0 0 0 2px rgba(241,230,106,0.25);80 }81 82 /* List area */83 .list-section {84 position: absolute;85 top: 360px;86 left: 0;87 right: 0;88 bottom: 220px;89 }90 .list-item {91 background: #dfe3f0;92 border-top: 2px solid #c7cedd;93 border-bottom: 2px solid #c7cedd;94 padding: 34px 36px;95 box-sizing: border-box;96 }97 .item-title {98 font-size: 56px;99 color: #253245;100 margin-bottom: 10px;101 }102 .meta {103 font-size: 34px;104 color: #6e7a8f;105 }106 .right-note {107 position: absolute;108 right: 36px;109 top: 32px;110 font-size: 34px;111 color: #7e889c;112 }113 114 /* Bottom tabs */115 .bottom-tabs {116 position: absolute;117 left: 0;118 right: 0;119 bottom: 120px;120 height: 90px;121 display: flex;122 align-items: center;123 padding: 0 120px;124 box-sizing: border-box;125 color: #2a2f3a;126 font-size: 40px;127 letter-spacing: 0.5px;128 }129 .tab {130 width: 50%;131 text-align: left;132 color: #2c3038;133 }134 .tab + .tab { text-align: center; }135 .tab.active {136 font-weight: 800;137 text-decoration: underline;138 text-underline-offset: 10px;139 }140 141 /* Floating Action Button */142 .fab {143 position: absolute;144 width: 152px;145 height: 152px;146 right: 72px;147 bottom: 300px;148 background: #354760;149 border-radius: 50%;150 box-shadow: 0 12px 20px rgba(0,0,0,0.25), 0 3px 4px rgba(0,0,0,0.2);151 display: flex;152 align-items: center;153 justify-content: center;154 }155 .fab span {156 color: #ffffff;157 font-size: 80px;158 line-height: 0;159 }160 161 /* Home indicator */162 .home-indicator {163 position: absolute;164 bottom: 38px;165 left: 50%;166 transform: translateX(-50%);167 width: 400px;168 height: 12px;169 background: #9aa0aa;170 border-radius: 8px;171 opacity: 0.9;172 }173 174 /* Simple icon button */175 .icon-btn {176 width: 64px;177 height: 64px;178 display: inline-flex;179 align-items: center;180 justify-content: center;181 }182 .icon {183 width: 44px;184 height: 44px;185 fill: none;186 stroke: #eaf0f8;187 stroke-width: 4;188 stroke-linecap: round;189 stroke-linejoin: round;190 }191 .status-icons {192 display: inline-flex;193 align-items: center;194 gap: 16px;195 }196 .battery {197 width: 52px;198 height: 26px;199 }200 .wifi {201 width: 42px;202 height: 42px;203 }204</style>205</head>206<body>207<div id="render-target">208 209 <!-- Status Bar -->210 <div class="status-bar">211 <div>8:45</div>212 <div class="status-icons">213 <!-- WiFi icon -->214 <svg class="wifi" viewBox="0 0 24 24">215 <path d="M2 8c5-4 15-4 20 0"></path>216 <path d="M5 11c3.5-3 10.5-3 14 0"></path>217 <path d="M8 14c2-2 6-2 8 0"></path>218 <circle cx="12" cy="18" r="1.2" fill="#eaf0f8"></circle>219 </svg>220 <!-- Battery icon with bolt -->221 <svg class="battery" viewBox="0 0 34 18">222 <rect x="1" y="3" width="28" height="12" rx="2" ry="2" stroke="#eaf0f8" fill="none" stroke-width="2"></rect>223 <rect x="29" y="6" width="4" height="6" fill="#eaf0f8"></rect>224 <polygon points="14,5 11,10 15,10 12,15 19,9 15,9" fill="#eaf0f8"></polygon>225 </svg>226 <div>100%</div>227 </div>228 </div>229 230 <!-- App Bar -->231 <div class="app-bar">232 <!-- Menu icon -->233 <div class="icon-btn">234 <svg class="icon" viewBox="0 0 24 24">235 <path d="M3 6h18M3 12h14M3 18h18"></path>236 </svg>237 </div>238 <div class="title">Reminder</div>239 <div class="spacer"></div>240 <!-- Search icon -->241 <div class="icon-btn">242 <svg class="icon" viewBox="0 0 24 24">243 <circle cx="11" cy="11" r="6"></circle>244 <path d="M16.5 16.5L21 21"></path>245 </svg>246 </div>247 <!-- Filter icon -->248 <div class="icon-btn">249 <svg class="icon" viewBox="0 0 24 24">250 <path d="M4 6h16M7 12h10M10 18h4"></path>251 </svg>252 </div>253 </div>254 255 <!-- Chips -->256 <div class="chips">257 <div class="chip active">All</div>258 <div class="chip">Critical</div>259 <div class="chip">Important</div>260 <div class="chip">Favorites</div>261 <div class="chip">Optional</div>262 </div>263 264 <!-- List Section -->265 <div class="list-section">266 <div class="list-item" style="position: relative;">267 <div class="item-title">Birthday Party!</div>268 <div class="meta">08/10/2024 7:00 PM</div>269 <div class="meta" style="margin-top: 8px;">Every Year</div>270 <div class="right-note">in 1 year</div>271 </div>272 </div>273 274 <!-- Floating Action Button -->275 <div class="fab">276 <span>+</span>277 </div>278 279 <!-- Bottom Tabs -->280 <div class="bottom-tabs">281 <div class="tab active">ACTIVE</div>282 <div class="tab">COMPLETED</div>283 </div>284 285 <!-- Home indicator -->286 <div class="home-indicator"></div>287</div>288</body>289</html>