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 Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;13    color: #eaeaea;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #0b0f10; /* overall dark canvas */21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 120px;30    background: #0f1c21;31    display: flex;32    align-items: center;33    justify-content: space-between;34    padding: 0 34px;35    box-sizing: border-box;36    color: #dfe6e9;37    letter-spacing: 0.5px;38    font-weight: 600;39  }40  .sb-left, .sb-right {41    display: flex;42    align-items: center;43    gap: 20px;44  }45  .sb-time {46    font-size: 42px;47  }48  .sb-icon {49    width: 34px;50    height: 34px;51    opacity: 0.85;52  }53  .sb-right span {54    font-size: 34px;55    opacity: 0.9;56    margin-left: 6px;57  }58 59  /* Top actions */60  .top-actions {61    position: absolute;62    top: 120px;63    left: 0;64    width: 1080px;65    height: 120px;66    display: flex;67    align-items: center;68    justify-content: space-between;69    padding: 0 28px;70    box-sizing: border-box;71    color: #ffffff;72  }73  .icon-btn {74    width: 100px;75    height: 100px;76    background: transparent;77    border: none;78    padding: 0;79    cursor: default;80  }81  .icon-btn svg {82    width: 60px;83    height: 60px;84    stroke: #ffffff;85    fill: none;86    stroke-width: 4;87  }88  .top-right {89    display: flex;90    align-items: center;91    gap: 20px;92  }93 94  /* Viewer area */95  .viewer {96    position: absolute;97    top: 240px; /* below status + actions */98    left: 0;99    width: 1080px;100    height: 1900px;101    background: #000000; /* deep black viewer background */102  }103 104  .photo {105    position: absolute;106    left: 50%;107    transform: translateX(-50%);108    top: 780px; /* create large top letterbox space */109    width: 1000px;110    height: 700px;111    background: #E0E0E0;112    border: 1px solid #BDBDBD;113    overflow: hidden;114    display: flex;115    align-items: flex-end;116    justify-content: flex-start;117  }118  .img-label {119    width: 100%;120    text-align: left;121    padding: 18px 22px;122    box-sizing: border-box;123    color: #4f4f4f;124    font-size: 28px;125    background: rgba(255,255,255,0.25);126  }127  .glare {128    position: absolute;129    right: -120px;130    top: -80px;131    width: 480px;132    height: 900px;133    background: radial-gradient(ellipse at left center, rgba(255,255,255,0.35), rgba(255,255,255,0) 70%);134    transform: rotate(8deg);135    pointer-events: none;136  }137 138  /* Bottom toolbar */139  .bottom-toolbar {140    position: absolute;141    bottom: 120px;142    left: 0;143    width: 1080px;144    height: 260px;145    background: transparent;146    display: flex;147    align-items: flex-start;148    justify-content: space-around;149    padding-top: 36px;150    box-sizing: border-box;151  }152  .tool {153    display: flex;154    flex-direction: column;155    align-items: center;156    color: #ffffff;157    gap: 18px;158  }159  .tool svg {160    width: 64px;161    height: 64px;162    stroke: #ffffff;163    fill: none;164    stroke-width: 4;165  }166  .tool span {167    font-size: 34px;168    color: #eaeaea;169  }170 171  /* Gesture pill */172  .gesture-pill {173    position: absolute;174    bottom: 26px;175    left: 50%;176    transform: translateX(-50%);177    width: 260px;178    height: 12px;179    background: #e5e5e5;180    border-radius: 10px;181    opacity: 0.9;182  }183</style>184</head>185<body>186<div id="render-target">187 188  <!-- Status Bar -->189  <div class="status-bar">190    <div class="sb-left">191      <div class="sb-time">10:31</div>192      <!-- simple placeholder icons -->193      <svg class="sb-icon" viewBox="0 0 24 24">194        <path d="M3 7h18v10H3zM3 7l9 7 9-7" stroke="#dfe6e9" fill="none" stroke-width="2"></path>195      </svg>196      <svg class="sb-icon" viewBox="0 0 24 24">197        <circle cx="12" cy="12" r="7" stroke="#dfe6e9" fill="none" stroke-width="2"></circle>198        <path d="M12 9v6M9 12h6" stroke="#dfe6e9" stroke-width="2"></path>199      </svg>200      <svg class="sb-icon" viewBox="0 0 24 24">201        <circle cx="12" cy="12" r="3" fill="#dfe6e9"></circle>202      </svg>203      <svg class="sb-icon" viewBox="0 0 24 24">204        <path d="M4 14a5 5 0 0 1 5-5 6 6 0 0 1 11 2h-1a4 4 0 0 0-4-4 5 5 0 0 0-9 3H4z" fill="#dfe6e9"></path>205      </svg>206    </div>207    <div class="sb-right">208      <svg class="sb-icon" viewBox="0 0 24 24">209        <path d="M2 16c3-4 6-4 10 0 3-3 6-3 10 0" stroke="#dfe6e9" stroke-width="2" fill="none"></path>210        <circle cx="12" cy="16" r="1.5" fill="#dfe6e9"></circle>211      </svg>212      <svg class="sb-icon" viewBox="0 0 28 24">213        <rect x="2" y="5" width="20" height="14" rx="2" ry="2" stroke="#dfe6e9" fill="none" stroke-width="2"></rect>214        <rect x="22" y="9" width="3" height="6" fill="#dfe6e9"></rect>215      </svg>216      <span>100%</span>217    </div>218  </div>219 220  <!-- Top Action Bar -->221  <div class="top-actions">222    <button class="icon-btn back" aria-label="Back">223      <svg viewBox="0 0 24 24">224        <path d="M15 4L7 12l8 8" stroke-linecap="round" stroke-linejoin="round"></path>225      </svg>226    </button>227    <div class="top-right">228      <button class="icon-btn" aria-label="Star">229        <svg viewBox="0 0 24 24">230          <path d="M12 3l3 6 6 .9-4.4 4.2 1 6-5.6-3-5.6 3 1-6L3 9.9 9 9z"></path>231        </svg>232      </button>233      <button class="icon-btn" aria-label="More">234        <svg viewBox="0 0 24 24">235          <circle cx="12" cy="5" r="2" fill="#ffffff"></circle>236          <circle cx="12" cy="12" r="2" fill="#ffffff"></circle>237          <circle cx="12" cy="19" r="2" fill="#ffffff"></circle>238        </svg>239      </button>240    </div>241  </div>242 243  <!-- Viewer (black area with letterboxed image) -->244  <div class="viewer">245    <div class="photo">246      <div class="img-label">[IMG: Ornate golden hall with chandeliers]</div>247      <div class="glare"></div>248    </div>249  </div>250 251  <!-- Bottom Toolbar -->252  <div class="bottom-toolbar">253    <div class="tool">254      <svg viewBox="0 0 24 24">255        <circle cx="6" cy="12" r="2"></circle>256        <circle cx="18" cy="6" r="2"></circle>257        <circle cx="18" cy="18" r="2"></circle>258        <path d="M8 12h6M14 12l4-6M14 12l4 6"></path>259      </svg>260      <span>Share</span>261    </div>262    <div class="tool">263      <svg viewBox="0 0 24 24">264        <path d="M5 19l9-9" stroke-linecap="round"></path>265        <path d="M14 5l5 5" stroke-linecap="round"></path>266        <path d="M8 6l2 2M6 10l2 2M16 14l2 2" stroke-linecap="round"></path>267      </svg>268      <span>Auto</span>269    </div>270    <div class="tool">271      <svg viewBox="0 0 24 24">272        <path d="M3 21l6-2 9-9-4-4-9 9-2 6z"></path>273        <path d="M14 6l4 4"></path>274      </svg>275      <span>Edit</span>276    </div>277    <div class="tool">278      <svg viewBox="0 0 24 24">279        <path d="M5 7h14"></path>280        <path d="M8 7V5h8v2"></path>281        <rect x="6" y="7" width="12" height="13" rx="2" ry="2"></rect>282      </svg>283      <span>Trash</span>284    </div>285  </div>286 287  <!-- Gesture pill -->288  <div class="gesture-pill"></div>289 290</div>291</body>292</html>