GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Details Screen</title>6<style>7  body { margin:0; padding:0; background: transparent; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#ffffff;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color:#333;14  }15 16  /* Status bar */17  .status-bar {18    position:absolute; top:0; left:0; width:100%; height:120px;19    background:#cfcfcf;20    display:flex; align-items:center; justify-content:space-between;21    padding:0 40px; font-size:36px; color:#333;22  }23  .status-bar svg { width:44px; height:44px; fill:#333; }24 25  /* Header */26  .header {27    position:absolute; top:120px; left:0; width:100%; height:150px;28    background:#fff; display:flex; align-items:center;29    padding:0 30px; border-bottom:1px solid #eee;30  }31  .back-btn { width:80px; height:80px; display:flex; align-items:center; justify-content:center; }32  .back-btn svg { width:48px; height:48px; }33  .title {34    position:absolute; left:50%; transform:translateX(-50%);35    font-size:56px; font-weight:700; letter-spacing:1px; color:#333;36  }37 38  /* Image / carousel area */39  .carousel {40    position:absolute; top:270px; left:0; width:100%; height:700px;41    background:#e6e6e6; display:flex; align-items:center; justify-content:center;42  }43  .img-placeholder {44    width:520px; height:520px;45    background:#E0E0E0; border:1px solid #BDBDBD;46    display:flex; align-items:center; justify-content:center;47    color:#757575; border-radius:24px; box-shadow:0 6px 12px rgba(0,0,0,0.08);48    text-align:center; padding:20px;49  }50  .dots { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); display:flex; gap:22px; }51  .dot { width:22px; height:22px; border-radius:50%; background:#9aa7af; opacity:0.7; }52  .dot.active { background:#6d7c85; opacity:1; }53 54  /* Content */55  .content { position:absolute; top:970px; left:0; width:100%; padding:0 40px; }56  .price { font-size:46px; font-weight:800; margin-bottom:24px; }57  .sub { font-size:40px; color:#6e8795; margin:10px 0; }58  .row { display:flex; align-items:center; gap:16px; margin-top:18px; font-size:38px; color:#6e8795; }59  .row .loc { color:#1a73e8; }60  .hr { height:1px; background:#e0e0e0; margin:36px 0; }61 62  .label { font-size:40px; color:#6e8795; margin-bottom:12px; }63  .value { font-size:40px; color:#6e8795; }64 65  .posted-by { margin-top:30px; }66  .kv { display:flex; align-items:flex-start; gap:20px; font-size:40px; color:#6e8795; margin:16px 0; }67  .kv .k { width:220px; color:#7a909f; }68  .kv .v { color:#2b3f49; }69  .kv .v.link { color:#1a73e8; }70 71  .report {72    position:absolute; left:0; width:100%;73    bottom:480px; text-align:center;74    color:#e53935; font-size:42px; font-weight:700;75  }76 77  /* Action buttons */78  .action-bar { position:absolute; left:0; bottom:360px; width:100%; padding:0 40px; display:flex; gap:30px; }79  .btn {80    flex:1; height:120px; border-radius:24px;81    display:flex; align-items:center; justify-content:center; gap:16px;82    font-size:40px; font-weight:700; color:#fff;83    box-shadow:0 8px 16px rgba(0,0,0,0.15);84  }85  .btn.green { background:#29b35f; }86  .btn.blue { background:#4a88ff; }87  .btn svg { width:56px; height:56px; fill:#fff; }88 89  /* Floating action button */90  .fab {91    position:absolute; left:50%; bottom:320px; transform:translateX(-50%);92    width:140px; height:140px; background:#0a3f66; border-radius:50%;93    display:flex; align-items:center; justify-content:center;94    box-shadow:0 14px 28px rgba(0,0,0,0.25); border:10px solid #eaeff3;95  }96  .fab svg { width:64px; height:64px; }97 98  /* Bottom navigation */99  .bottom-nav {100    position:absolute; left:0; bottom:0; width:100%; height:220px;101    background:#ffffff; border-top:1px solid #e0e0e0;102    display:flex; justify-content:space-around; align-items:center; padding-bottom:30px;103  }104  .nav-item { display:flex; flex-direction:column; align-items:center; gap:12px; color:#3a4b55; font-size:34px; }105  .nav-item svg { width:60px; height:60px; fill:#3a4b55; }106 107  .home-indicator { position:absolute; left:50%; bottom:20px; transform:translateX(-50%); width:360px; height:16px; background:#000; border-radius:8px; opacity:0.16; }108</style>109</head>110<body>111<div id="render-target">112 113  <div class="status-bar">114    <div>8:01</div>115    <div style="display:flex; align-items:center; gap:24px;">116      <!-- Wi-Fi -->117      <svg viewBox="0 0 24 24"><path d="M3 8c4.7-4.2 13.3-4.2 18 0l-2 2c-3.8-3.3-10.2-3.3-14 0L3 8zm3 4c3.1-2.7 8.9-2.7 12 0l-2 2c-2.3-2-5.7-2-8 0l-2-2zm6 5a2 2 0 100-4 2 2 0 000 4z"/></svg>118      <!-- Battery -->119      <svg viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2"/><rect x="20" y="9" width="2" height="6"/></svg>120    </div>121  </div>122 123  <div class="header">124    <div class="back-btn">125      <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>126    </div>127    <div class="title">Details</div>128  </div>129 130  <div class="carousel">131    <div class="img-placeholder">[IMG: Samsung Galaxy A14 back]</div>132    <div class="dots">133      <div class="dot active"></div>134      <div class="dot"></div>135      <div class="dot"></div>136      <div class="dot"></div>137    </div>138  </div>139 140  <div class="content">141    <div class="price">₹ 14,000</div>142    <div class="sub">Samsung Galaxy A14 5g</div>143    <div class="sub">Posted on: Sun, Apr 30, 2023 12:45 PM</div>144 145    <div class="row">146      <svg viewBox="0 0 24 24" width="44" height="44"><path d="M12 2C7.6 2 4 5.6 4 10c0 6 8 12 8 12s8-6 8-12c0-4.4-3.6-8-8-8zm0 11a3 3 0 110-6 3 3 0 010 6z" fill="#ff6f00"/></svg>147      <span class="loc">Kolkata, Kolkata, West Bengal</span>148    </div>149 150    <div class="hr"></div>151 152    <div class="label">AD ID: <span class="value">AId1682838938716</span></div>153 154    <div class="hr"></div>155 156    <div class="label">Description</div>157    <div class="value">for more call me</div>158 159    <div class="hr"></div>160 161    <div class="posted-by">162      <div class="label">Posted By</div>163      <div class="kv">164        <div class="k">Name:</div>165        <div class="v">Saklain Ansari</div>166      </div>167      <div class="kv">168        <div class="k">Email:</div>169        <div class="v link">saklainansari850@gmail.com</div>170      </div>171    </div>172 173    <div class="hr"></div>174  </div>175 176  <div class="report">Report This Add</div>177 178  <div class="action-bar">179    <div class="btn green">180      <svg viewBox="0 0 24 24"><path d="M4 4h14a2 2 0 012 2v9a2 2 0 01-2 2H9l-5 3V6a2 2 0 012-2z"/></svg>181      <span>WhatsApp</span>182    </div>183    <div class="btn blue">184      <svg viewBox="0 0 24 24"><path d="M6 2l12 10-12 10V2z"/></svg>185      <span>Call</span>186    </div>187  </div>188 189  <div class="fab">190    <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5v14" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>191  </div>192 193  <div class="bottom-nav">194    <div class="nav-item">195      <svg viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg>196      <div>Home</div>197    </div>198    <div class="nav-item">199      <svg viewBox="0 0 24 24"><path d="M12 3l9 7h-3v9H6V10H3l9-7z"/></svg>200      <div>Properties</div>201    </div>202    <div class="nav-item">203      <svg viewBox="0 0 24 24"><path d="M4 4h16v14H4V4zm3 3h10v8H7V7zM9 19h6v1H9v-1z"/></svg>204      <div>My Ads</div>205    </div>206    <div class="nav-item">207      <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm-8 9c0-4.4 3.6-8 8-8s8 3.6 8 8H4z"/></svg>208      <div>Profile</div>209    </div>210  </div>211 212  <div class="home-indicator"></div>213</div>214</body>215</html>