GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile Photo Viewer Mock</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #000000;19    color: #FFFFFF;20  }21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 90px;28    padding: 0 32px;29    box-sizing: border-box;30    display: flex;31    align-items: center;32    justify-content: space-between;33    color: #EDEDED;34    font-size: 34px;35    letter-spacing: 0.5px;36  }37  .status-left {38    display: flex;39    align-items: center;40    gap: 18px;41  }42  .status-right {43    display: flex;44    align-items: center;45    gap: 22px;46  }47  .status-icon {48    width: 32px; height: 32px;49    opacity: 0.9;50  }51 52  /* App bar */53  .app-bar {54    position: absolute;55    top: 90px;56    left: 0;57    width: 1080px;58    height: 120px;59    padding: 0 28px;60    box-sizing: border-box;61    display: flex;62    align-items: center;63    justify-content: space-between;64    color: #F5F5F5;65  }66  .app-left, .app-right {67    display: flex;68    align-items: center;69    gap: 28px;70  }71  .icon-btn svg {72    width: 52px;73    height: 52px;74    stroke: #EDEDED;75    fill: none;76    stroke-width: 3;77  }78 79  /* Main image area */80  .image-area {81    position: absolute;82    top: 210px;83    left: 0;84    right: 0;85    bottom: 380px; /* leave space for bottom sheet and nav pill */86    display: flex;87    align-items: center;88    justify-content: center;89    background: #000;90  }91  .image-placeholder {92    width: 1080px;93    height: 1200px;94    background: #6b6f56;95    border: 1px solid #4e4e4e;96    color: rgba(255,255,255,0.75);97    display: flex;98    align-items: center;99    justify-content: center;100    font-size: 34px;101    letter-spacing: 0.3px;102    position: relative;103  }104  .spinner {105    position: absolute;106    width: 110px;107    height: 110px;108    border-radius: 50%;109    border: 10px solid rgba(38, 95, 217, 0.25);110    border-top-color: transparent;111    border-left-color: transparent;112    border-right-color: #1E5BD6;113    border-bottom-color: #1E5BD6;114    top: 50%;115    left: 50%;116    transform: translate(-50%, -50%);117  }118 119  /* Bottom sheet */120  .bottom-sheet {121    position: absolute;122    left: 0;123    right: 0;124    bottom: 90px;125    height: 320px;126    background: #1a1a1a;127    border-top-left-radius: 26px;128    border-top-right-radius: 26px;129    box-shadow: 0 -6px 16px rgba(0,0,0,0.4);130    padding-top: 16px;131  }132  .sheet-handle {133    width: 140px;134    height: 12px;135    background: #5a5a5a;136    border-radius: 8px;137    margin: 10px auto 24px auto;138  }139  .actions {140    display: flex;141    justify-content: space-around;142    align-items: flex-start;143    padding: 10px 48px 0 48px;144    color: #e9e9e9;145  }146  .action {147    display: flex;148    flex-direction: column;149    align-items: center;150    gap: 18px;151    min-width: 180px;152  }153  .action svg {154    width: 72px;155    height: 72px;156    stroke: #e0e0e0;157    fill: none;158    stroke-width: 3;159  }160  .action span {161    font-size: 32px;162    color: #d6d6d6;163  }164 165  /* Navigation pill (gesture bar) */166  .nav-pill {167    position: absolute;168    bottom: 18px;169    left: 50%;170    transform: translateX(-50%);171    width: 240px;172    height: 10px;173    background: #ffffff;174    border-radius: 10px;175    opacity: 0.9;176  }177</style>178</head>179<body>180  <div id="render-target">181    <!-- Status Bar -->182    <div class="status-bar">183      <div class="status-left">184        <div>1:33</div>185        <svg class="status-icon" viewBox="0 0 24 24">186          <path d="M4 12l4 4 12-12" stroke="#EDEDED" stroke-width="2" fill="none"></path>187        </svg>188        <svg class="status-icon" viewBox="0 0 24 24">189          <rect x="3" y="4" width="18" height="16" rx="2" stroke="#EDEDED" stroke-width="2" fill="none"></rect>190          <line x1="8" y1="8" x2="8" y2="16" stroke="#EDEDED" stroke-width="2"></line>191          <line x1="12" y1="8" x2="12" y2="16" stroke="#EDEDED" stroke-width="2"></line>192          <line x1="16" y1="8" x2="16" y2="16" stroke="#EDEDED" stroke-width="2"></line>193        </svg>194        <div style="font-weight: bold;">M</div>195        <div style="font-weight: bold;">M</div>196        <svg class="status-icon" viewBox="0 0 24 24">197          <path d="M2 18h20L12 6z" stroke="#EDEDED" stroke-width="2" fill="none"></path>198        </svg>199        <svg class="status-icon" viewBox="0 0 24 24">200          <path d="M12 2l10 10h-6v10H8V12H2z" stroke="#EDEDED" stroke-width="2" fill="none"></path>201        </svg>202      </div>203      <div class="status-right">204        <svg class="status-icon" viewBox="0 0 24 24">205          <path d="M2 8h20M5 12h14M8 16h8" stroke="#EDEDED" stroke-width="2" fill="none"></path>206        </svg>207        <div>100%</div>208      </div>209    </div>210 211    <!-- App Bar -->212    <div class="app-bar">213      <div class="app-left">214        <div class="icon-btn">215          <svg viewBox="0 0 24 24">216            <path d="M15 4l-8 8 8 8" stroke-linecap="round" stroke-linejoin="round"></path>217          </svg>218        </div>219      </div>220      <div class="app-right">221        <div class="icon-btn" title="Grid">222          <svg viewBox="0 0 24 24">223            <rect x="3" y="3" width="7" height="7"></rect>224            <rect x="14" y="3" width="7" height="7"></rect>225            <rect x="3" y="14" width="7" height="7"></rect>226            <rect x="14" y="14" width="7" height="7"></rect>227          </svg>228        </div>229        <div class="icon-btn" title="Search">230          <svg viewBox="0 0 24 24">231            <circle cx="10" cy="10" r="7"></circle>232            <line x1="15" y1="15" x2="22" y2="22"></line>233          </svg>234        </div>235        <div class="icon-btn" title="More">236          <svg viewBox="0 0 24 24">237            <circle cx="12" cy="5" r="2"></circle>238            <circle cx="12" cy="12" r="2"></circle>239            <circle cx="12" cy="19" r="2"></circle>240          </svg>241        </div>242      </div>243    </div>244 245    <!-- Main Content -->246    <div class="image-area">247      <div class="image-placeholder">248        [IMG: Photo - Olive Texture]249        <div class="spinner"></div>250      </div>251    </div>252 253    <!-- Bottom Sheet with actions -->254    <div class="bottom-sheet">255      <div class="sheet-handle"></div>256      <div class="actions">257        <div class="action">258          <svg viewBox="0 0 24 24">259            <path d="M12 3v12"></path>260            <path d="M7 8l5-5 5 5"></path>261            <rect x="4" y="14" width="16" height="7" rx="2"></rect>262          </svg>263          <span>Share</span>264        </div>265        <div class="action">266          <svg viewBox="0 0 24 24">267            <path d="M4 6h16"></path>268            <path d="M6 6l1 14h10l1-14"></path>269            <path d="M9 6V4h6v2"></path>270          </svg>271          <span>Delete</span>272        </div>273        <div class="action">274          <svg viewBox="0 0 24 24">275            <path d="M12 3v12"></path>276            <path d="M7 10l5 5 5-5"></path>277            <rect x="4" y="18" width="16" height="3" rx="1.5"></rect>278          </svg>279          <span>Download</span>280        </div>281      </div>282    </div>283 284    <!-- Navigation gesture pill -->285    <div class="nav-pill"></div>286  </div>287</body>288</html>