GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Photo Viewer UI 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  }20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 120px;27    color: #ffffff;28    display: flex;29    align-items: center;30    padding: 0 36px;31    box-sizing: border-box;32    font-size: 40px;33    letter-spacing: 0.5px;34  }35  .status-left {36    display: flex;37    align-items: center;38    gap: 26px;39  }40  .status-center {41    margin-left: 28px;42    display: flex;43    align-items: center;44    gap: 24px;45    opacity: 0.85;46  }47  .status-right {48    margin-left: auto;49    display: flex;50    align-items: center;51    gap: 28px;52  }53  .status-icon svg {54    width: 38px;55    height: 38px;56    fill: none;57    stroke: #ffffff;58    stroke-width: 2.2;59  }60 61  /* Header with back arrow */62  .top-toolbar {63    position: absolute;64    top: 120px;65    left: 0;66    width: 1080px;67    height: 350px;68    display: flex;69    align-items: center;70    padding: 0 30px;71    box-sizing: border-box;72    color: #fff;73  }74  .back-btn {75    width: 84px;76    height: 84px;77    display: flex;78    align-items: center;79    justify-content: center;80    border-radius: 42px;81  }82  .back-btn svg {83    width: 64px;84    height: 64px;85    stroke: #ffffff;86    stroke-width: 3.5;87    fill: none;88  }89 90  /* Main image area */91  .photo-area {92    position: absolute;93    top: 470px;94    left: 0;95    width: 1080px;96    height: 1400px;97    display: flex;98    align-items: center;99    justify-content: center;100    padding: 0;101    box-sizing: border-box;102  }103  .img-placeholder {104    width: 1080px;105    height: 1400px;106    background: #E0E0E0;107    border: 1px solid #BDBDBD;108    color: #757575;109    display: flex;110    align-items: center;111    justify-content: center;112    font-size: 34px;113    text-align: center;114  }115 116  /* Bottom action bar */117  .bottom-bar {118    position: absolute;119    bottom: 230px; /* leaves room for ad */120    left: 0;121    width: 1080px;122    height: 300px;123    background: #000000;124    display: flex;125    align-items: center;126    justify-content: space-around;127    box-sizing: border-box;128    padding: 0 40px;129  }130  .action-icon {131    width: 120px;132    height: 120px;133    border-radius: 60px;134    display: flex;135    align-items: center;136    justify-content: center;137  }138  .action-icon svg {139    width: 80px;140    height: 80px;141    stroke: #ffffff;142    stroke-width: 2.5;143    fill: none;144  }145 146  /* Ad banner */147  .ad-banner {148    position: absolute;149    bottom: 0;150    left: 0;151    width: 1080px;152    height: 230px;153    background: #ffffff;154    box-sizing: border-box;155    padding: 26px 32px;156    display: flex;157    align-items: center;158    gap: 28px;159    border-top: 1px solid #e5e5e5;160  }161  .ad-logo {162    width: 90px;163    height: 90px;164    background: #E0E0E0;165    border: 1px solid #BDBDBD;166    color: #757575;167    display: flex;168    align-items: center;169    justify-content: center;170    font-size: 20px;171  }172  .ad-text {173    flex: 1;174  }175  .ad-title {176    font-size: 40px;177    color: #222222;178    margin-bottom: 10px;179  }180  .ad-sub {181    font-size: 34px;182    color: #1a73e8;183  }184  .ad-cta {185    width: 90px;186    height: 90px;187    border-radius: 18px;188    background: #1a73e8;189    display: flex;190    align-items: center;191    justify-content: center;192  }193  .ad-cta svg {194    width: 48px;195    height: 48px;196    fill: none;197    stroke: #ffffff;198    stroke-width: 3.5;199  }200</style>201</head>202<body>203<div id="render-target">204  <!-- Status Bar -->205  <div class="status-bar">206    <div class="status-left">207      <div>1:45</div>208    </div>209    <div class="status-center">210      <span class="status-icon">211        <!-- Simple cloud icon -->212        <svg viewBox="0 0 24 24"><path d="M6 16h9a4 4 0 0 0 0-8 5 5 0 0 0-9.5 2"/></svg>213      </span>214      <span class="status-icon">215        <!-- Mail icon -->216        <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"></rect><path d="M3 7l9 6 9-6"/></svg>217      </span>218      <span class="status-icon">219        <!-- Play icon -->220        <svg viewBox="0 0 24 24"><polygon points="8,5 20,12 8,19" style="fill:#ffffff;stroke:none;"></polygon></svg>221      </span>222      <span class="status-icon">223        <!-- Dot -->224        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" style="fill:#ffffff;stroke:none;"></circle></svg>225      </span>226      <span class="status-icon">227        <!-- Gear -->228        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"></circle><path d="M12 2v4M12 18v4M2 12h4M18 12h4M5 5l3 3M16 16l3 3M5 19l3-3M16 8l3-3"/></svg>229      </span>230    </div>231    <div class="status-right">232      <span class="status-icon">233        <!-- Silent (bell with slash) -->234        <svg viewBox="0 0 24 24"><path d="M12 4a4 4 0 0 0-4 4v3l-2 2h12l-2-2V8a4 4 0 0 0-4-4"/><path d="M4 4l16 16"/></svg>235      </span>236      <span class="status-icon">237        <!-- WiFi -->238        <svg viewBox="0 0 24 24"><path d="M2 9c5-4 15-4 20 0"/><path d="M5 12c3-3 11-3 14 0"/><path d="M8 15c2-2 6-2 8 0"/><circle cx="12" cy="18" r="1.5" style="fill:#ffffff;stroke:none;"></circle></svg>239      </span>240      <span class="status-icon">241        <!-- Battery -->242        <svg viewBox="0 0 28 24"><rect x="2" y="6" width="20" height="12" rx="2"></rect><rect x="22" y="9" width="4" height="6" rx="1" style="fill:#ffffff;stroke:none;"></rect><rect x="4" y="8" width="12" height="8" style="fill:#ffffff;stroke:none;"></rect></svg>243      </span>244    </div>245  </div>246 247  <!-- Top toolbar with back arrow -->248  <div class="top-toolbar">249    <div class="back-btn">250      <svg viewBox="0 0 24 24"><path d="M15 6L9 12l6 6"/></svg>251    </div>252  </div>253 254  <!-- Main Photo -->255  <div class="photo-area">256    <div class="img-placeholder">[IMG: Office desk with laptops, cables, and a smartphone]</div>257  </div>258 259  <!-- Bottom action bar -->260  <div class="bottom-bar">261    <div class="action-icon">262      <!-- Heart -->263      <svg viewBox="0 0 24 24"><path d="M12 21s-6-4.35-8.5-7A5 5 0 0 1 12 7a5 5 0 0 1 8.5 7C18 16.65 12 21 12 21z"/></svg>264    </div>265    <div class="action-icon">266      <!-- Share -->267      <svg viewBox="0 0 24 24"><circle cx="18" cy="5" r="2"></circle><circle cx="6" cy="12" r="2"></circle><circle cx="18" cy="19" r="2"></circle><path d="M8 12l8-7M8 12l8 7"/></svg>268    </div>269    <div class="action-icon">270      <!-- Trash -->271      <svg viewBox="0 0 24 24"><path d="M3 6h18"/><path d="M8 6V4h8v2"/><rect x="6" y="8" width="12" height="12" rx="2"></rect></svg>272    </div>273    <div class="action-icon">274      <!-- More (ellipsis) -->275      <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2" style="fill:#ffffff;stroke:none;"></circle><circle cx="12" cy="12" r="2" style="fill:#ffffff;stroke:none;"></circle><circle cx="19" cy="12" r="2" style="fill:#ffffff;stroke:none;"></circle></svg>276    </div>277    <div class="action-icon">278      <!-- Info circle -->279      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M12 10v6M12 7h.01"/></svg>280    </div>281  </div>282 283  <!-- Ad banner -->284  <div class="ad-banner">285    <div class="ad-logo">[IMG: Brand Logo]</div>286    <div class="ad-text">287      <div class="ad-title">Unveil Organic India Now</div>288      <div class="ad-sub">Organic India Store - Sector 18, Noida</div>289    </div>290    <div class="ad-cta">291      <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7"/></svg>292    </div>293  </div>294</div>295</body>296</html>