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>Photo Viewer UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13  }14  #render-target {15    position: relative;16    overflow: hidden;17    width: 1080px;18    height: 2400px;19    background: #121212;20    color: #ffffff;21  }22 23  /* Status bar */24  .status-bar {25    height: 120px;26    background: #1a1a1a;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 40px;31    box-sizing: border-box;32    font-weight: 600;33  }34  .status-left {35    display: flex;36    align-items: center;37    gap: 16px;38    font-size: 44px;39    letter-spacing: 0.5px;40  }41  .status-left .dot {42    width: 26px;43    height: 26px;44    border-radius: 50%;45    background: #ffffff;46    display: inline-block;47  }48  .status-right {49    display: flex;50    align-items: center;51    gap: 28px;52  }53  .status-icon svg {54    width: 48px;55    height: 48px;56    fill: none;57    stroke: #ffffff;58    stroke-width: 2.5;59  }60 61  /* Header actions */62  .header {63    height: 160px;64    display: flex;65    align-items: center;66    justify-content: space-between;67    padding: 0 36px;68    box-sizing: border-box;69  }70  .back-btn svg {71    width: 64px;72    height: 64px;73    stroke: #ffffff;74    fill: none;75    stroke-width: 3.5;76  }77  .header-right {78    display: flex;79    align-items: center;80    gap: 36px;81  }82  .star-icon svg {83    width: 60px;84    height: 60px;85    fill: none;86    stroke: #ffffff;87    stroke-width: 3.5;88  }89  .kebab {90    display: flex;91    flex-direction: column;92    gap: 8px;93    padding: 8px 0;94  }95  .kebab .dot {96    width: 10px;97    height: 10px;98    background: #ffffff;99    border-radius: 50%;100  }101 102  /* Main content */103  .top-spacer {104    height: 480px; /* large black area above photo */105  }106  .photo-wrap {107    width: 100%;108    display: flex;109    justify-content: center;110    position: relative;111  }112  .photo {113    width: 1000px;114    height: 740px;115    background: #E0E0E0;116    border: 1px solid #BDBDBD;117    box-sizing: border-box;118    display: flex;119    align-items: center;120    justify-content: center;121    color: #757575;122    font-size: 34px;123    text-align: center;124  }125  .lens-overlay {126    position: absolute;127    left: 60px;128    bottom: 18px;129    width: 74px;130    height: 74px;131    background: #000000;132    border: 2px solid #ffffff;133    border-radius: 18px;134    display: flex;135    align-items: center;136    justify-content: center;137  }138  .lens-overlay svg {139    width: 42px;140    height: 42px;141    stroke: #ffffff;142    fill: none;143    stroke-width: 2.5;144  }145 146  .bottom-spacer {147    height: 500px; /* black area below photo before toolbar */148  }149 150  /* Bottom toolbar */151  .bottom-toolbar {152    height: 260px;153    background: #0e0e0e;154    border-top: 1px solid #2a2a2a;155    display: flex;156    justify-content: space-around;157    align-items: center;158    padding: 0 40px;159    box-sizing: border-box;160  }161  .tool {162    width: 200px;163    display: flex;164    flex-direction: column;165    align-items: center;166    gap: 22px;167    color: #ffffff;168  }169  .tool svg {170    width: 72px;171    height: 72px;172    stroke: #ffffff;173    fill: none;174    stroke-width: 3;175  }176  .tool-label {177    font-size: 34px;178  }179 180  /* Gesture pill */181  .gesture-pill {182    position: absolute;183    bottom: 22px;184    left: 50%;185    transform: translateX(-50%);186    width: 320px;187    height: 16px;188    background: #cfcfcf;189    border-radius: 16px;190    opacity: 0.75;191  }192</style>193</head>194<body>195<div id="render-target">196  <!-- Top status bar -->197  <div class="status-bar">198    <div class="status-left">199      <div>1:02</div>200      <span class="dot"></span>201    </div>202    <div class="status-right">203      <span class="status-icon">204        <!-- Wi-Fi icon -->205        <svg viewBox="0 0 24 24">206          <path d="M2 8c5-5 15-5 20 0"></path>207          <path d="M5 11c3.5-3.5 10.5-3.5 14 0"></path>208          <path d="M8 14c2-2 6-2 8 0"></path>209          <circle cx="12" cy="17.5" r="1.5" fill="#ffffff" stroke="none"></circle>210        </svg>211      </span>212      <span class="status-icon">213        <!-- Battery icon -->214        <svg viewBox="0 0 24 24">215          <rect x="2" y="6" width="18" height="12" rx="2"></rect>216          <rect x="21" y="10" width="2" height="4" rx="1"></rect>217          <rect x="4.5" y="8.5" width="13" height="7" fill="#ffffff" stroke="none"></rect>218        </svg>219      </span>220    </div>221  </div>222 223  <!-- Header actions -->224  <div class="header">225    <div class="back-btn">226      <svg viewBox="0 0 24 24">227        <path d="M15 6L9 12l6 6"></path>228      </svg>229    </div>230    <div class="header-right">231      <div class="star-icon">232        <svg viewBox="0 0 24 24">233          <polygon points="12,2 15,9 22,9 16,14 18,21 12,17 6,21 8,14 2,9 9,9"></polygon>234        </svg>235      </div>236      <div class="kebab">237        <span class="dot"></span>238        <span class="dot"></span>239        <span class="dot"></span>240      </div>241    </div>242  </div>243 244  <div class="top-spacer"></div>245 246  <!-- Photo area -->247  <div class="photo-wrap">248    <div class="photo">[IMG: Massive outdoor music festival crowd panorama at sunset]</div>249 250    <!-- Lens / quick action overlay -->251    <div class="lens-overlay">252      <svg viewBox="0 0 24 24">253        <rect x="4" y="6" width="16" height="12" rx="3"></rect>254        <circle cx="12" cy="12" r="4"></circle>255      </svg>256    </div>257  </div>258 259  <div class="bottom-spacer"></div>260 261  <!-- Bottom toolbar -->262  <div class="bottom-toolbar">263    <div class="tool">264      <svg viewBox="0 0 24 24">265        <!-- Share icon: nodes and connectors -->266        <circle cx="5" cy="12" r="2"></circle>267        <circle cx="19" cy="5" r="2"></circle>268        <circle cx="19" cy="19" r="2"></circle>269        <path d="M7 12l10-7"></path>270        <path d="M7 12l10 7"></path>271      </svg>272      <div class="tool-label">Share</div>273    </div>274    <div class="tool">275      <svg viewBox="0 0 24 24">276        <!-- Auto (magic wand + sparkle) -->277        <path d="M4 20l8-8"></path>278        <path d="M14 4l2 2"></path>279        <path d="M18 10l2 0"></path>280        <path d="M16 16l1.5 1.5"></path>281        <path d="M10 6l0 -2"></path>282      </svg>283      <div class="tool-label">Auto</div>284    </div>285    <div class="tool">286      <svg viewBox="0 0 24 24">287        <!-- Edit (pencil) -->288        <path d="M3 21l3-1 12-12-2-2L4 18l-1 3z"></path>289        <path d="M14 5l2 2"></path>290      </svg>291      <div class="tool-label">Edit</div>292    </div>293    <div class="tool">294      <svg viewBox="0 0 24 24">295        <!-- Trash -->296        <path d="M4 7h16"></path>297        <path d="M9 3h6l1 2H8z"></path>298        <rect x="6" y="7" width="12" height="13" rx="2"></rect>299      </svg>300      <div class="tool-label">Trash</div>301    </div>302  </div>303 304  <!-- Gesture nav pill -->305  <div class="gesture-pill"></div>306</div>307</body>308</html>