GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Product Details - Walking Shoe</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#ffffff; color:#222;11 }12 /* Status bar */13 .status-bar{14 height:72px; background:#efefef; color:#666; font-size:28px;15 display:flex; align-items:center; justify-content:space-between;16 padding:0 28px;17 }18 /* Top app bar */19 .app-bar{20 height:108px; display:flex; align-items:center; justify-content:space-between;21 padding:0 28px; border-bottom:1px solid #e5e5e5; background:#fff;22 }23 .icon-btn{ width:72px; height:72px; display:flex; align-items:center; justify-content:center; }24 .icon{ width:42px; height:42px; fill:#222; }25 /* Tabs */26 .tabs{27 display:flex; border-bottom:1px solid #e6e6e6; background:#fff;28 }29 .tab{30 flex:1; text-align:center; padding:28px 10px; font-weight:700; letter-spacing:.3px;31 color:#2c6db7;32 }33 .tab.inactive{ color:#4c4c4c; opacity:.75; }34 .tab.active{ position:relative; }35 .tab.active:after{36 content:""; position:absolute; left:0; right:0; bottom:0; height:8px; background:#2c6db7;37 }38 /* Content */39 .content{ padding:36px 40px 220px; line-height:1.5; }40 h2{ margin:0 0 22px; font-size:44px; }41 p{ margin:0 0 22px; font-size:34px; color:#555; }42 /* Advantages */43 .section-title{ font-size:44px; font-weight:800; margin:54px 0 18px; }44 .advantages{45 display:grid; grid-template-columns:1fr 1fr; grid-gap:24px 36px;46 margin-top:18px;47 }48 .adv{49 display:grid; grid-template-columns:88px 1fr; grid-column-gap:22px;50 align-items:start;51 }52 .adv .adv-ic{53 width:88px; height:88px; border-radius:10px; background:#f2f7ff; display:flex; align-items:center; justify-content:center;54 }55 .adv h3{ margin:0; font-size:44px; text-transform:lowercase; font-weight:800; }56 .adv p{ margin:8px 0 0; font-size:32px; color:#666; }57 /* Reviews */58 .reviews-wrap{ margin-top:36px; border-top:12px solid #f1f1f1; padding-top:30px; }59 .reviews-head{60 display:flex; align-items:center; justify-content:space-between;61 margin-bottom:28px;62 }63 .reviews-head .title{ font-size:44px; font-weight:800; }64 .caret{ width:36px; height:36px; transform:rotate(180deg); }65 .rating-area{ display:grid; grid-template-columns:340px 1fr; grid-gap:28px; }66 .rating-left{67 display:flex; flex-direction:column; align-items:flex-start; justify-content:center;68 }69 .big-rating{ font-size:92px; font-weight:800; line-height:1; }70 .star{71 width:48px; height:48px; fill:#f2c200; vertical-align:middle; margin-left:12px;72 }73 .verified{ margin-top:18px; color:#666; font-size:34px; }74 .bars{ padding-top:8px; }75 .bar-row{76 display:grid; grid-template-columns:46px 1fr 120px; align-items:center;77 margin:18px 0;78 font-size:34px; color:#333;79 }80 .bar-track{ height:18px; background:#efefef; border-radius:12px; overflow:hidden; margin:0 18px; }81 .bar-fill{ height:100%; background:#f2c200; width:0%; }82 .b5 .bar-fill{ width:75%; }83 .b4 .bar-fill{ width:18%; }84 .b3 .bar-fill{ width:4%; }85 .b2 .bar-fill{ width:2%; }86 .b1 .bar-fill{ width:5%; }87 /* Bottom actions */88 .bottom-area{89 position:absolute; left:0; right:0; bottom:0; padding:18px 24px 28px; background:transparent;90 }91 .cta-row{92 position:relative; padding-bottom:24px;93 }94 .review-btn{95 width:100%; height:120px; border-radius:22px; background:#2c6db7; color:#fff; font-size:42px; font-weight:800;96 display:flex; align-items:center; justify-content:center;97 box-shadow:0 6px 12px rgba(0,0,0,.15);98 }99 .add-to-cart{100 margin-top:20px; height:140px; background:#ffe24a; border-radius:18px;101 display:flex; align-items:center; justify-content:center; font-size:54px; font-weight:800; color:#222;102 box-shadow:0 -2px 0 rgba(0,0,0,.05) inset;103 }104 .floating-chat{105 position:absolute; right:36px; bottom:190px; width:150px; height:150px; background:#2c6db7;106 border-radius:75px; display:flex; align-items:center; justify-content:center;107 box-shadow:0 10px 20px rgba(0,0,0,.18);108 }109 .chat-ic{ width:70px; height:70px; fill:#fff; }110 .wish-card{111 position:absolute; left:36px; bottom:184px; width:150px; height:150px; background:#fff; border-radius:24px;112 border:1px solid #e8e8e8; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,.08);113 }114 .heart-plus{ width:70px; height:70px; fill:#2c6db7; }115 /* small helpers */116 .muted{ color:#777; }117</style>118</head>119<body>120<div id="render-target">121 122 <!-- Status Bar -->123 <div class="status-bar">124 <div>9:36</div>125 <div class="muted">◔ ▴</div>126 </div>127 128 <!-- App Bar -->129 <div class="app-bar">130 <div class="icon-btn">131 <svg class="icon" viewBox="0 0 24 24"><path d="M15.5 3.5 7 12l8.5 8.5-1.5 1.5L4 12 14 2l1.5 1.5z"/></svg>132 </div>133 <div style="display:flex; gap:24px;">134 <div class="icon-btn">135 <svg class="icon" viewBox="0 0 24 24"><path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm11 19-6-6"/></svg>136 </div>137 <div class="icon-btn">138 <svg class="icon" viewBox="0 0 24 24"><path d="M12 21c4-3.4 8-6.9 8-11.4C20 6.1 18 4 15.6 4c-1.8 0-3.1 1-3.6 2.3C11.5 5 10.2 4 8.4 4 6 4 4 6.1 4 9.6 4 14.1 8 17.6 12 21z" fill="none" stroke="#222" stroke-width="2"/></svg>139 </div>140 <div class="icon-btn">141 <svg class="icon" viewBox="0 0 24 24"><path d="M7 6h14l-2 9H9L7 6zm0 0H4M9 20a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm8 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" fill="#222"/></svg>142 </div>143 </div>144 </div>145 146 <!-- Tabs -->147 <div class="tabs">148 <div class="tab active">PRODUCT DETAILS</div>149 <div class="tab inactive">TECHNICAL INFORMATION</div>150 </div>151 152 <!-- Content -->153 <div class="content">154 <h2>Made For</h2>155 <p>This is an Occasional walking shoe which we advise using 1-2 times a week. Not to be used with any other sports. This shoe is designed only for walking.</p>156 157 <div class="section-title">Advantages</div>158 159 <div class="advantages">160 <div class="adv">161 <div class="adv-ic">162 <svg viewBox="0 0 64 64" width="52" height="52">163 <path d="M10 38c8-6 18-6 26 0M8 46c10-7 22-7 32 0" stroke="#2c6db7" stroke-width="4" fill="none" stroke-linecap="round"/>164 <path d="M12 30l4 4m-8 0l4-4" stroke="#2c6db7" stroke-width="3" fill="none" stroke-linecap="round"/>165 </svg>166 </div>167 <div>168 <h3>flexibility</h3>169 <p>The Flex‑H grooves make the sole more flexible.</p>170 </div>171 </div>172 173 <div class="adv">174 <div class="adv-ic">175 <svg viewBox="0 0 64 64" width="54" height="54">176 <path d="M10 34c24-2 22-16 42-18-8 8-8 18-20 22S14 40 10 34z" fill="none" stroke="#2c6db7" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>177 </svg>178 </div>179 <div>180 <h3>lightweight</h3>181 <p>Their light materials make fitness walking easier: 190g in size 8.5.</p>182 </div>183 </div>184 185 <div class="adv" style="grid-column:1 / span 1;">186 <div class="adv-ic">187 <svg viewBox="0 0 64 64" width="54" height="54">188 <rect x="10" y="14" width="44" height="28" rx="2" fill="none" stroke="#2c6db7" stroke-width="4"/>189 <path d="M22 14v28M34 14v28M10 26h44" stroke="#2c6db7" stroke-width="4"/>190 <path d="M16 50l6-8m10 8l6-8m10 8l6-8" stroke="#2c6db7" stroke-width="4" stroke-linecap="round"/>191 </svg>192 </div>193 <div>194 <h3>breathability</h3>195 <p>Ventilated 3D mesh fabric for good air circulation around your feet.</p>196 </div>197 </div>198 </div>199 200 <div class="reviews-wrap">201 <div class="reviews-head">202 <div class="title">REVIEWS</div>203 <svg class="caret" viewBox="0 0 24 24"><path d="M4 15l8-8 8 8" stroke="#777" stroke-width="2" fill="none"/></svg>204 </div>205 206 <div class="rating-area">207 <div class="rating-left">208 <div>209 <span class="big-rating">4.46</span>210 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>211 </div>212 <div class="verified">213 9409 Verified<br>Reviews214 </div>215 </div>216 217 <div class="bars">218 <div class="bar-row b5">219 <div>5 ★</div>220 <div class="bar-track"><div class="bar-fill"></div></div>221 <div class="muted">6369</div>222 </div>223 <div class="bar-row b4">224 <div>4 ★</div>225 <div class="bar-track"><div class="bar-fill"></div></div>226 <div class="muted">2012</div>227 </div>228 <div class="bar-row b3">229 <div>3 ★</div>230 <div class="bar-track"><div class="bar-fill"></div></div>231 <div class="muted">436</div>232 </div>233 <div class="bar-row b2">234 <div>2 ★</div>235 <div class="bar-track"><div class="bar-fill"></div></div>236 <div class="muted">187</div>237 </div>238 <div class="bar-row b1">239 <div>1 ★</div>240 <div class="bar-track"><div class="bar-fill"></div></div>241 <div class="muted">405</div>242 </div>243 </div>244 </div>245 </div>246 247 </div>248 249 <!-- Floating elements and bottom CTA -->250 <div class="bottom-area">251 <div class="cta-row">252 <div class="wish-card">253 <svg class="heart-plus" viewBox="0 0 24 24">254 <path d="M12 21c4-3.4 8-6.9 8-11.4C20 6.1 18 4 15.6 4c-1.8 0-3.1 1-3.6 2.3C11.5 5 10.2 4 8.4 4 6 4 4 6.1 4 9.6 4 14.1 8 17.6 12 21z" fill="none" stroke="#2c6db7" stroke-width="2"/>255 <path d="M12 7v6m-3-3h6" stroke="#2c6db7" stroke-width="2"/>256 </svg>257 </div>258 <div class="floating-chat">259 <svg class="chat-ic" viewBox="0 0 24 24"><path d="M12 3c5 0 9 3.1 9 7s-4 7-9 7l-2 4-1-4c-4 0-7-3.1-7-7s4-7 10-7z" /></svg>260 </div>261 <div class="review-btn">Write a review</div>262 </div>263 <div class="add-to-cart">264 ADD TO CART265 <svg style="width:56px;height:56px; margin-left:18px;" viewBox="0 0 24 24"><path d="M7 6h14l-2 9H9L7 6zm0 0H4M9 20a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm8 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/></svg>266 </div>267 </div>268 269</div>270</body>271</html>