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 {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;12 }13 #render-target {14 width: 1080px;15 height: 2400px;16 position: relative;17 overflow: hidden;18 background: #ffffff;19 }20 21 /* Top gradient header */22 .top-area {23 width: 100%;24 height: 260px;25 background: linear-gradient(180deg, #9ee3d5 0%, #bfe8f5 100%);26 position: relative;27 box-sizing: border-box;28 }29 .status-bar {30 height: 80px;31 display: flex;32 align-items: center;33 padding: 0 36px;34 font-size: 34px;35 color: #1f1f1f;36 }37 .status-left {38 display: flex;39 align-items: center;40 gap: 26px;41 }42 .status-icons {43 display: flex;44 align-items: center;45 gap: 14px;46 color: #3c3c3c;47 }48 .status-right {49 margin-left: auto;50 display: flex;51 align-items: center;52 gap: 22px;53 }54 .icon-small svg {55 width: 34px;56 height: 34px;57 fill: #3c3c3c;58 }59 60 .search-row {61 display: flex;62 align-items: center;63 gap: 20px;64 padding: 18px 24px;65 }66 .back-btn {67 width: 80px;68 height: 80px;69 border-radius: 40px;70 display: flex;71 justify-content: center;72 align-items: center;73 }74 .back-btn svg {75 width: 44px;76 height: 44px;77 fill: none;78 stroke: #2b2b2b;79 stroke-width: 6;80 }81 .search-field {82 flex: 1;83 height: 96px;84 background: #ffffff;85 border-radius: 24px;86 box-shadow: 0 6px 14px rgba(0,0,0,0.12);87 display: flex;88 align-items: center;89 padding: 0 30px;90 box-sizing: border-box;91 gap: 24px;92 }93 .search-icon svg {94 width: 42px;95 height: 42px;96 stroke: #5a5a5a;97 fill: none;98 stroke-width: 6;99 }100 .search-text {101 font-size: 36px;102 color: #2a2a2a;103 flex: 1;104 }105 .scan-btn {106 width: 66px;107 height: 66px;108 border-radius: 16px;109 background: #f3f4f6;110 display: flex;111 justify-content: center;112 align-items: center;113 border: 1px solid #d6d6d6;114 }115 .scan-btn svg {116 width: 40px;117 height: 40px;118 stroke: #4a4a4a;119 fill: none;120 stroke-width: 6;121 }122 123 /* Tabs */124 .tabs {125 width: 100%;126 height: 120px;127 background: #ffffff;128 display: flex;129 align-items: center;130 padding: 0 24px;131 box-sizing: border-box;132 border-top-left-radius: 20px;133 border-top-right-radius: 20px;134 position: relative;135 }136 .tab {137 font-size: 36px;138 color: #5a5a5a;139 margin-right: 48px;140 position: relative;141 padding-bottom: 20px;142 }143 .tab.active {144 color: #1f1f1f;145 font-weight: 600;146 }147 .tab.active::after {148 content: "";149 position: absolute;150 left: 0;151 bottom: 8px;152 width: 120px;153 height: 8px;154 background: #f39c3d;155 border-radius: 4px;156 }157 .float-up {158 margin-left: auto;159 width: 96px;160 height: 96px;161 border-radius: 16px;162 background: #eef7f2;163 border: 1px solid #dfe5de;164 display: flex;165 justify-content: center;166 align-items: center;167 }168 .float-up svg {169 width: 40px;170 height: 40px;171 fill: none;172 stroke: #2d7f4e;173 stroke-width: 8;174 }175 176 /* Content area */177 .content {178 padding: 20px 24px;179 box-sizing: border-box;180 }181 .price-line {182 font-size: 60px;183 color: #1f1f1f;184 display: flex;185 align-items: baseline;186 gap: 8px;187 }188 .price-suffix {189 font-size: 36px;190 color: #1f1f1f;191 line-height: 1;192 }193 .delivery {194 margin-top: 14px;195 font-size: 36px;196 color: #1f1f1f;197 font-weight: 700;198 }199 .separator {200 height: 1px;201 background: #e5e5e5;202 margin: 24px 0;203 }204 .link {205 font-size: 36px;206 color: #2a92a3;207 }208 209 .features {210 display: flex;211 justify-content: space-between;212 margin-top: 24px;213 padding-right: 12px;214 }215 .feature {216 width: 240px;217 text-align: center;218 }219 .feature-icon {220 width: 140px;221 height: 140px;222 border-radius: 70px;223 background: #f7f7f7;224 border: 1px solid #dcdcdc;225 margin: 0 auto 18px;226 display: flex;227 justify-content: center;228 align-items: center;229 }230 .feature-icon svg {231 width: 70px;232 height: 70px;233 stroke: #777;234 fill: none;235 stroke-width: 6;236 }237 .feature-text {238 font-size: 30px;239 color: #3c3c3c;240 line-height: 1.3;241 }242 243 .section-title-row {244 display: flex;245 align-items: center;246 justify-content: space-between;247 }248 .section-title {249 font-size: 44px;250 font-weight: 700;251 color: #1f1f1f;252 }253 .chevron svg {254 width: 44px;255 height: 44px;256 fill: none;257 stroke: #3c3c3c;258 stroke-width: 8;259 }260 261 .details-list {262 margin-top: 18px;263 }264 .detail-item {265 margin-bottom: 24px;266 }267 .detail-label {268 font-size: 36px;269 font-weight: 700;270 color: #1f1f1f;271 }272 .detail-value {273 font-size: 36px;274 color: #676767;275 margin-top: 6px;276 }277 .see-more {278 font-size: 36px;279 color: #2a92a3;280 display: inline-flex;281 align-items: center;282 gap: 10px;283 }284 .see-more svg {285 width: 28px;286 height: 28px;287 stroke: #2a92a3;288 fill: none;289 stroke-width: 6;290 }291 292 /* Bottom navigation */293 .bottom-nav {294 position: absolute;295 left: 0;296 bottom: 86px;297 width: 100%;298 height: 180px;299 border-top: 1px solid #e1e1e1;300 background: #ffffff;301 display: flex;302 justify-content: space-around;303 align-items: center;304 box-sizing: border-box;305 padding: 0 16px;306 }307 .nav-item {308 width: 180px;309 text-align: center;310 }311 .nav-icon {312 width: 58px;313 height: 58px;314 margin: 0 auto 10px;315 }316 .nav-icon svg {317 width: 58px;318 height: 58px;319 stroke: #2b2b2b;320 fill: none;321 stroke-width: 6;322 }323 .nav-label {324 font-size: 32px;325 color: #2b2b2b;326 }327 .active .nav-label {328 color: #1f8b7b;329 }330 .cart-badge {331 position: absolute;332 top: -8px;333 right: -18px;334 background: #1f8b7b;335 color: #fff;336 font-size: 28px;337 width: 46px;338 height: 46px;339 border-radius: 23px;340 display: flex;341 align-items: center;342 justify-content: center;343 border: 2px solid #fff;344 }345 346 /* Gesture pill */347 .gesture {348 position: absolute;349 bottom: 20px;350 left: 50%;351 transform: translateX(-50%);352 width: 300px;353 height: 16px;354 background: #cfcfcf;355 border-radius: 8px;356 }357</style>358</head>359<body>360<div id="render-target">361 <div class="top-area">362 <div class="status-bar">363 <div class="status-left">364 <div>7:26</div>365 <div class="status-icons">366 <span>•</span><span>•</span><span>•</span><span>•</span><span>•</span>367 </div>368 </div>369 <div class="status-right">370 <div class="icon-small">371 <!-- wifi -->372 <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 16c2-2 4-2 6 0"/><circle cx="12" cy="19" r="1.7"/></svg>373 </div>374 <div class="icon-small">375 <!-- battery -->376 <svg viewBox="0 0 26 24"><rect x="2" y="6" width="20" height="12" rx="2" ry="2"/><rect x="22" y="10" width="3" height="4"/></svg>377 </div>378 </div>379 </div>380 381 <div class="search-row">382 <div class="back-btn">383 <svg viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>384 </div>385 <div class="search-field">386 <div class="search-icon">387 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"/><path d="M21 21l-6-6"/></svg>388 </div>389 <div class="search-text">formal coat for women</div>390 <div class="scan-btn">391 <svg viewBox="0 0 24 24">392 <path d="M3 8V5a2 2 0 012-2h3M21 8V5a2 2 0 00-2-2h-3M3 16v3a2 2 0 002 2h3M21 16v3a2 2 0 01-2 2h-3"/>393 <rect x="8" y="8" width="8" height="8" rx="1" ry="1"/>394 </svg>395 </div>396 </div>397 </div>398 </div>399 400 <div class="tabs">401 <div class="tab active">Details</div>402 <div class="tab">Questions</div>403 <div class="tab">Reviews</div>404 <div class="float-up">405 <svg viewBox="0 0 24 24"><path d="M12 7l-6 6h12z"/></svg>406 </div>407 </div>408 409 <div class="content">410 <div class="price-line">411 <span>₹920</span><span class="price-suffix">00</span>412 </div>413 <div class="delivery">FREE Delivery.</div>414 415 <div class="separator"></div>416 417 <div class="link">Compare all 2 options</div>418 419 <div class="features">420 <div class="feature">421 <div class="feature-icon">422 <!-- box icon -->423 <svg viewBox="0 0 24 24"><rect x="4" y="7" width="16" height="12" rx="2"/><path d="M4 11h16"/></svg>424 </div>425 <div class="feature-text">10 days Return & Exchange</div>426 </div>427 <div class="feature">428 <div class="feature-icon">429 <!-- pay hand -->430 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="14" height="8" rx="2"/><path d="M8 16l4 4h6"/></svg>431 </div>432 <div class="feature-text">Pay on Delivery</div>433 </div>434 <div class="feature">435 <div class="feature-icon">436 <!-- truck -->437 <svg viewBox="0 0 24 24"><rect x="2" y="7" width="11" height="8" rx="1"/><path d="M13 10h4l3 3v2h-7"/><circle cx="6" cy="18" r="2"/><circle cx="18" cy="18" r="2"/></svg>438 </div>439 <div class="feature-text">Free Delivery</div>440 </div>441 <div class="feature">442 <div class="feature-icon">443 <!-- van smile -->444 <svg viewBox="0 0 24 24"><rect x="3" y="8" width="16" height="8" rx="2"/><path d="M19 12l2-2"/><path d="M7 13c2 2 6 2 8 0"/></svg>445 </div>446 <div class="feature-text">Amazon Delivered</div>447 </div>448 </div>449 450 <div class="separator" style="margin-top: 30px;"></div>451 452 <div class="section-title-row">453 <div class="section-title">Size guide</div>454 <div class="chevron">455 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>456 </div>457 </div>458 459 <div class="separator" style="margin-top: 24px;"></div>460 461 <div class="section-title-row" style="margin-top: 20px;">462 <div class="section-title">Product details</div>463 <div class="chevron">464 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>465 </div>466 </div>467 468 <div class="details-list">469 <div class="detail-item">470 <div class="detail-label">Material Composition</div>471 <div class="detail-value">Cotton Blend</div>472 </div>473 <div class="detail-item">474 <div class="detail-label">Style</div>475 <div class="detail-value">Single breasted</div>476 </div>477 <div class="detail-item">478 <div class="detail-label">Closure Type</div>479 <div class="detail-value">Button</div>480 </div>481 <div class="detail-item">482 <div class="detail-label">Pattern</div>483 <div class="detail-value">All Over Print</div>484 </div>485 <div class="detail-item">486 <div class="detail-label">Country of Origin</div>487 <div class="detail-value">India</div>488 </div>489 </div>490 491 <div class="see-more">492 See more493 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>494 </div>495 </div>496 497 <div class="bottom-nav">498 <div class="nav-item active">499 <div class="nav-icon">500 <svg viewBox="0 0 24 24"><path d="M3 10l9-7 9 7"/><path d="M6 10v10h12V10"/></svg>501 </div>502 <div class="nav-label">Home</div>503 </div>504 <div class="nav-item">505 <div class="nav-icon">506 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c2-5 14-5 16 0"/></svg>507 </div>508 <div class="nav-label">You</div>509 </div>510 <div class="nav-item">511 <div class="nav-icon">512 <svg viewBox="0 0 24 24"><path d="M4 12a8 8 0 0114-5"/><path d="M20 12a8 8 0 01-14 5"/><path d="M12 5v4M12 15v4"/></svg>513 </div>514 <div class="nav-label">More</div>515 </div>516 <div class="nav-item" style="position: relative;">517 <div class="nav-icon" style="position: relative;">518 <svg viewBox="0 0 24 24"><path d="M7 7h14l-2 10H7L5 7h2"/><circle cx="9" cy="20" r="1.5"/><circle cx="17" cy="20" r="1.5"/></svg>519 <div class="cart-badge">1</div>520 </div>521 <div class="nav-label">Cart</div>522 </div>523 <div class="nav-item">524 <div class="nav-icon">525 <svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></svg>526 </div>527 <div class="nav-label">Menu</div>528 </div>529 </div>530 531 <div class="gesture"></div>532</div>533</body>534</html>