GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Side Drawer - toDodo</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: "Segoe UI", Arial, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #202020; /* overall dark backdrop */18    box-sizing: border-box;19  }20 21  /* Top system bar */22  .system-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 160px;28    background: #3f3f3f;29    color: #f5f5f5;30    display: flex;31    align-items: center;32    padding: 0 36px;33    box-sizing: border-box;34  }35  .system-left {36    font-size: 40px;37    letter-spacing: 1px;38  }39  .system-right {40    margin-left: auto;41    display: flex;42    gap: 28px;43    align-items: center;44  }45  .sys-dot {46    width: 22px;47    height: 22px;48    border-radius: 50%;49    background: #dcdcdc;50    opacity: 0.8;51  }52 53  /* Drawer panel */54  .drawer {55    position: absolute;56    top: 0;57    left: 0;58    width: 760px;59    height: 2400px;60    background: #2a2a2a;61    color: #eaeaea;62    box-sizing: border-box;63    padding-top: 160px; /* below system bar */64  }65  .brand {66    padding: 24px 40px 8px 40px;67    font-family: cursive;68    font-size: 78px;69    color: #ffffff;70  }71  .content-mask {72    position: absolute;73    top: 160px;74    right: 0;75    width: 320px;76    height: 2240px;77    background: #0d0d0d;78  }79 80  /* Right-side app content preview */81  .top-icons {82    position: absolute;83    top: 180px;84    right: 26px;85    display: flex;86    gap: 36px;87  }88  .preview-icon {89    width: 60px;90    height: 60px;91    border-radius: 8px;92    background: #222;93    display: flex;94    align-items: center;95    justify-content: center;96  }97  .preview-icon svg { width: 42px; height: 42px; fill: none; stroke: #bbb; stroke-width: 6; }98 99  .leaf-art {100    position: absolute;101    top: 620px;102    right: 40px;103    width: 260px;104    height: 420px;105    background: #5a4520;106    border-radius: 140px 140px 140px 140px;107    display: flex;108    align-items: center;109    justify-content: center;110    color: #d7c28a;111    border: 1px solid #4c3a18;112    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.3);113  }114  .leaf-art span { font-size: 26px; opacity: 0.85; }115 116  /* Sections & items */117  .section {118    margin-top: 22px;119    padding: 14px 40px;120    color: #bdbdbd;121    font-size: 34px;122    letter-spacing: 0.5px;123  }124  .nav-item {125    display: flex;126    align-items: center;127    padding: 22px 40px;128    gap: 36px;129  }130  .nav-item .icon {131    width: 64px;132    height: 64px;133    display: inline-flex;134    align-items: center;135    justify-content: center;136  }137  .nav-item .icon svg {138    width: 56px;139    height: 56px;140    stroke: #f0f0f0;141    fill: none;142    stroke-width: 6;143  }144  .nav-item .label {145    font-size: 44px;146    color: #ffffff;147  }148  .divider {149    height: 2px;150    background: #3c3c3c;151    margin: 22px 0 8px 0;152  }153 154  /* Bottom helpers */155  .bottom-safe {156    position: absolute;157    bottom: 28px;158    left: 50%;159    transform: translateX(-50%);160    width: 240px;161    height: 16px;162    background: #eaeaea;163    border-radius: 16px;164    opacity: 0.8;165  }166</style>167</head>168<body>169<div id="render-target">170 171  <!-- System bar -->172  <div class="system-bar">173    <div class="system-left">10:14</div>174    <div class="system-right">175      <div class="sys-dot"></div>176      <div class="sys-dot"></div>177      <div class="sys-dot"></div>178      <div class="sys-dot"></div>179    </div>180  </div>181 182  <!-- Drawer panel -->183  <div class="drawer">184    <div class="brand">toDodo</div>185 186    <div class="section">Filters</div>187 188    <div class="nav-item">189      <div class="icon">190        <svg viewBox="0 0 24 24">191          <rect x="3" y="5" width="18" height="16" rx="2" ry="2"></rect>192          <line x1="7" y1="3" x2="7" y2="7"></line>193          <line x1="17" y1="3" x2="17" y2="7"></line>194        </svg>195      </div>196      <div class="label">Today</div>197    </div>198 199    <div class="nav-item">200      <div class="icon">201        <svg viewBox="0 0 24 24">202          <path d="M5 17 L17 5"></path>203          <path d="M12 6 L17 5 L16 10"></path>204        </svg>205      </div>206      <div class="label">Upcoming</div>207    </div>208 209    <div class="nav-item">210      <div class="icon">211        <svg viewBox="0 0 24 24">212          <rect x="3" y="5" width="18" height="16" rx="2"></rect>213          <line x1="7" y1="10" x2="17" y2="10"></line>214          <line x1="7" y1="14" x2="17" y2="14"></line>215        </svg>216      </div>217      <div class="label">Current week</div>218    </div>219 220    <div class="nav-item">221      <div class="icon">222        <svg viewBox="0 0 24 24">223          <line x1="12" y1="4" x2="12" y2="16"></line>224          <circle cx="12" cy="19" r="2"></circle>225        </svg>226      </div>227      <div class="label">Prioritized</div>228    </div>229 230    <div class="nav-item">231      <div class="icon">232        <svg viewBox="0 0 24 24">233          <rect x="4" y="6" width="14" height="12"></rect>234          <rect x="7" y="9" width="14" height="12"></rect>235        </svg>236      </div>237      <div class="label">Overdue</div>238    </div>239 240    <div class="divider"></div>241 242    <div class="section">Lists</div>243 244    <div class="nav-item">245      <div class="icon">246        <svg viewBox="0 0 24 24">247          <line x1="4" y1="6" x2="20" y2="6"></line>248          <line x1="4" y1="12" x2="20" y2="12"></line>249          <line x1="4" y1="18" x2="20" y2="18"></line>250        </svg>251      </div>252      <div class="label">Shopping</div>253    </div>254 255    <div class="nav-item">256      <div class="icon">257        <svg viewBox="0 0 24 24">258          <line x1="12" y1="4" x2="12" y2="20"></line>259          <line x1="4" y1="12" x2="20" y2="12"></line>260        </svg>261      </div>262      <div class="label">New List</div>263    </div>264 265    <div class="divider"></div>266 267    <div class="nav-item">268      <div class="icon">269        <svg viewBox="0 0 24 24">270          <polygon points="12,3 14.8,9.2 21.5,9.2 16,13.6 18.3,20.5 12,16.7 5.7,20.5 8,13.6 2.5,9.2 9.2,9.2"></polygon>271        </svg>272      </div>273      <div class="label">Upgrade to Pro</div>274    </div>275 276    <div class="nav-item">277      <div class="icon">278        <svg viewBox="0 0 24 24">279          <rect x="6" y="9" width="12" height="11" rx="1"></rect>280          <rect x="8" y="5" width="8" height="4" rx="1"></rect>281          <line x1="10" y1="12" x2="10" y2="18"></line>282          <line x1="14" y1="12" x2="14" y2="18"></line>283        </svg>284      </div>285      <div class="label">Trash</div>286    </div>287 288    <div class="nav-item">289      <div class="icon">290        <svg viewBox="0 0 24 24">291          <circle cx="12" cy="12" r="9"></circle>292          <line x1="12" y1="8" x2="12" y2="14"></line>293          <circle cx="12" cy="17" r="1.8"></circle>294        </svg>295      </div>296      <div class="label">Info & Tips</div>297    </div>298 299    <div class="nav-item">300      <div class="icon" style="color:#f0f0f0; font-size:44px;">⚙</div>301      <div class="label">Settings</div>302    </div>303  </div>304 305  <!-- Right side preview of app content -->306  <div class="content-mask"></div>307  <div class="top-icons">308    <div class="preview-icon">309      <svg viewBox="0 0 24 24">310        <line x1="5" y1="7" x2="19" y2="7"></line>311        <line x1="5" y1="12" x2="15" y2="12"></line>312        <line x1="5" y1="17" x2="13" y2="17"></line>313      </svg>314    </div>315    <div class="preview-icon">316      <svg viewBox="0 0 24 24">317        <polyline points="4,12 9,16 20,6"></polyline>318      </svg>319    </div>320    <div class="preview-icon">321      <svg viewBox="0 0 24 24">322        <circle cx="12" cy="12" r="2"></circle>323        <circle cx="4" cy="12" r="2"></circle>324        <circle cx="20" cy="12" r="2"></circle>325      </svg>326    </div>327  </div>328 329  <div class="leaf-art">330    <span>[IMG: Leaf illustration]</span>331  </div>332 333  <div class="bottom-safe"></div>334</div>335</body>336</html>