GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>UI Render</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12    color: #222;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #ffffff;20  }21 22  /* Top green status bar */23  .topbar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 120px;29    background: #5f7f3b;30    color: #fff;31    padding: 0 36px;32    box-sizing: border-box;33    display: flex;34    align-items: center;35    justify-content: space-between;36  }37  .topbar .left {38    display: flex;39    align-items: center;40    gap: 22px;41    font-weight: 600;42    font-size: 36px;43  }44  .topbar .right {45    display: flex;46    align-items: center;47    gap: 28px;48  }49  .icon {50    width: 34px;51    height: 34px;52    display: inline-block;53  }54  .icon svg { width: 100%; height: 100%; fill: #ffffff; }55 56  /* Location bar */57  .location-bar {58    position: absolute;59    top: 120px;60    left: 0;61    width: 1080px;62    height: 170px;63    background: #ffffff;64    border-bottom: 1px solid #e5e5e5;65    box-sizing: border-box;66    padding: 24px 40px;67    display: flex;68    align-items: center;69    gap: 24px;70  }71  .loc-icon-wrap {72    width: 72px;73    height: 72px;74    border-radius: 36px;75    background: #f1f8eb;76    display: flex;77    align-items: center;78    justify-content: center;79    border: 2px solid #cfe3c3;80  }81  .location-texts {82    display: flex;83    flex-direction: column;84    line-height: 1.25;85  }86  .location-title {87    font-size: 40px;88    color: #3d6f3e;89    font-weight: 700;90    display: inline-flex;91    align-items: center;92    gap: 10px;93  }94  .location-sub {95    margin-top: 8px;96    font-size: 30px;97    color: #666;98  }99  .caret {100    width: 24px; height: 24px; display: inline-block;101  }102  .caret svg { width: 100%; height: 100%; fill: #3d6f3e; }103 104  /* Content wrapper */105  .content {106    position: absolute;107    top: 290px;108    left: 0;109    width: 1080px;110    padding: 30px 50px 0 50px;111    box-sizing: border-box;112  }113 114  .section-title.green {115    font-size: 72px;116    color: #2f6d3f;117    font-weight: 700;118    margin: 24px 0 30px 10px;119    letter-spacing: 0.5px;120  }121  .section-title.red {122    font-size: 66px;123    color: #c75b55;124    font-weight: 700;125    margin: 60px 0 26px 10px;126    letter-spacing: 0.3px;127  }128 129  /* Cards */130  .card {131    background: #ffffff;132    border: 2px solid #d7dbe0;133    border-radius: 30px;134    box-sizing: border-box;135    overflow: hidden;136  }137  .card .card-body {138    padding: 30px 30px 20px 30px;139  }140  .brand-line {141    font-size: 48px;142    font-weight: 800;143    display: flex;144    align-items: baseline;145    gap: 8px;146  }147  .brand-big { color: #e53935; }148  .brand-basket { color: #222; }149  .brand-freshol { color: #e53935; font-weight: 800; }150  .brand-meats { color: #222; font-weight: 800; }151  .brand-the { color: #222; font-weight: 800; }152  .brand-beauty { color: #ff4fa3; font-weight: 800; }153  .brand-store { color: #222; font-weight: 800; }154 155  .card .subtitle {156    font-size: 34px;157    color: #444;158    margin-top: 12px;159  }160 161  .pill {162    margin-top: 18px;163    display: inline-flex;164    align-items: center;165    gap: 14px;166    background: #e9f6e7;167    color: #2f6d3f;168    padding: 16px 22px;169    border-radius: 24px;170    font-size: 30px;171    border: 1px solid #cfe6c9;172  }173  .pill .clock {174    width: 28px;175    height: 28px;176  }177  .pill .clock svg { width: 100%; height: 100%; fill: #2f6d3f; }178 179  .img-ph {180    width: 100%;181    height: 280px;182    background: #E0E0E0;183    border: 1px solid #BDBDBD;184    border-radius: 0 0 28px 28px;185    display: flex;186    align-items: center;187    justify-content: center;188    color: #757575;189    font-size: 30px;190  }191 192  /* Layout specifics */193  .single-card {194    width: 980px;195    margin-left: 10px;196  }197 198  .cards-row {199    display: flex;200    gap: 36px;201    margin: 0 10px;202  }203  .half-card {204    width: 472px;205  }206 207  /* NEW ribbon */208  .ribbon {209    position: absolute;210    top: 0;211    right: 0;212    background: #7d5df1;213    color: #fff;214    font-size: 26px;215    padding: 8px 16px;216    border-bottom-left-radius: 16px;217    font-weight: 700;218  }219 220  /* Bottom system bar */221  .system-bar {222    position: absolute;223    bottom: 0;224    left: 0;225    width: 1080px;226    height: 120px;227    background: #000;228    display: flex;229    align-items: center;230    justify-content: center;231  }232  .home-indicator {233    width: 200px;234    height: 12px;235    background: #ffffff;236    border-radius: 6px;237    opacity: 0.9;238  }239</style>240</head>241<body>242<div id="render-target">243 244  <!-- Top green status bar -->245  <div class="topbar">246    <div class="left">247      <span>12:32</span>248      <span class="icon" aria-hidden="true">249        <svg viewBox="0 0 24 24">250          <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5h-2v6h6v-2h-4z"/>251        </svg>252      </span>253      <span class="icon" aria-hidden="true">254        <svg viewBox="0 0 24 24">255          <path d="M12 2l4 8-8 0 4-8zm0 20a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/>256        </svg>257      </span>258      <span class="icon" aria-hidden="true">259        <svg viewBox="0 0 24 24">260          <circle cx="12" cy="12" r="10"/>261          <path d="M12 6v6l4 2" stroke="#5f7f3b" stroke-width="0"/>262        </svg>263      </span>264    </div>265    <div class="right">266      <span class="icon" aria-hidden="true" title="Mute">267        <svg viewBox="0 0 24 24">268          <path d="M4 9v6h4l5 5V4L8 9H4zM18 9l2-2-2-2-2 2 2 2z"/>269        </svg>270      </span>271      <span class="icon" aria-hidden="true" title="WiFi">272        <svg viewBox="0 0 24 24">273          <path d="M12 20l-2-2 2-2 2 2-2 2zm-6-6l6-6 6 6-2 2-4-4-4 4-2-2z"/>274        </svg>275      </span>276      <span class="icon" aria-hidden="true" title="Battery">277        <svg viewBox="0 0 24 24">278          <path d="M20 7h2v10h-2V7zM3 7h16v10H3V7zm4 2h8v6H7V9z"/>279        </svg>280      </span>281    </div>282  </div>283 284  <!-- Location selection bar -->285  <div class="location-bar">286    <div class="loc-icon-wrap">287      <svg class="icon" viewBox="0 0 24 24">288        <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#3d6f3e"/>289      </svg>290    </div>291    <div class="location-texts">292      <div class="location-title">293        <span>Selected Location</span>294        <span class="caret" aria-hidden="true">295          <svg viewBox="0 0 24 24">296            <path d="M7 10l5 5 5-5H7z"/>297          </svg>298        </span>299      </div>300      <div class="location-sub">Shiv Durga Vihar, Shiv Durga Vihar, Faridabad</div>301    </div>302  </div>303 304  <!-- Main content -->305  <div class="content">306    <div class="section-title.green">Shop groceries</div>307 308    <!-- Bigbasket card -->309    <div class="card single-card">310      <div class="card-body">311        <div class="brand-line">312          <span class="brand-big">big</span><span class="brand-basket">basket</span>313        </div>314        <div class="subtitle">1 lakh+ products at lowest prices</div>315        <div class="pill">316          <span class="clock">317            <svg viewBox="0 0 24 24">318              <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5h-2v6h6v-2h-4z"/>319            </svg>320          </span>321          <span>Get it in 4 hrs</span>322        </div>323      </div>324      <div class="img-ph">[IMG: Groceries collage]</div>325    </div>326 327    <div class="section-title.red">Do more with bigbasket</div>328 329    <!-- Two cards row -->330    <div class="cards-row">331      <!-- Fresh meats card -->332      <div class="card half-card" style="position: relative;">333        <div class="card-body">334          <div class="brand-line">335            <span class="brand-freshol">freshol</span><span class="brand-meats">meats</span>336          </div>337          <div class="subtitle">Fresh meats at lowest prices</div>338          <div class="pill">339            <span class="clock">340              <svg viewBox="0 0 24 24">341                <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5h-2v6h6v-2h-4z"/>342              </svg>343            </span>344            <span>Get it in 4 hrs</span>345          </div>346        </div>347        <div class="img-ph" style="height: 300px; border-radius: 0 0 28px 28px;">[IMG: Meat cuts and ingredients]</div>348      </div>349 350      <!-- Beauty store card -->351      <div class="card half-card" style="position: relative;">352        <div class="ribbon">NEW</div>353        <div class="card-body">354          <div class="brand-line">355            <span class="brand-the">the</span><span class="brand-beauty">beauty</span><span class="brand-store">store</span>356          </div>357          <div class="subtitle">One stop shop for beauty and grooming</div>358          <div class="pill">359            <span class="clock">360              <svg viewBox="0 0 24 24">361                <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5h-2v6h6v-2h-4z"/>362              </svg>363            </span>364            <span>Get it in 4 hrs</span>365          </div>366        </div>367        <div class="img-ph" style="height: 300px; border-radius: 0 0 28px 28px;">[IMG: Perfume sale banner]</div>368      </div>369    </div>370  </div>371 372  <!-- Bottom system bar -->373  <div class="system-bar">374    <div class="home-indicator"></div>375  </div>376 377</div>378</body>379</html>