GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>UI Recreation</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: linear-gradient(180deg, #9de4db 0%, #c2efe8 30%, #ffffff 60%);14 }15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 20px;19 left: 30px;20 right: 30px;21 height: 60px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #1a1a1a;26 font-size: 38px;27 }28 .status-icons { display: flex; gap: 24px; align-items: center; }29 .icon { width: 44px; height: 44px; }30 /* Header / search */31 .header {32 position: absolute;33 top: 90px;34 left: 0;35 right: 0;36 height: 300px;37 padding: 40px 30px 0 30px;38 }39 .back-row {40 position: absolute;41 top: 16px;42 left: 30px;43 width: 80px;44 height: 80px;45 display: flex;46 align-items: center;47 justify-content: center;48 }49 .search-bar {50 position: relative;51 margin: 40px 30px 0 120px;52 height: 120px;53 border-radius: 28px;54 background: #ffffff;55 box-shadow: 0 4px 12px rgba(0,0,0,0.15);56 display: flex;57 align-items: center;58 padding: 0 30px;59 }60 .search-icon { width: 60px; height: 60px; margin-right: 22px; }61 .search-text {62 font-size: 48px;63 color: #2b2b2b;64 flex: 1;65 }66 .scan-btn {67 width: 88px;68 height: 88px;69 border-radius: 22px;70 background: #f4f4f4;71 display: flex;72 align-items: center;73 justify-content: center;74 }75 /* Tabs */76 .tabs {77 position: absolute;78 top: 360px;79 left: 0;80 right: 0;81 height: 120px;82 background: #e6faf6;83 display: flex;84 align-items: stretch;85 border-top: 1px solid #d6e9e5;86 border-bottom: 1px solid #d6e9e5;87 }88 .tab {89 flex: 1;90 display: flex;91 align-items: center;92 justify-content: center;93 font-size: 44px;94 color: #5d6a70;95 position: relative;96 }97 .tab.active { color: #ff6f1a; font-weight: bold; }98 .tab-divider { width: 1px; background: #d6e9e5; }99 .tab-right {100 width: 120px;101 display: flex;102 align-items: center;103 justify-content: center;104 background: #eef8f5;105 border-left: 1px solid #d6e9e5;106 }107 /* Content area */108 .content {109 position: absolute;110 top: 480px;111 left: 0;112 right: 0;113 bottom: 190px;114 background: #ffffff;115 overflow: hidden;116 }117 .scroll {118 position: absolute;119 top: 0;120 left: 0;121 right: 0;122 bottom: 0;123 overflow-y: auto;124 padding: 30px;125 }126 .item-row {127 display: flex;128 justify-content: space-between;129 align-items: baseline;130 font-size: 48px;131 color: #222;132 margin-bottom: 18px;133 }134 .item-row .label { font-weight: bold; }135 .bullets { margin: 20px 0 20px 20px; font-size: 42px; color: #333; }136 .divider { height: 2px; background: #e5e5e5; margin: 30px 0; }137 .section-header {138 font-size: 54px;139 font-weight: bold;140 color: #222;141 display: flex;142 align-items: center;143 justify-content: space-between;144 padding: 20px 0;145 }146 .chev { width: 40px; height: 40px; }147 .info-line {148 display: flex;149 align-items: center;150 gap: 22px;151 font-size: 54px;152 font-weight: bold;153 color: #222;154 }155 .info-pill {156 width: 54px;157 height: 54px;158 background: #33b7b7;159 color: #fff;160 border-radius: 50%;161 font-size: 40px;162 display: flex;163 align-items: center;164 justify-content: center;165 }166 .rating-row {167 display: flex;168 align-items: center;169 justify-content: space-between;170 padding: 26px 0;171 border-top: 1px solid #e6e6e6;172 }173 .rating-left { display: flex; align-items: center; gap: 24px; }174 .rating-left .r-icon { width: 60px; height: 60px; }175 .rating-left .label { font-size: 46px; color: #333; }176 .rating-right {177 display: flex;178 align-items: center;179 gap: 14px;180 font-size: 44px;181 color: #17a85b;182 font-weight: bold;183 }184 /* Recommendations */185 .rec-header { font-size: 68px; font-weight: bold; color: #111; margin-top: 30px; }186 .sponsored { color: #888; font-size: 38px; margin-top: 6px; }187 .rec-row {188 display: flex;189 gap: 28px;190 margin-top: 24px;191 padding-bottom: 140px;192 }193 .card {194 width: 330px;195 /* height flexible with caption */196 }197 .img-ph {198 width: 330px;199 height: 330px;200 background: #E0E0E0;201 border: 1px solid #BDBDBD;202 display: flex;203 align-items: center;204 justify-content: center;205 color: #757575;206 font-size: 38px;207 text-align: center;208 border-radius: 8px;209 }210 .card-title {211 margin-top: 18px;212 font-size: 44px;213 color: #0b6f7c;214 line-height: 1.18;215 }216 /* Bottom nav */217 .bottom-nav {218 position: absolute;219 left: 0; right: 0; bottom: 90px;220 height: 140px;221 background: #ffffff;222 border-top: 1px solid #e6e6e6;223 display: flex;224 align-items: center;225 justify-content: space-around;226 padding: 0 20px;227 }228 .nav-item { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; position: relative; }229 .nav-icon { width: 72px; height: 72px; }230 .home-underline {231 position: absolute;232 bottom: 0; left: 30px; right: 30px; height: 8px; background: #0aa3a3; border-radius: 4px;233 }234 .badge {235 position: absolute;236 top: 6px; right: 6px;237 background: #0aa3a3;238 color: #fff;239 font-size: 34px;240 padding: 2px 10px;241 border-radius: 22px;242 }243 /* Gesture bar */244 .gesture {245 position: absolute;246 bottom: 24px;247 left: 50%;248 transform: translateX(-50%);249 width: 360px;250 height: 14px;251 background: #bfbfbf;252 border-radius: 8px;253 }254</style>255</head>256<body>257<div id="render-target">258 <!-- Status bar -->259 <div class="status-bar">260 <div>3:44</div>261 <div class="status-icons">262 <!-- Wi-Fi -->263 <svg class="icon" viewBox="0 0 24 24">264 <path d="M2 8c5-4 15-4 20 0" stroke="#333" stroke-width="2" fill="none" />265 <path d="M5 11c4-3 10-3 14 0" stroke="#333" stroke-width="2" fill="none" />266 <path d="M8 14c3-2 5-2 8 0" stroke="#333" stroke-width="2" fill="none" />267 <circle cx="12" cy="18" r="2" fill="#333"/>268 </svg>269 <!-- Battery -->270 <svg class="icon" viewBox="0 0 24 24">271 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#333" stroke-width="2" fill="none"/>272 <rect x="21" y="9" width="2" height="6" fill="#333"/>273 <rect x="4" y="8" width="14" height="8" fill="#333"/>274 </svg>275 </div>276 </div>277 278 <!-- Header and search -->279 <div class="header">280 <div class="back-row">281 <svg class="icon" viewBox="0 0 24 24">282 <path d="M15 5L7 12l8 7" stroke="#222" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>283 </svg>284 </div>285 286 <div class="search-bar">287 <svg class="search-icon" viewBox="0 0 24 24">288 <circle cx="10" cy="10" r="7" stroke="#333" stroke-width="2" fill="none"/>289 <path d="M15 15l6 6" stroke="#333" stroke-width="2" fill="none" />290 </svg>291 <div class="search-text">chair</div>292 <div class="scan-btn">293 <svg class="icon" viewBox="0 0 24 24">294 <rect x="4" y="4" width="16" height="16" stroke="#666" stroke-width="2" fill="none"/>295 <path d="M4 8V4h4M20 8V4h-4M4 16v4h4M20 16v4h-4" stroke="#666" stroke-width="2" fill="none"/>296 </svg>297 </div>298 </div>299 </div>300 301 <!-- Tabs -->302 <div class="tabs">303 <div class="tab active">Details</div>304 <div class="tab-divider"></div>305 <div class="tab">Compare</div>306 <div class="tab-divider"></div>307 <div class="tab">Reviews</div>308 <div class="tab-right">309 <svg class="icon" viewBox="0 0 24 24">310 <path d="M12 7l6 6H6z" fill="#333"/>311 </svg>312 </div>313 </div>314 315 <!-- Content -->316 <div class="content">317 <div class="scroll">318 <div class="item-row">319 <div class="label">Item Weight</div>320 <div>250 Grams</div>321 </div>322 <ul class="bullets">323 <li>Is Assembly Required: True; Size Name: Standard; Seat Height: 27.0; Back Style: Arrow Back</li>324 <li>Seat Height: 33.0; Furniture Finish: Bend; Style Name: Italianate</li>325 </ul>326 327 <div class="divider"></div>328 329 <div class="section-header">330 <div>Product Specifications</div>331 <svg class="chev" viewBox="0 0 24 24">332 <path d="M6 9l6 6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>333 </svg>334 </div>335 336 <div class="divider"></div>337 338 <div class="section-header">339 <div>Images and Videos</div>340 <svg class="chev" viewBox="0 0 24 24">341 <path d="M6 9l6 6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>342 </svg>343 </div>344 345 <div class="divider"></div>346 347 <div class="info-line">348 <div>What are customers saying?</div>349 <div class="info-pill">i</div>350 </div>351 352 <div class="rating-row">353 <div class="rating-left">354 <svg class="r-icon" viewBox="0 0 24 24">355 <rect x="4" y="8" width="16" height="10" rx="3" fill="#f0f0f0" stroke="#ff8a00" stroke-width="2"/>356 <path d="M7 8c1-3 9-3 10 0" stroke="#ff8a00" stroke-width="2" fill="none"/>357 </svg>358 <div class="label">Comfort</div>359 </div>360 <div class="rating-right">361 <div>80% positive</div>362 <svg class="chev" viewBox="0 0 24 24">363 <path d="M6 9l6 6 6-6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>364 </svg>365 </div>366 </div>367 368 <div class="rating-row">369 <div class="rating-left">370 <svg class="r-icon" viewBox="0 0 24 24">371 <path d="M7 18l4-6 4 2 2-2-5-5-5 5z" fill="#ff8a00"/>372 <rect x="5" y="18" width="14" height="2" fill="#ff8a00"/>373 </svg>374 <div class="label">Material and Build Quality</div>375 </div>376 <div class="rating-right" style="color:#3c8aee;">377 <div style="color:#3c8aee; font-weight:bold;">63% positive</div>378 <svg class="chev" viewBox="0 0 24 24">379 <path d="M6 9l6 6 6-6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>380 </svg>381 </div>382 </div>383 384 <div class="rating-row">385 <div class="rating-left">386 <svg class="r-icon" viewBox="0 0 24 24">387 <circle cx="12" cy="8" r="4" fill="#cfcfcf" stroke="#777"/>388 <path d="M4 20c2-4 14-4 16 0" stroke="#ff8a00" stroke-width="2" fill="none"/>389 </svg>390 <div class="label">Assembly Experience</div>391 </div>392 <div class="rating-right">393 <div>100% positive</div>394 <svg class="chev" viewBox="0 0 24 24">395 <path d="M6 9l6 6 6-6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>396 </svg>397 </div>398 </div>399 400 <div class="rec-header">You might also like</div>401 <div class="sponsored">Sponsored</div>402 403 <div class="rec-row">404 <div class="card">405 <div class="img-ph">[IMG: Wicker chair]</div>406 <div class="card-title">My Crystal India<br>Rattan Cane Sofa...</div>407 </div>408 <div class="card">409 <div class="img-ph">[IMG: Black stool]</div>410 <div class="card-title">IKEA Marius Home,<br>Stools & Office...</div>411 </div>412 <div class="card">413 <div class="img-ph">[IMG: Mesh office chair]</div>414 <div class="card-title">ACE ENTERPRISES<br>Ergonomic Desk...</div>415 </div>416 </div>417 </div>418 </div>419 420 <!-- Bottom nav -->421 <div class="bottom-nav">422 <div class="nav-item">423 <svg class="nav-icon" viewBox="0 0 24 24">424 <path d="M3 11l9-7 9 7v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" stroke="#0aa3a3" stroke-width="2" fill="none"/>425 </svg>426 <div class="home-underline"></div>427 </div>428 <div class="nav-item">429 <svg class="nav-icon" viewBox="0 0 24 24">430 <circle cx="12" cy="8" r="4" stroke="#333" stroke-width="2" fill="none"/>431 <path d="M4 21c2-5 14-5 16 0" stroke="#333" stroke-width="2" fill="none"/>432 </svg>433 </div>434 <div class="nav-item">435 <svg class="nav-icon" viewBox="0 0 24 24">436 <rect x="4" y="4" width="6" height="6" fill="#333"/>437 <rect x="14" y="4" width="6" height="6" fill="#333"/>438 <rect x="4" y="14" width="6" height="6" fill="#333"/>439 <rect x="14" y="14" width="6" height="6" fill="#333"/>440 </svg>441 </div>442 <div class="nav-item">443 <div class="badge">0</div>444 <svg class="nav-icon" viewBox="0 0 24 24">445 <path d="M6 6h15l-2 10H7L6 6z" stroke="#333" stroke-width="2" fill="none"/>446 <circle cx="9" cy="20" r="2" fill="#333"/>447 <circle cx="18" cy="20" r="2" fill="#333"/>448 </svg>449 </div>450 <div class="nav-item">451 <svg class="nav-icon" viewBox="0 0 24 24">452 <path d="M3 6h18M3 12h18M3 18h18" stroke="#333" stroke-width="2"/>453 </svg>454 </div>455 </div>456 457 <div class="gesture"></div>458</div>459</body>460</html>