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>Mock UI - Ad Banner</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: #FFFFFF;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 88px;26    padding: 0 24px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #C7C7C7;32    font-size: 30px;33    letter-spacing: 0.5px;34  }35  .status-right {36    display: flex;37    align-items: center;38    gap: 22px;39  }40  .icon {41    width: 34px;42    height: 34px;43    display: inline-block;44  }45 46  /* Floating badge with number */47  .badge {48    position: absolute;49    top: 170px;50    right: 60px;51    width: 86px;52    height: 86px;53    border-radius: 50%;54    background: #D9D9D9;55    color: #333;56    display: flex;57    align-items: center;58    justify-content: center;59    font-weight: 700;60    font-size: 38px;61  }62 63  /* Decorative right scrollbar-like band */64  .side-bar {65    position: absolute;66    top: 0;67    right: 0;68    bottom: 420px; /* ends where the ad begins */69    width: 22px;70    background: #2f2f2f;71    opacity: 0.7;72  }73 74  /* Bottom ad card */75  .ad-card {76    position: absolute;77    left: 0;78    right: 0;79    bottom: 0;80    height: 420px;81    background: #FFFFFF;82    color: #111;83    border-top: 2px solid #E0E0E0;84    box-sizing: border-box;85    padding: 32px 36px;86    display: flex;87    align-items: center;88    gap: 32px;89  }90  .app-icon {91    width: 240px;92    height: 240px;93    background: #E0E0E0;94    border: 1px solid #BDBDBD;95    border-radius: 44px;96    color: #757575;97    display: flex;98    align-items: center;99    justify-content: center;100    text-align: center;101    font-size: 24px;102    line-height: 1.2;103  }104  .ad-content {105    flex: 1;106    display: flex;107    flex-direction: column;108    gap: 14px;109  }110  .app-title {111    font-size: 64px;112    color: #111;113    font-weight: 600;114    margin: 0;115    line-height: 1.1;116  }117  .meta {118    display: flex;119    align-items: center;120    gap: 16px;121    color: #555;122    font-size: 34px;123  }124  .install-btn {125    width: 320px;126    height: 120px;127    background: #34A853;128    color: #fff;129    border: none;130    border-radius: 24px;131    font-size: 44px;132    font-weight: 600;133    cursor: default;134  }135  .ad-info {136    position: absolute;137    left: 20px;138    bottom: 20px;139    width: 42px;140    height: 42px;141    border-radius: 50%;142    border: 3px solid #6EC6FF;143    color: #1E88E5;144    display: flex;145    align-items: center;146    justify-content: center;147    font-weight: 700;148    font-size: 26px;149    background: #fff;150  }151 152  /* Bottom gesture pill */153  .gesture-pill {154    position: absolute;155    bottom: 20px;156    left: 50%;157    transform: translateX(-50%);158    width: 300px;159    height: 14px;160    background: #e6e6e6;161    border-radius: 8px;162  }163</style>164</head>165<body>166<div id="render-target">167 168  <!-- Status Bar -->169  <div class="status-bar">170    <div class="status-left">8:24</div>171    <div class="status-right">172      <!-- Location icon -->173      <svg class="icon" viewBox="0 0 24 24" fill="#C7C7C7">174        <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>175      </svg>176      <!-- WiFi icon -->177      <svg class="icon" viewBox="0 0 24 24" fill="#C7C7C7">178        <path d="M12 20.5l2.5-2.5a3.5 3.5 0 0 0-5 0L12 20.5z"/>179        <path d="M2 9a15 15 0 0 1 20 0l-1.8 1.8A12.5 12.5 0 0 0 3.8 10.8L2 9z"/>180        <path d="M5 12.5a10 10 0 0 1 14 0l-1.8 1.8a7.5 7.5 0 0 0-10.4 0L5 12.5z"/>181      </svg>182      <!-- Battery icon -->183      <svg class="icon" viewBox="0 0 28 18">184        <rect x="1" y="3" width="22" height="12" rx="2" ry="2" fill="none" stroke="#C7C7C7" stroke-width="2"/>185        <rect x="3" y="5" width="16" height="8" fill="#C7C7C7"/>186        <rect x="23" y="7" width="4" height="6" rx="1" fill="#C7C7C7"/>187      </svg>188    </div>189  </div>190 191  <!-- Floating count badge -->192  <div class="badge">5</div>193 194  <!-- Decorative right bar -->195  <div class="side-bar"></div>196 197  <!-- Bottom Ad -->198  <div class="ad-card">199    <div class="app-icon">[IMG: Goods Sort app icon]</div>200    <div class="ad-content">201      <h1 class="app-title">Goods Sort</h1>202      <div class="meta">203        <span>4.7</span>204        <!-- Star -->205        <svg width="34" height="34" viewBox="0 0 24 24" fill="#555">206          <path d="M12 2l2.9 6.2 6.8.8-5 4.7 1.3 6.7L12 17l-6 3.4 1.3-6.7-5-4.7 6.8-.8L12 2z"/>207        </svg>208        <!-- Google Play icon -->209        <svg width="36" height="36" viewBox="0 0 24 24">210          <polygon points="2,2 14,12 2,22" fill="#34A853"/>211          <polygon points="14,12 21,16 17,12 21,8" fill="#FBBC05"/>212          <polygon points="14,12 21,8 21,16" fill="#EA4335"/>213          <polygon points="2,2 14,12 2,22" fill="#4285F4" opacity="0.65"/>214        </svg>215        <span>Google Play</span>216      </div>217    </div>218    <button class="install-btn">Install</button>219    <div class="ad-info">i</div>220  </div>221 222  <!-- Bottom gesture pill -->223  <div class="gesture-pill"></div>224</div>225</body>226</html>