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 Style Screen</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;10    position:relative; overflow:hidden;11    background:#111; color:#eee;12  }13  /* Status bar */14  .status-bar{15    position:absolute; top:0; left:0; right:0; height:98px;16    padding:0 28px;17    display:flex; align-items:center; justify-content:space-between;18    color:#dcdcdc; font-size:40px; letter-spacing:1px;19  }20  .status-icons{ display:flex; gap:28px; align-items:center; }21  .dot{ width:18px; height:18px; background:#dcdcdc; border-radius:50%; display:inline-block; }22  /* Video area */23  .video-area{24    position:absolute; top:98px; left:0; right:0; height:520px;25    background:#000;26  }27  .video-split{28    display:flex; width:100%; height:100%;29  }30  .img-box{31    flex:1; border:1px solid #2d2d2d; background:#E0E0E0;32    display:flex; align-items:center; justify-content:center;33    color:#555; font-weight:600;34  }35  .overlay{ position:absolute; inset:0; pointer-events:none; }36  .ov-top{ position:absolute; top:22px; left:22px; right:22px; display:flex; justify-content:space-between; align-items:center; }37  .ov-mid{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }38  .ov-right{ position:absolute; top:90px; right:28px; display:flex; gap:26px; }39  .circle-btn{40    width:120px; height:120px; border-radius:50%;41    background:rgba(255,255,255,0.12);42    display:flex; align-items:center; justify-content:center;43  }44  .tiny-pill{45    padding:10px 16px; background:rgba(255,255,255,0.14); border-radius:10px; font-size:32px;46  }47  .close-x{48    width:70px; height:70px; border-radius:50%; background:rgba(0,0,0,0.55);49    display:flex; align-items:center; justify-content:center; color:#fff; font-size:44px;50  }51  /* Waveform/progress */52  .progress-wrap{53    position:absolute; top:618px; left:0; right:0; padding:26px 28px 20px;54  }55  .time-text{ color:#cfcfcf; font-size:32px; margin-bottom:14px; }56  .wave{57    height:18px; background:linear-gradient(90deg,#777 50%,#333 50%); background-size:20px 100%;58    border-radius:9px; position:relative;59  }60  .scrubber{61    position:absolute; top:50%; left:18%;62    width:28px; height:28px; transform:translate(-50%,-50%);63    background:#ff6; border-radius:50%; border:4px solid #f33;64    box-shadow:0 0 0 6px rgba(255,255,255,0.08);65  }66  /* Ad card */67  .ad-card{68    position:absolute; top:706px; left:0; right:0; padding:22px 28px;69    display:flex; align-items:center; gap:22px; background:#121212;70    border-top:1px solid #1f1f1f; border-bottom:1px solid #1f1f1f;71  }72  .brand-logo{ width:120px; height:120px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#444; font-size:28px; text-align:center; }73  .ad-info{ flex:1; }74  .ad-title{ font-size:40px; }75  .ad-sub{ font-size:30px; color:#9aa0a6; margin-top:6px; }76  .buy-btn{77    background:#3ea6ff; color:#051019; padding:24px 34px; border-radius:50px; font-weight:700; font-size:36px;78  }79  .kebab{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#bbb; font-size:42px; }80 81  /* Title block */82  .title-wrap{ position:absolute; top:860px; left:28px; right:28px; }83  .video-title{ font-size:54px; line-height:1.2; font-weight:800; margin-bottom:16px; }84  .meta{ font-size:30px; color:#9aa0a6; display:flex; gap:16px; align-items:center; }85  .more{ color:#9aa0a6; }86 87  /* Channel row */88  .channel-row{89    margin-top:34px; display:flex; align-items:center; gap:26px;90  }91  .avatar{ width:82px; height:82px; border-radius:50%; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#444; font-size:22px; }92  .channel-name{ font-size:40px; font-weight:700; }93  .subs{ font-size:30px; color:#9aa0a6; margin-left:12px; }94  .spacer{ flex:1; }95  .join-btn{ background:#fff; color:#111; padding:18px 30px; border-radius:50px; font-weight:700; font-size:36px; }96  .icon-btn{ width:70px; height:70px; border-radius:50%; background:#1f1f1f; display:flex; align-items:center; justify-content:center; color:#ddd; margin-left:16px; }97 98  /* Action chips */99  .actions{ margin-top:30px; display:flex; gap:22px; flex-wrap:wrap; }100  .chip{101    background:#1a1a1a; border:1px solid #2a2a2a; color:#eaeaea;102    padding:20px 26px; border-radius:30px; font-size:34px; display:flex; align-items:center; gap:16px;103  }104  .chip svg{ width:36px; height:36px; fill:#eaeaea; }105 106  /* Comments */107  .comments{108    margin-top:40px; background:#121212; border-radius:18px; padding:22px; border:1px solid #1e1e1e;109  }110  .comments h3{ margin:0 0 18px 0; font-size:40px; }111  .comment-row{ display:flex; gap:18px; align-items:flex-start; }112  .comment-text{ font-size:34px; }113  .chev{ margin-left:auto; color:#bbb; font-size:40px; }114 115  /* Big bottom ad */116  .big-ad{117    position:absolute; left:0; right:0; bottom:130px; height:520px;118    background:#3b2bd6; border-top:2px solid #241b9e;119    padding:26px;120  }121  .big-ad h4{ margin:0 0 10px 0; color:#fff; font-size:48px; }122  .bed-wrap{ display:flex; gap:26px; height:360px; }123  .bed-img{ flex:1; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#555; font-weight:700; }124  .install-bar{125    position:absolute; left:0; right:0; bottom:0; height:130px; background:#0c0c0c;126    display:flex; align-items:center; justify-content:space-between; padding:0 28px; border-top:1px solid #1e1e1e;127  }128  .install-btn{129    background:#2ea44f; color:#fff; padding:18px 34px; border-radius:16px; font-size:40px; font-weight:700;130  }131  .floating-download{132    position:absolute; right:28px; bottom:150px;133    width:78px; height:78px; border-radius:18px; background:#1673ff;134    display:flex; align-items:center; justify-content:center;135    box-shadow:0 6px 20px rgba(0,0,0,0.4);136  }137  .muted{ color:#a7a7a7; }138</style>139</head>140<body>141<div id="render-target">142 143  <!-- Status Bar -->144  <div class="status-bar">145    <div>7:03</div>146    <div class="status-icons">147      <span class="dot"></span>148      <span class="dot"></span>149      <span class="dot"></span>150    </div>151  </div>152 153  <!-- Video Area -->154  <div class="video-area">155    <div class="video-split">156      <div class="img-box">[IMG: Podcast Scene]</div>157      <div class="img-box">[IMG: Show Cover - Red]</div>158    </div>159 160    <!-- Overlays -->161    <div class="overlay">162      <div class="ov-top">163        <div class="tiny-pill">⌄</div>164        <div class="close-x">✕</div>165      </div>166      <div class="ov-right">167        <div class="tiny-pill">CC</div>168        <div class="tiny-pill">⚙</div>169      </div>170      <div class="ov-mid">171        <div class="circle-btn">172          <!-- Play Icon -->173          <svg viewBox="0 0 24 24" width="80" height="80" fill="#fff">174            <path d="M8 5v14l11-7-11-7z"/>175          </svg>176        </div>177      </div>178    </div>179  </div>180 181  <!-- Waveform / Progress -->182  <div class="progress-wrap">183    <div class="time-text">4:52 / 58:37</div>184    <div class="wave">185      <div class="scrubber"></div>186    </div>187  </div>188 189  <!-- Ad Card -->190  <div class="ad-card">191    <div class="brand-logo">[IMG: Brand]</div>192    <div class="ad-info">193      <div class="ad-title">Garnier Men India</div>194      <div class="ad-sub">Sponsored · shop.loreal.co.in/in/...</div>195    </div>196    <div class="buy-btn">Buy now</div>197    <div class="kebab">⋮</div>198  </div>199 200  <!-- Title + Meta -->201  <div class="title-wrap">202    <div class="video-title">This American Life: The Call</div>203    <div class="meta">204      <span>2K views</span>205      <span>12d ago</span>206      <span class="muted">This American Life</span>207      <span class="more">…more</span>208    </div>209 210    <!-- Channel Row -->211    <div class="channel-row">212      <div class="avatar">[Logo]</div>213      <div>214        <div class="channel-name">This American Life</div>215        <div class="subs">7.21K</div>216      </div>217      <div class="spacer"></div>218      <div class="join-btn">Join</div>219      <div class="icon-btn">220        <svg viewBox="0 0 24 24" width="34" height="34" fill="#ddd">221          <path d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 0 0 2 2zm6-6V9c0-3.07-1.64-5.64-4.5-6.32V2a1.5 1.5 0 1 0-3 0v.68C7.64 3.36 6 5.92 6 9v7l-2 2v1h16v-1l-2-2z"/>222        </svg>223      </div>224      <div class="icon-btn">⋮</div>225    </div>226 227    <!-- Actions -->228    <div class="actions">229      <div class="chip">230        <svg viewBox="0 0 24 24"><path d="M9 21h9a2 2 0 0 0 2-2v-7.5a1.5 1.5 0 0 0-1.5-1.5H14l1-5-1-1-6 7v10zM3 21h4V10H3v11z"/></svg>231        45232      </div>233      <div class="chip">234        <svg viewBox="0 0 24 24"><path d="M15 3H6a2 2 0 0 0-2 2v7.5A1.5 1.5 0 0 0 5.5 14H10l-1 5 1 1 6-7V3zM21 3h-4v11h4V3z"/></svg>235      </div>236      <div class="chip">237        <svg viewBox="0 0 24 24"><path d="M4 12l7-7v4h5v6h-5v4z"/></svg>238        Share239      </div>240      <div class="chip">241        <svg viewBox="0 0 24 24"><path d="M10 17l5-5-5-5v10zM5 19h14v2H5z"/></svg>242        Remix243      </div>244      <div class="chip">245        <svg viewBox="0 0 24 24"><path d="M5 20h14v-2H5v2zm7-18L5.33 9h3.67v6h6V9h3.67L12 2z"/></svg>246        Download247      </div>248    </div>249 250    <!-- Comments -->251    <div class="comments">252      <h3>Comments 7</h3>253      <div class="comment-row">254        <div class="avatar">[U]</div>255        <div class="comment-text">Harm Reduction is Love.</div>256        <div class="chev">⌄</div>257      </div>258    </div>259  </div>260 261  <!-- Big Bottom Ad -->262  <div class="big-ad">263    <h4>बेडशीट्स, ₹149 से शुरू</h4>264    <div class="bed-wrap">265      <div class="bed-img">[IMG: Bedsheet - Pattern Left]</div>266      <div class="bed-img">[IMG: Bedsheet - Pattern Right]</div>267    </div>268  </div>269 270  <!-- Bottom Install bar -->271  <div class="install-bar">272    <div class="muted" style="font-size:38px;">Install</div>273    <div class="install-btn">Install</div>274  </div>275 276  <!-- Floating blue download arrow -->277  <div class="floating-download">278    <svg viewBox="0 0 24 24" width="42" height="42" fill="#fff">279      <path d="M5 20h14v-2H5v2zm7-16v8l3-3 1.4 1.4L12 16.8 7.6 10.4 9 9l3 3V4h0z"/>280    </svg>281  </div>282 283</div>284</body>285</html>