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>Product Detail - Predator Accuracy+</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff;12  }13 14  /* Top hero section showing product images */15  .hero {16    position: absolute;17    top: 0; left: 0; width: 100%; height: 1500px;18    background: #e9eef1;19  }20  .close-btn {21    position: absolute; top: 260px; right: 40px; width: 64px; height: 64px; cursor: pointer;22  }23  .close-btn svg { width: 100%; height: 100%; }24  .vertical-indicator {25    position: absolute; right: 26px; top: 720px; width: 12px;26    display: flex; flex-direction: column; gap: 40px; align-items: center;27  }28  .indicator-dash {29    width: 6px; height: 40px; background: #000000; border-radius: 3px;30  }31 32  .shoe-main, .shoe-sole {33    width: 960px; margin-left: 60px; display: flex; align-items: center; justify-content: center;34    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;35  }36  .shoe-main { height: 420px; margin-top: 360px; }37  .shoe-sole { height: 360px; margin-top: 40px; }38 39  /* Thumbnail strip overlay */40  .thumb-strip {41    position: absolute; bottom: 220px; left: 0; width: 100%; height: 220px;42    background: rgba(240, 243, 245, 0.9); border-top: 1px solid #dcdcdc; display: flex; align-items: center;43  }44  .thumb-content { display: flex; align-items: center; gap: 40px; padding: 0 60px; width: 100%; }45  .new-pill {46    background: #ffffff; border: 2px solid #ffffff; padding: 18px 26px; color: #000; font-weight: 700; letter-spacing: 2px;47  }48  .thumb {49    width: 220px; height: 110px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;50    display: flex; align-items: center; justify-content: center; font-size: 22px;51  }52  .strip-scroll {53    position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);54    width: 160px; height: 14px; background: #d6d9dc; border-radius: 8px;55  }56 57  /* Product information section */58  .info {59    position: absolute; left: 60px; right: 60px; top: 1660px;60  }61  .fav {62    position: absolute; right: 0; top: 0; width: 64px; height: 64px;63  }64  .title {65    margin-top: 20px; margin-right: 100px;66    font-size: 56px; font-weight: 800; line-height: 1.1; letter-spacing: 1px; text-transform: uppercase; color: #111;67  }68  .meta { margin-top: 30px; display: flex; align-items: baseline; gap: 40px; }69  .price { font-size: 36px; font-weight: 800; color: #111; }70  .tag { font-size: 28px; letter-spacing: 3px; color: #333; text-transform: uppercase; }71 72  .cta {73    margin-top: 60px; width: 100%; height: 150px; background: #000; color: #fff; border: none;74    font-size: 34px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;75    display: flex; align-items: center; justify-content: space-between; padding: 0 40px; cursor: pointer;76  }77  .cta svg { width: 56px; height: 56px; fill: none; stroke: #fff; stroke-width: 6; }78 79  /* Bottom home indicator (visual) */80  .home-indicator {81    position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);82    width: 240px; height: 12px; background: #d3d3d3; border-radius: 8px;83  }84</style>85</head>86<body>87<div id="render-target">88 89  <div class="hero">90    <!-- Close (X) icon -->91    <div class="close-btn" aria-label="Close">92      <svg viewBox="0 0 64 64">93        <line x1="8" y1="8" x2="56" y2="56" stroke="#000" stroke-width="6" stroke-linecap="round"></line>94        <line x1="56" y1="8" x2="8" y2="56" stroke="#000" stroke-width="6" stroke-linecap="round"></line>95      </svg>96    </div>97 98    <!-- Vertical scroll indicator dashes -->99    <div class="vertical-indicator">100      <div class="indicator-dash"></div>101      <div class="indicator-dash" style="opacity: 0.75;"></div>102      <div class="indicator-dash" style="opacity: 0.5;"></div>103    </div>104 105    <!-- Main product images -->106    <div class="shoe-main">[IMG: Predator Cleats - Side View]</div>107    <div class="shoe-sole">[IMG: Predator Cleats - Sole View]</div>108 109    <!-- Thumbnail strip -->110    <div class="thumb-strip">111      <div class="thumb-content">112        <div class="new-pill">NEW</div>113        <div class="thumb">[IMG: Pink Cleats]</div>114        <div class="thumb">[IMG: Green Cleats]</div>115      </div>116      <div class="strip-scroll"></div>117    </div>118  </div>119 120  <!-- Product info -->121  <div class="info">122    <div class="fav" aria-label="Favorite">123      <svg viewBox="0 0 64 64">124        <path d="M32 55c-1 0-2-.3-2-.3S18 46 12 38c-6-8-5-18 2-23 6-4 14-2 18 4 4-6 12-8 18-4 7 5 8 15 2 23-6 8-20 16-20 16s-1 .3-2 .3z" fill="none" stroke="#000" stroke-width="4" stroke-linejoin="round"></path>125      </svg>126    </div>127 128    <div class="title">129      PREDATOR ACCURACY+<br>130      ARTIFICIAL GRASS CLEATS131    </div>132 133    <div class="meta">134      <div class="price">$300.00</div>135      <div class="tag">Performance</div>136    </div>137 138    <button class="cta">139      <span>SELECT SIZE</span>140      <svg viewBox="0 0 64 64">141        <path d="M20 12l24 20-24 20" />142      </svg>143    </button>144  </div>145 146  <div class="home-indicator"></div>147</div>148</body>149</html>