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>Saffola Classic Masala oats</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    background: #000000;25    color: #ffffff;26    font-size: 34px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 34px;31    box-sizing: border-box;32  }33  .status-icons {34    display: flex;35    align-items: center;36    gap: 18px;37  }38  .dot {39    width: 16px; height: 16px; background: #fff; border-radius: 50%;40    opacity: 0.9;41  }42  .battery {43    width: 42px; height: 22px; border: 2px solid #fff; border-radius: 4px; position: relative;44  }45  .battery::after {46    content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #fff; border-radius: 2px;47  }48 49  /* Top navigation */50  .nav-bar {51    position: absolute;52    top: 110px;53    left: 0;54    width: 1080px;55    height: 128px;56    border-bottom: 1px solid #e9edf2;57    display: flex;58    align-items: center;59    padding: 0 28px;60    box-sizing: border-box;61    gap: 20px;62  }63  .nav-title {64    font-size: 44px;65    color: #243043;66    font-weight: 700;67    flex: 1;68  }69  .icon-btn {70    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; cursor: default;71  }72  .icon {73    width: 40px; height: 40px;74  }75 76  /* Product row */77  .product {78    position: absolute;79    top: 110px + 128px; /* not supported, so place manually below */80  }81  .product-row {82    position: absolute;83    top: 238px;84    left: 0;85    width: 1080px;86    padding: 34px 36px;87    box-sizing: border-box;88    display: flex;89    gap: 24px;90    align-items: flex-start;91  }92  .prod-img {93    width: 200px; height: 200px;94    background: #E0E0E0;95    border: 1px solid #BDBDBD;96    display: flex; align-items: center; justify-content: center;97    color: #757575; font-size: 26px; text-align: center; padding: 8px;98    border-radius: 8px;99  }100  .prod-info {101    flex: 1;102    min-width: 0;103  }104  .prod-title {105    font-size: 38px;106    font-weight: 700;107    color: #2f3b4a;108    line-height: 1.2;109    margin-bottom: 18px;110  }111  .variant-pill {112    display: inline-block;113    padding: 14px 22px;114    border: 2px solid #e3e7ec;115    border-radius: 14px;116    color: #3a4a5b;117    font-size: 30px;118    background: #fafbfc;119    margin-bottom: 18px;120  }121  .price-line {122    display: flex; align-items: baseline; gap: 18px;123  }124  .price-main { font-size: 48px; font-weight: 800; color: #111827; }125  .price-strike { font-size: 34px; color: #9aa5b1; text-decoration: line-through; }126  .price-save { font-size: 34px; color: #2e7d32; font-weight: 700; }127 128  .side-actions {129    width: 210px;130    display: flex;131    flex-direction: column;132    align-items: flex-end;133    gap: 26px;134    margin-top: 8px;135  }136  .calendar {137    width: 84px; height: 84px; border: 2px solid #3b82f6; border-radius: 14px; display: flex; align-items: center; justify-content: center;138  }139  .add-btn {140    padding: 18px 34px;141    border: 3px solid #3b82f6;142    color: #3b82f6;143    font-weight: 800;144    font-size: 34px;145    border-radius: 16px;146    background: #ffffff;147  }148 149  /* White space area */150  .content-space {151    position: absolute;152    top: 520px;153    left: 0;154    width: 1080px;155    height: 820px;156    background: transparent;157  }158 159  /* Keyboard overlay */160  .keyboard {161    position: absolute;162    bottom: 0;163    left: 0;164    width: 1080px;165    height: 880px;166    background: #1f1f22;167    border-top-left-radius: 26px;168    border-top-right-radius: 26px;169    padding: 22px 26px 80px;170    box-sizing: border-box;171    color: #d6d6d6;172  }173  .kb-title {174    text-align: center;175    font-size: 36px;176    color: #bdbdbd;177    margin-top: 6px;178    margin-bottom: 16px;179  }180  .kb-rows {181    display: grid;182    grid-template-rows: repeat(4, 1fr);183    row-gap: 22px;184    height: calc(100% - 80px);185    padding-top: 20px;186  }187  .kb-row {188    display: flex;189    gap: 18px;190    justify-content: center;191  }192  .key {193    height: 120px;194    background: #2a2d31;195    border-radius: 18px;196    min-width: 86px;197    flex: 0 0 86px;198  }199  .key.wide { flex-basis: 140px; }200  .key.xwide { flex-basis: 210px; }201  .space { flex-basis: 440px; }202  .home-indicator {203    position: absolute;204    bottom: 18px;205    left: 50%;206    transform: translateX(-50%);207    width: 360px;208    height: 10px;209    background: #e9e9e9;210    border-radius: 8px;211    opacity: 0.9;212  }213</style>214</head>215<body>216<div id="render-target">217  <!-- Status bar -->218  <div class="status-bar">219    <div>12:35</div>220    <div class="status-icons">221      <div class="dot" style="opacity:0.6;"></div>222      <div class="dot"></div>223      <div class="dot" style="background:#88a;"></div>224      <div class="dot" style="width:6px;height:6px;opacity:0.7;"></div>225      <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff"><path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z"/></svg>226      <svg width="26" height="26" viewBox="0 0 24 24" fill="#fff"><path d="M12 3a4 4 0 0 0-4 4v3H6v6h12V10h-2V7a4 4 0 0 0-4-4z"/></svg>227      <div class="battery"></div>228    </div>229  </div>230 231  <!-- Navigation bar -->232  <div class="nav-bar">233    <div class="icon-btn">234      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#1f2a37" stroke-width="2.5">235        <path d="M15 19l-7-7 7-7"/>236      </svg>237    </div>238    <div class="nav-title">Saffola Classic Masala oats</div>239    <div class="icon-btn">240      <svg class="icon" viewBox="0 0 24 24" stroke="#1f2a37" stroke-width="2.5">241        <line x1="5" y1="5" x2="19" y2="19"/>242        <line x1="19" y1="5" x2="5" y2="19"/>243      </svg>244    </div>245  </div>246 247  <!-- Product Row -->248  <div class="product-row">249    <div class="prod-img">[IMG: Saffola Oats Pack]</div>250 251    <div class="prod-info">252      <div class="prod-title">Saffola Masala Oats Classic Masala</div>253      <div class="variant-pill">38 GM</div>254      <div class="price-line">255        <div class="price-main">₹16.66</div>256        <div class="price-strike">₹17</div>257        <div class="price-save">₹0.34 OFF</div>258      </div>259    </div>260 261    <div class="side-actions">262      <div class="calendar">263        <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2">264          <rect x="3" y="4" width="18" height="16" rx="2"></rect>265          <line x1="3" y1="8" x2="21" y2="8"></line>266          <line x1="8" y1="2" x2="8" y2="6"></line>267          <line x1="16" y1="2" x2="16" y2="6"></line>268          <rect x="7" y="11" width="3" height="3"></rect>269          <rect x="12" y="11" width="3" height="3"></rect>270        </svg>271      </div>272      <button class="add-btn">+ ADD</button>273    </div>274  </div>275 276  <div class="content-space"></div>277 278  <!-- Keyboard overlay -->279  <div class="keyboard">280    <div class="kb-title">oats</div>281 282    <div class="kb-rows">283      <div class="kb-row">284        <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>285        <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>286        <div class="key"></div><div class="key"></div>287      </div>288      <div class="kb-row">289        <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>290        <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>291        <div class="key"></div>292      </div>293      <div class="kb-row">294        <div class="key wide"></div>295        <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>296        <div class="key"></div><div class="key"></div><div class="key"></div>297        <div class="key wide"></div>298      </div>299      <div class="kb-row">300        <div class="key wide"></div>301        <div class="key"></div>302        <div class="key space xwide"></div>303        <div class="key"></div>304        <div class="key wide"></div>305      </div>306    </div>307 308    <div class="home-indicator"></div>309  </div>310</div>311</body>312</html>