GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Reminder App Drawer</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #2f4768;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 100px;23 color: #fff;24 display: flex;25 align-items: center;26 padding: 0 36px;27 box-sizing: border-box;28 font-size: 36px;29 letter-spacing: 0.5px;30 }31 .status-left { display: flex; align-items: center; gap: 24px; }32 .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }33 .status-icon svg { width: 38px; height: 38px; fill: none; stroke: #fff; stroke-width: 2.5; }34 35 /* Drawer area (left) */36 .drawer {37 position: absolute;38 top: 100px;39 left: 0;40 width: 820px;41 height: 2300px;42 background: #2f4768;43 }44 .drawer-header {45 padding: 48px 40px 24px 40px;46 color: #fff;47 }48 .avatar {49 width: 100px; height: 100px;50 border-radius: 20px;51 background: rgba(255,255,255,0.15);52 display: flex; align-items: center; justify-content: center;53 margin-bottom: 30px;54 }55 .app-name { font-size: 44px; font-weight: 600; margin-bottom: 10px; }56 .email { font-size: 32px; opacity: 0.95; }57 58 .menu-panel {59 position: absolute;60 left: 0;61 top: 360px;62 width: 820px;63 height: 1700px;64 background: #dfe3ea;65 box-sizing: border-box;66 }67 68 .menu-list {69 padding: 20px 40px;70 }71 72 .menu-item {73 height: 130px;74 display: flex;75 align-items: center;76 gap: 30px;77 color: #1d2a3b;78 font-size: 40px;79 border-bottom: 1px solid rgba(0,0,0,0.08);80 }81 .menu-item .icon {82 width: 70px; height: 70px;83 display: inline-flex; align-items: center; justify-content: center;84 color: #7a8797;85 }86 .menu-item svg { width: 64px; height: 64px; fill: none; stroke: #7a8797; stroke-width: 3; }87 88 .section-split {89 margin: 10px 0 0 0;90 border-top: 1px solid rgba(0,0,0,0.1);91 }92 93 /* Bottom share bar */94 .share-bar {95 position: absolute;96 bottom: 0;97 left: 0;98 width: 820px;99 height: 160px;100 background: #e5e9ef;101 display: flex;102 align-items: center;103 padding: 0 40px;104 box-sizing: border-box;105 color: #1d2a3b;106 font-size: 40px;107 gap: 24px;108 }109 .share-bar .icon svg { width: 60px; height: 60px; stroke: #7a8797; }110 111 /* Right side: underlying app preview */112 .app-preview {113 position: absolute;114 top: 100px;115 right: 0;116 width: 260px;117 height: 2300px;118 background: #fafafa;119 box-shadow: inset 8px 0 20px rgba(0,0,0,0.15);120 }121 .preview-topbar {122 height: 120px; display: flex; align-items: center; justify-content: flex-end; gap: 26px;123 padding: 0 20px; box-sizing: border-box; color: #27364a;124 }125 .preview-topbar svg { width: 42px; height: 42px; stroke: #27364a; stroke-width: 3; fill: none; }126 127 .preview-list {128 padding: 10px 20px;129 color: #27364a;130 font-size: 34px;131 }132 .day-row {133 height: 120px;134 display: flex; align-items: center; justify-content: flex-end;135 border-bottom: 1px solid #e0e0e0;136 }137 138 .fab {139 position: absolute;140 right: 46px;141 bottom: 540px;142 width: 150px; height: 150px;143 background: #203a57;144 border-radius: 50%;145 display: flex; align-items: center; justify-content: center;146 box-shadow: 0 6px 18px rgba(0,0,0,0.3);147 }148 .fab svg { width: 70px; height: 70px; stroke: #fff; stroke-width: 10; }149 150 /* Bottom gesture bar */151 .gesture-bar {152 position: absolute;153 bottom: 24px; left: 50%;154 transform: translateX(-50%);155 width: 340px; height: 18px;156 background: #cfd3d9;157 border-radius: 10px;158 }159</style>160</head>161<body>162<div id="render-target">163 164 <!-- Status bar -->165 <div class="status-bar">166 <div class="status-left">8:30</div>167 <div class="status-right">168 <span class="status-icon">169 <!-- small play/camera placeholder -->170 <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2"></rect><circle cx="12" cy="12" r="3"></circle></svg>171 </span>172 <span class="status-icon">173 <!-- download icon -->174 <svg viewBox="0 0 24 24"><path d="M12 4v10"></path><path d="M8 10l4 4 4-4"></path><path d="M4 20h16"></path></svg>175 </span>176 <span class="status-icon">177 <!-- cloud icon -->178 <svg viewBox="0 0 24 24"><path d="M6 18h10a4 4 0 0 0 0-8h-1a5 5 0 0 0-9 3"></path></svg>179 </span>180 <span class="status-icon">181 <!-- wifi -->182 <svg viewBox="0 0 24 24"><path d="M3 9c4.5-4 13.5-4 18 0"></path><path d="M6 12c3-2.5 9-2.5 12 0"></path><path d="M9 15c1.5-1 4.5-1 6 0"></path><circle cx="12" cy="18" r="1.5" fill="#fff" stroke="none"></circle></svg>183 </span>184 <span class="status-icon">185 <!-- battery -->186 <svg viewBox="0 0 28 24"><rect x="2" y="6" width="20" height="12" rx="2"></rect><rect x="22" y="10" width="3" height="4"></rect><rect x="4" y="8" width="14" height="8" fill="#fff" stroke="none"></rect></svg>187 </span>188 </div>189 </div>190 191 <!-- Drawer -->192 <div class="drawer">193 <div class="drawer-header">194 <div class="avatar">195 <!-- user icon -->196 <svg viewBox="0 0 64 64">197 <circle cx="32" cy="22" r="10" fill="none" stroke="#ffffff" stroke-width="3"></circle>198 <path d="M12 52c6-8 34-8 40 0" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round"></path>199 </svg>200 </div>201 <div class="app-name">Reminder</div>202 <div class="email">madeeasy.apps@outlook.com</div>203 </div>204 205 <div class="menu-panel">206 <div class="menu-list">207 <div class="menu-item">208 <div class="icon">209 <!-- gear -->210 <svg viewBox="0 0 64 64">211 <circle cx="32" cy="32" r="10"></circle>212 <path d="M32 6v8M32 50v8M6 32h8M50 32h8M14 14l6 6M44 44l6 6M44 14l6 6M14 44l6 6" stroke-linecap="round"></path>213 </svg>214 </div>215 <div>Settings</div>216 </div>217 218 <div class="menu-item">219 <div class="icon">220 <!-- database -->221 <svg viewBox="0 0 64 64">222 <ellipse cx="32" cy="16" rx="18" ry="8"></ellipse>223 <path d="M14 16v16c0 4.4 8.1 8 18 8s18-3.6 18-8V16"></path>224 <ellipse cx="32" cy="32" rx="18" ry="8"></ellipse>225 <path d="M14 32v16c0 4.4 8.1 8 18 8s18-3.6 18-8V32"></path>226 </svg>227 </div>228 <div>Backup & Restore</div>229 </div>230 231 <div class="menu-item">232 <div class="icon">233 <!-- clipboard -->234 <svg viewBox="0 0 64 64">235 <rect x="16" y="14" width="32" height="40" rx="4"></rect>236 <rect x="22" y="10" width="20" height="10" rx="3"></rect>237 <path d="M22 30h20M22 38h20M22 46h16"></path>238 </svg>239 </div>240 <div>Daily Summary Reminder</div>241 </div>242 243 <div class="menu-item section-split"></div>244 245 <div class="menu-item" style="border-top: none;">246 <div class="icon">247 <!-- Q&A diamond -->248 <svg viewBox="0 0 64 64">249 <polygon points="32,8 56,32 32,56 8,32"></polygon>250 <text x="32" y="38" font-size="26" text-anchor="middle" fill="#7a8797" stroke="none">?</text>251 </svg>252 </div>253 <div>Questions & Answers</div>254 </div>255 256 <div class="menu-item">257 <div class="icon">258 <!-- Facebook square -->259 <svg viewBox="0 0 64 64">260 <rect x="8" y="8" width="48" height="48" rx="8"></rect>261 <text x="32" y="40" font-size="32" text-anchor="middle" fill="#7a8797" stroke="none">f</text>262 </svg>263 </div>264 <div>Follow us</div>265 </div>266 267 <div class="menu-item">268 <div class="icon">269 <!-- Ad-free -->270 <svg viewBox="0 0 64 64">271 <circle cx="32" cy="32" r="22"></circle>272 <text x="32" y="38" font-size="22" text-anchor="middle" fill="#7a8797" stroke="none">AD</text>273 <path d="M18 18l28 28"></path>274 </svg>275 </div>276 <div>Ad-free Version</div>277 </div>278 </div>279 280 <!-- bottom share -->281 <div class="share-bar">282 <div class="icon">283 <!-- share icon -->284 <svg viewBox="0 0 64 64">285 <circle cx="16" cy="34" r="6"></circle>286 <circle cx="48" cy="16" r="6"></circle>287 <circle cx="48" cy="52" r="6"></circle>288 <path d="M22 32l20-12M22 38l20 12"></path>289 </svg>290 </div>291 <div>Share this app</div>292 </div>293 </div>294 </div>295 296 <!-- Underlying app preview on the right -->297 <div class="app-preview">298 <div class="preview-topbar">299 <!-- search -->300 <svg viewBox="0 0 64 64">301 <circle cx="28" cy="28" r="16"></circle>302 <path d="M44 44l14 14"></path>303 </svg>304 <!-- filter -->305 <svg viewBox="0 0 64 64">306 <path d="M8 16h48M16 30h32M24 44h16" stroke-linecap="round"></path>307 </svg>308 </div>309 <div class="preview-list">310 <div class="day-row">in 7 days</div>311 <div class="day-row">in 12 days</div>312 <div class="day-row">in 13 days</div>313 <div class="day-row">in 16 days</div>314 <div class="day-row">in 17 days</div>315 <div class="day-row">in 18 days</div>316 <div class="day-row">in 19 days</div>317 <div class="day-row">in 20 days</div>318 </div>319 320 <div class="fab">321 <svg viewBox="0 0 64 64">322 <path d="M12 32h40M32 12v40"></path>323 </svg>324 </div>325 </div>326 327 <div class="gesture-bar"></div>328</div>329</body>330</html>