GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>3 seater sofa UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#ffffff;11  }12 13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0;16    width:100%; height:70px;17    padding:0 40px;18    display:flex; align-items:center; justify-content:space-between;19    box-sizing:border-box;20    color:#2b2b2b; font-size:36px; font-weight:600;21  }22  .status-icons { display:flex; gap:28px; align-items:center; }23  .icon { width:40px; height:40px; }24 25  /* Navigation */26  .nav-bar {27    position:absolute; top:70px; left:0;28    width:100%; height:130px;29    display:flex; align-items:center;30    box-sizing:border-box;31    padding:0 32px;32  }33  .back-btn {34    width:84px; height:84px; border-radius:42px;35    display:flex; align-items:center; justify-content:center;36  }37  .nav-title { flex:1; text-align:center; font-size:48px; font-weight:700; color:#222; }38 39  /* Filter chips */40  .chips {41    position:absolute; top:200px; left:0; width:100%;42    box-sizing:border-box; padding:0 40px;43    display:flex; gap:28px; align-items:center;44  }45  .chip {46    padding:22px 34px; border:2px solid #ddd; border-radius:56px;47    font-size:36px; color:#333; background:#fff;48    box-shadow: 0 0 0 rgba(0,0,0,0);49  }50  .chip.active {51    border:4px solid #111; font-weight:700;52  }53  .progress-line {54    position:absolute; top:300px; left:0; width:100%;55    height:8px; background:#efefef;56  }57  .progress-line .progress {58    width:180px; height:8px; background:#111;59  }60 61  /* Top seller badge */62  .badge {63    position:absolute; top:344px; left:40px;64    background:#e03a4a; color:#fff; font-weight:700;65    padding:18px 28px; border-radius:12px; font-size:34px;66  }67 68  /* Product image area */69  .product-image {70    position:absolute; top:430px; left:40px;71    width:1000px; height:780px;72    background:#E0E0E0; border:1px solid #BDBDBD;73    display:flex; align-items:center; justify-content:center;74    color:#757575; font-size:44px; text-align:center;75  }76 77  /* Heart favorite floating near image */78  .fav-circle {79    position:absolute; top:1160px; right:60px;80    width:140px; height:140px; border-radius:70px;81    border:2px solid #E0E0E0; background:#fff;82    display:flex; align-items:center; justify-content:center;83    box-shadow:0 2px 6px rgba(0,0,0,0.08);84  }85 86  /* Product info text */87  .product-info {88    position:absolute; top:1290px; left:40px; right:40px;89    color:#111;90  }91  .brand { font-size:44px; font-weight:800; margin-bottom:16px; letter-spacing:1px; }92  .subtitle { font-size:40px; color:#444; margin-bottom:28px; }93  .price { font-size:64px; font-weight:800; margin-bottom:28px; }94  .options { font-size:40px; color:#2b5bd8; text-decoration:none; }95 96  /* Floating add-to-cart button */97  .fab {98    position:absolute; right:60px; top:1480px;99    width:140px; height:140px; border-radius:70px;100    background:#2458A6; color:#fff;101    display:flex; align-items:center; justify-content:center;102    box-shadow:0 10px 18px rgba(36,88,166,0.35);103  }104 105  /* Bottom navigation bar */106  .bottom-nav {107    position:absolute; bottom:120px; left:0; width:100%;108    height:150px; border-top:1px solid #e5e5e5;109    display:flex; align-items:center; justify-content:space-around;110    background:#fff;111  }112  .nav-item { display:flex; flex-direction:column; gap:10px; align-items:center; color:#9b9b9b; font-size:30px; }113  .nav-item.active { color:#1f1f1f; }114  .bottom-gesture {115    position:absolute; bottom:40px; left:50%; transform:translateX(-50%);116    width:520px; height:16px; border-radius:12px; background:#8c8c8c;117  }118</style>119</head>120<body>121<div id="render-target">122 123  <!-- Status Bar -->124  <div class="status-bar">125    <div>8:45</div>126    <div class="status-icons">127      <!-- Simple wifi icon -->128      <svg class="icon" viewBox="0 0 24 24">129        <path d="M12 20.5c.9 0 1.5-.6 1.5-1.5S12.9 17.5 12 17.5 10.5 18.1 10.5 19 11.1 20.5 12 20.5z" fill="#2b2b2b"/>130        <path d="M4.2 10.5c4.8-4.3 10.8-4.3 15.6 0" stroke="#2b2b2b" stroke-width="2" fill="none" stroke-linecap="round"/>131        <path d="M7.2 13.2c3.1-2.8 6.5-2.8 9.6 0" stroke="#2b2b2b" stroke-width="2" fill="none" stroke-linecap="round"/>132      </svg>133      <!-- Battery icon -->134      <svg class="icon" viewBox="0 0 28 24">135        <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#2b2b2b" stroke-width="2"/>136        <rect x="4" y="8" width="14" height="8" fill="#2b2b2b"/>137        <rect x="22.5" y="9" width="3" height="6" rx="1" fill="#2b2b2b"/>138      </svg>139    </div>140  </div>141 142  <!-- Navigation Bar -->143  <div class="nav-bar">144    <div class="back-btn">145      <svg width="48" height="48" viewBox="0 0 24 24">146        <path d="M15 18l-6-6 6-6" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>147      </svg>148    </div>149    <div class="nav-title">3 seater sofa</div>150    <div style="width:84px;"></div>151  </div>152 153  <!-- Filter Chips -->154  <div class="chips">155    <div class="chip active">Best match</div>156    <div class="chip">Price</div>157    <div class="chip">Number of seats</div>158  </div>159  <div class="progress-line"><div class="progress"></div></div>160 161  <!-- Top Seller Badge -->162  <div class="badge">Top seller</div>163 164  <!-- Product Image -->165  <div class="product-image">[IMG: 3-seat sofa - dark blue]</div>166 167  <!-- Heart favorite circle -->168  <div class="fav-circle">169    <svg width="72" height="72" viewBox="0 0 24 24">170      <path d="M12 21s-7-4.5-9-8.7C1.8 9.3 3.6 7.5 6 7.5c1.6 0 3 .9 4 2.2 1-1.3 2.4-2.2 4-2.2 2.4 0 4.2 1.8 3 4.8C19 16.5 12 21 12 21z" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>171    </svg>172  </div>173 174  <!-- Product Info -->175  <div class="product-info">176    <div class="brand">ORMARYD</div>177    <div class="subtitle">3-seat sofa, dark blue</div>178    <div class="price">Rs. 19,990</div>179    <a href="#" class="options">+ Options</a>180  </div>181 182  <!-- Floating Add to Cart -->183  <div class="fab">184    <svg width="68" height="68" viewBox="0 0 24 24">185      <path d="M7 6h14l-2 8H9L7 6z" fill="none" stroke="#fff" stroke-width="1.8" stroke-linejoin="round"/>186      <circle cx="10" cy="20" r="1.6" fill="#fff"/>187      <circle cx="18" cy="20" r="1.6" fill="#fff"/>188      <path d="M3 6h3" stroke="#fff" stroke-width="2" stroke-linecap="round"/>189      <path d="M20 8v3" stroke="#fff" stroke-width="2" stroke-linecap="round"/>190      <path d="M22 9h-3" stroke="#fff" stroke-width="2" stroke-linecap="round"/>191    </svg>192  </div>193 194  <!-- Bottom Navigation -->195  <div class="bottom-nav">196    <div class="nav-item active">197      <svg width="56" height="56" viewBox="0 0 24 24">198        <path d="M3 10l9-7 9 7v10H3V10z" fill="none" stroke="#1f1f1f" stroke-width="2" stroke-linejoin="round"/>199      </svg>200      <div>Home</div>201    </div>202    <div class="nav-item">203      <svg width="56" height="56" viewBox="0 0 24 24">204        <circle cx="11" cy="11" r="6.5" fill="none" stroke="#9b9b9b" stroke-width="2"/>205        <path d="M20 20l-4-4" stroke="#9b9b9b" stroke-width="2" stroke-linecap="round"/>206      </svg>207      <div>Search</div>208    </div>209    <div class="nav-item">210      <svg width="56" height="56" viewBox="0 0 24 24">211        <rect x="4" y="4" width="16" height="5" fill="none" stroke="#9b9b9b" stroke-width="2"/>212        <rect x="4" y="10" width="16" height="5" fill="none" stroke="#9b9b9b" stroke-width="2"/>213        <rect x="4" y="16" width="16" height="4" fill="none" stroke="#9b9b9b" stroke-width="2"/>214      </svg>215      <div>Lists</div>216    </div>217    <div class="nav-item">218      <svg width="56" height="56" viewBox="0 0 24 24">219        <path d="M12 21s-7-4.5-9-8.7C1.8 9.3 3.6 7.5 6 7.5c1.6 0 3 .9 4 2.2 1-1.3 2.4-2.2 4-2.2 2.4 0 4.2 1.8 3 4.8C19 16.5 12 21 12 21z" fill="none" stroke="#9b9b9b" stroke-width="2"/>220      </svg>221      <div>Saved</div>222    </div>223    <div class="nav-item">224      <svg width="56" height="56" viewBox="0 0 24 24">225        <path d="M7 6h14l-2 8H9L7 6z" fill="none" stroke="#9b9b9b" stroke-width="2" stroke-linejoin="round"/>226        <circle cx="10" cy="20" r="1.6" fill="#9b9b9b"/>227        <circle cx="18" cy="20" r="1.6" fill="#9b9b9b"/>228      </svg>229      <div>Cart</div>230    </div>231  </div>232 233  <!-- Gesture bar -->234  <div class="bottom-gesture"></div>235</div>236</body>237</html>