GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Workstation Standing Desk - UI Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#f5cfe1; /* soft pink page background */11 border-radius:24px;12 }13 14 /* Top status bar */15 .status-bar {16 height:72px;17 padding:0 24px;18 display:flex; align-items:center; justify-content:space-between;19 color:#3a3a3a; font-weight:600; font-size:28px;20 }21 .status-icons { display:flex; gap:18px; align-items:center; }22 .dot { width:10px; height:10px; border-radius:50%; background:#3a3a3a; display:inline-block; }23 24 /* Header search row */25 .header {26 padding:16px 24px 12px;27 display:flex; align-items:center; gap:18px;28 }29 .circle-btn {30 width:56px; height:56px; border-radius:28px;31 background:#ffffff; display:flex; align-items:center; justify-content:center;32 box-shadow:0 2px 4px rgba(0,0,0,0.12);33 }34 35 .search-bar {36 flex:1;37 height:72px;38 background:#ffffff;39 border-radius:36px;40 display:flex; align-items:center;41 box-shadow:0 2px 6px rgba(0,0,0,0.12);42 padding:0 18px;43 }44 .search-input {45 flex:1; font-size:30px; color:#222; border:none; outline:none; background:transparent;46 }47 .search-actions { display:flex; align-items:center; gap:18px; }48 .icon-btn { width:52px; height:52px; border-radius:26px; background:#f1f1f1; display:flex; align-items:center; justify-content:center; }49 .cart-area { position:relative; }50 .badge {51 position:absolute; right:-4px; top:-4px;52 background:#d43a39; color:#fff; font-size:22px; font-weight:700;53 width:36px; height:36px; border-radius:18px;54 display:flex; align-items:center; justify-content:center;55 border:2px solid #fff;56 }57 58 /* on-page info line */59 .info-line {60 color:#1a3fb3; font-size:30px; font-weight:700;61 padding:8px 24px 4px;62 }63 .info-line span { margin-right:18px; }64 .dot-sep { color:#6d83f2; margin:0 10px; }65 66 /* chips */67 .chips-row { display:flex; gap:18px; padding:16px 24px; flex-wrap:wrap; }68 .chip {69 background:#ffffff; border:1px solid #dcdcdc; border-radius:28px;70 height:66px; padding:0 26px;71 display:flex; align-items:center; gap:14px; font-size:28px; color:#333;72 box-shadow:0 1px 2px rgba(0,0,0,0.06);73 }74 .chip .caret { width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:10px solid #666; }75 .chip.green { background:#e8f7ea; color:#1c7f3b; }76 .chip .mini-icon {77 width:34px; height:34px; border-radius:50%; background:#4CAF50; color:#fff;78 display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700;79 }80 .chip .rupee { background:#2e8d5e; }81 .chip .adjust { background:#567cf6; }82 83 /* product grid */84 .grid { display:grid; grid-template-columns: 1fr 1fr; gap:24px; padding:12px 24px 24px; }85 .card {86 background:#ffffff; border-radius:18px; overflow:hidden; border:1px solid #e5e5e5;87 box-shadow:0 2px 6px rgba(0,0,0,0.08);88 }89 .img {90 height:520px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;91 display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px;92 position:relative;93 }94 .heart {95 position:absolute; right:18px; top:18px; width:56px; height:56px; border-radius:28px;96 background:#ffffff; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,0.12);97 }98 99 .card-body { padding:16px 18px 20px; }100 .subtle { color:#7c7c7c; font-size:26px; }101 .title { font-size:30px; color:#222; margin-top:4px; font-weight:700; }102 .price-row { margin:6px 0; display:flex; align-items:baseline; gap:12px; }103 .old-price { color:#777; text-decoration:line-through; font-size:28px; }104 .new-price { color:#111; font-size:34px; font-weight:800; }105 .discount { color:#138d3c; font-size:30px; font-weight:800; }106 .deal { color:#5b2bd8; font-size:30px; font-weight:800; margin-top:6px; }107 .rating { color:#2b2b2b; font-size:28px; margin-top:6px; }108 .stars { color:#1c7f3b; font-size:30px; letter-spacing:2px; }109 .delivery { color:#2f2f2f; font-size:28px; margin-top:8px; }110 111 /* Trending ribbon */112 .ribbon {113 position:absolute; left:24px; top:-18px;114 background:#26c281; color:#fff; font-size:26px; font-weight:800;115 padding:10px 16px; border-radius:14px;116 box-shadow:0 2px 4px rgba(0,0,0,0.18);117 }118 119 /* bottom home indicator */120 .home-indicator {121 position:absolute; bottom:24px; left:50%; transform:translateX(-50%);122 width:420px; height:12px; background:#000; border-radius:6px; opacity:0.8;123 }124 125 /* small helper */126 svg { width:28px; height:28px; }127</style>128</head>129<body>130<div id="render-target">131 132 <!-- Status bar -->133 <div class="status-bar">134 <div>7:30</div>135 <div class="status-icons">136 <div class="dot"></div>137 <div class="dot"></div>138 <div class="dot"></div>139 <div class="dot"></div>140 </div>141 </div>142 143 <!-- Header with back and search -->144 <div class="header">145 <div class="circle-btn">146 <svg viewBox="0 0 24 24">147 <path d="M15 6 L9 12 L15 18" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>148 </svg>149 </div>150 151 <div class="search-bar">152 <svg viewBox="0 0 24 24" style="margin-right:10px;">153 <circle cx="10" cy="10" r="6" stroke="#666" stroke-width="2" fill="none"/>154 <line x1="15" y1="15" x2="21" y2="21" stroke="#666" stroke-width="2"/>155 </svg>156 <input class="search-input" value="workstation standing desk" />157 <div class="search-actions">158 <div class="icon-btn">159 <svg viewBox="0 0 24 24">160 <rect x="10" y="4" width="4" height="10" rx="2" fill="#666"/>161 <rect x="8" y="14" width="8" height="4" rx="2" fill="#666"/>162 </svg>163 </div>164 <div class="icon-btn">165 <svg viewBox="0 0 24 24">166 <rect x="4" y="6" width="16" height="12" rx="2" stroke="#666" stroke-width="2" fill="none"/>167 <circle cx="12" cy="12" r="3" fill="#666"/>168 </svg>169 </div>170 <div class="icon-btn cart-area">171 <svg viewBox="0 0 24 24">172 <path d="M3 6h3l2 10h10l2-7H7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>173 <circle cx="10" cy="20" r="2" fill="#333"/>174 <circle cx="18" cy="20" r="2" fill="#333"/>175 </svg>176 <div class="badge">1</div>177 </div>178 </div>179 </div>180 </div>181 182 <!-- Info line -->183 <div class="info-line">184 <span>Low Prices</span><span class="dot-sep">•</span>185 <span>Festive Offers on Top Brands</span><span class="dot-sep">•</span>186 <span>Best Discounts</span>187 </div>188 189 <!-- Filter chips row -->190 <div class="chips-row">191 <div class="chip">192 Sort By193 <div class="caret"></div>194 </div>195 <div class="chip">196 <svg viewBox="0 0 24 24">197 <path d="M4 6h16M7 12h10M10 18h4" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>198 </svg>199 Filter200 </div>201 <div class="chip">202 Brand203 <div class="caret"></div>204 </div>205 <div class="chip">206 Price207 <div class="caret"></div>208 </div>209 <div class="chip">210 Primary211 <div class="caret"></div>212 </div>213 </div>214 215 <!-- Feature chips row -->216 <div class="chips-row" style="padding-top:6px;">217 <div class="chip green">218 <div class="mini-icon">%</div>219 Top Sale Deals220 </div>221 <div class="chip green" style="color:#166b35;">222 <div class="mini-icon rupee">₹</div>223 Rs. 500 and below224 </div>225 <div class="chip" style="background:#e9f0ff; color:#2c4ed8;">226 <div class="mini-icon adjust">↕</div>227 Adjustable Height228 </div>229 </div>230 231 <!-- Product Cards Grid -->232 <div class="grid">233 234 <!-- Card 1 -->235 <div class="card">236 <div class="img">237 [IMG: Wheeled Adjustable Overbed/Workstation Table]238 <div class="heart">239 <svg viewBox="0 0 24 24">240 <path d="M12 21s-7-4.35-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.65-7 9-7 9z" fill="none" stroke="#777" stroke-width="2"/>241 </svg>242 </div>243 </div>244 <div class="card-body">245 <div class="subtle">Sponsored</div>246 <div class="title">Portronics My Buddy D Wood ...</div>247 <div class="price-row">248 <div class="old-price">₹2,999</div>249 <div class="new-price">₹1,399</div>250 <div class="discount">53% off</div>251 </div>252 <div class="deal">Big Saving Deal</div>253 <div class="rating"><span class="stars">★★★★☆</span></div>254 <div class="delivery">Free delivery</div>255 </div>256 </div>257 258 <!-- Card 2 -->259 <div class="card">260 <div class="img">261 [IMG: Laptop Bed Table with cup & mouse slots]262 <div class="heart">263 <svg viewBox="0 0 24 24">264 <path d="M12 21s-7-4.35-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.65-7 9-7 9z" fill="none" stroke="#777" stroke-width="2"/>265 </svg>266 </div>267 </div>268 <div class="card-body">269 <div class="subtle">Sponsored</div>270 <div class="title">StarAndDaisy Multipurpose...</div>271 <div class="price-row">272 <div class="old-price">₹1,899</div>273 <div class="new-price">₹1,101</div>274 <div class="discount">42% off</div>275 </div>276 <div class="deal">Big Saving Deal</div>277 <div class="rating"><span class="stars">★★★★☆</span></div>278 <div class="delivery">Free delivery</div>279 </div>280 </div>281 282 <!-- Card 3 -->283 <div class="card" style="position:relative;">284 <div class="ribbon">TRENDING</div>285 <div class="img">286 [IMG: Portable Wood Laptop Bed Desk - Dark Grey]287 <div class="heart">288 <svg viewBox="0 0 24 24">289 <path d="M12 21s-7-4.35-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.65-7 9-7 9z" fill="none" stroke="#777" stroke-width="2"/>290 </svg>291 </div>292 </div>293 <div class="card-body">294 <div class="title">lectose Wood Portable Desk ...</div>295 <div class="price-row">296 <div class="old-price">₹2,017</div>297 <div class="new-price">₹408</div>298 <div class="discount">79% off</div>299 </div>300 <div class="subtle">Only few left</div>301 </div>302 </div>303 304 <!-- Card 4 -->305 <div class="card">306 <div class="img">307 [IMG: Black Portable Bed Desk with pattern]308 <div class="heart">309 <svg viewBox="0 0 24 24">310 <path d="M12 21s-7-4.35-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.65-7 9-7 9z" fill="none" stroke="#777" stroke-width="2"/>311 </svg>312 </div>313 </div>314 <div class="card-body">315 <div class="title">Quickmart Wood Portable ...</div>316 <div class="price-row">317 <div class="old-price">₹1,299</div>318 <div class="new-price">₹421</div>319 <div class="discount">67% off</div>320 </div>321 <div class="subtle">Only few left</div>322 </div>323 </div>324 325 </div>326 327 <div class="home-indicator"></div>328</div>329</body>330</html>