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 Page Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff; color: #222;13 }14 .status-bar {15 height: 70px; display: flex; align-items: center; justify-content: space-between;16 padding: 0 40px; font-size: 28px; color: #6b6b6b;17 }18 .app-bar {19 height: 120px; display: flex; align-items: center; justify-content: space-between;20 padding: 0 30px; border-bottom: 1px solid #eee;21 }22 .app-left, .app-right { display: flex; align-items: center; gap: 28px; }23 .icon-btn { width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; }24 .tabs {25 height: 110px; display: flex; align-items: center; gap: 60px;26 padding: 0 40px; border-bottom: 1px solid #eee; font-size: 34px; color: #888;27 }28 .tab-active { color: #ff7a00; display: flex; align-items: center; gap: 16px; font-weight: 600; }29 .section { padding: 34px 40px; border-top: 1px solid #f0f0f0; }30 .product-img {31 width: 1000px; height: 160px; margin: 0 40px; background: #E0E0E0; border: 1px solid #BDBDBD;32 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px;33 }34 .title { font-size: 44px; font-weight: 700; margin-bottom: 22px; }35 .delivery-row { font-size: 34px; color: #555; margin-top: 6px; }36 .price-bold { font-weight: 700; color: #111; }37 .pill { display: inline-block; background: #dff2e6; color: #3a7d57; border-radius: 24px; padding: 10px 18px; font-size: 28px; margin-left: 16px; }38 .muted { color: #9c9c9c; }39 .trade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 10px; }40 .trade-item { display: flex; align-items: center; gap: 16px; font-size: 34px; color: #444; }41 .share-banner {42 margin: 0 0; padding: 30px 40px; background: #FFF3E6; color: #ff8a00; display: flex; align-items: center; justify-content: space-between;43 }44 .share-left { display: flex; align-items: center; gap: 18px; font-size: 36px; font-weight: 600; }45 .chevron { color: #c7c7c7; }46 .reviews-head { display: flex; align-items: center; justify-content: space-between; }47 .stars { display: inline-flex; gap: 6px; }48 .badge { background: #f1f1f1; color: #666; padding: 12px 20px; border-radius: 28px; font-size: 30px; display: inline-flex; align-items: center; gap: 8px; }49 .review-card { margin-top: 22px; }50 .username { font-size: 32px; margin-top: 24px; color: #333; }51 .review-text { margin-top: 16px; font-size: 32px; line-height: 1.4; color: #444; }52 .divider { height: 1px; background: #eee; margin: 26px 0; }53 .view-all { text-align: center; font-size: 34px; color: #666; padding: 18px 0; }54 .store-reviews-head { display: flex; align-items: center; justify-content: space-between; }55 .chips { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 24px; }56 .chip { padding: 16px 26px; border-radius: 40px; background: #f5f5f7; color: #555; font-size: 32px; border: 1px solid #e6e6e8; }57 .bottom-bar {58 position: absolute; left: 0; bottom: 60px; width: 100%; padding: 20px 30px;59 background: #fff; border-top: 1px solid #ececec; display: flex; align-items: center; justify-content: space-between;60 }61 .mini-actions { display: flex; gap: 30px; }62 .mini-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 150px; color: #333; }63 .cta { width: 650px; height: 120px; background: #ffcc00; border-radius: 60px; display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 700; color: #222; }64 .gesture-bar { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); width: 360px; height: 10px; background: #d1d1d1; border-radius: 6px; }65 /* small icon colors */66 .icon-gray { stroke: #777; }67 .icon-dark { stroke: #222; }68 .icon-fill-orange { fill: #ff8a00; }69 .text-green { color: #3a7d57; }70</style>71</head>72<body>73<div id="render-target">74 75 <!-- Status bar -->76 <div class="status-bar">77 <div>10:08 21°</div>78 <div style="display:flex; align-items:center; gap:20px;">79 <!-- simple status icons -->80 <svg width="32" height="32"><circle cx="16" cy="16" r="12" fill="#999"/></svg>81 <svg width="32" height="32"><circle cx="16" cy="16" r="12" fill="#999"/><path d="M16 4v12l8 8" stroke="#fff" stroke-width="3" fill="none"/></svg>82 <svg width="32" height="32"><rect x="4" y="6" width="24" height="20" rx="4" fill="#aaa"/></svg>83 <svg width="32" height="32"><polygon points="2,30 14,6 26,30" fill="#777"/></svg>84 </div>85 </div>86 87 <!-- App bar with navigation icons -->88 <div class="app-bar">89 <div class="app-left">90 <div class="icon-btn">91 <svg width="44" height="44" viewBox="0 0 44 44">92 <path d="M26 10 L14 22 L26 34" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>93 </svg>94 </div>95 <div class="icon-btn">96 <svg width="44" height="44" viewBox="0 0 44 44">97 <path d="M8 12 H36 M8 22 H28 M8 32 H24" stroke="#222" stroke-width="4" stroke-linecap="round"/>98 <circle cx="32" cy="12" r="4" fill="#ff3d3d"/>99 </svg>100 </div>101 </div>102 <div class="app-right">103 <div class="icon-btn">104 <svg width="44" height="44" viewBox="0 0 44 44">105 <circle cx="20" cy="20" r="12" stroke="#222" stroke-width="3" fill="none"/>106 <path d="M30 30 L38 38" stroke="#222" stroke-width="3" stroke-linecap="round"/>107 </svg>108 </div>109 <div class="icon-btn">110 <svg width="44" height="44" viewBox="0 0 44 44">111 <circle cx="20" cy="20" r="14" fill="#ffd44d" stroke="#222" stroke-width="2"/>112 <text x="17" y="25" font-size="16" font-weight="700" fill="#222">€</text>113 </svg>114 </div>115 <div class="icon-btn">116 <svg width="44" height="44" viewBox="0 0 44 44">117 <path d="M10 12 H36 L34 26 H14 L12 12 Z" stroke="#222" stroke-width="3" fill="none" stroke-linejoin="round"/>118 <circle cx="16" cy="32" r="3" fill="#222"/>119 <circle cx="30" cy="32" r="3" fill="#222"/>120 </svg>121 </div>122 </div>123 </div>124 125 <!-- Tabs -->126 <div class="tabs">127 <div class="tab-active">128 <svg width="30" height="30" viewBox="0 0 24 24">129 <path d="M12 2 C8 2 6 5 6 8 C6 12 12 22 12 22 C12 22 18 12 18 8 C18 5 16 2 12 2 Z" fill="#ff8a00"/>130 <circle cx="12" cy="8" r="3" fill="#fff"/>131 </svg>132 <span>Overview</span>133 </div>134 <div>Reviews</div>135 <div>Description</div>136 <div>Recommend</div>137 </div>138 139 <!-- Product image snippet -->140 <div class="product-img">[IMG: Product Photo]</div>141 142 <!-- Delivery Section -->143 <div class="section">144 <div class="title">Delivery</div>145 <div class="delivery-row">Shipping Cost: <span class="price-bold">€ 5.75</span><span class="pill">Cost-effective</span></div>146 <div class="delivery-row">To <span class="price-bold">United States</span> via <span class="price-bold">ePacket</span> <span class="muted">Estimated Delivery time</span> <span class="price-bold">Nov 11 to Dec 3</span></div>147 </div>148 149 <!-- Trade Protection -->150 <div class="section" style="padding-top: 24px;">151 <div class="title">Trade Protection</div>152 <div class="trade-grid">153 <div class="trade-item">154 <svg width="40" height="40" viewBox="0 0 24 24">155 <path d="M12 3 L20 7 V13 C20 16 16 20 12 21 C8 20 4 16 4 13 V7 Z" stroke="#444" stroke-width="2" fill="none"/>156 <path d="M8 11 H16" stroke="#444" stroke-width="2"/>157 </svg>158 <span>Buyer Protection</span>159 </div>160 <div class="trade-item">161 <svg width="40" height="40" viewBox="0 0 24 24">162 <rect x="4" y="6" width="16" height="12" rx="2" stroke="#444" stroke-width="2" fill="none"/>163 <path d="M8 10 H16" stroke="#444" stroke-width="2"/>164 </svg>165 <span>Secure Payment</span>166 </div>167 <div class="trade-item">168 <svg width="40" height="40" viewBox="0 0 24 24">169 <path d="M12 3 L20 7 V13 C20 16 16 20 12 21 C8 20 4 16 4 13 V7 Z" stroke="#444" stroke-width="2" fill="none"/>170 <path d="M9 13 L12 16 L16 10" stroke="#444" stroke-width="2" fill="none"/>171 </svg>172 <span>Return Policy</span>173 </div>174 <div class="trade-item">175 <svg width="40" height="40" viewBox="0 0 24 24">176 <circle cx="12" cy="12" r="9" stroke="#444" stroke-width="2" fill="none"/>177 <path d="M8 12 H12 M12 12 H16" stroke="#444" stroke-width="2"/>178 </svg>179 <span>Refund for No Delivery</span>180 </div>181 </div>182 </div>183 184 <!-- Share to earn banner -->185 <div class="share-banner">186 <div class="share-left">187 <svg width="44" height="44" viewBox="0 0 44 44">188 <circle cx="22" cy="22" r="20" fill="#ffd44d" stroke="#ff8a00" stroke-width="3"/>189 <text x="18" y="27" font-size="18" font-weight="700" fill="#ff8a00">$</text>190 </svg>191 <span>Share To Earn 0,38 €</span>192 </div>193 <svg width="30" height="30" viewBox="0 0 24 24" class="chevron">194 <path d="M9 6 L15 12 L9 18" stroke="#c7c7c7" stroke-width="3" fill="none" stroke-linecap="round"/>195 </svg>196 </div>197 198 <!-- Reviews -->199 <div class="section">200 <div class="reviews-head">201 <div class="title" style="margin-bottom:0;">Reviews</div>202 <div style="display:flex; align-items:center; gap:16px; font-size:34px;">203 <div class="stars">204 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 2 L14.6 8.3 L21.3 9.1 L16.5 13.6 L17.9 20.2 L12 16.8 L6.1 20.2 L7.5 13.6 L2.7 9.1 L9.4 8.3 Z" fill="#f8b400"/></svg>205 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 2 L14.6 8.3 L21.3 9.1 L16.5 13.6 L17.9 20.2 L12 16.8 L6.1 20.2 L7.5 13.6 L2.7 9.1 L9.4 8.3 Z" fill="#f8b400"/></svg>206 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 2 L14.6 8.3 L21.3 9.1 L16.5 13.6 L17.9 20.2 L12 16.8 L6.1 20.2 L7.5 13.6 L2.7 9.1 L9.4 8.3 Z" fill="#f8b400"/></svg>207 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 2 L14.6 8.3 L21.3 9.1 L16.5 13.6 L17.9 20.2 L12 16.8 L6.1 20.2 L7.5 13.6 L2.7 9.1 L9.4 8.3 Z" fill="#f8b400"/></svg>208 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 2 L14.6 8.3 L21.3 9.1 L16.5 13.6 L17.9 20.2 L12 16.8 L6.1 20.2 L7.5 13.6 L2.7 9.1 L9.4 8.3 Z" fill="#f8b400"/></svg>209 </div>210 <span>5.0</span>211 <svg width="30" height="30" viewBox="0 0 24 24">212 <path d="M9 6 L15 12 L9 18" stroke="#c7c7c7" stroke-width="3" fill="none" stroke-linecap="round"/>213 </svg>214 </div>215 </div>216 217 <div class="review-card">218 <div class="badge">5 ☆ (1)</div>219 <div class="username">cdk***est <span style="font-size:28px; color:#999;">• V1</span></div>220 <div style="display:flex; align-items:center; gap:10px; margin-top:10px;">221 <div class="stars">222 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2 L14.6 8.3 L21.3 9.1 L16.5 13.6 L17.9 20.2 L12 16.8 L6.1 20.2 L7.5 13.6 L2.7 9.1 L9.4 8.3 Z" fill="#f8b400"/></svg>223 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2 L14.6 8.3 L21.3 9.1 L16.5 13.6 L17.9 20.2 L12 16.8 L6.1 20.2 L7.5 13.6 L2.7 9.1 L9.4 8.3 Z" fill="#f8b400"/></svg>224 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2 L14.6 8.3 L21.3 9.1 L16.5 13.6 L17.9 20.2 L12 16.8 L6.1 20.2 L7.5 13.6 L2.7 9.1 L9.4 8.3 Z" fill="#f8b400"/></svg>225 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2 L14.6 8.3 L21.3 9.1 L16.5 13.6 L17.9 20.2 L12 16.8 L6.1 20.2 L7.5 13.6 L2.7 9.1 L9.4 8.3 Z" fill="#f8b400"/></svg>226 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2 L14.6 8.3 L21.3 9.1 L16.5 13.6 L17.9 20.2 L12 16.8 L6.1 20.2 L7.5 13.6 L2.7 9.1 L9.4 8.3 Z" fill="#f8b400"/></svg>227 </div>228 <span style="color:#888; font-size:30px;">September 23, 2023</span>229 </div>230 <div class="review-text">Default 5-star ratings by platform because the buyer did not leave timely reviews.</div>231 <div class="divider"></div>232 <div class="view-all">View all reviews (1)</div>233 </div>234 </div>235 236 <!-- Store Reviews section -->237 <div class="section" style="padding-top: 16px;">238 <div class="store-reviews-head">239 <div class="title" style="margin-bottom:0;">Store Reviews <span style="font-weight:600; color:#777; font-size:40px;">(903)</span></div>240 <div style="display:flex; align-items:center; gap:20px;">241 <svg width="42" height="42" viewBox="0 0 24 24">242 <path d="M12 3 A9 9 0 1 1 3 12" stroke="#b5b5b5" stroke-width="2" fill="none"/>243 <path d="M3 12 L7 12" stroke="#b5b5b5" stroke-width="2" stroke-linecap="round"/>244 </svg>245 <svg width="30" height="30" viewBox="0 0 24 24">246 <path d="M9 6 L15 12 L9 18" stroke="#c7c7c7" stroke-width="3" fill="none" stroke-linecap="round"/>247 </svg>248 </div>249 </div>250 <div class="chips">251 <div class="chip">good (4)</div>252 <div class="chip">quickly arrived (4)</div>253 <div class="chip">nice case (3)</div>254 <div class="chip">cute (3)</div>255 <div class="chip">beautiful (3)</div>256 <div class="chip">well works (3)</div>257 </div>258 </div>259 260 <!-- Bottom bar -->261 <div class="bottom-bar">262 <div class="mini-actions">263 <div class="mini-btn">264 <div class="icon-btn" style="width:68px; height:68px;">265 <svg width="48" height="48" viewBox="0 0 24 24">266 <path d="M3 10 L6 6 H18 L21 10 V20 H3 Z" stroke="#222" stroke-width="2" fill="none"/>267 <path d="M7 20 V14 H17 V20" stroke="#222" stroke-width="2"/>268 </svg>269 </div>270 <div style="font-size:28px;">Store</div>271 </div>272 <div class="mini-btn">273 <div class="icon-btn" style="width:68px; height:68px;">274 <svg width="48" height="48" viewBox="0 0 24 24">275 <path d="M4 5 H20 V15 H8 L4 19 Z" stroke="#222" stroke-width="2" fill="none"/>276 </svg>277 </div>278 <div style="font-size:28px;">Chat</div>279 </div>280 </div>281 <div class="cta">Buy Now</div>282 </div>283 284 <div class="gesture-bar"></div>285</div>286</body>287</html>