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>Similar Products - Flipkart Style</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: Arial, Helvetica, sans-serif;16    color: #212121;17  }18  /* Top blue header */19  .status-bar {20    height: 88px;21    background: #1976d2;22    color: #fff;23    display: flex;24    align-items: center;25    padding: 0 36px;26    font-size: 32px;27    letter-spacing: 0.5px;28  }29  .status-bar .right {30    margin-left: auto;31    display: flex;32    gap: 28px;33    align-items: center;34  }35  .app-bar {36    height: 180px;37    background: #1976d2;38    color: #fff;39    display: flex;40    align-items: center;41    padding: 0 32px;42  }43  .app-bar .left {44    display: flex;45    align-items: center;46    gap: 24px;47  }48  .app-bar .logo-block {49    display: flex;50    flex-direction: column;51    line-height: 1.1;52  }53  .logo-title {54    font-size: 56px;55    font-weight: 700;56  }57  .logo-sub {58    font-size: 30px;59    color: #d0e8ff;60    display: flex;61    align-items: center;62    gap: 10px;63  }64  .app-bar .actions {65    margin-left: auto;66    display: flex;67    gap: 40px;68    align-items: center;69  }70  /* Section heading */71  .section-header {72    background: #fff;73    padding: 40px 40px 24px 40px;74    display: flex;75    align-items: center;76    gap: 24px;77    border-bottom: 1px solid #eeeeee;78  }79  .section-header .thumb {80    width: 140px;81    height: 80px;82    background: #E0E0E0;83    border: 1px solid #BDBDBD;84    display: flex;85    align-items: center;86    justify-content: center;87    color: #757575;88    font-size: 26px;89  }90  .section-header h2 {91    margin: 0;92    font-size: 46px;93    font-weight: 600;94    color: #333;95  }96  /* Products grid */97  .content {98    padding: 36px 40px 120px 40px;99  }100  .grid {101    display: grid;102    grid-template-columns: 1fr 1fr;103    column-gap: 48px;104    row-gap: 64px;105  }106  .card {107    padding-bottom: 12px;108  }109  .card .img {110    width: 100%;111    height: 280px;112    background: #E0E0E0;113    border: 1px solid #BDBDBD;114    display: flex;115    align-items: center;116    justify-content: center;117    color: #757575;118    font-size: 28px;119  }120  .title {121    margin: 22px 0 8px 0;122    font-size: 34px;123    color: #424242;124    white-space: nowrap;125    overflow: hidden;126    text-overflow: ellipsis;127  }128  .price {129    font-size: 44px;130    font-weight: 700;131    color: #1b1b1b;132    margin: 6px 0;133  }134  .meta {135    display: flex;136    align-items: baseline;137    gap: 18px;138    font-size: 32px;139  }140  .old {141    color: #9e9e9e;142    text-decoration: line-through;143  }144  .discount {145    color: #2e7d32;146    font-weight: 700;147  }148  /* Bottom gesture bar */149  .home-indicator {150    position: absolute;151    left: 50%;152    transform: translateX(-50%);153    bottom: 28px;154    width: 360px;155    height: 16px;156    background: #000;157    opacity: 0.3;158    border-radius: 16px;159  }160  /* Simple icon styles */161  svg { display: block; }162</style>163</head>164<body>165<div id="render-target">166  <!-- Top status bar -->167  <div class="status-bar">168    11:31169    <div class="right">170      <!-- simple dot icons to simulate status -->171      <svg width="28" height="28"><circle cx="14" cy="14" r="6" fill="#fff"/></svg>172      <svg width="28" height="28"><circle cx="14" cy="14" r="6" fill="#fff"/></svg>173      <svg width="34" height="28" viewBox="0 0 24 24"><path fill="#fff" d="M4 18h16v2H4v-2zm2-7h12v6H6v-6zm3-7h6v5H9V4z"/></svg>174      <svg width="34" height="28" viewBox="0 0 24 24"><path fill="#fff" d="M16 4h-8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm-1 17H9v1h6v-1z"/></svg>175    </div>176  </div>177 178  <!-- App bar -->179  <div class="app-bar">180    <div class="left">181      <!-- Back icon -->182      <svg width="56" height="56" viewBox="0 0 24 24">183        <path fill="#fff" d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>184      </svg>185      <div class="logo-block">186        <div class="logo-title">Flipkart</div>187        <div class="logo-sub">Explore Plus188          <svg width="24" height="24" viewBox="0 0 24 24">189            <path fill="#ffeb3b" d="M12 17.27L18.18 21 16.54 13.97 22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/>190          </svg>191        </div>192      </div>193    </div>194    <div class="actions">195      <!-- Search icon -->196      <svg width="56" height="56" viewBox="0 0 24 24">197        <path fill="#fff" d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.71.71l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/>198      </svg>199      <!-- Cart icon -->200      <svg width="56" height="56" viewBox="0 0 24 24">201        <path fill="#fff" d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2S15.9 22 17 22s2-.9 2-2-.9-2-2-2zM7.16 14h9.65c.75 0 1.41-.41 1.76-1.05l3.14-5.65A1 1 0 0 0 21 6H6.21l-.94-2H2v2h2l3.6 7.59-.95 1.72A2 2 0 0 0 6 17h12v-2H7.16z"/>202      </svg>203    </div>204  </div>205 206  <!-- Section header -->207  <div class="section-header">208    <div class="thumb">[IMG: Shoe]</div>209    <h2>Similar Products</h2>210  </div>211 212  <!-- Products -->213  <div class="content">214    <div class="grid">215      <!-- Card 1 -->216      <div class="card">217        <div class="img">[IMG: Black Nike Running Shoe]</div>218        <div class="title">NIKE Revolution 5 Running Sh...</div>219        <div class="price">₹2,586</div>220        <div class="meta">221          <span class="old">3,695</span>222          <span class="discount">30% off</span>223        </div>224      </div>225      <!-- Card 2 -->226      <div class="card">227        <div class="img">[IMG: Black/White Nike Running Shoe]</div>228        <div class="title">NIKE Revolution 5 Running Sh...</div>229        <div class="price">₹2,882</div>230        <div class="meta">231          <span class="old">3,695</span>232          <span class="discount">22% off</span>233        </div>234      </div>235      <!-- Card 3 -->236      <div class="card">237        <div class="img">[IMG: Grey Nike Running Shoe]</div>238        <div class="title">NIKE Revolution 5 Running Sh...</div>239        <div class="price">₹2,882</div>240        <div class="meta">241          <span class="old">3,695</span>242          <span class="discount">22% off</span>243        </div>244      </div>245      <!-- Card 4 -->246      <div class="card">247        <div class="img">[IMG: Light Grey Nike Road Running Shoe]</div>248        <div class="title">NIKE Revolution 6 Road Runnin...</div>249        <div class="price">₹2,882</div>250        <div class="meta">251          <span class="old">3,695</span>252          <span class="discount">22% off</span>253        </div>254      </div>255      <!-- Card 5 -->256      <div class="card">257        <div class="img">[IMG: Pink Nike Training Shoe]</div>258        <div class="title">NIKE Legend Essential 2 Traini...</div>259        <div class="price">₹3,146</div>260        <div class="meta">261          <span class="old">4,495</span>262          <span class="discount">30% off</span>263        </div>264      </div>265      <!-- Card 6 -->266      <div class="card">267        <div class="img">[IMG: Light Blue Nike Women Running Shoe]</div>268        <div class="title">NIKE Nike Revolution 6 Women...</div>269        <div class="price">₹3,695</div>270        <div class="meta">271          <span class="old"></span>272          <span class="discount"></span>273        </div>274      </div>275    </div>276  </div>277 278  <div class="home-indicator"></div>279</div>280</body>281</html>