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>Side Drawer UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #3e4350; /* dimmed app backdrop */15 }16 17 /* Right dimmed app preview */18 .app-preview {19 position: absolute;20 right: 0;21 top: 0;22 width: 320px;23 height: 2400px;24 background: rgba(0,0,0,0.35);25 }26 .app-topbar {27 position: absolute;28 top: 120px;29 right: 24px;30 display: flex;31 gap: 28px;32 align-items: center;33 }34 .fab {35 position: absolute;36 right: 56px;37 top: 1500px;38 width: 156px;39 height: 156px;40 background: #192e49;41 border-radius: 50%;42 box-shadow: 0 16px 28px rgba(0,0,0,0.35);43 display: flex; align-items: center; justify-content: center;44 }45 .fab span {46 color: #e9eef7;47 font-size: 76px;48 line-height: 76px;49 }50 51 /* Drawer */52 .drawer {53 position: absolute;54 left: 0;55 top: 0;56 width: 760px;57 height: 2400px;58 box-shadow: 8px 0 20px rgba(0,0,0,0.4);59 }60 .drawer-header {61 height: 560px;62 background: #2f4a66;63 color: #dfe7f0;64 position: relative;65 }66 .status-time {67 position: absolute;68 top: 40px;69 left: 48px;70 font-size: 44px;71 letter-spacing: 1px;72 color: #e9eef7;73 opacity: 0.9;74 }75 .profile-box {76 position: absolute;77 left: 60px;78 top: 180px;79 width: 120px;80 height: 120px;81 background: rgba(255,255,255,0.18);82 border-radius: 16px;83 display: flex; align-items: center; justify-content: center;84 }85 .account-name {86 position: absolute;87 left: 60px;88 top: 340px;89 font-size: 48px;90 color: #ffffff;91 }92 .account-email {93 position: absolute;94 left: 60px;95 top: 400px;96 font-size: 32px;97 color: #d7dee8;98 }99 100 .drawer-menu {101 height: calc(2400px - 560px);102 background: #d7dbe5;103 position: relative;104 padding-top: 10px;105 }106 .menu-item {107 height: 130px;108 display: flex;109 align-items: center;110 padding: 0 36px 0 56px;111 color: #2c3036;112 font-size: 42px;113 }114 .menu-item .icon {115 width: 60px; height: 60px; margin-right: 38px;116 }117 .menu-divider {118 height: 2px;119 margin: 12px 0 6px 0;120 background: #b8bdc8;121 }122 123 .share-bar {124 position: absolute;125 bottom: 0;126 left: 0;127 width: 100%;128 height: 120px;129 background: rgba(215,219,229,0.95);130 display: flex; align-items: center;131 padding: 0 56px;132 font-size: 40px; color: #31363c;133 border-top: 1px solid #b8bdc8;134 }135 .share-bar .icon { width: 56px; height: 56px; margin-right: 24px; }136 137 /* Icon color */138 .i-gray { fill: #78818d; stroke: #78818d; }139</style>140</head>141<body>142<div id="render-target">143 144 <!-- Right dimmed app preview -->145 <div class="app-preview">146 <div class="app-topbar">147 <!-- Search icon -->148 <svg width="48" height="48" viewBox="0 0 24 24" class="i-gray">149 <circle cx="10" cy="10" r="6" fill="#c8ced8"></circle>150 <rect x="14.5" y="14.5" width="6" height="2" transform="rotate(45 14.5 14.5)" fill="#c8ced8"></rect>151 </svg>152 <!-- Filter icon -->153 <svg width="48" height="48" viewBox="0 0 24 24" class="i-gray">154 <rect x="3" y="5" width="18" height="2" fill="#c8ced8"></rect>155 <rect x="6" y="11" width="12" height="2" fill="#c8ced8"></rect>156 <rect x="9" y="17" width="6" height="2" fill="#c8ced8"></rect>157 </svg>158 </div>159 <div class="fab"><span>+</span></div>160 </div>161 162 <!-- Drawer -->163 <div class="drawer">164 <div class="drawer-header">165 <div class="status-time">8:32</div>166 167 <div class="profile-box">168 <!-- Simple user icon -->169 <svg width="72" height="72" viewBox="0 0 24 24">170 <circle cx="12" cy="8" r="4" fill="#e9eef7"></circle>171 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="#e9eef7"></path>172 </svg>173 </div>174 175 <div class="account-name">Reminder</div>176 <div class="account-email">madeeasy.apps@outlook.com</div>177 </div>178 179 <div class="drawer-menu">180 <div class="menu-item">181 <!-- Settings / gear -->182 <svg class="icon" viewBox="0 0 24 24">183 <circle cx="12" cy="12" r="4" fill="#78818d"></circle>184 <g class="i-gray">185 <rect x="11" y="2" width="2" height="4"></rect>186 <rect x="11" y="18" width="2" height="4"></rect>187 <rect x="2" y="11" width="4" height="2"></rect>188 <rect x="18" y="11" width="4" height="2"></rect>189 <rect x="4" y="5" width="2" height="3" transform="rotate(-45 5 6.5)"></rect>190 <rect x="18" y="16" width="2" height="3" transform="rotate(-45 19 17.5)"></rect>191 <rect x="18" y="5" width="2" height="3" transform="rotate(45 19 6.5)"></rect>192 <rect x="4" y="16" width="2" height="3" transform="rotate(45 5 17.5)"></rect>193 </g>194 </svg>195 <span>Settings</span>196 </div>197 198 <div class="menu-item">199 <!-- Backup & Restore / database -->200 <svg class="icon" viewBox="0 0 24 24">201 <ellipse cx="12" cy="6" rx="8" ry="3" fill="#78818d"></ellipse>202 <rect x="4" y="6" width="16" height="6" fill="#78818d"></rect>203 <ellipse cx="12" cy="12" rx="8" ry="3" fill="#78818d"></ellipse>204 <rect x="4" y="12" width="16" height="6" fill="#78818d" opacity="0.85"></rect>205 <ellipse cx="12" cy="18" rx="8" ry="3" fill="#78818d"></ellipse>206 </svg>207 <span>Backup & Restore</span>208 </div>209 210 <div class="menu-item">211 <!-- Daily Summary Reminder / clipboard -->212 <svg class="icon" viewBox="0 0 24 24">213 <rect x="6" y="5" width="12" height="15" fill="#78818d" rx="2"></rect>214 <rect x="9" y="3" width="6" height="3" fill="#b0b6c0" rx="1"></rect>215 <rect x="8" y="9" width="8" height="2" fill="#bfc5cf"></rect>216 <rect x="8" y="13" width="6" height="2" fill="#bfc5cf"></rect>217 </svg>218 <span>Daily Summary Reminder</span>219 </div>220 221 <div class="menu-item">222 <!-- Q&A / diamond with ? -->223 <svg class="icon" viewBox="0 0 24 24">224 <polygon points="12,3 21,12 12,21 3,12" fill="#78818d"></polygon>225 <circle cx="12" cy="16.5" r="1.2" fill="#d7dbe5"></circle>226 <path d="M10 10a2 2 0 1 1 4 0c0 1.5-2 1.5-2 3" stroke="#d7dbe5" stroke-width="1.8" fill="none" stroke-linecap="round"/>227 </svg>228 <span>Questions & Answers</span>229 </div>230 231 <div class="menu-divider"></div>232 233 <div class="menu-item">234 <!-- Follow us / facebook-like -->235 <svg class="icon" viewBox="0 0 24 24">236 <rect x="3" y="3" width="18" height="18" rx="2" fill="#78818d"></rect>237 <text x="11.8" y="16" text-anchor="middle" font-size="12" fill="#d7dbe5" font-family="Arial" font-weight="bold">f</text>238 </svg>239 <span>Follow us</span>240 </div>241 242 <div class="menu-item">243 <!-- Ad-free Version / no symbol -->244 <svg class="icon" viewBox="0 0 24 24">245 <circle cx="12" cy="12" r="9" fill="none" stroke="#78818d" stroke-width="2"></circle>246 <line x1="6" y1="6" x2="18" y2="18" stroke="#78818d" stroke-width="2"></line>247 <text x="12" y="13.5" text-anchor="middle" font-size="7" fill="#78818d" font-family="Arial">AD</text>248 </svg>249 <span>Ad-free Version</span>250 </div>251 252 <!-- share bar -->253 <div class="share-bar">254 <svg class="icon" viewBox="0 0 24 24">255 <circle cx="5" cy="12" r="2.2" fill="#78818d"></circle>256 <circle cx="17" cy="6" r="2.2" fill="#78818d"></circle>257 <circle cx="17" cy="18" r="2.2" fill="#78818d"></circle>258 <path d="M7 12 L15 7" stroke="#78818d" stroke-width="2" fill="none"/>259 <path d="M7 12 L15 17" stroke="#78818d" stroke-width="2" fill="none"/>260 </svg>261 <span>Share this app</span>262 </div>263 </div>264 </div>265 266</div>267</body>268</html>