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>Search Results - Flowers</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #1a1a1a; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #ffffff;15    border-radius: 0;16  }17 18  /* Status bar */19  .status-bar {20    height: 96px;21    padding: 0 32px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #222;26    font-size: 36px;27  }28  .status-right {29    display: flex;30    gap: 26px;31    align-items: center;32    opacity: 0.85;33  }34  .sb-icon svg { width: 36px; height: 36px; }35 36  /* Header */37  .header {38    height: 120px;39    display: flex;40    align-items: center;41    padding: 0 28px;42    gap: 18px;43  }44  .header .title {45    font-size: 46px;46    font-weight: 600;47    color: #222;48  }49  .header-actions {50    margin-left: auto;51    display: flex;52    gap: 28px;53  }54  .icon-btn {55    width: 60px;56    height: 60px;57    display: inline-flex;58    align-items: center;59    justify-content: center;60    border-radius: 30px;61    color: #222;62  }63  .icon-btn svg { width: 48px; height: 48px; }64 65  /* Location banner */66  .banner {67    margin: 0 0 12px 0;68    padding: 26px 32px;69    background: #eef4e4;70    border-top: 1px solid #e1e7d7;71    border-bottom: 1px solid #e1e7d7;72    display: flex;73    align-items: center;74    gap: 18px;75    color: #556c3b;76    font-size: 36px;77  }78  .banner .chev { margin-left: auto; opacity: 0.6; }79 80  /* Grid */81  .grid {82    padding: 16px 28px 220px 28px;83    display: grid;84    grid-template-columns: 1fr 1fr;85    gap: 34px;86  }87  .card {88    width: 100%;89  }90  .img-wrap {91    position: relative;92    width: 100%;93    height: 420px;94    border-radius: 28px;95    overflow: hidden;96    background: #E0E0E0;97    border: 1px solid #BDBDBD;98    display: flex;99    align-items: center;100    justify-content: center;101    color: #757575;102    font-size: 34px;103  }104  .fav {105    position: absolute;106    right: 18px;107    bottom: 18px;108    width: 84px;109    height: 84px;110    border-radius: 42px;111    background: rgba(255,255,255,0.95);112    border: 1px solid #e1e1e1;113    display: flex;114    align-items: center;115    justify-content: center;116  }117  .rating {118    position: absolute;119    left: 18px;120    bottom: 18px;121    display: inline-flex;122    align-items: center;123    gap: 10px;124    padding: 10px 16px;125    border-radius: 24px;126    background: rgba(255,255,255,0.95);127    border: 1px solid #e6e6e6;128    color: #333;129    font-size: 30px;130    font-weight: 600;131  }132  .rating svg { width: 28px; height: 28px; }133 134  .name {135    margin-top: 18px;136    font-size: 36px;137    line-height: 1.25;138    color: #222;139  }140  .price {141    margin-top: 8px;142    font-size: 44px;143    font-weight: 700;144    color: #111;145  }146  .delivery {147    margin-top: 6px;148    font-size: 32px;149    color: #3a63ff;150  }151 152  /* Bottom sort sheet */153  .sort-sheet {154    position: absolute;155    left: 0; right: 0; bottom: 52px;156    background: #ffffff;157    border-top: 1px solid #e9e9e9;158    height: 170px;159    display: flex;160    align-items: center;161    padding: 0 40px;162    gap: 24px;163    box-shadow: 0 -8px 24px rgba(0,0,0,0.06);164  }165  .sort-title {166    font-size: 40px;167    font-weight: 600;168  }169  .sort-sub {170    font-size: 30px;171    color: #666;172  }173  .sort-right {174    display: flex;175    flex-direction: column;176  }177 178  /* Gesture bar */179  .gesture {180    position: absolute;181    left: 50%;182    transform: translateX(-50%);183    bottom: 14px;184    width: 360px;185    height: 10px;186    background: #1a1a1a;187    border-radius: 6px;188    opacity: 0.85;189  }190 191  /* Utility small icons */192  .svg-24 { width: 40px; height: 40px; }193  .muted { opacity: 0.7; }194</style>195</head>196<body>197<div id="render-target">198 199  <!-- Status bar -->200  <div class="status-bar">201    <div class="time">12:37</div>202    <div class="status-right">203      <span class="sb-icon muted">204        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#9e9e9e"/></svg>205      </span>206      <span class="sb-icon muted">207        <svg viewBox="0 0 24 24"><path d="M12 2a9 9 0 0 0 0 18 9 9 0 0 0 0-18z" fill="#c7c7c7"/></svg>208      </span>209      <span class="sb-icon">210        <svg viewBox="0 0 24 24"><path d="M2 18h20v2H2zM4 4h16l-2 12H6L4 4z" fill="#444"/></svg>211      </span>212      <span class="sb-icon">213        <svg viewBox="0 0 24 24"><path d="M3 12h18" stroke="#444" stroke-width="2"/></svg>214      </span>215      <span class="sb-icon">216        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#444" stroke-width="2" fill="none"/><path d="M8 12l3 3 5-6" stroke="#444" stroke-width="2" fill="none"/></svg>217      </span>218    </div>219  </div>220 221  <!-- Header -->222  <div class="header">223    <button class="icon-btn" aria-label="Back">224      <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>225    </button>226    <div class="title">Search Results</div>227    <div class="header-actions">228      <button class="icon-btn" aria-label="Search">229        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#222" stroke-width="2" fill="none"/><path d="M20 20l-4-4" stroke="#222" stroke-width="2" fill="none"/></svg>230      </button>231      <button class="icon-btn" aria-label="Wishlist">232        <svg viewBox="0 0 24 24"><path d="M12 20s-7-4.3-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.7-7 9-7 9z" stroke="#222" stroke-width="2" fill="none"/></svg>233      </button>234      <button class="icon-btn" aria-label="Cart">235        <svg viewBox="0 0 24 24"><path d="M7 6h14l-2 10H8L6 4H3" stroke="#222" stroke-width="2" fill="none"/><circle cx="9" cy="20" r="1.6" fill="#222"/><circle cx="18" cy="20" r="1.6" fill="#222"/></svg>236      </button>237    </div>238  </div>239 240  <!-- Location banner -->241  <div class="banner">242    <svg class="svg-24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#8aa05b"/><rect x="11" y="6" width="2" height="7" fill="#fff"/><circle cx="12" cy="16" r="1.4" fill="#fff"/></svg>243    <div>Add delivery location to check availability</div>244    <div class="chev">245      <svg viewBox="0 0 24 24" width="40" height="40"><path d="M9 6l6 6-6 6" stroke="#556c3b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>246    </div>247  </div>248 249  <!-- Product grid -->250  <div class="grid">251 252    <!-- Card 1 -->253    <div class="card">254      <div class="img-wrap">255        [IMG: Fresh Flower Wreath]256        <div class="rating">257          <svg viewBox="0 0 24 24"><path d="M12 2l2.6 6.6 7 0.6-5.3 4.3 1.7 6.5L12 16.8 6 20l1.7-6.5L2.4 9.2l7-0.6L12 2z" fill="#333"/></svg>258          4.9259        </div>260        <div class="fav">261          <svg viewBox="0 0 24 24"><path d="M12 20s-7-4.3-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.7-7 9-7 9z" stroke="#666" stroke-width="2" fill="none"/></svg>262        </div>263      </div>264      <div class="name">Fresh Flower Wreath</div>265      <div class="price">₹4099</div>266      <div class="delivery">Earliest Delivery: Today</div>267    </div>268 269    <!-- Card 2 -->270    <div class="card">271      <div class="img-wrap">272        [IMG: Crimson Red Roses Hoop]273        <div class="rating">274          <svg viewBox="0 0 24 24"><path d="M12 2l2.6 6.6 7 0.6-5.3 4.3 1.7 6.5L12 16.8 6 20l1.7-6.5L2.4 9.2l7-0.6L12 2z" fill="#333"/></svg>275          5276        </div>277        <div class="fav">278          <svg viewBox="0 0 24 24"><path d="M12 20s-7-4.3-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.7-7 9-7 9z" stroke="#666" stroke-width="2" fill="none"/></svg>279        </div>280      </div>281      <div class="name">A Bed of Crimson Red Roses</div>282      <div class="price">₹1775</div>283      <div class="delivery">Earliest Delivery: Today</div>284    </div>285 286    <!-- Card 3 -->287    <div class="card">288      <div class="img-wrap">289        [IMG: Red Bouquet with Cake]290        <div class="rating">291          <svg viewBox="0 0 24 24"><path d="M12 2l2.6 6.6 7 0.6-5.3 4.3 1.7 6.5L12 16.8 6 20l1.7-6.5L2.4 9.2l7-0.6L12 2z" fill="#333"/></svg>292          4.5293        </div>294        <div class="fav">295          <svg viewBox="0 0 24 24"><path d="M12 20s-7-4.3-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.7-7 9-7 9z" stroke="#666" stroke-width="2" fill="none"/></svg>296        </div>297      </div>298      <div class="name">Black Forest and Flowers Eggless...</div>299      <div class="price">₹1599</div>300      <div class="delivery">Earliest Delivery: Today</div>301    </div>302 303    <!-- Card 4 -->304    <div class="card">305      <div class="img-wrap">306        [IMG: 40 Red Roses in Bowl Vase]307        <div class="rating">308          <svg viewBox="0 0 24 24"><path d="M12 2l2.6 6.6 7 0.6-5.3 4.3 1.7 6.5L12 16.8 6 20l1.7-6.5L2.4 9.2l7-0.6L12 2z" fill="#333"/></svg>309          4.8310        </div>311        <div class="fav">312          <svg viewBox="0 0 24 24"><path d="M12 20s-7-4.3-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.7-7 9-7 9z" stroke="#666" stroke-width="2" fill="none"/></svg>313        </div>314      </div>315      <div class="name">Extravagant 40 Red Roses Arran...</div>316      <div class="price">₹2075</div>317      <div class="delivery">Earliest Delivery: Today</div>318    </div>319 320    <!-- Card 5 -->321    <div class="card">322      <div class="img-wrap">323        [IMG: Red Roses Bouquet + Chocolate Cake]324        <div class="rating">325          <svg viewBox="0 0 24 24"><path d="M12 2l2.6 6.6 7 0.6-5.3 4.3 1.7 6.5L12 16.8 6 20l1.7-6.5L2.4 9.2l7-0.6L12 2z" fill="#333"/></svg>326          4.6327        </div>328        <div class="fav">329          <svg viewBox="0 0 24 24"><path d="M12 20s-7-4.3-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.7-7 9-7 9z" stroke="#666" stroke-width="2" fill="none"/></svg>330        </div>331      </div>332      <div class="name">Bouquet with Cake Combo</div>333      <div class="price">₹1899</div>334      <div class="delivery">Earliest Delivery: Today</div>335    </div>336 337    <!-- Card 6 -->338    <div class="card">339      <div class="img-wrap">340        [IMG: Mixed Roses Bouquet with Cake]341        <div class="rating">342          <svg viewBox="0 0 24 24"><path d="M12 2l2.6 6.6 7 0.6-5.3 4.3 1.7 6.5L12 16.8 6 20l1.7-6.5L2.4 9.2l7-0.6L12 2z" fill="#333"/></svg>343          4.7344        </div>345        <div class="fav">346          <svg viewBox="0 0 24 24"><path d="M12 20s-7-4.3-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.7-7 9-7 9z" stroke="#666" stroke-width="2" fill="none"/></svg>347        </div>348      </div>349      <div class="name">Mixed Roses with Cake</div>350      <div class="price">₹2199</div>351      <div class="delivery">Earliest Delivery: Today</div>352    </div>353 354  </div>355 356  <!-- Bottom sort sheet -->357  <div class="sort-sheet">358    <div class="icon-btn" style="background:#f6f6f6; width:74px; height:74px;">359      <svg viewBox="0 0 24 24" width="44" height="44">360        <path d="M8 4v14M8 18l-3-3m3 3l3-3M16 4v10M16 14l-3-3m3 3l3-3" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>361      </svg>362    </div>363    <div class="sort-right">364      <div class="sort-title">Sort By</div>365      <div class="sort-sub">Relevance</div>366    </div>367  </div>368 369  <!-- Gesture bar -->370  <div class="gesture"></div>371</div>372</body>373</html>