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>Mobile Photo Viewer Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    font-family: Arial, Helvetica, sans-serif;16    color: #fff;17  }18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 100%;24    height: 110px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 32px;29    color: #ffffff;30    font-size: 42px;31    letter-spacing: 0.5px;32  }33  .status-right {34    display: flex;35    align-items: center;36    gap: 22px;37    font-size: 34px;38    color: #e0e0e0;39  }40  .status-icon svg { width: 44px; height: 44px; }41  /* Header with navigation */42  .viewer-header {43    position: absolute;44    top: 110px;45    left: 0;46    width: 100%;47    height: 120px;48    display: flex;49    align-items: center;50    justify-content: space-between;51    padding: 0 24px;52    color: #fff;53  }54  .header-left, .header-right {55    display: flex;56    align-items: center;57    gap: 28px;58  }59  .icon-btn {60    width: 96px;61    height: 96px;62    display: flex;63    align-items: center;64    justify-content: center;65  }66  .icon-btn svg { width: 48px; height: 48px; }67  .spacer-top {68    position: absolute;69    top: 230px; /* just below header */70    left: 0;71    width: 100%;72    height: 30px;73  }74  /* Photo area */75  .photo-wrap {76    position: absolute;77    top: 260px;78    left: 30px;79    width: 1020px;80    height: 1600px;81    background: #E0E0E0;82    border: 1px solid #BDBDBD;83    display: flex;84    align-items: center;85    justify-content: center;86    color: #757575;87    font-size: 40px;88  }89  /* Bottom actions */90  .actions-bar {91    position: absolute;92    bottom: 140px;93    left: 0;94    width: 100%;95    height: 290px;96    display: flex;97    align-items: center;98    justify-content: space-around;99    color: #fff;100  }101  .action {102    width: 200px;103    text-align: center;104  }105  .action .a-icon {106    width: 96px;107    height: 96px;108    margin: 0 auto 22px auto;109    display: flex;110    align-items: center;111    justify-content: center;112  }113  .action .a-icon svg { width: 56px; height: 56px; }114  .action-label {115    font-size: 36px;116    color: #f5f5f5;117  }118  /* Gesture bar */119  .gesture {120    position: absolute;121    bottom: 36px;122    left: 50%;123    transform: translateX(-50%);124    width: 360px;125    height: 14px;126    background: #ffffff;127    border-radius: 12px;128    opacity: 0.85;129  }130</style>131</head>132<body>133<div id="render-target">134  <!-- Status Bar -->135  <div class="status-bar">136    <div class="status-left">6:08</div>137    <div class="status-right">138      <span class="status-icon" aria-label="WiFi">139        <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">140          <path d="M2 8c5-4 15-4 20 0"/>141          <path d="M5 11c3-3 11-3 14 0"/>142          <path d="M8 14c2-2 6-2 8 0"/>143          <circle cx="12" cy="18" r="1.5" fill="#ffffff" stroke="none"/>144        </svg>145      </span>146      <span class="status-icon" aria-label="Battery">147        <svg viewBox="0 0 26 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">148          <rect x="2" y="5" width="18" height="14" rx="2"></rect>149          <rect x="4" y="7" width="10" height="10" fill="#ffffff" stroke="none"></rect>150          <rect x="21" y="9" width="3" height="6" rx="1"></rect>151        </svg>152      </span>153      <span>100%</span>154    </div>155  </div>156 157  <!-- Viewer Header -->158  <div class="viewer-header">159    <div class="header-left">160      <div class="icon-btn" aria-label="Back">161        <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">162          <path d="M15 18l-6-6 6-6"></path>163        </svg>164      </div>165    </div>166    <div class="header-right">167      <div class="icon-btn" aria-label="Star">168        <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">169          <path d="M12 3l3.1 6.3 7 .9-5.1 4.8 1.3 6.7-6.3-3.4-6.3 3.4 1.3-6.7L1.9 10.2l7-.9z"></path>170        </svg>171      </div>172      <div class="icon-btn" aria-label="Menu">173        <svg viewBox="0 0 24 24" fill="#ffffff">174          <circle cx="12" cy="5" r="2"></circle>175          <circle cx="12" cy="12" r="2"></circle>176          <circle cx="12" cy="19" r="2"></circle>177        </svg>178      </div>179    </div>180  </div>181 182  <div class="spacer-top"></div>183 184  <!-- Photo Placeholder -->185  <div class="photo-wrap">[IMG: Landscape Photo]</div>186 187  <!-- Bottom Actions -->188  <div class="actions-bar">189    <div class="action">190      <div class="a-icon" aria-label="Share">191        <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">192          <circle cx="18" cy="5" r="3"></circle>193          <circle cx="6" cy="12" r="3"></circle>194          <circle cx="18" cy="19" r="3"></circle>195          <path d="M8.5 11l6-4"></path>196          <path d="M14.5 17l-6-4"></path>197        </svg>198      </div>199      <div class="action-label">Share</div>200    </div>201    <div class="action">202      <div class="a-icon" aria-label="Auto Enhance">203        <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">204          <path d="M12 2v4"></path>205          <path d="M12 18v4"></path>206          <path d="M4 12h4"></path>207          <path d="M16 12h4"></path>208          <path d="M5 5l3 3"></path>209          <path d="M16 16l3 3"></path>210          <path d="M16 5l3 3"></path>211          <path d="M5 16l3 3"></path>212        </svg>213      </div>214      <div class="action-label">Auto</div>215    </div>216    <div class="action">217      <div class="a-icon" aria-label="Edit">218        <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">219          <path d="M3 21l3.5-.7L19 7.8l-2.8-2.8L3.7 17.5 3 21z"></path>220          <path d="M17 5l2 2"></path>221        </svg>222      </div>223      <div class="action-label">Edit</div>224    </div>225    <div class="action">226      <div class="a-icon" aria-label="Trash">227        <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">228          <path d="M3 6h18"></path>229          <path d="M6 6l1-2h10l1 2"></path>230          <rect x="6" y="6" width="12" height="14" rx="2"></rect>231          <path d="M10 10v8"></path>232          <path d="M14 10v8"></path>233        </svg>234      </div>235      <div class="action-label">Trash</div>236    </div>237  </div>238 239  <!-- Gesture Bar -->240  <div class="gesture"></div>241</div>242</body>243</html>