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 List Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 * { box-sizing: border-box; font-family: Roboto, Arial, sans-serif; }10 11 /* Root container */12 #render-target {13 position: relative;14 width: 1080px;15 height: 2400px;16 overflow: hidden;17 background: #d7dce7; /* main list background */18 border-radius: 0;19 }20 21 /* Top app/header area */22 .topbar {23 background: #3b5067;24 color: #fff;25 width: 100%;26 height: 380px;27 padding: 0 40px;28 position: relative;29 }30 .status {31 height: 90px;32 display: flex;33 align-items: center;34 justify-content: space-between;35 font-size: 44px;36 opacity: 0.95;37 }38 .status .icons {39 display: flex;40 align-items: center;41 gap: 26px;42 }43 .app-search {44 margin-top: 10px;45 display: flex;46 align-items: center;47 height: 90px;48 gap: 24px;49 }50 .back-icon {51 width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;52 }53 .search-placeholder {54 color: rgba(255,255,255,0.6);55 font-size: 46px;56 }57 58 /* Chips */59 .chips {60 margin-top: 30px;61 display: flex;62 gap: 22px;63 flex-wrap: nowrap;64 }65 .chip {66 padding: 18px 36px;67 border-radius: 28px;68 background: #38495d;69 color: #dce5ef;70 border: 2px solid #2c3949;71 font-size: 34px;72 letter-spacing: 0.2px;73 }74 .chip.active {75 border-color: #f0d54f;76 color: #fff;77 box-shadow: inset 0 0 0 2px rgba(240,213,79,0.2);78 }79 80 /* Ad banner placeholder */81 .ad-wrap {82 position: absolute;83 left: 24px;84 right: 24px;85 top: 360px;86 height: 140px;87 display: flex;88 align-items: center;89 justify-content: center;90 }91 .ad {92 width: 100%;93 height: 100%;94 background: #E0E0E0;95 border: 1px solid #BDBDBD;96 color: #757575;97 display: flex;98 align-items: center;99 justify-content: center;100 font-size: 34px;101 border-radius: 8px;102 }103 104 /* List area */105 .list {106 position: absolute;107 top: 520px;108 left: 0;109 right: 0;110 bottom: 520px; /* leave space for tabs + keyboard mock */111 overflow: hidden;112 }113 .item {114 padding: 34px 40px 30px 40px;115 border-bottom: 2px solid #c7cedb;116 position: relative;117 }118 .item-title {119 font-size: 56px;120 color: #2d3b4b;121 margin: 8px 0 10px;122 }123 .item-sub {124 font-size: 34px;125 color: #677383;126 line-height: 1.3;127 }128 .item-right {129 position: absolute;130 right: 40px;131 top: 44px;132 color: #51607a;133 font-size: 36px;134 }135 .star {136 position: absolute;137 right: 40px;138 top: 120px;139 }140 .star svg { width: 40px; height: 40px; }141 142 /* Tabs above keyboard */143 .tabs {144 position: absolute;145 left: 0; right: 0;146 bottom: 480px;147 height: 110px;148 background: transparent;149 display: flex;150 align-items: center;151 justify-content: space-around;152 color: #2c3747;153 font-size: 38px;154 }155 .tab {156 padding: 12px 16px;157 }158 .tab.active {159 font-weight: 700;160 border-bottom: 6px solid #2e3f54;161 }162 163 /* Floating action button */164 .fab {165 position: absolute;166 right: 60px;167 bottom: 620px;168 width: 150px;169 height: 150px;170 border-radius: 50%;171 background: #35495f;172 box-shadow: 0 10px 20px rgba(0,0,0,0.25);173 display: flex;174 align-items: center;175 justify-content: center;176 color: #fff;177 }178 .fab svg { width: 70px; height: 70px; }179 180 /* Keyboard mock */181 .keyboard {182 position: absolute;183 left: 0; right: 0; bottom: 0;184 height: 480px;185 background: #1d1c1f;186 padding: 18px 22px 28px;187 }188 .kb-row {189 display: flex;190 justify-content: space-between;191 margin: 18px 0;192 }193 .key {194 background: #2a292d;195 border-radius: 18px;196 height: 88px;197 flex: 1;198 margin: 0 8px;199 }200 .key.small { flex: 0.9; }201 .key.large { flex: 2.5; }202 .key.round {203 width: 120px; height: 88px; border-radius: 30px; flex: 0 0 120px;204 }205 206 /* Small status bar symbols */207 .status svg { fill: #cfd8e3; opacity: 0.9; }208</style>209</head>210<body>211<div id="render-target">212 213 <!-- Top bar with status, back and search -->214 <div class="topbar">215 <div class="status">216 <div>3:57</div>217 <div class="icons">218 <!-- Simple signal icons -->219 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M4 14h2v6H4v-6zm4-4h2v10H8V10zm4-3h2v13h-2V7zm4-3h2v16h-2V4z"/></svg>220 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M12 2a9 9 0 0 0-9 9h2a7 7 0 1 1 7 7v2a9 9 0 0 0 0-18z"/></svg>221 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/></svg>222 <svg width="36" height="36" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/><circle cx="5" cy="12" r="2"/></svg>223 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M4 10h16v9H4v-9zm2-5h12l1 3H5l1-3z"/></svg>224 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M17 4h-1V3a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v1H7a3 3 0 0 0-3 3v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zM9 3h6v1H9V3z"/></svg>225 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M16 7H8a5 5 0 0 0-5 5v6h18v-6a5 5 0 0 0-5-5z" /><path d="M15 3h-6v3h6V3z"/></svg>226 </div>227 </div>228 229 <div class="app-search">230 <div class="back-icon">231 <svg width="48" height="48" viewBox="0 0 24 24"><path fill="#ffffff" d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>232 </div>233 <div class="search-placeholder">Search…</div>234 </div>235 236 <div class="chips">237 <div class="chip active">All</div>238 <div class="chip">Default</div>239 <div class="chip">Critical</div>240 <div class="chip">Important</div>241 <div class="chip">Favorites</div>242 </div>243 </div>244 245 <!-- Ad Banner -->246 <div class="ad-wrap">247 <div class="ad">[IMG: Ad Banner - Luxury Decorative Lighting]</div>248 </div>249 250 <!-- List -->251 <div class="list">252 <div class="item">253 <div class="item-title">Reading</div>254 <div class="item-sub">17/06/2023 8:00 am<br>Every Day</div>255 <div class="item-right">in 5 days</div>256 </div>257 258 <div class="item">259 <div class="item-title">Dbw team meeting</div>260 <div class="item-sub">18/06/2023 1:53 am<br>One Time</div>261 <div class="item-right">in 6 days</div>262 <div class="star">263 <svg viewBox="0 0 24 24"><path fill="#f2cf2c" d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.6 5.82 22 7 14.14l-5-4.87 6.91-1.01z"/></svg>264 </div>265 </div>266 267 <div class="item">268 <div class="item-title">Nbc News</div>269 <div class="item-sub">19/06/2023 8:00 am<br>One Time</div>270 <div class="item-right">in 7 days</div>271 </div>272 273 <div class="item">274 <div class="item-title">Ravi anniversary</div>275 <div class="item-sub">20/06/2023 12:00 pm<br>One Time</div>276 <div class="item-right">in 8 days</div>277 </div>278 </div>279 280 <!-- Tabs -->281 <div class="tabs">282 <div class="tab active">ACTIVE</div>283 <div class="tab">COMPLETED</div>284 </div>285 286 <!-- Floating Action Button -->287 <div class="fab" title="Add">288 <svg viewBox="0 0 24 24"><path fill="#ffffff" d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg>289 </div>290 291 <!-- Keyboard mock -->292 <div class="keyboard">293 <div class="kb-row">294 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>295 </div>296 <div class="kb-row">297 <div class="key small"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key small"></div>298 </div>299 <div class="kb-row">300 <div class="key round"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key round"></div>301 </div>302 <div class="kb-row">303 <div class="key round" style="background:#6d5d5f;"></div>304 <div class="key large"></div>305 <div class="key round" style="background:#e0b2b7;"></div>306 </div>307 </div>308 309</div>310</body>311</html>