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>ShopClues Mockup</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 }14 15 /* Status bar */16 .status-bar {17 height: 120px; background: #4fa7a8; color: #fff;18 display: flex; align-items: center; justify-content: space-between;19 padding: 0 36px; font-size: 40px;20 }21 .status-left, .status-right { display: flex; align-items: center; gap: 24px; }22 .status-dot { width: 12px; height: 12px; background: rgba(255,255,255,0.8); border-radius: 50%; }23 24 /* Header */25 .header {26 height: 160px; background: #fff; border-bottom: 1px solid #e9e9e9;27 display: flex; align-items: center; padding: 0 32px; gap: 28px;28 }29 .hamburger { width: 72px; height: 72px; cursor: pointer; }30 .logo-wrap { display: flex; align-items: center; gap: 18px; }31 .logo-badge {32 width: 60px; height: 60px; border-radius: 30px; background: #4fa7a8; display: flex; align-items: center; justify-content: center;33 }34 .shopclues { font-weight: 800; font-size: 48px; letter-spacing: 1px; color: #222; }35 .cart { margin-left: auto; width: 72px; height: 72px; }36 37 /* Search & pincode */38 .content { padding: 24px 32px; }39 .search-bar {40 background: #f1f1f1; border-radius: 22px; height: 106px; display: flex; align-items: center;41 padding: 0 16px; gap: 12px;42 }43 .search-input {44 flex: 1; border: none; outline: none; background: transparent; font-size: 40px; color: #555;45 }46 .search-btn {47 width: 150px; height: 88px; border-radius: 18px;48 background: linear-gradient(90deg, #ff8a65, #f06292); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer;49 }50 .pincode-hint {51 margin-top: 24px; color: #808080; font-size: 34px; display: flex; align-items: center; justify-content: space-between;52 }53 .pincode-row {54 margin-top: 16px; display: flex; align-items: center; gap: 16px;55 }56 .pincode-input {57 flex: 1; height: 86px; border: none; outline: none; font-size: 40px; color: #9e9e9e; background: transparent;58 }59 .submit-outline {60 width: 200px; height: 86px; border: 2px solid #b2e3e3; border-radius: 12px; background: #f8ffff; color: #5aa7a8; font-size: 40px;61 }62 .divider { height: 2px; background: #eaeaea; margin: 24px -32px 0 -32px; }63 64 /* Sign-in card */65 .signin-card {66 margin: 24px 0; background: #fff; border: 1px solid #e6e6e6; border-radius: 18px; padding: 24px;67 display: flex; align-items: center; gap: 24px;68 }69 .avatar {70 width: 96px; height: 96px; border-radius: 48px; background: #ffd8c2; display: flex; align-items: center; justify-content: center;71 }72 .signin-text { flex: 1; }73 .signin-title { font-size: 44px; font-weight: 700; color: #222; }74 .signin-sub { font-size: 36px; color: #777; margin-top: 8px; }75 .signin-btn {76 height: 96px; width: 200px; border-radius: 14px; background: #ff9f7a; color: #fff; font-weight: 700; font-size: 36px; border: none;77 }78 79 /* Categories row */80 .categories { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 12px; }81 .cat-item { width: 200px; display: flex; flex-direction: column; align-items: center; }82 .cat-img {83 width: 140px; height: 140px; border-radius: 70px; background: #E0E0E0; border: 1px solid #BDBDBD;84 display: flex; align-items: center; justify-content: center; color: #757575; text-align: center; font-size: 26px; padding: 8px;85 }86 .cat-label { margin-top: 12px; font-size: 32px; color: #333; text-align: center; }87 88 /* Banners */89 .banner {90 margin: 24px 0; width: 100%; height: 240px; background: #E0E0E0; border: 1px solid #BDBDBD;91 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 38px; text-align: center; border-radius: 12px;92 }93 .banner.large { height: 360px; }94 95 /* Section title */96 .section-title {97 font-size: 44px; font-weight: 800; color: #222; margin-top: 12px;98 }99 .title-underline { width: 140px; height: 8px; background: #4fa7a8; border-radius: 4px; margin-top: 12px; }100 101 /* Bottom navigation */102 .bottom-nav {103 position: absolute; left: 0; right: 0; bottom: 0;104 height: 200px; background: #fff; border-top: 1px solid #e5e5e5;105 display: flex; align-items: center; justify-content: space-around;106 }107 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; }108 .nav-icon { width: 64px; height: 64px; }109 .nav-label { font-size: 30px; color: #7a7a7a; }110 .nav-item.active .nav-label { color: #4fa7a8; font-weight: 700; }111 112 /* Utility */113 button { cursor: pointer; }114</style>115</head>116<body>117<div id="render-target">118 119 <!-- Status bar -->120 <div class="status-bar">121 <div class="status-left">122 <div>8:26</div>123 <div class="status-dot"></div>124 <div class="status-dot"></div>125 <div class="status-dot"></div>126 </div>127 <div class="status-right">128 <svg class="nav-icon" viewBox="0 0 24 24">129 <path d="M7 18h10l1-6H6l1 6zm4-12h2l1 3H10l1-3z" fill="rgba(255,255,255,0.9)"></path>130 </svg>131 <div>100%</div>132 </div>133 </div>134 135 <!-- Header -->136 <div class="header">137 <svg class="hamburger" viewBox="0 0 24 24">138 <path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z" fill="#4a4a4a"></path>139 </svg>140 <div class="logo-wrap">141 <div class="logo-badge">142 <svg viewBox="0 0 24 24" width="42" height="42">143 <circle cx="12" cy="12" r="10" fill="#ffffff" opacity="0.25"></circle>144 <path d="M17 9l-6 6-4-4 1.5-1.5L11 12l4.5-4.5z" fill="#ffffff"></path>145 </svg>146 </div>147 <div class="shopclues">SHOPCLUES.com</div>148 </div>149 <svg class="cart" viewBox="0 0 24 24">150 <path d="M7 6h14l-2 9H8L7 6zM6 6H3V4h3zM9 20a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm8 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#4fa7a8"></path>151 </svg>152 </div>153 154 <!-- Content -->155 <div class="content">156 <!-- Search -->157 <div class="search-bar">158 <input class="search-input" type="text" placeholder="What is on your mind today?">159 <button class="search-btn" aria-label="Search">160 <svg viewBox="0 0 24 24" width="44" height="44">161 <circle cx="10" cy="10" r="6" fill="#fff"></circle>162 <path d="M15 15l5 5" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>163 </svg>164 </button>165 </div>166 167 <!-- Pincode hint & input -->168 <div class="pincode-hint">169 <div>Share pincode for faster delivery by local sellers</div>170 <svg viewBox="0 0 24 24" width="44" height="44">171 <path d="M5 5l14 14M19 5L5 19" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round"></path>172 </svg>173 </div>174 <div class="pincode-row">175 <svg viewBox="0 0 24 24" width="56" height="56">176 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#78909C"></path>177 </svg>178 <input class="pincode-input" type="text" placeholder="Enter your pincode">179 <button class="submit-outline">Submit</button>180 </div>181 <div class="divider"></div>182 183 <!-- Sign-in card -->184 <div class="signin-card">185 <div class="avatar">186 <svg viewBox="0 0 24 24" width="64" height="64">187 <circle cx="12" cy="8" r="4" fill="#fff"></circle>188 <path d="M4 20c2-4 6-6 8-6s6 2 8 6" fill="#fff" opacity="0.8"></path>189 </svg>190 </div>191 <div class="signin-text">192 <div class="signin-title">You are missing out</div>193 <div class="signin-sub">Sign in for the best offers</div>194 </div>195 <button class="signin-btn">SIGN IN</button>196 </div>197 198 <!-- Categories -->199 <div class="categories">200 <div class="cat-item">201 <div class="cat-img">[IMG: Vintage Phones]</div>202 <div class="cat-label">Vintage Phones</div>203 </div>204 <div class="cat-item">205 <div class="cat-img">[IMG: Smartphones]</div>206 <div class="cat-label">Smartphones</div>207 </div>208 <div class="cat-item">209 <div class="cat-img">[IMG: Jacket]</div>210 <div class="cat-label">Jacket</div>211 </div>212 <div class="cat-item">213 <div class="cat-img">[IMG: Power Banks]</div>214 <div class="cat-label">Power Banks</div>215 </div>216 <div class="cat-item">217 <div class="cat-img">[IMG: Men Apparel]</div>218 <div class="cat-label">Men</div>219 </div>220 </div>221 222 <!-- Banners -->223 <div class="banner">[IMG: Red promotional banner - Big Deals Live Now]</div>224 <div class="banner large">[IMG: Blue banner - Refurbished Best Selling Smart Phones, Coupon REFURB15]</div>225 <div class="banner large">[IMG: Black balloons sale banner - Upto 80% Off + Extra 10% Off, Coupon BLKFRI10]</div>226 227 <!-- Section title near bottom -->228 <div class="section-title">Best Selling Brand</div>229 <div class="title-underline"></div>230 </div>231 232 <!-- Bottom navigation -->233 <div class="bottom-nav">234 <div class="nav-item active">235 <svg class="nav-icon" viewBox="0 0 24 24">236 <path d="M12 3l9 8-1.5 1.5L18 11v8H6v-8l-1.5 1.5L3 11l9-8z" fill="#4fa7a8"></path>237 </svg>238 <div class="nav-label">Home</div>239 </div>240 <div class="nav-item">241 <svg class="nav-icon" viewBox="0 0 24 24">242 <path d="M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z" fill="#9e9e9e"></path>243 </svg>244 <div class="nav-label">Categories</div>245 </div>246 <div class="nav-item">247 <svg class="nav-icon" viewBox="0 0 24 24">248 <path d="M12 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm-7 15c1.5-4 5-5 7-5s5.5 1 7 5" stroke="#9e9e9e" stroke-width="2" fill="none" stroke-linecap="round"></path>249 </svg>250 <div class="nav-label">Community</div>251 </div>252 <div class="nav-item">253 <svg class="nav-icon" viewBox="0 0 24 24">254 <path d="M12 21s-7-4.5-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-7 10-11 10z" fill="#9e9e9e"></path>255 </svg>256 <div class="nav-label">Wishlist</div>257 </div>258 <div class="nav-item">259 <svg class="nav-icon" viewBox="0 0 24 24">260 <circle cx="12" cy="8" r="4" fill="#9e9e9e"></circle>261 <path d="M4 20c2-4 6-6 8-6s6 2 8 6" fill="#9e9e9e"></path>262 </svg>263 <div class="nav-label">Account</div>264 </div>265 </div>266 267</div>268</body>269</html>