GD-ML/AndroidCode
13.4k
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 - Dark</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }9 #render-target{10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#1f1f1f; color:#eaeaea; 12 }13 14 /* Top status bar (mock) */15 .statusbar{ height:120px; background:#000; color:#fff; padding:0 36px; display:flex; align-items:center; justify-content:space-between; font-size:34px; }16 .status-icons{ display:flex; gap:24px; align-items:center; }17 .dot{ width:10px; height:10px; background:#bdbdbd; border-radius:50%; display:inline-block; }18 .icon-pill{ width:30px; height:30px; border-radius:50%; border:2px solid #bdbdbd; }19 20 /* Layout helpers */21 .content{ padding:28px 36px 24px; }22 .thumbs{ display:flex; gap:22px; margin-top:10px; }23 .thumb{ width:180px; height:180px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#6b6b6b; font-size:26px; }24 .thumb.selected{ outline:6px solid #dedede; }25 h1{ font-size:46px; line-height:1.3; font-weight:600; margin:34px 0 22px; color:#f1f1f1; }26 .price{ margin:4px 0 20px; }27 .price .was{ color:#bdbdbd; text-decoration:line-through; font-size:32px; display:block; margin-bottom:6px; }28 .price .now{ color:#ff4c78; font-size:40px; font-weight:800; }29 .price .off{ color:#ff4c78; font-weight:700; font-size:34px; margin-left:8px; }30 31 .divider{ height:2px; background:#333; margin:36px 0; }32 33 /* Size row */34 .row-between{ display:flex; align-items:center; justify-content:space-between; }35 .size-label{ letter-spacing:2px; font-size:30px; font-weight:700; color:#d5d5d5; }36 .chev svg{ width:46px; height:46px; }37 38 /* Add to bag area */39 .bag-area{ display:flex; align-items:center; gap:28px; margin:26px 0 32px; }40 .bag-btn{ flex:1; height:126px; background:#0fa155; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:36px; font-weight:800; letter-spacing:2px; }41 .wish{ width:126px; height:126px; border-radius:63px; background:#2a2a2a; border:2px solid #444; display:flex; align-items:center; justify-content:center; }42 43 /* Free delivery box */44 .info-box{ border:2px solid #3a3a3a; padding:28px; border-radius:4px; margin-top:10px; }45 .info-box .title-line{ display:flex; align-items:center; gap:18px; font-size:30px; color:#e7e7e7; }46 .info-box .sub{ margin-top:18px; font-size:32px; font-weight:700; color:#f6f6f6; }47 48 /* Accordions */49 .accordion{ margin-top:18px; }50 .acc-item{ border-top:2px solid #2e2e2e; background:#242424; }51 .acc-btn{ padding:34px 24px; display:flex; align-items:center; justify-content:space-between; font-size:34px; font-weight:700; color:#eaeaea; }52 .plus svg{ width:48px; height:48px; }53 54 /* Recommendations */55 .rec-head{ display:flex; align-items:center; justify-content:space-between; padding:34px 0 18px; }56 .rec-head .left{ font-size:34px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }57 .rec-head .count{ color:#c8c8c8; font-size:28px; }58 .rec-list{ display:flex; gap:34px; overflow:hidden; }59 .card{ width:486px; background:#121212; border-radius:6px; border:1px solid #2e2e2e; }60 .card .img{ width:100%; height:520px; background:#E0E0E0; border-bottom:1px solid #BDBDBD; color:#6b6b6b; display:flex; align-items:center; justify-content:center; font-size:30px; }61 .card .cap{ padding:18px 20px 24px; color:#e5e5e5; font-size:28px; }62 63 /* Bottom home indicator */64 .home-indicator{ position:absolute; left:50%; transform:translateX(-50%); bottom:26px; width:300px; height:10px; border-radius:10px; background:#cfcfcf; opacity:.6; }65 66 a { color:#fff; text-decoration:none; border-bottom:2px solid #5f5f5f; padding-bottom:2px; }67</style>68</head>69<body>70<div id="render-target">71 72 <!-- Mock status bar -->73 <div class="statusbar">74 <div>10:52</div>75 <div class="status-icons">76 <span class="icon-pill"></span>77 <span class="icon-pill"></span>78 <span class="icon-pill"></span>79 <span class="dot"></span>80 <span class="dot"></span>81 <span>90%</span>82 </div>83 </div>84 85 <div class="content">86 <!-- Thumbnails -->87 <div class="thumbs">88 <div class="thumb selected">[IMG: Shoe Thumbnail]</div>89 <div class="thumb">[IMG: Shoe Thumbnail]</div>90 <div class="thumb">[IMG: Shoe Thumbnail]</div>91 <div class="thumb">[IMG: Shoe Thumbnail]</div>92 </div>93 94 <!-- Title & Price -->95 <h1>Under Armour Charged Bandit Trail 2 trainers in black</h1>96 <div class="price">97 <span class="was">£84.00</span>98 <span class="now">£67.50</span>99 <span class="off">(-19%)</span>100 </div>101 102 <div class="divider"></div>103 104 <!-- Size row -->105 <div class="row-between">106 <div class="size-label">SIZE</div>107 <div class="chev">108 <svg viewBox="0 0 24 24">109 <path d="M5 9l7 7 7-7" stroke="#d0d0d0" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>110 </svg>111 </div>112 </div>113 114 <div class="divider"></div>115 116 <!-- Add to bag -->117 <div class="bag-area">118 <div class="bag-btn">ADD TO BAG</div>119 <div class="wish">120 <svg viewBox="0 0 24 24" width="54" height="54">121 <path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z" fill="none" stroke="#ffffff" stroke-width="1.8" stroke-linejoin="round"></path>122 </svg>123 </div>124 </div>125 126 <!-- Free delivery -->127 <div class="info-box">128 <div class="title-line">129 <svg viewBox="0 0 24 24" width="40" height="40">130 <rect x="2" y="6" width="12" height="8" fill="none" stroke="#eaeaea" stroke-width="1.8"></rect>131 <path d="M14 9h4l3 3v2h-3" fill="none" stroke="#eaeaea" stroke-width="1.8"></path>132 <circle cx="7" cy="17" r="2" fill="none" stroke="#eaeaea" stroke-width="1.8"></circle>133 <circle cx="18" cy="17" r="2" fill="none" stroke="#eaeaea" stroke-width="1.8"></circle>134 </svg>135 <span>Free Delivery</span>136 </div>137 <div class="sub"><a href="#">View our Delivery & Returns Policy</a></div>138 </div>139 140 <!-- Accordions -->141 <div class="accordion">142 <div class="acc-item">143 <div class="acc-btn">144 <span>Product details</span>145 <span class="plus">146 <svg viewBox="0 0 24 24">147 <path d="M12 5v14M5 12h14" stroke="#dcdcdc" stroke-width="2" fill="none" stroke-linecap="round"></path>148 </svg>149 </span>150 </div>151 </div>152 <div class="acc-item">153 <div class="acc-btn">154 <span>Brand</span>155 <span class="plus">156 <svg viewBox="0 0 24 24">157 <path d="M12 5v14M5 12h14" stroke="#dcdcdc" stroke-width="2" fill="none" stroke-linecap="round"></path>158 </svg>159 </span>160 </div>161 </div>162 <div class="acc-item">163 <div class="acc-btn">164 <span>Look after me</span>165 <span class="plus">166 <svg viewBox="0 0 24 24">167 <path d="M12 5v14M5 12h14" stroke="#dcdcdc" stroke-width="2" fill="none" stroke-linecap="round"></path>168 </svg>169 </span>170 </div>171 </div>172 <div class="acc-item">173 <div class="acc-btn">174 <span>About me</span>175 <span class="plus">176 <svg viewBox="0 0 24 24">177 <path d="M12 5v14M5 12h14" stroke="#dcdcdc" stroke-width="2" fill="none" stroke-linecap="round"></path>178 </svg>179 </span>180 </div>181 </div>182 </div>183 184 <!-- Recommendations -->185 <div class="rec-head">186 <div class="left">You might also like</div>187 <div class="count">16 items</div>188 </div>189 <div class="rec-list">190 <div class="card">191 <div class="img">[IMG: Suggested Joggers]</div>192 <div class="cap">Under Armour Rival fleece joggers in gray</div>193 </div>194 <div class="card">195 <div class="img">[IMG: Suggested Leggings]</div>196 <div class="cap">Under Armour training leggings in pink</div>197 </div>198 </div>199 200 </div>201 202 <div class="home-indicator"></div>203</div>204</body>205</html>