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 Mock</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: #D7DEE9; /* light bluish background */15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #1F2A33;17 }18 19 /* Top area (status + app bar + chips) */20 .top-area {21 position: relative;22 width: 100%;23 background: #2F4B66;24 color: #E8EFF6;25 box-sizing: border-box;26 }27 28 .status-bar {29 height: 90px;30 display: flex;31 align-items: center;32 justify-content: space-between;33 padding: 0 36px;34 font-size: 30px;35 opacity: 0.95;36 }37 .status-icons {38 display: flex;39 gap: 22px;40 align-items: center;41 }42 .icon {43 width: 44px;44 height: 44px;45 }46 47 .app-bar {48 height: 120px;49 display: flex;50 align-items: center;51 padding: 0 36px;52 box-sizing: border-box;53 gap: 24px;54 }55 .title {56 font-size: 56px;57 font-weight: 600;58 letter-spacing: 0.5px;59 flex: 1;60 }61 .app-actions {62 display: flex;63 gap: 28px;64 align-items: center;65 }66 67 .chips-row {68 padding: 18px 36px 28px;69 display: flex;70 gap: 22px;71 overflow-x: auto;72 box-sizing: border-box;73 }74 .chip {75 padding: 18px 28px;76 border-radius: 18px;77 border: 2px solid #22384D;78 color: #E6EEF7;79 background: #2C4460;80 font-size: 32px;81 white-space: nowrap;82 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);83 }84 .chip.selected {85 border-color: #F1E45F;86 box-shadow: inset 0 0 0 2px rgba(241,228,95,0.15);87 }88 89 /* Content area */90 .content {91 padding: 18px 0 0;92 }93 .card {94 margin: 0;95 padding: 32px 36px;96 background: #DDE3EE;97 border-top: 1px solid rgba(0,0,0,0.05);98 border-bottom: 1px solid rgba(0,0,0,0.05);99 }100 .card-inner {101 background: #D7DEEA;102 border: 1px solid #C6CEDB;103 border-radius: 10px;104 padding: 28px 30px;105 display: flex;106 align-items: flex-start;107 justify-content: space-between;108 }109 .card h3 {110 margin: 0 0 12px 0;111 font-size: 48px;112 color: #2A3B4A;113 font-weight: 600;114 }115 .meta {116 font-size: 30px;117 color: #5C6B78;118 }119 .repeat {120 margin-top: 6px;121 font-size: 30px;122 color: #7A8997;123 }124 .due {125 font-size: 30px;126 color: #6D7C8B;127 padding-top: 6px;128 white-space: nowrap;129 }130 131 /* Bottom tabs and FAB */132 .bottom-tabs {133 position: absolute;134 bottom: 140px;135 left: 0;136 right: 0;137 display: flex;138 justify-content: space-around;139 align-items: center;140 font-size: 34px;141 color: #2C2C30;142 }143 .tab-active {144 font-weight: 800;145 text-decoration: underline;146 }147 .tab-inactive {148 color: #5B5F66;149 font-weight: 600;150 }151 152 .fab {153 position: absolute;154 right: 84px;155 bottom: 260px;156 width: 142px;157 height: 142px;158 border-radius: 50%;159 background: #2F4B66;160 display: flex;161 align-items: center;162 justify-content: center;163 box-shadow: 0 10px 18px rgba(0,0,0,0.25), 0 3px 6px rgba(0,0,0,0.18);164 }165 .fab svg {166 width: 64px;167 height: 64px;168 }169 170 .gesture {171 position: absolute;172 bottom: 34px;173 left: 50%;174 transform: translateX(-50%);175 width: 390px;176 height: 12px;177 background: #70757B;178 border-radius: 8px;179 opacity: 0.7;180 }181 182 /* Utility */183 .sr { position: absolute; left: -9999px; }184</style>185</head>186<body>187<div id="render-target">188 189 <div class="top-area">190 <!-- Status bar -->191 <div class="status-bar">192 <div>11:36</div>193 <div class="status-icons">194 <!-- Simple signal/WiFi icon -->195 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#E8EFF6" stroke-width="2">196 <path d="M2 9c5-5 15-5 20 0"/>197 <path d="M6 13c3-3 9-3 12 0"/>198 <path d="M10 17c1-1 3-1 4 0"/>199 <circle cx="12" cy="20" r="1.5" fill="#E8EFF6" stroke="none"></circle>200 </svg>201 <!-- Battery icon -->202 <svg class="icon" viewBox="0 0 28 18">203 <rect x="1" y="3" width="22" height="12" rx="2" ry="2" fill="none" stroke="#E8EFF6" stroke-width="2"></rect>204 <rect x="3" y="5" width="14" height="8" rx="1.5" ry="1.5" fill="#E8EFF6"></rect>205 <rect x="23" y="7" width="3" height="6" fill="#E8EFF6"></rect>206 </svg>207 </div>208 </div>209 210 <!-- App bar -->211 <div class="app-bar">212 <!-- Hamburger -->213 <svg class="icon" viewBox="0 0 48 48" stroke="#E8EFF6" stroke-width="4" fill="none" stroke-linecap="round">214 <path d="M8 12h32M8 24h32M8 36h32"></path>215 </svg>216 217 <div class="title">Reminder</div>218 219 <div class="app-actions">220 <!-- Search -->221 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#E8EFF6" stroke-width="2" stroke-linecap="round">222 <circle cx="11" cy="11" r="7"></circle>223 <path d="M20 20l-4-4"></path>224 </svg>225 <!-- Filter funnel -->226 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#E8EFF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">227 <path d="M3 5h18l-6 7v5l-6 2v-7L3 5z"></path>228 </svg>229 </div>230 </div>231 232 <!-- Chips -->233 <div class="chips-row">234 <div class="chip selected">All</div>235 <div class="chip">Critical</div>236 <div class="chip">Important</div>237 <div class="chip">Favorites</div>238 <div class="chip">Optional</div>239 </div>240 </div>241 242 <!-- Content -->243 <div class="content">244 <div class="card">245 <div class="card-inner">246 <div>247 <h3>Kiran´s birthday</h3>248 <div class="meta">08/18/2023 8:00 PM</div>249 <div class="repeat">Every Day</div>250 </div>251 <div class="due">in 8 days</div>252 </div>253 </div>254 </div>255 256 <!-- Floating Action Button -->257 <div class="fab" aria-label="Add">258 <svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round">259 <path d="M12 5v14M5 12h14"></path>260 </svg>261 </div>262 263 <!-- Bottom tabs -->264 <div class="bottom-tabs">265 <div class="tab-active">ACTIVE</div>266 <div class="tab-inactive">COMPLETED</div>267 </div>268 269 <!-- Gesture bar -->270 <div class="gesture" aria-hidden="true"></div>271 272</div>273</body>274</html>