GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Nike Product Detail Mock</title>7<style>8  body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#111; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#ffffff;13  }14 15  .status-bar {16    height:120px; background:#000; color:#fff;17    display:flex; align-items:center; justify-content:space-between;18    padding:0 42px; font-weight:600; font-size:40px;19  }20 21  .app-header {22    height:140px; display:flex; align-items:center; justify-content:space-between;23    padding:0 40px; border-bottom:1px solid #eee; background:#fff;24  }25  .app-header .title {26    font-size:50px; font-weight:700; margin-left:10px;27  }28  .left-group { display:flex; align-items:center; gap:20px; }29  .right-group { display:flex; align-items:center; gap:36px; }30 31  .content {32    padding:44px 56px 0 56px;33  }34  .price { font-size:44px; font-weight:600; margin:22px 0 36px 0; }35  .desc {36    font-size:38px; line-height:1.6; color:#222; margin-bottom:36px;37  }38  .bullets { font-size:38px; line-height:1.6; color:#222; margin:10px 0 40px 24px; }39  .link {40    font-size:40px; color:#8e8e8e; margin:20px 0 40px 0;41  }42 43  .size-picker {44    height:150px; border:2px solid #d9d9d9; border-radius:80px;45    display:flex; align-items:center; justify-content:center;46    font-size:44px; font-weight:700; color:#111;47    margin:36px 10px 48px 10px;48  }49  .add-bag {50    height:150px; border-radius:80px; background:#0f0f0f; color:#fff;51    display:flex; align-items:center; justify-content:center;52    font-size:46px; font-weight:700; margin:8px 10px 28px 10px;53  }54 55  .row-actions {56    display:flex; gap:32px; margin:20px 10px 64px 10px;57  }58  .outline-btn {59    flex:1; height:140px; border:2px solid #d9d9d9; border-radius:80px;60    display:flex; align-items:center; justify-content:center;61    font-size:44px; font-weight:700; color:#111; background:#fff;62  }63 64  .promo-card {65    margin:36px 30px; background:#f5f5f5; border-radius:20px;66    padding:40px; border:1px solid #eee;67  }68  .promo-title { font-size:44px; font-weight:800; margin-bottom:10px; }69  .promo-sub { font-size:36px; color:#444; }70 71  .home-indicator {72    position:absolute; bottom:24px; left:50%;73    width:280px; height:12px; margin-left:-140px; background:#000; opacity:.2; border-radius:8px;74  }75 76  /* Simple icon button reset */77  .icon-btn { width:64px; height:64px; display:inline-flex; align-items:center; justify-content:center; }78  svg { display:block; }79 80</style>81</head>82<body>83<div id="render-target">84 85  <!-- Top status bar -->86  <div class="status-bar">87    <div>10:56</div>88    <div style="font-size:36px; opacity:.9;">wifi 80%</div>89  </div>90 91  <!-- Header -->92  <div class="app-header">93    <div class="left-group">94      <div class="icon-btn" aria-label="Back">95        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">96          <path d="M15 18l-6-6 6-6"/>97        </svg>98      </div>99      <div class="title">Nike Waffle Debut</div>100    </div>101    <div class="right-group">102      <div class="icon-btn" aria-label="Search">103        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">104          <circle cx="11" cy="11" r="7"></circle>105          <path d="M21 21l-4.3-4.3"></path>106        </svg>107      </div>108      <div class="icon-btn" aria-label="Bag">109        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">110          <path d="M6 8h12l-1 12H7L6 8z"></path>111          <path d="M9 8V6a3 3 0 016 0v2"></path>112        </svg>113      </div>114    </div>115  </div>116 117  <!-- Content -->118  <div class="content">119    <div class="price">$75</div>120 121    <div class="desc">122      Retro gets modernized in the Nike Waffle Debut. Remember that smooth suede and nylon trend? It's back, along with the modernized 'wedge' midsole that feels incredibly plush. And to top it off, we've kept the classic on the bottom—the tried, true and trusted Waffle outsole—that adds traction, durability and heritage style to your step.123    </div>124 125    <ul class="bullets">126      <li>Shown: White/Summit White/White/Black</li>127      <li>Style: DH9522-103</li>128    </ul>129 130    <div class="link">View Product Details</div>131 132    <div class="size-picker">133      Size 8.5134      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" style="margin-left:14px;">135        <path d="M6 9l6 6 6-6"></path>136      </svg>137    </div>138 139    <div class="add-bag">Add to Bag</div>140 141    <div class="row-actions">142      <div class="outline-btn">Buy Now</div>143      <div class="outline-btn" aria-label="Favorite">144        <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">145          <path d="M20.8 8.5a5.3 5.3 0 00-9.1-3.7L11 5.5l-.7-.7a5.3 5.3 0 00-7.4 7.4l.7.7L11 21l7.4-7.1.7-.7a5.3 5.3 0 001.7-3.7z"></path>146        </svg>147      </div>148    </div>149 150    <div class="promo-card">151      <div class="promo-title">Shopping as It Should Be</div>152      <div class="promo-sub">Get free shipping on orders $50+</div>153      <div style="display:flex; gap:8px; margin-top:22px;">154        <div style="width:44px; height:6px; background:#111; opacity:.6; border-radius:4px;"></div>155        <div style="width:44px; height:6px; background:#ccc; border-radius:4px;"></div>156        <div style="width:44px; height:6px; background:#ccc; border-radius:4px;"></div>157      </div>158    </div>159  </div>160 161  <!-- Bottom home indicator -->162  <div class="home-indicator"></div>163</div>164</body>165</html>