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 - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #2f3136;15    color: #E9EAEC;16  }17 18  /* Status bar */19  .status-bar {20    height: 96px;21    padding: 0 28px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #ffffff;26    font-size: 34px;27    letter-spacing: 0.5px;28  }29  .status-left, .status-right {30    display: flex;31    align-items: center;32    gap: 18px;33  }34  .status-icon {35    width: 36px;36    height: 36px;37    opacity: 0.9;38  }39  .status-right .percent { margin-left: 6px; font-size: 30px; opacity: 0.9; }40 41  /* Header */42  .header {43    padding: 12px 32px 10px 32px;44    display: flex;45    align-items: center;46    justify-content: space-between;47  }48  .title-wrap {49    display: flex;50    align-items: center;51    gap: 24px;52  }53  .logo {54    width: 68px;55    height: 68px;56    border-radius: 12px;57    background: conic-gradient(#ea4335 0 25%, #fbbc04 0 50%, #34a853 0 75%, #4285f4 0);58    box-shadow: inset 0 0 0 6px rgba(0,0,0,0.15);59  }60  .title {61    font-size: 58px;62    color: #c7cbd1;63    font-weight: 500;64    letter-spacing: 0.5px;65  }66  .menu-btn {67    width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;68  }69 70  /* Section heading */71  .section {72    padding: 24px 32px 12px 32px;73    color: #f0f0f0;74    font-size: 48px;75    font-weight: 700;76  }77 78  /* Grid */79  .grid {80    padding: 6px 32px 0 32px;81    display: grid;82    grid-template-columns: repeat(4, 1fr);83    grid-column-gap: 20px;84    grid-row-gap: 20px;85  }86  .thumb {87    background: #E0E0E0;88    border: 1px solid #BDBDBD;89    height: 235px;90    display: flex;91    align-items: center;92    justify-content: center;93    color: #757575;94    font-size: 28px;95    text-align: center;96    border-radius: 6px;97  }98 99  /* Bottom navigation */100  .bottom-nav {101    position: absolute;102    left: 0; right: 0; bottom: 56px;103    height: 164px;104    background: #3a3b3f;105    display: flex;106    align-items: center;107    justify-content: space-around;108    border-top: 1px solid rgba(255,255,255,0.06);109  }110  .nav-item {111    width: 44%;112    display: flex;113    flex-direction: column;114    align-items: center;115    gap: 10px;116    color: #c9cbd1;117    font-size: 36px;118  }119  .nav-item .icon { width: 56px; height: 56px; }120  .nav-item.active { color: #8ab4f8; }121  .nav-item.active svg { fill: #8ab4f8; }122  .nav-item:not(.active) svg { fill: #c9cbd1; opacity: 0.85; }123 124  /* Gesture home indicator */125  .home-indicator {126    position: absolute;127    left: 50%;128    transform: translateX(-50%);129    bottom: 18px;130    width: 320px;131    height: 10px;132    border-radius: 6px;133    background: rgba(255,255,255,0.9);134  }135</style>136</head>137<body>138<div id="render-target">139 140  <!-- Status Bar -->141  <div class="status-bar">142    <div class="status-left">143      <div style="font-weight:600;">10:32</div>144      <!-- simple mail icon -->145      <svg class="status-icon" viewBox="0 0 24 24">146        <path fill="#fff" d="M3 5h18v14H3V5zm9 6L4.5 7.5h15L12 11z"/>147      </svg>148      <!-- gear -->149      <svg class="status-icon" viewBox="0 0 24 24">150        <path fill="#fff" d="M12 8.8a3.2 3.2 0 110 6.4 3.2 3.2 0 010-6.4zm8 3.2l2 .8-1 3.2-2-.8a6.7 6.7 0 01-1.2 2l1.2 1.9-2.7 2-1.2-1.9a6.7 6.7 0 01-2 .9l-.3 2.3h-3.3l-.3-2.3a6.7 6.7 0 01-2-.9l-1.2 1.9-2.7-2 1.2-1.9a6.7 6.7 0 01-1.2-2l-2 .8-1-3.2 2-.8a6.7 6.7 0 010-2l-2-.8 1-3.2 2 .8a6.7 6.7 0 012-2L6.7 2l2.7-2L10.6 2a6.7 6.7 0 012-.4l.3-2.3h3.3l.3 2.3a6.7 6.7 0 012 .4l1.2-1.9 2.7 2-1.2 1.9a6.7 6.7 0 012 2l2-.8 1 3.2-2 .8c.1.7.1 1.3 0 2z" opacity="0.8"/>151      </svg>152      <!-- cloud -->153      <svg class="status-icon" viewBox="0 0 24 24">154        <path fill="#fff" d="M6 18a4 4 0 010-8 5 5 0 119.7 1.2A3.5 3.5 0 1116.5 18H6z"/>155      </svg>156    </div>157    <div class="status-right">158      <!-- wifi -->159      <svg class="status-icon" viewBox="0 0 24 24">160        <path fill="#fff" d="M12 18.5l2.5 2.5L12 24l-2.5-3 2.5-2.5zM2 9a16 16 0 0120 0l-2 2a13 13 0 00-16 0L2 9zm4 4a10 10 0 0112 0l-2 2a7 7 0 00-8 0l-2-2z"/>161      </svg>162      <!-- battery -->163      <svg class="status-icon" viewBox="0 0 26 24">164        <rect x="1" y="6" width="20" height="12" rx="2" ry="2" fill="#fff"/>165        <rect x="3" y="8" width="16" height="8" fill="#2f3136"/>166        <rect x="3" y="8" width="13" height="8" fill="#8ab4f8"/>167        <rect x="21" y="9" width="4" height="6" rx="1" fill="#fff"/>168      </svg>169      <div class="percent">100%</div>170    </div>171  </div>172 173  <!-- Header -->174  <div class="header">175    <div class="title-wrap">176      <div class="logo" aria-label="Google Photos style logo"></div>177      <div class="title">Gallery</div>178    </div>179    <div class="menu-btn" aria-label="More options">180      <svg width="40" height="40" viewBox="0 0 24 24">181        <circle cx="12" cy="5" r="2.2" fill="#c7cbd1"/>182        <circle cx="12" cy="12" r="2.2" fill="#c7cbd1"/>183        <circle cx="12" cy="19" r="2.2" fill="#c7cbd1"/>184      </svg>185    </div>186  </div>187 188  <div class="section">September</div>189 190  <!-- Grid of photos -->191  <div class="grid">192    <div class="thumb">[IMG: Palace Interior]</div>193    <div class="thumb">[IMG: Castle in Autumn]</div>194    <div class="thumb">[IMG: Museum at Dusk]</div>195    <div class="thumb">[IMG: Riverfront Building]</div>196    <div class="thumb">[IMG: Stone Tower Bridge]</div>197  </div>198 199  <!-- Bottom Navigation -->200  <div class="bottom-nav">201    <div class="nav-item active">202      <svg class="icon" viewBox="0 0 24 24">203        <path d="M21 19H3V5h10l2 2h6v12zM8 9.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5z"/>204      </svg>205      <div>Photos</div>206    </div>207    <div class="nav-item">208      <svg class="icon" viewBox="0 0 24 24">209        <path d="M20 19H4V7h7l2 2h7v10zM4 5h10l2 2h4v2H4V5z"/>210      </svg>211      <div>Folders</div>212    </div>213  </div>214 215  <div class="home-indicator"></div>216</div>217</body>218</html>