GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>UI Render</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 border-radius: 32px;15 box-shadow: 0 10px 30px rgba(0,0,0,0.08);16 }17 18 /* Header / status */19 .status-bar {20 position: absolute;21 top: 0; left: 0; right: 0;22 height: 84px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 padding: 0 36px;27 color: #2b2b2b;28 font-size: 34px;29 opacity: 0.9;30 }31 .header {32 position: absolute;33 top: 84px; left: 0; right: 0;34 height: 300px;35 background: linear-gradient(180deg, #9BE5D8 0%, #8DDCD3 100%);36 }37 .back-btn {38 position: absolute;39 top: 36px; left: 24px;40 width: 72px; height: 72px;41 display: flex; align-items: center; justify-content: center;42 }43 .search-bar {44 position: absolute;45 left: 120px; right: 36px; top: 28px;46 height: 120px;47 background: #fff;48 border-radius: 24px;49 box-shadow: 0 6px 18px rgba(0,0,0,0.15);50 display: flex; align-items: center;51 padding: 0 28px;52 }53 .search-icon { width: 48px; height: 48px; margin-right: 18px; }54 .search-text {55 font-size: 40px; color: #404040;56 flex: 1;57 }58 .scan-btn {59 width: 72px; height: 72px; border-radius: 16px;60 display: flex; align-items: center; justify-content: center;61 color: #4f4f4f;62 background: #f3f3f3;63 }64 65 /* Tabs */66 .tabs {67 position: absolute;68 left: 0; right: 0;69 top: 300px;70 height: 120px;71 background: #F6ECDC;72 display: flex; align-items: flex-end;73 padding: 0 36px;74 }75 .tab {76 font-size: 40px; color: #ba7a28; margin-right: 54px; position: relative; padding-bottom: 24px;77 }78 .tab.active::after {79 content: "";80 position: absolute; left: 0; bottom: 12px; width: 140px; height: 8px; background: #F2992F; border-radius: 4px;81 }82 .tab.inactive { color: rgba(0,0,0,0.45); }83 84 /* Content */85 .content {86 position: absolute;87 top: 420px; left: 0; right: 0;88 bottom: 200px;89 padding: 36px;90 overflow: hidden;91 }92 .line { height: 1px; background: #e4e4e4; margin: 24px 0; }93 94 .link { color: #0F8D8F; font-size: 38px; text-decoration: none; }95 .para { font-size: 38px; color: #333; line-height: 1.35; }96 .para b { font-weight: 700; }97 .muted { color: #6f6f6f; }98 99 .benefits {100 display: flex; justify-content: space-between; align-items: flex-start;101 margin-top: 28px;102 }103 .benefit {104 width: 20%;105 display: flex; flex-direction: column; align-items: center;106 }107 .benefit-icon {108 width: 160px; height: 160px; border-radius: 80px;109 background: #f1f1f1; border: 1px solid #d0d0d0;110 display: flex; align-items: center; justify-content: center;111 margin-bottom: 18px;112 }113 .benefit label {114 font-size: 34px; color: #0F8D8F; text-align: center;115 }116 117 .section-header {118 font-size: 46px; font-weight: 700; color: #222;119 padding: 32px 0;120 display: flex; align-items: center; justify-content: space-between;121 }122 .chev {123 width: 48px; height: 48px;124 }125 126 .product-details h3 {127 font-size: 48px; margin: 24px 0 24px; color: #222; font-weight: 800;128 }129 .detail-row { margin-bottom: 24px; }130 .detail-row .label { font-size: 36px; color: #333; font-weight: 700; }131 .detail-row .value { font-size: 36px; color: #6d6d6d; }132 .see-more { color: #0F8D8F; font-size: 38px; display: inline-flex; align-items: center; }133 .see-more svg { margin-left: 12px; }134 135 /* Bottom nav */136 .bottom-nav {137 position: absolute; left: 0; right: 0; bottom: 60px;138 height: 180px; background: #ffffff; border-top: 1px solid #e5e5e5;139 display: flex; align-items: center; justify-content: space-around;140 }141 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #737373; }142 .nav-item.active { color: #0F8D8F; }143 .nav-item svg { width: 64px; height: 64px; margin-bottom: 10px; }144 .nav-item span { font-size: 32px; }145 .badge {146 position: absolute; top: -6px; right: -10px;147 background: #f25e3c; color: #fff; font-size: 26px; padding: 4px 12px; border-radius: 24px;148 }149 150 /* Gesture bar */151 .gesture {152 position: absolute; left: 50%; transform: translateX(-50%);153 bottom: 18px; width: 300px; height: 16px; background: #bdbdbd; border-radius: 12px; opacity: 0.9;154 }155</style>156</head>157<body>158<div id="render-target">159 160 <div class="status-bar">161 <div>10:39</div>162 <div>⬤ ⬤ ⬤ 100%</div>163 </div>164 165 <div class="header">166 <div class="back-btn">167 <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#303030" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">168 <path d="M15 6l-6 6 6 6"></path>169 </svg>170 </div>171 <div class="search-bar">172 <svg class="search-icon" viewBox="0 0 24 24">173 <circle cx="11" cy="11" r="7" stroke="#666" stroke-width="2" fill="none"></circle>174 <path d="M20 20l-4.5-4.5" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"></path>175 </svg>176 <div class="search-text">sports shoes for men</div>177 <div class="scan-btn">178 <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#555" stroke-width="2">179 <rect x="5" y="5" width="14" height="14" rx="2"></rect>180 <path d="M2 8V6a4 4 0 014-4h2M22 8V6a4 4 0 00-4-4h-2M2 16v2a4 4 0 004 4h2M22 16v2a4 4 0 01-4 4h-2"></path>181 </svg>182 </div>183 </div>184 </div>185 186 <div class="tabs">187 <div class="tab active">Details</div>188 <div class="tab inactive">Reviews</div>189 <div style="margin-left:auto; padding-bottom: 24px;">190 <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#333" stroke-width="2">191 <path d="M6 15l6-6 6 6"></path>192 </svg>193 </div>194 </div>195 196 <div class="content">197 <div class="para link">Secure transaction</div>198 <div class="para">Sold by <span class="link">Cocoblu Retail</span> and <span class="link">Fulfilled by Amazon</span>.</div>199 <div class="para"><b>Shows what is inside.</b> Item often ships in manufacturer container to reduce packaging. If this is a gift, consider shipping to a different address.</div>200 201 <div class="para link" style="margin-top:24px;">Add to Wish List</div>202 203 <div class="line"></div>204 205 <div class="benefits">206 <div class="benefit">207 <div class="benefit-icon">208 <svg viewBox="0 0 24 24" width="110" height="110" fill="none" stroke="#888" stroke-width="2">209 <circle cx="10" cy="12" r="6"></circle>210 <path d="M16 12h6"></path>211 </svg>212 </div>213 <label>Free Delivery</label>214 </div>215 <div class="benefit">216 <div class="benefit-icon">217 <svg viewBox="0 0 24 24" width="110" height="110" fill="none" stroke="#888" stroke-width="2">218 <rect x="3" y="6" width="14" height="12" rx="2"></rect>219 <path d="M17 10h4M17 14h4"></path>220 </svg>221 </div>222 <label>Pay on Delivery</label>223 </div>224 <div class="benefit">225 <div class="benefit-icon">226 <svg viewBox="0 0 24 24" width="110" height="110" fill="none" stroke="#888" stroke-width="2">227 <rect x="5" y="4" width="14" height="16" rx="2"></rect>228 <path d="M9 8h6M9 12h6M9 16h6"></path>229 </svg>230 </div>231 <label>10 days Return & Exchange</label>232 </div>233 <div class="benefit">234 <div class="benefit-icon">235 <svg viewBox="0 0 24 24" width="110" height="110" fill="none" stroke="#888" stroke-width="2">236 <path d="M3 12l3-6h12l3 6-3 6H6z"></path>237 <circle cx="9" cy="12" r="1"></circle>238 <circle cx="15" cy="12" r="1"></circle>239 </svg>240 </div>241 <label>Amazon Delivered</label>242 </div>243 <div class="benefit">244 <div class="benefit-icon">245 <svg viewBox="0 0 24 24" width="110" height="110" fill="none" stroke="#888" stroke-width="2">246 <path d="M12 2l7 6-7 6-7-6 7-6z"></path>247 <path d="M5 20h14"></path>248 </svg>249 </div>250 <label>Top Brand</label>251 </div>252 </div>253 254 <div class="line" style="margin-top: 36px;"></div>255 256 <div class="section-header">257 <div>Size guide</div>258 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">259 <path d="M6 9l6 6 6-6"></path>260 </svg>261 </div>262 263 <div class="line"></div>264 265 <div class="section-header" style="padding-top: 0;">266 <div>Product details</div>267 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">268 <path d="M6 9l6 6 6-6"></path>269 </svg>270 </div>271 272 <div class="product-details">273 <div class="detail-row">274 <div class="label">Material Type</div>275 <div class="value">Mesh</div>276 </div>277 <div class="detail-row">278 <div class="label">Closure Type</div>279 <div class="value">Lace-Up</div>280 </div>281 <div class="detail-row">282 <div class="label">Heel Type</div>283 <div class="value">Flat</div>284 </div>285 <div class="detail-row">286 <div class="label">Water Resistance Level</div>287 <div class="value">Not Water Resistant</div>288 </div>289 <div class="detail-row">290 <div class="label">Sole Material</div>291 <div class="value">Rubber</div>292 </div>293 294 <div class="see-more">See more295 <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#0F8D8F" stroke-width="2">296 <path d="M6 9l6 6 6-6"></path>297 </svg>298 </div>299 </div>300 </div>301 302 <div class="bottom-nav">303 <div class="nav-item active">304 <div style="position: relative;">305 <svg viewBox="0 0 24 24" fill="none" stroke="#0F8D8F" stroke-width="2">306 <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>307 <path d="M9 22V12h6v10"></path>308 </svg>309 </div>310 <span>Home</span>311 </div>312 <div class="nav-item">313 <svg viewBox="0 0 24 24" fill="none" stroke="#737373" stroke-width="2">314 <circle cx="12" cy="8" r="4"></circle>315 <path d="M4 22c0-4 4-7 8-7s8 3 8 7"></path>316 </svg>317 <span>You</span>318 </div>319 <div class="nav-item">320 <svg viewBox="0 0 24 24" fill="none" stroke="#737373" stroke-width="2">321 <rect x="3" y="6" width="18" height="12" rx="2"></rect>322 <path d="M7 10h10M7 14h10"></path>323 </svg>324 <span>More</span>325 </div>326 <div class="nav-item" style="position: relative;">327 <svg viewBox="0 0 24 24" fill="none" stroke="#737373" stroke-width="2">328 <path d="M6 6h15l-2 10H7L6 6z"></path>329 <circle cx="9" cy="20" r="2"></circle>330 <circle cx="17" cy="20" r="2"></circle>331 </svg>332 <span>Cart</span>333 <div class="badge">1</div>334 </div>335 <div class="nav-item">336 <svg viewBox="0 0 24 24" fill="none" stroke="#737373" stroke-width="2">337 <path d="M3 6h18M3 12h18M3 18h18"></path>338 </svg>339 <span>Menu</span>340 </div>341 </div>342 343 <div class="gesture"></div>344</div>345</body>346</html>