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>Tata AIG Ad Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #1A2E6C;17  }18 19  /* Status bar */20  .status-bar {21    height: 140px;22    background: #000;23    color: #fff;24    padding: 0 36px;25    display: flex;26    align-items: center;27    box-sizing: border-box;28    font-weight: 600;29  }30  .status-left {31    display: flex;32    align-items: center;33    gap: 24px;34    font-size: 46px;35  }36  .chip {37    font-size: 34px;38    background: #ffffff;39    color: #111;40    padding: 8px 14px;41    border-radius: 6px;42    line-height: 1;43    border: 1px solid rgba(0,0,0,0.2);44  }45  .status-right {46    margin-left: auto;47    display: flex;48    align-items: center;49    gap: 24px;50  }51  .status-dot {52    width: 14px;53    height: 14px;54    background: #fff;55    border-radius: 50%;56    opacity: 0.8;57    margin-left: 10px;58  }59  .icon {60    width: 50px;61    height: 50px;62    fill: none;63    stroke: #fff;64    stroke-width: 4;65  }66 67  /* Ad panel */68  .ad-card {69    position: relative;70    width: 980px;71    height: 2050px;72    margin: 30px auto 0;73    background: #ffffff;74    border-radius: 10px;75    box-shadow: 0 10px 30px rgba(0,0,0,0.15);76    overflow: hidden;77  }78  .close-btn {79    position: absolute;80    right: -28px;81    top: 26px;82    width: 96px;83    height: 96px;84    background: #ffffff;85    border-radius: 50%;86    box-shadow: 0 6px 18px rgba(0,0,0,0.2);87    display: grid;88    place-items: center;89    z-index: 5;90  }91  .close-btn svg {92    width: 48px; height: 48px;93    stroke: #000; stroke-width: 10; fill: none; stroke-linecap: round;94  }95 96  .content {97    padding: 70px 70px 0;98    box-sizing: border-box;99  }100 101  /* Logo area */102  .logo-wrap {103    text-align: center;104    margin-top: 30px;105  }106  .tata-logo {107    margin: 0 auto 22px;108    width: 260px;109    height: 260px;110    border: 8px solid #1A2E6C;111    display: flex;112    align-items: center;113    justify-content: center;114    color: #ffffff;115    background: #2C57B5;116    font-weight: 800;117    line-height: 1.1;118    text-align: center;119    border-radius: 4px;120    box-shadow: inset 0 0 0 8px #ffffff, 0 8px 16px rgba(0,0,0,0.05);121  }122  .tata-logo span {123    display: block;124    font-size: 44px;125    letter-spacing: 2px;126  }127  .tata-logo .small {128    font-size: 34px;129    font-weight: 700;130    opacity: 0.95;131  }132  .tagline {133    color: #2C57B5;134    font-weight: 800;135    letter-spacing: 6px;136    font-size: 42px;137  }138 139  /* Hero with person + numbers */140  .hero {141    position: relative;142    margin-top: 80px;143    height: 900px;144  }145  .person-img {146    position: absolute;147    left: 0;148    bottom: 24px;149    width: 520px;150    height: 600px;151    background: #E0E0E0;152    border: 1px solid #BDBDBD;153    display: flex;154    align-items: center;155    justify-content: center;156    color: #757575;157    font-size: 34px;158    text-align: center;159    border-radius: 6px;160  }161  .upto {162    position: absolute;163    right: 70px;164    top: 0;165    color: #2C57B5;166    font-size: 96px;167    font-weight: 800;168    letter-spacing: 1px;169  }170  .upto sup {171    font-size: 0.5em;172    top: -0.7em;173    position: relative;174  }175  .big-75 {176    position: absolute;177    right: 30px;178    top: 120px;179    display: flex;180    align-items: baseline;181    gap: 16px;182  }183  .num {184    font-size: 420px;185    font-weight: 900;186    line-height: 0.9;187    letter-spacing: -8px;188    background: linear-gradient(180deg, #7ED3EB 0%, #2E56B2 100%);189    -webkit-background-clip: text;190    background-clip: text;191    color: transparent;192    text-shadow: 0 10px 18px rgba(0,0,0,0.1);193  }194  .percent {195    font-size: 160px;196    font-weight: 800;197    color: #2C57B5;198    margin-left: 6px;199  }200 201  .off-line {202    position: absolute;203    right: 40px;204    top: 620px;205    width: 780px;206    display: flex;207    align-items: center;208    gap: 30px;209  }210  .line {211    height: 2px;212    background: #C9D8F2;213    flex: 1;214  }215  .off-text {216    color: #2C57B5;217    font-weight: 800;218    font-size: 84px;219  }220 221  .headline {222    margin-top: 720px; /* pushes below hero elements */223    text-align: center;224    color: #2C57B5;225    font-size: 96px;226    font-weight: 800;227    line-height: 1.25;228    letter-spacing: 1px;229  }230 231  /* CTA */232  .cta-wrap {233    margin-top: 120px;234    display: flex;235    justify-content: center;236  }237  .cta-btn {238    width: 560px;239    height: 140px;240    border-radius: 70px;241    background: linear-gradient(90deg, #7ED3EB 0%, #2E56B2 100%);242    color: #ffffff;243    font-size: 56px;244    font-weight: 800;245    display: flex;246    align-items: center;247    justify-content: center;248    box-shadow: 0 16px 24px rgba(46, 86, 178, 0.35);249  }250 251  /* Legal bar */252  .legal {253    position: absolute;254    left: 0;255    right: 0;256    bottom: 0;257    background: #2E56B2;258    color: #ffffff;259    padding: 22px 36px 28px;260    font-size: 30px;261    line-height: 1.6;262    text-align: center;263    letter-spacing: 0.5px;264  }265 266  /* Home indicator (outside the card) */267  .home-indicator {268    position: absolute;269    bottom: 24px;270    left: 50%;271    transform: translateX(-50%);272    width: 360px;273    height: 12px;274    background: #ffffff;275    border-radius: 8px;276    opacity: 0.85;277  }278</style>279</head>280<body>281<div id="render-target">282  <!-- Status Bar -->283  <div class="status-bar">284    <div class="status-left">285      <div>12:26</div>286      <div class="chip">TH</div>287      <div class="chip">TOI</div>288      <div class="chip">TOI</div>289      <div class="status-dot"></div>290    </div>291    <div class="status-right">292      <!-- Location pin -->293      <svg class="icon" viewBox="0 0 24 24">294        <path d="M12 22s7-8 7-12a7 7 0 1 0-14 0c0 4 7 12 7 12z"/>295        <circle cx="12" cy="10" r="3" fill="#fff" stroke="none"/>296      </svg>297      <!-- WiFi -->298      <svg class="icon" viewBox="0 0 24 24">299        <path d="M2 8c5.5-5 14.5-5 20 0M5 11c3.9-3.5 10.1-3.5 14 0M8 14c2.2-2 5.8-2 8 0M12 18l0 0"/>300        <circle cx="12" cy="18" r="1.2" fill="#fff" stroke="none"/>301      </svg>302      <!-- Battery -->303      <svg class="icon" viewBox="0 0 30 24">304        <rect x="1" y="5" width="24" height="14" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="3"/>305        <rect x="26" y="9" width="3" height="6" fill="#fff"/>306        <rect x="4" y="8" width="18" height="8" fill="#fff" stroke="none"/>307      </svg>308    </div>309  </div>310 311  <!-- White Ad Card -->312  <div class="ad-card">313    <div class="close-btn">314      <svg viewBox="0 0 24 24">315        <path d="M5 5L19 19M19 5L5 19"></path>316      </svg>317    </div>318 319    <div class="content">320      <!-- Logo -->321      <div class="logo-wrap">322        <div class="tata-logo">323          <div>324            <span>TATA</span>325            <span class="small">AIG</span>326            <span class="small">INSURANCE</span>327          </div>328        </div>329        <div class="tagline">WITH YOU ALWAYS</div>330      </div>331 332      <!-- Hero -->333      <div class="hero">334        <div class="person-img">[IMG: Person pointing in denim jacket]</div>335 336        <div class="upto">Upto<sup>*</sup></div>337 338        <div class="big-75">339          <div class="num">75</div>340          <div class="percent">%</div>341        </div>342 343        <div class="off-line">344          <div class="line"></div>345          <div class="off-text">off</div>346          <div class="line"></div>347        </div>348 349        <div class="headline">350          Tata AIG<br>Car Insurance351        </div>352      </div>353 354      <!-- CTA -->355      <div class="cta-wrap">356        <div class="cta-btn">Get Price</div>357      </div>358    </div>359 360    <!-- Legal -->361    <div class="legal">362      Auto Secure - Private Car Package Policy - UIN - IRDAN108RP0002V01200001 • IRDAI REGN. NO.108 • UID NO. F1120022 • *T&C Apply.363    </div>364  </div>365 366  <!-- Home indicator -->367  <div class="home-indicator"></div>368</div>369</body>370</html>