GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Oxford Dictionary Ad UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #f6f7f9;14    border-radius: 0;15    box-shadow: none;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    background: #000;26    color: #fff;27    display: flex;28    align-items: center;29    padding: 0 30px;30    box-sizing: border-box;31    font-weight: 600;32    letter-spacing: 0.5px;33  }34  .status-left { flex: 1; font-size: 40px; }35  .status-right { display: flex; align-items: center; gap: 24px; }36  .status-icon svg { display: block; }37 38  /* App bar */39  .app-bar {40    position: absolute;41    top: 120px;42    left: 0;43    width: 1080px;44    height: 160px;45    background: #303236;46    color: #fff;47    display: flex;48    align-items: center;49    padding: 0 30px;50    box-sizing: border-box;51  }52  .back-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 16px; }53  .app-title { font-size: 56px; font-weight: 800; flex: 1; }54  .app-actions { display: flex; align-items: center; gap: 26px; }55  .circle-icon {56    width: 64px;57    height: 64px;58    border-radius: 50%;59    background: rgba(255,255,255,0.15);60    display: flex;61    align-items: center;62    justify-content: center;63  }64 65  /* Banner */66  .banner {67    position: absolute;68    top: 300px;69    left: 60px;70    width: 960px;71    height: 180px;72    background: #fff;73    border-radius: 24px;74    box-shadow: 0 8px 24px rgba(0,0,0,0.12);75    display: flex;76    align-items: center;77    padding: 0 24px;78    box-sizing: border-box;79    gap: 24px;80  }81  .banner .logo {82    width: 132px;83    height: 132px;84    background: #E0E0E0;85    border: 1px solid #BDBDBD;86    border-radius: 20px;87    display: flex; align-items: center; justify-content: center;88    color: #757575; font-weight: 700;89  }90  .banner .text {91    flex: 1;92  }93  .banner .text .small { font-size: 36px; color: #6d6d6d; margin-bottom: 6px; }94  .banner .text .big { font-size: 48px; font-weight: 800; color: #222; }95  .banner .chev {96    width: 60px; height: 60px; border-radius: 30px;97    background: #e9f1ff; display: flex; align-items: center; justify-content: center;98  }99 100  /* Search */101  .search-wrap {102    position: absolute;103    top: 500px;104    left: 60px;105    width: 960px;106    height: 92px;107    background: #2f3236;108    border-radius: 46px;109    display: flex;110    align-items: center;111    padding: 0 30px;112    box-sizing: border-box;113    color: #bfc6d0;114    gap: 18px;115  }116  .search-text { font-size: 40px; color: #bfc6d0; }117 118  /* Advertisement card with grid */119  .ad-card {120    position: absolute;121    top: 630px;122    left: 30px;123    width: 1020px;124    height: 1500px;125    background: #fff;126    border-radius: 28px;127    box-shadow: 0 6px 18px rgba(0,0,0,0.08);128    overflow: hidden;129    border: 1px solid #e6e8ea;130  }131  .ad-header {132    height: 100px;133    display: flex;134    align-items: center;135    justify-content: center;136    font-size: 40px;137    color: #4a4a4a;138    position: relative;139  }140  .info-dot {141    position: absolute;142    right: 26px;143    top: 26px;144    width: 36px; height: 36px;145    border-radius: 18px;146    border: 2px solid #9bbbd8;147    color: #4a7db5;148    font-size: 26px;149    display: flex; align-items: center; justify-content: center;150  }151 152  .grid {153    display: grid;154    grid-template-columns: 1fr 1fr;155    grid-auto-rows: 430px;156    gap: 0;157    border-top: 1px solid #e6e8ea;158  }159  .cell {160    position: relative;161    border-right: 1px solid #e6e8ea;162    border-bottom: 1px solid #e6e8ea;163    display: flex;164    align-items: center;165    justify-content: center;166    padding: 16px;167    box-sizing: border-box;168  }169  .cell:nth-child(2n) { border-right: none; }170  .img-placeholder {171    width: 90%;172    height: 90%;173    background: #E0E0E0;174    border: 1px solid #BDBDBD;175    display: flex;176    align-items: center;177    justify-content: center;178    color: #757575;179    font-weight: 700;180    text-align: center;181    padding: 10px;182    box-sizing: border-box;183  }184  .badge {185    position: absolute;186    top: 16px; left: 16px;187    padding: 10px 16px;188    border: 2px solid #9bbbd8;189    border-radius: 14px;190    color: #2d5f8c;191    background: #fff;192    font-weight: 800;193    font-size: 32px;194  }195 196  /* Bottom brand line */197  .brand-line {198    position: absolute;199    bottom: 20px;200    left: 30px;201    width: 960px;202    height: 120px;203    display: flex;204    align-items: center;205    gap: 24px;206    color: #222;207  }208  .brand-logo {209    width: 180px; height: 90px;210    background: #E0E0E0; border: 1px solid #BDBDBD;211    display: flex; align-items: center; justify-content: center;212    color: #757575; font-weight: 800;213  }214  .brand-text { font-size: 40px; font-weight: 700; }215  .brand-sub { font-size: 34px; color: #666; }216 217  /* Home indicator */218  .home-indicator {219    position: absolute;220    bottom: 22px;221    left: 50%;222    transform: translateX(-50%);223    width: 360px;224    height: 18px;225    background: #000;226    opacity: 0.12;227    border-radius: 9px;228  }229</style>230</head>231<body>232<div id="render-target">233 234  <!-- Status Bar -->235  <div class="status-bar">236    <div class="status-left">3:49</div>237    <div class="status-right">238      <div class="status-icon">239        <svg width="38" height="38" viewBox="0 0 38 38" fill="none">240          <path d="M7 25 L19 13 L31 25" stroke="#fff" stroke-width="3" fill="none"/>241          <circle cx="19" cy="29" r="2" fill="#fff"/>242        </svg>243      </div>244      <div class="status-icon">245        <svg width="38" height="38" viewBox="0 0 38 38" fill="none">246          <rect x="6" y="10" width="24" height="16" rx="3" stroke="#fff" stroke-width="3" fill="none"/>247          <rect x="9" y="13" width="18" height="10" fill="#fff"/>248          <rect x="31" y="14" width="3" height="8" rx="1" fill="#fff"/>249        </svg>250      </div>251    </div>252  </div>253 254  <!-- App Bar -->255  <div class="app-bar">256    <div class="back-btn">257      <svg width="48" height="48" viewBox="0 0 48 48">258        <path d="M30 10 L16 24 L30 38" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>259      </svg>260    </div>261    <div class="app-title">Oxford Dictionary</div>262    <div class="app-actions">263      <div class="circle-icon">264        <svg width="32" height="32" viewBox="0 0 32 32">265          <path d="M4 22 L10 10 L16 22 Z" fill="#fff" opacity="0.8"/>266        </svg>267      </div>268      <div class="circle-icon">269        <svg width="32" height="32" viewBox="0 0 32 32">270          <circle cx="16" cy="16" r="10" stroke="#fff" stroke-width="3" fill="none"/>271          <rect x="14.5" y="9" width="3" height="14" fill="#fff"/>272        </svg>273      </div>274    </div>275  </div>276 277  <!-- Banner promoting Oxford Dictionary app -->278  <div class="banner">279    <div class="logo">[IMG: Oxford Dictionary logo]</div>280    <div class="text">281      <div class="small">Continue to app</div>282      <div class="big">Oxford Dictionary</div>283    </div>284    <div class="chev">285      <svg width="28" height="28" viewBox="0 0 28 28">286        <path d="M10 6 L18 14 L10 22" stroke="#2d5f8c" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>287      </svg>288    </div>289  </div>290 291  <!-- Search bar -->292  <div class="search-wrap">293    <svg width="54" height="54" viewBox="0 0 54 54">294      <circle cx="22" cy="22" r="16" stroke="#bfc6d0" stroke-width="4" fill="none"/>295      <line x1="34" y1="34" x2="50" y2="50" stroke="#bfc6d0" stroke-width="4" stroke-linecap="round"/>296    </svg>297    <div class="search-text">Search</div>298  </div>299 300  <!-- Advertisement Card with products -->301  <div class="ad-card">302    <div class="ad-header">Advertisement303      <div class="info-dot">i</div>304    </div>305    <div class="grid">306      <!-- Row 1 -->307      <div class="cell">308        <div class="badge">-28%</div>309        <div class="img-placeholder">[IMG: Hair Building Fiber Refill Pack]</div>310      </div>311      <div class="cell">312        <div class="badge">-10%</div>313        <div class="img-placeholder">[IMG: Raaga Professional Cream Developer Bottle]</div>314      </div>315      <!-- Row 2 -->316      <div class="cell">317        <div class="badge">-7%</div>318        <div class="img-placeholder">[IMG: Pink Argan Secrets Developer Bottle]</div>319      </div>320      <div class="cell">321        <div class="badge">-12%</div>322        <div class="img-placeholder">[IMG: Khadi Natural Herbal Hair Colour Jar]</div>323      </div>324      <!-- Row 3 -->325      <div class="cell">326        <div class="img-placeholder">[IMG: Aveda Men Pure-formance Pomade Jar]</div>327      </div>328      <div class="cell">329        <div class="badge">-22%</div>330        <div class="img-placeholder">[IMG: The Man Company Sportivo Pomade Set]</div>331      </div>332    </div>333 334    <!-- Brand line at the bottom of card -->335    <div class="brand-line">336      <div class="brand-logo">[IMG: NYKAA MAN logo]</div>337      <div>338        <div class="brand-text">Best Hair Care Products</div>339        <div class="brand-sub">Nykaaman.com</div>340      </div>341    </div>342  </div>343 344  <!-- Home indicator -->345  <div class="home-indicator"></div>346 347</div>348</body>349</html>