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 Compare UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,Helvetica,sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute; top: 0; left: 0; right: 0;18 height: 150px; background: #8E8E8E; color: #fff;19 padding: 0 40px; box-sizing: border-box;20 display: flex; align-items: center; justify-content: space-between;21 font-size: 38px; letter-spacing: 0.3px;22 }23 .status-icons { display: flex; align-items: center; gap: 30px; }24 .status-dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; opacity: 0.8; }25 .battery { display: flex; align-items: center; gap: 10px; }26 .battery svg { width: 50px; height: 28px; }27 28 /* Header / search */29 .header {30 position: absolute; top: 150px; left: 0; right: 0;31 height: 160px; display: flex; align-items: center;32 padding: 0 30px; box-sizing: border-box;33 gap: 24px;34 }35 .icon-btn { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }36 .icon-btn svg { width: 48px; height: 48px; fill: #333; }37 .app-logo {38 width: 88px; height: 88px; border-radius: 20px;39 background: #E53935; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 44px;40 }41 .search-bar {42 flex: 1;43 height: 104px; background: #fafafa; border: 1px solid #dcdcdc; border-radius: 26px;44 display: flex; align-items: center; padding: 0 26px; box-sizing: border-box;45 box-shadow: 0 2px 0 rgba(0,0,0,0.08);46 gap: 18px;47 }48 .search-bar input {49 border: none; outline: none; flex: 1; background: transparent;50 font-size: 36px; color: #555;51 }52 .search-bar .mic { width: 50px; height: 50px; }53 .right-actions { display: flex; align-items: center; gap: 26px; }54 .right-actions .action { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }55 .right-actions svg { width: 50px; height: 50px; fill: #333; }56 57 /* Section title */58 .section {59 position: absolute; top: 350px; left: 0; right: 0;60 padding: 0 36px; box-sizing: border-box;61 }62 .section h2 {63 font-size: 48px; margin: 0 0 28px 0; color: #333; font-weight: 800;64 }65 .divider {66 height: 2px; background: #ECEFF1; margin-top: 16px;67 }68 69 /* Product cards */70 .cards {71 display: flex; gap: 28px; padding-top: 24px;72 }73 .product-card {74 width: 470px; border: 1px solid #E6E8EB; border-radius: 24px; background: #fff;75 padding: 24px; box-sizing: border-box;76 }77 .img-ph {78 width: 100%; height: 300px; background: #E0E0E0; border: 1px solid #BDBDBD;79 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px;80 border-radius: 16px;81 }82 .card-title {83 margin: 24px 0 16px; font-size: 34px; line-height: 1.25; color: #1976D2;84 }85 .price { font-size: 42px; font-weight: 700; color: #333; margin: 12px 0 18px; }86 .buy-row { display: flex; align-items: center; gap: 18px; }87 .cart-chip {88 width: 96px; height: 80px; border: 2px solid #E53935; border-radius: 16px; display: flex; align-items: center; justify-content: center;89 }90 .buy-btn {91 background: #D32F2F; color: #fff; border: none; border-radius: 16px;92 padding: 20px 34px; font-size: 34px; font-weight: 700; cursor: pointer;93 box-shadow: 0 2px 0 rgba(211,47,47,0.3);94 }95 96 /* Comparison table */97 .table {98 margin-top: 30px; border: 1px solid #ECEFF1; border-radius: 18px; overflow: hidden;99 }100 .row {101 display: grid; grid-template-columns: 420px 1fr; align-items: center;102 background: #F7F8FA; border-bottom: 1px solid #ECEFF1;103 padding: 26px 24px; box-sizing: border-box;104 }105 .row:nth-child(even) { background: #FCFCFD; }106 .row .label { font-size: 38px; color: #333; }107 .row .value { font-size: 36px; color: #555; }108 109 /* Reviews */110 .reviews {111 position: absolute; top: 1580px; left: 0; right: 0;112 padding: 0 36px; box-sizing: border-box;113 }114 .reviews-header {115 display: flex; align-items: center; justify-content: space-between;116 }117 .reviews h3 { font-size: 46px; margin: 0; color: #333; font-weight: 800; }118 .review-btn {119 background: #FCE3E3; color: #D32F2F; border: 1px solid #F5B6B6; border-radius: 16px;120 padding: 20px 28px; font-size: 32px; font-weight: 700;121 }122 .review-desc { margin-top: 26px; font-size: 36px; color: #555; }123 124 /* Bottom action bar */125 .bottom-bar {126 position: absolute; left: 0; right: 0; bottom: 120px;127 padding: 0 36px; box-sizing: border-box;128 display: flex; gap: 30px;129 }130 .cta {131 flex: 1; display: flex; align-items: center; justify-content: center; gap: 16px;132 height: 120px; border-radius: 26px; font-size: 40px; font-weight: 800; color: #fff; cursor: pointer;133 }134 .cta-blue { background: #1E88E5; }135 .cta-red { background: #D32F2F; }136 .cta svg { width: 52px; height: 52px; fill: #fff; }137 138 /* Home indicator */139 .home-indicator {140 position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%);141 width: 320px; height: 16px; background: #000; opacity: 0.8; border-radius: 8px;142 }143</style>144</head>145<body>146<div id="render-target">147 148 <!-- Status bar -->149 <div class="status-bar">150 <div>9:13</div>151 <div class="status-icons">152 <div class="status-dot"></div>153 <div class="status-dot"></div>154 <div class="status-dot"></div>155 <div class="status-dot"></div>156 <div class="status-dot"></div>157 <div class="battery">158 <svg viewBox="0 0 24 24">159 <rect x="1" y="5" width="18" height="14" rx="2" ry="2" fill="#fff"></rect>160 <rect x="3" y="7" width="12" height="10" fill="#8E8E8E"></rect>161 <rect x="20" y="9" width="3" height="6" fill="#fff"></rect>162 </svg>163 <span>83%</span>164 </div>165 </div>166 </div>167 168 <!-- Header with search -->169 <div class="header">170 <div class="icon-btn">171 <svg viewBox="0 0 24 24">172 <path d="M15 18L9 12l6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>173 </svg>174 </div>175 <div class="app-logo">m</div>176 <div class="search-bar">177 <svg viewBox="0 0 24 24" width="46" height="46">178 <circle cx="10" cy="10" r="6" stroke="#777" stroke-width="2" fill="none"></circle>179 <line x1="15" y1="15" x2="21" y2="21" stroke="#777" stroke-width="2"></line>180 </svg>181 <input type="text" value="Search for Hammer Dr..." />182 <svg class="mic" viewBox="0 0 24 24">183 <rect x="9" y="4" width="6" height="10" rx="3" fill="#2196F3"></rect>184 <path d="M5 11a7 7 0 0 0 14 0M12 18v3" stroke="#2196F3" stroke-width="2" fill="none" stroke-linecap="round"></path>185 </svg>186 </div>187 <div class="right-actions">188 <div class="action">189 <svg viewBox="0 0 24 24">190 <path d="M7 6h14l-2 9H9L7 6zM9 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm8 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#333"></path>191 </svg>192 </div>193 <div class="action">194 <svg viewBox="0 0 24 24">195 <path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z" fill="#333"></path>196 </svg>197 </div>198 </div>199 </div>200 201 <!-- Products section -->202 <div class="section">203 <h2>Similar Products To Compare</h2>204 <div class="divider"></div>205 206 <div class="cards">207 <!-- Card 1 -->208 <div class="product-card">209 <div class="img-ph">[IMG: Black Hammer Drill Set]</div>210 <div class="card-title">Z2M2 1200W Multi Mode ...</div>211 <div class="buy-row">212 <button class="buy-btn">BUY NOW</button>213 </div>214 </div>215 216 <!-- Card 2 -->217 <div class="product-card">218 <div class="img-ph">[IMG: Red Hammer Drill]</div>219 <div class="card-title">Leofast LFT-1206 780W 2600rpm Hammer Drill Mac...</div>220 <div class="price">₹ 1,319</div>221 <div class="buy-row">222 <div class="cart-chip">223 <svg viewBox="0 0 24 24">224 <path d="M7 6h14l-2 9H9L7 6zM9 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm8 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#E53935"></path>225 </svg>226 </div>227 <button class="buy-btn">BUY NOW</button>228 </div>229 </div>230 </div>231 232 <!-- Comparison table -->233 <div class="table" style="margin-top: 40px;">234 <div class="row">235 <div class="label">Rating</div>236 <div class="value">-</div>237 </div>238 <div class="row">239 <div class="label">Brand</div>240 <div class="value">Leofast</div>241 </div>242 <div class="row">243 <div class="label">Power input</div>244 <div class="value">780 W</div>245 </div>246 <div class="row">247 <div class="label">No load speed</div>248 <div class="value">2600 rpm</div>249 </div>250 <div class="row">251 <div class="label">Model</div>252 <div class="value">LFT-1206</div>253 </div>254 <div class="row">255 <div class="label">Chuck size</div>256 <div class="value">13 mm</div>257 </div>258 </div>259 </div>260 261 <!-- Reviews section -->262 <div class="reviews">263 <div class="reviews-header">264 <h3>Reviews & Ratings</h3>265 <div class="review-btn">WRITE A REVIEW</div>266 </div>267 <div class="review-desc">Pinaka Mod.Pi-226 1600W 26mm Hammer Drill</div>268 </div>269 270 <!-- Bottom action bar -->271 <div class="bottom-bar">272 <div class="cta cta-blue">273 <svg viewBox="0 0 24 24">274 <path d="M7 6h14l-2 9H9L7 6zM9 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm8 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#fff"></path>275 </svg>276 <span>ADD TO CART</span>277 </div>278 <div class="cta cta-red">279 <span>BUY NOW</span>280 </div>281 </div>282 283 <div class="home-indicator"></div>284</div>285</body>286</html>