GD-ML/AndroidCode
13.4k
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>Fashion Listing</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#111; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden; background:#ffffff;11 }12 13 /* Status bar */14 .status-bar {15 height:92px; padding:0 36px; display:flex; align-items:center; justify-content:space-between; color:#222;16 font-size:34px;17 }18 .status-icons { display:flex; gap:22px; align-items:center; color:#555; }19 .status-dot { width:16px; height:16px; background:#777; border-radius:50%; opacity:.6; }20 .battery { width:28px; height:18px; border:2px solid #777; border-radius:3px; position:relative; }21 .battery::after { content:""; position:absolute; right:-6px; top:4px; width:4px; height:10px; background:#777; border-radius:1px; }22 .battery .level { position:absolute; left:2px; top:2px; bottom:2px; right:8px; background:#777; }23 24 /* Header */25 .header {26 height:140px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #eee;27 }28 .header-left { display:flex; align-items:center; gap:20px; }29 .brand { font-weight:800; font-size:42px; letter-spacing:1.2px; }30 .header-actions { display:flex; gap:34px; align-items:center; }31 .icon-btn { width:56px; height:56px; display:inline-flex; align-items:center; justify-content:center; }32 33 /* Promo banner */34 .promo {35 height:168px;36 background: linear-gradient(90deg, #ffdcae, #f9c0b7, #f5a9cf);37 display:flex; align-items:center; padding:0 36px; gap:36px; border-bottom:1px solid rgba(0,0,0,0.06);38 }39 .promo .left {40 flex:1;41 color:#222; font-weight:800; font-size:46px; line-height:1.1;42 }43 .promo .right {44 display:flex; align-items:center; gap:20px;45 font-size:34px; color:#222; font-weight:700;46 }47 .code-badge {48 background:#fff; color:#111; border:2px solid #111; padding:20px 28px; border-radius:10px; font-size:40px; font-weight:800;49 }50 51 /* Content */52 .content { padding:36px; }53 .title { font-size:60px; font-weight:800; line-height:1.2; margin:20px 0 10px 0; color:#0c223a; }54 .subtle { color:#6b7585; font-size:36px; margin-bottom:26px; }55 56 /* Product card */57 .product-card { margin-top:10px; }58 .image-wrap {59 position:relative; width:100%; max-width:1008px; height:980px; background:#E0E0E0;60 border:1px solid #BDBDBD; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#757575; font-size:42px; text-align:center;61 }62 .floating-btn {63 position:absolute; right:24px; width:104px; height:104px; border-radius:52px; background:#fff; box-shadow:0 6px 14px rgba(0,0,0,0.08);64 display:flex; align-items:center; justify-content:center; border:1px solid #e6ecf2;65 }66 .floating-btn + .floating-btn { top:160px; }67 .floating-top { top:36px; }68 .floating-bottom { bottom:28px; right:28px; display:flex; gap:10px; align-items:center; }69 .dots { display:flex; gap:10px; position:absolute; right:32px; bottom:28px; }70 .dot { width:30px; height:14px; border-radius:7px; background:#cfcfcf; opacity:.9; }71 .dot.active { width:42px; background:#9a9a9a; }72 73 .p-name { font-size:40px; font-weight:700; margin:24px 0 6px 0; }74 .p-sub { font-size:36px; color:#606c7a; margin-bottom:14px; }75 .price-row { display:flex; align-items:baseline; gap:18px; }76 .price { font-size:48px; font-weight:800; }77 .mrp { font-size:38px; color:#8c95a3; text-decoration:line-through; }78 .off { font-size:38px; color:#1f9d55; font-weight:700; }79 80 /* No more */81 .end-text { text-align:center; margin:120px 0; font-size:42px; color:#222; }82 83 /* Bottom controls */84 .bottom-bar {85 position:absolute; left:0; right:0; bottom:0; height:210px; background:#fff; border-top:1px solid #e9e9e9; display:flex;86 }87 .bottom-item { flex:1; display:flex; align-items:center; padding:28px 40px; gap:26px; }88 .bottom-item + .bottom-item { border-left:1px solid #efefef; }89 .bottom-meta { display:flex; flex-direction:column; line-height:1.1; }90 .bottom-title { font-size:38px; font-weight:700; color:#222; }91 .bottom-sub { font-size:32px; color:#9aa3ad; }92 93 .home-indicator {94 position:absolute; bottom:10px; left:50%; transform:translateX(-50%);95 width:300px; height:10px; background:#111; opacity:.18; border-radius:6px;96 }97 /* Utility SVG color */98 svg { display:block; }99</style>100</head>101<body>102<div id="render-target">103 104 <!-- Status Bar -->105 <div class="status-bar">106 <div>3:26</div>107 <div class="status-icons">108 <div class="status-dot"></div>109 <div class="battery"><div class="level"></div></div>110 </div>111 </div>112 113 <!-- Header -->114 <div class="header">115 <div class="header-left">116 <div class="icon-btn" aria-label="Back">117 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">118 <path d="M15 18l-6-6 6-6"/>119 </svg>120 </div>121 <div class="brand">NYKAA FASHION</div>122 </div>123 <div class="header-actions">124 <div class="icon-btn" aria-label="Search">125 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">126 <circle cx="11" cy="11" r="7"></circle><path d="M20 20l-3.5-3.5"></path>127 </svg>128 </div>129 <div class="icon-btn" aria-label="Wishlist">130 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">131 <path d="M20.8 6.6a5 5 0 0 0-7.1 0L12 8.3l-1.7-1.7a5 5 0 1 0-7.1 7.1l8.8 8.3 8.8-8.3a5 5 0 0 0 0-7.1z"/>132 </svg>133 </div>134 <div class="icon-btn" aria-label="Bag">135 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">136 <path d="M6 7h12l1 12H5L6 7z"></path>137 <path d="M9 7a3 3 0 0 1 6 0"></path>138 </svg>139 </div>140 </div>141 </div>142 143 <!-- Promo Banner -->144 <div class="promo">145 <div class="left">Get Extra 10% off on Top Brands</div>146 <div class="right">147 <div>Use Code</div>148 <div class="code-badge">NEW4YOU</div>149 </div>150 </div>151 152 <!-- Main Content -->153 <div class="content">154 <div class="title">QOMN White and Red Printed Top for Women</div>155 <div class="subtle">1 item</div>156 157 <div class="product-card">158 <div class="image-wrap">159 <div>[IMG: Model wearing white and red printed top]</div>160 161 <!-- Floating actions -->162 <div class="floating-btn floating-top" title="Add to wishlist">163 <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#0c223a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">164 <path d="M20.8 6.6a5 5 0 0 0-7.1 0L12 8.3l-1.7-1.7a5 5 0 1 0-7.1 7.1l8.8 8.3 8.8-8.3a5 5 0 0 0 0-7.1z"/>165 </svg>166 <svg width="18" height="18" viewBox="0 0 24 24" style="position:absolute; right:18px; top:18px" fill="none" stroke="#0c223a" stroke-width="2">167 <path d="M12 5v14M5 12h14"/>168 </svg>169 </div>170 171 <div class="floating-btn" style="top:160px" title="Compare">172 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#0c223a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">173 <rect x="4" y="7" width="10" height="10" rx="2"></rect>174 <rect x="10" y="3" width="10" height="10" rx="2"></rect>175 </svg>176 </div>177 178 <!-- Carousel dots -->179 <div class="dots">180 <div class="dot"></div>181 <div class="dot"></div>182 <div class="dot active"></div>183 <div class="dot"></div>184 <div class="dot"></div>185 </div>186 </div>187 188 <div class="p-name">QOMN</div>189 <div class="p-sub">White and Red Printed Top</div>190 <div class="price-row">191 <div class="price">₹910</div>192 <div class="mrp">₹1,399</div>193 <div class="off">35% Off</div>194 </div>195 </div>196 197 <div class="end-text">No more products!</div>198 </div>199 200 <!-- Bottom bar -->201 <div class="bottom-bar">202 <div class="bottom-item">203 <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">204 <path d="M3 17h6M3 12h12M3 7h18"/>205 </svg>206 <div class="bottom-meta">207 <div class="bottom-title">Sort by</div>208 <div class="bottom-sub">Popularity</div>209 </div>210 </div>211 <div class="bottom-item">212 <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">213 <path d="M3 4h18l-7 8v6l-4 2v-8L3 4z"/>214 </svg>215 <div class="bottom-meta">216 <div class="bottom-title">Filter</div>217 <div class="bottom-sub">No Filter Applied</div>218 </div>219 </div>220 <div class="home-indicator"></div>221 </div>222 223</div>224</body>225</html>