GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Gallery UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#0b0d11; color:#fff;10  }11  /* Status bar */12  .status-bar { position:absolute; top:24px; left:0; right:0; height:72px; padding:0 36px; display:flex; align-items:center; justify-content:space-between; color:#fff; }13  .status-left { display:flex; align-items:center; gap:18px; }14  .time { font-size:42px; font-weight:700; }15  .status-right { display:flex; align-items:center; gap:26px; }16  .icon { width:38px; height:38px; }17  /* Close (X) */18  .close-wrap { position:absolute; top:120px; left:32px; width:64px; height:64px; display:flex; align-items:center; justify-content:center; }19  /* Chips */20  .chips { position:absolute; top:220px; left:24px; right:24px; display:flex; gap:24px; }21  .chip {22    padding:18px 30px;23    border-radius:40px;24    border:1px solid #2f2f3a;25    color:#b9b9c5;26    font-size:34px;27    letter-spacing:0.5px;28    background:#12141a;29  }30  .chip.active { border-color:#8a72ff; background:#1d1a2a; color:#fff; }31  /* Main image */32  .main-image {33    position:absolute; top:420px; left:0; width:1080px; height:900px;34    background:#E0E0E0; border:1px solid #BDBDBD;35    display:flex; align-items:center; justify-content:center; color:#383838; font-size:38px; font-weight:600;36  }37  /* Pagination area below image */38  .pager { position:absolute; top:1360px; left:0; right:0; height:140px; display:flex; align-items:center; justify-content:center; }39  .dots { display:flex; gap:20px; }40  .dot { width:22px; height:22px; border-radius:50%; background:#6e6e75; }41  .dot.active { background:#ffffff; }42  .count { position:absolute; right:36px; top:34px; color:#cfcfe0; font-size:38px; }43  /* Thumbnails */44  .thumb-row { position:absolute; top:1540px; left:0; right:0; padding:0 24px; display:flex; gap:24px; }45  .thumb {46    width:200px; height:220px;47    background:#E0E0E0; border:1px solid #BDBDBD;48    display:flex; align-items:center; justify-content:center;49    color:#555; font-size:26px; text-align:center; padding:10px;50  }51  /* Home indicator */52  .home-indicator { position:absolute; bottom:40px; left:50%; transform:translateX(-50%); width:480px; height:12px; background:#cfcfe0; border-radius:8px; opacity:0.45; }53</style>54</head>55<body>56<div id="render-target">57 58  <!-- Status bar -->59  <div class="status-bar">60    <div class="status-left">61      <div class="time">3:17</div>62      <!-- check icon -->63      <svg class="icon" viewBox="0 0 24 24" fill="none">64        <path d="M4 12l5 5 11-11" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>65      </svg>66      <!-- cloud icon -->67      <svg class="icon" viewBox="0 0 24 24" fill="none">68        <path d="M6 15c-2.5 0-4.5-1.7-4.5-4s2-4 4.5-4c.3-2.4 2.4-4 4.8-4 3 0 5.2 2.3 5.2 5.1 1.8.3 3.3 1.8 3.3 3.7 0 2.1-1.8 3.8-4 3.8H6z" fill="#ffffff"/>69      </svg>70    </div>71    <div class="status-right">72      <!-- wifi icon -->73      <svg class="icon" viewBox="0 0 24 24" fill="none">74        <path d="M2 8c5-5 15-5 20 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>75        <path d="M5 11c3.8-3.8 10.2-3.8 14 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>76        <path d="M8 14c2.5-2.5 6.5-2.5 9 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>77        <circle cx="12" cy="18" r="2" fill="#ffffff"/>78      </svg>79      <!-- battery icon -->80      <svg class="icon" viewBox="0 0 28 24" fill="none">81        <rect x="2" y="6" width="20" height="12" rx="2" stroke="#ffffff" stroke-width="2"/>82        <rect x="4" y="8" width="14" height="8" fill="#ffffff"/>83        <rect x="22" y="9" width="4" height="6" rx="1" fill="#ffffff"/>84      </svg>85    </div>86  </div>87 88  <!-- Close button -->89  <div class="close-wrap">90    <svg viewBox="0 0 24 24" class="icon">91      <path d="M5 5l14 14M19 5L5 19" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>92    </svg>93  </div>94 95  <!-- Chips -->96  <div class="chips">97    <div class="chip active">ALL (99)</div>98    <div class="chip">OUTSIDE (3)</div>99    <div class="chip">BEDROOM (8)</div>100    <div class="chip">TRAVELER</div>101  </div>102 103  <!-- Main image -->104  <div class="main-image">[IMG: Illuminated Japanese Temple & Pagoda at Dusk]</div>105 106  <!-- Pagination / count -->107  <div class="pager">108    <div class="dots">109      <div class="dot active"></div>110      <div class="dot"></div>111      <div class="dot"></div>112      <div class="dot"></div>113      <div class="dot"></div>114    </div>115    <div class="count">1/99</div>116  </div>117 118  <!-- Thumbnails row -->119  <div class="thumb-row">120    <div class="thumb">[IMG: Gym Equipment]</div>121    <div class="thumb">[IMG: Castle by Moat]</div>122    <div class="thumb">[IMG: Bunk Bed]</div>123    <div class="thumb">[IMG: Night Street]</div>124    <div class="thumb">[IMG: Bathroom Wall]</div>125  </div>126 127  <!-- Home indicator -->128  <div class="home-indicator"></div>129 130</div>131</body>132</html>