GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile Ad UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #757575;14  }15 16  /* Status Bar */17  .status-bar {18    position: absolute;19    top: 0; left: 0;20    width: 100%;21    height: 120px;22    background: #0A0A0A;23    color: #fff;24  }25  .sb-inner {26    height: 100%;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 36px;31  }32  .sb-time { font-size: 44px; font-weight: 600; letter-spacing: 0.5px; }33  .sb-icons { display: flex; gap: 28px; align-items: center; }34  .sb-icons svg { width: 54px; height: 54px; }35 36  /* Generic card */37  .card {38    background: #FFFFFF;39    border: 1px solid #E0E0E0;40    border-radius: 24px;41    box-shadow: 0 6px 16px rgba(0,0,0,0.15);42  }43 44  /* Top banner */45  .top-banner {46    position: absolute;47    top: 150px; left: 36px;48    width: 1008px;49    height: 150px;50    display: flex;51    align-items: center;52    padding: 20px 28px;53    gap: 28px;54  }55  .img-box {56    width: 110px; height: 110px;57    background: #E0E0E0;58    border: 1px solid #BDBDBD;59    display: flex; align-items: center; justify-content: center;60    color: #757575; font-weight: 600; font-size: 22px; text-align: center;61    border-radius: 20px;62  }63  .banner-text { flex: 1; }64  .banner-text .sub { font-size: 32px; color: #666; margin-bottom: 6px; }65  .banner-text .title { font-size: 44px; color: #222; font-weight: 700; }66  .banner-arrow {67    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;68  }69 70  /* Advertisement block */71  .ad-card {72    position: absolute;73    top: 340px; left: 36px;74    width: 1008px;75    padding-bottom: 24px;76  }77  .ad-header {78    height: 76px;79    display: flex;80    align-items: center;81    justify-content: center;82    font-size: 38px;83    color: #4a4a4a;84    border-bottom-left-radius: 24px;85    border-bottom-right-radius: 24px;86  }87  .ad-body {88    display: flex;89    margin: 0;90    padding: 0;91  }92  .side-rail {93    width: 64px;94    background: #F0F0F0;95    border-right: 1px solid #E0E0E0;96    border-bottom-left-radius: 24px;97    padding-top: 24px;98    display: flex;99    justify-content: center;100  }101  .rail-icon {102    width: 46px; height: 46px; background: #FFFFFF; border: 1px solid #D0D0D0; border-radius: 50%;103    display: flex; align-items: center; justify-content: center;104  }105  .video-placeholder {106    width: 944px;107    height: 1360px;108    background: #E0E0E0;109    border: 1px solid #BDBDBD;110    border-bottom-right-radius: 24px;111    border-top-right-radius: 24px;112    display: flex; align-items: center; justify-content: center;113    color: #757575; font-size: 36px; font-weight: 600; text-align: center;114  }115 116  /* Install bar at bottom */117  .install-card {118    position: absolute;119    bottom: 220px; left: 36px;120    width: 1008px;121    height: 200px;122    display: flex; align-items: center;123    padding: 24px 28px;124    gap: 24px;125  }126  .app-icon {127    width: 140px; height: 140px;128    background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 28px;129    display: flex; align-items: center; justify-content: center;130    color: #757575; font-weight: 700;131  }132  .install-info { flex: 1; display: flex; flex-direction: column; gap: 18px; }133  .install-title { font-size: 44px; color: #222; font-weight: 700; line-height: 1.1; }134  .installed {135    display: inline-flex; align-items: center; gap: 12px;136    color: #2E7D32; font-size: 34px; font-weight: 700;137  }138  .installed svg { width: 36px; height: 36px; }139  .open-btn {140    width: 240px; height: 96px; background: #1FAA59; color: #fff; font-size: 40px; font-weight: 700;141    border-radius: 20px; display: flex; align-items: center; justify-content: center;142  }143 144  /* Home indicator */145  .home-indicator {146    position: absolute;147    bottom: 52px; left: 50%;148    transform: translateX(-50%);149    width: 300px; height: 18px; background: #000; border-radius: 9px;150  }151</style>152</head>153<body>154<div id="render-target">155 156  <!-- Status Bar -->157  <div class="status-bar">158    <div class="sb-inner">159      <div class="sb-time">3:11</div>160      <div class="sb-icons">161        <!-- simple square (placeholder for status icons) -->162        <svg viewBox="0 0 24 24">163          <rect x="4" y="4" width="16" height="16" fill="#ffffff" opacity="0.8"></rect>164        </svg>165        <!-- WiFi icon -->166        <svg viewBox="0 0 24 24">167          <path d="M2 9c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.9"/>168          <path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.9"/>169          <path d="M8 15c3-2 5-2 8 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.9"/>170          <circle cx="12" cy="18" r="2" fill="#fff"/>171        </svg>172        <!-- Battery icon -->173        <svg viewBox="0 0 28 24">174          <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>175          <rect x="4" y="8" width="14" height="8" fill="#fff"/>176          <rect x="22" y="9" width="4" height="6" rx="1" fill="#fff"/>177        </svg>178      </div>179    </div>180  </div>181 182  <!-- Top banner -->183  <div class="top-banner card">184    <div class="img-box">[IMG: App Icon]</div>185    <div class="banner-text">186      <div class="sub">Continue to app</div>187      <div class="title">Procreate art set 4. Sgraffito</div>188    </div>189    <div class="banner-arrow">190      <svg viewBox="0 0 24 24">191        <path d="M8 5l8 7-8 7" stroke="#4A4A4A" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>192      </svg>193    </div>194  </div>195 196  <!-- Advertisement card with video -->197  <div class="ad-card card">198    <div class="ad-header">Advertisement</div>199    <div class="ad-body">200      <div class="side-rail">201        <div class="rail-icon">202          <!-- Speaker icon -->203          <svg viewBox="0 0 24 24">204            <path d="M3 9v6h4l5 4V5L7 9H3z" fill="#777"/>205            <path d="M16 8c1.5 1 2 2.2 2 4s-.5 3-2 4" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>206          </svg>207        </div>208      </div>209      <div class="video-placeholder">[IMG: Video Ad - 99acres.com smartphone]</div>210    </div>211  </div>212 213  <!-- Install bar -->214  <div class="install-card card">215    <div class="app-icon">[IMG: 99acres]</div>216    <div class="install-info">217      <div class="install-title">99acres Buy/Rent/Sell<br>Property</div>218      <div class="installed">219        <svg viewBox="0 0 24 24">220          <path d="M3 12l6 6L21 6" stroke="#2E7D32" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>221        </svg>222        Installed223      </div>224    </div>225    <div class="open-btn">Open</div>226  </div>227 228  <!-- Home indicator -->229  <div class="home-indicator"></div>230</div>231</body>232</html>