GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Drawer Menu - All Currency Converter</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #000000;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 110px;23 background: #000;24 color: #fff;25 display: flex;26 align-items: center;27 padding: 0 32px;28 box-sizing: border-box;29 font-size: 38px;30 letter-spacing: 0.5px;31 }32 .status-bar .right {33 margin-left: auto;34 display: flex;35 align-items: center;36 gap: 28px;37 }38 .status-icon svg { display: block; }39 40 /* Background app preview on the right */41 .app-preview {42 position: absolute;43 top: 110px;44 right: 0;45 width: 260px;46 height: 2290px;47 background: linear-gradient(180deg, #243244 0%, #141a22 100%);48 }49 .preview-key {50 position: absolute;51 right: 20px;52 width: 220px;53 height: 180px;54 border-radius: 12px;55 background: rgba(0,0,0,0.35);56 color: #9aa5b1;57 display: flex;58 align-items: center;59 justify-content: center;60 font-size: 54px;61 }62 .preview-key.k1 { top: 380px; }63 .preview-key.k2 { top: 720px; }64 .preview-key.k3 { top: 1060px; }65 .preview-key.k4 { top: 1400px; }66 .preview-key.k5 { top: 1740px; }67 .preview-key.k6 { top: 2080px; }68 69 /* Drawer */70 .drawer {71 position: absolute;72 top: 110px;73 left: 0;74 width: 880px;75 height: 2290px;76 border-radius: 0 0 40px 0;77 overflow: hidden;78 background: #ffffff;79 box-shadow: 0 10px 40px rgba(0,0,0,0.45);80 }81 82 /* Header area */83 .drawer-header {84 width: 100%;85 height: 320px;86 background: linear-gradient(135deg, #222426 0%, #2b2e31 100%);87 color: #fff;88 position: relative;89 padding: 32px;90 box-sizing: border-box;91 }92 .app-row {93 display: flex;94 align-items: center;95 gap: 26px;96 }97 .app-title {98 font-size: 54px;99 font-weight: 700;100 line-height: 1.2;101 }102 .app-sub {103 font-size: 28px;104 color: #c6c7c9;105 }106 .header-actions {107 margin-left: auto;108 display: flex;109 gap: 22px;110 }111 .header-badge {112 margin-top: 28px;113 display: flex;114 align-items: center;115 gap: 16px;116 color: #1d1d1d;117 background: #ffeb3b;118 width: fit-content;119 padding: 14px 18px;120 border-radius: 12px;121 font-size: 36px;122 font-weight: 700;123 }124 125 /* App icon placeholder */126 .app-icon {127 width: 108px;128 height: 108px;129 background: #E0E0E0;130 border: 1px solid #BDBDBD;131 border-radius: 14px;132 color: #757575;133 display: flex;134 align-items: center;135 justify-content: center;136 font-size: 22px;137 }138 139 /* Menu */140 .menu {141 background: #ffffff;142 }143 .menu-section-title {144 font-size: 30px;145 color: #8c8f94;146 padding: 26px 32px;147 border-top: 1px solid #e5e5e5;148 }149 .menu-item {150 display: flex;151 align-items: center;152 gap: 26px;153 padding: 28px 32px;154 border-bottom: 1px solid #e9e9e9;155 font-size: 42px;156 color: #1b1b1b;157 }158 .menu-item .label { font-weight: 700; }159 .menu-item.dimmed { background: #eeeeee; }160 .menu-item .icon { width: 64px; height: 64px; flex: 0 0 64px; }161 162 /* Helper: SVG icons sizing */163 .icon svg { width: 64px; height: 64px; }164 165 /* Bottom spacer to show rounded corner */166 .bottom-space { height: 140px; }167</style>168</head>169<body>170<div id="render-target">171 172 <!-- Status bar -->173 <div class="status-bar">174 <div>12:27</div>175 <div class="right">176 <div class="status-icon">177 <!-- Cellular -->178 <svg width="48" height="36" viewBox="0 0 48 36">179 <rect x="4" y="22" width="6" height="10" fill="#ffffff"></rect>180 <rect x="14" y="18" width="6" height="14" fill="#ffffff" opacity="0.8"></rect>181 <rect x="24" y="12" width="6" height="20" fill="#ffffff" opacity="0.7"></rect>182 <rect x="34" y="6" width="6" height="26" fill="#ffffff" opacity="0.6"></rect>183 </svg>184 </div>185 <div class="status-icon">186 <!-- WiFi -->187 <svg width="44" height="36" viewBox="0 0 44 36">188 <path d="M2 12c10-8 28-8 38 0" stroke="#fff" stroke-width="4" fill="none" />189 <path d="M8 18c7-5 21-5 28 0" stroke="#fff" stroke-width="4" fill="none" />190 <path d="M14 24c4-3 12-3 16 0" stroke="#fff" stroke-width="4" fill="none" />191 <circle cx="22" cy="30" r="3" fill="#fff"/>192 </svg>193 </div>194 <div class="status-icon">195 <!-- Do Not Disturb -->196 <svg width="40" height="40" viewBox="0 0 40 40">197 <circle cx="20" cy="20" r="18" stroke="#fff" stroke-width="4" fill="none"></circle>198 <rect x="8" y="18" width="24" height="4" fill="#fff"></rect>199 </svg>200 </div>201 <div class="status-icon">202 <!-- Battery -->203 <svg width="60" height="30" viewBox="0 0 60 30">204 <rect x="2" y="6" width="50" height="18" rx="4" stroke="#fff" stroke-width="3" fill="none"></rect>205 <rect x="54" y="11" width="4" height="8" fill="#fff"></rect>206 <rect x="6" y="9" width="42" height="12" fill="#fff"></rect>207 </svg>208 </div>209 </div>210 </div>211 212 <!-- App preview right side -->213 <div class="app-preview">214 <div class="preview-key k1">0</div>215 <div class="preview-key k2">÷</div>216 <div class="preview-key k3">×</div>217 <div class="preview-key k4">−</div>218 <div class="preview-key k5">+</div>219 <div class="preview-key k6">=</div>220 </div>221 222 <!-- Drawer -->223 <div class="drawer">224 225 <!-- Header -->226 <div class="drawer-header">227 <div class="app-row">228 <div class="app-icon">[IMG: Currency App Icon]</div>229 <div>230 <div class="app-title">All Currency Converter</div>231 <div class="app-sub">SmartWho Corp.</div>232 </div>233 <div class="header-actions">234 <!-- Info icon -->235 <svg width="64" height="64" viewBox="0 0 64 64">236 <circle cx="32" cy="32" r="28" fill="none" stroke="#fff" stroke-width="4"></circle>237 <circle cx="32" cy="20" r="4" fill="#fff"></circle>238 <rect x="30" y="28" width="4" height="20" fill="#fff"></rect>239 </svg>240 <!-- Settings icon (simple gear) -->241 <svg width="64" height="64" viewBox="0 0 64 64">242 <circle cx="32" cy="32" r="8" fill="#fff"></circle>243 <circle cx="32" cy="32" r="20" stroke="#fff" stroke-width="4" fill="none"></circle>244 <rect x="30" y="6" width="4" height="10" fill="#fff"></rect>245 <rect x="30" y="48" width="4" height="10" fill="#fff"></rect>246 <rect x="6" y="30" width="10" height="4" fill="#fff"></rect>247 <rect x="48" y="30" width="10" height="4" fill="#fff"></rect>248 </svg>249 </div>250 </div>251 <div class="header-badge">252 <!-- Star icon -->253 <svg width="40" height="40" viewBox="0 0 40 40">254 <polygon points="20,4 24,16 36,16 26,24 30,36 20,28 10,36 14,24 4,16 16,16" fill="#333"/>255 </svg>256 <div>Remove Ads</div>257 </div>258 </div>259 260 <!-- Menu -->261 <div class="menu">262 <div class="menu-item dimmed">263 <div class="icon">264 <!-- Currency icon (red circle) -->265 <svg viewBox="0 0 64 64">266 <circle cx="32" cy="32" r="28" fill="#e44d4d"></circle>267 <rect x="30" y="16" width="4" height="32" fill="#ffffff"></rect>268 <rect x="24" y="24" width="16" height="4" fill="#ffffff"></rect>269 <rect x="24" y="36" width="16" height="4" fill="#ffffff"></rect>270 </svg>271 </div>272 <div class="label">Currency Converter</div>273 </div>274 275 <div class="menu-item">276 <div class="icon">277 <!-- Grid icon (blue) -->278 <svg viewBox="0 0 64 64">279 <rect x="8" y="8" width="20" height="20" rx="4" fill="#5bb5ff"></rect>280 <rect x="36" y="8" width="20" height="20" rx="4" fill="#5bb5ff"></rect>281 <rect x="8" y="36" width="20" height="20" rx="4" fill="#5bb5ff"></rect>282 <rect x="36" y="36" width="20" height="20" rx="4" fill="#5bb5ff"></rect>283 </svg>284 </div>285 <div class="label">Multi Currency Converter</div>286 </div>287 288 <div class="menu-item">289 <div class="icon">290 <!-- Charts icon (green bars) -->291 <svg viewBox="0 0 64 64">292 <rect x="10" y="26" width="10" height="28" fill="#36c18d"></rect>293 <rect x="26" y="18" width="10" height="36" fill="#36c18d"></rect>294 <rect x="42" y="34" width="10" height="20" fill="#36c18d"></rect>295 <rect x="8" y="56" width="48" height="4" fill="#36c18d"></rect>296 </svg>297 </div>298 <div class="label">Currency Trends & Charts</div>299 </div>300 301 <div class="menu-item">302 <div class="icon">303 <!-- List icon (yellow lines) -->304 <svg viewBox="0 0 64 64">305 <circle cx="12" cy="16" r="5" fill="#f9b833"></circle>306 <rect x="22" y="12" width="34" height="8" fill="#f9b833"></rect>307 <circle cx="12" cy="32" r="5" fill="#f9b833"></circle>308 <rect x="22" y="28" width="34" height="8" fill="#f9b833"></rect>309 <circle cx="12" cy="48" r="5" fill="#f9b833"></circle>310 <rect x="22" y="44" width="34" height="8" fill="#f9b833"></rect>311 </svg>312 </div>313 <div class="label">Exchange Rates List</div>314 </div>315 316 <div class="menu-item">317 <div class="icon">318 <!-- Simulator icon (green trending) -->319 <svg viewBox="0 0 64 64">320 <path d="M10 44 L26 28 L38 36 L54 18" stroke="#2cd65e" stroke-width="6" fill="none"></path>321 <polygon points="54,18 52,28 60,24" fill="#2cd65e"></polygon>322 </svg>323 </div>324 <div class="label">Currency Simulator</div>325 </div>326 327 <div class="menu-item">328 <div class="icon">329 <!-- Bank icon (blue) -->330 <svg viewBox="0 0 64 64">331 <polygon points="8,26 32,12 56,26" fill="#6fa8ff"></polygon>332 <rect x="14" y="28" width="8" height="22" fill="#6fa8ff"></rect>333 <rect x="28" y="28" width="8" height="22" fill="#6fa8ff"></rect>334 <rect x="42" y="28" width="8" height="22" fill="#6fa8ff"></rect>335 <rect x="10" y="52" width="44" height="4" fill="#6fa8ff"></rect>336 </svg>337 </div>338 <div class="label">Exchange Rate Adjustment</div>339 </div>340 341 <div class="menu-section-title">Useful Services</div>342 343 <div class="menu-item">344 <div class="icon">345 <!-- Clock (pink) -->346 <svg viewBox="0 0 64 64">347 <circle cx="32" cy="32" r="26" stroke="#ff5cb4" stroke-width="6" fill="none"></circle>348 <rect x="30" y="16" width="4" height="18" fill="#ff5cb4"></rect>349 <rect x="32" y="30" width="14" height="4" fill="#ff5cb4"></rect>350 </svg>351 </div>352 <div class="label">World Clock</div>353 </div>354 355 <div class="menu-item">356 <div class="icon">357 <!-- Utensils (purple) -->358 <svg viewBox="0 0 64 64">359 <rect x="16" y="10" width="6" height="44" fill="#8c49ff"></rect>360 <rect x="26" y="10" width="6" height="26" fill="#8c49ff"></rect>361 <rect x="26" y="40" width="6" height="14" fill="#8c49ff"></rect>362 <path d="M42 10 L48 10 L48 38 C48 44 42 44 42 38 Z" fill="#8c49ff"></path>363 </svg>364 </div>365 <div class="label">Tip Calculator</div>366 </div>367 368 <div class="menu-item">369 <div class="icon">370 <!-- Question mark (blue) -->371 <svg viewBox="0 0 64 64">372 <circle cx="32" cy="32" r="28" fill="#4c79ff"></circle>373 <path d="M24 24c0-6 6-10 12-8 4 1 6 5 5 9-1 4-4 5-6 7-2 2-2 4-2 6" stroke="#fff" stroke-width="4" fill="none"/>374 <circle cx="32" cy="48" r="3" fill="#fff"></circle>375 </svg>376 </div>377 <div class="label">Currency Profile</div>378 </div>379 380 <div class="menu-section-title">Info & Settings</div>381 382 <div class="menu-item">383 <div class="icon">384 <!-- Info (green) -->385 <svg viewBox="0 0 64 64">386 <circle cx="32" cy="32" r="28" stroke="#8ad85a" stroke-width="6" fill="none"></circle>387 <circle cx="32" cy="20" r="5" fill="#8ad85a"></circle>388 <rect x="30" y="28" width="4" height="22" fill="#8ad85a"></rect>389 </svg>390 </div>391 <div class="label">App Information</div>392 </div>393 394 <div class="menu-item">395 <div class="icon">396 <!-- Settings (blue gear) -->397 <svg viewBox="0 0 64 64">398 <circle cx="32" cy="32" r="10" fill="#4c79ff"></circle>399 <circle cx="32" cy="32" r="22" stroke="#4c79ff" stroke-width="6" fill="none"></circle>400 <rect x="30" y="6" width="4" height="10" fill="#4c79ff"></rect>401 <rect x="30" y="48" width="4" height="10" fill="#4c79ff"></rect>402 <rect x="6" y="30" width="10" height="4" fill="#4c79ff"></rect>403 <rect x="48" y="30" width="10" height="4" fill="#4c79ff"></rect>404 </svg>405 </div>406 <div class="label">App Settings</div>407 </div>408 409 <div class="bottom-space"></div>410 </div>411 </div>412 413</div>414</body>415</html>