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 Listings UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #212121; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #FAFAFA;12  }13 14  /* Status bar */15  .status-bar {16    height: 88px;17    background: #0A78A8;18    color: #E3F2FD;19    display: flex; align-items: center; justify-content: space-between;20    padding: 0 28px;21    font-weight: 600;22  }23  .status-time { font-size: 34px; letter-spacing: 0.5px; }24  .status-icons { display: flex; align-items: center; gap: 26px; }25 26  /* App bar */27  .app-bar {28    height: 140px;29    background: #0A78A8;30    display: flex; align-items: center;31    padding: 0 24px;32    color: #fff;33  }34  .app-left { width: 120px; display: flex; justify-content: center; }35  .app-title {36    flex: 1;37    font-size: 44px; font-weight: 600;38    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;39  }40  .app-actions { width: 280px; display: flex; gap: 30px; justify-content: flex-end; }41 42  /* Filter bar */43  .filter-bar {44    background: #FFFFFF;45    border-top: 1px solid #E0E0E0;46    border-bottom: 1px solid #E0E0E0;47    height: 136px;48    display: grid;49    grid-template-columns: 1fr 1fr 1fr 120px;50    align-items: center;51  }52  .filter-item { padding: 16px 26px; border-right: 1px solid #EAEAEA; }53  .filter-item.last { border-right: none; }54  .filter-label { font-size: 22px; color: #757575; letter-spacing: 0.8px; }55  .filter-value { font-size: 30px; color: #424242; display: flex; align-items: center; gap: 10px; margin-top: 6px; }56  .filter-btn { display: flex; align-items: center; justify-content: center; border-left: 1px solid #EAEAEA; height: 100%; }57 58  /* Cards */59  .card {60    background: #FFFFFF;61    margin-top: 14px;62    padding-bottom: 26px;63    box-shadow: 0 0 0 1px #EEEEEE inset;64  }65  .search-title {66    background: #F2F2F2;67    border-top: 1px solid #E0E0E0;68    border-bottom: 1px solid #E0E0E0;69    height: 100px;70    display: flex; align-items: center; justify-content: space-between;71    padding: 0 26px;72    position: relative;73  }74  .search-title:after {75    content: "";76    position: absolute; left: 0; bottom: 0; width: 100%; height: 6px; background: #1E88E5;77  }78  .search-title .stext { font-size: 38px; font-weight: 600; color: #212121; }79  .search-title .sicon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; color: #1E88E5; }80 81  .gallery {82    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;83    padding: 18px 18px 10px 18px;84  }85  .img {86    height: 330px; background: #E0E0E0; border: 1px solid #BDBDBD;87    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px; position: relative;88  }89  .fav {90    position: absolute; top: 16px; right: 16px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;91    background: rgba(255,255,255,0.92); border-radius: 28px; border: 1px solid #E0E0E0;92  }93 94  .card-title { font-size: 42px; font-weight: 700; padding: 10px 26px 0 26px; color: #212121; }95  .subtitle { font-size: 28px; color: #757575; padding: 8px 26px; }96  .price-row {97    display: flex; align-items: center; justify-content: space-between; padding: 10px 26px 0 26px; position: relative;98  }99  .price { font-size: 46px; color: #1976D2; font-weight: 700; }100  .view-btn {101    width: 210px; height: 82px; border: 2px solid #1976D2; color: #1976D2; border-radius: 12px;102    display: flex; align-items: center; justify-content: center; font-size: 34px; background: #FFFFFF;103  }104  .dot {105    position: absolute; right: 220px; top: 18px; width: 18px; height: 18px; background: #1DB954; border-radius: 50%;106  }107  .divider { height: 16px; background: #F5F5F5; border-top: 1px solid #EDEDED; border-bottom: 1px solid #EDEDED; }108 109  /* Bottom gesture bar */110  .gesture {111    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);112    width: 300px; height: 12px; background: rgba(0,0,0,0.26); border-radius: 8px;113  }114 115  /* Utility */116  .icon { fill: none; stroke: currentColor; stroke-width: 3; }117  .icon-solid { fill: currentColor; stroke: none; }118</style>119</head>120<body>121<div id="render-target">122 123  <!-- Status bar -->124  <div class="status-bar">125    <div class="status-time">8:05</div>126    <div class="status-icons">127      <!-- Signal -->128      <svg width="32" height="28" viewBox="0 0 24 24" class="icon" style="stroke-width:2">129        <path d="M2 20h2M6 16h2M10 12h2M14 8h2M18 4h2"/>130      </svg>131      <!-- Wi-Fi -->132      <svg width="34" height="28" viewBox="0 0 24 24" class="icon" style="stroke-width:2">133        <path d="M2 8c5-5 15-5 20 0"/>134        <path d="M5 11c3.5-3.5 10.5-3.5 14 0"/>135        <path d="M8 14c2-2 6-2 8 0"/>136        <circle cx="12" cy="18" r="1.6" class="icon-solid"></circle>137      </svg>138      <!-- Battery -->139      <svg width="44" height="28" viewBox="0 0 36 24" class="icon" style="stroke-width:2">140        <rect x="2" y="5" width="28" height="14" rx="2"></rect>141        <rect x="4.5" y="7.5" width="18" height="9" class="icon-solid" style="fill:#E3F2FD; stroke:none;"></rect>142        <rect x="30" y="9" width="4" height="6" rx="1" class="icon-solid" style="fill:#E3F2FD; stroke:none;"></rect>143      </svg>144    </div>145  </div>146 147  <!-- App bar -->148  <div class="app-bar">149    <div class="app-left">150      <svg width="56" height="56" viewBox="0 0 24 24" class="icon" style="color:#fff; stroke-width:2.6">151        <path d="M3 6h18M3 12h18M3 18h18"/>152      </svg>153    </div>154    <div class="app-title">Cameras - Digica...</div>155    <div class="app-actions">156      <!-- Search -->157      <svg width="54" height="54" viewBox="0 0 24 24" class="icon" style="color:#fff; stroke-width:2.6">158        <circle cx="11" cy="11" r="7"></circle>159        <path d="M20 20l-4-4"/>160      </svg>161      <!-- Pin -->162      <svg width="54" height="54" viewBox="0 0 24 24" class="icon" style="color:#fff; stroke-width:2.4">163        <path d="M12 22s7-7 7-12a7 7 0 10-14 0c0 5 7 12 7 12z"></path>164        <circle cx="12" cy="10" r="3"></circle>165      </svg>166      <!-- Bell -->167      <svg width="54" height="54" viewBox="0 0 24 24" class="icon" style="color:#fff; stroke-width:2.4">168        <path d="M6 8a6 6 0 0112 0c0 7 2 7 2 7H4s2 0 2-7"/>169        <path d="M9 19a3 3 0 006 0"/>170      </svg>171    </div>172  </div>173 174  <!-- Filter bar -->175  <div class="filter-bar">176    <div class="filter-item">177      <div class="filter-label">SORT</div>178      <div class="filter-value">Recently Posted179        <svg width="24" height="24" viewBox="0 0 24 24" class="icon" style="stroke-width:2">180          <path d="M6 9l6 6 6-6"/>181        </svg>182      </div>183    </div>184    <div class="filter-item">185      <div class="filter-label">ONLINE USERS ONLY</div>186      <div class="filter-value">Select187        <svg width="24" height="24" viewBox="0 0 24 24" class="icon" style="stroke-width:2">188          <path d="M6 9l6 6 6-6"/>189        </svg>190      </div>191    </div>192    <div class="filter-item last">193      <div class="filter-label">LOCALITIES</div>194      <div class="filter-value">Select195        <svg width="24" height="24" viewBox="0 0 24 24" class="icon" style="stroke-width:2">196          <path d="M6 9l6 6 6-6"/>197        </svg>198      </div>199    </div>200    <div class="filter-btn">201      <!-- Filter icon -->202      <svg width="48" height="48" viewBox="0 0 24 24" class="icon" style="color:#616161; stroke-width:2.2">203        <path d="M3 5h18M6 12h12M10 19h4"/>204      </svg>205    </div>206  </div>207 208  <!-- Card 1 -->209  <div class="card">210    <div class="search-title">211      <div class="stext">Canon EOS 1000D Camera</div>212      <div class="sicon">213        <svg width="50" height="50" viewBox="0 0 24 24" class="icon" style="color:#1E88E5; stroke-width:2.6">214          <circle cx="11" cy="11" r="7"></circle><path d="M20 20l-4-4"/>215        </svg>216      </div>217    </div>218    <div class="gallery">219      <div class="img">220        <span>[IMG: Camera photo]</span>221        <div class="fav">222          <svg width="28" height="28" viewBox="0 0 24 24" class="icon" style="color:#9E9E9E; stroke-width:2">223            <path d="M12 21s-7-4.35-9-8.5C1 9 3 6.5 6 6.5c1.9 0 3.1 1 4 2 0.9-1 2.1-2 4-2 3 0 5 2.5 3 6  -2 4.15-9 8.5-9 8.5z"/>224          </svg>225        </div>226      </div>227      <div class="img"><span>[IMG: Camera photo]</span></div>228      <div class="img"><span>[IMG: Camera photo]</span></div>229    </div>230    <div class="card-title">Canon EOS 1000D Camera</div>231    <div class="subtitle">Delhi | 10d ago</div>232    <div class="price-row">233      <div class="price">₹6,500</div>234      <div class="view-btn">View</div>235      <div class="dot"></div>236    </div>237  </div>238 239  <div class="divider"></div>240 241  <!-- Card 2 -->242  <div class="card">243    <div class="gallery">244      <div class="img"><span>[IMG: Camera photo]</span></div>245      <div class="img"><span>[IMG: Camera photo]</span></div>246      <div class="img">247        <span>[IMG: Camera photo]</span>248        <div class="fav">249          <svg width="28" height="28" viewBox="0 0 24 24" class="icon" style="color:#9E9E9E; stroke-width:2">250            <path d="M12 21s-7-4.35-9-8.5C1 9 3 6.5 6 6.5c1.9 0 3.1 1 4 2 0.9-1 2.1-2 4-2 3 0 5 2.5 3 6  -2 4.15-9 8.5-9 8.5z"/>251          </svg>252        </div>253      </div>254    </div>255    <div class="card-title">Canon PowerShot G7 X Mark II in Almost like new co...</div>256    <div class="subtitle">Delhi | 8h ago</div>257    <div class="price-row">258      <div class="price">₹30,000</div>259      <div class="view-btn">View</div>260      <div class="dot"></div>261    </div>262  </div>263 264  <div class="divider"></div>265 266  <!-- Bottom gesture bar -->267  <div class="gesture"></div>268</div>269</body>270</html>