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>Mountain view.jpg - Viewer</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #1f2023;13    font-family: Arial, Helvetica, sans-serif;14    color: #eaeaea;15  }16 17  /* Status bar */18  .statusbar {19    height: 96px;20    padding: 0 32px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #ffffff;25    font-size: 40px;26    letter-spacing: 0.5px;27  }28  .status-left { display: flex; align-items: center; gap: 18px; }29  .status-center { display: flex; align-items: center; gap: 26px; opacity: 0.85; }30  .status-right { display: flex; align-items: center; gap: 28px; }31 32  .status-icon svg { width: 44px; height: 44px; fill: none; stroke: #ffffff; stroke-width: 3; }33 34  /* App bar */35  .appbar {36    height: 140px;37    padding: 0 32px;38    display: flex;39    align-items: center;40    justify-content: space-between;41    background: #25262a;42    border-bottom: 1px solid #2d2e33;43  }44  .app-left { display: flex; align-items: center; gap: 24px; }45  .app-title { font-size: 52px; font-weight: 600; }46  .app-right { display: flex; align-items: center; gap: 30px; }47  .app-icon svg { width: 56px; height: 56px; stroke: #eaeaea; fill: none; stroke-width: 3; }48 49  /* Content area */50  .content {51    position: relative;52    padding-top: 90px;53  }54  .photo-wrap {55    width: 980px; height: 760px;56    margin: 0 auto;57    background: #E0E0E0;58    border: 1px solid #BDBDBD;59    display: flex; align-items: center; justify-content: center;60    color: #757575;61    font-size: 42px; font-weight: 600;62    border-radius: 6px;63  }64 65  /* Large dark gutters to mimic letterbox */66  .gutter {67    width: 100%; height: 520px;68    background: #1f2023;69  }70  .gutter.top { border-bottom: 0; }71  .gutter.bottom { border-top: 0; }72 73  /* Floating Edit Button */74  .fab {75    position: absolute;76    right: 56px; bottom: 210px;77    width: 140px; height: 140px;78    background: #dcd8ff;79    border-radius: 32px;80    box-shadow: 0 12px 24px rgba(0,0,0,0.35);81    display: flex; align-items: center; justify-content: center;82  }83  .fab svg { width: 64px; height: 64px; stroke: #0f1530; stroke-width: 5; fill: none; }84 85  /* Navigation pill */86  .nav-pill {87    position: absolute;88    left: 50%; transform: translateX(-50%);89    bottom: 72px;90    width: 320px; height: 14px;91    background: #d6d6d6;92    border-radius: 10px;93    opacity: 0.85;94  }95 96  /* Utility tiny dot */97  .tiny-dot {98    width: 14px; height: 14px; background: #cfcfcf; border-radius: 50%;99    display: inline-block;100  }101</style>102</head>103<body>104<div id="render-target">105 106  <!-- Status Bar -->107  <div class="statusbar">108    <div class="status-left">109      <div>4:19</div>110    </div>111    <div class="status-center">112      <!-- Simple placeholders for small status icons -->113      <div class="status-icon">114        <!-- Envelope (mail) -->115        <svg viewBox="0 0 24 24"><path d="M3 5h18v14H3z"/><path d="M3 5l9 7 9-7"/></svg>116      </div>117      <div class="status-icon">118        <!-- Vibration icon -->119        <svg viewBox="0 0 24 24"><path d="M8 4v16M16 4v16"/><path d="M2 8l2-2M2 16l2 2M22 8l-2-2M22 16l-2 2"/></svg>120      </div>121      <div class="tiny-dot"></div>122    </div>123    <div class="status-right">124      <!-- WiFi -->125      <div class="status-icon">126        <svg viewBox="0 0 24 24">127          <path d="M2 9c5-5 15-5 20 0"/>128          <path d="M5 12c4-4 10-4 14 0"/>129          <path d="M8 15c3-3 7-3 10 0"/>130          <circle cx="12" cy="18" r="2" fill="#ffffff" stroke="none"/>131        </svg>132      </div>133      <!-- Battery -->134      <div class="status-icon">135        <svg viewBox="0 0 24 24">136          <rect x="2" y="6" width="18" height="12" rx="2" ry="2"></rect>137          <rect x="21" y="9" width="2" height="6"></rect>138          <rect x="4" y="8" width="14" height="8" fill="#ffffff" stroke="none"></rect>139        </svg>140      </div>141    </div>142  </div>143 144  <!-- App Bar -->145  <div class="appbar">146    <div class="app-left">147      <!-- Back arrow -->148      <div class="app-icon">149        <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg>150      </div>151      <div class="app-title">Mountain view.jpg</div>152    </div>153    <div class="app-right">154      <!-- Chat bubble -->155      <div class="app-icon">156        <svg viewBox="0 0 24 24"><path d="M4 4h16v12H9l-5 4z"/></svg>157      </div>158      <!-- More (vertical dots) -->159      <div class="app-icon">160        <svg viewBox="0 0 24 24">161          <circle cx="12" cy="5" r="2" fill="#eaeaea" stroke="none"></circle>162          <circle cx="12" cy="12" r="2" fill="#eaeaea" stroke="none"></circle>163          <circle cx="12" cy="19" r="2" fill="#eaeaea" stroke="none"></circle>164        </svg>165      </div>166    </div>167  </div>168 169  <!-- Content with large letterboxed image -->170  <div class="content">171    <div class="gutter top"></div>172 173    <div class="photo-wrap">[IMG: Landscape photo of town and green fields]</div>174 175    <div class="gutter bottom" style="height: 1030px;"></div>176  </div>177 178  <!-- Floating Edit Button -->179  <div class="fab">180    <svg viewBox="0 0 24 24">181      <path d="M4 17l10-10 3 3-10 10H4z"/>182      <path d="M14 7l3 3"/>183    </svg>184  </div>185 186  <!-- Bottom navigation pill -->187  <div class="nav-pill"></div>188 189</div>190</body>191</html>