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>Pink Orchids Plant - UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    color: #222;15  }16 17  /* Top status bar */18  .status-bar {19    height: 90px;20    padding: 0 40px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    font-size: 34px;25    color: #4f4f4f;26  }27  .status-right {28    display: flex;29    gap: 26px;30    align-items: center;31  }32  .dot { width: 10px; height: 10px; background: #777; border-radius: 50%; display: inline-block; }33 34  /* Toolbar */35  .toolbar {36    height: 110px;37    display: flex;38    align-items: center;39    justify-content: space-between;40    padding: 0 30px;41  }42  .icon-btn {43    width: 80px;44    height: 80px;45    display: inline-flex;46    align-items: center;47    justify-content: center;48    border-radius: 40px;49    color: #222;50  }51  .toolbar-right {52    display: flex;53    gap: 30px;54  }55 56  /* Product image */57  .image-wrap {58    width: 100%;59    padding: 0 40px;60    margin-top: 10px;61  }62  .product-image {63    width: 100%;64    height: 920px;65    background: #E0E0E0;66    border: 1px solid #BDBDBD;67    display: flex;68    align-items: center;69    justify-content: center;70    color: #757575;71    font-size: 36px;72    border-radius: 8px;73  }74 75  /* Floating action icons on image */76  .float-circle {77    position: absolute;78    right: 40px;79    width: 110px;80    height: 110px;81    background: #fff;82    border: 1px solid #dcdcdc;83    border-radius: 55px;84    display: flex;85    align-items: center;86    justify-content: center;87    box-shadow: 0 2px 8px rgba(0,0,0,0.08);88  }89  .float-share { top: 920px; }90  .float-heart { top: 1100px; }91 92  /* Product details */93  .content {94    padding: 0 40px;95  }96  .title {97    font-size: 50px;98    font-weight: 600;99    margin-top: 30px;100  }101  .price-row {102    margin-top: 24px;103    display: flex;104    align-items: baseline;105    gap: 20px;106  }107  .price {108    font-size: 46px;109    font-weight: 700;110  }111  .tax {112    font-size: 30px;113    color: #777;114  }115 116  /* Sections */117  .section-title {118    font-size: 40px;119    font-weight: 600;120    margin-top: 50px;121    margin-bottom: 24px;122  }123  .input-row {124    height: 120px;125    border: 2px solid #E6E6E6;126    border-radius: 26px;127    display: flex;128    align-items: center;129    justify-content: space-between;130    padding: 0 30px;131    font-size: 36px;132    color: #333;133    background: #fff;134  }135  .input-left {136    display: flex;137    align-items: center;138    gap: 22px;139  }140 141  /* Bottom sticky bar */142  .bottom-bar {143    position: absolute;144    left: 0;145    bottom: 0;146    width: 100%;147    height: 190px;148    background: #ffffff;149    border-top: 1px solid #e9e9e9;150    display: flex;151    align-items: center;152    justify-content: space-between;153    padding: 24px 30px;154    box-sizing: border-box;155  }156  .cta {157    width: 48%;158    height: 120px;159    display: flex;160    align-items: center;161    justify-content: center;162    font-size: 44px;163    font-weight: 700;164    border-radius: 26px;165    gap: 20px;166    cursor: pointer;167  }168  .cta-outline {169    background: #f7f7f2;170    border: 2px solid #c1c195;171    color: #3c3c2b;172  }173  .cta-solid {174    background: #7F7A3E;175    color: #fff;176  }177 178  /* Simple SVG icon styling */179  svg { width: 44px; height: 44px; }180  .big-icon svg { width: 60px; height: 60px; }181</style>182</head>183<body>184<div id="render-target">185 186  <!-- Status Bar -->187  <div class="status-bar">188    <div>2:58</div>189    <div class="status-right">190      <span>◦</span>191      <span>○</span>192      <span>⬤</span>193      <span class="dot"></span>194    </div>195  </div>196 197  <!-- Toolbar -->198  <div class="toolbar">199    <div class="icon-btn" aria-label="Back">200      <svg viewBox="0 0 24 24"><path d="M15 19L8 12l7-7" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>201    </div>202    <div class="toolbar-right">203      <div class="icon-btn" aria-label="Search">204        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" fill="none" stroke="#222" stroke-width="2"/><path d="M20 20l-4-4" stroke="#222" stroke-width="2" stroke-linecap="round"/></svg>205      </div>206      <div class="icon-btn" aria-label="Wishlist">207        <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9-8.5C1.4 9.1 3.1 7 5.5 7c1.6 0 3 .9 3.8 2.3C10.2 7.9 11.6 7 13.2 7c2.4 0 4.1 2.1 3.5 5.5C19 16.4 12 21 12 21z" fill="none" stroke="#222" stroke-width="2" stroke-linejoin="round"/></svg>208      </div>209      <div class="icon-btn" aria-label="Cart">210        <svg viewBox="0 0 24 24"><path d="M3 4h2l2 12h10l2-8H7" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round"/><circle cx="9" cy="20" r="1.8"/><circle cx="17" cy="20" r="1.8"/></svg>211      </div>212    </div>213  </div>214 215  <!-- Product Image -->216  <div class="image-wrap">217    <div class="product-image">[IMG: Pink Orchids Plant in White Bowl]</div>218  </div>219 220  <!-- Floating share/heart icons -->221  <div class="float-circle float-share">222    <svg viewBox="0 0 24 24" class="big-icon"><path d="M4 12v7a2 2 0 0 0 2 2h12" fill="none" stroke="#333" stroke-width="2"/><path d="M12 5l5 5-5 5M12 5H7a2 2 0 0 0-2 2v3" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>223  </div>224  <div class="float-circle float-heart">225    <svg viewBox="0 0 24 24" class="big-icon"><path d="M12 21s-7-4.6-9-8.5C1.4 9.1 3.1 7 5.5 7c1.6 0 3 .9 3.8 2.3C10.2 7.9 11.6 7 13.2 7c2.4 0 4.1 2.1 3.5 5.5C19 16.4 12 21 12 21z" fill="none" stroke="#333" stroke-width="2" stroke-linejoin="round"/></svg>226  </div>227 228  <!-- Content -->229  <div class="content">230    <div class="title">Pink Orchids Plant</div>231 232    <div class="price-row">233      <div class="price">₹8349</div>234    </div>235    <div class="tax">Price inclusive of all taxes ▾</div>236 237    <div class="section-title">Gift Receiver’s Location</div>238    <div class="input-row">239      <div class="input-left">240        <svg viewBox="0 0 24 24"><path d="M12 21s-6-6.2-6-10a6 6 0 1 1 12 0c0 3.8-6 10-6 10z" fill="none" stroke="#666" stroke-width="2"/><circle cx="12" cy="11" r="2.5" fill="none" stroke="#666" stroke-width="2"/></svg>241        <span>Amsterdam</span>242      </div>243      <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>244    </div>245 246    <div class="section-title">Select a Date</div>247    <div class="input-row">248      <div class="input-left">249        <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="#666" stroke-width="2"/><path d="M8 3v4M16 3v4M3 10h18" stroke="#666" stroke-width="2"/></svg>250        <span>Select Date</span>251      </div>252      <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>253    </div>254  </div>255 256  <!-- Bottom sticky bar -->257  <div class="bottom-bar">258    <div class="cta cta-outline">259      <svg viewBox="0 0 24 24"><path d="M3 4h2l2 12h10l2-8H7" fill="none" stroke="#3c3c2b" stroke-width="2" stroke-linecap="round"/><circle cx="9" cy="20" r="1.8" fill="#3c3c2b"/><circle cx="17" cy="20" r="1.8" fill="#3c3c2b"/></svg>260      <span>Add To Cart</span>261    </div>262    <div class="cta cta-solid">263      <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9-8.5C1.4 9.1 3.1 7 5.5 7c1.6 0 3 .9 3.8 2.3C10.2 7.9 11.6 7 13.2 7c2.4 0 4.1 2.1 3.5 5.5C19 16.4 12 21 12 21z" fill="none" stroke="#fff" stroke-width="2"/></svg>264      <span>Gift Now</span>265    </div>266  </div>267 268</div>269</body>270</html>