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>Image Viewer UI</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: #1E1F23; /* dark viewer background */13    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;14    color: #fff;15  }16 17  /* Status bar */18  .status-bar {19    height: 110px;20    padding: 0 36px;21    display: flex; align-items: center; justify-content: space-between;22    color: #D4D4D4; font-size: 34px;23  }24  .status-left { display: flex; align-items: center; gap: 20px; }25  .status-right { display: flex; align-items: center; gap: 26px; }26  .status-icon svg { width: 42px; height: 42px; }27 28  /* App bar */29  .app-bar {30    height: 140px;31    display: flex; align-items: center;32    padding: 0 24px 0 20px;33  }34  .back-btn {35    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;36    margin-right: 12px;37  }38  .title {39    font-size: 52px; font-weight: 500; color: #FFFFFF;40  }41  .app-actions {42    margin-left: auto; display: flex; align-items: center; gap: 26px;43  }44  .app-actions .icon-btn { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }45 46  /* Image area */47  .viewer-area {48    position: relative;49    padding: 40px 0;50    display: block;51  }52  .image-placeholder {53    width: 980px; height: 1180px;54    margin: 0 auto;55    background: #E0E0E0;56    border: 1px solid #BDBDBD;57    display: flex; align-items: center; justify-content: center;58    color: #757575; font-size: 40px; text-align: center;59  }60 61  /* Floating Action Button (rounded square) */62  .fab {63    position: absolute; right: 60px; bottom: 210px;64    width: 160px; height: 160px; border-radius: 44px;65    background: #E7E5F8; box-shadow: 0 10px 24px rgba(0,0,0,0.35);66    display: flex; align-items: center; justify-content: center;67  }68 69  /* Gesture pill */70  .gesture-pill {71    position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%);72    width: 420px; height: 16px; border-radius: 10px; background: #FFFFFF;73    opacity: 0.9;74  }75</style>76</head>77<body>78<div id="render-target">79 80  <!-- Status Bar -->81  <div class="status-bar">82    <div class="status-left">83      <div>4:20</div>84      <div class="status-icon">85        <!-- small "eye" icon placeholder -->86        <svg viewBox="0 0 24 24">87          <path d="M2 12c3-5 7-7 10-7s7 2 10 7c-3 5-7 7-10 7S5 17 2 12z" fill="none" stroke="#CFCFCF" stroke-width="2"/>88          <circle cx="12" cy="12" r="3" fill="#CFCFCF"/>89        </svg>90      </div>91      <div class="status-icon">92        <!-- mail envelope -->93        <svg viewBox="0 0 24 24">94          <rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="#CFCFCF" stroke-width="2"/>95          <path d="M3 7l9 7 9-7" fill="none" stroke="#CFCFCF" stroke-width="2"/>96        </svg>97      </div>98      <div class="status-icon">99        <!-- vibration icon -->100        <svg viewBox="0 0 24 24">101          <rect x="7" y="5" width="10" height="14" rx="2" fill="none" stroke="#CFCFCF" stroke-width="2"/>102          <path d="M2 8l2 2M2 14l2-2M22 8l-2 2M22 14l-2-2" stroke="#CFCFCF" stroke-width="2" fill="none"/>103        </svg>104      </div>105      <div class="status-icon">106        <!-- square recent apps indicator -->107        <svg viewBox="0 0 24 24">108          <rect x="6" y="6" width="12" height="12" fill="none" stroke="#CFCFCF" stroke-width="2"/>109        </svg>110      </div>111      <div class="status-icon">112        <!-- dot -->113        <svg viewBox="0 0 24 24">114          <circle cx="12" cy="12" r="3" fill="#CFCFCF"/>115        </svg>116      </div>117    </div>118    <div class="status-right">119      <div class="status-icon">120        <!-- wifi -->121        <svg viewBox="0 0 24 24">122          <path d="M2 8c4-3 8-3 10-3s6 0 10 3M5 12c3-2 6-2 7-2s4 0 7 2M9 16c2-1 4-1 6 0" fill="none" stroke="#CFCFCF" stroke-width="2"/>123          <circle cx="12" cy="19" r="2" fill="#CFCFCF"/>124        </svg>125      </div>126      <div class="status-icon">127        <!-- battery -->128        <svg viewBox="0 0 32 24">129          <rect x="2" y="6" width="24" height="12" rx="2" fill="none" stroke="#CFCFCF" stroke-width="2"/>130          <rect x="4" y="8" width="16" height="8" fill="#CFCFCF"/>131          <rect x="26" y="10" width="4" height="4" rx="1" fill="#CFCFCF"/>132        </svg>133      </div>134    </div>135  </div>136 137  <!-- App Bar -->138  <div class="app-bar">139    <div class="back-btn">140      <svg width="60" height="60" viewBox="0 0 48 48">141        <path d="M28 10L12 24l16 14" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>142      </svg>143    </div>144    <div class="title">Mountain view.jpg</div>145    <div class="app-actions">146      <div class="icon-btn" title="Details">147        <!-- message bubble -->148        <svg width="56" height="56" viewBox="0 0 48 48">149          <path d="M8 10h32v22H20l-8 6v-6H8z" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linejoin="round"/>150        </svg>151      </div>152      <div class="icon-btn" title="More">153        <!-- vertical kebab -->154        <svg width="56" height="56" viewBox="0 0 48 48">155          <circle cx="24" cy="12" r="3" fill="#FFFFFF"/>156          <circle cx="24" cy="24" r="3" fill="#FFFFFF"/>157          <circle cx="24" cy="36" r="3" fill="#FFFFFF"/>158        </svg>159      </div>160    </div>161  </div>162 163  <!-- Main Viewer Area -->164  <div class="viewer-area">165    <div class="image-placeholder">166      [IMG: Mountain landscape photo]167    </div>168  </div>169 170  <!-- Floating Edit Button -->171  <div class="fab" title="Edit">172    <svg width="72" height="72" viewBox="0 0 48 48">173      <path d="M34 8l6 6-20 20-8 2 2-8 20-20z" fill="#141833"/>174      <path d="M26 12l10 10" stroke="#141833" stroke-width="2"/>175    </svg>176  </div>177 178  <!-- Gesture Navigation Pill -->179  <div class="gesture-pill"></div>180 181</div>182</body>183</html>