GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Gallery Lightbox</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #0B0D10; color: #EDEDED;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0;17    height: 120px; padding: 0 36px;18    display: flex; align-items: center; justify-content: space-between;19    color: #EDEDED; font-size: 34px; letter-spacing: 1px;20  }21  .right-icons { display: flex; align-items: center; gap: 22px; }22 23  /* Close (X) */24  .close-btn {25    position: absolute; top: 148px; left: 36px;26    width: 64px; height: 64px; cursor: pointer;27  }28  .close-btn svg { width: 100%; height: 100%; }29  .close-btn line { stroke: #DADADA; stroke-width: 8; stroke-linecap: round; }30 31  /* Chip filter row */32  .chips {33    position: absolute; top: 210px; left: 24px; right: 24px;34    display: flex; gap: 24px; overflow: hidden;35  }36  .chip {37    padding: 22px 34px; border-radius: 36px;38    font-size: 36px; border: 2px solid #2E2F35; color: #BFC3CC;39    white-space: nowrap;40  }41  .chip.active {42    background: #2C2340; color: #FFFFFF; border-color: #2C2340;43    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.06);44  }45  .chip.disabled { opacity: 0.55; }46 47  /* Large image */48  .hero {49    position: absolute; left: 0; right: 0;50    top: 620px; height: 980px;51    display: flex; align-items: center; justify-content: center;52    background: #E0E0E0; border-top: 1px solid #3A3A3A; border-bottom: 1px solid #3A3A3A;53    color: #555; font-size: 40px; text-align: center; padding: 20px;54  }55 56  /* Pager and counter */57  .pager {58    position: absolute; top: 1680px; left: 0; right: 0;59    display: flex; align-items: center; justify-content: center; gap: 18px;60  }61  .dot {62    width: 18px; height: 18px; border-radius: 50%;63    background: #7B7C82;64    opacity: 0.55;65  }66  .dot.active { background: #FFFFFF; opacity: 1; }67  .counter {68    position: absolute; top: 1668px; right: 40px; font-size: 40px; color: #EDEDED;69  }70 71  /* Thumbnails row */72  .thumbs {73    position: absolute; left: 0; right: 0; bottom: 240px;74    display: flex; justify-content: space-between;75    padding: 0 20px;76  }77  .thumb {78    width: 200px; height: 200px;79    background: #E0E0E0; border: 1px solid #BDBDBD;80    display: flex; align-items: center; justify-content: center;81    color: #666; font-size: 26px; text-align: center; padding: 10px;82  }83 84  /* Top spacer to mimic large dark area above image */85  .big-dark-area {86    position: absolute; left: 0; right: 0; top: 320px; height: 260px;87  }88</style>89</head>90<body>91<div id="render-target">92 93  <!-- Status bar -->94  <div class="status-bar">95    <div class="left-time">3:17</div>96    <div class="right-icons">97      <!-- WiFi icon -->98      <svg width="40" height="40" viewBox="0 0 24 24" fill="none">99        <path d="M2 8c5-4 15-4 20 0" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>100        <path d="M5 11c3.5-2.5 10.5-2.5 14 0" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>101        <path d="M8 14c2-1.3 6-1.3 8 0" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>102        <circle cx="12" cy="18" r="1.6" fill="#EDEDED"/>103      </svg>104      <!-- Battery icon -->105      <svg width="48" height="48" viewBox="0 0 28 18" fill="none">106        <rect x="1" y="3" width="22" height="12" rx="2" stroke="#EDEDED" stroke-width="2"/>107        <rect x="3" y="5" width="18" height="8" rx="1.5" fill="#EDEDED"/>108        <rect x="24" y="7" width="3" height="6" rx="1" fill="#EDEDED"/>109      </svg>110    </div>111  </div>112 113  <!-- Close button -->114  <div class="close-btn" aria-label="Close">115    <svg viewBox="0 0 24 24">116      <line x1="4" y1="4" x2="20" y2="20"></line>117      <line x1="20" y1="4" x2="4" y2="20"></line>118    </svg>119  </div>120 121  <!-- Category chips -->122  <div class="chips">123    <div class="chip active">ALL (99)</div>124    <div class="chip disabled">OUTSIDE (3)</div>125    <div class="chip">BEDROOM (8)</div>126    <div class="chip">TRAVELER</div>127  </div>128 129  <!-- Spacer dark area (mimics the large empty dark region above the hero image) -->130  <div class="big-dark-area"></div>131 132  <!-- Main image -->133  <div class="hero">[IMG: Japanese temple gate and pagoda at dusk]</div>134 135  <!-- Pager and counter -->136  <div class="pager">137    <div class="dot active"></div>138    <div class="dot"></div>139    <div class="dot"></div>140    <div class="dot"></div>141    <div class="dot"></div>142  </div>143  <div class="counter">1/99</div>144 145  <!-- Thumbnails -->146  <div class="thumbs">147    <div class="thumb">[IMG: Note on wooden table]</div>148    <div class="thumb">[IMG: White bathroom sinks & mirrors]</div>149    <div class="thumb">[IMG: Tall blue skyscraper]</div>150    <div class="thumb">[IMG: People in a meeting]</div>151    <div class="thumb">[IMG: Cozy cafe interior]</div>152  </div>153 154</div>155</body>156</html>