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>Snapdeal UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff; border-radius: 24px;12 box-shadow: 0 10px 30px rgba(0,0,0,0.08);13 }14 15 .content { position: absolute; inset: 0; overflow-y: auto; padding-bottom: 200px; }16 .header {17 height: 120px; display: flex; align-items: center; justify-content: space-between;18 padding: 0 40px;19 }20 .brand { display: flex; align-items: center; gap: 20px; }21 .brand svg { width: 44px; height: 44px; }22 .brand .name { font-size: 40px; font-weight: 700; color: #e53935; letter-spacing: 0.2px; }23 .header-actions { display: flex; align-items: center; gap: 26px; }24 .icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 22px; }25 .icon { width: 36px; height: 36px; }26 .badge {27 position: relative;28 }29 .badge::after {30 content: "1";31 position: absolute; top: -4px; right: -4px;32 width: 28px; height: 28px; background: #e53935; color: #fff; font-size: 18px; line-height: 28px; text-align: center;33 border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.2);34 }35 36 .search-wrap { padding: 0 36px; }37 .searchbar {38 height: 100px; border: 2px solid #D8D8D8; border-radius: 50px;39 display: flex; align-items: center; gap: 22px; padding: 0 30px;40 }41 .searchbar .placeholder { color: #7a7a7a; font-size: 36px; flex: 1; }42 .searchbar .mic { width: 44px; height: 44px; }43 44 .categories { padding: 26px 20px 16px; }45 .cat-row { display: flex; gap: 28px; padding: 0 16px; }46 .cat-item { width: 180px; }47 .img-placeholder {48 width: 180px; height: 180px; background: #E0E0E0; border: 1px solid #BDBDBD;49 display: flex; justify-content: center; align-items: center; color: #757575; text-align: center; font-size: 26px; border-radius: 20px;50 }51 .cat-label { margin-top: 14px; text-align: center; font-size: 28px; color: #444; }52 53 .ribbon {54 margin: 8px 24px 0; height: 70px;55 background: linear-gradient(90deg, #ffe59a, #ffd174);56 border-radius: 35px; display: flex; align-items: center; justify-content: center;57 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);58 }59 .ribbon b { font-size: 34px; color: #222; }60 61 .hero { padding: 20px 24px 8px; }62 .hero .img-placeholder { width: 1032px; height: 640px; border-radius: 24px; font-size: 36px; }63 64 .dots { height: 40px; display: flex; justify-content: center; align-items: center; gap: 14px; }65 .dot { width: 18px; height: 18px; border-radius: 50%; background: #D0D0D0; }66 .dot.active { background: #555; width: 24px; height: 24px; border-radius: 12px; }67 68 .coupon { margin: 14px 24px; background: #fff; border-radius: 20px; border: 1px solid #E6E6E6; padding: 20px; }69 .coupon-inner { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: center; }70 .coupon-left { padding: 20px 24px; }71 .coupon-left .title { font-size: 42px; color: #e53935; font-weight: 800; letter-spacing: 0.4px; }72 .coupon-left .sub { font-size: 28px; color: #555; margin-top: 10px; }73 .coupon-right {74 height: 160px; border-left: 1px dashed #E4A9A9; display: flex; align-items: center; justify-content: center;75 }76 .code-pill {77 background: #f04e4e; color: #fff; font-size: 36px; font-weight: 700; padding: 20px 34px; border-radius: 16px;78 box-shadow: 0 6px 14px rgba(240,78,78,0.35);79 }80 .code-label { position: absolute; transform: translateY(-62px); font-size: 26px; color: #333; }81 82 .section-head { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px 8px; }83 .section-title { font-size: 44px; font-weight: 700; color: #333; }84 .view-all { font-size: 30px; color: #2a66ff; display: flex; align-items: center; gap: 10px; }85 86 .products { padding: 10px 24px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }87 .product-card {88 background: #fff; border: 1px solid #ECECEC; border-radius: 22px; overflow: hidden;89 box-shadow: 0 2px 6px rgba(0,0,0,0.05);90 }91 .product-card .img-placeholder { width: 100%; height: 280px; border-radius: 0; font-size: 28px; }92 .product-card .info { padding: 16px; font-size: 28px; color: #444; text-align: center; }93 94 .bottom-nav {95 position: absolute; bottom: 0; left: 0; width: 100%; height: 160px;96 background: #fff; border-top: 1px solid #ECECEC; display: flex; justify-content: space-around; align-items: center;97 box-shadow: 0 -6px 16px rgba(0,0,0,0.08);98 }99 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #777; }100 .nav-item .icon { width: 44px; height: 44px; }101 .nav-item.active { color: #e53935; }102 .nav-item span { font-size: 26px; }103</style>104</head>105<body>106<div id="render-target">107 <div class="content">108 <!-- Header -->109 <div class="header">110 <div class="brand">111 <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">112 <path d="M20 3 L33 10 L33 30 L20 37 L7 30 L7 10 Z" fill="#e53935"/>113 </svg>114 <div class="name">snapdeal</div>115 </div>116 <div class="header-actions">117 <div class="icon-btn">118 <svg class="icon" viewBox="0 0 24 24">119 <path d="M3 12h18" stroke="#333" stroke-width="2" fill="none"/>120 <path d="M12 3v18" stroke="#333" stroke-width="2" fill="none"/>121 </svg>122 </div>123 <div class="icon-btn badge">124 <svg class="icon" viewBox="0 0 24 24">125 <path d="M12 21s-8-5.3-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.7-8 11-8 11z" fill="none" stroke="#333" stroke-width="2"/>126 </svg>127 </div>128 </div>129 </div>130 131 <!-- Search -->132 <div class="search-wrap">133 <div class="searchbar">134 <svg class="icon" viewBox="0 0 24 24">135 <circle cx="11" cy="11" r="7" stroke="#4b6abe" stroke-width="2" fill="none"/>136 <line x1="16" y1="16" x2="22" y2="22" stroke="#4b6abe" stroke-width="2"/>137 </svg>138 <div class="placeholder">Search for</div>139 <svg class="mic" viewBox="0 0 24 24">140 <rect x="9" y="3" width="6" height="10" rx="3" ry="3" stroke="#4b6abe" stroke-width="2" fill="none"/>141 <path d="M5 10c0 4 3 7 7 7s7-3 7-7" stroke="#4b6abe" stroke-width="2" fill="none"/>142 <line x1="12" y1="17" x2="12" y2="22" stroke="#4b6abe" stroke-width="2"/>143 </svg>144 </div>145 </div>146 147 <!-- Categories -->148 <div class="categories">149 <div class="cat-row">150 <div class="cat-item">151 <div class="img-placeholder">[IMG: Up To 90% Off Badge]</div>152 <div class="cat-label">Toofani Sale</div>153 </div>154 <div class="cat-item">155 <div class="img-placeholder">[IMG: Men's Fashion]</div>156 <div class="cat-label">Men</div>157 </div>158 <div class="cat-item">159 <div class="img-placeholder">[IMG: Women's Fashion]</div>160 <div class="cat-label">Women</div>161 </div>162 <div class="cat-item">163 <div class="img-placeholder">[IMG: Agoda Logo]</div>164 <div class="cat-label">Hotels & Travel</div>165 </div>166 <div class="cat-item">167 <div class="img-placeholder">[IMG: Kids Fashion]</div>168 <div class="cat-label">Kids</div>169 </div>170 </div>171 </div>172 173 <!-- Ribbon -->174 <div class="ribbon"><b>Toofani Sale Is Live Now</b></div>175 176 <!-- Hero Banner -->177 <div class="hero">178 <div class="img-placeholder">[IMG: Home Utility Promo - Under ₹399]</div>179 </div>180 181 <!-- Carousel dots -->182 <div class="dots">183 <div class="dot"></div>184 <div class="dot active"></div>185 <div class="dot"></div>186 <div class="dot"></div>187 <div class="dot"></div>188 <div class="dot"></div>189 </div>190 191 <!-- Coupon -->192 <div class="coupon">193 <div class="coupon-inner">194 <div class="coupon-left">195 <div class="title">FLAT ₹50 OFF</div>196 <div class="sub">On your First order</div>197 </div>198 <div class="coupon-right">199 <div>200 <div class="code-label">Use Code:</div>201 <div class="code-pill">GET50</div>202 </div>203 </div>204 </div>205 </div>206 207 <!-- Recently viewed -->208 <div class="section-head">209 <div class="section-title">Recently viewed products</div>210 <div class="view-all">View All <span>›</span></div>211 </div>212 <div class="products">213 <div class="product-card">214 <div class="img-placeholder">[IMG: Black Combat Boots]</div>215 <div class="info">Black Boots</div>216 </div>217 <div class="product-card">218 <div class="img-placeholder">[IMG: Green Men's Shirt]</div>219 <div class="info">Green Shirt</div>220 </div>221 <div class="product-card">222 <div class="img-placeholder">[IMG: White Men's Shirt]</div>223 <div class="info">White Shirt</div>224 </div>225 </div>226 </div>227 228 <!-- Bottom Navigation -->229 <div class="bottom-nav">230 <div class="nav-item active">231 <svg class="icon" viewBox="0 0 24 24">232 <path d="M3 11l9-7 9 7v9H3z" fill="none" stroke="#e53935" stroke-width="2"/>233 <path d="M9 20v-6h6v6" stroke="#e53935" stroke-width="2" fill="none"/>234 </svg>235 <span>Home</span>236 </div>237 <div class="nav-item">238 <svg class="icon" viewBox="0 0 24 24">239 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>240 <line x1="16" y1="16" x2="22" y2="22" stroke="#777" stroke-width="2"/>241 </svg>242 <span>Search</span>243 </div>244 <div class="nav-item">245 <svg class="icon" viewBox="0 0 24 24">246 <circle cx="12" cy="12" r="9" fill="#f4c542" stroke="#b88c1a" stroke-width="2"/>247 <text x="12" y="16" text-anchor="middle" font-size="12" fill="#7a5b00">₹</text>248 </svg>249 <span>Earn ₹125</span>250 </div>251 <div class="nav-item">252 <svg class="icon" viewBox="0 0 24 24">253 <path d="M3 6h18l-2 9H5z" fill="none" stroke="#777" stroke-width="2"/>254 <circle cx="8" cy="19" r="2" fill="#777"/>255 <circle cx="17" cy="19" r="2" fill="#777"/>256 </svg>257 <span>My Cart</span>258 </div>259 <div class="nav-item">260 <svg class="icon" viewBox="0 0 24 24">261 <circle cx="12" cy="8" r="4" fill="none" stroke="#777" stroke-width="2"/>262 <path d="M4 22c0-5 4-8 8-8s8 3 8 8" fill="none" stroke="#777" stroke-width="2"/>263 </svg>264 <span>Profile</span>265 </div>266 </div>267</div>268</body>269</html>