GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>YouTube Speed Menu Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #0f0f0f; color: #fff;11  }12 13  /* Status bar */14  .status-bar {15    position: absolute; top: 0; left: 0; width: 100%; height: 110px;16    display: flex; align-items: center; justify-content: space-between;17    padding: 0 32px; color: #fff; font-weight: 600; font-size: 42px;18    opacity: 0.95;19  }20  .status-icons { display: flex; gap: 22px; align-items: center; }21  .dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; display: inline-block; opacity: 0.9; }22  .wifi, .battery { width: 42px; height: 42px; border: 2px solid #fff; border-radius: 6px; position: relative; }23  .wifi:before { content: ""; position: absolute; inset: 8px; border: 3px solid #fff; border-top: none; border-left: none; transform: rotate(45deg); border-radius: 2px; }24  .battery:after { content: ""; position: absolute; right: -10px; top: 12px; width: 8px; height: 18px; background: #fff; border-radius: 2px; }25 26  /* Video area */27  .video-wrap {28    position: absolute; top: 110px; left: 0; width: 100%; height: 740px;29  }30  .video-frame {31    position: absolute; inset: 0 0 0 0; background: #202020; border-top: 1px solid #333; border-bottom: 1px solid #333;32    display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 32px;33  }34  .video-frame .img {35    width: 100%; height: 100%; background: #E0E0E0; border: 1px solid #BDBDBD;36    display: flex; align-items: center; justify-content: center; color: #757575;37  }38 39  /* Overlay controls */40  .overlay-icon { position: absolute; fill: #fff; opacity: 0.95; }41  .icon-back { left: 24px; top: 40px; width: 64px; height: 64px; }42  .icon-play { left: 360px; top: 36px; width: 72px; height: 72px; }43  .icon-cast { left: 460px; top: 38px; width: 64px; height: 64px; }44  .icon-cc { left: 560px; top: 38px; width: 64px; height: 64px; }45  .icon-close { right: 24px; top: 38px; width: 64px; height: 64px; }46 47  /* Caption bubble */48  .caption {49    position: absolute; left: 140px; bottom: 170px; background: rgba(0,0,0,0.85);50    color: #fff; padding: 18px 22px; border-radius: 8px; font-size: 36px; line-height: 1.28;51  }52 53  /* Progress bar and time */54  .progress-wrap { position: absolute; bottom: 60px; left: 0; width: 100%; }55  .progress-bar {56    width: 100%; height: 6px; background: #333;57  }58  .progress-inner { width: 54%; height: 100%; background: #cc0000; position: relative; }59  .progress-dot {60    position: absolute; right: -14px; top: -10px; width: 26px; height: 26px; background: #e53935;61    border-radius: 50%; box-shadow: 0 0 0 3px rgba(229,57,53,0.3);62  }63  .time-row {64    position: absolute; bottom: -56px; left: 30px; font-size: 32px; color: #bbb;65  }66 67  /* Title and meta */68  .title {69    position: absolute; top: 880px; left: 30px; right: 30px;70    font-weight: 800; font-size: 56px; line-height: 1.2;71  }72  .meta {73    position: absolute; top: 1030px; left: 30px; right: 30px;74    color: #bbb; font-size: 34px;75  }76 77  /* Channel row */78  .channel {79    position: absolute; top: 1120px; left: 30px; right: 30px; display: flex; align-items: center; justify-content: space-between;80  }81  .chan-left { display: flex; align-items: center; gap: 26px; }82  .avatar {83    width: 88px; height: 88px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 50%;84    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;85  }86  .chan-name { font-size: 42px; font-weight: 700; }87  .chan-count { font-size: 34px; color: #bbb; margin-left: 12px; }88  .btn-sub {89    background: #fff; color: #000; font-weight: 700; padding: 22px 30px; border-radius: 40px; font-size: 38px;90  }91 92  /* Action buttons */93  .actions {94    position: absolute; top: 1240px; left: 30px; right: 30px; display: flex; gap: 28px;95  }96  .pill {97    background: #1f1f1f; border: 1px solid #2a2a2a; color: #fff; border-radius: 50px;98    padding: 22px 28px; font-size: 36px; display: flex; align-items: center; gap: 16px;99  }100  .pill svg { width: 36px; height: 36px; fill: #fff; }101 102  /* Bottom sheet: Playback speed */103  .dim {104    position: absolute; inset: 0; background: rgba(0,0,0,0.35);105  }106  .sheet {107    position: absolute; left: 0; bottom: 0; width: 100%; height: 1250px;108    background: #121212; border-top-left-radius: 24px; border-top-right-radius: 24px;109    box-shadow: 0 -10px 20px rgba(0,0,0,0.6);110  }111  .handle {112    width: 140px; height: 12px; background: #2c2c2c; border-radius: 8px;113    margin: 18px auto 0 auto;114  }115  .speed-list {116    margin-top: 40px; padding: 0 60px; color: #fff;117  }118  .speed-item {119    display: flex; align-items: center; justify-content: space-between;120    padding: 34px 0; border-bottom: 1px solid #1e1e1e; font-size: 46px;121  }122  .speed-item:last-child { border-bottom: none; }123  .check {124    width: 46px; height: 46px; display: inline-block;125  }126  .muted { color: #bbb; }127</style>128</head>129<body>130<div id="render-target">131 132  <!-- Status Bar -->133  <div class="status-bar">134    <div>9:57</div>135    <div class="status-icons">136      <span class="dot"></span>137      <span class="dot"></span>138      <span class="dot"></span>139      <span class="dot"></span>140      <div class="wifi"></div>141      <div class="battery"></div>142    </div>143  </div>144 145  <!-- Video Area -->146  <div class="video-wrap">147    <div class="video-frame">148      <div class="img">[IMG: Singapore indoor garden video frame]</div>149    </div>150 151    <!-- Overlay icons -->152    <svg class="overlay-icon icon-back" viewBox="0 0 24 24">153      <path d="M14 5l-7 7 7 7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>154    </svg>155    <svg class="overlay-icon icon-play" viewBox="0 0 24 24">156      <circle cx="12" cy="12" r="10" fill="rgba(255,255,255,0.2)"></circle>157      <path d="M10 8l8 4-8 4z" fill="#fff"></path>158    </svg>159    <svg class="overlay-icon icon-cast" viewBox="0 0 24 24">160      <rect x="3" y="5" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>161      <path d="M3 17c3 0 5 2 6 4" stroke="#fff" stroke-width="2" fill="none"></path>162    </svg>163    <svg class="overlay-icon icon-cc" viewBox="0 0 24 24">164      <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>165      <text x="7" y="15" fill="#fff" font-size="10" font-family="Arial">CC</text>166    </svg>167    <svg class="overlay-icon icon-close" viewBox="0 0 24 24">168      <path d="M5 5l14 14M19 5l-14 14" stroke="#fff" stroke-width="2" stroke-linecap="round"/>169    </svg>170 171    <!-- Caption -->172    <div class="caption">173      In 2020, Changi was voted<br>174      the world's best airport for the 8th time in a row.175    </div>176 177    <!-- Progress and time -->178    <div class="progress-wrap">179      <div class="progress-bar">180        <div class="progress-inner">181          <div class="progress-dot"></div>182        </div>183      </div>184      <div class="time-row">7:43 / 12:49 · 5. Changi Airport</div>185    </div>186  </div>187 188  <!-- Title and meta -->189  <div class="title">TOP 10 things to do in SINGAPORE | Travel Guide 4K</div>190  <div class="meta">1.8M views · 3y ago · #singapore #travelguide · ...more</div>191 192  <!-- Channel row -->193  <div class="channel">194    <div class="chan-left">195      <div class="avatar">[IMG]</div>196      <div>197        <span class="chan-name">Hungry Passport</span>198        <span class="chan-count">244K</span>199      </div>200    </div>201    <div class="btn-sub">Subscribe</div>202  </div>203 204  <!-- Actions -->205  <div class="actions">206    <div class="pill">207      <svg viewBox="0 0 24 24"><path d="M12 4l2 6h6l-4.8 3.5L16 20l-4-3-4 3 1.8-6.5L4 10h6z"/></svg>208      15K209    </div>210    <div class="pill">211      <svg viewBox="0 0 24 24"><path d="M12 20l-2-6H4l4.8-3.5L8 4l4 3 4-3-1.8 6.5L20 14h-6z"/></svg>212    </div>213    <div class="pill">214      <svg viewBox="0 0 24 24"><path d="M4 12h10M10 6l6 6-6 6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>215      Share216    </div>217    <div class="pill">218      <svg viewBox="0 0 24 24"><path d="M12 3v18M5 10l7-7 7 7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>219      Remix220    </div>221    <div class="pill">222      <svg viewBox="0 0 24 24"><path d="M6 20h12V10H6v10zm3-12h6V4H9v4z" fill="#fff"/></svg>223      Download224    </div>225  </div>226 227  <!-- Bottom Sheet Overlay -->228  <div class="dim"></div>229  <div class="sheet">230    <div class="handle"></div>231    <div class="speed-list">232      <div class="speed-item"><span>0.25x</span><span class="muted"></span></div>233      <div class="speed-item"><span>0.5x</span></div>234      <div class="speed-item"><span>0.75x</span></div>235      <div class="speed-item">236        <svg class="check" viewBox="0 0 24 24"><path d="M20 6l-11 11-5-5" stroke="#38d079" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>237        <span>Normal</span>238      </div>239      <div class="speed-item"><span>1.25x</span></div>240      <div class="speed-item"><span>1.5x</span></div>241      <div class="speed-item"><span>1.75x</span></div>242      <div class="speed-item"><span>2x</span></div>243    </div>244  </div>245 246</div>247</body>248</html>