GD-ML/AndroidCode

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>Folders - Mock UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #EDEDED; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #1f1f1f;15  }16 17  /* Status bar */18  .status-bar {19    height: 110px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #EDEDED;25    font-size: 36px;26    opacity: 0.95;27  }28  .status-icons { display: flex; gap: 24px; align-items: center; }29 30  /* App bar */31  .app-bar {32    height: 120px;33    display: flex;34    align-items: center;35    padding: 0 36px;36  }37  .app-title {38    display: flex;39    align-items: center;40    gap: 16px;41    font-weight: 600;42    font-size: 48px;43    color: #EDEDED;44    opacity: 0.95;45  }46  .app-title .logo {47    width: 56px; height: 56px; border-radius: 12px;48    background: #E0E0E0; border: 1px solid #BDBDBD;49    display: inline-flex; align-items: center; justify-content: center;50    color: #757575; font-size: 20px;51  }52 53  /* Favourites pill */54  .fav-pill {55    margin: 24px 36px 12px 36px;56    display: inline-flex;57    align-items: center;58    gap: 18px;59    padding: 26px 34px;60    border: 2px solid #5f6368;61    color: #EDEDED;62    border-radius: 22px;63    width: 420px;64    box-sizing: border-box;65    font-size: 40px;66  }67  .fav-pill svg { width: 44px; height: 44px; fill: none; stroke: #9aa0a6; stroke-width: 3.5; }68 69  /* Grid of albums */70  .grid {71    padding: 12px 36px 0 36px;72    display: grid;73    grid-template-columns: 1fr 1fr;74    gap: 36px;75  }76  .album {77    width: 100%;78  }79  .thumb {80    width: 100%;81    height: 520px;82    background: #E0E0E0;83    border: 1px solid #BDBDBD;84    border-radius: 32px;85    display: flex;86    align-items: center;87    justify-content: center;88    color: #757575;89    font-size: 36px;90    text-align: center;91    box-sizing: border-box;92  }93  .album-title {94    margin-top: 18px;95    font-size: 44px;96    color: #EDEDED;97  }98  .album-sub {99    margin-top: 6px;100    font-size: 30px;101    color: #A8A8A8;102  }103 104  /* Overflow menu panel */105  .menu-panel {106    position: absolute;107    top: 220px;108    right: 36px;109    width: 480px;110    background: #333436;111    border-radius: 22px;112    box-shadow: 0 18px 40px rgba(0,0,0,0.5);113    overflow: hidden;114    z-index: 10;115  }116  .menu-item {117    padding: 34px 36px;118    font-size: 40px;119    color: #EDEDED;120    border-bottom: 1px solid rgba(255,255,255,0.06);121  }122  .menu-item:last-child { border-bottom: none; }123 124  /* Bottom navigation */125  .bottom-nav {126    position: absolute;127    left: 0; right: 0; bottom: 0;128    height: 180px;129    background: #2a2a2a;130    border-top: 1px solid #3b3b3b;131    display: flex;132    justify-content: space-around;133    align-items: center;134  }135  .nav-item {136    display: flex; flex-direction: column; align-items: center; gap: 10px;137    color: #BDBDBD; font-size: 30px;138  }139  .nav-item svg { width: 54px; height: 54px; }140  .nav-item.active { color: #6ea8ff; }141  .nav-item.active svg path, .nav-item.active svg rect { stroke: #6ea8ff; fill: none; }142 143  /* Gesture handle */144  .handle {145    position: absolute;146    left: 50%; transform: translateX(-50%);147    bottom: 28px;148    width: 300px; height: 8px; border-radius: 6px;149    background: #e6e6e6; opacity: 0.9;150  }151</style>152</head>153<body>154<div id="render-target">155 156  <!-- Simulated status bar -->157  <div class="status-bar">158    <div>6:11</div>159    <div class="status-icons">160      <span>◦</span>161      <span>🔔</span>162      <span>🔍</span>163      <span>📶</span>164      <span>🔋 100%</span>165    </div>166  </div>167 168  <!-- App bar -->169  <div class="app-bar">170    <div class="app-title">171      <div class="logo">Logo</div>172      Gallery173    </div>174  </div>175 176  <!-- Favourites quick filter pill -->177  <div class="fav-pill">178    <svg viewBox="0 0 24 24" aria-hidden="true">179      <path d="M12 3l3 6 6 .9-4.5 4.4 1.1 6.2L12 17l-5.6 3.5 1.1-6.2L3 9.9 9 9l3-6z"></path>180    </svg>181    Favourites182  </div>183 184  <!-- Albums grid -->185  <div class="grid">186    <div class="album">187      <div class="thumb">[IMG: Yellow Bottle on Desk]</div>188      <div class="album-title">Camera</div>189      <div class="album-sub">5 items · 84 MB</div>190    </div>191 192    <div class="album">193      <div class="thumb">[IMG: Screenshots Placeholder]</div>194      <div class="album-title">Screenshots</div>195      <div class="album-sub">1 item · 86 kB</div>196    </div>197 198    <div class="album">199      <div class="thumb">[IMG: Triangle Sketch]</div>200      <div class="album-title">Infinite Painter</div>201      <div class="album-sub">2 items · 135 kB</div>202    </div>203  </div>204 205  <!-- Overflow menu -->206  <div class="menu-panel">207    <div class="menu-item">New Folder</div>208    <div class="menu-item">Settings</div>209    <div class="menu-item">Trash</div>210    <div class="menu-item">Favourites</div>211  </div>212 213  <!-- Bottom navigation -->214  <div class="bottom-nav">215    <div class="nav-item">216      <!-- Photos icon -->217      <svg viewBox="0 0 24 24">218        <rect x="3" y="5" width="18" height="14" rx="2" ry="2" fill="none" stroke="#BDBDBD" stroke-width="2"></rect>219        <path d="M7 13l3-3 4 5 3-4 3 5" fill="none" stroke="#BDBDBD" stroke-width="2" />220      </svg>221      <div>Photos</div>222    </div>223    <div class="nav-item active">224      <!-- Folder icon -->225      <svg viewBox="0 0 24 24">226        <path d="M3 6h6l2 2h10v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" fill="none" stroke="#6ea8ff" stroke-width="2" />227      </svg>228      <div>Folders</div>229    </div>230  </div>231 232  <!-- Gesture handle -->233  <div class="handle"></div>234</div>235</body>236</html>