GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>3 seater sofa</title>6<style>7  body{margin:0;padding:0;background:transparent;font-family: Arial, Helvetica, sans-serif;}8  #render-target{9    width:1080px;height:2400px;position:relative;overflow:hidden;background:#ffffff;10    box-sizing:border-box;11  }12  /* Status bar */13  .status-bar{14    position:absolute;top:0;left:0;width:100%;height:110px;15    display:flex;align-items:center;justify-content:space-between;16    padding:0 40px;color:#333;17    font-size:32px;18  }19  .status-icons{display:flex;gap:24px;align-items:center;}20  /* App bar with back and title */21  .app-bar{22    position:absolute;top:110px;left:0;width:100%;height:120px;23    display:flex;align-items:center;24    padding:0 40px;25  }26  .back-btn{27    width:72px;height:72px;border-radius:36px;display:flex;align-items:center;justify-content:center;28  }29  .title{30    font-size:54px;font-weight:700;color:#111;margin-left:20px;31  }32  /* Filter chips */33  .chips{34    position:absolute;top:240px;left:0;width:100%;35    padding:0 40px;36    display:flex;gap:24px;align-items:center;37  }38  .chip{39    font-size:36px;color:#222;padding:22px 36px;border-radius:60px;background:#f5f5f7;border:2px solid #e0e0e0;40  }41  .chip.active{border:4px solid #000;background:#fff;}42  .chips-underline{43    position:absolute;top:380px;left:40px;width:180px;height:6px;background:#000;border-radius:3px;44  }45  /* Product image placeholder */46  .product-img{47    position:absolute;top:460px;left:60px;width:960px;height:540px;48    background:#E0E0E0;border:1px solid #BDBDBD;color:#757575;49    display:flex;align-items:center;justify-content:center;text-align:center;50    border-radius:8px;51    font-size:30px;52  }53  /* Like circle */54  .like-circle{55    position:absolute;top:1180px;right:72px;width:160px;height:160px;border:4px solid #E0E0E0;border-radius:80px;56    display:flex;align-items:center;justify-content:center;background:#fff;57  }58  /* Product details */59  .details{60    position:absolute;top:1340px;left:40px;width:1000px;color:#111;61  }62  .name{font-size:44px;font-weight:800;letter-spacing:1px;margin-bottom:24px;}63  .subtitle{font-size:36px;color:#222;margin-bottom:28px;}64  .price{font-size:56px;font-weight:800;margin-bottom:30px;}65  .options{font-size:34px;color:#3b3b3b;text-decoration:underline;}66  /* Floating action button */67  .fab{68    position:absolute;right:60px;bottom:330px;width:150px;height:150px;border-radius:75px;background:#1f54a8;69    display:flex;align-items:center;justify-content:center;box-shadow:0 8px 16px rgba(0,0,0,0.25);70  }71  /* Bottom navigation */72  .bottom-nav{73    position:absolute;bottom:120px;left:0;width:100%;height:140px;border-top:1px solid #e6e6e6;74    display:flex;align-items:center;justify-content:space-around;background:#fff;75  }76  .nav-item{width:100px;height:100px;display:flex;align-items:center;justify-content:center;color:#9e9e9e;}77  .home-indicator{78    position:absolute;bottom:40px;left:50%;transform:translateX(-50%);79    width:520px;height:16px;background:#bdbdbd;border-radius:10px;80  }81  /* Generic icon color */82  svg{display:block}83</style>84</head>85<body>86<div id="render-target">87 88  <!-- Status Bar -->89  <div class="status-bar">90    <div>8:45</div>91    <div class="status-icons">92      <!-- WiFi icon -->93      <svg width="42" height="42" viewBox="0 0 24 24">94        <path d="M12 18.5l1.8 1.8-1.8 1.8-1.8-1.8L12 18.5z" fill="#555"/>95        <path d="M12 14c1.8 0 3.5.7 4.9 2.1l-1.3 1.3C14.5 16.3 13.3 15.8 12 15.8s-2.5.5-3.5 1.6l-1.3-1.3C8.5 14.7 10.2 14 12 14z" fill="#555"/>96        <path d="M12 9.5c3.1 0 6.1 1.2 8.4 3.4l-1.4 1.4C17 12.3 14.6 11.4 12 11.4s-5 .9-7 2.9L3.6 12.9C5.9 10.7 8.9 9.5 12 9.5z" fill="#777"/>97      </svg>98      <!-- Battery icon -->99      <svg width="48" height="42" viewBox="0 0 32 24">100        <rect x="2" y="5" width="24" height="14" rx="3" ry="3" stroke="#555" fill="none" stroke-width="2"/>101        <rect x="4" y="7" width="18" height="10" fill="#555"/>102        <rect x="26" y="9" width="4" height="6" rx="1" fill="#555"/>103      </svg>104    </div>105  </div>106 107  <!-- App Bar -->108  <div class="app-bar">109    <div class="back-btn">110      <svg width="32" height="32" viewBox="0 0 24 24">111        <path d="M15 4l-8 8 8 8" stroke="#000" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>112      </svg>113    </div>114    <div class="title">"3 seater sofa"</div>115  </div>116 117  <!-- Chips -->118  <div class="chips">119    <div class="chip active">Best match</div>120    <div class="chip">Price</div>121    <div class="chip">Number of seats</div>122    <div class="chip">Filter</div>123  </div>124  <div class="chips-underline"></div>125 126  <!-- Product Image -->127  <div class="product-img">[IMG: 3-seat sofa, Kilanda dark blue]</div>128 129  <!-- Like Circle -->130  <div class="like-circle">131    <svg width="72" height="72" viewBox="0 0 24 24">132      <path d="M12 21s-7-4.6-7-10.2C5 7.2 7.2 5 9.8 5c1.4 0 2.7.7 3.5 1.8C14.1 5.7 15.4 5 16.8 5 19.4 5 21.6 7.2 21 10.8 21 16.4 12 21 12 21z" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>133    </svg>134  </div>135 136  <!-- Product Details -->137  <div class="details">138    <div class="name">EKTORP</div>139    <div class="subtitle">3-seat sofa, Kilanda dark blue</div>140    <div class="price">Rs. 24,990</div>141    <div class="options">+ Options</div>142  </div>143 144  <!-- Floating Action Button -->145  <div class="fab">146    <svg width="70" height="70" viewBox="0 0 24 24">147      <!-- cart body -->148      <path d="M8 6h11l-2 9H9L7 4H3" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>149      <!-- plus sign -->150      <path d="M4 9h4M6 7v4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>151    </svg>152  </div>153 154  <!-- Bottom Navigation -->155  <div class="bottom-nav">156    <div class="nav-item">157      <!-- Home -->158      <svg width="56" height="56" viewBox="0 0 24 24">159        <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-5v-6H10v6H5a2 2 0 0 1-2-2v-9z" fill="none" stroke="#9e9e9e" stroke-width="2"/>160      </svg>161    </div>162    <div class="nav-item">163      <!-- Search -->164      <svg width="56" height="56" viewBox="0 0 24 24">165        <circle cx="11" cy="11" r="7" stroke="#9e9e9e" stroke-width="2" fill="none"/>166        <path d="M20 20l-4.5-4.5" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round"/>167      </svg>168    </div>169    <div class="nav-item">170      <!-- Columns/Grid -->171      <svg width="56" height="56" viewBox="0 0 24 24">172        <rect x="3" y="4" width="6" height="16" stroke="#9e9e9e" stroke-width="2" fill="none"/>173        <rect x="15" y="4" width="6" height="16" stroke="#9e9e9e" stroke-width="2" fill="none"/>174      </svg>175    </div>176    <div class="nav-item">177      <!-- Heart -->178      <svg width="56" height="56" viewBox="0 0 24 24">179        <path d="M12 21s-7-4.6-7-10.2C5 7.2 7.2 5 9.8 5c1.4 0 2.7.7 3.5 1.8C14.1 5.7 15.4 5 16.8 5 19.4 5 21.6 7.2 21 10.8 21 16.4 12 21 12 21z" fill="none" stroke="#9e9e9e" stroke-width="2"/>180      </svg>181    </div>182    <div class="nav-item">183      <!-- Cart -->184      <svg width="56" height="56" viewBox="0 0 24 24">185        <path d="M6 6h14l-2 10H9L7 3H3" fill="none" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>186        <circle cx="10" cy="20" r="1.6" fill="#9e9e9e"/>187        <circle cx="18" cy="20" r="1.6" fill="#9e9e9e"/>188      </svg>189    </div>190  </div>191 192  <div class="home-indicator"></div>193 194</div>195</body>196</html>