GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=1080, initial-scale=1.0" />6<title>UI Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #ffffff;15    font-family: Arial, Helvetica, sans-serif;16    color: #111;17  }18  .status-bar {19    height: 90px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #666;25    font-size: 36px;26  }27  .status-right {28    display: flex;29    align-items: center;30    gap: 24px;31  }32 33  .topbar {34    height: 120px;35    display: flex;36    align-items: center;37    padding: 0 24px;38    gap: 24px;39  }40  .search-pill {41    flex: 1;42    background: #F2F2F2;43    height: 96px;44    border-radius: 48px;45    display: flex;46    align-items: center;47    padding: 0 36px;48    color: #777;49    font-size: 40px;50  }51  .icon-btn {52    width: 96px;53    height: 96px;54    display: flex;55    align-items: center;56    justify-content: center;57  }58 59  .tabs {60    display: flex;61    gap: 48px;62    padding: 24px 36px 0 36px;63    font-size: 42px;64    color: #555;65  }66  .tab.active { color: #111; font-weight: 600; }67  .tab-underline {68    margin: 12px 36px 0 36px;69    height: 4px;70    background: #111;71    width: 170px;72  }73 74  .ratings {75    display: grid;76    grid-template-columns: 480px 1fr;77    column-gap: 24px;78    padding: 36px;79    align-items: start;80  }81  .score {82    font-size: 88px;83    font-weight: 700;84  }85  .score small {86    font-size: 44px;87    color: #666;88    font-weight: 600;89  }90  .satisfied {91    font-size: 46px;92    color: #111;93    font-weight: 600;94    margin-top: 12px;95  }96  .bars { margin-top: 12px; }97  .bar-row {98    display: grid;99    grid-template-columns: 380px 1fr 100px;100    align-items: center;101    gap: 18px;102    margin: 20px 0;103    font-size: 42px;104    color: #333;105  }106  .bar {107    position: relative;108    height: 20px;109    border-radius: 12px;110    background: #E6E6E6;111    overflow: hidden;112  }113  .bar .fill {114    position: absolute;115    left: 0; top: 0; bottom: 0;116    background: #FF6A00;117    border-radius: 12px;118  }119 120  .outline-btn {121    margin: 24px auto;122    width: 960px;123    height: 120px;124    border: 3px solid #333;125    border-radius: 60px;126    display: flex;127    align-items: center;128    justify-content: center;129    font-size: 44px;130    font-weight: 600;131    color: #111;132  }133 134  .divider {135    height: 2px;136    background: #EEE;137    margin: 24px 0;138  }139 140  .section-row {141    padding: 24px 36px;142  }143  .row-title {144    font-size: 54px;145    font-weight: 700;146    margin-bottom: 16px;147  }148  .row-sub {149    font-size: 40px;150    color: #666;151    white-space: nowrap;152    overflow: hidden;153    text-overflow: ellipsis;154  }155  .chevron-right {156    position: absolute;157    right: 36px;158    margin-top: -90px;159  }160 161  .supplier-card {162    margin: 0 0 0 0;163    padding: 24px 36px 36px 36px;164    background: #F6F6F6;165  }166  .supplier-name {167    font-size: 56px;168    font-weight: 800;169    line-height: 1.2;170    margin-bottom: 24px;171  }172  .supplier-meta {173    display: flex;174    align-items: center;175    gap: 18px;176    font-size: 36px;177  }178  .badge {179    background: #E9ECEF;180    color: #555;181    border-radius: 12px;182    padding: 6px 12px;183    font-weight: 700;184  }185  .link {186    color: #1976D2;187    font-weight: 700;188  }189 190  .metrics {191    display: grid;192    grid-template-columns: 1fr 1fr 1fr;193    gap: 12px;194    padding: 24px 0;195    text-align: center;196    color: #666;197  }198  .metric-value {199    font-size: 48px;200    font-weight: 800;201    color: #111;202  }203  .metric-label {204    font-size: 34px;205    margin-top: 8px;206  }207 208  .dual-buttons {209    display: grid;210    grid-template-columns: 1fr 1fr;211    gap: 24px;212    padding: 12px 36px 24px 36px;213  }214  .pill {215    height: 120px;216    border-radius: 60px;217    border: 3px solid #333;218    display: flex; align-items: center; justify-content: center;219    font-size: 44px; font-weight: 700;220    background: #fff;221  }222 223  .section-header {224    padding: 24px 36px;225    display: flex;226    align-items: center;227    justify-content: space-between;228    font-size: 48px;229    font-weight: 700;230  }231 232  .bottom-actions {233    padding: 24px 36px 0 36px;234  }235  .actions-row {236    display: grid;237    grid-template-columns: 240px 240px 1fr 1fr;238    gap: 24px;239    align-items: center;240  }241  .mini-action {242    display: flex;243    flex-direction: column;244    align-items: center;245    gap: 12px;246    color: #333;247    font-size: 34px;248  }249  .mini-icon {250    width: 84px; height: 84px;251    border: 2px solid #333;252    border-radius: 16px;253    display: flex; align-items: center; justify-content: center;254  }255  .cart-btn {256    height: 120px;257    border-radius: 60px;258    border: 3px solid #333;259    display: flex; align-items: center; justify-content: center;260    font-size: 44px; font-weight: 700;261    background: #fff;262  }263  .primary-btn {264    height: 120px;265    border-radius: 60px;266    background: #FF6A00;267    color: #fff;268    font-size: 44px; font-weight: 800;269    display: flex; align-items: center; justify-content: center;270  }271 272  .android-nav {273    position: absolute;274    bottom: 0;275    left: 0;276    width: 1080px;277    height: 120px;278    background: #000;279  }280  .home-pill {281    width: 240px;282    height: 12px;283    background: #fff;284    border-radius: 6px;285    position: absolute;286    bottom: 36px;287    left: 50%;288    transform: translateX(-50%);289    opacity: 0.85;290  }291 292  /* Utility placeholder image */293  .img-placeholder {294    width: 64px; height: 40px;295    background: #E0E0E0;296    border: 1px solid #BDBDBD;297    display: inline-flex;298    align-items: center;299    justify-content: center;300    color: #757575;301    font-size: 22px;302    border-radius: 6px;303  }304</style>305</head>306<body>307<div id="render-target">308 309  <!-- Status bar -->310  <div class="status-bar">311    <div>3:51</div>312    <div class="status-right">313      <span class="img-placeholder">WiFi</span>314      <span class="img-placeholder">Signal</span>315      <span class="img-placeholder">Battery</span>316    </div>317  </div>318 319  <!-- Top bar with back, search and icons -->320  <div class="topbar">321    <div class="icon-btn">322      <svg width="48" height="48" viewBox="0 0 48 48">323        <path d="M28 8 L12 24 L28 40" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>324      </svg>325    </div>326    <div class="search-pill">nike shoes</div>327    <div class="icon-btn">328      <svg width="48" height="48" viewBox="0 0 48 48">329        <rect x="8" y="10" width="32" height="24" rx="4" ry="4" stroke="#111" stroke-width="3" fill="none"/>330        <circle cx="24" cy="22" r="6" stroke="#111" stroke-width="3" fill="none"/>331      </svg>332    </div>333    <div class="icon-btn">334      <svg width="48" height="48" viewBox="0 0 48 48">335        <path d="M8 12h6l4 16h16l4-12H18" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round"/>336        <circle cx="20" cy="40" r="3" fill="#111"/>337        <circle cx="34" cy="40" r="3" fill="#111"/>338      </svg>339    </div>340    <div class="icon-btn">341      <svg width="48" height="48" viewBox="0 0 48 48">342        <circle cx="24" cy="12" r="3" fill="#111"/>343        <circle cx="24" cy="24" r="3" fill="#111"/>344        <circle cx="24" cy="36" r="3" fill="#111"/>345      </svg>346    </div>347  </div>348 349  <!-- Tabs -->350  <div class="tabs">351    <div class="tab active">Overview</div>352    <div class="tab">Details</div>353    <div class="tab">Recommended</div>354  </div>355  <div class="tab-underline"></div>356 357  <!-- Ratings and bars -->358  <div class="ratings">359    <div>360      <div class="score">4.3<small>/5.0</small></div>361      <div class="satisfied">Satisfied</div>362    </div>363    <div class="bars">364      <div class="bar-row">365        <div>Product quality</div>366        <div class="bar"><div class="fill" style="width:92%;"></div></div>367        <div>4.9</div>368      </div>369      <div class="bar-row">370        <div>Supplier service</div>371        <div class="bar"><div class="fill" style="width:80%;"></div></div>372        <div>4.0</div>373      </div>374      <div class="bar-row">375        <div>On-time shipment</div>376        <div class="bar"><div class="fill" style="width:82%;"></div></div>377        <div>4.1</div>378      </div>379    </div>380  </div>381 382  <div class="outline-btn">See all reviews</div>383 384  <div class="divider"></div>385 386  <!-- Customization options -->387  <div class="section-row" style="position: relative;">388    <div class="row-title">Customization options</div>389    <div class="row-sub">Customized logo; Customized packagin