GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>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: Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #cfd4de;15 }16 17 /* Header / App bar */18 .header {19 position: relative;20 width: 100%;21 background: #3b5168;22 color: #ffffff;23 }24 .status-bar {25 height: 80px;26 display: flex;27 align-items: center;28 padding: 0 32px;29 font-size: 28px;30 opacity: 0.9;31 gap: 18px;32 }33 .status-icons {34 margin-left: auto;35 display: flex;36 align-items: center;37 gap: 20px;38 }39 .appbar {40 height: 120px;41 display: flex;42 align-items: center;43 padding: 0 28px;44 gap: 22px;45 }46 .title {47 font-size: 52px;48 font-weight: 600;49 letter-spacing: 0.5px;50 color: #e9eef6;51 }52 .appbar .spacer { flex: 1; }53 54 /* Icons */55 .icon {56 width: 56px;57 height: 56px;58 fill: none;59 stroke: #ffffff;60 stroke-width: 4;61 }62 .icon-solid { fill: #ffffff; stroke: none; }63 64 /* Tabs */65 .tabs {66 height: 120px;67 display: flex;68 align-items: center;69 gap: 18px;70 padding: 0 28px 20px 28px;71 background: #3b5168;72 box-sizing: border-box;73 }74 .pill {75 padding: 18px 28px;76 border-radius: 18px;77 border: 2px solid rgba(15,22,30,0.5);78 background: #2f4357;79 color: #d6dee8;80 font-size: 32px;81 box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);82 }83 .pill.active {84 border: 3px solid #e4d86b;85 color: #fff;86 }87 88 /* Ad banner placeholder */89 .ad {90 margin: 22px 32px;91 height: 180px;92 background: #E0E0E0;93 border: 1px solid #BDBDBD;94 display: flex;95 justify-content: center;96 align-items: center;97 color: #757575;98 font-size: 30px;99 }100 101 /* List */102 .list {103 margin-top: 8px;104 }105 .item {106 padding: 36px 32px;107 border-top: 1px solid #b8bec9;108 background: transparent;109 position: relative;110 }111 .item-title {112 font-size: 48px;113 color: #1e2935;114 margin-bottom: 10px;115 font-weight: 600;116 }117 .item-sub {118 font-size: 30px;119 color: #5e6877;120 margin: 6px 0;121 }122 .item-right {123 position: absolute;124 right: 32px;125 top: 46px;126 font-size: 32px;127 color: #6b7686;128 }129 130 /* FAB */131 .fab {132 position: absolute;133 right: 64px;134 bottom: 540px;135 width: 132px;136 height: 132px;137 background: #3b5168;138 border-radius: 50%;139 box-shadow: 0 12px 20px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.2) inset;140 display: flex;141 justify-content: center;142 align-items: center;143 }144 .fab svg {145 width: 64px;146 height: 64px;147 }148 149 /* Bottom tabs */150 .bottom-tabs {151 position: absolute;152 left: 0;153 right: 0;154 bottom: 140px;155 height: 120px;156 display: flex;157 align-items: center;158 padding: 0 60px;159 color: #2b3139;160 font-size: 38px;161 letter-spacing: 0.3px;162 }163 .bottom-tabs .left {164 font-weight: 700;165 text-decoration: underline;166 }167 .bottom-tabs .right {168 margin-left: auto;169 font-weight: 500;170 color: #3e454f;171 }172 173 /* Gesture bar (visual hint) */174 .gesture {175 position: absolute;176 bottom: 60px;177 left: 50%;178 transform: translateX(-50%);179 width: 420px;180 height: 14px;181 background: #8a8f97;182 border-radius: 7px;183 opacity: 0.6;184 }185</style>186</head>187<body>188<div id="render-target">189 190 <div class="header">191 <div class="status-bar">192 <div>7:22</div>193 <div>21°</div>194 <div class="status-icons">195 <!-- small circle/globe -->196 <svg class="icon" viewBox="0 0 24 24">197 <circle cx="12" cy="12" r="9"></circle>198 </svg>199 <!-- dot -->200 <svg class="icon" viewBox="0 0 24 24">201 <circle cx="12" cy="12" r="2" fill="#ffffff"></circle>202 </svg>203 <!-- wifi -->204 <svg class="icon" viewBox="0 0 24 24">205 <path d="M3 9c5-5 13-5 18 0M6 12c3.5-3.5 8.5-3.5 12 0M9 15c2-2 4-2 6 0M12 18l0.01 0"></path>206 </svg>207 <!-- battery -->208 <svg class="icon" viewBox="0 0 28 24">209 <rect x="3" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="3"></rect>210 <rect x="22" y="10" width="3" height="4" fill="#fff"></rect>211 </svg>212 </div>213 </div>214 215 <div class="appbar">216 <!-- Hamburger -->217 <svg class="icon" viewBox="0 0 24 24">218 <path d="M3 6h18M3 12h18M3 18h18"></path>219 </svg>220 221 <div class="title">Reminder</div>222 <div class="spacer"></div>223 224 <!-- Search -->225 <svg class="icon" viewBox="0 0 24 24">226 <circle cx="10" cy="10" r="6"></circle>227 <path d="M15 15l6 6"></path>228 </svg>229 230 <!-- Filter -->231 <svg class="icon" viewBox="0 0 24 24">232 <path d="M3 6h18M7 12h10M10 18h4"></path>233 </svg>234 </div>235 236 <div class="tabs">237 <div class="pill active">All</div>238 <div class="pill">Critical</div>239 <div class="pill">Important</div>240 <div class="pill">Favorites</div>241 <div class="pill">Optional</div>242 </div>243 </div>244 245 <div class="ad">[IMG: Ad Banner]</div>246 247 <div class="list">248 <div class="item">249 <div class="item-title">Party</div>250 <div class="item-sub">10/1/2023 6:38 PM</div>251 <div class="item-sub">Every Sunday</div>252 <div class="item-right">in 5 days</div>253 </div>254 255 <div class="item">256 <div class="item-title">Meeting</div>257 <div class="item-sub">10/5/2023 7:00 PM</div>258 <div class="item-sub">One Time</div>259 <div class="item-right">in 9 days</div>260 </div>261 </div>262 263 <div class="fab">264 <svg viewBox="0 0 24 24">265 <path d="M12 5v14M5 12h14" stroke="#ffffff" stroke-width="3" stroke-linecap="round"></path>266 </svg>267 </div>268 269 <div class="bottom-tabs">270 <div class="left">ACTIVE</div>271 <div class="right">COMPLETED</div>272 </div>273 274 <div class="gesture"></div>275 276</div>277</body>278</html>