GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Flipkart Product Details - Adidas</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;9    position: relative; overflow: hidden;10    background: #ffffff; color: #222;11  }12  .status-bar {13    height: 84px;14    padding: 0 30px;15    display: flex; align-items: center; justify-content: space-between;16    font-size: 30px; color: #333;17  }18  .status-icons { display: flex; align-items: center; gap: 22px; }19  .icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; }20  .top-search {21    height: 140px;22    display: flex; align-items: center;23    padding: 0 24px;24    gap: 20px;25    border-bottom: 1px solid #eee;26  }27  .pill {28    flex: 1;29    background: #f0f0f0;30    border-radius: 18px;31    height: 110px;32    display: flex; align-items: center;33    padding: 0 36px;34    font-size: 36px; color: #666;35  }36  .pill .right-icon { margin-left: auto; opacity: 0.7; }37  .section {38    padding: 34px 38px;39    border-bottom: 1px solid #f0f0f0;40  }41  .brand-row { display: flex; align-items: center; gap: 24px; }42  .img-placeholder {43    width: 100px; height: 100px; background: #E0E0E0;44    border: 1px solid #BDBDBD; display: flex; justify-content: center; align-items: center;45    color: #757575; font-size: 26px; border-radius: 10px;46  }47  .subtle { color: #777; font-size: 30px; }48  .brand-title { font-weight: 700; font-size: 44px; }49  .feature {50    display: flex; align-items: flex-start; gap: 20px;51    margin-top: 24px;52  }53  .feature .text-block { line-height: 1.35; }54  .feature .title { font-size: 40px; font-weight: 700; }55  .feature .desc { font-size: 30px; color: #777; margin-top: 6px; }56  .divider { height: 22px; background: #f7f7f7; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }57  .heading { font-size: 46px; font-weight: 800; margin-bottom: 16px; }58  .detail-grid { display: grid; grid-template-columns: 1fr 1fr; row-gap: 28px; column-gap: 24px; }59  .detail-label { color: #888; font-size: 34px; }60  .detail-value { font-size: 36px; font-weight: 700; }61  .long-text { font-size: 34px; line-height: 1.55; color: #333; }62  .link { color: #1a73e8; font-size: 34px; margin-top: 28px; }63  /* bottom bar */64  .bottom-bar {65    position: absolute; bottom: 0; left: 0; right: 0;66    height: 170px; display: flex;67    box-shadow: 0 -4px 12px rgba(0,0,0,0.08);68    background: #ffffff;69  }70  .btn {71    flex: 1; display: flex; align-items: center; justify-content: center;72    font-size: 44px; font-weight: 800; letter-spacing: 0.2px;73  }74  .btn-cart { color: #111; }75  .btn-buy { background: #f2c230; color: #111; }76  /* floating help */77  .floating-help {78    position: absolute; right: 36px; bottom: 230px;79    width: 140px; height: 140px; background: #2e6ef7; border-radius: 70px;80    box-shadow: 0 10px 24px rgba(0,0,0,0.2);81    display: flex; align-items: center; justify-content: center;82  }83  .help-inner {84    width: 100px; height: 100px; background: #ffd54f; border-radius: 50%;85    display: flex; align-items: center; justify-content: center;86    font-weight: 900; color: #2e6ef7; font-size: 48px;87  }88</style>89</head>90<body>91<div id="render-target">92 93  <!-- Status bar -->94  <div class="status-bar">95    <div style="display:flex; align-items:center; gap:18px;">96      <span>5:12</span>97      <span style="font-size:26px; color:#777;">•</span>98    </div>99    <div class="status-icons">100      <!-- mail icon -->101      <svg class="icon" viewBox="0 0 24 24">102        <path d="M3 6h18v12H3z" fill="none" stroke="#555" stroke-width="2"/>103        <path d="M3 6l9 7 9-7" fill="none" stroke="#555" stroke-width="2"/>104      </svg>105      <!-- wifi -->106      <svg class="icon" viewBox="0 0 24 24">107        <path d="M2 9c5-4 15-4 20 0" stroke="#555" stroke-width="2" fill="none"/>108        <path d="M5 12c3-2 11-2 14 0" stroke="#555" stroke-width="2" fill="none"/>109        <circle cx="12" cy="16" r="2" fill="#555"/>110      </svg>111      <!-- battery -->112      <svg class="icon" viewBox="0 0 24 24">113        <rect x="3" y="6" width="16" height="12" rx="2" ry="2" fill="none" stroke="#555" stroke-width="2"/>114        <rect x="5" y="8" width="12" height="8" fill="#4caf50"/>115        <rect x="19" y="10" width="2" height="8" fill="#555"/>116      </svg>117    </div>118  </div>119 120  <!-- Top search bar -->121  <div class="top-search">122    <!-- back -->123    <svg width="64" height="64" viewBox="0 0 24 24">124      <path d="M15 19L8 12l7-7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>125    </svg>126 127    <div class="pill">128      <span>Search for products</span>129      <div class="right-icon">130        <!-- mic -->131        <svg width="52" height="52" viewBox="0 0 24 24">132          <rect x="9" y="4" width="6" height="10" rx="3" fill="#777"/>133          <path d="M5 11c0 4 3 6 7 6s7-2 7-6" stroke="#777" stroke-width="2" fill="none"/>134          <path d="M12 17v3" stroke="#777" stroke-width="2"/>135        </svg>136      </div>137    </div>138 139    <!-- cart -->140    <svg width="64" height="64" viewBox="0 0 24 24">141      <circle cx="9" cy="20" r="2" fill="#333"/>142      <circle cx="17" cy="20" r="2" fill="#333"/>143      <path d="M5 6h16l-2 9H8L6 6z" fill="none" stroke="#333" stroke-width="2"/>144    </svg>145  </div>146 147  <!-- Brand section -->148  <div class="section">149    <div class="subtle">About the brand</div>150    <div class="brand-row" style="margin-top:18px;">151      <div class="img-placeholder">[IMG: Adidas]</div>152      <div class="brand-title">ADIDAS</div>153    </div>154 155    <!-- features -->156    <div class="feature">157      <svg width="46" height="46" viewBox="0 0 24 24">158        <path d="M4 16l6-6 4 4 6-6" stroke="#2e7d32" stroke-width="2" fill="none"/>159        <path d="M4 20h16" stroke="#2e7d32" stroke-width="2"/>160      </svg>161      <div class="text-block">162        <div class="title">Favorite in Walking</div>163        <div class="desc">Based on recent orders on Flipkart</div>164      </div>165    </div>166 167    <div class="feature">168      <svg width="46" height="46" viewBox="0 0 24 24">169        <path d="M12 2l3 7 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#f5c84c" stroke="#d4a72f" stroke-width="1"/>170      </svg>171      <div class="text-block">172        <div class="title">Loved by customers</div>173        <div class="desc">Based on customer ratings</div>174      </div>175    </div>176 177    <div class="feature">178      <svg width="46" height="46" viewBox="0 0 24 24">179        <path d="M6 2h12v20l-6-4-6 4z" fill="none" stroke="#333" stroke-width="2"/>180      </svg>181      <div class="text-block">182        <div class="title">8+ years on Flipkart</div>183        <div class="desc">Trusted brand on Flipkart</div>184      </div>185    </div>186  </div>187 188  <div class="divider"></div>189 190  <!-- Product details heading + grid -->191  <div class="section">192    <div class="heading">Product Details</div>193    <div class="detail-grid" style="margin-top:20px;">194      <div class="detail-label">Outer material</div>195      <div class="detail-value">Synthetic</div>196 197      <div class="detail-label">Occasion</div>198      <div class="detail-value">Sports</div>199 200      <div class="detail-label">Type For Sports</div>201      <div class="detail-value">Walking Shoes</div>202    </div>203  </div>204 205  <!-- Details paragraph -->206  <div class="section" style="padding-bottom: 260px;">207    <div class="heading" style="margin-bottom: 22px;">Details</div>208    <div class="long-text">209      Light Weight Shoe And Mesh With 4 Way Stretching Lining & Binding Which Is Very Comfortable For Insertion Of Foot On The Shoe.210      Pop Webbing On Eye Stay & Decorative Stitch On Vamp & Quarter With The 3D Print Branding On The Back & Front Webbing Is Giving The Classy Look Of The Shoe.211      Sole :- Built To Keep You Running In Comfort , These WomenS Shoes Have A Cloud Foam For Responsive Cushioning , Ultimate Durability And A Durable Outsole Gives Them Long Lasting Wear212    </div>213    <div class="link">All Details</div>214  </div>215 216  <!-- floating help button -->217  <div class="floating-help">218    <div class="help-inner">F</div>219  </div>220 221  <!-- bottom action bar -->222  <div class="bottom-bar">223    <div class="btn btn-cart">Add to cart</div>224    <div class="btn btn-buy">Buy now</div>225  </div>226 227</div>228</body>229</html>