GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Light Tapes UI</title>5<style>6 body {7 margin: 0;8 padding: 0;9 background: transparent;10 font-family: Arial, sans-serif;11 }12 #render-target {13 width: 1080px;14 height: 2400px;15 position: relative;16 overflow: hidden;17 background: #f5f5f5;18 border-radius: 0;19 }20 21 /* Header (status + app bar) */22 .header {23 position: absolute;24 top: 0;25 left: 0;26 width: 1080px;27 height: 200px;28 background: #2f3446;29 color: #ffffff;30 }31 .statusbar {32 height: 80px;33 padding: 0 32px;34 font-size: 36px;35 display: flex;36 align-items: center;37 justify-content: space-between;38 opacity: 0.95;39 }40 .appbar {41 height: 120px;42 display: flex;43 align-items: center;44 padding: 0 24px;45 }46 .back-btn {47 width: 96px;48 height: 96px;49 display: flex;50 align-items: center;51 justify-content: center;52 margin-right: 8px;53 }54 .title {55 font-size: 56px;56 font-weight: 600;57 color: #ffffff;58 margin-left: 12px;59 flex: 1;60 }61 .actions {62 display: flex;63 align-items: center;64 gap: 24px;65 padding-right: 16px;66 }67 .icon-btn {68 width: 80px;69 height: 80px;70 display: flex;71 align-items: center;72 justify-content: center;73 }74 .cart-wrap {75 position: relative;76 }77 .badge {78 position: absolute;79 top: 6px;80 right: 4px;81 background: #ffffff;82 color: #2f3446;83 border-radius: 16px;84 padding: 2px 10px;85 font-size: 28px;86 font-weight: 700;87 border: 1px solid rgba(0,0,0,0.1);88 }89 90 /* Content grid */91 .content {92 position: absolute;93 top: 200px;94 left: 0;95 right: 0;96 bottom: 0;97 padding: 20px;98 overflow-y: auto;99 }100 .grid {101 display: grid;102 grid-template-columns: repeat(2, 1fr);103 gap: 24px;104 }105 .card {106 background: #ffffff;107 border-radius: 8px;108 box-shadow: 0 2px 0 rgba(0,0,0,0.06);109 border: 1px solid #e7e7e7;110 overflow: hidden;111 }112 .img {113 width: 100%;114 height: 460px;115 background: #E0E0E0;116 border-bottom: 1px solid #BDBDBD;117 display: flex;118 align-items: center;119 justify-content: center;120 color: #757575;121 font-size: 32px;122 text-align: center;123 padding: 12px;124 }125 .meta {126 padding: 24px;127 }128 .name {129 font-size: 34px;130 color: #333333;131 line-height: 1.2;132 min-height: 90px;133 }134 .price {135 margin-top: 8px;136 font-size: 40px;137 font-weight: 800;138 color: #1f2833;139 }140 141 /* Home indicator */142 .home-indicator {143 position: absolute;144 bottom: 24px;145 left: 50%;146 transform: translateX(-50%);147 width: 300px;148 height: 12px;149 background: #cfcfcf;150 border-radius: 8px;151 }152</style>153</head>154<body>155<div id="render-target">156 157 <!-- Header -->158 <div class="header">159 <div class="statusbar">160 <div>10:22</div>161 <div style="display:flex; align-items:center; gap:18px; font-size:30px; opacity:0.9;">162 <span>• • •</span>163 <span>Wi‑Fi</span>164 <span style="border:1px solid #fff; padding:4px 10px; border-radius:6px;">🔋</span>165 </div>166 </div>167 <div class="appbar">168 <div class="back-btn">169 <svg width="64" height="64" viewBox="0 0 48 48">170 <path d="M28 8 L12 24 L28 40" stroke="#ffffff" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>171 </svg>172 </div>173 <div class="title">Light Tapes</div>174 <div class="actions">175 <div class="icon-btn">176 <svg width="56" height="56" viewBox="0 0 48 48">177 <circle cx="22" cy="22" r="12" stroke="#ffffff" stroke-width="4" fill="none"></circle>178 <line x1="32" y1="32" x2="44" y2="44" stroke="#ffffff" stroke-width="4" stroke-linecap="round"></line>179 </svg>180 </div>181 <div class="icon-btn cart-wrap">182 <svg width="56" height="56" viewBox="0 0 48 48">183 <path d="M6 10 H42 L38 28 H12 Z" fill="none" stroke="#ffffff" stroke-width="4" stroke-linejoin="round"></path>184 <circle cx="16" cy="36" r="3" fill="#ffffff"></circle>185 <circle cx="34" cy="36" r="3" fill="#ffffff"></circle>186 </svg>187 <div class="badge">1</div>188 </div>189 </div>190 </div>191 </div>192 193 <!-- Content -->194 <div class="content">195 <div class="grid">196 197 <!-- Card 1 -->198 <div class="card">199 <div class="img">[IMG: RGB LED strip light – red, green, blue rolls]</div>200 <div class="meta">201 <div class="name">RGB LED STRIP LIGHT 12 MM-...</div>202 <div class="price">JOD1.75</div>203 </div>204 </div>205 206 <!-- Card 2 -->207 <div class="card">208 <div class="img">[IMG: White LED strip on large spool]</div>209 <div class="meta">210 <div class="name">LEMAR LED STRIP LIGHT_WHIT...</div>211 <div class="price">JOD1.2</div>212 </div>213 </div>214 215 <!-- Card 3 -->216 <div class="card">217 <div class="img">[IMG: Warm white triple LED strip on spool, glowing]</div>218 <div class="meta">219 <div class="name">LEMAR LED TRIPLE STRIP LIG...</div>220 <div class="price">JOD1.3</div>221 </div>222 </div>223 224 <!-- Card 4 -->225 <div class="card">226 <div class="img">[IMG: 5V RGB LED strip with remote control]</div>227 <div class="meta">228 <div class="name">LEMAR 5V 5M RGB LED STRIP...</div>229 <div class="price">JOD9.5</div>230 </div>231 </div>232 233 <!-- Extra card for the next row (partially visible in screenshot) -->234 <div class="card">235 <div class="img">[IMG: Additional LED strip product]</div>236 <div class="meta">237 <div class="name">LEMAR COB LED STRIP (Preview)</div>238 <div class="price">JOD2.0</div>239 </div>240 </div>241 242 <div class="card">243 <div class="img">[IMG: Accessory – LED strip power supply]</div>244 <div class="meta">245 <div class="name">Power Supply for LED Strips</div>246 <div class="price">JOD3.5</div>247 </div>248 </div>249 250 </div>251 </div>252 253 <!-- Home indicator -->254 <div class="home-indicator"></div>255</div>256</body>257</html>