GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Nike Bag - 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    background: #000000;23    color: #ffffff;24    padding: 0 36px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    box-sizing: border-box;29    font-size: 44px;30  }31  .status-right {32    display: flex;33    align-items: center;34    gap: 28px;35    font-size: 36px;36  }37  .icon-circle {38    width: 36px;39    height: 36px;40    border: 3px solid #fff;41    border-radius: 50%;42    opacity: 0.85;43  }44  .battery {45    display: inline-flex;46    align-items: center;47    gap: 12px;48  }49 50  /* Header */51  .header {52    position: absolute;53    top: 120px;54    left: 0;55    width: 1080px;56    height: 140px;57    background: #ffffff;58    display: flex;59    align-items: center;60    padding: 0 36px;61    box-sizing: border-box;62    border-bottom: 1px solid #eee;63  }64  .back-btn {65    width: 72px;66    height: 72px;67    display: inline-flex;68    align-items: center;69    justify-content: center;70    margin-right: 20px;71  }72  .header-title {73    font-size: 56px;74    font-weight: 700;75    color: #111;76  }77 78  /* Content area */79  .content {80    position: absolute;81    top: 260px;82    left: 0;83    right: 0;84    bottom: 0;85    padding: 0 36px 240px 36px;86    box-sizing: border-box;87    overflow: hidden;88  }89 90  .item {91    position: relative;92    padding-top: 24px;93    padding-bottom: 24px;94    border-bottom: 1px solid #e9e9e9;95  }96  .item-row {97    display: flex;98    gap: 36px;99  }100  .thumb {101    width: 420px;102    height: 360px;103    background: #E0E0E0;104    border: 1px solid #BDBDBD;105    display: flex;106    align-items: center;107    justify-content: center;108    color: #757575;109    font-size: 34px;110    text-align: center;111  }112  .details {113    flex: 1;114    padding-top: 6px;115  }116  .title {117    font-size: 48px;118    font-weight: 700;119    color: #111;120    margin-bottom: 16px;121  }122  .sub {123    font-size: 38px;124    color: #666;125    margin-bottom: 10px;126    line-height: 1.35;127  }128  .qty-price {129    margin-top: 18px;130    display: flex;131    align-items: flex-start;132    justify-content: space-between;133  }134  .qty {135    font-size: 42px;136    color: #111;137    display: inline-flex;138    align-items: center;139    gap: 14px;140  }141  .chev {142    width: 26px;143    height: 26px;144  }145  .price-block {146    text-align: right;147  }148  .mrp {149    font-size: 44px;150    font-weight: 800;151    color: #111;152  }153  .tax {154    margin-top: 12px;155    font-size: 34px;156    color: #777;157    line-height: 1.3;158  }159 160  /* Summary */161  .summary {162    padding-top: 36px;163    padding-bottom: 24px;164  }165  .sum-row {166    display: flex;167    align-items: center;168    justify-content: space-between;169    font-size: 44px;170    color: #333;171    margin: 20px 0;172  }173  .sum-row .amount {174    color: #333;175  }176  .est {177    font-weight: 800;178    font-size: 48px;179  }180 181  /* Checkout button */182  .checkout {183    position: absolute;184    bottom: 180px;185    left: 60px;186    width: 960px;187    height: 180px;188    background: #111111;189    border-radius: 90px;190    display: flex;191    align-items: center;192    justify-content: center;193    color: #ffffff;194    font-size: 56px;195    font-weight: 700;196    box-shadow: 0 6px 18px rgba(0,0,0,0.2);197  }198 199  /* Home indicator */200  .home-indicator {201    position: absolute;202    bottom: 70px;203    left: 50%;204    transform: translateX(-50%);205    width: 520px;206    height: 16px;207    background: #CFCFCF;208    border-radius: 8px;209  }210</style>211</head>212<body>213<div id="render-target">214 215  <!-- Status bar -->216  <div class="status-bar">217    <div>9:41</div>218    <div class="status-right">219      <div class="icon-circle"></div>220      <div class="icon-circle"></div>221      <div class="battery">222        <span>51%</span>223      </div>224    </div>225  </div>226 227  <!-- Header -->228  <div class="header">229    <div class="back-btn">230      <svg width="58" height="58" viewBox="0 0 24 24">231        <path d="M15 19L8 12l7-7" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>232      </svg>233    </div>234    <div class="header-title">Bag</div>235  </div>236 237  <!-- Content -->238  <div class="content">239    <!-- Item 1 -->240    <div class="item">241      <div class="item-row">242        <div class="thumb">[IMG: Black Nike Air Max 97]</div>243        <div class="details">244          <div class="title">Nike Air Max 97</div>245          <div class="sub">Men's Shoes</div>246          <div class="sub">Black/Anthracite/Picante Red</div>247          <div class="sub">Size 7</div>248 249          <div class="qty-price">250            <div class="qty">251              <span>Qty 2</span>252              <svg class="chev" viewBox="0 0 24 24">253                <path d="M6 9l6 6 6-6" fill="none" stroke="#111" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>254              </svg>255            </div>256            <div class="price-block">257              <div class="mrp">MRP : ₹ 33 990.00</div>258              <div class="tax">Incl. of taxes<br>(Also includes all applicable duties)</div>259            </div>260          </div>261        </div>262      </div>263    </div>264 265    <!-- Item 2 -->266    <div class="item">267      <div class="item-row">268        <div class="thumb">[IMG: Nike Air Max 95 - Custom]</div>269        <div class="details">270          <div class="title">Nike Air Max 95 By You</div>271          <div class="sub">Custom Men's Shoe</div>272          <div class="sub">Multi-Colour/Multi-Colour/Multi-Colour</div>273          <div class="sub">Size 10</div>274 275          <div class="qty-price">276            <div class="qty">277              <span>Qty 1</span>278              <svg class="chev" viewBox="0 0 24 24">279                <path d="M6 9l6 6 6-6" fill="none" stroke="#111" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>280              </svg>281            </div>282            <div class="price-block">283              <div class="mrp">MRP : ₹ 18 195.00</div>284              <div class="tax">Incl. of taxes<br>(Also includes all applicable duties)</div>285            </div>286          </div>287        </div>288      </div>289    </div>290 291    <!-- Summary -->292    <div class="summary">293      <div class="sum-row">294        <div>Subtotal</div>295        <div class="amount">₹ 52 185.00</div>296      </div>297      <div class="sum-row">298        <div>Shipping</div>299        <div class="amount">₹ 1 250.00</div>300      </div>301      <div class="sum-row est">302        <div>Estimated Total</div>303        <div>₹ 53 435.00</div>304      </div>305    </div>306  </div>307 308  <!-- Checkout button -->309  <div class="checkout">Checkout</div>310 311  <!-- Home indicator -->312  <div class="home-indicator"></div>313 314</div>315</body>316</html>