GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Render</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;10    position:relative; overflow:hidden;11    background:#f5f6f7;12    border-radius:28px;13    box-shadow:0 20px 60px rgba(0,0,0,0.25);14  }15  /* Status bar */16  .status-bar {17    height:140px;18    background:#4454d6;19    color:#fff;20    display:flex;21    align-items:flex-end;22    padding:0 40px 22px;23    box-sizing:border-box;24  }25  .status-time { font-size:42px; font-weight:600; }26  .status-icons { margin-left:auto; display:flex; gap:28px; align-items:center; }27  .icon-dot { width:16px; height:16px; background:#cfd8ff; border-radius:50%; }28  .status-icon {29    width:40px; height:40px; display:flex; align-items:center; justify-content:center;30    border-radius:50%; background:rgba(255,255,255,0.25);31  }32  /* Site chips row */33  .chip-row {34    background:#4454d6;35    padding:18px 24px 26px;36    display:flex; gap:16px; flex-wrap:nowrap;37  }38  .chip {39    color:#fff; border:1px solid rgba(255,255,255,0.25);40    border-radius:28px; padding:18px 26px; font-size:34px; white-space:nowrap;41    background:rgba(255,255,255,0.10);42  }43  .chip.active {44    background:#111; border-color:#000;45  }46  .chip .x {47    margin-right:14px; font-weight:bold;48  }49  /* Tabs */50  .tabs-bar {51    height:120px; background:#fff; display:flex; align-items:center;52    padding:0 30px; box-sizing:border-box; border-top-left-radius:28px;53    border-top-right-radius:28px; box-shadow:0 6px 14px rgba(0,0,0,0.08);54  }55  .tabs { display:flex; gap:60px; align-items:center; font-size:38px; color:#333; }56  .tab { position:relative; padding-bottom:26px; }57  .tab.active { font-weight:700; }58  .tab.active::after {59    content:""; position:absolute; left:0; right:0; bottom:10px; height:8px;60    background:#ff8a00; border-radius:6px;61  }62  .tabs-right {63    margin-left:auto; width:160px; height:100%; background:#e8f7f4;64    display:flex; align-items:center; justify-content:center; border-left:1px solid #dfe3e6;65  }66  /* Gift button */67  .gift-btn {68    width:960px; height:120px; margin:26px auto 18px; background:#fff; color:#222;69    border-radius:22px; display:flex; align-items:center; justify-content:center;70    font-size:42px; box-shadow:0 12px 24px rgba(0,0,0,0.12);71    border:1px solid #e9ecef;72  }73  /* Benefit icons row */74  .benefits {75    display:flex; justify-content:space-between; padding:28px 40px; background:#fff;76    box-shadow:0 6px 14px rgba(0,0,0,0.06);77  }78  .benefit {79    width:190px; text-align:center; color:#5f6a77; font-size:32px;80  }81  .benefit .circle {82    width:120px; height:120px; border-radius:50%; background:#f1f3f5; margin:0 auto 16px;83    display:flex; align-items:center; justify-content:center; border:1px solid #e0e0e0;84  }85  /* Section titles */86  .section-title {87    font-size:50px; font-weight:700; color:#222; margin:36px 40px 12px;88  }89  hr.line { border:none; height:1px; background:#dfe3e6; margin:0 40px 18px; }90  .sub-head {91    display:flex; align-items:center; justify-content:space-between;92    margin:26px 40px 10px;93  }94  .sub-head .text { font-size:40px; font-weight:700; color:#111; }95  /* Highlights grid */96  .highlights {97    display:grid; grid-template-columns: 1fr 1fr; column-gap:40px; row-gap:24px;98    padding:20px 40px 10px; font-size:36px;99  }100  .label { color:#8b939c; }101  .value { color:#222; }102  /* Bullets */103  .bullets {104    font-size:36px; color:#222; margin:14px 40px 0;105  }106  .bullets b { font-weight:700; }107  .bullets li { margin-bottom:24px; line-height:1.5; }108  /* Floating action button */109  .fab {110    position:absolute; right:40px; bottom:560px; width:150px; height:150px;111    border-radius:50%; background:#5a4bd8; box-shadow:0 12px 24px rgba(0,0,0,0.25);112    display:flex; align-items:center; justify-content:center;113  }114  /* Bottom ad */115  .bottom-ad {116    position:absolute; left:0; right:0; bottom:140px; height:160px; background:#fff;117    display:flex; align-items:center; padding:0 24px; box-sizing:border-box;118    box-shadow:0 -8px 16px rgba(0,0,0,0.12);119  }120  .ad-thumb {121    width:120px; height:90px; background:#E0E0E0; border:1px solid #BDBDBD;122    display:flex; align-items:center; justify-content:center; color:#757575; font-size:24px;123    border-radius:8px; margin-right:24px;124  }125  .ad-text { font-size:32px; color:#333; }126  .ad-spacer { flex:1; }127  .ad-btn {128    background:#1877f2; color:#fff; font-size:34px; border-radius:12px;129    padding:20px 38px;130  }131  /* Home indicator */132  .home-indicator {133    position:absolute; bottom:40px; left:290px; width:500px; height:16px;134    background:#cfcfcf; border-radius:12px;135  }136</style>137</head>138<body>139<div id="render-target">140 141  <!-- Status Bar -->142  <div class="status-bar">143    <div class="status-time">9:25</div>144    <div class="status-icons">145      <div class="status-icon">146        <svg width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9" fill="none" stroke="#fff" stroke-width="2"/></svg>147      </div>148      <div class="status-icon">149        <svg width="22" height="22" viewBox="0 0 22 22"><path d="M6 8h10v6H6z" fill="none" stroke="#fff" stroke-width="2"/></svg>150      </div>151      <div class="icon-dot"></div>152      <div class="status-icon">153        <svg width="22" height="22" viewBox="0 0 22 22"><path d="M4 16h14M6 12h10M8 8h6" stroke="#fff" stroke-width="2"/></svg>154      </div>155      <div class="status-icon">156        <svg width="22" height="22" viewBox="0 0 22 22"><path d="M5 18h12V6H5v12z" fill="none" stroke="#fff" stroke-width="2"/><path d="M9 18V9h4v9" stroke="#fff" stroke-width="2"/></svg>157      </div>158    </div>159  </div>160 161  <!-- Site chips -->162  <div class="chip-row">163    <div class="chip active"><span class="x">×</span>Amazon.</div>164    <div class="chip">Flipkar</div>165    <div class="chip">2gud.co</div>166    <div class="chip">Google.</div>167    <div class="chip">Relianc</div>168    <div class="chip">Shop</div>169  </div>170 171  <!-- Tabs -->172  <div class="tabs-bar">173    <div class="tabs">174      <div class="tab active">Details</div>175      <div class="tab">Compare</div>176      <div class="tab">Questions</div>177      <div class="tab">Reviews</div>178    </div>179    <div class="tabs-right">180      <svg width="36" height="36" viewBox="0 0 24 24">181        <path d="M12 7l-6 6h12z" fill="#2e7d32"/>182      </svg>183    </div>184  </div>185 186  <!-- Gift button -->187  <div class="gift-btn">Buy as a gift</div>188 189  <!-- Benefits icons -->190  <div class="benefits">191    <div class="benefit">192      <div class="circle">193        <svg width="44" height="44" viewBox="0 0 24 24">194          <path d="M3 12h18M6 9l-3 3 3 3" stroke="#ff8a00" stroke-width="2" fill="none"/>195        </svg>196      </div>197      Free Delivery198    </div>199    <div class="benefit">200      <div class="circle">201        <svg width="44" height="44" viewBox="0 0 24 24">202          <path d="M5 12h14M12 5v14" stroke="#ff8a00" stroke-width="2" fill="none"/>203        </svg>204      </div>205      Pay on Delivery206    </div>207    <div class="benefit">208      <div class="circle">209        <svg width="44" height="44" viewBox="0 0 24 24">210          <rect x="5" y="6" width="14" height="12" stroke="#ff8a00" stroke-width="2" fill="none"/>211          <path d="M9 10h6" stroke="#ff8a00" stroke-width="2"/>212        </svg>213      </div>214      10 days Returnable215    </div>216    <div class="benefit">217      <div class="circle">218        <svg width="44" height="44" viewBox="0 0 24 24">219          <path d="M4 15h16l-2-5H6z" stroke="#ff8a00" stroke-width="2" fill="none"/>220        </svg>221      </div>222      Amazon Delivered223    </div>224    <div class="benefit">225      <div class="circle">226        <svg width="44" height="44" viewBox="0 0 24 24">227          <path d="M12 4l5 16-5-4-5 4z" stroke="#ff8a00" stroke-width="2" fill="none"/>228        </svg>229      </div>230      Top Brands231    </div>232  </div>233 234  <!-- Product details section -->235  <div class="section-title">Product details</div>236  <hr class="line">237 238  <div class="sub-head">239    <div class="text">Top Highlights</div>240    <svg width="40" height="40" viewBox="0 0 24 24">241      <path d="M12 8l6 6H6z" fill="#555"/>242    </svg>243  </div>244 245  <div class="highlights">246    <div class="label">Brand</div><div class="value">Plantex</div>247    <div class="label">Mounting Type</div><div class="value">Floor Mount</div>248    <div class="label">Material</div><div class="value">Zinc alloy & ribbed rubber</div>249    <div class="label">Colour</div><div class="value">Rose Gold</div>250    <div class="label">Style</div><div class="value">Modern</div>251    <div class="label">Finish Type</div><div class="value">Rose Gold Finish</div>252  </div>253 254  <ul class="bullets">255    <li><b>Heavy Duty Build:</b> The door stopper is made of Zinc alloy and ribbed rubber foot for a strong grip. The kickstand door stopper is rust and corrosion-resistant, allowing it to last for years, and can easily retain the door at any degree on various floors, including carpet, vinyl, hardwoods, concrete, and tile.</li>256    <li><b>Modern Design:</b> Plantex door holder comes with an exclusive rose gold finish and modern design combined with the supreme build quality. These door accessories suit most interiors and keep doors where you want them.</li>257  </ul>258 259  <!-- Floating Action Button -->260  <div class="fab">261    <svg width="80" height="80" viewBox="0 0 24 24">262      <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="3" stroke-linecap="round"/>263    </svg>264  </div>265 266  <!-- Bottom Ad -->267  <div class="bottom-ad">268    <div class="ad-thumb">[IMG: Ad]</div>269    <div class="ad-text">Foreign Products To Buy</div>270    <div class="ad-spacer"></div>271    <div class="ad-btn">Install</div>272  </div>273 274  <!-- Home indicator -->275  <div class="home-indicator"></div>276 277</div>278</body>279</html>