GD-ML/AndroidCode
13.4k
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>Supplier Detail UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 .status-bar {18 height: 96px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 padding: 0 36px;23 color: #333;24 font-size: 36px;25 }26 .status-icons { display: flex; gap: 24px; align-items: center; }27 .icon { width: 48px; height: 48px; }28 29 .top-bar {30 height: 140px;31 display: flex;32 align-items: center;33 padding: 0 28px;34 gap: 24px;35 }36 .back-btn { width: 64px; height: 64px; display:flex; align-items:center; justify-content:center; }37 .search-pill {38 flex: 1;39 height: 96px;40 background: #f1f1f1;41 border-radius: 48px;42 display: flex;43 align-items: center;44 padding: 0 32px;45 gap: 18px;46 color: #555;47 font-size: 36px;48 }49 .top-actions { display: flex; gap: 28px; align-items: center; margin-left: 12px; }50 51 .tabs {52 height: 120px;53 display: flex;54 align-items: flex-end;55 gap: 48px;56 padding: 0 36px;57 font-size: 40px;58 color: #333;59 }60 .tab { padding-bottom: 24px; }61 .tab.active { position: relative; font-weight: 600; }62 .tab.active::after {63 content: "";64 position: absolute;65 left: 0;66 bottom: 8px;67 width: 160px;68 height: 6px;69 background: #333;70 border-radius: 3px;71 }72 73 .section { padding: 24px 36px; }74 75 .rating-row {76 display: flex;77 align-items: center;78 gap: 24px;79 margin: 24px 0;80 font-size: 36px;81 color: #333;82 }83 .rating-row .label { width: 420px; }84 .bar {85 width: 420px;86 height: 20px;87 background: #ddd;88 border-radius: 10px;89 position: relative;90 }91 .bar .fill {92 position: absolute;93 height: 100%;94 left: 0; top: 0;95 background: #ff6a00;96 border-radius: 10px;97 }98 .rating-row .value { width: 120px; text-align: right; color: #444; }99 100 .outline-btn {101 margin: 32px auto;102 width: 920px;103 height: 100px;104 border: 2px solid #222;105 border-radius: 50px;106 display: flex;107 align-items: center;108 justify-content: center;109 font-size: 38px;110 color: #222;111 }112 113 .divider { height: 2px; background: #eee; margin: 20px 0; }114 115 .title-row {116 display: flex;117 align-items: center;118 justify-content: space-between;119 padding: 24px 36px;120 }121 .title-row .title { font-size: 48px; color: #222; font-weight: 600; }122 .title-row .subtext { margin-top: 10px; font-size: 34px; color: #666; }123 .right-chevron { width: 48px; height: 48px; }124 125 .supplier-card {126 margin: 24px 0;127 background: #fafafa;128 border-radius: 24px;129 box-shadow: 0 4px 10px rgba(0,0,0,0.05);130 padding: 36px;131 }132 .supplier-name { font-size: 56px; font-weight: 700; color: #222; line-height: 1.2; margin-bottom: 20px; }133 .tags { display:flex; gap: 16px; align-items:center; flex-wrap: wrap; margin-bottom: 24px; }134 .tag { font-size: 28px; color: #3a6bb3; background: #e9f0fb; padding: 10px 14px; border-radius: 12px; }135 .flag { width: 54px; height: 36px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; border-radius:6px; font-size:20px; }136 137 .metrics {138 display: grid;139 grid-template-columns: 1fr 1fr 1fr;140 gap: 12px;141 margin-top: 10px;142 padding-bottom: 24px;143 }144 .metric-item { text-align: left; padding: 16px 0; }145 .metric-item .top { font-size: 40px; font-weight: 700; color: #222; }146 .metric-item .bottom { font-size: 28px; color: #8a8a8a; margin-top: 6px; }147 148 .card-actions {149 display: flex;150 gap: 24px;151 margin-top: 12px;152 }153 .card-actions .outline-btn-sm {154 flex: 1;155 height: 100px;156 border: 2px solid #333;157 border-radius: 48px;158 display:flex; align-items:center; justify-content:center;159 font-size: 36px; color:#222;160 }161 162 .similar-header {163 display:flex; align-items:center; justify-content:space-between;164 padding: 24px 36px;165 }166 .similar-header .title { font-size: 48px; font-weight: 700; color:#222; }167 .image-row { display: flex; gap: 24px; padding: 0 36px; }168 .img-card {169 width: 300px;170 height: 180px;171 background: #E0E0E0;172 border: 1px solid #BDBDBD;173 border-radius: 24px;174 display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px;175 }176 177 .bottom-bar {178 position: absolute;179 left: 0; right: 0; bottom: 100px;180 height: 180px;181 border-top: 1px solid #eee;182 background: #fff;183 display: grid;184 grid-template-columns: 220px 220px 1fr 360px;185 align-items: center;186 padding: 0 24px;187 gap: 16px;188 }189 .mini-action {190 display:flex; align-items:center; justify-content:center; gap: 12px; color:#333; font-size: 30px;191 }192 .mini-icon { width: 52px; height: 52px; }193 194 .add-cart-btn {195 height: 110px;196 border: 2px solid #222;197 border-radius: 56px;198 display:flex; align-items:center; justify-content:center;199 font-size: 38px; color:#222;200 }201 .start-order-btn {202 height: 110px;203 background: #ff6a00;204 color: #fff;205 border-radius: 56px;206 display:flex; align-items:center; justify-content:center;207 font-size: 38px; font-weight: 600;208 }209 210 .home-indicator {211 position: absolute;212 left: 50%;213 transform: translateX(-50%);214 bottom: 24px;215 width: 280px; height: 12px; background:#000; border-radius: 6px;216 opacity: 0.85;217 }218</style>219</head>220<body>221<div id="render-target">222 223 <!-- Status bar -->224 <div class="status-bar">225 <div>3:58</div>226 <div class="status-icons">227 <!-- simple mail icon -->228 <svg class="icon" viewBox="0 0 24 24">229 <rect x="2" y="5" width="20" height="14" rx="2" ry="2" fill="none" stroke="#666" stroke-width="2"/>230 <path d="M3 6l9 7 9-7" fill="none" stroke="#666" stroke-width="2"/>231 </svg>232 <!-- download icon -->233 <svg class="icon" viewBox="0 0 24 24">234 <path d="M12 3v10" stroke="#666" stroke-width="2" fill="none"/>235 <path d="M7 10l5 5 5-5" stroke="#666" stroke-width="2" fill="none"/>236 <rect x="4" y="19" width="16" height="2" fill="#666"/>237 </svg>238 <!-- network / battery combined simplified -->239 <svg class="icon" viewBox="0 0 24 24">240 <rect x="3" y="7" width="14" height="10" rx="2" ry="2" fill="none" stroke="#666" stroke-width="2"/>241 <rect x="18" y="10" width="2" height="4" fill="#666"/>242 </svg>243 </div>244 </div>245 246 <!-- Top bar with back and search -->247 <div class="top-bar">248 <div class="back-btn">249 <svg class="icon" viewBox="0 0 24 24">250 <path d="M15 18l-6-6 6-6" fill="none" stroke="#333" stroke-width="2"/>251 </svg>252 </div>253 <div class="search-pill">254 <svg class="icon" viewBox="0 0 24 24">255 <circle cx="11" cy="11" r="7" fill="none" stroke="#777" stroke-width="2"/>256 <path d="M20 20l-4-4" stroke="#777" stroke-width="2" fill="none"/>257 </svg>258 <div>nike shoes</div>259 </div>260 <div class="top-actions">261 <!-- camera -->262 <svg class="icon" viewBox="0 0 24 24">263 <rect x="3" y="7" width="18" height="12" rx="2" ry="2" fill="none" stroke="#333" stroke-width="2"/>264 <rect x="8" y="4" width="8" height="3" rx="1" fill="#333"/>265 <circle cx="12" cy="13" r="4" fill="none" stroke="#333" stroke-width="2"/>266 </svg>267 <!-- cart -->268 <svg class="icon" viewBox="0 0 24 24">269 <circle cx="9" cy="20" r="2" fill="#333"/>270 <circle cx="17" cy="20" r="2" fill="#333"/>271 <path d="M3 4h3l2 10h10l2-7H7" fill="none" stroke="#333" stroke-width="2"/>272 </svg>273 <!-- more vertical -->274 <svg class="icon" viewBox="0 0 24 24">275 <circle cx="12" cy="5" r="2" fill="#333"/>276 <circle cx="12" cy="12" r="2" fill="#333"/>277 <circle cx="12" cy="19" r="2" fill="#333"/>278 </svg>279 </div>280 </div>281 282 <!-- Tabs -->283 <div class="tabs">284 <div class="tab active">Overview</div>285 <div class="tab">Details</div>286 <div class="tab">Recommended</div>287 </div>288 289 <!-- Ratings section -->290 <div class="section" style="padding-top: 12px;">291 <div class="rating-row">292 <div class="label">Product quality</div>293 <div class="bar"><div class="fill" style="width: 98%;"></div></div>294 <div class="value">4.9</div>295 </div>296 <div class="rating-row">297 <div class="label">Supplier service</div>298 <div class="bar"><div class="fill" style="width: 80%;"></div></div>299 <div class="value">4.0</div>300 </div>301 <div class="rating-row">302 <div class="label">On-time shipment</div>303 <div class="bar"><div class="fill" style="width: 82%;"></div></div>304 <div class="value">4.1</div>305 </div>306 307 <div class="outline-btn">See all reviews</div>308 </div>309 310 <div class="divider"></div>311 312 <!-- Customization options -->313 <div class="title-row">314 <div>315 <div class="title">Customization options</div>316 <div class="subtext">Customized logo; Customized packaging; Graphic custo...</div>317 </div>318 <svg class="right-chevron" viewBox="0 0 24 24">319 <path d="M9 6l6 6-6 6" fill="none" stroke="#333" stroke-width="2"/>320 </svg>321 </div>322 323 <!-- Supplier card -->324 <div class="supplier-card">325 <div class="supplier-name">Yanshi City Guxian Kangtai<br> Shoes Factory</div>326 <div class="tags">327 <div class="flag">[IMG: Flag]</div>328 <div style="font-size:30px; color:#666;">CN</div>329 <div class="tag" style="background:#eef1f6; color:#7a7a7a;">4YRS</div>330 <div class="tag">Manufacturer, Trading Company</div>331 </div>332 333 <div class="metrics">334 <div class="metric-item">335 <div class="top">≤3h</div>336 <div class="bottom">Response Time</div>337 </div>338 <div class="metric-item">339 <div class="top">US$ 30,000+</div>340 <div class="bottom">107 Transactions</div>341 </div>342 <div class="metric-item">343 <div class="top">100.0%</div>344 <div class="bottom">On-time delivery rate</div>345 </div>346 </div>347 348 <div class="card-actions">349 <div class="outline-btn-sm">More products</div>350 <div class="outline-btn-sm">Company profile</div>351 </div>352 </div>353 354 <div class="divider"></div>355 356 <!-- Similar products -->357 <div class="similar-header">358 <div class="title">Similar products from this supplier</div>359 <svg class="right-chevron" viewBox="0 0 24 24">360 <path d="M9 6l6 6-6 6" fill="none" stroke="#333" stroke-width="2"/>361 </svg>362 </div>363 364 <div class="image-row">365 <div class="img-card">[IMG: Blue Shoe]</div>366 <div class="img-card">[IMG: Product thumbnail]</div>367 <div class="img-card">[IMG: Product thumbnail]</div>368 </div>369 370 <!-- Bottom actions -->371 <div class="bottom-bar">372 <div class="mini-action">373 <svg class="mini-icon" viewBox="0 0 24 24">374 <path d="M4 5h16v11H8l-4 3V5z" fill="none" stroke="#333" stroke-width="2"/>375 </svg>376 <div>Chat now</div>377 </div>378 <div class="mini-action">379 <svg class="mini-icon" viewBox="0 0 24 24">380 <rect x="3" y="5" width="18" height="14" rx="2" ry="2" fill="none" stroke="#333" stroke-width="2"/>381 <path d="M4 6l8 7 8-7" fill="none" stroke="#333" stroke-width="2"/>382 </svg>383 <div>Send inquiry</div>384 </div>385 <div class="add-cart-btn">Add to cart</div>386 <div class="start-order-btn">Start order</div>387 </div>388 389 <div class="home-indicator"></div>390</div>391</body>392</html>