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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #FFFFFF;14 }15 16 /* Status bar */17 .status-bar {18 height: 100px;19 padding: 30px 36px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #212121;24 font-size: 36px;25 }26 .status-icons {27 display: flex;28 gap: 24px;29 align-items: center;30 color: #616161;31 font-size: 28px;32 }33 .status-dot {34 width: 24px; height: 24px; background: #9E9E9E; border-radius: 50%;35 }36 .battery {37 width: 40px; height: 22px; border: 2px solid #616161; border-radius: 4px; position: relative;38 }39 .battery::after {40 content: ""; position: absolute; right: -8px; top: 7px; width: 6px; height: 8px; background: #616161; border-radius: 2px;41 }42 .battery-fill { position: absolute; left: 2px; top: 2px; right: 10px; bottom: 2px; background: #8BC34A; border-radius: 2px; }43 44 /* Top search row */45 .top-row {46 display: flex;47 align-items: center;48 padding: 0 24px;49 gap: 20px;50 }51 .back-btn {52 width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;53 }54 .search-field {55 flex: 1;56 height: 96px;57 border: 1px solid #D6D6D6;58 border-radius: 18px;59 background: #F3F3F3;60 display: flex;61 align-items: center;62 padding: 0 28px;63 gap: 20px;64 color: #9E9E9E;65 font-size: 36px;66 }67 .search-placeholder { flex: 1; }68 .cart-wrap {69 width: 90px; height: 90px; position: relative; display: flex; align-items: center; justify-content: center;70 }71 .badge {72 position: absolute;73 right: 6px; top: 6px;74 background: #E53935; color: #fff; font-size: 28px; line-height: 28px;75 padding: 6px 12px; border-radius: 20px; border: 2px solid #fff;76 }77 78 /* Rows & sections */79 .divider { height: 2px; background: #E0E0E0; margin: 24px 0; }80 .row-grey {81 background: #F5F7F8;82 display: flex;83 padding: 30px 24px;84 font-size: 34px;85 border-top: 1px solid #E0E0E0;86 border-bottom: 1px solid #E0E0E0;87 }88 .row-grey .left { width: 340px; color: #9E9E9E; }89 .row-grey .right { flex: 1; color: #333; }90 91 .section {92 padding: 30px 24px;93 }94 .section h2 {95 margin: 16px 0 24px 0;96 font-size: 48px;97 color: #212121;98 }99 .two-col {100 display: flex;101 gap: 20px;102 font-size: 36px;103 line-height: 1.4;104 }105 .two-col .left { width: 340px; color: #9E9E9E; }106 .two-col .right { flex: 1; color: #333; }107 108 .link-row {109 padding: 28px 24px;110 display: flex; align-items: center; justify-content: space-between;111 font-size: 40px; color: #212121;112 border-top: 1px solid #E0E0E0;113 }114 115 /* Brand block */116 .brand-block {117 padding: 24px;118 }119 .brand-card {120 display: flex; align-items: center; gap: 24px;121 padding: 20px 0;122 }123 .brand-img {124 width: 96px; height: 96px; background: #E0E0E0; border: 1px solid #BDBDBD;125 border-radius: 16px;126 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;127 }128 .brand-text .sub {129 color: #9E9E9E; font-size: 34px;130 }131 .brand-text .name {132 font-size: 46px; color: #000; font-weight: 700; margin-top: 6px;133 }134 135 /* Feature list */136 .features { padding: 0 24px 12px 24px; }137 .feature-item {138 display: flex; align-items: flex-start; gap: 20px; padding: 18px 0;139 }140 .feature-item .icon {141 width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;142 }143 .feature-item .texts { flex: 1; }144 .feature-item .title { font-size: 38px; color: #212121; font-weight: 600; }145 .feature-item .subtxt { font-size: 32px; color: #9E9E9E; margin-top: 2px; }146 147 /* Product highlights */148 .ph-header {149 display: flex; align-items: center; justify-content: space-between;150 padding: 30px 24px 16px 24px; font-size: 44px; color: #212121; font-weight: 700;151 border-top: 14px solid #EFEFEF;152 }153 .banner {154 margin: 12px 24px 220px 24px;155 height: 420px;156 background: #E0E0E0; border: 1px solid #BDBDBD;157 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 40px;158 border-radius: 16px;159 position: relative;160 }161 162 /* Bottom action bar */163 .action-bar {164 position: absolute; left: 0; right: 0; bottom: 120px;165 padding: 0 24px;166 display: flex; gap: 24px;167 }168 .btn {169 height: 120px; border-radius: 18px; display: flex; align-items: center; justify-content: center;170 font-size: 40px; font-weight: 600;171 box-shadow: 0 2px 0 rgba(0,0,0,0.06);172 }173 .btn-cart {174 width: 220px; border: 1px solid #D6D6D6; background: #FFFFFF;175 }176 .btn-emi {177 flex: 1; border: 1px solid #D6D6D6; background: #FFFFFF; color: #212121;178 }179 .btn-buy {180 flex: 1.2; background: #FFC107; color: #212121; border: 1px solid #EAB000;181 }182 183 /* Home indicator */184 .home-indicator {185 position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);186 width: 240px; height: 12px; background: #DADADA; border-radius: 8px;187 }188</style>189</head>190<body>191<div id="render-target">192 193 <!-- Status bar -->194 <div class="status-bar">195 <div>10:35</div>196 <div class="status-icons">197 <div class="status-dot"></div>198 <div style="width: 28px; height: 20px; border: 2px solid #616161; border-radius: 2px;"></div>199 <div class="battery"><div class="battery-fill"></div></div>200 </div>201 </div>202 203 <!-- Top search row -->204 <div class="top-row">205 <div class="back-btn">206 <svg width="54" height="54" viewBox="0 0 54 54">207 <path d="M30 10 L12 27 L30 44" fill="none" stroke="#222" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"></path>208 </svg>209 </div>210 <div class="search-field">211 <div class="search-placeholder">Search for products</div>212 <svg width="40" height="40" viewBox="0 0 64 64">213 <rect x="24" y="10" width="16" height="24" rx="8" ry="8" fill="#757575"></rect>214 <path d="M32 34 V46" stroke="#757575" stroke-width="6" stroke-linecap="round"></path>215 <path d="M24 46 H40" stroke="#757575" stroke-width="6" stroke-linecap="round"></path>216 </svg>217 </div>218 <div class="cart-wrap">219 <svg width="48" height="48" viewBox="0 0 64 64">220 <path d="M10 16 H20 L26 40 H48 L54 24 H26" fill="none" stroke="#212121" stroke-width="4" stroke-linejoin="round"></path>221 <circle cx="30" cy="48" r="4" fill="#212121"></circle>222 <circle cx="48" cy="48" r="4" fill="#212121"></circle>223 </svg>224 <div class="badge">1</div>225 </div>226 </div>227 228 <!-- Grey row: In The Box -->229 <div class="row-grey" style="margin-top: 24px;">230 <div class="left">In The Box</div>231 <div class="right">Handset, USB C Charge Cable (1m), Documentation</div>232 </div>233 234 <!-- Warranty section -->235 <div class="section">236 <h2>Warranty</h2>237 <div class="two-col">238 <div class="left">Warranty Summary</div>239 <div class="right">1 Year Warranty for Phone and<br>6 Months Warranty for In-Box Accessories</div>240 </div>241 </div>242 243 <!-- All details link row -->244 <div class="link-row">245 <div>All Details</div>246 <svg width="42" height="42" viewBox="0 0 42 42">247 <path d="M14 10 L28 21 L14 32" fill="none" stroke="#212121" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>248 </svg>249 </div>250 251 <!-- Brand block -->252 <div class="divider"></div>253 <div class="brand-block">254 <div class="brand-card">255 <div class="brand-img">[IMG: Apple logo]</div>256 <div class="brand-text">257 <div class="sub">About the brand</div>258 <div class="name">APPLE</div>259 </div>260 </div>261 262 <div class="features">263 <div class="feature-item">264 <div class="icon">265 <svg width="56" height="56" viewBox="0 0 56 56">266 <path d="M8 40 L24 24 L32 28 L48 12" fill="none" stroke="#212121" stroke-width="4" stroke-linecap="round"></path>267 <path d="M40 12 H48 V20" fill="none" stroke="#212121" stroke-width="4" stroke-linecap="round"></path>268 </svg>269 </div>270 <div class="texts">271 <div class="title">Popular in Handsets</div>272 <div class="subtxt">Based on recent orders on Flipkart</div>273 </div>274 </div>275 276 <div class="feature-item">277 <div class="icon">278 <svg width="56" height="56" viewBox="0 0 56 56">279 <polygon points="28,6 33,20 48,20 36,28 41,42 28,34 15,42 20,28 8,20 23,20" fill="none" stroke="#212121" stroke-width="4" stroke-linejoin="round"></polygon>280 </svg>281 </div>282 <div class="texts">283 <div class="title">Loved by customers</div>284 <div class="subtxt">Based on customer ratings</div>285 </div>286 </div>287 288 <div class="feature-item">289 <div class="icon">290 <svg width="56" height="56" viewBox="0 0 56 56">291 <path d="M16 8 V44" stroke="#212121" stroke-width="4" stroke-linecap="round"></path>292 <path d="M16 10 H36 L28 20 L36 30 H16" fill="none" stroke="#212121" stroke-width="4" stroke-linejoin="round"></path>293 </svg>294 </div>295 <div class="texts">296 <div class="title">9+ years on Flipkart</div>297 <div class="subtxt">Trusted brand on Flipkart</div>298 </div>299 </div>300 </div>301 </div>302 303 <!-- Product highlights -->304 <div class="ph-header">305 <div>Product Highlights</div>306 <svg width="40" height="40" viewBox="0 0 40 40">307 <path d="M8 24 L20 12 L32 24" fill="none" stroke="#212121" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>308 </svg>309 </div>310 311 <div class="banner">[IMG: iPhone promo banner]</div>312 313 <!-- Bottom action bar -->314 <div class="action-bar">315 <div class="btn btn-cart">316 <svg width="48" height="48" viewBox="0 0 64 64" style="margin-right: 10px;">317 <path d="M10 16 H20 L26 40 H48 L54 24 H26" fill="none" stroke="#212121" stroke-width="4" stroke-linejoin="round"></path>318 <circle cx="30" cy="48" r="4" fill="#212121"></circle>319 <circle cx="48" cy="48" r="4" fill="#212121"></circle>320 </svg>321 </div>322 <div class="btn btn-emi">Pay with EMI</div>323 <div class="btn btn-buy">Buy now</div>324 </div>325 326 <!-- Home indicator -->327 <div class="home-indicator"></div>328</div>329</body>330</html>