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>Offer Detail Mock</title>7<style>8 body{margin:0;padding:0;background:transparent;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}9 #render-target{10 position:relative; overflow:hidden;11 width:1080px; height:2400px;12 background:#ffffff; color:#111;13 }14 15 .status-bar{16 height:84px; padding:0 32px;17 display:flex; align-items:center; justify-content:space-between;18 font-size:30px; color:#333;19 }20 .status-icons{display:flex; gap:26px; align-items:center;}21 .icon{width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; color:#666;}22 .header{23 padding:18px 28px 16px 20px;24 display:flex; align-items:center; gap:18px;25 }26 .back{width:64px;height:64px; display:flex; align-items:center; justify-content:center;}27 .search-bar{28 flex:1;29 background:#F3F4F6; border:1px solid #E0E0E0;30 height:88px; border-radius:20px;31 display:flex; align-items:center; gap:18px;32 padding:0 24px;33 color:#777; font-size:34px;34 }35 .cart-btn{width:72px; height:72px; display:flex; align-items:center; justify-content:center; margin-left:12px; color:#333;}36 .section{padding:28px 28px 8px 28px;}37 .deal-row{display:flex; align-items:flex-start; gap:24px; padding:20px 0;}38 .img-ph{39 background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;40 display:flex; align-items:center; justify-content:center; text-align:center;41 }42 .wow{width:160px; height:120px; border-radius:10px; font-weight:700;}43 .deal-text h2{margin:0; font-size:52px; font-weight:800;}44 .green{color:#18A957;}45 .gray{color:#6B7280;}46 .chev-down{margin-left:auto;}47 .divider{height:2px; background:#E9DFF2;}48 .row-link{49 display:flex; align-items:center; justify-content:space-between;50 font-size:40px; font-weight:700; padding:24px 0;51 }52 .info-card{53 display:flex; align-items:center; gap:18px; padding:26px 14px;54 font-size:34px;55 }56 .subtext{font-size:28px; color:#69707A;}57 .banner{height:160px; border-radius:12px; margin:16px 0 8px 0;}58 .brand-block{padding:26px 0;}59 .brand-head{display:flex; align-items:center; gap:18px; margin-bottom:8px;}60 .brand-logo{width:90px;height:90px;border-radius:14px;}61 .brand-title{font-size:40px; font-weight:800;}62 .bullet{display:flex; align-items:flex-start; gap:18px; padding:16px 0; color:#444;}63 .bullet .label{font-size:36px; font-weight:700;}64 .bullet .hint{font-size:28px; color:#6B7280;}65 .purple-divider{height:14px; background:#F5ECFB; margin:8px -28px;}66 .prod-details{padding:24px 0;}67 .prod-details h3{margin:0 0 18px 0; font-size:42px;}68 .specs{69 display:grid; grid-template-columns: 1fr 1fr; row-gap:22px; column-gap:12px;70 font-size:34px;71 }72 .specs .k{color:#7A808A;}73 .floating-badge{74 position:absolute; right:30px; bottom:300px;75 width:140px; height:140px; border-radius:70px;76 box-shadow:0 10px 18px rgba(0,0,0,0.12);77 }78 .action-bar{79 position:absolute; left:0; right:0; bottom:76px;80 background:#fff; padding:22px 24px;81 display:flex; gap:18px; align-items:center;82 border-top:1px solid #E5E7EB;83 }84 .btn{85 height:110px; border-radius:16px; display:flex; align-items:center; justify-content:center;86 font-size:38px; font-weight:700;87 }88 .btn.icon{width:160px; border:1px solid #E5E7EB; background:#fff;}89 .btn.outline{flex:1; border:1px solid #E5E7EB; color:#111; background:#fff;}90 .btn.primary{flex:1; background:#FFC107; color:#111; border:none;}91 .home-indicator{92 position:absolute; left:50%; transform:translateX(-50%);93 bottom:20px; width:320px; height:10px; background:#1C1C1C; opacity:.18; border-radius:10px;94 }95 96 /* simple icon helpers */97 svg{display:block}98</style>99</head>100<body>101<div id="render-target">102 103 <!-- Android-like status bar -->104 <div class="status-bar">105 <div>11:47</div>106 <div class="status-icons">107 <div class="icon">108 <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#666" d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21.5 21.5 20l-6-6zM9.5 14C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14z"/></svg>109 </div>110 <div class="icon">111 <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#666" d="M12 3a5 5 0 0 0-5 5v3.1L5 13v3h14v-3l-2-.9V8a5 5 0 0 0-5-5zm0 18a3 3 0 0 0 3-3H9a3 3 0 0 0 3 3z"/></svg>112 </div>113 <div class="icon">114 <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#666" d="M21 7h-6l-1-2H6L5 7H3v2h1l1.6 8.2A2 2 0 0 0 7.6 19h8.8a2 2 0 0 0 2-1.8L20 9h1V7zM7.6 17l-1.2-6h11.2l-1.2 6H7.6z"/></svg>115 </div>116 <div class="icon">117 <svg width="36" height="36" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#666"/></svg>118 </div>119 <div class="icon">120 <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#666" d="M17 7H7V5h10v2zm2 4H5V9h14v2zm0 4H5v-2h14v2zm-4 4H9v-2h6v2z"/></svg>121 </div>122 </div>123 </div>124 125 <!-- Search / nav -->126 <div class="header">127 <div class="back">128 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#333" d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>129 </div>130 <div class="search-bar">131 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#888" d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21.5 21.5 20l-6-6z"/></svg>132 <div style="flex:1;">Search for products</div>133 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#888" d="M12 3a5 5 0 0 0-5 5v3.1L5 13v3h14v-3l-2-.9V8a5 5 0 0 0-5-5zm0 18a3 3 0 0 0 3-3H9a3 3 0 0 0 3 3z"/></svg>134 </div>135 <div class="cart-btn">136 <svg width="48" height="48" viewBox="0 0 24 24"><path fill="#222" d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2S15.9 22 17 22s2-.9 2-2-.9-2-2-2zM7.16 14h9.45a2 2 0 0 0 1.95-1.57l1.09-4.9H6.21l-.3-1.5H3v2h1.59l2.22 10h11.19v-2H8.53l-.37-2z"/></svg>137 </div>138 </div>139 140 <div class="divider"></div>141 142 <!-- Deal section -->143 <div class="section">144 <div class="deal-row">145 <div class="img-ph wow">[IMG: WOW DEAL]</div>146 <div class="deal-text" style="flex:1;">147 <h2>Get at <span class="green">₹1,879</span></h2>148 <div class="gray" style="font-size:32px; margin-top:8px;">With Basket, Bank offers</div>149 </div>150 <div class="chev-down">151 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#333" d="M7 10l5 5 5-5z"/></svg>152 </div>153 </div>154 </div>155 156 <div class="divider"></div>157 158 <!-- Offers & Coupons -->159 <div class="section">160 <div class="row-link">161 <div>All Offers & Coupons</div>162 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#333" d="M10 6l6 6-6 6-1.41-1.41L13.17 12 8.59 7.41z"/></svg>163 </div>164 </div>165 166 <div class="divider"></div>167 168 <!-- Ordered count -->169 <div class="section">170 <div class="info-card">171 <div class="icon">172 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#20C05C" d="M4 12l4-4 4 4 6-6 2 2-8 8-4-4-4 4z"/></svg>173 </div>174 <div><span style="font-weight:800;">820</span> people ordered this in the last 15 days</div>175 </div>176 </div>177 178 <div class="divider"></div>179 180 <!-- SuperCoins -->181 <div class="section">182 <div class="info-card">183 <div class="icon">184 <svg width="44" height="44" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#FFD54F"/><path d="M12 7l1.2 2.6L16 10l-2 2 .5 3-2.5-1.3L9.5 15l.5-3-2-2 2.8-.4L12 7z" fill="#F2A900"/></svg>185 </div>186 <div>You will earn <span style="font-weight:800;">50</span> SuperCoins cashback</div>187 </div>188 <div class="subtext" style="padding:0 14px 18px 78px;">Use it to save on your next order. <span style="color:#2575D0; font-weight:700;">How?</span></div>189 </div>190 191 <div class="divider"></div>192 193 <!-- Banner placeholder -->194 <div class="section">195 <div class="img-ph banner" style="justify-content:flex-start; padding-left:24px; color:#5C5C5C;">[IMG: Flipkart Pay Later Banner]</div>196 </div>197 198 <div class="purple-divider"></div>199 200 <!-- About the brand -->201 <div class="section brand-block">202 <div class="brand-head">203 <div class="img-ph brand-logo">[IMG]</div>204 <div>205 <div class="gray" style="font-size:34px;">About the brand</div>206 <div class="brand-title">NIKE</div>207 </div>208 </div>209 210 <div class="bullet">211 <div class="icon">212 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#333" d="M16 6l2 2-7 8-4-4 2-2 2 2 5-6z"/></svg>213 </div>214 <div>215 <div class="label">Popular in Running</div>216 <div class="hint">Based on recent orders on Flipkart</div>217 </div>218 </div>219 220 <div class="bullet">221 <div class="icon">222 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="none" stroke="#333" stroke-width="2" d="M12 17.3l6.18 3.7-1.64-7.03L21 9.24l-7.19-.61L12 2 10.19 8.63 3 9.24l4.46 4.73L5.82 21z"/></svg>223 </div>224 <div>225 <div class="label">Loved by customers</div>226 <div class="hint">Based on customer ratings</div>227 </div>228 </div>229 230 <div class="bullet">231 <div class="icon">232 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#333" d="M4 6h12l4 4v8a2 2 0 0 1-2 2H4V6zm12 2v2h2l-2-2z"/></svg>233 </div>234 <div>235 <div class="label">8+ years on Flipkart</div>236 <div class="hint">Trusted brand on Flipkart</div>237 </div>238 </div>239 </div>240 241 <div class="purple-divider"></div>242 243 <!-- Product details -->244 <div class="section prod-details">245 <h3>Product Details</h3>246 <div class="specs">247 <div class="k">Outer material</div><div>PU</div>248 <div class="k">Occasion</div><div>Sports</div>249 <div class="k">Type For Sports</div><div>Running Shoes</div>250 </div>251 </div>252 253 <!-- Floating badge (right) -->254 <div class="img-ph floating-badge" style="background:#EAF2FF; border:none; color:#2B6DE0;">[IMG: Flipkart Badge]</div>255 256 <!-- Bottom action bar -->257 <div class="action-bar">258 <div class="btn icon">259 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#222" d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2S15.9 22 17 22s2-.9 2-2-.9-2-2-2zM7.16 14h9.45a2 2 0 0 0 1.95-1.57l1.09-4.9H6.21l-.3-1.5H3v2h1.59l2.22 10h11.19v-2H8.53l-.37-2z"/></svg>260 </div>261 <div class="btn outline">Pay with EMI</div>262 <div class="btn primary">Buy now</div>263 </div>264 265 <div class="home-indicator"></div>266 267</div>268</body>269</html>