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: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #d7dde9; /* light bluish page background */15 color: #222;16 }17 18 /* Top blue area */19 .top-bar { background: #2f4762; color: #eef5ff; }20 .statusbar {21 height: 110px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 padding: 0 40px;26 font-size: 42px;27 letter-spacing: 0.5px;28 }29 .status-icons { display: flex; align-items: center; gap: 28px; }30 31 .appbar {32 height: 150px;33 display: flex;34 align-items: center;35 padding: 0 36px;36 gap: 28px;37 }38 .app-title {39 font-size: 64px;40 font-weight: 600;41 letter-spacing: 0.3px;42 flex: 1;43 }44 .app-actions {45 display: flex;46 align-items: center;47 gap: 36px;48 padding-right: 10px;49 }50 .icon-btn svg { fill: none; stroke: #eef5ff; stroke-width: 4; }51 52 .chip-row {53 height: 130px;54 display: flex;55 align-items: center;56 gap: 24px;57 padding: 0 36px 28px 36px;58 border-bottom: 1px solid #24384f;59 }60 .chip {61 padding: 20px 34px;62 border-radius: 22px;63 background: #3a4e68;64 border: 2px solid #2c3f58;65 color: #d7e2ef;66 font-size: 36px;67 }68 .chip.active {69 background: #3a4e68;70 border: 3px solid #e9dc63;71 color: #fff7b0;72 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);73 }74 75 /* List area */76 .list {77 position: relative;78 background: #d7dde9;79 }80 .item {81 padding: 36px 40px 40px 40px;82 border-bottom: 1px solid #b9c1cf;83 }84 .item-title {85 font-size: 56px;86 color: #24384f;87 margin-bottom: 10px;88 }89 .item-sub {90 font-size: 34px;91 color: #6b7a8d;92 margin-bottom: 6px;93 }94 .item-row {95 display: flex;96 justify-content: space-between;97 align-items: baseline;98 }99 .item-right {100 font-size: 34px;101 color: #5a6a7f;102 }103 104 /* Snackbar */105 .snackbar {106 position: absolute;107 left: 180px;108 bottom: 370px;109 width: 720px;110 height: 120px;111 background: #fbfbef;112 border-radius: 60px;113 box-shadow: 0 8px 16px rgba(0,0,0,0.25);114 display: flex;115 align-items: center;116 padding: 0 30px;117 gap: 24px;118 }119 .snackbar .img {120 width: 86px; height: 86px;121 background: #E0E0E0;122 border: 1px solid #BDBDBD;123 border-radius: 50%;124 display: flex; align-items: center; justify-content: center;125 font-size: 20px; color: #757575;126 }127 .snackbar-text { font-size: 38px; color: #24384f; }128 129 /* FAB */130 .fab {131 position: absolute;132 right: 70px;133 bottom: 320px;134 width: 160px; height: 160px;135 background: #2f4762;136 border-radius: 50%;137 box-shadow: 0 16px 24px rgba(0,0,0,0.35);138 display: flex; align-items: center; justify-content: center;139 }140 .fab svg { stroke: #ffffff; stroke-width: 10; }141 142 /* Bottom tabs */143 .bottom-tabs {144 position: absolute;145 bottom: 150px;146 left: 0; right: 0;147 height: 120px;148 display: flex;149 align-items: center;150 justify-content: space-between;151 padding: 0 120px;152 color: #2b313a;153 }154 .tab {155 font-size: 42px;156 letter-spacing: 1px;157 color: #2b313a;158 }159 .tab.active { font-weight: 700; }160 161 /* Gesture bar */162 .gesture {163 position: absolute;164 bottom: 70px;165 left: 50%;166 transform: translateX(-50%);167 width: 420px;168 height: 16px;169 background: #8a8f99;170 border-radius: 10px;171 }172 173 /* Simple utility for subtle divider offset under top area */174 .top-shadow { height: 0; box-shadow: 0 4px 0 rgba(0,0,0,0.06); }175</style>176</head>177<body>178<div id="render-target">179 180 <div class="top-bar">181 <div class="statusbar">182 <div>3:29</div>183 <div class="status-icons">184 <!-- WiFi icon -->185 <svg width="48" height="36" viewBox="0 0 48 36">186 <path d="M4 10c8-6 32-6 40 0" stroke="#eef5ff" stroke-width="4" fill="none"/>187 <path d="M10 18c6-4 22-4 28 0" stroke="#eef5ff" stroke-width="4" fill="none"/>188 <path d="M18 26c4-2 8-2 12 0" stroke="#eef5ff" stroke-width="4" fill="none"/>189 <circle cx="24" cy="32" r="2.5" fill="#eef5ff"/>190 </svg>191 <!-- Battery icon -->192 <svg width="60" height="32" viewBox="0 0 60 32">193 <rect x="2" y="6" width="46" height="20" rx="4" fill="none" stroke="#eef5ff" stroke-width="4"/>194 <rect x="6" y="10" width="36" height="12" rx="2" fill="#eef5ff"/>195 <rect x="50" y="11" width="8" height="10" rx="2" fill="#eef5ff"/>196 </svg>197 </div>198 </div>199 200 <div class="appbar">201 <!-- Hamburger -->202 <div class="icon-btn">203 <svg width="64" height="64" viewBox="0 0 64 64">204 <path d="M10 16H54M10 32H54M10 48H54" />205 </svg>206 </div>207 <div class="app-title">Reminder</div>208 <div class="app-actions">209 <!-- Search -->210 <div class="icon-btn">211 <svg width="60" height="60" viewBox="0 0 60 60">212 <circle cx="26" cy="26" r="16" />213 <path d="M40 40L54 54" />214 </svg>215 </div>216 <!-- Filter -->217 <div class="icon-btn">218 <svg width="64" height="64" viewBox="0 0 64 64">219 <path d="M8 16H56L40 34V50L24 56V34L8 16Z" />220 </svg>221 </div>222 </div>223 </div>224 225 <div class="chip-row">226 <div class="chip active">All</div>227 <div class="chip">Default</div>228 <div class="chip">Critical</div>229 <div class="chip">Important</div>230 <div class="chip">Favorites</div>231 </div>232 <div class="top-shadow"></div>233 </div>234 235 <div class="list">236 <div class="item">237 <div class="item-row">238 <div class="item-title">movie</div>239 <div class="item-right">in 3 days</div>240 </div>241 <div class="item-sub">06/15/2023 9:30 PM</div>242 <div class="item-sub">One Time</div>243 </div>244 245 <div class="item">246 <div class="item-row">247 <div class="item-title">Health checkup</div>248 <div class="item-right">in 16 days</div>249 </div>250 <div class="item-sub">06/28/2023 11:45 AM</div>251 <div class="item-sub">Every Month</div>252 </div>253 </div>254 255 <div class="snackbar">256 <div class="img">[IMG: App Icon]</div>257 <div class="snackbar-text">Reminder updated.</div>258 </div>259 260 <div class="fab">261 <svg width="80" height="80" viewBox="0 0 80 80">262 <path d="M40 16V64M16 40H64" />263 </svg>264 </div>265 266 <div class="bottom-tabs">267 <div class="tab active">ACTIVE</div>268 <div class="tab">COMPLETED</div>269 </div>270 271 <div class="gesture"></div>272 273</div>274</body>275</html>