GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>UI Render</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; color:#212121; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden; background:#ffffff;10 }11 .status-bar {12 position:relative;13 height:120px;14 background:#e9e9e9;15 padding:28px 36px;16 box-sizing:border-box;17 font-size:36px;18 color:#2c2c2c;19 }20 .status-icons { position:absolute; right:30px; top:32px; display:flex; align-items:center; gap:22px; }21 .status-icons svg { width:34px; height:34px; fill:#5f5f5f; }22 .battery { display:flex; align-items:center; gap:10px; font-size:32px; color:#4b4b4b; }23 24 .content { padding:32px; box-sizing:border-box; }25 .products { display:flex; gap:40px; margin-top:10px; }26 .product { width:320px; }27 .imgph {28 width:320px; height:220px; background:#E0E0E0; border:1px solid #BDBDBD;29 display:flex; justify-content:center; align-items:center; color:#757575; font-size:26px; text-align:center;30 }31 .title { margin-top:18px; font-size:30px; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }32 .price-row { margin-top:10px; display:flex; align-items:center; gap:12px; font-size:30px; }33 .old-price { color:#9e9e9e; text-decoration:line-through; }34 .price { font-weight:bold; }35 .discount { color:#2e7d32; font-weight:bold; }36 .rating-row { margin-top:10px; display:flex; align-items:center; gap:10px; color:#616161; font-size:28px; }37 .stars .star { color:#2e7d32; font-size:28px; margin-right:3px; }38 .stars .gray { color:#bdbdbd; }39 40 .banner {41 margin:34px 0;42 width:100%;43 height:180px;44 background:#E0E0E0; border:1px solid #BDBDBD;45 display:flex; justify-content:center; align-items:center; color:#757575; font-weight:bold; font-size:32px;46 }47 48 .section-title { font-size:44px; font-weight:700; margin:20px 4px 24px 4px; }49 .rate-btn {50 float:right; margin-top:-8px;51 background:#ffffff; color:#4a66ff; border:1px solid #d0d0d0; border-radius:12px;52 box-shadow:0 2px 6px rgba(0,0,0,0.08);53 padding:18px 26px; font-size:30px;54 }55 .rating-box {56 margin-top:18px; display:flex; align-items:flex-start; gap:36px; padding:20px 0;57 border-top:1px solid #eeeeee; border-bottom:1px solid #eeeeee;58 }59 .rb-left { width:420px; }60 .rb-left .label { font-size:34px; color:#6d6d6d; margin-bottom:8px; }61 .rb-left .stars .star { font-size:34px; }62 .rb-left .info { margin-top:10px; font-size:28px; color:#8a8a8a; }63 .divider { width:1px; background:#e0e0e0; height:170px; align-self:stretch; }64 .rb-right { flex:1; }65 .dist-row { display:flex; align-items:center; gap:18px; margin-bottom:18px; font-size:30px; }66 .bar { width:460px; height:16px; background:#e0e0e0; border-radius:10px; overflow:hidden; }67 .bar .fill { height:100%; background:#2e7d32; }68 69 .review {70 padding:24px 0; border-bottom:1px solid #eeeeee;71 }72 .review .headline { display:flex; align-items:center; gap:14px; font-size:34px; font-weight:700; }73 .review .headline .stars .star { font-size:30px; }74 .review .text { margin:14px 4px; font-size:32px; color:#333; }75 .review .meta { display:flex; gap:20px; align-items:center; margin-top:20px; }76 .avatar {77 width:140px; height:140px; background:#E0E0E0; border:1px solid #BDBDBD;78 display:flex; justify-content:center; align-items:center; color:#757575; font-size:24px;79 }80 .user { font-size:30px; color:#757575; }81 .time { font-size:28px; color:#9e9e9e; margin-top:6px; }82 .actions { margin-left:auto; display:flex; align-items:center; gap:26px; color:#9e9e9e; font-size:30px; }83 .dot-menu { font-size:42px; line-height:1; }84 85 .bottom-bar {86 position:absolute; left:0; right:0; bottom:96px; height:170px; background:#ffffff;87 border-top:1px solid #e6e6e6; box-shadow:0 -6px 20px rgba(0,0,0,0.06);88 display:flex; align-items:center; justify-content:center; gap:32px;89 padding:0 36px; box-sizing:border-box;90 }91 .btn {92 width:480px; height:116px; border-radius:16px; font-size:36px; font-weight:700;93 display:flex; align-items:center; justify-content:center; cursor:pointer;94 }95 .btn-outline { border:1px solid #d0d0d0; color:#4a66ff; background:#ffffff; }96 .btn-primary { background:#5a47ff; color:#ffffff; border:1px solid #5a47ff; }97 .home-indicator {98 position:absolute; bottom:24px; left:50%; transform:translateX(-50%);99 width:200px; height:12px; background:#d9d9d9; border-radius:8px;100 }101</style>102</head>103<body>104<div id="render-target">105 <div class="status-bar">106 <div>2:35</div>107 <div class="status-icons">108 <!-- Minimize circle -->109 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>110 <!-- WiFi -->111 <svg viewBox="0 0 24 24"><path d="M2 8c10-6 10-6 20 0M5 11c7-4 7-4 14 0M8 14c4-2 4-2 8 0M12 18l2 2-2 2-2-2z"/></svg>112 <!-- Battery -->113 <div class="battery">114 <svg viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2"/><rect x="21" y="10" width="2" height="4"/></svg>115 <span>98%</span>116 </div>117 </div>118 </div>119 120 <div class="content">121 <!-- Product cards row -->122 <div class="products">123 <div class="product">124 <div class="imgph">[IMG: White Sneaker with stripes]</div>125 <div class="title">Trending Stylish Cas...</div>126 <div class="price-row">127 <span class="old-price">999</span>128 <span class="price">₹289</span>129 <span class="discount">71% off</span>130 </div>131 <div class="rating-row">132 <div class="stars">133 <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star gray">★</span>134 </div>135 <span>(445)</span>136 </div>137 </div>138 <div class="product">139 <div class="imgph">[IMG: White Sneaker on orange floor]</div>140 <div class="title">Stylish Casual Sneak...</div>141 <div class="price-row">142 <span class="old-price">1,499</span>143 <span class="price">₹379</span>144 <span class="discount">74% off</span>145 </div>146 <div class="rating-row">147 <div class="stars">148 <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star gray">★</span>149 </div>150 <span>(4)</span>151 </div>152 </div>153 <div class="product">154 <div class="imgph">[IMG: White Sneakers close-up]</div>155 <div class="title">Sneakers For Men</div>156 <div class="price-row">157 <span class="old-price">1,999</span>158 <span class="price">₹388</span>159 <span class="discount">80% off</span>160 </div>161 <div class="rating-row">162 <div class="stars">163 <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star gray">★</span>164 </div>165 <span>(17)</span>166 </div>167 </div>168 </div>169 170 <!-- Banner -->171 <div class="banner">[IMG: SuperCoin Promotional Banner]</div>172 173 <!-- Ratings & Reviews section -->174 <div class="section-title">175 Ratings & Reviews176 <button class="rate-btn">Rate Product</button>177 </div>178 <div class="rating-box">179 <div class="rb-left">180 <div class="label">Good</div>181 <div class="stars">182 <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star gray">★</span>183 </div>184 <div class="info">170 ratings and 24 reviews</div>185 </div>186 <div class="divider"></div>187 <div class="rb-right">188 <div class="dist-row">189 <div>5 ★</div>190 <div class="bar"><div class="fill" style="width:100%"></div></div>191 <div>89</div>192 </div>193 <div class="dist-row">194 <div>4 ★</div>195 <div class="bar"><div class="fill" style="width:43%"></div></div>196 <div>38</div>197 </div>198 <div class="dist-row">199 <div>3 ★</div>200 <div class="bar"><div class="fill" style="width:10%"></div></div>201 <div>9</div>202 </div>203 <div class="dist-row">204 <div>2 ★</div>205 <div class="bar"><div class="fill" style="width:17%"></div></div>206 <div>15</div>207 </div>208 <div class="dist-row">209 <div>1 ★</div>210 <div class="bar"><div class="fill" style="width:21%"></div></div>211 <div>19</div>212 </div>213 </div>214 </div>215 216 <!-- Review card -->217 <div class="review">218 <div class="headline">219 <div class="stars">220 <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>221 </div>222 <div>Brilliant</div>223 </div>224 <div class="text">always good product 👍</div>225 226 <div class="meta">227 <div class="avatar">[IMG: Reviewer Photo]</div>228 <div>229 <div class="user">Amit Kashyap , Gonda</div>230 <div class="time">3 months ago</div>231 </div>232 <div class="actions">233 <span>👍 69</span>234 <span>👎 14</span>235 <span class="dot-menu">⋮</span>236 </div>237 </div>238 </div>239 240 <!-- Another short review header -->241 <div class="review">242 <div class="headline">243 <div class="stars">244 <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>245 </div>246 <div>Just wow!</div>247 </div>248 </div>249 </div>250 251 <!-- Sticky bottom actions -->252 <div class="bottom-bar">253 <div class="btn btn-outline">Add to cart</div>254 <div class="btn btn-primary">Buy Now</div>255 </div>256 257 <div class="home-indicator"></div>258</div>259</body>260</html>