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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15  }16  .status-bar {17    height: 90px;18    color: #FFFFFF;19    display: flex;20    align-items: center;21    justify-content: space-between;22    padding: 0 28px;23    font-size: 34px;24    letter-spacing: 0.5px;25  }26  .status-left, .status-right {27    display: flex; align-items: center; gap: 24px;28  }29  .icon-24 svg { width: 36px; height: 36px; }30  .back-bar {31    height: 200px;32    display: flex; align-items: center;33    padding-left: 28px;34    color: #FFFFFF;35  }36  .back-btn svg { width: 72px; height: 72px; }37  .photo-area {38    height: 1600px;39    padding-top: 0;40    padding-left: 0;41    padding-right: 0;42    display: flex;43    align-items: center;44    justify-content: center;45  }46  .image-placeholder {47    width: 100%;48    height: 100%;49    background: #E0E0E0;50    border: 1px solid #BDBDBD;51    display: flex;52    justify-content: center;53    align-items: center;54    color: #757575;55    font-size: 36px;56    text-align: center;57  }58  .controls {59    height: 250px;60    background: #000000;61    display: flex;62    align-items: center;63    justify-content: space-around;64    color: #FFFFFF;65  }66  .control-icon svg { width: 84px; height: 84px; }67  .ad-banner {68    position: absolute;69    left: 0; bottom: 0;70    width: 1080px;71    height: 260px;72    background: #FFFFFF;73    border-top: 1px solid #E0E0E0;74    display: flex;75    align-items: center;76    padding: 18px 24px;77    box-sizing: border-box;78  }79  .ad-left {80    display: flex; align-items: center; gap: 18px; flex: 1;81  }82  .ad-img {83    width: 96px; height: 96px;84    background: #E0E0E0; border: 1px solid #BDBDBD;85    display: flex; justify-content: center; align-items: center; color: #757575; font-size: 22px;86  }87  .ad-text {88    display: flex; flex-direction: column; gap: 8px;89  }90  .ad-title { font-size: 40px; color: #222; }91  .ad-link { font-size: 34px; color: #2B66FF; }92  .ad-right {93    display: flex; align-items: center; gap: 24px;94  }95  .icon-32 svg { width: 48px; height: 48px; }96  .cta {97    width: 96px; height: 96px; background: #2B66FF; border-radius: 16px;98    display: flex; align-items: center; justify-content: center;99  }100</style>101</head>102<body>103<div id="render-target">104 105  <!-- Top status bar -->106  <div class="status-bar">107    <div class="status-left">108      <div>1:46</div>109      <!-- simple placeholders for app icons -->110      <div class="icon-24">111        <svg viewBox="0 0 24 24">112          <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"></circle>113          <path d="M8 12h8" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>114        </svg>115      </div>116      <div class="icon-24">117        <svg viewBox="0 0 24 24">118          <rect x="5" y="5" width="14" height="14" fill="none" stroke="#fff" stroke-width="2"></rect>119          <circle cx="12" cy="12" r="3" fill="#fff"></circle>120        </svg>121      </div>122      <div class="icon-24">123        <svg viewBox="0 0 24 24">124          <rect x="4" y="4" width="16" height="16" fill="none" stroke="#fff" stroke-width="2"></rect>125          <path d="M12 8v8M8 12h8" stroke="#fff" stroke-width="2"></path>126        </svg>127      </div>128    </div>129    <div class="status-right">130      <!-- Do Not Disturb -->131      <div class="icon-24">132        <svg viewBox="0 0 24 24">133          <circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"></circle>134          <path d="M6 12h12" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>135        </svg>136      </div>137      <!-- WiFi -->138      <div class="icon-24">139        <svg viewBox="0 0 24 24">140          <path d="M3 9c4-4 14-4 18 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>141          <path d="M6 12c3-3 9-3 12 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>142          <path d="M9 15c2-2 4-2 6 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>143          <circle cx="12" cy="18" r="1.8" fill="#fff"></circle>144        </svg>145      </div>146      <!-- Battery -->147      <div class="icon-24">148        <svg viewBox="0 0 24 24">149          <rect x="3" y="7" width="17" height="10" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>150          <rect x="5" y="9" width="11" height="6" fill="#fff"></rect>151          <rect x="20" y="10" width="2" height="4" fill="#fff"></rect>152        </svg>153      </div>154    </div>155  </div>156 157  <!-- Back bar -->158  <div class="back-bar">159    <div class="back-btn">160      <svg viewBox="0 0 24 24">161        <path d="M15 4 L7 12 L15 20" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>162        <path d="M7 12 H22" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>163      </svg>164    </div>165  </div>166 167  <!-- Photo area -->168  <div class="photo-area">169    <div class="image-placeholder">[IMG: Office desk with laptops, cables and a phone]</div>170  </div>171 172  <!-- Bottom controls -->173  <div class="controls">174    <!-- Heart -->175    <div class="control-icon">176      <svg viewBox="0 0 24 24">177        <path d="M12 20 L5 13 C4 9 7 7 9 8 C10.5 9 12 11 12 11 C13.5 9 15 8 16.8 8 C19 8 21 10 19 13 L12 20 Z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"></path>178      </svg>179    </div>180    <!-- Share -->181    <div class="control-icon">182      <svg viewBox="0 0 24 24">183        <circle cx="6" cy="12" r="2.5" fill="#fff"></circle>184        <circle cx="18" cy="6" r="2.5" fill="#fff"></circle>185        <circle cx="18" cy="18" r="2.5" fill="#fff"></circle>186        <path d="M8 12 L15.5 7.5 M8 12 L15.5 16.5" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>187      </svg>188    </div>189    <!-- Delete -->190    <div class="control-icon">191      <svg viewBox="0 0 24 24">192        <path d="M6 7 H18 M9 7 V4 H15 V7 M7 9 V20 H17 V9" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>193      </svg>194    </div>195    <!-- More -->196    <div class="control-icon">197      <svg viewBox="0 0 24 24">198        <circle cx="5" cy="12" r="2.2" fill="#fff"></circle>199        <circle cx="12" cy="12" r="2.2" fill="#fff"></circle>200        <circle cx="19" cy="12" r="2.2" fill="#fff"></circle>201      </svg>202    </div>203  </div>204 205  <!-- Ad banner -->206  <div class="ad-banner">207    <div class="ad-left">208      <div class="icon-32">209        <svg viewBox="0 0 24 24">210          <rect x="2" y="2" width="20" height="20" rx="3" ry="3" fill="none" stroke="#999" stroke-width="2"></rect>211          <path d="M12 6 L8 12 H16 L12 18" fill="none" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>212        </svg>213      </div>214      <div class="ad-img">[IMG: Organic India logo]</div>215      <div class="ad-text">216        <div class="ad-title">Unveil Organic India Now</div>217        <div class="ad-link">Organic India Store - Sector 18, Noida</div>218      </div>219    </div>220    <div class="ad-right">221      <div class="cta">222        <svg viewBox="0 0 24 24">223          <path d="M8 5 L16 12 L8 19" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>224        </svg>225      </div>226    </div>227  </div>228 229</div>230</body>231</html>