GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="hi">3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=1080, initial-scale=1.0" />6<title>Facebook Gaming Promo</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Noto Sans Devanagari", sans-serif;13    box-sizing: border-box;14  }15  #render-target {16    position: relative;17    overflow: hidden;18    width: 1080px;19    height: 2400px;20    background: #e6e8ec;21    border-radius: 24px;22    box-shadow: 0 20px 60px rgba(0,0,0,0.25);23  }24 25  /* Status bar */26  .status-bar {27    position: absolute;28    top: 0;29    left: 0;30    width: 1080px;31    height: 120px;32    background: #000;33    color: #fff;34    display: flex;35    align-items: center;36    padding: 0 40px;37    font-weight: 600;38    font-size: 40px;39    letter-spacing: 0.5px;40  }41  .sb-left { flex: 0 0 auto; }42  .sb-right {43    margin-left: auto;44    display: flex;45    align-items: center;46    gap: 28px;47    font-size: 36px;48    opacity: 0.9;49  }50  .sb-icon { display: inline-flex; align-items: center; justify-content: center; }51 52  /* Main card */53  .ad-card {54    position: absolute;55    top: 140px;56    left: 24px;57    width: 1032px;58    height: 2140px;59    background: #fff;60    border-radius: 32px;61    box-shadow: 0 8px 24px rgba(0,0,0,0.25);62    overflow: hidden;63  }64 65  /* Top collage / graphics area */66  .top-graphics {67    position: relative;68    height: 780px;69    background: #fff;70  }71  .icon-circle {72    position: absolute;73    top: 24px;74    width: 72px;75    height: 72px;76    border-radius: 50%;77    background: #fff;78    box-shadow: 0 4px 12px rgba(0,0,0,0.15);79    display: flex;80    align-items: center;81    justify-content: center;82  }83  .icon-circle.left { left: 24px; }84  .icon-circle.right { right: 24px; }85 86  .headline {87    position: absolute;88    left: 80px;89    top: 260px;90    width: 860px;91    color: #2565ea;92    line-height: 1.08;93  }94  .headline .line-1 {95    font-size: 140px;96    font-weight: 700;97    letter-spacing: -1px;98  }99  .headline .line-2 {100    font-size: 112px;101    font-weight: 600;102    margin-top: 20px;103  }104  .headline .line-3 {105    font-size: 128px;106    font-weight: 700;107    margin-top: 16px;108  }109 110  .meta-row {111    position: absolute;112    left: 80px;113    bottom: 24px;114    display: flex;115    align-items: center;116    gap: 18px;117    color: #6b7280;118    font-size: 52px;119  }120  .meta-logo {121    width: 120px;122    height: 52px;123    display: inline-flex;124    align-items: center;125  }126 127  /* Image placeholders */128  .img-ph {129    position: absolute;130    background: #E0E0E0;131    border: 1px solid #BDBDBD;132    display: flex;133    align-items: center;134    justify-content: center;135    color: #757575;136    font-size: 36px;137    text-align: center;138    border-radius: 8px;139  }140  .img-cooking { left: 84px; top: 76px; width: 540px; height: 320px; }141  .img-ship    { right: 80px; top: 140px; width: 380px; height: 220px; }142  .img-cards   { left: 84px; top: 470px; width: 240px; height: 140px; }143  .img-person  { left: 400px; top: 494px; width: 320px; height: 180px; }144  .img-levels  { right: 40px; top: 490px; width: 230px; height: 260px; }145 146  /* Divider into second section (visual spacing is implicit) */147  .mid-section {148    padding-top: 40px;149  }150 151  /* Facebook emblem */152  .fb-logo {153    width: 180px;154    height: 180px;155    margin: 40px auto 24px;156    background: #1877f2;157    border-radius: 50%;158    display: flex;159    align-items: center;160    justify-content: center;161  }162  .fb-logo .f {163    font-weight: 800;164    font-size: 160px;165    color: #fff;166    line-height: 1;167    margin-top: 10px;168  }169 170  .title {171    text-align: center;172    font-size: 96px;173    font-weight: 700;174    color: #111827;175    margin-top: 20px;176    letter-spacing: -0.5px;177  }178  .subtitle {179    text-align: center;180    font-size: 56px;181    color: #6b7280;182    margin-top: 36px;183    line-height: 1.34;184  }185 186  /* Bottom CTA bar */187  .cta-bar {188    position: absolute;189    left: 24px;190    right: 24px;191    bottom: 24px;192    height: 160px;193    background: #656d78;194    border-radius: 24px;195    display: flex;196    align-items: center;197    padding: 0 44px;198    color: #ffffff;199    box-shadow: 0 6px 18px rgba(0,0,0,0.25);200  }201  .cta-text {202    font-size: 52px;203    font-weight: 600;204    letter-spacing: 0.3px;205  }206  .cta-arrow {207    margin-left: auto;208    width: 72px;209    height: 72px;210    display: inline-flex;211    align-items: center;212    justify-content: center;213    background: rgba(255,255,255,0.15);214    border-radius: 50%;215  }216 217  /* Home indicator (visual) */218  .home-indicator {219    position: absolute;220    bottom: 12px;221    left: 50%;222    transform: translateX(-50%);223    width: 240px;224    height: 12px;225    background: #000000;226    opacity: 0.25;227    border-radius: 6px;228  }229</style>230</head>231<body>232<div id="render-target">233 234  <!-- Status Bar -->235  <div class="status-bar">236    <div class="sb-left">5:53</div>237    <div class="sb-right">238      <span class="sb-icon" aria-hidden="true">239        <!-- Signal bars -->240        <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">241          <rect x="2" y="16" width="3" height="6" rx="1"></rect>242          <rect x="7" y="12" width="3" height="10" rx="1"></rect>243          <rect x="12" y="8" width="3" height="14" rx="1"></rect>244          <rect x="17" y="4" width="3" height="18" rx="1"></rect>245        </svg>246      </span>247      <span class="sb-icon" aria-hidden="true">248        <!-- WiFi -->249        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">250          <path d="M2 9c5.5-5 14.5-5 20 0"></path>251          <path d="M5 12c4-3.5 10-3.5 14 0"></path>252          <path d="M8 15c2.5-2 5.5-2 8 0"></path>253          <circle cx="12" cy="18" r="1.8" fill="#fff" stroke="none"></circle>254        </svg>255      </span>256      <span class="sb-icon" aria-hidden="true">257        <!-- Battery -->258        <svg width="60" height="44" viewBox="0 0 30 18" fill="none">259          <rect x="1" y="2" width="24" height="14" rx="3" stroke="#fff" stroke-width="2"></rect>260          <rect x="3" y="4" width="18" height="10" fill="#fff"></rect>261          <rect x="26" y="6" width="3" height="6" rx="1" fill="#fff"></rect>262        </svg>263      </span>264      <span>85%</span>265    </div>266  </div>267 268  <!-- Main Card -->269  <div class="ad-card">270 271    <!-- Top graphics and headline -->272    <div class="top-graphics">273      <div class="icon-circle left" aria-hidden="true">274        <!-- Close (X) -->275        <svg width="36" height="36" viewBox="0 0 24 24" stroke="#111" stroke-width="2" fill="none">276          <path d="M5 5l14 14"></path>277          <path d="M19 5l-14 14"></path>278        </svg>279      </div>280      <div class="icon-circle right" aria-hidden="true">281        <!-- Info (i) -->282        <svg width="36" height="36" viewBox="0 0 24 24" stroke="#111" stroke-width="2" fill="none">283          <circle cx="12" cy="12" r="9"></circle>284          <path d="M12 10v6"></path>285          <circle cx="12" cy="7" r="1.5" fill="#111" stroke="none"></circle>286        </svg>287      </div>288 289      <!-- Image placeholders -->290      <div class="img-ph img-cooking">[IMG: Cooking game screenshot]</div>291      <div class="img-ph img-ship">[IMG: Space shooter aircraft]</div>292      <div class="img-ph img-cards">[IMG: Card game tiles]</div>293      <div class="img-ph img-person">[IMG: Person gaming at home]</div>294      <div class="img-ph img-levels">[IMG: Puzzle levels map]</div>295 296      <!-- Headline text (Hindi) -->297      <div class="headline">298        <div class="line-1">Facebook</div>299        <div class="line-2">पर गेम तुरंत</div>300        <div class="line-3">खेलें।</div>301      </div>302 303      <!-- Meta branding row -->304      <div class="meta-row">305        <span>from</span>306        <span class="meta-logo" aria-hidden="true">307          <!-- Simplified Meta loop mark -->308          <svg width="120" height="52" viewBox="0 0 120 52" fill="none">309            <path d="M20 40c-10-24 16-30 30-6l10 16 10-16c14-24 40-18 30 6" stroke="#2565ea" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>310          </svg>311        </span>312        <span style="color:#2565ea;font-weight:700;">Meta</span>313      </div>314    </div>315 316    <!-- Middle section with logo and description -->317    <div class="mid-section">318      <div class="fb-logo"><div class="f">f</div></div>319      <div class="title">सभी गेमों को ढूंढें</div>320      <div class="subtitle">321        कभी भी, कहीं भी खेलें।<br />322        Facebook Gaming पर जाएं।323      </div>324    </div>325 326    <!-- Bottom CTA bar -->327    <div class="cta-bar">328      <div class="cta-text">साइट पर जाएं</div>329      <div class="cta-arrow" aria-hidden="true">330        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">331          <path d="M8 5l8 7-8 7" stroke-linecap="round" stroke-linejoin="round"></path>332        </svg>333      </div>334    </div>335  </div>336 337  <!-- Home indicator (device visual) -->338  <div class="home-indicator"></div>339</div>340</body>341</html>