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: "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #d9deea;15 }16 17 /* Top bars */18 .top-area { background: #3d4f6a; color: #e6edf7; }19 .status-bar {20 height: 110px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 padding: 0 40px;25 font-size: 36px;26 color: #dbe5f2;27 }28 .status-right {29 display: flex; align-items: center; gap: 18px; color: #f2f6fb;30 font-size: 34px; font-weight: 600;31 }32 .app-bar {33 height: 150px;34 display: flex; align-items: center; justify-content: space-between;35 padding: 0 36px 0 30px;36 }37 .app-left { display: flex; align-items: center; gap: 28px; }38 .title { color: #fff; font-size: 58px; font-weight: 600; letter-spacing: 0.5px; }39 .app-right { display: flex; align-items: center; gap: 42px; }40 41 /* Chips */42 .chips {43 height: 120px;44 display: flex; align-items: center;45 gap: 24px;46 padding: 0 30px;47 border-bottom: 1px solid #2f405a;48 }49 .chip {50 color: #e8eef8;51 background: transparent;52 border: 2px solid #26364f;53 padding: 16px 28px;54 border-radius: 20px;55 font-size: 34px;56 }57 .chip.active {58 border: 3px solid #e8df77;59 color: #f2eea6;60 }61 62 /* List */63 .content {64 position: absolute;65 left: 0; right: 0;66 top: 380px; /* after top-area */67 bottom: 250px; /* leave space for tabs/gesture */68 overflow: hidden;69 }70 .list-item {71 position: relative;72 padding: 34px 36px 34px 40px;73 border-bottom: 1px solid #b9c2d5;74 }75 .item-title {76 font-size: 52px;77 font-weight: 700;78 color: #273042;79 margin-bottom: 8px;80 }81 .item-row {82 font-size: 32px;83 color: #5d6576;84 margin-bottom: 8px;85 }86 .item-right {87 position: absolute;88 right: 36px;89 top: 44px;90 font-size: 32px;91 color: #7b8190;92 }93 94 /* FAB */95 .fab {96 position: absolute;97 right: 70px;98 bottom: 340px;99 width: 160px; height: 160px;100 background: #394f6d;101 color: #fff;102 border-radius: 50%;103 display: flex; align-items: center; justify-content: center;104 box-shadow: 0 18px 26px rgba(0,0,0,0.25);105 font-size: 90px;106 line-height: 0;107 }108 109 /* Bottom tabs */110 .bottom-tabs {111 position: absolute;112 left: 0; right: 0; bottom: 140px;113 height: 120px;114 display: flex; align-items: center; justify-content: space-around;115 color: #2b2b2b;116 }117 .tab {118 font-size: 38px;119 color: #2b2b2b;120 }121 .tab.active {122 font-weight: 800;123 border-bottom: 6px solid #2b2b2b;124 padding-bottom: 8px;125 }126 127 /* Gesture bar */128 .gesture {129 position: absolute;130 left: 50%;131 transform: translateX(-50%);132 bottom: 48px;133 width: 520px;134 height: 14px;135 border-radius: 8px;136 background: #8f8f8f;137 opacity: 0.6;138 }139 140 /* Simple icon styling */141 .icon { display: inline-block; }142 .icon svg { display: block; }143</style>144</head>145<body>146<div id="render-target">147 <div class="top-area">148 <div class="status-bar">149 <div>1:46</div>150 <div class="status-right">151 <!-- WiFi icon -->152 <span class="icon">153 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">154 <path d="M12 18c.9 0 1.5.6 1.5 1.5S12.9 21 12 21s-1.5-.6-1.5-1.5S11.1 18 12 18z" fill="#fff"/>155 <path d="M2.5 8.5C6.5 5 9.8 4 12 4s5.5 1 9.5 4.5l-1.6 1.3C16.8 7 14 6.3 12 6.3S7.2 7 3.9 9.8L2.5 8.5z" fill="#fff" opacity=".9"/>156 <path d="M5 11c2.4-2 4.5-2.7 7-2.7S16.6 9 19 11l-1.5 1.2c-1.8-1.5-3.7-2.2-5.5-2.2S8.3 10.7 6.5 12.2L5 11z" fill="#fff" opacity=".9"/>157 </svg>158 </span>159 <!-- Battery icon -->160 <span class="icon">161 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">162 <rect x="2" y="7" width="18" height="10" rx="2" ry="2" stroke="#fff" stroke-width="2"></rect>163 <rect x="4" y="9" width="14" height="6" fill="#fff"></rect>164 <rect x="21" y="10" width="2" height="4" fill="#fff"></rect>165 </svg>166 </span>167 <span>100%</span>168 </div>169 </div>170 171 <div class="app-bar">172 <div class="app-left">173 <!-- Hamburger -->174 <span class="icon">175 <svg width="54" height="54" viewBox="0 0 24 24" fill="none">176 <path d="M3 6h18M3 12h18M3 18h18" stroke="#e9f0fb" stroke-width="2.4" stroke-linecap="round"/>177 </svg>178 </span>179 <div class="title">Reminder</div>180 </div>181 <div class="app-right">182 <!-- Search -->183 <span class="icon">184 <svg width="50" height="50" viewBox="0 0 24 24" fill="none">185 <circle cx="11" cy="11" r="6.5" stroke="#e9f0fb" stroke-width="2"/>186 <path d="M16.2 16.2L21 21" stroke="#e9f0fb" stroke-width="2" stroke-linecap="round"/>187 </svg>188 </span>189 <!-- Filter -->190 <span class="icon">191 <svg width="54" height="54" viewBox="0 0 24 24" fill="none">192 <path d="M4 6h16M7 12h10M10 18h4" stroke="#e9f0fb" stroke-width="2.2" stroke-linecap="round"/>193 </svg>194 </span>195 </div>196 </div>197 198 <div class="chips">199 <div class="chip active">All</div>200 <div class="chip">Critical</div>201 <div class="chip">Important</div>202 <div class="chip">Favorites</div>203 <div class="chip">Optional</div>204 </div>205 </div>206 207 <!-- List content -->208 <div class="content">209 <div class="list-item">210 <div class="item-title">Meet & Greet</div>211 <div class="item-row">08/10/2023 1:48 PM</div>212 <div class="item-row">One Time</div>213 <div class="item-right">Today</div>214 </div>215 <div class="list-item">216 <div class="item-title">Birthday Party!</div>217 <div class="item-row">08/10/2023 7:00 PM</div>218 <div class="item-row">Every Year</div>219 <div class="item-right">Today</div>220 </div>221 </div>222 223 <!-- Floating Action Button -->224 <div class="fab">+</div>225 226 <!-- Bottom tabs -->227 <div class="bottom-tabs">228 <div class="tab active">ACTIVE</div>229 <div class="tab">COMPLETED</div>230 </div>231 232 <!-- Gesture bar -->233 <div class="gesture"></div>234</div>235</body>236</html>