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: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #2b2c2f;15    border-radius: 28px;16    box-shadow: 0 8px 30px rgba(0,0,0,0.35);17    color: #fff;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0; left: 0;24    width: 1080px; height: 120px;25    padding: 26px 36px;26    box-sizing: border-box;27    display: flex; align-items: center; justify-content: space-between;28  }29  .status-left { font-size: 42px; font-weight: 600; opacity: 0.95; }30  .status-right { display: flex; align-items: center; gap: 24px; }31 32  /* Title / header */33  .title-row {34    position: absolute;35    top: 180px; left: 340px;36    display: flex; align-items: center; gap: 24px;37  }38  .app-logo {39    width: 64px; height: 64px;40    border-radius: 12px;41    display: flex; align-items: center; justify-content: center;42    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;43    font-size: 20px;44  }45  .app-title { font-size: 64px; font-weight: 500; letter-spacing: 0.5px; color: #e6e6e6; }46 47  /* Section */48  .section-title { position: absolute; top: 400px; left: 36px; font-size: 48px; font-weight: 700; color: #f0f0f0; }49 50  /* Grid of thumbnails */51  .grid {52    position: absolute;53    top: 480px; left: 36px;54    width: 1008px;55    display: grid;56    grid-template-columns: repeat(3, 1fr);57    gap: 24px;58  }59  .thumb {60    height: 300px;61    background: #E0E0E0;62    border: 1px solid #BDBDBD;63    display: flex; align-items: center; justify-content: center;64    color: #757575; font-weight: 500;65  }66 67  /* Overlay menu */68  .overlay-menu {69    position: absolute;70    top: 270px; left: 560px;71    width: 520px;72    background: #3b3d40;73    border-radius: 24px;74    box-shadow: 0 18px 40px rgba(0,0,0,0.55);75  }76  .menu-item {77    padding: 36px 40px;78    font-size: 44px;79    color: #fff;80    border-bottom: 1px solid rgba(255,255,255,0.08);81  }82  .menu-item:last-child { border-bottom: none; padding-bottom: 40px; }83 84  /* Bottom navigation */85  .bottom-nav {86    position: absolute;87    bottom: 0; left: 0;88    width: 1080px; height: 170px;89    background: #333436;90    border-top: 1px solid rgba(255,255,255,0.08);91    display: flex;92  }93  .nav-item {94    width: 50%;95    display: flex; align-items: center; justify-content: center;96    gap: 18px; color: #cfd8dc; font-size: 40px;97  }98  .nav-item .icon { width: 48px; height: 48px; }99  .nav-item.active { color: #8ab4f8; }100 101  /* Gesture bar */102  .gesture {103    position: absolute;104    bottom: 190px; left: 420px;105    width: 240px; height: 12px;106    background: #e0e0e0; border-radius: 8px; opacity: 0.85;107  }108</style>109</head>110<body>111<div id="render-target">112 113  <!-- Status Bar -->114  <div class="status-bar">115    <div class="status-left">10:32</div>116    <div class="status-right">117      <!-- WiFi icon -->118      <svg width="42" height="42" viewBox="0 0 24 24" aria-label="WiFi">119        <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>120        <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>121        <path d="M9 16c2-2 4-2 6 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>122        <circle cx="12" cy="19" r="1.5" fill="#fff"/>123      </svg>124      <!-- Battery icon -->125      <svg width="64" height="42" viewBox="0 0 64 32" aria-label="Battery">126        <rect x="2" y="6" width="52" height="20" rx="4" ry="4" stroke="#fff" stroke-width="2" fill="none"/>127        <rect x="56" y="11" width="6" height="10" rx="2" fill="#fff"/>128        <rect x="6" y="10" width="44" height="12" rx="2" fill="#fff"/>129      </svg>130      <div style="font-size:38px;">100%</div>131    </div>132  </div>133 134  <!-- Header / App title -->135  <div class="title-row">136    <div class="app-logo">[ICON]</div>137    <div class="app-title">Gallery</div>138  </div>139 140  <!-- Section heading -->141  <div class="section-title">September</div>142 143  <!-- Thumbnails grid -->144  <div class="grid">145    <div class="thumb">[IMG: Chandelier Hall]</div>146    <div class="thumb">[IMG: Castle]</div>147    <div class="thumb">[IMG: Gallery Thumbnail]</div>148    <div class="thumb">[IMG: City Building]</div>149  </div>150 151  <!-- Overlay menu -->152  <div class="overlay-menu">153    <div class="menu-item">Select items</div>154    <div class="menu-item">Settings</div>155    <div class="menu-item">Trash</div>156    <div class="menu-item">Favourites</div>157  </div>158 159  <!-- Gesture bar -->160  <div class="gesture"></div>161 162  <!-- Bottom navigation -->163  <div class="bottom-nav">164    <div class="nav-item active">165      <svg viewBox="0 0 24 24" class="icon" aria-label="Photos">166        <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="#8ab4f8" stroke-width="2"/>167        <rect x="8" y="9" width="8" height="6" fill="#8ab4f8"/>168      </svg>169      <div>Photos</div>170    </div>171    <div class="nav-item">172      <svg viewBox="0 0 24 24" class="icon" aria-label="Folders">173        <path d="M3 8h18v12H3z" fill="none" stroke="#cfd8dc" stroke-width="2"/>174        <path d="M3 8l4-4h10l4 4" fill="none" stroke="#cfd8dc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>175      </svg>176      <div>Folders</div>177    </div>178  </div>179 180</div>181</body>182</html>