GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Ultra 4D Product</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: "Helvetica Neue", Arial, sans-serif; }7  #render-target{8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#ffffff; color:#111;10  }11 12  /* Status bar */13  .status-bar{14    height:70px; padding:0 28px; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between;15    color:#000; font-weight:600; font-size:34px;16  }17  .status-icons{ display:flex; align-items:center; gap:18px; }18  .dot{ width:14px; height:14px; background:#AFAFAF; border-radius:50%; }19  .icon-wifi{ width:34px; height:22px; border:3px solid #555; border-top-left-radius:22px; border-top-right-radius:22px; border-bottom:none; position:relative; }20  .icon-battery{ width:52px; height:24px; border:3px solid #555; position:relative; }21  .icon-battery:after{ content:""; position:absolute; right:-8px; top:6px; width:6px; height:12px; background:#555; }22  .icon-signal{ width:28px; height:28px; border-left:6px solid #555; border-bottom:6px solid #555; transform:skewY(-35deg); }23 24  /* Header */25  .header{26    display:flex; align-items:center; justify-content:space-between;27    padding:26px 36px 14px 36px; font-size:48px; letter-spacing:4px; font-weight:700;28  }29  .price-pill{30    border:4px solid #000; padding:18px 30px; border-radius:14px; font-size:46px; font-weight:800; letter-spacing:4px;31  }32  .close-btn{33    position:absolute; right:36px; top:155px; width:56px; height:56px; cursor:pointer;34  }35  .close-btn:before, .close-btn:after{36    content:""; position:absolute; left:0; top:26px; width:56px; height:4px; background:#000;37  }38  .close-btn:before{ transform:rotate(45deg); }39  .close-btn:after{ transform:rotate(-45deg); }40 41  /* Thumbnails */42  .thumbs{43    display:flex; gap:46px; padding:22px 36px 26px 36px; border-bottom:2px solid #eee; overflow:hidden;44  }45  .thumb{46    width:150px; height:80px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:10px;47    display:flex; align-items:center; justify-content:center; color:#757575; font-size:24px;48  }49  .thumb.active{ outline:8px solid #EDEDED; box-shadow:0 0 0 6px #CFCFCF inset; }50 51  /* Promo note */52  .promo{53    color:#8a8a8a; font-size:36px; line-height:48px; padding:32px 40px 16px 40px;54  }55 56  /* Big headline */57  .headline{58    padding:36px 40px 10px 40px; font-size:84px; line-height:94px; font-weight:900; letter-spacing:2px;59  }60 61  /* Description paragraphs */62  .copy{63    padding:18px 40px; font-size:40px; line-height:58px; color:#222;64  }65 66  /* Link-like section titles */67  .link-title{68    padding:28px 40px; font-size:44px; letter-spacing:6px; font-weight:800;69  }70 71  /* Section header */72  .section-head{73    padding:36px 40px 0 40px; font-size:78px; font-weight:900; letter-spacing:2px;74  }75 76  .subhead{77    padding:36px 40px 6px 40px; font-size:56px; font-weight:900; letter-spacing:3px;78  }79 80  /* Bottom indicator */81  .home-indicator{82    position:absolute; bottom:24px; left:50%; transform:translateX(-50%);83    width:520px; height:14px; background:#cfcfcf; border-radius:10px;84  }85</style>86</head>87<body>88<div id="render-target">89 90  <!-- Status bar -->91  <div class="status-bar">92    <div>8:32</div>93    <div class="status-icons">94      <div class="dot"></div>95      <div class="dot"></div>96      <div class="dot"></div>97      <div class="icon-signal"></div>98      <div class="icon-wifi"></div>99      <div class="icon-battery"></div>100    </div>101  </div>102 103  <!-- Header row -->104  <div class="header">105    <div>ULTRA 4D</div>106    <div class="price-pill">$220.00</div>107  </div>108  <div class="close-btn" title="Close"></div>109 110  <!-- Thumbnail row -->111  <div class="thumbs">112    <div class="thumb">[IMG: Cream Shoe]</div>113    <div class="thumb">[IMG: Black Shoe]</div>114    <div class="thumb">[IMG: Mint Stripe]</div>115    <div class="thumb">[IMG: Beige Shoe]</div>116    <div class="thumb">[IMG: Grey/Black]</div>117    <div class="thumb active">[IMG: Green Stripe]</div>118  </div>119 120  <!-- Promo message -->121  <div class="promo">122    This product is excluded from all promotional discounts and offers. Try this shoe for 30 days and return hassle-free with our performance running shoe return guarantee.123  </div>124 125  <!-- Headline -->126  <div class="headline">127    IMPACT-ABSORBING<br>128    SHOES MADE IN PART WITH<br>129    RECYCLED MATERIALS.130  </div>131 132  <!-- Body copy -->133  <div class="copy">134    Wherever you go, these shoes make sure comfort is along for the ride. Made with a 3D-printed adidas 4D midsole, they offer ultimate impact absorption and stability on hard or uneven surfaces. The adidas PRIMEKNIT upper wraps your foot with a supportive fit that naturally conforms to every step. Beyond all that, they've got personality and style that upgrades any look.135    <br><br>136    Made with a series of recycled materials, this upper features at least 50% recycled content. This product represents just one of our solutions to help end plastic waste.137  </div>138 139  <!-- Specifications link-like text -->140  <div class="link-title">SPECIFICATIONS</div>141 142  <!-- Highlights -->143  <div class="section-head">HIGHLIGHTS</div>144 145  <div class="subhead">MADE IN PART WITH RECYCLED MATERIALS</div>146  <div class="copy" style="padding-top:0;">147    Made with a series of recycled materials, this upper features at least 50% recycled content. This product represents just one of our solutions to help end plastic waste.148  </div>149 150  <div class="home-indicator"></div>151</div>152</body>153</html>