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    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #202225;15    color: #EDEDED;16  }17 18  /* Status bar */19  .status-bar {20    height: 94px;21    padding: 0 32px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #FFFFFF;26    font-weight: 500;27  }28  .status-time { font-size: 40px; letter-spacing: 1px; opacity: 0.95; }29 30  .status-icons { display: flex; gap: 26px; align-items: center; }31  .icon { display: inline-flex; }32 33  /* Header */34  .header {35    height: 170px;36    display: flex;37    align-items: center;38    padding: 0 40px;39    position: relative;40  }41  .gp-logo {42    width: 72px; height: 72px;43    position: relative;44    margin-right: 18px;45    border-radius: 12px;46    overflow: hidden;47  }48  .gp-logo span { position: absolute; }49  .gp-logo .q1 { background:#EA4335; left:0; top:0; width:50%; height:50%; }50  .gp-logo .q2 { background:#FBBC04; right:0; top:0; width:50%; height:50%; }51  .gp-logo .q3 { background:#34A853; left:0; bottom:0; width:50%; height:50%; }52  .gp-logo .q4 { background:#4285F4; right:0; bottom:0; width:50%; height:50%; }53 54  .title {55    font-size: 64px;56    color: #DADCE0;57    letter-spacing: 0.5px;58  }59  .kebab {60    position: absolute;61    right: 32px;62    top: 50%;63    transform: translateY(-50%);64    opacity: 0.9;65  }66 67  /* Sorting row */68  .sort-row {69    display: flex;70    justify-content: flex-end;71    align-items: center;72    padding: 0 48px;73    margin-top: 8px;74    color: #8AB4F8;75    gap: 10px;76  }77  .sort-row span {78    font-size: 40px;79    font-weight: 500;80  }81 82  /* Folders grid */83  .folders-grid {84    padding: 24px 48px;85    display: grid;86    grid-template-columns: 1fr 1fr;87    gap: 48px;88  }89  .folder-card { }90  .folder-img {91    width: 100%;92    height: 440px;93    background: #E0E0E0;94    border: 1px solid #BDBDBD;95    border-radius: 30px;96    display: flex;97    align-items: center;98    justify-content: center;99    color: #757575;100    font-size: 38px;101    text-align: center;102  }103  .folder-meta { margin-top: 22px; }104  .folder-name {105    font-size: 56px;106    font-weight: 700;107    color: #ECEFF1;108    line-height: 1.1;109  }110  .folder-sub {111    margin-top: 8px;112    color: #A7A7A7;113    font-size: 34px;114  }115 116  /* Bottom navigation */117  .bottom-nav {118    position: absolute;119    left: 0;120    right: 0;121    bottom: 100px; /* leave room for gesture bar */122    height: 150px;123    background: #2A2D31;124    display: flex;125    align-items: center;126    justify-content: space-around;127    border-top: 1px solid rgba(255,255,255,0.06);128  }129  .tab {130    display: flex;131    flex-direction: column;132    align-items: center;133    gap: 14px;134    color: #B0B8C1;135  }136  .tab .label { font-size: 34px; }137  .tab .nav-icon svg { width: 56px; height: 56px; }138  .tab.active { color: #8AB4F8; }139  .tab.active .nav-icon svg path { fill: #8AB4F8; }140 141  /* Gesture bar */142  .gesture-bar {143    position: absolute;144    bottom: 28px;145    left: 50%;146    transform: translateX(-50%);147    width: 320px;148    height: 14px;149    background: #E6E6E6;150    border-radius: 10px;151    opacity: 0.95;152  }153</style>154</head>155<body>156<div id="render-target">157 158  <!-- Status bar -->159  <div class="status-bar">160    <div class="status-time">1:04</div>161    <div class="status-icons">162      <!-- WiFi -->163      <svg class="icon" width="44" height="44" viewBox="0 0 24 24" fill="none">164        <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>165        <path d="M5 11c4-3 10-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>166        <path d="M8.5 14.5c2.5-2 5-2 7 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>167        <circle cx="12" cy="18" r="1.8" fill="#fff"/>168      </svg>169      <!-- Battery -->170      <svg class="icon" width="50" height="44" viewBox="0 0 26 24" fill="none">171        <rect x="2" y="6" width="18" height="12" rx="2" stroke="#fff" stroke-width="2"/>172        <rect x="4.5" y="8.5" width="13" height="7" fill="#fff"/>173        <rect x="20.5" y="9" width="3" height="6" rx="1" fill="#fff"/>174      </svg>175    </div>176  </div>177 178  <!-- Header -->179  <div class="header">180    <div class="gp-logo" aria-label="Google Photos Logo">181      <span class="q1"></span>182      <span class="q2"></span>183      <span class="q3"></span>184      <span class="q4"></span>185    </div>186    <div class="title">Gallery</div>187    <div class="kebab">188      <svg width="48" height="48" viewBox="0 0 24 24" fill="#C9D1D9">189        <circle cx="12" cy="5" r="2"></circle>190        <circle cx="12" cy="12" r="2"></circle>191        <circle cx="12" cy="19" r="2"></circle>192      </svg>193    </div>194  </div>195 196  <!-- Sort row -->197  <div class="sort-row">198    <span>Recent</span>199    <svg width="40" height="40" viewBox="0 0 24 24" fill="#8AB4F8">200      <path d="M7 8l5-5 5 5H7z"></path>201      <path d="M17 16l-5 5-5-5h10z"></path>202    </svg>203  </div>204 205  <!-- Folders grid -->206  <div class="folders-grid">207    <div class="folder-card">208      <div class="folder-img">209        [IMG: Colosseum Photo]210      </div>211      <div class="folder-meta">212        <div class="folder-name">Camera</div>213        <div class="folder-sub">6 items · 22 MB</div>214      </div>215    </div>216 217    <div class="folder-card">218      <div class="folder-img">219        [IMG: Concert Crowd]220      </div>221      <div class="folder-meta">222        <div class="folder-name">Screenshots</div>223        <div class="folder-sub">5 items · 6.0 MB</div>224      </div>225    </div>226  </div>227 228  <!-- Bottom navigation -->229  <div class="bottom-nav">230    <div class="tab">231      <div class="nav-icon">232        <!-- simple photo icon -->233        <svg viewBox="0 0 24 24">234          <path fill="#B0B8C1" d="M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zm0 12h16V7H4v10zm3-2l3-4 3 4 2-3 3 5H7z"/>235          <circle cx="9" cy="9" r="1.5" fill="#B0B8C1"></circle>236        </svg>237      </div>238      <div class="label">Photos</div>239    </div>240 241    <div class="tab active">242      <div class="nav-icon">243        <!-- folder icon -->244        <svg viewBox="0 0 24 24">245          <path d="M10 4l2 2h7a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h5z" fill="#8AB4F8"></path>246        </svg>247      </div>248      <div class="label">Folders</div>249    </div>250  </div>251 252  <!-- Gesture handle -->253  <div class="gesture-bar"></div>254</div>255</body>256</html>