GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Camera Gallery UI</title>6<style>7  body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#000000;11  }12 13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; width:100%; height:90px;16    color:#fff; padding:0 36px; box-sizing:border-box;17    display:flex; align-items:center; justify-content:space-between;18    font-size:40px;19  }20  .sb-right { display:flex; align-items:center; gap:24px; }21  .icon { width:48px; height:48px; }22 23  /* Header / App bar */24  .app-bar {25    position:absolute; top:90px; left:0; width:100%; height:140px;26    display:flex; align-items:center; color:#fff;27  }28  .back { margin-left:24px; width:80px; height:80px; }29  .app-bar-title { margin:0 0 0 24px; font-size:64px; font-weight:500; }30 31  /* Grid of photos */32  .grid { position:absolute; top:230px; left:0; width:100%; padding:0 24px 24px; box-sizing:border-box; }33  .grid-inner { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }34  .tile {35    height:220px; background:#E0E0E0; border:1px solid #BDBDBD;36    display:flex; justify-content:center; align-items:center;37    color:#757575; font-size:30px; text-align:center;38  }39 40  /* Bottom ad banner */41  .ad-banner {42    position:absolute; bottom:0; left:0; width:100%; height:170px;43    background:#ffffff; border-top:1px solid #D0D0D0; box-sizing:border-box;44    padding:18px 24px; display:flex; align-items:center; justify-content:space-between;45    color:#1976D2;46  }47  .ad-left { display:flex; flex-direction:column; gap:8px; }48  .ad-title { font-size:44px; font-weight:700; }49  .ad-sub { font-size:24px; color:#666; }50  .ad-controls { position:absolute; right:20px; top:12px; display:flex; gap:16px; }51  .control {52    width:48px; height:48px; border:1px solid #9e9e9e; border-radius:24px;53    display:flex; align-items:center; justify-content:center; color:#2196F3; font-weight:bold;54  }55</style>56</head>57<body>58<div id="render-target">59 60  <!-- Status bar -->61  <div class="status-bar">62    <div>2:01</div>63    <div class="sb-right">64      <span style="color:#ccc;">•</span>65      <!-- Signal bars -->66      <svg class="icon" viewBox="0 0 24 24">67        <path d="M2 18h3v-5H2v5zm5 0h3v-8H7v8zm5 0h3v-11h-3v11zm5 0h3V4h-3v14z" fill="#fff"/>68      </svg>69      <!-- Do not disturb (fallback) -->70      <span style="font-size:40px;">🔇</span>71      <!-- Wi‑Fi -->72      <svg class="icon" viewBox="0 0 24 24">73        <path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 5c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 5l2 2 2-2c-2-1-4-1-6 0z" fill="#fff"/>74      </svg>75      <!-- Battery -->76      <svg class="icon" viewBox="0 0 24 24">77        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="2"></rect>78        <rect x="21" y="10" width="2" height="4" fill="#fff"></rect>79      </svg>80    </div>81  </div>82 83  <!-- App bar -->84  <div class="app-bar">85    <svg class="back" viewBox="0 0 24 24">86      <path d="M15 6L9 12l6 6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>87    </svg>88    <h1 class="app-bar-title">Camera</h1>89  </div>90 91  <!-- Photo grid -->92  <div class="grid">93    <div class="grid-inner">94      <div class="tile">[IMG: Road]</div>95      <div class="tile">[IMG: Field]</div>96      <div class="tile">[IMG: Plant closeup]</div>97 98      <div class="tile">[IMG: Forest view]</div>99      <div class="tile">[IMG: Trees aerial]</div>100      <div class="tile">[IMG: Office desk]</div>101 102      <div class="tile">[IMG: Under desk]</div>103      <div class="tile">[IMG: Legs & shoes]</div>104    </div>105  </div>106 107  <!-- Bottom ad banner -->108  <div class="ad-banner">109    <div class="ad-left">110      <div class="ad-sub">Tata AIA Life Insurance</div>111      <div class="ad-title">Get ₹1,00,00,000 Life Cover</div>112    </div>113    <div class="ad-controls">114      <div class="control">i</div>115      <div class="control">×</div>116    </div>117  </div>118 119</div>120</body>121</html>