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>Gallery - Folders</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #2f3136;15    border-radius: 36px;16    box-shadow: 0 20px 50px rgba(0,0,0,0.35);17    color: #fff;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 26px;24    left: 36px;25    right: 36px;26    height: 90px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #f5f5f5;31    font-size: 38px;32    letter-spacing: 0.5px;33  }34  .status-left { display: flex; align-items: center; gap: 18px; }35  .dnd-dot {36    width: 20px; height: 20px; border-radius: 50%; background: #fff;37  }38  .status-right { display: flex; align-items: center; gap: 28px; }39  .status-icon svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 2.6; }40 41  /* Header */42  .header {43    position: absolute;44    top: 150px;45    left: 80px;46    display: flex;47    align-items: center;48    gap: 22px;49  }50  .gp-icon {51    width: 56px; height: 56px; border-radius: 12px; overflow: hidden; position: relative;52  }53  .gp-icon div { position: absolute; }54  .gp-icon .red { background:#EA4335; left:0; top:0; width:50%; height:50%; }55  .gp-icon .blue { background:#4285F4; right:0; top:0; width:50%; height:50%; }56  .gp-icon .yellow { background:#FBBC05; left:0; bottom:0; width:50%; height:50%; }57  .gp-icon .green { background:#34A853; right:0; bottom:0; width:50%; height:50%; }58  .header-title { font-size: 54px; font-weight: 500; color: #e9e9ea; }59 60  /* Overflow menu */61  .menu {62    position: absolute;63    top: 220px;64    right: 80px;65    width: 440px;66    background: #3a3d42;67    border-radius: 26px;68    box-shadow: 0 10px 28px rgba(0,0,0,0.45);69    padding: 18px 0;70  }71  .menu-item {72    padding: 28px 34px;73    font-size: 36px;74    color: #e9e9ea;75  }76  .menu-item + .menu-item { border-top: 1px solid rgba(255,255,255,0.06); }77 78  /* Grid of folders */79  .content {80    position: absolute;81    top: 420px;82    left: 48px;83    right: 48px;84    display: flex;85    gap: 48px;86  }87  .card {88    width: calc((1080px - 48px*3) / 2);89  }90  .thumb {91    width: 100%;92    height: 320px;93    background: #E0E0E0;94    border: 1px solid #BDBDBD;95    border-radius: 28px;96    display: flex;97    align-items: center;98    justify-content: center;99    color: #757575;100    font-size: 34px;101  }102  .card-title {103    margin-top: 22px;104    font-size: 42px;105    font-weight: 500;106    color: #f0f0f0;107  }108  .card-sub {109    margin-top: 8px;110    font-size: 30px;111    color: #a7a7a7;112  }113 114  /* Bottom nav */115  .tabbar {116    position: absolute;117    bottom: 86px;118    left: 0;119    width: 100%;120    height: 156px;121    background: #3a3a3d;122    display: flex;123    align-items: center;124    justify-content: space-around;125    padding: 0 40px;126    border-top-left-radius: 30px;127    border-top-right-radius: 30px;128  }129  .tab {130    width: 360px;131    display: flex;132    flex-direction: column;133    align-items: center;134    gap: 16px;135    color: #c9c9c9;136    font-size: 30px;137  }138  .tab svg { width: 62px; height: 62px; }139  .tab.active { color: #89a7ff; }140  .tab.active svg path, .tab.active svg rect, .tab.active svg polygon { fill: #89a7ff; stroke: #89a7ff; }141 142  /* Gesture bar */143  .gesture {144    position: absolute;145    bottom: 24px;146    left: 50%;147    transform: translateX(-50%);148    width: 300px;149    height: 14px;150    background: #e6e6e6;151    border-radius: 20px;152    opacity: 0.85;153  }154</style>155</head>156<body>157<div id="render-target">158 159  <!-- Status bar -->160  <div class="status-bar">161    <div class="status-left">162      <div>1:04</div>163      <div class="dnd-dot"></div>164    </div>165    <div class="status-right">166      <div class="status-icon">167        <!-- Simple Wi‑Fi icon -->168        <svg viewBox="0 0 24 24">169          <path d="M2 9c4-3 16-3 20 0" />170          <path d="M5 12c3-2 11-2 14 0" />171          <path d="M8 15c2-1 6-1 8 0" />172          <circle cx="12" cy="18" r="1.8" fill="#fff" stroke="none"/>173        </svg>174      </div>175      <div class="status-icon">176        <!-- Battery icon -->177        <svg viewBox="0 0 26 24">178          <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2.6"></rect>179          <rect x="4.5" y="8.5" width="13" height="7" rx="1.5" ry="1.5" fill="#fff" stroke="none"></rect>180          <rect x="20.8" y="9.5" width="3" height="5" rx="1" ry="1" fill="#fff" stroke="none"></rect>181        </svg>182      </div>183    </div>184  </div>185 186  <!-- Header -->187  <div class="header">188    <div class="gp-icon">189      <div class="red"></div>190      <div class="blue"></div>191      <div class="yellow"></div>192      <div class="green"></div>193    </div>194    <div class="header-title">Gallery</div>195  </div>196 197  <!-- Overflow menu -->198  <div class="menu">199    <div class="menu-item">New Folder</div>200    <div class="menu-item">Settings</div>201    <div class="menu-item">Trash</div>202    <div class="menu-item">Favourites</div>203  </div>204 205  <!-- Content Grid -->206  <div class="content">207    <div class="card">208      <div class="thumb">[IMG: Colosseum Photo]</div>209      <div class="card-title">Camera</div>210      <div class="card-sub">6 items · 22 MB</div>211    </div>212    <div class="card">213      <div class="thumb">[IMG: Crowd at Concert]</div>214      <div class="card-title">Screenshots</div>215      <div class="card-sub">5 items · 6.0 MB</div>216    </div>217  </div>218 219  <!-- Bottom navigation -->220  <div class="tabbar">221    <div class="tab">222      <svg viewBox="0 0 24 24">223        <rect x="2" y="3" width="20" height="16" rx="2" ry="2" fill="#c9c9c9"></rect>224        <circle cx="8" cy="10" r="3" fill="#3a3a3d"></circle>225        <polygon points="12,16 16,12 20,16" fill="#3a3a3d"></polygon>226      </svg>227      <div>Photos</div>228    </div>229    <div class="tab active">230      <svg viewBox="0 0 24 24">231        <path d="M3 6h6l2 2h10v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" fill="#89a7ff"></path>232      </svg>233      <div>Folders</div>234    </div>235  </div>236 237  <!-- Gesture bar -->238  <div class="gesture"></div>239 240</div>241</body>242</html>