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 - Mock UI</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; color: #111;12 }13 .status-bar {14 height: 96px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between; color: #222; font-size: 34px;15 }16 .status-right { display: flex; align-items: center; gap: 20px; color: #555; }17 .app-header {18 padding: 12px 36px 8px 36px; display: flex; align-items: center; justify-content: space-between;19 }20 .brand { display: flex; align-items: center; gap: 18px; }21 .brand svg { width: 56px; height: 56px; }22 .brand-name { font-size: 48px; font-weight: 700; color: #e53935; letter-spacing: 0.2px; }23 .header-actions { display: flex; align-items: center; gap: 28px; }24 .icon-btn { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; color: #222; }25 .search-wrap { padding: 16px 36px 8px 36px; }26 .search-bar {27 border: 3px solid #d2d7ff; border-radius: 60px; padding: 22px 28px; display: flex; align-items: center; gap: 24px;28 }29 .search-input { flex: 1; color: #999; font-size: 40px; }30 .categories {31 padding: 10px 24px 20px 24px; display: flex; align-items: flex-start; gap: 26px;32 }33 .cat {34 width: 220px; display: flex; flex-direction: column; align-items: center; gap: 14px;35 }36 .cat .thumb {37 width: 200px; height: 200px; border-radius: 100px; background: #E0E0E0; border: 1px solid #BDBDBD;38 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; text-align: center; padding: 8px;39 }40 .cat label { font-size: 34px; color: #333; }41 .hero {42 margin: 10px 24px; border-radius: 18px; border: 8px solid #2eae95; overflow: hidden;43 }44 .hero .banner {45 height: 520px; background: #E0E0E0; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;46 display: flex; align-items: center; justify-content: center; color: #555; font-size: 44px; font-weight: 700;47 }48 .pager { display: flex; justify-content: center; gap: 16px; padding: 14px 0 8px; }49 .dot { width: 18px; height: 18px; border-radius: 50%; background: #cfd8dc; }50 .dot.active { background: #9e9e9e; }51 .section-title {52 padding: 14px 36px; font-size: 54px; font-weight: 800; color: #222;53 }54 .brand-row { display: flex; gap: 60px; padding: 8px 36px 6px; }55 .brand-chip {56 display: flex; align-items: center; gap: 14px; font-weight: 700; color: #2b5da8; font-size: 40px;57 }58 .brand-chip svg { width: 44px; height: 44px; }59 .cards {60 padding: 12px 36px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 26px;61 }62 .card {63 background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid #e0e0e0;64 }65 .card .img {66 width: 100%; height: 280px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD; color: #757575;67 display: flex; align-items: center; justify-content: center; font-size: 32px;68 }69 .card .meta { padding: 18px 20px 24px; }70 .card .title { font-size: 40px; color: #222; }71 .card .sub { margin-top: 6px; font-size: 34px; color: #666; }72 .subtle-divider { height: 20px; }73 .section-row {74 padding: 24px 36px; display: flex; align-items: center; justify-content: space-between;75 }76 .section-row .heading { font-size: 54px; font-weight: 800; }77 .section-row .view { font-size: 38px; color: #1e88e5; }78 .nav-bar {79 position: absolute; left: 0; right: 0; bottom: 0;80 height: 200px; border-top: 1px solid #e6e6e6; background: #ffffff; display: flex; justify-content: space-around; align-items: center;81 }82 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #444; font-size: 30px; }83 .nav-item .icon { width: 56px; height: 56px; }84 .nav-item.active { color: #e91e63; font-weight: 700; }85 .home-indicator {86 position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);87 width: 360px; height: 12px; background: #000; opacity: 0.12; border-radius: 8px;88 }89</style>90</head>91<body>92<div id="render-target">93 <!-- Status bar -->94 <div class="status-bar">95 <div>9:45</div>96 <div class="status-right">97 <span>🔆</span>98 <span>☁️</span>99 <span>100 <svg width="44" height="44" viewBox="0 0 24 24" fill="#666"><path d="M20 8v8a2 2 0 0 1-2 2H9l-5-5V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z"/></svg>101 </span>102 <span>100%</span>103 </div>104 </div>105 106 <!-- App header -->107 <div class="app-header">108 <div class="brand">109 <svg viewBox="0 0 24 24" fill="#e53935">110 <path d="M3 7l9-5 9 5v10l-9 5-9-5V7z"/>111 </svg>112 <div class="brand-name">snapdeal</div>113 </div>114 <div class="header-actions">115 <div class="icon-btn" title="Translate">A↔︎</div>116 <div class="icon-btn" title="Wishlist">117 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">118 <path d="M12 21s-7-4.4-9-8.5C1.2 9.4 3 6 6.5 6A5.5 5.5 0 0 1 12 9.1 5.5 5.5 0 0 1 17.5 6C21 6 22.8 9.4 21 12.5 19 16.6 12 21 12 21z"/>119 </svg>120 </div>121 </div>122 </div>123 124 <!-- Search -->125 <div class="search-wrap">126 <div class="search-bar">127 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#1e40ff" stroke-width="2">128 <circle cx="11" cy="11" r="7"></circle><path d="M21 21l-4.3-4.3"></path>129 </svg>130 <div class="search-input">Search for shoes, fashion, more</div>131 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#1e40ff" stroke-width="2">132 <path d="M12 3a4 4 0 0 0-4 4v5a4 4 0 0 0 8 0V7a4 4 0 0 0-4-4z"></path>133 <path d="M19 21l-5-3-5 3"></path>134 </svg>135 </div>136 </div>137 138 <!-- Categories row -->139 <div class="categories">140 <div class="cat">141 <div class="thumb">[IMG: Shop Now Badge]</div>142 <label>Shop Now</label>143 </div>144 <div class="cat">145 <div class="thumb">[IMG: Men Category]</div>146 <label>Men</label>147 </div>148 <div class="cat">149 <div class="thumb">[IMG: Women Category]</div>150 <label>Women</label>151 </div>152 <div class="cat">153 <div class="thumb">[IMG: Kids Category]</div>154 <label>Kids</label>155 </div>156 </div>157 158 <!-- Hero banner -->159 <div class="hero">160 <div class="banner">[IMG: Dry Fruits & Nuts Sale Banner]</div>161 </div>162 <div class="pager">163 <div class="dot"></div>164 <div class="dot active"></div>165 <div class="dot"></div>166 <div class="dot"></div>167 <div class="dot"></div>168 <div class="dot"></div>169 <div class="dot"></div>170 </div>171 172 <!-- Trusted Brands -->173 <div class="section-title">Trusted Brands!</div>174 <div class="brand-row">175 <div class="brand-chip">176 <svg viewBox="0 0 24 24" fill="#2b5da8"><path d="M4 10l8-6 8 6v8H4z"/></svg>177 <span>HOME TALES</span>178 </div>179 <div class="brand-chip">180 <svg viewBox="0 0 24 24" fill="#2b5da8"><path d="M4 10l8-6 8 6v8H4z"/></svg>181 <span>HOME TALES</span>182 </div>183 <div class="brand-chip">184 <svg viewBox="0 0 24 24" fill="#2b5da8"><path d="M4 10l8-6 8 6v8H4z"/></svg>185 <span>HOME TALES</span>186 </div>187 </div>188 189 <!-- Product cards -->190 <div class="cards">191 <div class="card">192 <div class="img">[IMG: Dine & Serve Set]</div>193 <div class="meta">194 <div class="title">Dine & Serve</div>195 <div class="sub">Starting ₹199</div>196 </div>197 </div>198 <div class="card">199 <div class="img">[IMG: Kitchen Tools Kit]</div>200 <div class="meta">201 <div class="title">Kitchen Tools</div>202 <div class="sub">Starting ₹99</div>203 </div>204 </div>205 </div>206 207 <div class="subtle-divider"></div>208 209 <!-- Deals of the Day -->210 <div class="section-row">211 <div class="heading">Deals of the Day!</div>212 <div class="view">View All ›</div>213 </div>214 215 <!-- Bottom navigation -->216 <div class="nav-bar">217 <div class="nav-item active">218 <svg class="icon" viewBox="0 0 24 24" fill="#e91e63"><path d="M12 3l9 8v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-9l9-8z"/></svg>219 <div>Home</div>220 </div>221 <div class="nav-item">222 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>223 <div>Search</div>224 </div>225 <div class="nav-item">226 <svg class="icon" viewBox="0 0 24 24" fill="#f4c20d"><circle cx="12" cy="12" r="10"/></svg>227 <div>Earn ₹125</div>228 </div>229 <div class="nav-item">230 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">231 <path d="M6 6h15l-1.5 9H8z"/><circle cx="9" cy="20" r="1.6"/><circle cx="18" cy="20" r="1.6"/>232 </svg>233 <div>My Cart</div>234 </div>235 <div class="nav-item">236 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">237 <circle cx="12" cy="8" r="4"/><path d="M4 20c2-4 6-6 8-6s6 2 8 6"/>238 </svg>239 <div>Profile</div>240 </div>241 </div>242 243 <div class="home-indicator"></div>244</div>245</body>246</html>