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>Ad Screen 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: #ECECEC;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #222;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 36px;30    box-sizing: border-box;31  }32  .status-time {33    font-size: 38px;34    font-weight: 600;35    letter-spacing: 0.5px;36  }37  .status-icons {38    margin-left: auto;39    display: flex;40    align-items: center;41    gap: 26px;42  }43  .status-icons svg { width: 46px; height: 46px; fill: #fff; }44 45  /* Continue to app pill */46  .continue-card {47    position: absolute;48    top: 140px;49    left: 60px;50    width: 960px;51    height: 160px;52    background: #FFFFFF;53    border-radius: 28px;54    box-shadow: 0 8px 18px rgba(0,0,0,0.18);55    display: flex;56    align-items: center;57    padding: 0 32px;58    box-sizing: border-box;59  }60  .continue-icon {61    width: 112px;62    height: 112px;63    border-radius: 24px;64    background: linear-gradient(135deg, #B0C8FF, #BEE6FF);65    display: flex;66    align-items: center;67    justify-content: center;68    color: #fff;69    font-weight: 700;70    font-size: 40px;71  }72  .continue-text {73    margin-left: 28px;74    line-height: 1.1;75  }76  .continue-text .small {77    font-size: 34px;78    color: #6B6B6B;79  }80  .continue-text .app {81    font-size: 48px;82    font-weight: 700;83    margin-top: 10px;84  }85  .continue-arrow {86    margin-left: auto;87  }88  .continue-arrow svg { width: 56px; height: 56px; fill: #7C7C7C; }89 90  /* Main ad card */91  .ad-card {92    position: absolute;93    top: 340px;94    left: 0;95    width: 1080px;96    height: 1800px;97    background: #fff;98    border-top-left-radius: 36px;99    border-top-right-radius: 36px;100    box-shadow: 0 -2px 12px rgba(0,0,0,0.06) inset;101  }102  .ad-header {103    text-align: center;104    padding: 22px 0 16px;105    font-size: 36px;106    color: #7A7A7A;107    letter-spacing: 0.3px;108  }109  .hero-wrap {110    padding: 0 36px;111    box-sizing: border-box;112  }113  .hero-img {114    width: 1008px;115    height: 730px;116    background: #E0E0E0;117    border: 1px solid #BDBDBD;118    border-radius: 12px;119    display: flex;120    align-items: center;121    justify-content: center;122    color: #757575;123    font-size: 40px;124    position: relative;125    overflow: hidden;126  }127  .sound-btn {128    position: absolute;129    top: 24px;130    left: 24px;131    width: 72px;132    height: 72px;133    background: rgba(255,255,255,0.95);134    border-radius: 50%;135    display: flex;136    align-items: center;137    justify-content: center;138    box-shadow: 0 4px 10px rgba(0,0,0,0.15);139  }140  .sound-btn svg { width: 40px; height: 40px; fill: #333; }141 142  .app-float {143    position: absolute;144    top: 1090px;145    left: 50%;146    transform: translateX(-50%);147    width: 140px;148    height: 140px;149    background: #fff;150    border-radius: 28px;151    box-shadow: 0 10px 18px rgba(0,0,0,0.2);152    display: flex;153    align-items: center;154    justify-content: center;155    font-weight: 700;156    font-size: 40px;157    color: #333;158    border: 1px solid #EAEAEA;159  }160  .details {161    margin-top: 120px;162    display: flex;163    flex-direction: column;164    align-items: center;165    padding: 0 64px;166    text-align: center;167  }168  .title {169    font-size: 64px;170    font-weight: 700;171    line-height: 1.15;172    max-width: 860px;173  }174  .installed {175    margin-top: 24px;176    display: flex;177    align-items: center;178    gap: 16px;179    color: #2E7D32;180    font-size: 40px;181    font-weight: 600;182  }183  .installed svg { width: 44px; height: 44px; fill: #2E7D32; }184  .desc {185    margin-top: 26px;186    max-width: 900px;187    color: #9A9A9A;188    font-size: 36px;189    line-height: 1.45;190  }191  .open-btn {192    margin-top: 54px;193    width: 900px;194    height: 132px;195    background: #2E7D32;196    border-radius: 20px;197    color: #fff;198    font-size: 52px;199    font-weight: 700;200    display: flex;201    align-items: center;202    justify-content: center;203    box-shadow: 0 6px 12px rgba(46,125,50,0.35);204  }205 206  .info {207    position: absolute;208    left: 24px;209    bottom: 136px;210    width: 52px;211    height: 52px;212    border-radius: 50%;213    border: 2px solid #9AA8B2;214    color: #9AA8B2;215    font-weight: 700;216    display: flex;217    align-items: center;218    justify-content: center;219    font-size: 34px;220  }221 222  /* Gesture pill */223  .gesture-pill {224    position: absolute;225    bottom: 24px;226    left: 50%;227    transform: translateX(-50%);228    width: 260px;229    height: 12px;230    background: #000;231    opacity: 0.85;232    border-radius: 12px;233  }234</style>235</head>236<body>237<div id="render-target">238 239  <!-- Status Bar -->240  <div class="status-bar">241    <div class="status-time">7:21</div>242    <div class="status-icons">243      <!-- Location dot -->244      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg>245      <!-- Wi‑Fi -->246      <svg viewBox="0 0 24 24">247        <path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zM6 12c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zM10 16l2 2 2-2c-1-1-3-1-4 0z"/>248      </svg>249      <!-- Signal -->250      <svg viewBox="0 0 24 24">251        <path d="M3 21h3V11H3v10zm5 0h3V7H8v14zm5 0h3V4h-3v17zm5 0h3V2h-3v19z"/>252      </svg>253      <!-- Battery -->254      <svg viewBox="0 0 36 24">255        <rect x="2" y="5" width="28" height="14" rx="2" fill="#fff"/>256        <rect x="4" y="7" width="24" height="10" rx="1" fill="#000"/>257        <rect x="30" y="9" width="4" height="6" rx="1" fill="#fff"/>258      </svg>259    </div>260  </div>261 262  <!-- Continue to app Pill -->263  <div class="continue-card">264    <div class="continue-icon">🖼️</div>265    <div class="continue-text">266      <div class="small">Continue to app</div>267      <div class="app">Gallery</div>268    </div>269    <div class="continue-arrow">270      <svg viewBox="0 0 24 24"><path d="M8 5l7 7-7 7" stroke="#7C7C7C" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>271    </div>272  </div>273 274  <!-- Ad Card -->275  <div class="ad-card">276    <div class="ad-header">Advertisement</div>277    <div class="hero-wrap">278      <div class="hero-img">279        [IMG: Lifestyle fashion ad]280        <div class="sound-btn">281          <svg viewBox="0 0 24 24">282            <path d="M4 10v4h4l5 4V6l-5 4H4z"/>283            <path d="M14 9a4 4 0 010 6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round"/>284          </svg>285        </div>286      </div>287    </div>288 289    <div class="app-float">lifestyle</div>290 291    <div class="details">292      <div class="title">Lifestyle - Online Shopping<br>Fo</div>293 294      <div class="installed">295        <svg viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.5-1.5z"/></svg>296        Installed297      </div>298 299      <div class="desc">300        Free Shipping On All Orders<br>301        Products Of Your Choice At Affordable Prices<br>302        Catered Just For You. Delivering Now!303      </div>304 305      <div class="open-btn">Open</div>306    </div>307  </div>308 309  <div class="info">i</div>310  <div class="gesture-pill"></div>311</div>312</body>313</html>