GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Product Detail Mock</title>6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;12 color: #222;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #f6f6f7;20 }21 22 .status-bar {23 height: 80px;24 padding: 0 36px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 font-weight: 600;29 color: #555;30 font-size: 32px;31 letter-spacing: 0.5px;32 }33 .status-icons {34 display: flex;35 align-items: center;36 gap: 20px;37 }38 .battery {39 width: 46px;40 height: 24px;41 border: 3px solid #777;42 border-radius: 6px;43 position: relative;44 margin-left: 6px;45 }46 .battery::after {47 content: "";48 position: absolute;49 right: -10px;50 top: 6px;51 width: 8px;52 height: 12px;53 background: #777;54 border-radius: 2px;55 }56 .battery .level {57 width: 30px;58 height: 100%;59 background: #777;60 }61 62 /* Header / App bar */63 .appbar {64 background: #efefef;65 padding: 20px 36px 30px 36px;66 position: relative;67 box-shadow: inset 0 -1px 0 #ddd;68 }69 .appbar-top {70 height: 88px;71 display: flex;72 align-items: center;73 justify-content: space-between;74 }75 .icon-btn {76 width: 72px;77 height: 72px;78 display: flex;79 align-items: center;80 justify-content: center;81 }82 .icon {83 width: 44px;84 height: 44px;85 stroke: #222;86 fill: none;87 stroke-width: 4;88 }89 .icon-heart {90 stroke: #222;91 fill: none;92 stroke-width: 5;93 }94 .title {95 text-align: center;96 font-size: 42px;97 font-weight: 700;98 letter-spacing: 3px;99 color: #111;100 margin-top: 6px;101 }102 .price {103 text-align: center;104 font-size: 40px;105 font-weight: 700;106 color: #111;107 margin-top: 14px;108 }109 110 /* Thumbnail strip */111 .thumb-strip {112 display: flex;113 gap: 32px;114 justify-content: center;115 margin-top: 26px;116 padding-bottom: 16px;117 }118 .thumb {119 width: 220px;120 height: 120px;121 background: #E0E0E0;122 border: 2px solid #BDBDBD;123 border-radius: 12px;124 display: flex;125 align-items: center;126 justify-content: center;127 color: #6f6f6f;128 font-size: 26px;129 }130 131 /* Sale row cards */132 .content {133 padding: 22px 36px 0;134 }135 .sale-row {136 display: flex;137 gap: 24px;138 margin-top: 30px;139 }140 .card {141 width: 330px;142 background: #fff;143 border-radius: 18px;144 box-shadow: 0 1px 0 #e6e6e6;145 padding: 28px;146 }147 .sale-prices {148 display: flex;149 align-items: baseline;150 gap: 26px;151 margin-bottom: 16px;152 font-weight: 700;153 }154 .sale {155 color: #ff5a57;156 font-size: 34px;157 }158 .original {159 color: #8e8e8e;160 font-size: 30px;161 text-decoration: line-through;162 }163 .card-title {164 font-size: 34px;165 font-weight: 800;166 letter-spacing: 1px;167 color: #111;168 line-height: 1.15;169 text-transform: uppercase;170 margin-bottom: 18px;171 }172 .subtext {173 color: #7a7a7a;174 font-size: 26px;175 }176 177 /* Section heading */178 .section-title {179 font-size: 64px;180 font-weight: 900;181 letter-spacing: 3px;182 text-transform: uppercase;183 color: #111;184 margin: 54px 36px 26px;185 }186 187 /* Recommendations grid */188 .recommend-row {189 display: flex;190 gap: 24px;191 padding: 0 36px;192 }193 .rec-card {194 width: 330px;195 background: #fff;196 border-radius: 18px;197 overflow: hidden;198 box-shadow: 0 1px 0 #e6e6e6;199 position: relative;200 }201 .rec-img {202 height: 380px;203 background: #E0E0E0;204 border-bottom: 1px solid #d6d6d6;205 display: flex;206 align-items: center;207 justify-content: center;208 color: #757575;209 font-size: 28px;210 position: relative;211 }212 .rec-heart {213 position: absolute;214 top: 18px;215 right: 18px;216 width: 54px;217 height: 54px;218 border-radius: 14px;219 background: rgba(255,255,255,0.85);220 display: flex;221 align-items: center;222 justify-content: center;223 box-shadow: 0 1px 0 #dcdcdc;224 }225 .price-badge {226 position: absolute;227 left: 22px;228 bottom: -26px;229 background: #fff;230 padding: 10px 18px;231 font-size: 30px;232 font-weight: 700;233 border-radius: 12px;234 box-shadow: 0 1px 0 #e6e6e6;235 }236 .rec-body {237 padding: 36px 26px 24px;238 }239 .rec-name {240 font-size: 30px;241 font-weight: 800;242 text-transform: uppercase;243 letter-spacing: 1.2px;244 line-height: 1.25;245 color: #111;246 margin-bottom: 16px;247 }248 249 /* Questions section */250 .questions {251 padding: 40px 36px 0;252 }253 .questions-title {254 font-size: 64px;255 font-weight: 900;256 letter-spacing: 3px;257 text-transform: uppercase;258 color: #111;259 margin-bottom: 22px;260 }261 .qa-row {262 display: flex;263 gap: 60px;264 padding-top: 24px;265 margin-bottom: 30px;266 }267 .qa-col {268 flex: 1;269 background: #fff;270 border-radius: 18px;271 padding: 34px 28px;272 }273 .qa-top {274 display: flex;275 align-items: center;276 gap: 22px;277 margin-bottom: 16px;278 }279 .qa-title {280 font-size: 34px;281 font-weight: 700;282 color: #222;283 }284 .cta {285 margin-top: 24px;286 font-size: 32px;287 font-weight: 800;288 display: inline-block;289 border-bottom: 6px solid #111;290 padding-bottom: 8px;291 }292 .qa-sub {293 color: #6f6f6f;294 font-size: 28px;295 }296 297 .home-indicator {298 position: absolute;299 bottom: 28px;300 left: 50%;301 transform: translateX(-50%);302 width: 360px;303 height: 12px;304 background: #c9c9cc;305 border-radius: 8px;306 }307</style>308</head>309<body>310<div id="render-target">311 312 <!-- Status bar -->313 <div class="status-bar">314 <div>7:48</div>315 <div class="status-icons">316 <span style="font-size:24px;">◦</span>317 <span style="font-size:24px;">◦</span>318 <span style="font-size:24px;">◦</span>319 <div class="battery"><div class="level"></div></div>320 <div style="font-size:28px; color:#777;">100%</div>321 </div>322 </div>323 324 <!-- App bar -->325 <div class="appbar">326 <div class="appbar-top">327 <div class="icon-btn">328 <svg class="icon" viewBox="0 0 24 24">329 <path d="M15 5 L7 12 L15 19" stroke-linecap="round" stroke-linejoin="round"></path>330 <path d="M8 12 H22" stroke-linecap="round"></path>331 </svg>332 </div>333 <div style="display:flex; gap:22px;">334 <div class="icon-btn">335 <!-- Share icon -->336 <svg class="icon" viewBox="0 0 24 24">337 <circle cx="18" cy="5" r="3"></circle>338 <circle cx="6" cy="12" r="3"></circle>339 <circle cx="18" cy="19" r="3"></circle>340 <path d="M9 12 L15 7" stroke-linecap="round"></path>341 <path d="M9 12 L15 17" stroke-linecap="round"></path>342 </svg>343 </div>344 <div class="icon-btn">345 <!-- Heart icon -->346 <svg class="icon-heart" viewBox="0 0 24 24">347 <path d="M12 21 C12 21 4 15 4 9 C4 6.5 5.8 4.8 8.2 4.8 C9.9 4.8 11.1 5.8 12 7 C12.9 5.8 14.1 4.8 15.8 4.8 C18.2 4.8 20 6.5 20 9 C20 15 12 21 12 21 Z"></path>348 </svg>349 </div>350 </div>351 </div>352 353 <div class="title">SAMBA CLASSIC</div>354 <div class="price">$90.00</div>355 356 <div class="thumb-strip">357 <div class="thumb">[IMG: Black Samba Shoe]</div>358 <div class="thumb">[IMG: White Samba Shoe]</div>359 </div>360 </div>361 362 <!-- Sale cards row -->363 <div class="content">364 <div class="sale-row">365 <div class="card">366 <div class="sale-prices">367 <div class="sale">$66.00</div>368 <div class="original">$110.00</div>369 </div>370 <div class="card-title">Austin FC Anthem Jacket</div>371 <div class="subtext">Men's Performance</div>372 </div>373 374 <div class="card">375 <div class="sale-prices">376 <div class="sale">$27.00</div>377 <div class="original">$45.00</div>378 </div>379 <div class="card-title">Tiro 23 League Sweat Shorts</div>380 <div class="subtext">Men's Performance</div>381 </div>382 383 <div class="card">384 <div class="sale-prices">385 <div class="sale">$50.00</div>386 <div class="original">$?</div>387 </div>388 <div class="card-title">Stadium Item</div>389 <div class="subtext">Performance</div>390 </div>391 </div>392 </div>393 394 <!-- You may also like -->395 <div class="section-title">YOU MAY ALSO LIKE</div>396 397 <div class="recommend-row">398 <div class="rec-card">399 <div class="rec-img">400 [IMG: Lime Soccer Cleats]401 <div class="rec-heart">402 <svg class="icon-heart" viewBox="0 0 24 24">403 <path d="M12 21 C12 21 4 15 4 9 C4 6.5 5.8 4.8 8.2 4.8 C9.9 4.8 11.1 5.8 12 7 C12.9 5.8 14.1 4.8 15.8 4.8 C18.2 4.8 20 6.5 20 9 C20 15 12 21 12 21 Z"></path>404 </svg>405 </div>406 <div class="price-badge">$300.00</div>407 </div>408 <div class="rec-body">409 <div class="rec-name">X Crazyfast+ Firm Ground Soccer Cleats</div>410 <div class="subtext">Performance</div>411 </div>412 </div>413 414 <div class="rec-card">415 <div class="rec-img">416 [IMG: Blue Soccer Cleats]417 <div class="rec-heart">418 <svg class="icon-heart" viewBox="0 0 24 24">419 <path d="M12 21 C12 21 4 15 4 9 C4 6.5 5.8 4.8 8.2 4.8 C9.9 4.8 11.1 5.8 12 7 C12.9 5.8 14.1 4.8 15.8 4.8 C18.2 4.8 20 6.5 20 9 C20 15 12 21 12 21 Z"></path>420 </svg>421 </div>422 <div class="price-badge">$260.00</div>423 </div>424 <div class="rec-body">425 <div class="rec-name">X Crazyfast.1 Artificial Grass Soccer Cleats</div>426 <div class="subtext">Performance</div>427 </div>428 </div>429 430 <div class="rec-card">431 <div class="rec-img">432 [IMG: Blue/White Soccer Cleats]433 <div class="rec-heart">434 <svg class="icon-heart" viewBox="0 0 24 24">435 <path d="M12 21 C12 21 4 15 4 9 C4 6.5 5.8 4.8 8.2 4.8 C9.9 4.8 11.1 5.8 12 7 C12.9 5.8 14.1 4.8 15.8 4.8 C18.2 4.8 20 6.5 20 9 C20 15 12 21 12 21 Z"></path>436 </svg>437 </div>438 <div class="price-badge">$230.00</div>439 </div>440 <div class="rec-body">441 <div class="rec-name">Copa Firm Ground Soccer Cleats</div>442 <div class="subtext">Performance</div>443 </div>444 </div>445 </div>446 447 <!-- Questions section -->448 <div class="questions">449 <div class="questions-title">QUESTIONS?</div>450 <div class="qa-row">451 <div class="qa-col">452 <div class="qa-top">453 <svg class="icon" viewBox="0 0 24 24">454 <path d="M3 4 H17 V14 H7 L5 16 V14 H3 Z" stroke-linejoin="round"></path>455 </svg>456 <div class="qa-title">Chat with an agent</div>457 </div>458 <div class="cta">START CHAT</div>459 </div>460 461 <div class="qa-col">462 <div class="qa-top">463 <div style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:40px;color:#222;">?</div>464 <div class="qa-title">Visit our help section</div>465 </div>466 <div class="cta">FAQ & HELP</div>467 </div>468 </div>469 </div>470 471 <div class="home-indicator"></div>472</div>473</body>474</html>