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 { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    font-family: Arial, Helvetica, sans-serif;16    color: #ffffff;17  }18 19  /* Top status bar */20  .statusbar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 110px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 40px;30    box-sizing: border-box;31    font-size: 44px;32    letter-spacing: 0.2px;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 26px;38  }39  .status-icons svg {40    width: 44px;41    height: 44px;42  }43 44  /* App bar with back button */45  .appbar {46    position: absolute;47    top: 110px;48    left: 0;49    width: 1080px;50    height: 130px;51    display: flex;52    align-items: center;53    padding-left: 24px;54    box-sizing: border-box;55  }56  .back-btn {57    width: 72px;58    height: 72px;59  }60 61  /* Main photo area */62  .photo {63    position: absolute;64    top: 240px;65    left: 0;66    width: 1080px;67    height: 1500px;68    display: flex;69    align-items: center;70    justify-content: center;71  }72  .photo .img-placeholder {73    width: 1000px;74    height: 1450px;75    background: #E0E0E0;76    border: 1px solid #BDBDBD;77    display: flex;78    justify-content: center;79    align-items: center;80    color: #757575;81    font-size: 40px;82    text-align: center;83    line-height: 1.3;84  }85 86  /* Bottom action bar */87  .actions {88    position: absolute;89    top: 1740px;90    left: 0;91    width: 1080px;92    height: 260px;93    display: flex;94    align-items: center;95    justify-content: space-around;96  }97  .action-btn {98    width: 140px;99    height: 140px;100    display: flex;101    align-items: center;102    justify-content: center;103  }104  .action-btn svg {105    width: 100px;106    height: 100px;107    stroke: #ffffff;108    fill: none;109    stroke-width: 2.5;110  }111 112  /* Thumbnail strip */113  .thumb-strip {114    position: absolute;115    bottom: 0;116    left: 0;117    width: 1080px;118    height: 400px;119    background: #ffffff;120    box-sizing: border-box;121    padding: 18px 14px;122  }123  .thumbs {124    display: flex;125    gap: 16px;126    align-items: center;127  }128  .thumb {129    width: 110px;130    height: 300px;131    background: #E0E0E0;132    border: 1px solid #BDBDBD;133    display: flex;134    justify-content: center;135    align-items: center;136    color: #757575;137    font-size: 26px;138    text-align: center;139    line-height: 1.25;140  }141 142  /* Ad label on the right side of the thumbnail bar */143  .ad-badge {144    position: absolute;145    right: 16px;146    top: 16px;147    display: flex;148    align-items: center;149    gap: 10px;150    background: #ffffff;151    border: 1px solid #BDBDBD;152    padding: 8px 12px;153    border-radius: 18px;154    color: #2b2b2b;155    font-size: 28px;156  }157  .ad-badge .ad-icon {158    width: 34px;159    height: 34px;160    border-radius: 50%;161    border: 2px solid #1E88E5;162    color: #1E88E5;163    display: flex;164    align-items: center;165    justify-content: center;166    font-weight: bold;167    line-height: 1;168  }169</style>170</head>171<body>172<div id="render-target">173 174  <!-- Status bar -->175  <div class="statusbar">176    <div>1:47</div>177    <div class="status-icons">178      <!-- Gmail (envelope) -->179      <svg viewBox="0 0 24 24">180        <path d="M2 6h20v12H2z" stroke="#fff" fill="none"></path>181        <path d="M2 6l10 6 10-6" stroke="#fff" fill="none"></path>182      </svg>183      <!-- YouTube (play) -->184      <svg viewBox="0 0 24 24">185        <rect x="3" y="6" width="18" height="12" rx="3" ry="3" stroke="#fff"></rect>186        <polygon points="10,9 16,12 10,15" fill="#fff"></polygon>187      </svg>188      <!-- Dot separator -->189      <svg viewBox="0 0 24 24">190        <circle cx="12" cy="12" r="3" fill="#fff"></circle>191      </svg>192      <!-- Do Not Disturb -->193      <svg viewBox="0 0 24 24">194        <circle cx="12" cy="12" r="10" stroke="#fff" fill="none"></circle>195        <line x1="6" y1="12" x2="18" y2="12" stroke="#fff"></line>196      </svg>197      <!-- Wi-Fi -->198      <svg viewBox="0 0 24 24">199        <path d="M2 9c5-4 15-4 20 0" stroke="#fff" fill="none"></path>200        <path d="M5 12c4-3 10-3 14 0" stroke="#fff" fill="none"></path>201        <path d="M8 15c3-2 5-2 8 0" stroke="#fff" fill="none"></path>202        <circle cx="12" cy="18" r="2" fill="#fff"></circle>203      </svg>204      <!-- Battery -->205      <svg viewBox="0 0 28 24">206        <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#fff" fill="none"></rect>207        <rect x="23" y="9" width="3" height="6" fill="#fff"></rect>208        <rect x="4" y="8" width="12" height="8" fill="#fff"></rect>209      </svg>210    </div>211  </div>212 213  <!-- App bar with back button -->214  <div class="appbar">215    <div class="back-btn">216      <svg viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="2.5">217        <path d="M15 6l-6 6 6 6"></path>218      </svg>219    </div>220  </div>221 222  <!-- Main image -->223  <div class="photo">224    <div class="img-placeholder">[IMG: Hands typing on laptop at desk]</div>225  </div>226 227  <!-- Bottom actions -->228  <div class="actions">229    <!-- Favorite -->230    <div class="action-btn">231      <svg viewBox="0 0 24 24">232        <path d="M12 21s-6-4.5-8-7.5C2 10 4.5 6.5 8 8c2 0.8 4 3 4 3s2-2.2 4-3c3.5-1.5 6 2 4 5.5-2 3-8 7.5-8 7.5z"></path>233      </svg>234    </div>235    <!-- Share -->236    <div class="action-btn">237      <svg viewBox="0 0 24 24">238        <circle cx="5" cy="12" r="2" stroke="#fff"></circle>239        <circle cx="19" cy="5" r="2" stroke="#fff"></circle>240        <circle cx="19" cy="19" r="2" stroke="#fff"></circle>241        <path d="M7 12l10-7M7 12l10 7" stroke="#fff"></path>242      </svg>243    </div>244    <!-- Trash -->245    <div class="action-btn">246      <svg viewBox="0 0 24 24">247        <path d="M4 7h16" stroke="#fff"></path>248        <path d="M9 7V5h6v2" stroke="#fff"></path>249        <rect x="6" y="7" width="12" height="13" rx="2" ry="2" stroke="#fff" fill="none"></rect>250      </svg>251    </div>252    <!-- More -->253    <div class="action-btn">254      <svg viewBox="0 0 24 24" fill="#fff" stroke="none">255        <circle cx="5" cy="12" r="2"></circle>256        <circle cx="12" cy="12" r="2"></circle>257        <circle cx="19" cy="12" r="2"></circle>258      </svg>259    </div>260  </div>261 262  <!-- Thumbnails strip -->263  <div class="thumb-strip">264    <div class="ad-badge">265      <span>lifestyle</span>266      <span class="ad-icon">i</span>267      <span class="ad-icon">×</span>268    </div>269    <div class="thumbs">270      <div class="thumb">[IMG: Clothing thumbnail]</div>271      <div class="thumb">[IMG: Clothing thumbnail]</div>272      <div class="thumb">[IMG: Clothing thumbnail]</div>273      <div class="thumb">[IMG: Clothing thumbnail]</div>274      <div class="thumb">[IMG: Clothing thumbnail]</div>275      <div class="thumb">[IMG: Clothing thumbnail]</div>276      <div class="thumb">[IMG: Clothing thumbnail]</div>277      <div class="thumb">[IMG: Clothing thumbnail]</div>278    </div>279  </div>280 281</div>282</body>283</html>