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>Camera Gallery Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #000000;20  }21 22  /* Status bar */23  .status-bar {24    height: 90px;25    padding: 0 32px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #ffffff;30    font-size: 36px;31  }32  .status-icons {33    display: flex;34    align-items: center;35    gap: 26px;36  }37  .status-icons svg {38    width: 38px;39    height: 38px;40    fill: none;41    stroke: #ffffff;42    stroke-width: 3;43  }44  .status-dot {45    width: 10px;46    height: 10px;47    background: #ffffff;48    border-radius: 50%;49    display: inline-block;50    opacity: 0.9;51  }52 53  /* Header */54  .header {55    height: 120px;56    display: flex;57    align-items: center;58    gap: 20px;59    padding: 0 32px;60    color: #ffffff;61  }62  .header .title {63    font-size: 64px;64    font-weight: 600;65    letter-spacing: 0.5px;66  }67  .back-btn svg {68    width: 56px;69    height: 56px;70    stroke: #ffffff;71    stroke-width: 6;72    fill: none;73  }74 75  /* Thumbnails row */76  .thumbs-row {77    padding: 18px 32px 0 32px;78    display: flex;79    gap: 24px;80  }81  .thumb {82    width: 330px;83    height: 330px;84    background: #E0E0E0;85    border: 1px solid #BDBDBD;86    border-radius: 8px;87    display: flex;88    justify-content: center;89    align-items: center;90    color: #757575;91    font-size: 28px;92    text-align: center;93  }94 95  /* Snackbar */96  .snackbar {97    position: absolute;98    bottom: 280px; /* sitting above the bottom ad */99    left: 50%;100    transform: translateX(-50%);101    background: #2F2F2F;102    color: #ffffff;103    padding: 28px 36px;104    border-radius: 48px;105    display: flex;106    align-items: center;107    gap: 22px;108    box-shadow: 0 12px 24px rgba(0,0,0,0.5);109    font-size: 36px;110    letter-spacing: 0.2px;111  }112  .snackbar .circle-icon {113    width: 64px;114    height: 64px;115    border-radius: 50%;116    background: linear-gradient(135deg, #FFD34D 50%, #3B82F6 50%);117    display: inline-block;118  }119 120  /* Bottom ad */121  .bottom-ad {122    position: absolute;123    bottom: 0;124    left: 0;125    width: 1080px;126    height: 200px;127    background: #FFFFFF;128    border-top: 1px solid #E6E6E6;129    display: flex;130    align-items: center;131    padding: 18px 24px;132    box-sizing: border-box;133  }134  .ad-left {135    display: flex;136    align-items: center;137    gap: 20px;138    flex: 1;139  }140  .ad-logo {141    width: 120px;142    height: 120px;143    background: #E0E0E0;144    border: 1px solid #BDBDBD;145    border-radius: 8px;146    color: #757575;147    display: flex;148    justify-content: center;149    align-items: center;150    font-size: 24px;151  }152  .ad-text {153    display: flex;154    flex-direction: column;155    gap: 8px;156  }157  .ad-title {158    font-size: 40px;159    color: #000000;160    font-weight: 600;161  }162  .ad-subtitle {163    font-size: 32px;164    color: #1a73e8;165  }166  .ad-right {167    width: 120px;168    display: flex;169    justify-content: center;170    align-items: center;171  }172  .ad-right .arrow {173    width: 86px;174    height: 86px;175    background: #4285F4;176    border-radius: 16px;177    display: flex;178    justify-content: center;179    align-items: center;180  }181  .ad-right .arrow svg {182    width: 44px;183    height: 44px;184    fill: none;185    stroke: #ffffff;186    stroke-width: 6;187  }188  .ad-controls {189    position: absolute;190    bottom: 16px;191    left: 14px;192    display: flex;193    gap: 18px;194    align-items: center;195  }196  .control-chip {197    width: 38px;198    height: 38px;199    border-radius: 20px;200    border: 1px solid #CFCFCF;201    display: flex;202    justify-content: center;203    align-items: center;204    color: #8C8C8C;205    font-size: 22px;206    background: #FFFFFF;207  }208</style>209</head>210<body>211<div id="render-target">212 213  <!-- Status Bar -->214  <div class="status-bar">215    <div class="time">2:08</div>216    <div class="status-icons">217      <!-- DND -->218      <svg viewBox="0 0 24 24" aria-label="Do Not Disturb">219        <circle cx="12" cy="12" r="9"></circle>220        <line x1="7" y1="12" x2="17" y2="12"></line>221      </svg>222      <!-- Temperature (°C) simplified -->223      <div style="font-size:32px; color:#fff;">°C</div>224      <!-- Mail (M) -->225      <div style="font-size:32px; color:#fff;">M</div>226      <!-- YouTube (triangle) -->227      <svg viewBox="0 0 24 24" aria-label="YouTube">228        <rect x="3" y="6" width="18" height="12" rx="3" ry="3"></rect>229        <polygon points="10,9 16,12 10,15" fill="#ffffff" stroke="none"></polygon>230      </svg>231      <!-- Dot -->232      <span class="status-dot"></span>233      <!-- Silent -->234      <svg viewBox="0 0 24 24" aria-label="Silent">235        <path d="M5 9h4l5-4v14l-5-4H5z"></path>236        <line x1="3" y1="3" x2="21" y2="21"></line>237      </svg>238      <!-- WiFi -->239      <svg viewBox="0 0 24 24" aria-label="WiFi">240        <path d="M3 8c9-6 9-6 18 0"></path>241        <path d="M6 12c6-4 6-4 12 0"></path>242        <path d="M9 16c3-2 3-2 6 0"></path>243        <circle cx="12" cy="19" r="1.5" fill="#ffffff" stroke="none"></circle>244      </svg>245      <!-- Battery -->246      <svg viewBox="0 0 26 24" aria-label="Battery">247        <rect x="2" y="6" width="20" height="12" rx="2" ry="2"></rect>248        <rect x="22" y="9" width="3" height="6" rx="1" ry="1"></rect>249        <rect x="4" y="8" width="16" height="8" fill="#ffffff" stroke="none"></rect>250      </svg>251    </div>252  </div>253 254  <!-- Header -->255  <div class="header">256    <div class="back-btn">257      <svg viewBox="0 0 48 48" aria-label="Back">258        <path d="M30 12 L16 24 L30 36" stroke-linecap="round" stroke-linejoin="round"></path>259      </svg>260    </div>261    <div class="title">Camera</div>262  </div>263 264  <!-- Thumbnails Row -->265  <div class="thumbs-row">266    <div class="thumb">[IMG: Office desk photo]</div>267    <div class="thumb">[IMG: Under desk with bag]</div>268    <div class="thumb">[IMG: Feet under desk]</div>269  </div>270 271  <!-- Large empty black area representing scrollable content -->272  <!-- (left intentionally blank to match screenshot spacing) -->273 274  <!-- Snackbar -->275  <div class="snackbar">276    <span class="circle-icon"></span>277    <span>Delete file successfully</span>278  </div>279 280  <!-- Bottom Ad -->281  <div class="bottom-ad">282    <div class="ad-left">283      <div class="ad-logo">[IMG: Organic India Logo]</div>284      <div class="ad-text">285        <div class="ad-title">Experience Organic India Today</div>286        <div class="ad-subtitle">Organic India Store - Sector 18, Noida</div>287      </div>288    </div>289    <div class="ad-right">290      <div class="arrow">291        <svg viewBox="0 0 24 24" aria-label="Arrow">292          <polyline points="8,5 16,12 8,19" stroke-linecap="round" stroke-linejoin="round"></polyline>293        </svg>294      </div>295    </div>296    <div class="ad-controls">297      <div class="control-chip">i</div>298      <div class="control-chip">×</div>299    </div>300  </div>301 302</div>303</body>304</html>