GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Amazon Joggers Product Page Mock</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#ffffff; border-radius:28px; box-shadow:0 2px 14px rgba(0,0,0,0.08);10  }11 12  /* Top gradient header */13  .header {14    position:absolute; top:0; left:0; width:100%; height:260px;15    background:linear-gradient(180deg,#AEE5E1 0%, #8FD8D3 100%);16  }17 18  /* Status bar */19  .status {20    position:absolute; top:18px; left:24px; right:24px; height:44px; display:flex; align-items:center; justify-content:space-between;21    color:#1e1e1e; font-size:34px; letter-spacing:0.4px;22  }23  .status .icons { display:flex; align-items:center; gap:16px; }24  .dot { width:14px; height:14px; background:#1e1e1e; border-radius:50%; display:inline-block; }25 26  /* Search bar */27  .search-wrap { position:absolute; top:92px; left:24px; right:24px; height:120px; display:flex; align-items:center; }28  .back-btn {29    width:100px; height:100px; display:flex; align-items:center; justify-content:center; margin-right:16px;30  }31  .back-btn svg { width:56px; height:56px; }32  .search-bar {33    flex:1; height:100px; background:#fff; border-radius:26px; box-shadow:0 6px 16px rgba(0,0,0,0.12);34    display:flex; align-items:center; padding:0 24px; border:1px solid #d6d6d6;35  }36  .search-icon { width:56px; height:56px; margin-right:18px; }37  .search-input {38    flex:1; font-size:36px; color:#666; white-space:nowrap;39  }40  .search-actions { display:flex; align-items:center; gap:22px; }41  .action-ic { width:56px; height:56px; }42 43  /* Content body */44  .content {45    position:absolute; top:260px; left:0; right:0; bottom:0; overflow-y:auto;46    padding:30px 40px 240px 40px; background:#ffffff;47  }48  .small-line { font-size:30px; color:#444; margin-bottom:14px; }49  .image {50    background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;51    display:flex; align-items:center; justify-content:center; text-align:center;52  }53  .hero {54    width:912px; height:628px; margin:0 auto 36px auto; border-radius:12px;55    font-size:36px; padding:16px;56  }57 58  .title {59    font-weight:800; font-size:54px; color:#111; letter-spacing:0.3px;60    margin:22px 0 18px 0; line-height:1.1;61  }62  .para {63    font-size:34px; color:#222; line-height:1.45; margin-bottom:22px;64  }65 66  .thumbs-row {67    display:flex; gap:24px; justify-content:space-between; align-items:flex-end;68    margin-top:20px; margin-bottom:26px;69  }70  .thumb { width:318px; height:360px; border-radius:10px; font-size:28px; }71  .center-stack { position:relative; }72  .overlay-text {73    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);74    font-size:74px; font-weight:800; color:#5b5b5b; letter-spacing:4px; opacity:0.6;75  }76 77  /* Bottom navigation */78  .bottom-nav {79    position:absolute; bottom:70px; left:0; width:100%; height:170px; border-top:1px solid #e5e5e5;80    background:#ffffff; display:flex; align-items:flex-start; justify-content:space-around; padding-top:24px;81  }82  .nav-item { display:flex; flex-direction:column; align-items:center; gap:12px; color:#222; font-size:28px; }83  .nav-item .ico { width:64px; height:64px; }84  .nav-item.active { color:#0d6f72; }85  .home-indicator {86    position:absolute; bottom:18px; left:50%; transform:translateX(-50%);87    width:260px; height:16px; background:#cfcfcf; border-radius:12px;88  }89</style>90</head>91<body>92<div id="render-target">93 94  <!-- Header with search -->95  <div class="header">96    <div class="status">97      <div>10:01</div>98      <div class="icons">99        <span class="dot"></span>100        <span class="dot" style="opacity:.7"></span>101        <span class="dot" style="opacity:.5"></span>102        <!-- WiFi icon -->103        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">104          <path d="M2 8c5-4 15-4 20 0" stroke="#1e1e1e" stroke-width="2" stroke-linecap="round"/>105          <path d="M5 12c3-3 11-3 14 0" stroke="#1e1e1e" stroke-width="2" stroke-linecap="round"/>106          <path d="M9 16c2-2 4-2 6 0" stroke="#1e1e1e" stroke-width="2" stroke-linecap="round"/>107          <circle cx="12" cy="19" r="1.6" fill="#1e1e1e"/>108        </svg>109        <!-- Battery icon -->110        <svg width="50" height="44" viewBox="0 0 28 24" fill="none">111          <rect x="2" y="6" width="20" height="12" rx="2" stroke="#1e1e1e" stroke-width="2"/>112          <rect x="4" y="8" width="14" height="8" rx="1.5" fill="#1e1e1e"/>113          <rect x="22" y="10" width="4" height="4" rx="1" fill="#1e1e1e"/>114        </svg>115      </div>116    </div>117 118    <div class="search-wrap">119      <div class="back-btn">120        <svg viewBox="0 0 24 24">121          <path d="M15 5L8 12l7 7" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>122        </svg>123      </div>124      <div class="search-bar">125        <svg class="search-icon" viewBox="0 0 24 24">126          <circle cx="10" cy="10" r="6" stroke="#333" stroke-width="2" fill="none"/>127          <path d="M21 21l-5.2-5.2" stroke="#333" stroke-width="2" stroke-linecap="round"/>128        </svg>129        <div class="search-input">Search Amazon.in</div>130        <div class="search-actions">131          <!-- Camera -->132          <svg class="action-ic" viewBox="0 0 24 24" fill="none">133            <rect x="3" y="6" width="18" height="12" rx="2.5" stroke="#333" stroke-width="2"/>134            <path d="M8 6l2-2h4l2 2" stroke="#333" stroke-width="2" stroke-linecap="round"/>135            <circle cx="12" cy="12" r="3.5" stroke="#333" stroke-width="2"/>136          </svg>137          <!-- Mic -->138          <svg class="action-ic" viewBox="0 0 24 24" fill="none">139            <rect x="9" y="4" width="6" height="10" rx="3" stroke="#333" stroke-width="2"/>140            <path d="M5 11a7 7 0 0014 0" stroke="#333" stroke-width="2" stroke-linecap="round"/>141            <path d="M12 18v3" stroke="#333" stroke-width="2" stroke-linecap="round"/>142          </svg>143        </div>144      </div>145    </div>146  </div>147 148  <!-- Body content -->149  <div class="content">150    <div class="small-line">5% spandex.</div>151 152    <div class="image hero">[IMG: Person in green joggers posing with shaker bottle]</div>153 154    <div class="title">REASONS TO LOVE THESE TRACK PANTS</div>155    <div class="para">156      With quality construction and excellent value for money, these joggers for men are a perfect replacement for your old and torn joggers. Our trackpant offers a stylish design with functionalities like a stretchable waistband for a snug fit with an antique brass metal eyelet, a tonal drawstring for an adjustable fit, and two pockets on both sides to keep your essentials in place.157    </div>158 159    <div class="thumbs-row">160      <div class="image thumb">[IMG: Model skipping rope wearing joggers]</div>161      <div class="center-stack" style="width:318px; height:360px;">162        <div class="image thumb">[IMG: Model standing in black joggers]</div>163        <div class="overlay-text">JOGGERS</div>164      </div>165      <div class="image thumb">[IMG: Seated model in green joggers with shaker]</div>166    </div>167 168    <div class="para">169      Our track lower pants are machine washable and require low maintenance, making this cotton pant a convenient addition to your wardrobe. These mens170    </div>171  </div>172 173  <!-- Bottom nav -->174  <div class="bottom-nav">175    <div class="nav-item active">176      <svg class="ico" viewBox="0 0 24 24" fill="none">177        <path d="M3 11l9-7 9 7v9a2 2 0 01-2 2H5a2 2 0 01-2-2v-9z" stroke="#0d6f72" stroke-width="2"/>178        <path d="M9 21v-6h6v6" stroke="#0d6f72" stroke-width="2"/>179      </svg>180      <div>Home</div>181    </div>182    <div class="nav-item">183      <svg class="ico" viewBox="0 0 24 24" fill="none">184        <circle cx="12" cy="8" r="4" stroke="#222" stroke-width="2"/>185        <path d="M4 21c2.5-5 13.5-5 16 0" stroke="#222" stroke-width="2" stroke-linecap="round"/>186      </svg>187      <div>You</div>188    </div>189    <div class="nav-item">190      <svg class="ico" viewBox="0 0 24 24" fill="none">191        <rect x="4" y="4" width="16" height="6" rx="1.5" stroke="#222" stroke-width="2"/>192        <rect x="4" y="12" width="16" height="8" rx="1.5" stroke="#222" stroke-width="2"/>193      </svg>194      <div>More</div>195    </div>196    <div class="nav-item">197      <svg class="ico" viewBox="0 0 24 24" fill="none">198        <path d="M6 6h12l-2 12H8L6 6z" stroke="#222" stroke-width="2"/>199        <circle cx="10" cy="20" r="1.8" fill="#222"/>200        <circle cx="16" cy="20" r="1.8" fill="#222"/>201      </svg>202      <div>Cart</div>203    </div>204    <div class="nav-item">205      <svg class="ico" viewBox="0 0 24 24" fill="none">206        <path d="M4 6h16M4 12h16M4 18h16" stroke="#222" stroke-width="2" stroke-linecap="round"/>207      </svg>208      <div>Menu</div>209    </div>210  </div>211 212  <div class="home-indicator"></div>213</div>214</body>215</html>