GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>YouTube Watch Screen Mock</title>6<style>7  body{margin:0;padding:0;background:transparent;font-family:Arial, Helvetica, sans-serif;}8  #render-target{9    position:relative; overflow:hidden;10    width:1080px; height:2400px; background:#000000; color:#fff;11  }12  /* Status bar */13  .status-bar{14    position:absolute; top:0; left:0; right:0; height:70px;15    display:flex; align-items:center; justify-content:space-between;16    padding:0 28px; color:#fff; font-size:34px; opacity:0.9;17    pointer-events:none;18  }19  /* Video player */20  .video{21    position:absolute; top:70px; left:0; width:1080px; height:608px;22    background:#E0E0E0; border-top:1px solid #BDBDBD; border-bottom:1px solid #BDBDBD;23    display:flex; align-items:center; justify-content:center; color:#757575; font-size:36px;24  }25  .video-overlay{ position:absolute; top:70px; left:0; width:1080px; height:608px; pointer-events:none; }26  .overlay-row{27    position:absolute; top:16px; left:16px; right:16px; display:flex; align-items:center; justify-content:space-between;28  }29  .ov-left, .ov-right{ display:flex; gap:16px; }30  .icon-ghost{31    width:64px; height:64px; border-radius:32px; background:rgba(0,0,0,0.35);32    display:flex; align-items:center; justify-content:center;33    pointer-events:auto;34  }35  .icon-ghost.small{ width:56px; height:56px; border-radius:28px; }36  .center-controls{37    position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);38    display:flex; align-items:center; justify-content:center; gap:60px;39  }40  .cc-caption{41    position:absolute; left:40px; right:40px; bottom:120px;42    background:rgba(0,0,0,0.75); padding:18px 22px; border-radius:6px; font-size:34px; line-height:1.3;43  }44  .progress-area{45    position:absolute; left:0; right:0; bottom:0; height:110px; padding:18px 28px 24px 28px; box-sizing:border-box;46    background:linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0));47  }48  .time-row{ display:flex; align-items:center; justify-content:space-between; font-size:30px; color:#ddd; margin-bottom:10px;}49  .scrubber{50    position:relative; height:8px; background:#444; border-radius:4px; overflow:hidden;51  }52  .scrubber .progress{ position:absolute; left:0; top:0; height:8px; width:26%; background:#ff0000; }53  .scrubber .dot{54    position:absolute; top:50%; left:26%; transform:translate(-50%,-50%);55    width:22px; height:22px; background:#ff2a2a; border-radius:50%; box-shadow:0 0 0 4px rgba(255,42,42,0.25);56  }57 58  /* Content area below video */59  .content{ position:absolute; top:678px; left:0; right:0; bottom:0; overflow:hidden auto; padding:22px 28px 120px; }60  .title{ font-size:48px; font-weight:700; margin:14px 0 8px; }61  .meta{ color:#AAAAAA; font-size:30px; }62  .hashtags span{ margin-right:12px; color:#9bb7ff; }63  .channel-row{ display:flex; align-items:center; margin-top:28px; }64  .avatar{65    width:110px; height:110px; border-radius:55px; background:#E0E0E0; border:1px solid #BDBDBD;66    display:flex; align-items:center; justify-content:center; color:#757575; font-size:22px; margin-right:20px;67  }68  .channel-info{ display:flex; flex-direction:column; gap:6px; }69  .channel-name{ font-size:36px; font-weight:700; }70  .subscribers{ font-size:28px; color:#bbb; }71  .subscribe-btn{72    margin-left:auto; background:#ffffff; color:#000; padding:18px 30px; border-radius:28px; font-weight:700; font-size:30px;73  }74 75  .action-row{ display:flex; gap:26px; margin:26px 0 18px; }76  .pill{77    background:#1f1f1f; color:#fff; padding:20px 28px; border-radius:38px; display:flex; align-items:center; gap:14px; font-size:30px;78    border:1px solid #2a2a2a;79  }80  .pill .circle-icon{ width:30px; height:30px; border-radius:50%; background:#fff; }81 82  /* Comments */83  .comments-header{ font-size:36px; font-weight:700; margin-top:8px; }84  .comment-card{85    margin-top:18px; background:#121212; border-radius:24px; padding:24px; border:1px solid #222; display:flex; gap:18px; align-items:flex-start;86  }87  .comment-avatar{88    width:72px; height:72px; border-radius:36px; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575; display:flex; align-items:center; justify-content:center; font-size:18px;89  }90  .comment-text{ color:#e0e0e0; font-size:30px; line-height:1.35; }91 92  /* Next video card */93  .next-card{ margin-top:26px; }94  .thumb{95    width:100%; height:520px; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575; display:flex; align-items:center; justify-content:center; font-size:40px; position:relative; }96  .time-badge{97    position:absolute; right:16px; bottom:16px; background:rgba(0,0,0,0.9); color:#fff; font-size:28px; padding:6px 10px; border-radius:6px;98  }99  .next-title{ font-size:36px; font-weight:700; margin:12px 0 4px; }100  .next-meta{ color:#aaa; font-size:28px; }101 102  /* Toast */103  .toast{104    position:absolute; left:50%; transform:translateX(-50%); bottom:140px;105    background:#f0f0f0; color:#000; border-radius:18px; padding:24px 28px; font-size:30px; box-shadow:0 6px 16px rgba(0,0,0,0.4); }106  /* Home indicator */107  .home-indicator{108    position:absolute; left:50%; transform:translateX(-50%); bottom:40px; width:300px; height:10px; border-radius:5px; background:#bdbdbd; opacity:0.6;109  }110 111  /* Simple inline icon sizes helper */112  svg{ display:block; }113  .w24{ width:34px; height:34px; }114  .play-big{ width:98px; height:98px; }115</style>116</head>117<body>118<div id="render-target">119 120  <!-- Status Bar -->121  <div class="status-bar">122    <div>10:03</div>123    <div>⋯ ⋯ ⋯  ◇  ☰</div>124  </div>125 126  <!-- Video area -->127  <div class="video">[IMG: London video - Big Ben / River Thames]</div>128 129  <!-- Overlays -->130  <div class="video-overlay">131 132    <div class="overlay-row">133      <div class="ov-left">134        <div class="icon-ghost small">135          <svg class="w24" viewBox="0 0 24 24" fill="#fff"><path d="M15 18l-6-6 6-6"/></svg>136        </div>137      </div>138      <div class="ov-right">139        <div class="icon-ghost small">140          <svg class="w24" viewBox="0 0 24 24" fill="#fff"><path d="M8 5v14l11-7z"/></svg>141        </div>142        <div class="icon-ghost small">143          <svg class="w24" viewBox="0 0 24 24" fill="#fff"><path d="M21 8v8h-2V8h2zM3 5h14v14H3V5zm2 2v10h10V7H5z"/></svg>144        </div>145        <div class="icon-ghost small">146          <svg class="w24" viewBox="0 0 24 24" fill="#fff"><path d="M9 7h6v2H9V7zm0 4h6v2H9v-2zm0 4h6v2H9v-2z"/></svg>147        </div>148        <div class="icon-ghost small">149          <svg class="w24" viewBox="0 0 24 24" fill="#fff"><path d="M19.14 12.94A7 7 0 1 0 12 19a7 7 0 0 0 7.14-6.06zM12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8z"/></svg>150        </div>151        <div class="icon-ghost small">152          <svg class="w24" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>153        </div>154      </div>155    </div>156 157    <div class="center-controls">158      <div class="icon-ghost">159        <svg class="w24" viewBox="0 0 24 24" fill="#fff"><path d="M10 9l-4 3 4 3v-2h4v-2h-4V9z"/></svg>160      </div>161      <div class="icon-ghost" style="background:rgba(255,255,255,0.3);">162        <svg class="play-big" viewBox="0 0 100 100" fill="#fff"><circle cx="50" cy="50" r="48" fill="rgba(0,0,0,0.35)"/><path d="M40 30l35 20-35 20z" fill="#fff"/></svg>163      </div>164      <div class="icon-ghost">165        <svg class="w24" viewBox="0 0 24 24" fill="#fff"><path d="M14 9l4 3-4 3v-2h-4v-2h4V9z"/></svg>166      </div>167    </div>168 169    <div class="cc-caption">Big Ben's reassuring chimes peal across the city every hour, on the hour.</div>170 171    <div class="progress-area">172      <div class="time-row">173        <div>1:29 / 6:13 · Houses of Parliament ›</div>174        <div>175          <svg class="w24" viewBox="0 0 24 24" fill="#fff"><path d="M7 7h10v10H7z"/></svg>176        </div>177      </div>178      <div class="scrubber">179        <div class="progress"></div>180        <div class="dot"></div>181      </div>182    </div>183  </div>184 185  <!-- Content -->186  <div class="content">187    <div class="title">London Vacation Travel Guide | Expedia</div>188    <div class="meta">189      5M views · 10y ago190      <span class="hashtags">191        <span>#sightseeing</span><span>#London</span><span>#vacation</span> …more192      </span>193    </div>194 195    <div class="channel-row">196      <div class="avatar">[IMG: Channel Avatar]</div>197      <div class="channel-info">198        <div class="channel-name">Expedia</div>199        <div class="subscribers">1.15M subscribers</div>200      </div>201      <div class="subscribe-btn">Subscribe</div>202    </div>203 204    <div class="action-row">205      <div class="pill"><div class="circle-icon"></div>30K</div>206      <div class="pill"><div class="circle-icon"></div>Share</div>207      <div class="pill"><div class="circle-icon"></div>Remix</div>208      <div class="pill"><div class="circle-icon"></div>Download</div>209    </div>210 211    <div class="comments-header">Comments 1.7K</div>212    <div class="comment-card">213      <div class="comment-avatar">[IMG]</div>214      <div class="comment-text">When your school in England uses travel videos for geography, you know the education system is getting l...</div>215    </div>216 217    <div class="next-card">218      <div class="thumb">[IMG: Travel Guide Paris Thumbnail]<div class="time-badge">6:29</div></div>219      <div class="next-title">Paris Vacation Travel Guide | Expedia</div>220      <div class="next-meta">Expedia · 4.7M views · 10 years ago</div>221    </div>222  </div>223 224  <!-- Toast -->225  <div class="toast">Subtitles/CC turned on (English)</div>226 227  <!-- Home Indicator -->228  <div class="home-indicator"></div>229 230</div>231</body>232</html>