GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Nike Air Max 97 - Mobile Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color:#111; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden; background:#ffffff;10  }11  .screen {12    position:absolute; inset:0; overflow-y:auto; -webkit-overflow-scrolling: touch;13  }14  /* Status bar */15  .status-bar {16    height:90px; background:#000; color:#fff; display:flex; align-items:center; justify-content:space-between;17    padding:0 34px; font-size:36px; box-sizing:border-box;18  }19  .status-icons{ display:flex; gap:24px; align-items:center; }20  /* Header */21  .header {22    height:140px; display:flex; align-items:center; padding:0 32px; box-sizing:border-box; border-bottom:1px solid #eee;23  }24  .title { font-size:54px; font-weight:700; margin-left:20px; }25  .header-actions { margin-left:auto; display:flex; gap:28px; align-items:center; }26  .icon-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }27  /* Thumbnails */28  .thumb-row { display:flex; gap:28px; padding:28px 32px; box-sizing:border-box; }29  .thumb {30    flex:1; height:260px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#555; font-size:30px;31  }32  .out-of-stock-label {33    text-align:center; color:#888; font-size:40px; margin-top:8px;34  }35  /* Content */36  .section { padding:20px 40px; box-sizing:border-box; }37  .subtitle { color:#333; font-size:38px; margin-top:6px; }38  .product-name { font-size:86px; font-weight:800; margin:12px 0 10px; }39  .price { font-size:44px; font-weight:700; margin:8px 0; }40  .muted { color:#6a6a6a; font-size:34px; line-height:1.35; }41  .desc { margin-top:36px; font-size:38px; line-height:1.55; color:#222; letter-spacing:0.2px; }42  .bullets { margin-top:36px; padding-left:40px; }43  .bullets li { font-size:38px; margin:14px 0; }44  .link { color:#1a73e8; font-size:40px; margin:36px 0 24px; display:inline-block; }45  /* Size selector */46  .size-select {47    margin:10px 40px 30px; height:140px; border:1px solid #ddd; border-radius:70px; display:flex; align-items:center; justify-content:center;48    font-size:48px; background:#fff;49  }50  /* Add to bag footer button */51  .footer-spacer { height:40px; }52  .add-to-bag {53    position:sticky; bottom:0; padding:24px 32px 34px; background:transparent;54  }55  .bag-btn {56    width:100%; height:150px; background:#111; color:#fff; font-size:56px; font-weight:800; border:none; border-radius:90px;57  }58 59  /* Simple helper */60  .badge {61    position:absolute; top:-6px; right:-6px; background:#fff; color:#111; border:2px solid #111;62    width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:700;63  }64  .relative { position:relative; }65</style>66</head>67<body>68<div id="render-target">69  <div class="screen">70    <!-- Status Bar -->71    <div class="status-bar">72      <div>9:42</div>73      <div class="status-icons">74        <!-- simple dot for network -->75        <svg width="38" height="38" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="3"/></svg>76        <!-- wifi -->77        <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">78          <path d="M2 8c5-4 15-4 20 0"/><path d="M5 12c3-3 11-3 14 0"/><path d="M8 16c2-2 6-2 8 0"/><circle cx="12" cy="19" r="1.5" fill="#fff" stroke="none"/>79        </svg>80        <!-- battery -->81        <svg width="56" height="28" viewBox="0 0 36 18">82          <rect x="1" y="3" width="30" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"/>83          <rect x="3" y="5" width="26" height="8" rx="1" fill="#fff"/>84          <rect x="32" y="6" width="3" height="6" rx="1" fill="#fff"/>85        </svg>86        <span style="font-size:32px;">51%</span>87      </div>88    </div>89 90    <!-- Header -->91    <div class="header">92      <!-- Back Arrow -->93      <div class="icon-btn" aria-label="Back">94        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.5">95          <path d="M15 5l-7 7 7 7"/>96        </svg>97      </div>98      <div class="title">Nike Air Max 97</div>99      <div class="header-actions">100        <!-- Search -->101        <div class="icon-btn" aria-label="Search">102          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.5">103            <circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/>104          </svg>105        </div>106        <!-- Bag with badge -->107        <div class="icon-btn relative" aria-label="Cart">108          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">109            <rect x="6" y="7" width="12" height="12" rx="2"/>110            <path d="M9 7V6a3 3 0 0 1 6 0v1"/>111          </svg>112          <div class="badge">3</div>113        </div>114      </div>115    </div>116 117    <!-- Thumbnails -->118    <div class="thumb-row">119      <div class="thumb">[IMG: Black/Red Nike Shoe]</div>120      <div class="thumb" style="opacity:0.9;">[IMG: Grey/Red Nike Shoe]</div>121      <div class="thumb">[IMG: White/Purple Nike Shoe]</div>122    </div>123    <div class="out-of-stock-label">Out of Stock</div>124 125    <!-- Product Content -->126    <div class="section">127      <div class="subtitle">Men's Shoes</div>128      <div class="product-name">Nike Air Max 97</div>129      <div class="price">MRP : ₹ 16 995.00</div>130      <div class="muted">Incl. of taxes</div>131      <div class="muted">(Also includes all applicable duties)</div>132 133      <div class="desc">134        Featuring the original ripple design inspired by Japanese bullet trains, the Nike Air Max 97 lets you push your style full-speed ahead.135        Taking the revolutionary full-length Nike Air unit that shook up the running world and adding fresh colours and crisp details,136        it lets you ride in first-class comfort.137      </div>138 139      <ul class="bullets">140        <li>Shown: Black/Anthracite/Picante Red</li>141        <li>Style: 921826-018</li>142        <li>Country/Region of Origin: Vietnam</li>143      </ul>144 145      <a class="link">View Product Details</a>146    </div>147 148    <!-- Size selector -->149    <div class="size-select">150      Size UK 7151      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" style="margin-left:14px;">152        <path d="M6 9l6 6 6-6"/>153      </svg>154    </div>155 156    <div class="footer-spacer"></div>157 158    <!-- Add to Bag -->159    <div class="add-to-bag">160      <button class="bag-btn">Add to Bag</button>161    </div>162 163    <div style="height:140px"></div>164  </div>165</div>166</body>167</html>