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 { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000;15    color: #fff;16    font-family: Roboto, Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 100%;25    height: 100px;26    padding: 0 24px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    background: #000;31  }32  .status-left {33    font-size: 40px;34    font-weight: 500;35    letter-spacing: 0.5px;36  }37  .status-right {38    margin-left: auto;39    display: flex;40    align-items: center;41    gap: 28px;42  }43  .icon { width: 44px; height: 44px; }44 45  /* Header */46  .header {47    position: absolute;48    top: 100px;49    left: 0;50    width: 100%;51    height: 120px;52    padding: 0 24px;53    box-sizing: border-box;54    display: flex;55    align-items: center;56    background: #000;57  }58  .back-btn {59    width: 56px;60    height: 56px;61    display: flex;62    align-items: center;63    justify-content: center;64    margin-right: 12px;65  }66  .header-title {67    font-size: 64px;68    font-weight: 500;69  }70 71  /* Gallery grid */72  .gallery {73    position: absolute;74    top: 220px;75    left: 24px;76    width: 1032px; /* 1080 - 48 padding */77    display: grid;78    grid-template-columns: repeat(3, 1fr);79    grid-auto-rows: 330px;80    gap: 16px;81    box-sizing: border-box;82  }83  .tile {84    background: #E0E0E0;85    border: 1px solid #BDBDBD;86    color: #757575;87    display: flex;88    align-items: center;89    justify-content: center;90    font-size: 32px;91    text-align: center;92  }93 94  /* Bottom banner ad */95  .banner {96    position: absolute;97    bottom: 0;98    left: 0;99    width: 100%;100    height: 170px;101    background: #ffffff;102    border-top: 1px solid #e0e0e0;103    box-sizing: border-box;104    color: #111;105  }106  .banner-content {107    position: absolute;108    left: 24px;109    right: 24px;110    top: 0;111    bottom: 0;112    display: flex;113    align-items: center;114    justify-content: center;115    gap: 24px;116  }117  .banner-sub {118    position: absolute;119    left: 24px;120    top: 20px;121    font-size: 26px;122    color: #666;123  }124  .banner-text {125    font-size: 40px;126    font-weight: 700;127    color: #1976d2;128    text-align: center;129  }130  .banner-logo {131    position: absolute;132    left: 24px;133    bottom: 20px;134    font-size: 28px;135    color: #1976d2;136    font-weight: 700;137  }138  .banner-close {139    position: absolute;140    right: 24px;141    bottom: 20px;142    width: 48px;143    height: 48px;144    border-radius: 24px;145    border: 2px solid #7dc9e8;146    color: #7dc9e8;147    display: flex;148    align-items: center;149    justify-content: center;150    font-weight: 700;151    line-height: 1;152  }153</style>154</head>155<body>156<div id="render-target">157 158  <!-- Status bar -->159  <div class="status-bar">160    <div class="status-left">2:02</div>161    <div class="status-right">162      <!-- Do Not Disturb -->163      <svg class="icon" viewBox="0 0 24 24">164        <path fill="#fff" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-6 9h12v2H6v-2z"/>165      </svg>166      <!-- Wi-Fi -->167      <svg class="icon" viewBox="0 0 24 24">168        <path fill="#fff" d="M12 18l2.5-2.5a3.5 3.5 0 0 0-5 0L12 18zm0-6.5c2.9 0 5.6 1.1 7.7 3.2l1.4-1.4C19.6 10.5 16 9 12 9s-7.6 1.5-9.1 4.3l1.4 1.4C6.4 12.6 9.1 11.5 12 11.5z"/>169      </svg>170      <!-- Battery -->171      <svg class="icon" viewBox="0 0 24 24">172        <rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="#fff"/>173        <rect x="21" y="9" width="2" height="6" fill="#fff"/>174      </svg>175    </div>176  </div>177 178  <!-- Header with back arrow -->179  <div class="header">180    <div class="back-btn">181      <svg width="48" height="48" viewBox="0 0 24 24">182        <path fill="#fff" d="M15.5 19l-7-7 7-7v14z"/>183      </svg>184    </div>185    <div class="header-title">Camera</div>186  </div>187 188  <!-- Gallery grid -->189  <div class="gallery">190    <div class="tile">[IMG: Aerial Road]</div>191    <div class="tile">[IMG: Grass Field]</div>192    <div class="tile">[IMG: Plant Closeup]</div>193    <div class="tile">[IMG: Forest View]</div>194    <div class="tile">[IMG: Trees Landscape]</div>195    <div class="tile">[IMG: Office Desk]</div>196    <div class="tile">[IMG: Under Desk]</div>197    <div class="tile">[IMG: Office Shoes]</div>198  </div>199 200  <!-- Banner ad at bottom -->201  <div class="banner">202    <div class="banner-sub">Tata AIA Life Insurance</div>203    <div class="banner-content">204      <div class="banner-text">Get ₹1,00,00,000 Life Cover</div>205    </div>206    <div class="banner-logo">TATA AIA</div>207    <div class="banner-close">×</div>208  </div>209 210</div>211</body>212</html>