GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>E-commerce UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 }14 15 /* Generic */16 .row { display: flex; }17 .space-between { justify-content: space-between; }18 .center { align-items: center; }19 .title { font-weight: 700; color: #222; letter-spacing: 0.5px; }20 .section { padding: 0 40px; }21 .pill {22 background: #f5f5f5; border: 1px solid #ddd; border-radius: 16px;23 }24 .btn {25 border: 1px solid #ddd; border-radius: 16px; background: #fff; height: 140px;26 display: flex; align-items: center; padding: 0 30px; font-weight: 600; color: #333;27 }28 .btn .icon { width: 72px; height: 72px; margin-right: 24px; }29 .icon svg { width: 100%; height: 100%; }30 .muted { color: #666; }31 32 /* Top bar */33 .topbar { height: 140px; padding: 30px 40px 0 40px; display: flex; align-items: center; gap: 24px; }34 .back-btn {35 width: 72px; height: 72px; border: none; background: #fff; border-radius: 16px;36 box-shadow: 0 0 0 1px #ddd; display: flex; justify-content: center; align-items: center;37 }38 .search-bar {39 flex: 1; height: 84px; border-radius: 42px; background: #f7f7f8; border: 1px solid #e1e1e1;40 display: flex; align-items: center; padding: 0 24px;41 }42 .search-field { flex: 1; color: #777; font-size: 34px; }43 .mic {44 width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 1px solid #ddd;45 display: flex; align-items: center; justify-content: center;46 }47 .avatars { display: flex; gap: 12px; margin-left: 10px; }48 .avatar {49 width: 64px; height: 64px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #ddd;50 background: linear-gradient(135deg,#8EE,#55B);51 }52 .avatar.alt { background: linear-gradient(135deg,#F9A,#C26); }53 54 /* Photo Search section */55 .photo-search { margin-top: 30px; }56 .photo-title { font-size: 36px; margin-bottom: 24px; }57 .photo-actions { display: flex; gap: 28px; }58 .photo-actions .btn { flex: 1; }59 60 /* Recent Searches */61 .recent { margin-top: 40px; }62 .recent-header { display: flex; justify-content: space-between; align-items: center; }63 .recent-header .title { font-size: 38px; }64 .edit-tag {65 color: #E75A73; font-weight: 700; font-size: 38px;66 }67 .recent-row { display: flex; gap: 36px; margin-top: 24px; }68 .recent-item { width: 220px; }69 .circle-img {70 width: 160px; height: 160px; border-radius: 50%; background: #E0E0E0; border: 1px solid #BDBDBD;71 display: flex; justify-content: center; align-items: center; color: #757575; margin: 0 auto;72 font-size: 26px; text-align: center; padding: 10px;73 }74 .recent-label { margin-top: 12px; text-align: center; color: #333; font-size: 30px; line-height: 1.2; }75 76 /* Most Searched Articles */77 .most { margin-top: 60px; }78 .most-header { display: flex; justify-content: space-between; align-items: center; }79 .most-title { font-size: 44px; font-weight: 800; }80 .view-all {81 background: #FF6B7D; color: #fff; font-weight: 800; border: none; border-radius: 16px;82 height: 100px; width: 240px; font-size: 34px;83 }84 .grid {85 display: grid;86 grid-template-columns: repeat(4, 1fr);87 gap: 28px;88 margin-top: 28px;89 }90 .card {91 background: #fff; border: 1px solid #e1e1e1; border-radius: 18px; overflow: hidden;92 }93 .card-img {94 height: 240px; background: #E0E0E0; border-bottom: 1px solid #D0D0D0;95 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; padding: 10px;96 }97 .card-caption {98 background: #111; color: #fff; font-weight: 800; font-size: 34px; text-align: center;99 padding: 22px 0;100 }101 102 /* Footer spacer to mimic bottom bar */103 .bottom-spacer { position: absolute; left: 0; bottom: 0; width: 100%; height: 24px; background: #111; border-radius: 12px; opacity: 0.85; }104</style>105</head>106<body>107<div id="render-target">108 109 <!-- Top bar -->110 <div class="topbar">111 <button class="back-btn" aria-label="Back">112 <svg viewBox="0 0 24 24">113 <path d="M15 18L9 12l6-6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>114 </svg>115 </button>116 117 <div class="search-bar">118 <div class="search-field">Search for brands & products</div>119 <div class="mic">120 <svg viewBox="0 0 24 24">121 <path d="M12 15a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm0 0v4m-5-7a5 5 0 0 0 10 0" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round"/>122 </svg>123 </div>124 </div>125 126 <div class="avatars">127 <div class="avatar"></div>128 <div class="avatar alt"></div>129 </div>130 </div>131 132 <!-- Photo Search -->133 <div class="section photo-search">134 <div class="title photo-title">PHOTO SEARCH</div>135 <div class="photo-actions">136 <div class="btn">137 <div class="icon">138 <svg viewBox="0 0 24 24">139 <path d="M4 7h4l2-2h4l2 2h4v12H4z" fill="none" stroke="#333" stroke-width="2"/>140 <circle cx="12" cy="13" r="4" fill="none" stroke="#333" stroke-width="2"/>141 </svg>142 </div>143 <div>Click a photo</div>144 </div>145 <div class="btn">146 <div class="icon">147 <svg viewBox="0 0 24 24">148 <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="#333" stroke-width="2"/>149 <path d="M7 13l3-3 4 5 3-3" fill="none" stroke="#333" stroke-width="2"/>150 </svg>151 </div>152 <div>Select a photo</div>153 </div>154 </div>155 </div>156 157 <!-- Recent Searches -->158 <div class="section recent">159 <div class="recent-header">160 <div class="title">RECENT SEARCHES</div>161 <div class="edit-tag">EDIT</div>162 </div>163 <div class="recent-row">164 <div class="recent-item">165 <div class="circle-img">[IMG: Laptop bag]</div>166 <div class="recent-label">Laptop standin...</div>167 </div>168 <div class="recent-item">169 <div class="circle-img">[IMG: White Golf Shoes]</div>170 <div class="recent-label">Golf shoes for<br>men</div>171 </div>172 <div class="recent-item">173 <div class="circle-img">[IMG: Golf Shoes]</div>174 <div class="recent-label">Golf shoes for<br>men</div>175 </div>176 </div>177 </div>178 179 <!-- Most Searched Articles -->180 <div class="section most">181 <div class="most-header">182 <div class="most-title">MOST SEARCHED ARTICLES</div>183 <button class="view-all">View All</button>184 </div>185 186 <div class="grid">187 <div class="card">188 <div class="card-img">[IMG: Lace briefs set]</div>189 <div class="card-caption">Briefs</div>190 </div>191 <div class="card">192 <div class="card-img">[IMG: Red Sports Shoes]</div>193 <div class="card-caption">Sports<br>Shoes</div>194 </div>195 <div class="card">196 <div class="card-img">[IMG: Dark Watch]</div>197 <div class="card-caption">Watches</div>198 </div>199 <div class="card">200 <div class="card-img">[IMG: Square Smartwatch]</div>201 <div class="card-caption">Smartwatches</div>202 </div>203 204 <div class="card">205 <div class="card-img">[IMG: Two people in Tees]</div>206 <div class="card-caption">T-Shirts</div>207 </div>208 <div class="card">209 <div class="card-img">[IMG: Denim jeans trio]</div>210 <div class="card-caption">Jeans</div>211 </div>212 <div class="card">213 <div class="card-img">[IMG: Green Flip-Flops]</div>214 <div class="card-caption">Flip-Flops</div>215 </div>216 <div class="card">217 <div class="card-img">[IMG: Black Headphones]</div>218 <div class="card-caption">Headphones</div>219 </div>220 221 <div class="card">222 <div class="card-img">[IMG: Platform Casual Shoes]</div>223 <div class="card-caption">Casual<br>Shoes</div>224 </div>225 <div class="card">226 <div class="card-img">[IMG: Red lace bra]</div>227 <div class="card-caption">Bras</div>228 </div>229 <div class="card">230 <div class="card-img">[IMG: Black & red Backpack]</div>231 <div class="card-caption">Backpacks</div>232 </div>233 <div class="card">234 <div class="card-img">[IMG: White Flats]</div>235 <div class="card-caption">Flats</div>236 </div>237 </div>238 </div>239 240 <div class="bottom-spacer"></div>241</div>242</body>243</html>