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>Generated UI</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #ffffff;15    font-family: Arial, Helvetica, sans-serif;16    color: #222;17  }18 19  /* Header and status bar */20  .header {21    background: #1E4FB7;22    color: #fff;23    padding-bottom: 26px;24  }25  .status {26    height: 100px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 36px;31    font-size: 40px;32  }33  .status-icons svg { margin-left: 24px; }34  .brand-row {35    display: flex;36    align-items: center;37    padding: 12px 36px;38  }39  .burger {40    width: 72px; height: 72px;41    display: flex; align-items: center; justify-content: center;42    margin-right: 24px;43  }44  .logo-pill {45    flex: 1;46    height: 110px;47    border-radius: 55px;48    background: #ffffff;49    display: flex;50    align-items: center;51    justify-content: center;52    color: #1E4FB7;53    font-weight: bold;54    font-size: 40px;55    letter-spacing: 1px;56  }57  .cart {58    width: 80px; height: 80px;59    display: flex; align-items: center; justify-content: center;60    margin-left: 24px;61  }62  .search-wrap {63    padding: 14px 36px 0;64  }65  .search-bar {66    background: #ffffff;67    border-radius: 8px;68    height: 96px;69    display: flex;70    align-items: center;71    padding: 0 24px;72  }73  .search-input {74    flex: 1;75    color: #666;76    font-size: 34px;77  }78  .search-icon { width: 56px; height: 56px; }79 80  /* Quick actions row */81  .quick-actions {82    display: flex;83    justify-content: space-around;84    align-items: center;85    padding: 22px 10px;86    border-top: 1px solid #eaeaea;87    border-bottom: 1px solid #eaeaea;88    background: #fff;89  }90  .qa-item {91    width: 240px;92    text-align: center;93    font-size: 32px;94    color: #111;95  }96  .qa-icon {97    width: 88px; height: 88px;98    border-radius: 44px;99    background: #e8f0ff;100    margin: 0 auto 10px;101    display: flex; align-items: center; justify-content: center;102  }103 104  /* Banners */105  .banner {106    margin: 14px 18px;107    height: 320px;108    border-radius: 12px;109    overflow: hidden;110    background: #E0E0E0;111    border: 1px solid #BDBDBD;112    display: flex;113    align-items: center;114    justify-content: center;115    color: #757575;116    font-size: 40px;117  }118 119  /* Tabs */120  .tabs {121    display: flex;122    align-items: center;123    padding: 22px 24px;124    border-bottom: 1px solid #e6e6e6;125    gap: 36px;126    font-size: 38px;127  }128  .tab {129    display: flex; align-items: center;130    gap: 14px; color: #222; position: relative;131  }132  .tab.active { font-weight: 700; }133  .tab.active::after {134    content: "";135    position: absolute; left: 0; bottom: -16px;136    width: 100%; height: 6px; background: #111;137  }138  .tab svg { width: 46px; height: 46px; }139 140  /* Product grid */141  .grid {142    display: flex;143    flex-wrap: wrap;144    gap: 24px;145    padding: 24px;146    padding-bottom: 140px;147  }148  .card {149    width: calc(50% - 12px);150    border: 1px solid #e0e0e0;151    border-radius: 6px;152    background: #fafafa;153    overflow: hidden;154  }155  .card-img {156    height: 420px;157    background: #E0E0E0;158    border-bottom: 1px solid #BDBDBD;159    display: flex; align-items: center; justify-content: center;160    color: #757575; font-size: 34px;161    margin: 24px;162  }163  .card-body {164    padding: 0 24px 24px;165    background: #fff;166  }167  .title {168    font-size: 34px;169    color: #333;170    line-height: 1.25;171    margin-bottom: 12px;172  }173  .author {174    font-size: 28px;175    color: #888;176    margin-bottom: 16px;177  }178  .price-row {179    font-size: 30px;180    display: flex; gap: 14px; align-items: baseline;181  }182  .strike { color: #666; text-decoration: line-through; }183  .free { color: #2e7d32; font-weight: 700; }184 185  /* Bottom nav */186  .bottom-nav {187    position: absolute;188    left: 0; right: 0; bottom: 40px;189    height: 170px;190    background: #fff;191    border-top: 1px solid #e0e0e0;192    display: flex; justify-content: space-around; align-items: center;193  }194  .bn-item { text-align: center; color: #666; font-size: 28px; }195  .bn-item.active { color: #1E4FB7; }196  .bn-icon { width: 60px; height: 60px; margin: 0 auto 8px; display: block; }197  .safe-area {198    position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: #000;199  }200</style>201</head>202<body>203<div id="render-target">204 205  <!-- Header with status bar -->206  <div class="header">207    <div class="status">208      <div>7:13</div>209      <div class="status-icons">210        <!-- search dot icon -->211        <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><circle cx="10" cy="10" r="7" stroke="#fff" stroke-width="2" fill="none"/><line x1="15" y1="15" x2="21" y2="21" stroke="#fff" stroke-width="2"/></svg>212        <!-- small circle icon -->213        <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="8" fill="#fff"/></svg>214        <!-- currency-like icon -->215        <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><text x="5" y="17" font-size="16" fill="#fff">$</text></svg>216        <!-- minimize icon -->217        <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><rect x="6" y="11" width="12" height="2" fill="#fff"/></svg>218        <!-- wifi -->219        <svg width="40" height="40" viewBox="0 0 24 24" fill="none"><path d="M3 9c4-3 14-3 18 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/><path d="M6 12c3-2 9-2 12 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/><path d="M9 15c2-1 4-1 6 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="18" r="1.5" fill="#fff"/></svg>220        <!-- battery -->221        <svg width="44" height="40" viewBox="0 0 28 16" fill="none"><rect x="1" y="3" width="22" height="10" rx="2" stroke="#fff" stroke-width="2"/><rect x="3" y="5" width="14" height="6" fill="#fff"/><rect x="23" y="6" width="4" height="4" rx="1" fill="#fff"/></svg>222      </div>223    </div>224 225    <div class="brand-row">226      <div class="burger">227        <svg width="60" height="60" viewBox="0 0 24 24" fill="none">228          <rect x="3" y="5" width="18" height="2" fill="#fff"/>229          <rect x="3" y="11" width="18" height="2" fill="#fff"/>230          <rect x="3" y="17" width="18" height="2" fill="#fff"/>231        </svg>232      </div>233      <div class="logo-pill">myPustak.com</div>234      <div class="cart">235        <svg width="60" height="60" viewBox="0 0 24 24" fill="none">236          <path d="M3 6h2l2 10h10l2-8H6" stroke="#fff" stroke-width="2" fill="none" stroke-linejoin="round"/>237          <circle cx="9" cy="20" r="2" fill="#fff"/>238          <circle cx="17" cy="20" r="2" fill="#fff"/>239        </svg>240      </div>241    </div>242 243    <div class="search-wrap">244      <div class="search-bar">245        <div class="search-input">Search by Title, Author, Publication, ISBN</div>246        <div class="search-icon">247          <svg viewBox="0 0 24 24" fill="none">248            <circle cx="10" cy="10" r="7" stroke="#555" stroke-width="2" fill="none"/>249            <line x1="15" y1="15" x2="21" y2="21" stroke="#555" stroke-width="2"/>250          </svg>251        </div>252      </div>253    </div>254  </div>255 256  <!-- Quick actions -->257  <div class="quick-actions">258    <div class="qa-item">259      <div class="qa-icon">260        <svg width="60" height="60" viewBox="0 0 24 24" fill="none">261          <path d="M6 12l6-3 6 3v6H6v-6z" stroke="#1E4FB7" stroke-width="2" fill="none"/>262          <path d="M8 18v-4l4-2 4 2v4" stroke="#1E4FB7" stroke-width="2" fill="none"/>263        </svg>264      </div>265      Donate Books266    </div>267    <div class="qa-item">268      <div class="qa-icon">269        <svg width="60" height="60" viewBox="0 0 24 24" fill="none">270          <rect x="4" y="5" width="16" height="12" stroke="#1E4FB7" stroke-width="2" fill="none"/>271          <line x1="8" y1="9" x2="16" y2="9" stroke="#1E4FB7" stroke-width="2"/>272          <line x1="8" y1="13" x2="16" y2="13" stroke="#1E4FB7" stroke-width="2"/>273        </svg>274      </div>275      MyPustak Notebooks276    </div>277    <div class="qa-item">278      <div class="qa-icon">279        <svg width="60" height="60" viewBox="0 0 24 24" fill="none">280          <path d="M3 5h14v12H3z" stroke="#1E4FB7" stroke-width="2" fill="none"/>281          <path d="M17 7h4v10h-4" stroke="#1E4FB7" stroke-width="2" fill="none"/>282        </svg>283      </div>284      Free Books285    </div>286    <div class="qa-item">287      <div class="qa-icon">288        <svg width="60" height="60" viewBox="0 0 24 24" fill="none">289          <path d="M6 5h12v14H6z" stroke="#1E4FB7" stroke-width="2" fill="none"/>290          <circle cx="12" cy="12" r="3" stroke="#1E4FB7" stroke-width="2"/>291        </svg>292      </div>293      New Books294    </div>295  </div>296 297  <!-- Banners -->298  <div class="banner">[IMG: Banner - "PRANAB" My Father - Best Seller]</div>299  <div class="banner">[IMG: Medical Health & Science Book Promo]</div>300 301  <!-- Tabs -->302  <div class="tabs">303    <div class="tab active">304      <svg viewBox="0 0 24 24" fill="none">305        <path d="M3 6h18v12H3z" stroke="#222" stroke-width="2"/>306        <path d="M8 10h8" stroke="#222" stroke-width="2"/>307      </svg>308      Competitive exam309    </div>310    <div class="tab">311      <svg viewBox="0 0 24 24" fill="none">312        <circle cx="12" cy="12" r="9" stroke="#222" stroke-width="2"/>313        <path d="M3 12h18M12 3v18" stroke="#222" stroke-width="2"/>314      </svg>315      Fiction & Non Fiction316    </div>317    <div class="tab">318      <svg viewBox="0 0 24 24" fill="none">319        <path d="M4 16l8-5 8 5v2H4v-2z" stroke="#222" stroke-width="2"/>320        <path d="M12 6v5" stroke="#222" stroke-width="2"/>321      </svg>322      School323    </div>324  </div>325 326  <!-- Product grid -->327  <div class="grid">328    <div class="card">329      <div class="card-img">[IMG: Book - Organic Chemistry]</div>330      <div class="card-body">331        <div class="title">Advanced Problems In Organic Chemistry F...</div>332        <div class="author">By  M.S. Chouhan</div>333        <div class="price-row">334          <span class="strike">₹300</span>335          <span class="free">Free</span>336        </div>337      </div>338    </div>339    <div class="card">340      <div class="card-img">[IMG: Book - JEE Main Solved Papers Chemistry]</div>341      <div class="card-body">342        <div class="title">Chemistry 20 Years Chapterwise Topicwise...</div>343        <div class="author">By  Others</div>344        <div class="price-row">345          <span class="strike">₹325</span>346          <span class="free">Free</span>347        </div>348      </div>349    </div>350  </div>351 352  <!-- Bottom navigation -->353  <div class="bottom-nav">354    <div class="bn-item active">355      <svg class="bn-icon" viewBox="0 0 24 24" fill="none">356        <path d="M3 11l9-7 9 7v9H3v-9z" stroke="#1E4FB7" stroke-width="2"/>357      </svg>358      Home359    </div>360    <div class="bn-item">361      <svg class="bn-icon" viewBox="0 0 24 24" fill="none">362        <path d="M4 5h16v10H13l-3 3v-3H4z" stroke="#666" stroke-width="2"/>363      </svg>364      Chat Support365    </div>366    <div class="bn-item">367      <svg class="bn-icon" viewBox="0 0 24 24" fill="none">368        <path d="M12 21s6-6 6-10a6 6 0 10-12 0c0 4 6 10 6 10z" stroke="#666" stroke-width="2"/>369        <circle cx="12" cy="11" r="2.5" stroke="#666" stroke-width="2"/>370      </svg>371      Track Order372    </div>373    <div class="bn-item">374      <svg class="bn-icon" viewBox="0 0 24 24" fill="none">375        <circle cx="12" cy="8" r="4" stroke="#666" stroke-width="2"/>376        <path d="M4 20c2-4 14-4 16 0" stroke="#666" stroke-width="2"/>377      </svg>378      Login379    </div>380  </div>381  <div class="safe-area"></div>382 383</div>384</body>385</html>