GD-ML/AndroidCode

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 Suggestions</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff;13  }14 15  .topbar {16    height: 160px;17    padding: 60px 60px 0 60px;18    position: relative;19  }20  .topbar .left-icon { position: absolute; left: 40px; top: 80px; }21  .topbar .right-icons { position: absolute; right: 40px; top: 80px; display: flex; gap: 40px; }22  .topbar svg { width: 48px; height: 48px; }23 24  .heading {25    font-size: 46px;26    font-weight: 700;27    color: #111;28    padding: 40px 60px 10px 60px;29  }30 31  .products {32    display: flex;33    gap: 60px;34    padding: 20px 60px 0 60px;35  }36  .card {37    width: 420px;38    position: relative;39  }40  .fav {41    position: absolute;42    right: 20px;43    top: -20px;44    opacity: 0.55;45  }46  .img {47    width: 100%;48    height: 320px;49    background: #E0E0E0;50    border: 1px solid #BDBDBD;51    display: flex; align-items: center; justify-content: center;52    color: #757575; font-size: 28px;53  }54  .title {55    margin-top: 28px;56    font-size: 32px;57    font-weight: 800;58    letter-spacing: 0.5px;59    color: #111;60  }61  .subtitle {62    font-size: 28px;63    color: #666;64    margin-top: 8px;65  }66  .price {67    margin-top: 22px;68    font-size: 40px;69    font-weight: 800;70    color: #111;71  }72  .price.highlight {73    display: inline-block;74    background: #ffe36a;75    border-bottom: 6px solid #c93b3b;76    padding: 8px 14px;77    border-radius: 6px;78  }79 80  .add-small {81    margin-top: 26px;82    width: 120px; height: 120px;83    background: #215AA5;84    border-radius: 60px;85    display: flex; align-items: center; justify-content: center;86    box-shadow: 0 6px 12px rgba(0,0,0,0.15);87  }88  .add-small svg { width: 58px; height: 58px; }89 90  .divider {91    margin: 60px 60px 0 60px;92    height: 1px;93    background: linear-gradient(to right, #222 0%, #222 10%, #eee 10%, #eee 100%);94  }95 96  .note {97    font-size: 30px;98    color: #666;99    margin: 36px 60px 0 60px;100    line-height: 1.45;101  }102 103  .cta {104    position: absolute;105    left: 40px;106    right: 40px;107    bottom: 240px;108    height: 130px;109    background: #215AA5;110    border-radius: 65px;111    display: flex; align-items: center; justify-content: center;112    color: #fff;113    font-size: 40px; font-weight: 700;114    letter-spacing: 0.3px;115    box-shadow: 0 10px 20px rgba(0,0,0,0.15);116  }117 118  .bottom-nav {119    position: absolute;120    left: 0; right: 0; bottom: 90px;121    height: 140px;122    border-top: 1px solid #eee;123    background: #fff;124    display: flex; align-items: center; justify-content: space-around;125    padding: 0 60px;126  }127  .bottom-nav svg { width: 56px; height: 56px; stroke: #9aa0a6; fill: none; }128 129</style>130</head>131<body>132<div id="render-target">133 134  <div class="topbar">135    <div class="left-icon">136      <svg viewBox="0 0 48 48">137        <path d="M30 8 L14 24 L30 40" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>138      </svg>139    </div>140    <div class="right-icons">141      <svg viewBox="0 0 48 48">142        <circle cx="12" cy="24" r="5" stroke="#111" stroke-width="3" fill="none"/>143        <circle cx="36" cy="12" r="5" stroke="#111" stroke-width="3" fill="none"/>144        <circle cx="36" cy="36" r="5" stroke="#111" stroke-width="3" fill="none"/>145        <path d="M17 22 L31 14 M17 26 L31 34" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round"/>146      </svg>147      <svg viewBox="0 0 48 48">148        <path d="M24 40 C24 40 8 30 8 18 C8 12 13 8 18 8 C22 8 24 12 24 12 C24 12 26 8 30 8 C35 8 40 12 40 18 C40 30 24 40 24 40 Z" stroke="#111" stroke-width="3" fill="none"/>149      </svg>150    </div>151  </div>152 153  <div class="heading">You may also like</div>154 155  <div class="products">156    <!-- Card 1 -->157    <div class="card">158      <div class="fav">159        <svg viewBox="0 0 48 48">160          <path d="M24 40 C24 40 8 30 8 18 C8 12 13 8 18 8 C22 8 24 12 24 12 C24 12 26 8 30 8 C35 8 40 12 40 18 C40 30 24 40 24 40 Z" stroke="#444" stroke-width="3" fill="none"/>161        </svg>162      </div>163      <div class="img">[IMG: Black combination padlock]</div>164      <div class="title">ELLOVEN</div>165      <div class="subtitle">padlock, grey</div>166      <div class="price">Rs. 199</div>167      <div class="add-small">168        <svg viewBox="0 0 48 48">169          <path d="M16 20 H32 V38 H16 Z" stroke="#fff" stroke-width="3" fill="none"/>170          <path d="M18 20 C18 15 30 15 30 20" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>171          <path d="M24 26 V32 M21 29 H27" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>172        </svg>173      </div>174    </div>175 176    <!-- Card 2 -->177    <div class="card">178      <div class="fav">179        <svg viewBox="0 0 48 48">180          <path d="M24 40 C24 40 8 30 8 18 C8 12 13 8 18 8 C22 8 24 12 24 12 C24 12 26 8 30 8 C35 8 40 12 40 18 C40 30 24 40 24 40 Z" stroke="#444" stroke-width="3" fill="none"/>181        </svg>182      </div>183      <div class="img">[IMG: Grey mobile phone holder]</div>184      <div class="title">YUPPIENALLE</div>185      <div class="subtitle">holder for mobile phone, grey</div>186      <div class="price"><span class="price highlight">Rs. 49</span></div>187      <div class="add-small">188        <svg viewBox="0 0 48 48">189          <path d="M16 20 H32 V38 H16 Z" stroke="#fff" stroke-width="3" fill="none"/>190          <path d="M18 20 C18 15 30 15 30 20" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>191          <path d="M24 26 V32 M21 29 H27" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>192        </svg>193      </div>194    </div>195  </div>196 197  <div class="divider"></div>198 199  <div class="note">The price depends on selected items</div>200  <div class="note">Delivery and assembly prices are not included</div>201 202  <div class="cta">Add to bag Rs. 199</div>203 204  <div class="bottom-nav">205    <!-- Home -->206    <svg viewBox="0 0 48 48">207      <path d="M8 22 L24 10 L40 22 V38 H28 V28 H20 V38 H8 Z" stroke="#9aa0a6" stroke-width="3" fill="none" stroke-linejoin="round"/>208    </svg>209    <!-- Search -->210    <svg viewBox="0 0 48 48">211      <circle cx="21" cy="21" r="12" stroke="#9aa0a6" stroke-width="3" />212      <path d="M32 32 L40 40" stroke="#9aa0a6" stroke-width="3" stroke-linecap="round"/>213    </svg>214    <!-- Account -->215    <svg viewBox="0 0 48 48">216      <circle cx="24" cy="18" r="8" stroke="#9aa0a6" stroke-width="3" />217      <path d="M8 40 C8 30 40 30 40 40" stroke="#9aa0a6" stroke-width="3" fill="none" stroke-linecap="round"/>218    </svg>219    <!-- Wishlist -->220    <svg viewBox="0 0 48 48">221      <path d="M24 40 C24 40 8 30 8 18 C8 12 13 8 18 8 C22 8 24 12 24 12 C24 12 26 8 30 8 C35 8 40 12 40 18 C40 30 24 40 24 40 Z" stroke="#9aa0a6" stroke-width="3" fill="none"/>222    </svg>223    <!-- Bag -->224    <svg viewBox="0 0 48 48">225      <path d="M12 18 H36 L34 40 H14 Z" stroke="#9aa0a6" stroke-width="3" fill="none"/>226      <path d="M18 18 C18 14 30 14 30 18" stroke="#9aa0a6" stroke-width="3" fill="none" stroke-linecap="round"/>227    </svg>228  </div>229 230</div>231</body>232</html>