GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Nike Air Max 97 - UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 120px;22 padding: 0 40px;23 box-sizing: border-box;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #111;28 font-size: 40px;29 }30 .status-icons {31 display: flex;32 align-items: center;33 gap: 26px;34 color: #111;35 font-size: 36px;36 }37 .status-icons .battery {38 display: inline-block;39 width: 96px;40 height: 40px;41 border: 4px solid #111;42 border-radius: 8px;43 position: relative;44 }45 .status-icons .battery::after {46 content: "";47 position: absolute;48 right: -12px;49 top: 12px;50 width: 10px;51 height: 16px;52 background: #111;53 border-radius: 3px;54 }55 .status-icons .battery .level {56 position: absolute;57 top: 4px;58 left: 4px;59 height: 28px;60 width: 62px;61 background: #111;62 border-radius: 5px;63 }64 65 /* App bar */66 .app-bar {67 position: absolute;68 top: 120px;69 left: 0;70 width: 1080px;71 padding: 30px 40px 10px 40px;72 box-sizing: border-box;73 }74 .app-top {75 display: flex;76 align-items: center;77 justify-content: space-between;78 }79 .app-left {80 display: flex;81 align-items: center;82 gap: 24px;83 }84 .title {85 font-size: 54px;86 font-weight: 700;87 color: #111;88 }89 .app-actions {90 display: flex;91 align-items: center;92 gap: 34px;93 }94 .icon-btn {95 width: 72px;96 height: 72px;97 display: inline-flex;98 align-items: center;99 justify-content: center;100 }101 .cart-wrap {102 position: relative;103 }104 .badge {105 position: absolute;106 top: -8px;107 right: -6px;108 background: #111;109 color: #fff;110 font-size: 30px;111 width: 54px;112 height: 54px;113 border-radius: 12px;114 display: flex;115 align-items: center;116 justify-content: center;117 box-shadow: 0 0 0 4px #fff;118 }119 120 /* Content */121 .content {122 position: absolute;123 top: 280px;124 left: 0;125 width: 1080px;126 padding: 0 50px 240px 50px;127 box-sizing: border-box;128 color: #222;129 }130 .desc {131 font-size: 40px;132 line-height: 58px;133 color: #333;134 margin-top: 20px;135 }136 .bullet-list {137 margin: 26px 0 0 0;138 padding-left: 30px;139 list-style: disc;140 color: #111;141 font-size: 40px;142 line-height: 64px;143 }144 .link {145 font-size: 40px;146 color: #4d4d4d;147 margin-top: 34px;148 }149 150 /* Controls */151 .control {152 width: 980px;153 margin: 40px auto 0 auto;154 box-sizing: border-box;155 }156 .pill {157 width: 980px;158 height: 150px;159 border: 2px solid #e5e5e5;160 border-radius: 90px;161 display: flex;162 align-items: center;163 justify-content: space-between;164 padding: 0 46px;165 box-sizing: border-box;166 background: #fff;167 color: #111;168 font-size: 46px;169 }170 .pill .chev {171 width: 40px;172 height: 40px;173 }174 .cta {175 width: 980px;176 height: 160px;177 border-radius: 90px;178 background: #111;179 color: #fff;180 font-size: 56px;181 font-weight: 700;182 display: flex;183 align-items: center;184 justify-content: center;185 margin: 36px auto 0 auto;186 }187 .fav-pill {188 width: 980px;189 height: 150px;190 border-radius: 90px;191 background: #fff;192 border: 2px solid #e5e5e5;193 display: flex;194 align-items: center;195 justify-content: space-between;196 padding: 0 46px;197 box-sizing: border-box;198 color: #111;199 font-size: 48px;200 margin: 30px auto 0 auto;201 }202 .fav-pill .heart {203 width: 60px;204 height: 60px;205 }206 207 /* Sections */208 .section {209 width: 980px;210 margin: 70px auto 0 auto;211 border-top: 2px solid #efefef;212 padding-top: 16px;213 }214 .section-row {215 height: 120px;216 display: flex;217 align-items: center;218 justify-content: space-between;219 font-size: 54px;220 color: #111;221 border-bottom: 2px solid #f2f2f2;222 }223 .row-small {224 height: 120px;225 font-size: 50px;226 }227 .stars {228 display: flex;229 align-items: center;230 gap: 18px;231 }232 .star {233 width: 50px;234 height: 50px;235 }236 .chev-right {237 width: 42px;238 height: 42px;239 }240 241 /* Bottom toast */242 .bottom-toast {243 position: absolute;244 left: 34px;245 right: 34px;246 bottom: 140px;247 height: 180px;248 background: #2f2f2f;249 color: #fff;250 border-radius: 24px;251 display: flex;252 align-items: center;253 justify-content: space-between;254 padding: 0 46px;255 box-sizing: border-box;256 font-size: 46px;257 }258 .share-ico {259 width: 56px;260 height: 56px;261 }262 263 /* Home indicator */264 .home-indicator {265 position: absolute;266 bottom: 24px;267 left: 50%;268 transform: translateX(-50%);269 width: 390px;270 height: 14px;271 background: #d0d0d0;272 border-radius: 8px;273 }274 275 /* Simple helpers for icons */276 svg { display: block; }277</style>278</head>279<body>280<div id="render-target">281 282 <!-- Status bar -->283 <div class="status-bar">284 <div>9:43</div>285 <div class="status-icons">286 <!-- Do Not Disturb circle -->287 <svg width="40" height="40">288 <circle cx="20" cy="20" r="18" stroke="#111" stroke-width="4" fill="none"></circle>289 </svg>290 <!-- Wi-Fi -->291 <svg width="46" height="40" viewBox="0 0 46 40">292 <path d="M4 10c7-6 31-6 38 0" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round"/>293 <path d="M9 18c5-4 23-4 28 0" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round"/>294 <path d="M15 26c3-2 15-2 18 0" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round"/>295 <circle cx="23" cy="32" r="3" fill="#111"></circle>296 </svg>297 <!-- Battery -->298 <div class="battery"><div class="level"></div></div>299 <div style="font-size:32px; color:#111;">52%</div>300 </div>301 </div>302 303 <!-- App bar -->304 <div class="app-bar">305 <div class="app-top">306 <div class="app-left">307 <!-- Back -->308 <div class="icon-btn">309 <svg width="64" height="64" viewBox="0 0 64 64">310 <path d="M36 12 L18 32 L36 52" stroke="#111" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>311 </svg>312 </div>313 <div class="title">Nike Air Max 97</div>314 </div>315 <div class="app-actions">316 <!-- Search -->317 <div class="icon-btn">318 <svg width="56" height="56" viewBox="0 0 56 56">319 <circle cx="24" cy="24" r="16" stroke="#111" stroke-width="4" fill="none"/>320 <path d="M36 36 L52 52" stroke="#111" stroke-width="4" stroke-linecap="round"/>321 </svg>322 </div>323 <!-- Cart -->324 <div class="icon-btn cart-wrap">325 <svg width="56" height="56" viewBox="0 0 56 56">326 <path d="M16 20 L40 20 L44 44 L12 44 Z" stroke="#111" stroke-width="4" fill="none" stroke-linejoin="round"/>327 <path d="M20 20 C20 14 36 14 36 20" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round"/>328 </svg>329 <div class="badge">3</div>330 </div>331 </div>332 </div>333 </div>334 335 <!-- Content -->336 <div class="content">337 <div class="desc">338 the running world and adding fresh colours and<br>339 crisp details, it lets you ride in first-class comfort.340 </div>341 342 <ul class="bullet-list">343 <li>Shown: Black/Anthracite/Picante Red</li>344 <li>Style: 921826-018</li>345 <li>Country/Region of Origin: Vietnam</li>346 </ul>347 348 <div class="link">View Product Details</div>349 350 <!-- Size picker -->351 <div class="control">352 <div class="pill">353 <div>Size UK 7</div>354 <svg class="chev" viewBox="0 0 24 24">355 <path d="M5 9 L12 16 L19 9" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>356 </svg>357 </div>358 </div>359 360 <!-- Add to Bag -->361 <div class="cta">Add to Bag</div>362 363 <!-- Favorited -->364 <div class="fav-pill">365 <div>Favorited</div>366 <svg class="heart" viewBox="0 0 24 24">367 <path d="M12 21 C12 21 3 14 3 8 C3 5.5 5 4 7 4 C9 4 11 5.5 12 7 C13 5.5 15 4 17 4 C19 4 21 5.5 21 8 C21 14 12 21 12 21 Z" fill="#111"/>368 </svg>369 </div>370 371 <!-- Sections -->372 <div class="section">373 <div class="section-row">374 <div>Size & Fit</div>375 <svg class="chev-right" viewBox="0 0 24 24">376 <path d="M9 6 L15 12 L9 18" stroke="#666" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>377 </svg>378 </div>379 380 <div class="section-row row-small">381 <div style="display:flex; align-items:center; gap:26px;">382 <div>Reviews (150)</div>383 <div class="stars">384 <svg class="star" viewBox="0 0 24 24">385 <path d="M12 2 L15 9 L22 9 L17 13 L19 20 L12 16 L5 20 L7 13 L2 9 L9 9 Z" fill="#111"/>386 </svg>387 <svg class="star" viewBox="0 0 24 24">388 <path d="M12 2 L15 9 L22 9 L17 13 L19 20 L12 16 L5 20 L7 13 L2 9 L9 9 Z" fill="#111"/>389 </svg>390 <svg class="star" viewBox="0 0 24 24">391 <path d="M12 2 L15 9 L22 9 L17 13 L19 20 L12 16 L5 20 L7 13 L2 9 L9 9 Z" fill="#111"/>392 </svg>393 <svg class="star" viewBox="0 0 24 24">394 <path d="M12 2 L15 9 L22 9 L17 13 L19 20 L12 16 L5 20 L7 13 L2 9 L9 9 Z" fill="#111"/>395 </svg>396 <svg class="star" viewBox="0 0 24 24">397 <path d="M12 2 L15 9 L22 9 L17 13 L19 20 L12 16 L5 20 L7 13 L2 9 L9 9 Z" fill="#111"/>398 </svg>399 </div>400 </div>401 <svg class="chev-right" viewBox="0 0 24 24">402 <path d="M9 6 L15 12 L9 18" stroke="#666" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>403 </svg>404 </div>405 406 <div class="section-row">407 <div>Product Information</div>408 <svg class="chev-right" viewBox="0 0 24 24">409 <path d="M9 6 L15 12 L9 18" stroke="#666" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>410 </svg>411 </div>412 </div>413 414 </div>415 416 <!-- Bottom toast -->417 <div class="bottom-toast">418 <div>Added to Favorites</div>419 <svg class="share-ico" viewBox="0 0 24 24">420 <circle cx="6" cy="12" r="3" fill="#fff"/>421 <circle cx="18" cy="6" r="3" fill="#fff"/>422 <circle cx="18" cy="18" r="3" fill="#fff"/>423 <path d="M8.5 11 L15 7.5" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>424 <path d="M8.5 13 L15 16.5" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>425 </svg>426 </div>427 428 <!-- Home indicator -->429 <div class="home-indicator"></div>430</div>431</body>432</html>