GD-ML/AndroidCode

1<html>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;10    background:#FFFFFF; color:#111;11  }12 13  /* Status bar */14  .status-bar{15    height:70px; padding:0 30px; display:flex; align-items:center; justify-content:space-between;16    font-size:28px; color:#666;17  }18  .status-icons{ display:flex; gap:18px; align-items:center; }19  .tiny-dot{ width:12px; height:12px; border-radius:50%; background:#666; opacity:0.7; }20 21  /* Header */22  .header{23    height:120px; display:flex; align-items:center; padding:0 26px 0 26px; gap:20px;24  }25  .back-btn{26    width:72px; height:72px; display:flex; align-items:center; justify-content:center;27    border-radius:36px; cursor:pointer;28  }29  .header-title{ font-size:44px; font-weight:700; color:#111; }30 31  /* Chips */32  .chips{ display:flex; gap:24px; padding:14px 26px 10px 26px; align-items:center; }33  .chip{34    padding:26px 34px; border-radius:50px; font-size:34px; color:#333; background:#F3F3F5;35    border:1px solid transparent;36  }37  .chip.active{ background:#FFF; border-color:#181818; font-weight:700; }38  .under-accent{39    width:160px; height:12px; background:#E13B62; border-radius:6px; margin-left:30px; margin-top:8px;40  }41 42  /* Product image */43  .product-image{44    margin:40px 26px 0 26px;45    height:420px; border:1px solid #BDBDBD; background:#E0E0E0;46    display:flex; align-items:center; justify-content:center; color:#666; font-size:36px;47  }48 49  /* Wishlist circle */50  .wish-wrap{51    position:absolute; right:70px; top:970px; width:150px; height:150px; border-radius:50%;52    border:6px solid #E6E6E6; display:flex; align-items:center; justify-content:center; background:#FFF;53  }54 55  /* Details */56  .details{ padding:36px 36px 0 36px; }57  .name{ font-size:44px; font-weight:800; letter-spacing:1px; margin-top:22px; }58  .subtitle{ font-size:36px; color:#444; margin-top:8px; }59  .price{ font-size:58px; font-weight:800; margin-top:28px; }60  .options{ margin-top:22px; font-size:36px; color:#3C6AD8; text-decoration:underline; width:max-content; }61  .badge{62    display:inline-block; margin-top:34px; background:#E24668; color:#fff; padding:18px 28px; border-radius:12px;63    font-size:34px; font-weight:700;64  }65 66  /* Floating cart button */67  .fab{68    position:absolute; right:54px; bottom:380px; width:132px; height:132px; border-radius:50%;69    background:#1E58A8; box-shadow:0 10px 20px rgba(0,0,0,0.25);70    display:flex; align-items:center; justify-content:center;71  }72 73  /* Bottom navigation */74  .bottom-nav{75    position:absolute; left:0; right:0; bottom:120px; height:160px; border-top:1px solid #EEE;76    display:flex; align-items:center; justify-content:space-around; background:#FFF;77  }78  .nav-item{ display:flex; flex-direction:column; align-items:center; gap:10px; font-size:26px; color:#9A9A9A; }79  .nav-item.active{ color:#1E1E1E; }80  .home-indicator{81    position:absolute; left:50%; transform:translateX(-50%);82    bottom:40px; width:470px; height:10px; background:#AFAFAF; border-radius:8px; opacity:0.7;83  }84 85  /* Simple resets for svg sizing */86  svg{ display:block; }87 88</style>89</head>90<body>91<div id="render-target">92 93  <!-- Status bar -->94  <div class="status-bar">95    <div>8:45</div>96    <div class="status-icons">97      <div class="tiny-dot"></div>98      <div class="tiny-dot"></div>99      <div class="tiny-dot"></div>100    </div>101  </div>102 103  <!-- Header -->104  <div class="header">105    <div class="back-btn" aria-label="Back">106      <svg width="40" height="40" viewBox="0 0 24 24">107        <path d="M15.5 4.5 7 12l8.5 7.5" fill="none" stroke="#111" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>108      </svg>109    </div>110    <div class="header-title">"3 seater sofa"</div>111  </div>112 113  <!-- Chips -->114  <div class="chips">115    <div class="chip active">Best match</div>116    <div class="chip">Price</div>117    <div class="chip">Number of seats</div>118  </div>119  <div class="under-accent"></div>120 121  <!-- Product image placeholder -->122  <div class="product-image">123    [IMG: 3-seat Sofa - Grey]124  </div>125 126  <!-- Wishlist icon circle on right -->127  <div class="wish-wrap">128    <svg width="64" height="64" viewBox="0 0 24 24">129      <path d="M12 21s-7.5-4.6-9.2-9.1C1.9 9.2 3.6 6.5 6.5 6.5c1.7 0 3 .8 3.5 2 0.5-1.2 1.8-2 3.5-2 2.9 0 4.6 2.7 3.7 5.4C19.5 16.4 12 21 12 21z"130            fill="none" stroke="#666" stroke-width="1.8" stroke-linejoin="round"/>131    </svg>132  </div>133 134  <!-- Details -->135  <div class="details">136    <div class="name">GAMMALBYN</div>137    <div class="subtitle">3-seat sofa, grey</div>138    <div class="price">Rs. 20,990</div>139    <div class="options">+ Options</div>140    <div class="badge">Top seller</div>141  </div>142 143  <!-- Floating cart button with plus -->144  <div class="fab" aria-label="Add to cart">145    <svg width="64" height="64" viewBox="0 0 24 24">146      <path d="M7 7h13l-1.6 7.5H9.2L7 7z" fill="none" stroke="#FFF" stroke-width="2" stroke-linejoin="round"/>147      <circle cx="10" cy="20" r="1.8" fill="#FFF"/>148      <circle cx="17.5" cy="20" r="1.8" fill="#FFF"/>149      <path d="M4 5h2" stroke="#FFF" stroke-width="2" stroke-linecap="round"/>150      <path d="M20.5 12.5h-3m1.5-1.5v3" 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      <svg width="56" height="56" viewBox="0 0 24 24">158        <path d="M3 11.5 12 4l9 7.5V21H3z" fill="none" stroke="#9A9A9A" stroke-width="2" />159      </svg>160    </div>161    <div class="nav-item active">162      <svg width="56" height="56" viewBox="0 0 24 24">163        <circle cx="11" cy="11" r="7" fill="none" stroke="#111" stroke-width="2"/>164        <path d="M20 20l-3.5-3.5" stroke="#111" stroke-width="2" stroke-linecap="round"/>165      </svg>166    </div>167    <div class="nav-item">168      <svg width="56" height="56" viewBox="0 0 24 24">169        <rect x="5" y="5" width="14" height="14" rx="2" ry="2" fill="none" stroke="#9A9A9A" stroke-width="2"/>170        <path d="M5 10h14M12 5v14" stroke="#9A9A9A" stroke-width="2"/>171      </svg>172    </div>173    <div class="nav-item">174      <svg width="56" height="56" viewBox="0 0 24 24">175        <path d="M12 21s-7.5-4.6-9.2-9.1C1.9 9.2 3.6 6.5 6.5 6.5c1.7 0 3 .8 3.5 2 0.5-1.2 1.8-2 3.5-2 2.9 0 4.6 2.7 3.7 5.4C19.5 16.4 12 21 12 21z"176              fill="none" stroke="#9A9A9A" stroke-width="1.8"/>177      </svg>178    </div>179    <div class="nav-item">180      <svg width="56" height="56" viewBox="0 0 24 24">181        <path d="M6 7h12l-1.5 12H7.5L6 7z" fill="none" stroke="#9A9A9A" stroke-width="2"/>182        <path d="M8 7V5h8v2" stroke="#9A9A9A" stroke-width="2"/>183      </svg>184    </div>185  </div>186 187  <!-- Home indicator -->188  <div class="home-indicator"></div>189 190</div>191</body>192</html>