GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Detail - Chunky Chelsea Boots</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #FFFFFF;13 }14 .status-bar {15 position: absolute; top: 0; left: 0; width: 1080px; height: 160px; background: #CFCFCF;16 color: #fff; font-weight: 600; font-size: 40px; letter-spacing: 0.5px;17 }18 .status-bar .time { position: absolute; left: 40px; top: 52px; color: #ffffff; }19 .status-bar .icons { position: absolute; right: 40px; top: 52px; display: flex; align-items: center; gap: 26px; }20 .circle-btn {21 position: absolute; width: 120px; height: 120px; border-radius: 60px;22 background: #FFFFFF; box-shadow: 0 0 0 1px #E0E0E0 inset; display: flex; justify-content: center; align-items: center;23 }24 /* Back button */25 .back-btn { left: 40px; top: 190px; }26 /* Right floating action buttons */27 .bag-btn { right: 40px; top: 220px; }28 .heart-btn { right: 40px; top: 460px; }29 .badge {30 position: absolute; top: 18px; right: 18px;31 background: #000; color: #fff; font-size: 28px; line-height: 28px;32 padding: 2px 10px; border-radius: 14px;33 }34 35 .product-image {36 position: absolute; left: 50%; transform: translateX(-50%);37 top: 420px; width: 920px; height: 720px;38 background: #E0E0E0; border: 1px solid #BDBDBD;39 color: #757575; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 36px;40 }41 42 .pager-dots {43 position: absolute; top: 1180px; left: 0; width: 100%;44 display: flex; justify-content: center; gap: 18px;45 }46 .dot { width: 22px; height: 22px; border-radius: 11px; background: #E0E0E0; }47 .dot.active { background: #BDBDBD; }48 49 .promo {50 position: absolute; top: 1260px; left: 0; width: 100%; height: 220px;51 background: #F6F6F6; border-top: 1px solid #E9E9E9; border-bottom: 1px solid #E9E9E9;52 display: flex; align-items: center; justify-content: center; text-align: center; color: #333;53 padding: 0 80px; line-height: 1.6;54 }55 .promo .link { text-decoration: underline; cursor: pointer; }56 57 .content {58 position: absolute; left: 0; top: 1530px; width: 100%; padding: 0 60px;59 }60 .title-row { display: flex; align-items: center; justify-content: space-between; }61 .title { font-size: 56px; font-weight: 700; color: #111; margin: 0 0 16px 0; }62 .share-btn { width: 60px; height: 60px; }63 .rating { display: flex; align-items: center; gap: 16px; color: #111; }64 .reviews { color: #111; text-decoration: underline; font-size: 32px; }65 66 .controls {67 position: absolute; left: 0; top: 1820px; width: 100%; padding: 0 60px;68 display: flex; gap: 40px;69 }70 .select {71 flex: 1; height: 140px; border: 2px solid #D8D8D8; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; padding: 0 36px; font-size: 40px; color: #111;72 }73 .add-btn {74 flex: 1; height: 140px; background: #111; color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 44px; font-weight: 600;75 }76 77 .nav-pill {78 position: absolute; left: 50%; transform: translateX(-50%);79 bottom: 40px; width: 360px; height: 16px; background: #E0E0E0; border-radius: 12px;80 }81 82 /* Simple helper */83 .sr { font-size: 0; height: 0; width: 0; overflow: hidden; }84</style>85</head>86<body>87<div id="render-target">88 89 <!-- Status bar -->90 <div class="status-bar">91 <div class="time">4:24</div>92 <div class="icons">93 <!-- Simple dots/icons to hint connectivity -->94 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="6" fill="#ffffff" opacity="0.6"/></svg>95 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M3 16c3.5-5.5 14.5-5.5 18 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.9"/></svg>96 <svg width="44" height="44" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="14" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="2"/><rect x="7" y="8" width="10" height="8" fill="#fff"/></svg>97 </div>98 </div>99 100 <!-- Back button -->101 <div class="circle-btn back-btn">102 <svg width="56" height="56" viewBox="0 0 24 24">103 <path d="M15 6l-6 6 6 6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>104 </svg>105 </div>106 107 <!-- Bag button -->108 <div class="circle-btn bag-btn">109 <div class="badge">7</div>110 <svg width="56" height="56" viewBox="0 0 24 24">111 <path d="M7 8h10l-1 10H8L7 8z" fill="none" stroke="#222" stroke-width="2"/>112 <path d="M9 8a3 3 0 016 0" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round"/>113 </svg>114 </div>115 116 <!-- Heart button -->117 <div class="circle-btn heart-btn">118 <svg width="56" height="56" viewBox="0 0 24 24">119 <path d="M12 20s-7-4.5-7-9a4 4 0 017-2 4 4 0 017 2c0 4.5-7 9-7 9z" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>120 </svg>121 </div>122 123 <!-- Product image placeholder -->124 <div class="product-image">[IMG: Black Chunky Chelsea Boot]</div>125 126 <!-- Pager dots -->127 <div class="pager-dots">128 <div class="dot active"></div>129 <div class="dot"></div>130 <div class="dot"></div>131 <div class="dot"></div>132 </div>133 134 <!-- Promo strip -->135 <div class="promo">136 <div>137 Shop now, <strong>pay in 30 days</strong>. For H&M members with <strong>H&M × Klarna</strong>.<br>138 <span class="link">Learn more</span>139 </div>140 </div>141 142 <!-- Content -->143 <div class="content">144 <div class="title-row">145 <h1 class="title">Chunky Chelsea Boots</h1>146 <svg class="share-btn" viewBox="0 0 24 24">147 <circle cx="6" cy="12" r="2" fill="#111"/>148 <circle cx="18" cy="6" r="2" fill="#111"/>149 <circle cx="18" cy="18" r="2" fill="#111"/>150 <path d="M8 12l8-6M8 12l8 6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>151 </svg>152 </div>153 154 <div class="rating">155 <!-- Stars: 2 filled, 3 outlined -->156 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#111"/></svg>157 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#111"/></svg>158 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="none" stroke="#111" stroke-width="2"/></svg>159 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="none" stroke="#111" stroke-width="2"/></svg>160 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="none" stroke="#111" stroke-width="2"/></svg>161 <div class="reviews">(3 reviews)</div>162 </div>163 </div>164 165 <!-- Controls: size selector and add button -->166 <div class="controls">167 <div class="select">168 <span>10</span>169 <svg width="36" height="36" viewBox="0 0 24 24">170 <path d="M6 9l6 6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>171 </svg>172 </div>173 <div class="add-btn">174 <svg width="40" height="40" viewBox="0 0 24 24">175 <path d="M7 8h10l-1 10H8L7 8z" fill="none" stroke="#fff" stroke-width="2"/>176 <path d="M9 8a3 3 0 016 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>177 </svg>178 <span>Add</span>179 </div>180 </div>181 182 <!-- Bottom navigation pill -->183 <div class="nav-pill"></div>184 185</div>186</body>187</html>