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 Go - Product Page</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#ffffff;11  }12 13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; width:100%; height:120px;16    background:#000; color:#fff; display:flex; align-items:center; padding:0 36px;17    box-sizing:border-box; font-size:36px;18  }19  .status-bar .time { font-weight:600; }20  .status-icons { margin-left:auto; display:flex; gap:26px; align-items:center; }21  .dot { width:14px; height:14px; background:#fff; border-radius:50%; opacity:0.9; }22  .wifi { width:34px; height:34px; border:3px solid #fff; border-top:none; border-left:none; transform:rotate(45deg); border-radius:4px; opacity:0.9; }23  .battery {24    width:44px; height:24px; border:3px solid #fff; border-radius:4px; position:relative; opacity:0.9;25  }26  .battery::after { content:''; position:absolute; right:-8px; top:6px; width:6px; height:12px; background:#fff; border-radius:2px; }27 28  /* Header */29  .app-bar {30    position:absolute; top:120px; left:0; width:100%; height:120px;31    background:#ffffff; border-bottom:1px solid #eee;32    display:flex; align-items:center; padding:0 32px; box-sizing:border-box;33  }34  .app-title { font-size:52px; font-weight:700; color:#111; margin-left:16px; }35  .app-actions { margin-left:auto; display:flex; gap:30px; }36  .icon-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }37  .icon {38    width:48px; height:48px; fill:none; stroke:#111; stroke-width:48; stroke-linecap:round; stroke-linejoin:round;39  }40  .back-icon { width:56px; height:56px; }41 42  /* Image strip */43  .image-strip {44    position:absolute; top:240px; left:0; width:100%; height:240px;45    display:flex; gap:24px; padding:24px 32px; box-sizing:border-box;46    background:#fff;47  }48  .thumb {49    flex:0 0 300px; height:192px; background:#E0E0E0; border:1px solid #BDBDBD;50    display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px;51    border-radius:8px;52  }53  .stock-label {54    position:absolute; top:270px; left:320px;55    background:#f1f1f1; color:#666; padding:12px 20px; border-radius:24px; font-size:36px; font-weight:600;56  }57 58  /* Content */59  .content {60    position:absolute; top:480px; left:0; width:100%; padding:0 48px; box-sizing:border-box; color:#222;61  }62  .product-title { font-size:96px; font-weight:800; margin-top:20px; }63  .subtitle { font-size:44px; color:#444; line-height:1.4; margin-bottom:16px; }64  .price { font-size:48px; font-weight:700; margin-top:20px; }65  .tax { font-size:36px; color:#666; margin-top:12px; }66  .desc { font-size:40px; color:#333; line-height:1.6; margin-top:36px; }67  .bullets { margin-top:40px; font-size:40px; color:#222; line-height:1.7; }68  .bullets li { margin:14px 0; }69  .link { margin-top:40px; font-size:44px; color:#2b6ef2; font-weight:600; }70 71  /* Size selector and Add to Bag */72  .bottom-controls {73    position:absolute; bottom:220px; left:0; width:100%; padding:0 48px; box-sizing:border-box;74  }75  .size-row {76    width:984px; height:140px; border:2px solid #ddd; border-radius:80px;77    display:flex; align-items:center; justify-content:center; font-size:52px; color:#111; font-weight:700;78    background:#fff;79  }80  .caret { margin-left:18px; width:0; height:0; border-left:16px solid transparent; border-right:16px solid transparent; border-top:24px solid #111; }81  .bag-btn {82    margin-top:40px; width:984px; height:168px; background:#111; color:#fff; font-size:64px; font-weight:800;83    border-radius:100px; display:flex; align-items:center; justify-content:center;84    box-shadow:0 8px 20px rgba(0,0,0,0.15);85  }86 87  /* Overlay - Adding to Bag */88  .overlay {89    position:absolute; top:120px; left:0; width:100%; height:2280px;90    background:rgba(0,0,0,0.6);91    display:flex; flex-direction:column; align-items:center; justify-content:center;92    color:#fff;93  }94  .spinner {95    width:160px; height:160px; border-radius:50%;96    border:12px solid rgba(255,255,255,0.35);97    border-top-color:#fff;98    animation:spin 1.2s linear infinite;99    margin-bottom:28px;100  }101  @keyframes spin { from { transform:rotate(0deg);} to { transform:rotate(360deg);} }102  .overlay-text { font-size:56px; font-weight:700; }103 104</style>105</head>106<body>107<div id="render-target">108 109  <!-- Status Bar -->110  <div class="status-bar">111    <div class="time">8:13</div>112    <div class="status-icons">113      <div class="dot"></div>114      <div class="dot"></div>115      <div class="dot"></div>116      <div class="dot"></div>117      <div class="wifi"></div>118      <div class="battery"></div>119    </div>120  </div>121 122  <!-- Header -->123  <div class="app-bar">124    <div class="icon-btn">125      <svg class="back-icon" viewBox="0 0 24 24">126        <path d="M15 6 L9 12 L15 18" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>127      </svg>128    </div>129    <div class="app-title">Nike Go</div>130    <div class="app-actions">131      <div class="icon-btn">132        <svg class="icon" viewBox="0 0 100 100">133          <circle cx="42" cy="42" r="26" stroke="#111" stroke-width="8" fill="none"/>134          <line x1="66" y1="66" x2="92" y2="92" stroke="#111" stroke-width="10" stroke-linecap="round"/>135        </svg>136      </div>137      <div class="icon-btn">138        <svg class="icon" viewBox="0 0 100 100">139          <path d="M18 30 H82 L78 78 H22 Z" stroke="#111" stroke-width="8" fill="none" stroke-linejoin="round"/>140          <circle cx="36" cy="84" r="6" fill="#111"/>141          <circle cx="68" cy="84" r="6" fill="#111"/>142        </svg>143      </div>144    </div>145  </div>146 147  <!-- Image strip -->148  <div class="image-strip">149    <div class="thumb">[IMG: Leggings Hero]</div>150    <div class="thumb">[IMG: Model Pose 1]</div>151    <div class="thumb">[IMG: Model Pose 2]</div>152  </div>153  <div class="stock-label">Out of Stock</div>154 155  <!-- Content -->156  <div class="content">157    <div class="subtitle">Women's Firm-Support High-Waisted Leggings with Pockets</div>158    <div class="product-title">Nike Go</div>159    <div class="price">MRP : ₹ 5 795.00</div>160    <div class="tax">Incl. of taxes</div>161    <div class="tax">(Also includes all applicable duties)</div>162 163    <div class="desc">164      Push yourself forwards with the right balance of support and comfort with our Nike Go leggings.165      Squat-proof—even during your toughest workouts—their sleek, midweight InfinaLock fabric feels166      compressive and supportive in all the right places. Multiple pockets let you carry everything you167      could need, whether you're hitting the trail, the gym or the mat.168    </div>169 170    <ul class="bullets">171      <li>Shown: Black/Black</li>172      <li>Style: DQ5669-010</li>173      <li>Country/Region of Origin: China</li>174    </ul>175 176    <div class="link">View Product Details</div>177  </div>178 179  <!-- Bottom controls -->180  <div class="bottom-controls">181    <div class="size-row">Size L <span class="caret"></span></div>182    <div class="bag-btn">Add to Bag</div>183  </div>184 185  <!-- Overlay: Adding to Bag -->186  <div class="overlay">187    <div class="spinner"></div>188    <div class="overlay-text">Adding to Bag</div>189  </div>190 191</div>192</body>193</html>