GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1440, initial-scale=1.0">5<title>UI Render - Bathroom Cabinet</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width:1440px; height:3120px;10 position:relative; overflow:hidden;11 background:#000; color:#fff;12 }13 14 /* Generic */15 .row { display:flex; align-items:center; }16 .spacer { flex:1; }17 .muted { color:#9aa0a6; }18 .label { font-size:42px; }19 .small { font-size:36px; }20 .tiny { font-size:32px; }21 22 /* Status bar */23 .status-bar {24 height:100px; padding:0 48px;25 display:flex; align-items:center; justify-content:space-between;26 color:#e6e6e6; font-weight:600; font-size:44px;27 }28 .status-icons { display:flex; gap:28px; align-items:center; }29 .dot { width:12px; height:12px; background:#bbb; border-radius:50%; display:inline-block; }30 .icon { width:56px; height:56px; }31 .icon svg { width:100%; height:100%; fill:#e6e6e6; }32 33 /* Header */34 .header {35 padding:24px 48px 24px 48px;36 border-bottom:1px solid #1e1e1e;37 }38 .back-btn {39 width:88px; height:88px; border-radius:44px;40 display:flex; align-items:center; justify-content:center;41 background:#111; border:1px solid #222;42 margin-right:24px;43 }44 .title { font-size:72px; font-weight:700; }45 .actions { margin-left:auto; display:flex; gap:28px; }46 .circle {47 width:120px; height:120px; border-radius:60px;48 background:#111; border:1px solid #222;49 display:flex; align-items:center; justify-content:center;50 }51 .circle svg { width:70px; height:70px; fill:#e6e6e6; }52 53 /* Controls row */54 .controls { padding:18px 48px; display:flex; align-items:center; justify-content:space-between; }55 .link { color:#8ab4f8; font-size:48px; }56 .control-right { display:flex; gap:60px; }57 .control-right .link { display:flex; align-items:center; gap:16px; }58 59 /* Section: Shop by Color */60 .section-title { font-size:64px; font-weight:700; padding:40px 48px 24px 48px; }61 .chips { padding:0 48px; display:flex; gap:28px; flex-wrap:wrap; }62 .chip {63 padding:26px 46px; border-radius:60px; background:#1b1b1b; border:1px solid #2a2a2a;64 font-size:48px; color:#eaeaea;65 }66 67 /* Product list */68 .list { padding:24px 16px 0 16px; }69 .card {70 padding:24px 32px; border-bottom:1px solid #1e1e1e;71 }72 .card .row { align-items:flex-start; }73 .thumb {74 width:540px; height:540px; background:#E0E0E0; border:1px solid #BDBDBD;75 display:flex; align-items:center; justify-content:center; color:#575757; font-size:44px;76 border-radius:24px; margin:0 24px 0 16px;77 }78 .wish {79 position:absolute; right:24px; top:24px;80 width:120px; height:120px; border-radius:60px; background:#111; border:1px solid #222;81 display:flex; align-items:center; justify-content:center;82 }83 .wish svg { width:70px; height:70px; fill:#e6e6e6; }84 85 .details { flex:1; padding-right:24px; }86 .title2 { font-size:58px; font-weight:700; line-height:1.22; }87 .meta { margin-top:12px; font-size:46px; color:#bdbdbd; }88 .price { font-size:76px; font-weight:800; margin-top:24px; }89 .ship { font-size:46px; margin-top:10px; color:#cfcfcf; }90 .watchers { font-size:44px; margin-top:10px; color:#cfcfcf; }91 92 .sponsored { font-size:42px; color:#9aa0a6; padding:12px 48px; }93 94 /* Results count */95 .results { color:#e6e6e6; font-size:54px; text-align:center; padding:40px 0 220px 0; }96 97 /* Bottom nav */98 .bottom-nav {99 position:absolute; bottom:0; left:0; right:0;100 height:220px; background:#0d0d0d; border-top:1px solid #1e1e1e;101 display:flex; align-items:center; justify-content:space-around;102 }103 .nav-item { display:flex; flex-direction:column; align-items:center; gap:18px; color:#e6e6e6; }104 .nav-item .icon-wrap {105 width:120px; height:120px; border-radius:60px; background:#111; border:1px solid #222;106 display:flex; align-items:center; justify-content:center;107 }108 .nav-item svg { width:70px; height:70px; fill:#e6e6e6; }109 .nav-item .label { font-size:42px; color:#cfcfcf; }110 .nav-item.active .icon-wrap { background:#163056; border-color:#163056; }111 .nav-item.active .label { color:#8ab4f8; }112</style>113</head>114<body>115<div id="render-target">116 117 <!-- Status Bar -->118 <div class="status-bar">119 <div>2:55</div>120 <div class="status-icons">121 <!-- small icons placeholders -->122 <span class="icon">123 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 .001-16.001A8 8 0 0 1 12 20z"/></svg>124 </span>125 <span class="icon">126 <svg viewBox="0 0 24 24"><path d="M21 10h-3V7a6 6 0 1 0-12 0v3H3a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2zm-5 0H8V7a4 4 0 0 1 8 0v3z"/></svg>127 </span>128 <span class="icon">129 <svg viewBox="0 0 24 24"><path d="M17 3H7L3 8v13a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V8l-4-5zm3 6H4l3-4h10l3 4z"/></svg>130 </span>131 <span class="icon">132 <svg viewBox="0 0 24 24"><path d="M18 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm12 5c-2.21 0-4 1.79-4 4v2h8v-2c0-2.21-1.79-4-4-4zM6 13c-2.67 0-4 1.33-4 3v4h8v-4c0-1.67-1.33-3-4-3z"/></svg>133 </span>134 </div>135 </div>136 137 <!-- Header -->138 <div class="header row">139 <div class="back-btn">140 <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#e6e6e6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>141 </div>142 <div class="title">Bathroom Cabinet</div>143 <div class="actions">144 <div class="circle">145 <!-- search -->146 <svg viewBox="0 0 24 24"><path d="M21 21l-4.5-4.5M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16z" stroke="#e6e6e6" stroke-width="2" fill="none" stroke-linecap="round"/></svg>147 </div>148 <div class="circle">149 <!-- camera -->150 <svg viewBox="0 0 24 24"><path d="M21 7h-3l-2-3H8L6 7H3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM12 18a5 5 0 1 1 0-10 5 5 0 0 1 0 10z" fill="#e6e6e6"/></svg>151 </div>152 <div class="circle">153 <!-- cart -->154 <svg viewBox="0 0 24 24"><path d="M7 4h-2l-1 2v2h2l3 9h9l3-9H9L7 4zm3 14a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 .001 4.001A2 2 0 0 0 18 18z" fill="#e6e6e6"/></svg>155 </div>156 </div>157 </div>158 159 <!-- Controls -->160 <div class="controls">161 <div class="link row">162 <svg class="icon" viewBox="0 0 24 24"><path d="M12.1 21.2l-.1-.1-.1.1C7.2 17.4 3 14.1 3 10.1A5.1 5.1 0 0 1 8.1 5c1.7 0 3.4.8 4 2.5C12.7 5.8 14.4 5 16.1 5A5.1 5.1 0 0 1 21.2 10c0 4-4.2 7.3-9.1 11.2z" fill="#8ab4f8"/></svg>163 <span>Save this search</span>164 </div>165 <div class="control-right">166 <div class="link">Sort</div>167 <div class="link">Filter</div>168 </div>169 </div>170 171 <!-- Shop by Color -->172 <div class="section-title">Shop by Color</div>173 <div class="chips">174 <div class="chip">White</div>175 <div class="chip">Brown</div>176 <div class="chip">Black</div>177 <div class="chip">Gray</div>178 </div>179 180 <!-- Product List -->181 <div class="list">182 183 <!-- Card 1 -->184 <div class="card">185 <div class="row">186 <div style="position:relative;">187 <div class="thumb">[IMG: Wall Mount Bathroom Cabinet with Mirror]</div>188 <div class="wish">189 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.35-9.5-7.5A6 6 0 0 1 8.6 4.6c1.7 0 3.2.9 4.4 2.1 1.2-1.2 2.7-2.1 4.4-2.1a6 6 0 0 1 6.1 8.9C19 16.7 12 21 12 21z" fill="#e6e6e6"/></svg>190 </div>191 </div>192 <div class="details">193 <div class="title2">( Open Box ) Home Bathroom Wall Mount Cabinet Storage Toilet Mirror Door White</div>194 <div class="meta">Open Box • White</div>195 <div class="price">$22.99</div>196 <div class="ship">+$20.00 shipping</div>197 <div class="ship">from United States</div>198 <div class="watchers">16 watchers</div>199 </div>200 </div>201 </div>202 203 <div class="sponsored">Sponsored</div>204 205 <!-- Card 2 -->206 <div class="card">207 <div class="row">208 <div style="position:relative;">209 <div class="thumb">[IMG: Floor Standing Storage Cabinet Organizer]</div>210 <div class="wish">211 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.35-9.5-7.5A6 6 0 0 1 8.6 4.6c1.7 0 3.2.9 4.4 2.1 1.2-1.2 2.7-2.1 4.4-2.1a6 6 0 0 1 6.1 8.9C19 16.7 12 21 12 21z" fill="#e6e6e6"/></svg>212 </div>213 </div>214 <div class="details">215 <div class="title2">Bathroom Storage Cabinet Floor Standing Toilet Paper Organizer Shelves with Door</div>216 <div class="meta">Brand New</div>217 <div class="price">$29.99</div>218 <div class="ship"><span class="muted" style="text-decoration:line-through; margin-right:14px;">$69.99</span> • 57% off</div>219 <div class="ship">+$87.29 shipping</div>220 <div class="ship">from United States</div>221 <div class="ship" style="margin-top:18px; display:flex; align-items:center; gap:16px;">222 <span style="width:40px; height:40px; background:#8ab4f8; border-radius:20px; display:inline-block;"></span>223 <span>Direct From Nymbus</span>224 </div>225 </div>226 </div>227 </div>228 229 <div class="sponsored">Sponsored</div>230 231 </div>232 233 <div class="results">793 results</div>234 235 <!-- Bottom Navigation -->236 <div class="bottom-nav">237 <div class="nav-item">238 <div class="icon-wrap">239 <svg viewBox="0 0 24 24"><path d="M12 3l9 9-1.5 1.5L18 11v9H6v-9l-1.5 2.5L3 12l9-9z" fill="#e6e6e6"/></svg>240 </div>241 <div class="label">Home</div>242 </div>243 <div class="nav-item">244 <div class="icon-wrap">245 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0 .001-10.001A5 5 0 0 0 12 12zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5c0-3-4-5.5-9-5.5z" fill="#e6e6e6"/></svg>246 </div>247 <div class="label">My eBay</div>248 </div>249 <div class="nav-item active">250 <div class="icon-wrap">251 <svg viewBox="0 0 24 24"><path d="M21 21l-4.5-4.5M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16z" stroke="#e6e6e6" stroke-width="2" fill="none" stroke-linecap="round"/></svg>252 </div>253 <div class="label">Search</div>254 </div>255 <div class="nav-item">256 <div class="icon-wrap">257 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z" fill="#e6e6e6"/></svg>258 </div>259 <div class="label">Inbox</div>260 </div>261 <div class="nav-item">262 <div class="icon-wrap">263 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 21l-6-4-6 4 1.5-7.8L2 9h7z" fill="#e6e6e6"/></svg>264 </div>265 <div class="label">Selling</div>266 </div>267 </div>268 269</div>270</body>271</html>