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>Instagram Ad Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Helvetica Neue", Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: linear-gradient(180deg, #7c3aed 0%, #c13584 40%, #f56040 70%, #feda75 100%);20  }21  /* Top status bar */22  .top-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 150px;28    background: #000;29    opacity: 1;30  }31 32  /* Overlay badges */33  .badge {34    position: absolute;35    width: 88px;36    height: 88px;37    border-radius: 50%;38    background: rgba(255,255,255,0.25);39    border: 2px solid rgba(255,255,255,0.35);40    display: flex;41    align-items: center;42    justify-content: center;43    color: #ffffff;44    font-weight: 700;45    letter-spacing: 0.5px;46    backdrop-filter: blur(2px);47  }48  .badge-left {49    top: 175px;50    left: 50px;51    font-size: 34px;52  }53  .badge-close {54    top: 165px;55    right: 50px;56    background: rgba(255,255,255,0.3);57    font-size: 46px;58    line-height: 1;59  }60 61  /* Main image card */62  .image-card {63    position: absolute;64    top: 260px;65    left: 120px;66    width: 840px;67    height: 1040px;68    border: 6px solid #d08d5a;69    box-shadow: 0 12px 28px rgba(0,0,0,0.35);70    border-radius: 4px;71    overflow: hidden;72  }73  .image-placeholder {74    width: 100%;75    height: 100%;76    background: #E0E0E0;77    border-top: 1px solid #BDBDBD;78    border-bottom: 1px solid #BDBDBD;79    display: flex;80    align-items: center;81    justify-content: center;82    color: #757575;83    font-size: 36px;84    text-align: center;85    padding: 24px;86  }87 88  /* Side arrows */89  .nav-arrow {90    position: absolute;91    width: 110px;92    height: 110px;93    display: flex;94    align-items: center;95    justify-content: center;96    opacity: 0.7;97  }98  .nav-arrow svg {99    width: 70px;100    height: 70px;101    stroke: rgba(255,255,255,0.7);102    stroke-width: 12;103    fill: none;104    stroke-linecap: round;105    stroke-linejoin: round;106  }107  .arrow-left {108    top: 780px; /* centered relative to image-card */109    left: 30px;110  }111  .arrow-right {112    top: 780px;113    right: 30px;114    transform: scaleX(-1);115  }116 117  /* Instagram logo row */118  .brand-row {119    position: absolute;120    top: 1420px;121    left: 100px;122    display: flex;123    align-items: center;124    gap: 24px;125    color: #ffffff;126  }127  .brand-row .brand-text {128    font-size: 64px;129    font-weight: 600;130  }131  .brand-icon {132    width: 70px;133    height: 70px;134  }135  .brand-icon svg {136    width: 100%;137    height: 100%;138  }139 140  /* Headline */141  .headline {142    position: absolute;143    top: 1530px;144    left: 100px;145    width: 880px;146    color: #ffffff;147    font-size: 112px;148    font-weight: 700;149    letter-spacing: 3px;150    line-height: 1.05;151    text-transform: uppercase;152  }153 154  /* CTA button */155  .cta {156    position: absolute;157    top: 2130px;158    left: 140px;159    width: 800px;160    height: 150px;161    background: #ffffff;162    border-radius: 28px;163    box-shadow: 0 10px 24px rgba(0,0,0,0.25);164    display: flex;165    align-items: center;166    justify-content: center;167  }168  .cta .cta-text {169    font-size: 64px;170    font-weight: 800;171    color: #f3a29a;172    letter-spacing: 1px;173  }174</style>175</head>176<body>177<div id="render-target">178  <div class="top-bar"></div>179 180  <!-- Left small badge -->181  <div class="badge badge-left">is</div>182 183  <!-- Close badge -->184  <div class="badge badge-close">×</div>185 186  <!-- Main image card -->187  <div class="image-card">188    <div class="image-placeholder">[IMG: Person wearing headphones with donuts in foreground]</div>189  </div>190 191  <!-- Navigation arrows -->192  <div class="nav-arrow arrow-left">193    <svg viewBox="0 0 100 120">194      <path d="M70 20 L30 60 L70 100"></path>195    </svg>196  </div>197  <div class="nav-arrow arrow-right">198    <svg viewBox="0 0 100 120">199      <path d="M70 20 L30 60 L70 100"></path>200    </svg>201  </div>202 203  <!-- Instagram brand row -->204  <div class="brand-row">205    <div class="brand-icon">206      <svg viewBox="0 0 100 100">207        <rect x="15" y="15" width="70" height="70" rx="18" ry="18" stroke="#ffffff" stroke-width="8" fill="none"/>208        <circle cx="50" cy="50" r="18" stroke="#ffffff" stroke-width="8" fill="none"/>209        <circle cx="72" cy="28" r="5" fill="#ffffff"/>210      </svg>211    </div>212    <div class="brand-text">Instagram</div>213  </div>214 215  <!-- Headline -->216  <div class="headline">217    TURN AN<br/>218    ORDINARY SELFIE<br/>219    INTO SOMETHING<br/>220    FUN221  </div>222 223  <!-- CTA Button -->224  <div class="cta">225    <div class="cta-text">Install Now</div>226  </div>227</div>228</body>229</html>