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 Highlights UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 }14 15 /* Top status bar */16 .status-bar {17 height: 88px;18 display: flex;19 align-items: center;20 justify-content: space-between;21 padding: 0 40px;22 color: #333;23 font-size: 34px;24 }25 .status-icons { display: flex; gap: 24px; align-items: center; color: #555; }26 27 /* Search area */28 .search-row {29 display: flex; align-items: center;30 padding: 12px 24px 24px 24px;31 gap: 18px;32 }33 .icon-btn {34 width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;35 }36 .search-field {37 flex: 1;38 background: #F2F3F5;39 border: 1px solid #E0E0E0;40 height: 96px;41 border-radius: 20px;42 display: flex; align-items: center;43 padding: 0 28px;44 gap: 18px;45 color: #777;46 font-size: 36px;47 }48 .search-placeholder { flex: 1; color: #777; }49 .cart-wrap {50 position: relative; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;51 }52 .badge {53 position: absolute; top: 2px; right: 2px;54 background: #E53935; color: #fff; font-size: 26px; font-weight: 700;55 width: 40px; height: 40px; border-radius: 20px; display: flex; align-items: center; justify-content: center;56 box-shadow: 0 2px 0 rgba(0,0,0,0.15);57 }58 59 /* Section headers and button */60 .section {61 padding: 0 40px;62 }63 .section-title {64 font-size: 48px; font-weight: 800; color: #222; margin: 18px 0 28px;65 display: flex; align-items: center; justify-content: space-between;66 }67 .search-btn {68 display: inline-flex; align-items: center; gap: 16px;69 border: 1px solid #D6D6D6; border-radius: 16px;70 padding: 22px 28px; color: #1976D2; background: #fff; font-size: 36px; font-weight: 600;71 }72 73 /* Highlights list */74 .feature {75 display: flex; align-items: center; gap: 28px;76 padding: 18px 0;77 }78 .feature-icon {79 width: 80px; height: 80px; border-radius: 12px;80 display: flex; align-items: center; justify-content: center;81 border: 1px dashed #CFCFCF; color: #9E9E9E;82 }83 .feature-text { flex: 1; }84 .feature-label { color: #9E9E9E; font-size: 36px; }85 .feature-value { color: #111; font-size: 40px; font-weight: 800; margin-top: 6px; }86 87 /* Divider */88 .divider { height: 1px; background: #E9E9E9; margin: 24px 0; }89 90 /* Other details table */91 .sub-title {92 font-size: 44px; font-weight: 800; color: #222; margin-bottom: 16px;93 }94 .details {95 border-top: 1px solid #EEEEEE;96 border-bottom: 1px solid #EEEEEE;97 border-radius: 12px; overflow: hidden;98 }99 .details-row {100 display: flex; justify-content: space-between; align-items: center;101 padding: 34px 28px;102 font-size: 36px;103 }104 .details-row:nth-child(odd) { background: #F7F8FA; }105 .details-left { color: #9E9E9E; }106 .details-right { color: #333; }107 108 /* Bottom action bar */109 .action-bar {110 position: absolute; bottom: 96px; left: 0; right: 0;111 padding: 20px 24px;112 display: flex; gap: 24px; align-items: center;113 background: rgba(255,255,255,0.98);114 }115 .mini-cart {116 width: 220px; height: 120px; border-radius: 18px; border: 1px solid #E0E0E0; background: #fff;117 display: flex; align-items: center; justify-content: center; gap: 12px; color: #333; font-size: 34px; font-weight: 700;118 }119 .btn-outline {120 flex: 1; height: 120px; border-radius: 18px; border: 2px solid #E0E0E0; background: #fff;121 display: flex; align-items: center; justify-content: center; color: #333; font-size: 40px; font-weight: 700;122 }123 .btn-primary {124 width: 420px; height: 120px; border-radius: 18px; background: #FFC107; color: #111;125 display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 800; border: 1px solid #E0B000;126 }127 128 /* Floating badge */129 .floating-badge {130 position: absolute; right: 40px; bottom: 330px;131 width: 140px; height: 140px; border-radius: 70px;132 background: radial-gradient(circle at 35% 35%, #FFEB3B 40%, #1E88E5 41%);133 box-shadow: 0 8px 20px rgba(0,0,0,0.2);134 display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800;135 }136 137 /* Home pill */138 .home-pill {139 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);140 width: 220px; height: 16px; background: #D0D0D0; border-radius: 8px;141 }142</style>143</head>144<body>145<div id="render-target">146 147 <!-- Status bar -->148 <div class="status-bar">149 <div>10:35</div>150 <div class="status-icons">151 <!-- simple status icons -->152 <svg width="36" height="36" viewBox="0 0 36 36">153 <circle cx="18" cy="18" r="16" fill="#BDBDBD"></circle>154 </svg>155 <svg width="36" height="36" viewBox="0 0 36 36">156 <path d="M4 28h28v4H4zM6 4h24v20H6z" fill="#757575"></path>157 </svg>158 </div>159 </div>160 161 <!-- Search row -->162 <div class="search-row">163 <div class="icon-btn">164 <svg width="56" height="56" viewBox="0 0 64 64">165 <path d="M40 12 L20 32 L40 52" fill="none" stroke="#424242" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"></path>166 </svg>167 </div>168 169 <div class="search-field">170 <svg width="40" height="40" viewBox="0 0 40 40">171 <path d="M16 4a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm16 28-8-8" stroke="#9E9E9E" stroke-width="3" fill="none" stroke-linecap="round"></path>172 </svg>173 <div class="search-placeholder">Search for products</div>174 <svg width="40" height="40" viewBox="0 0 40 40">175 <path d="M20 6c4 0 8 4 8 10v8l-8 6-8-6v-8c0-6 4-10 8-10z" fill="#9E9E9E"></path>176 </svg>177 </div>178 179 <div class="cart-wrap">180 <svg width="56" height="56" viewBox="0 0 64 64">181 <path d="M6 12h10l6 30h20l6-22H18" fill="none" stroke="#212121" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>182 <circle cx="26" cy="54" r="4" fill="#212121"></circle>183 <circle cx="48" cy="54" r="4" fill="#212121"></circle>184 </svg>185 <div class="badge">1</div>186 </div>187 </div>188 189 <!-- Highlights section -->190 <div class="section">191 <div class="section-title">192 <div>Highlights</div>193 <div class="search-btn">194 <svg width="40" height="40" viewBox="0 0 40 40">195 <path d="M16 4a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm16 28-8-8" stroke="#1976D2" stroke-width="3" fill="none" stroke-linecap="round"></path>196 </svg>197 Search198 </div>199 </div>200 201 <div class="feature">202 <div class="feature-icon">203 <svg width="54" height="54" viewBox="0 0 54 54">204 <rect x="8" y="10" width="38" height="30" fill="none" stroke="#9E9E9E" stroke-width="3"></rect>205 <text x="27" y="30" font-size="12" text-anchor="middle" fill="#9E9E9E">RAM</text>206 </svg>207 </div>208 <div class="feature-text">209 <div class="feature-label">RAM | ROM</div>210 <div class="feature-value">256 GB ROM</div>211 </div>212 </div>213 214 <div class="feature">215 <div class="feature-icon">216 <svg width="54" height="54" viewBox="0 0 54 54">217 <rect x="11" y="12" width="32" height="28" fill="none" stroke="#9E9E9E" stroke-width="3"></rect>218 <path d="M20 20h14v12H20z" fill="#9E9E9E"></path>219 </svg>220 </div>221 <div class="feature-text">222 <div class="feature-label">Processor</div>223 <div class="feature-value">A16 Bionic Chip, 6 Core Processor | Hexa Core</div>224 </div>225 </div>226 227 <div class="feature">228 <div class="feature-icon">229 <svg width="54" height="54" viewBox="0 0 54 54">230 <rect x="8" y="16" width="38" height="24" rx="4" stroke="#9E9E9E" fill="none" stroke-width="3"></rect>231 <circle cx="20" cy="28" r="6" fill="none" stroke="#9E9E9E" stroke-width="3"></circle>232 </svg>233 </div>234 <div class="feature-text">235 <div class="feature-label">Rear Camera</div>236 <div class="feature-value">48MP + 12MP</div>237 </div>238 </div>239 240 <div class="feature">241 <div class="feature-icon">242 <svg width="54" height="54" viewBox="0 0 54 54">243 <rect x="10" y="12" width="34" height="30" rx="4" stroke="#9E9E9E" fill="none" stroke-width="3"></rect>244 <circle cx="27" cy="24" r="6" fill="none" stroke="#9E9E9E" stroke-width="3"></circle>245 </svg>246 </div>247 <div class="feature-text">248 <div class="feature-label">Front Camera</div>249 <div class="feature-value">12MP</div>250 </div>251 </div>252 253 <div class="feature">254 <div class="feature-icon">255 <svg width="54" height="54" viewBox="0 0 54 54">256 <rect x="12" y="8" width="30" height="38" rx="4" stroke="#9E9E9E" fill="none" stroke-width="3"></rect>257 <path d="M18 18h18M18 26h18M18 34h10" stroke="#9E9E9E" stroke-width="3"></path>258 </svg>259 </div>260 <div class="feature-text">261 <div class="feature-label">Display</div>262 <div class="feature-value">6.1 inch All Screen OLED Display</div>263 </div>264 </div>265 266 <div class="divider"></div>267 268 <div class="sub-title">Other Details</div>269 270 <div class="details">271 <div class="details-row">272 <div class="details-left">Network Type</div>273 <div class="details-right">5G, 4G VOLTE, 4G, 3G, 2G</div>274 </div>275 <div class="details-row">276 <div class="details-left">SIM Type</div>277 <div class="details-right">Dual Sim(Nano + eSIM)</div>278 </div>279 <div class="details-row">280 <div class="details-left">Expandable Storage</div>281 <div class="details-right">No</div>282 </div>283 <div class="details-row">284 <div class="details-left">Audio Jack</div>285 <div class="details-right">No</div>286 </div>287 <div class="details-row">288 <div class="details-left">Quick Charging</div>289 <div class="details-right">No</div>290 </div>291 <div class="details-row">292 <div class="details-left">In The Box</div>293 <div class="details-right">Handset, USB C Charge Cable (1m), Documentation</div>294 </div>295 </div>296 </div>297 298 <!-- Floating badge -->299 <div class="floating-badge">F</div>300 301 <!-- Bottom action bar -->302 <div clas