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>Video Ad Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #000000;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;16    color: #fff;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 110px;26    padding: 0 28px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #ffffff;31    box-sizing: border-box;32  }33  .status-left, .status-right {34    display: flex;35    align-items: center;36    gap: 22px;37  }38  .time {39    font-size: 44px;40    font-weight: 600;41    letter-spacing: 0.5px;42    margin-right: 8px;43  }44  .sb-icon {45    width: 38px;46    height: 38px;47    opacity: 0.95;48  }49 50  /* Video controls (top-left) */51  .video-controls {52    position: absolute;53    top: 130px;54    left: 26px;55    display: flex;56    gap: 26px;57    align-items: center;58  }59  .vc-btn svg {60    width: 64px;61    height: 64px;62    fill: #ffffff;63    opacity: 0.95;64  }65 66  /* Decorative “candy” shapes to suggest motion on a dark video */67  .candy { position: absolute; opacity: 0.95; }68  .ball {69    border-radius: 50%;70    box-shadow: 0 0 24px rgba(255,255,255,0.15) inset, 0 0 40px rgba(255,255,255,0.08);71  }72  .pill {73    border-radius: 40px;74    box-shadow: 0 0 24px rgba(255,255,255,0.12) inset;75  }76  .square {77    border-radius: 24px;78    box-shadow: 0 0 18px rgba(255,255,255,0.1) inset;79  }80  .stripe-green {81    background: repeating-linear-gradient(82      90deg,83      #46d36e 0 22px,84      #b8ffcc 22px 38px85    );86    border-radius: 26px;87    box-shadow: 0 0 24px rgba(0,255,120,0.25);88  }89  .wrapped {90    background: #9f5bff;91    border-radius: 18px;92    box-shadow: 0 0 20px rgba(159,91,255,0.45);93  }94 95  /* Caption */96  .caption {97    position: absolute;98    bottom: 330px;99    left: 50%;100    transform: translateX(-50%);101    font-size: 36px;102    color: #e6e6e6;103    text-shadow: 0 2px 2px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.6);104    opacity: 0.95;105  }106 107  /* Open button */108  .cta {109    position: absolute;110    right: 64px;111    bottom: 230px;112    width: 320px;113    height: 110px;114    background: #4b4b4d;115    color: #ffffff;116    border-radius: 18px;117    display: flex;118    align-items: center;119    justify-content: center;120    font-size: 44px;121    font-weight: 600;122    letter-spacing: 0.3px;123    box-shadow: 0 6px 18px rgba(0,0,0,0.35);124  }125 126  /* Video progress & gesture bar */127  .progress-wrap {128    position: absolute;129    left: 0;130    right: 0;131    bottom: 170px;132    height: 8px;133    background: #2a2a2a;134  }135  .progress {136    width: 12%;137    height: 100%;138    background: #ffc425;139  }140  .home-indicator {141    position: absolute;142    left: 50%;143    transform: translateX(-50%);144    bottom: 96px;145    width: 300px;146    height: 12px;147    background: #f1f1f1;148    border-radius: 8px;149    opacity: 0.9;150  }151</style>152</head>153<body>154<div id="render-target">155 156  <!-- STATUS BAR -->157  <div class="status-bar">158    <div class="status-left">159      <div class="time">8:23</div>160      <!-- Gear -->161      <svg class="sb-icon" viewBox="0 0 24 24">162        <path fill="#fff" d="M12 8.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7zm8.5 3.5c0 .5-.05 1-.14 1.47l2.02 1.57-1.9 3.3-2.43-.78c-.38.32-.79.6-1.24.83l-.37 2.54h-3.8l-.37-2.54c-.45-.23-.86-.51-1.24-.83l-2.43.78-1.9-3.3 2.02-1.57A7.8 7.8 0 0 1 3.5 12c0-.5.05-1 .14-1.47L1.62 8.96l1.9-3.3 2.43.78c.38-.32.79-.6 1.24-.83L7.56 3.07h3.88l.37 2.54c.45.23.86.51 1.24.83l2.43-.78 1.9 3.3-2.02 1.57c.09.47.14.97.14 1.47z"/>163      </svg>164      <!-- Moon -->165      <svg class="sb-icon" viewBox="0 0 24 24">166        <path fill="#fff" d="M21 13.5A8.5 8.5 0 0 1 10.5 3c-.8 0-1.58.12-2.3.35A7 7 0 1 0 20.65 15.8c.23-.72.35-1.5.35-2.3z"/>167      </svg>168      <!-- Dot -->169      <svg class="sb-icon" viewBox="0 0 24 24">170        <circle cx="12" cy="12" r="4" fill="#fff"/>171      </svg>172    </div>173    <div class="status-right">174      <!-- Location -->175      <svg class="sb-icon" viewBox="0 0 24 24">176        <path fill="#fff" 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 12 6a2.5 2.5 0 0 1 0 5z"/>177      </svg>178      <!-- WiFi -->179      <svg class="sb-icon" viewBox="0 0 24 24">180        <path fill="#fff" d="M2 8.5C5.5 6 8.8 5 12 5s6.5 1 10 3.5l-1.6 2C17.3 8 14.7 7.3 12 7.3S6.7 8 3.6 10.5L2 8.5zm3 4c2.3-1.6 4.8-2.3 7-2.3s4.7.7 7 2.3l-1.6 2c-1.9-1.3-3.7-1.9-5.4-1.9s-3.5.6-5.4 1.9l-1.6-2zm3 4c1.3-.9 2.7-1.3 4-1.3s2.7.4 4 1.3l-4 4-4-4z"/>181      </svg>182      <!-- Battery -->183      <svg class="sb-icon" viewBox="0 0 24 24">184        <rect x="2" y="7" width="17" height="10" rx="2" fill="#fff"/>185        <rect x="20" y="10" width="2" height="4" fill="#fff"/>186      </svg>187    </div>188  </div>189 190  <!-- VIDEO CONTROLS -->191  <div class="video-controls">192    <div class="vc-btn" title="Sound">193      <svg viewBox="0 0 24 24">194        <path d="M3 10v4h4l5 4V6L7 10H3zM16 7.5v9c1.8-.8 3-2.6 3-4.5s-1.2-3.7-3-4.5z" />195      </svg>196    </div>197    <div class="vc-btn" title="Pause">198      <svg viewBox="0 0 24 24">199        <path d="M6 5h4v14H6zM14 5h4v14h-4z"/>200      </svg>201    </div>202  </div>203 204  <!-- Stylized candies (abstract) -->205  <div class="candy ball" style="left:780px; top:260px; width:140px; height:140px; background:#5ac2ff;"></div>206  <div class="candy square" style="left:68px; top:980px; width:170px; height:170px; background:#39d35a;"></div>207  <div class="candy pill" style="left:420px; top:920px; width:120px; height:240px; background:#f44336;"></div>208  <div class="candy ball" style="left:870px; top:1180px; width:150px; height:150px; background:#43a3ff;"></div>209  <div class="candy ball" style="left:100px; top:1320px; width:140px; height:140px; background:#8b3dff;"></div>210  <div class="candy stripe-green" style="left:560px; top:580px; width:170px; height:110px;"></div>211  <div class="candy wrapped" style="left:620px; top:1540px; width:180px; height:160px;"></div>212  <div class="candy square" style="left:890px; top:1600px; width:180px; height:180px; background:#39d35a;"></div>213  <div class="candy ball" style="left:490px; top:1710px; width:160px; height:160px; background:#ffa726;"></div>214  <div class="candy pill" style="left:150px; top:1510px; width:220px; height:150px; background:#ffd54f; border-radius:50px;"></div>215  <div class="candy ball" style="left:300px; top:1800px; width:170px; height:170px; background:#4ec3ff;"></div>216  <div class="candy wrapped" style="left:830px; top:1860px; width:190px; height:160px; background:#f5b14c; box-shadow:0 0 20px rgba(245,177,76,0.45);"></div>217  <div class="candy ball" style="left:420px; top:420px; width:120px; height:120px; background:#9b3cfe;"></div>218  <div class="candy stripe-green" style="left:120px; top:540px; width:140px; height:100px;"></div>219 220  <!-- Caption -->221  <div class="caption">Not in-game footage.</div>222 223  <!-- CTA button -->224  <div class="cta">Open</div>225 226  <!-- Progress bar -->227  <div class="progress-wrap">228    <div class="progress"></div>229  </div>230 231  <!-- Home indicator -->232  <div class="home-indicator"></div>233 234</div>235</body>236</html>