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 Share UI - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #121212; color: #fff;12  }13  /* Status bar */14  .status-bar {15    position: absolute; top: 0; left: 0; right: 0; height: 100px;16    background: #000; display: flex; align-items: center; padding: 0 32px; box-sizing: border-box;17    font-size: 34px; color: #EAEAEA;18  }19  .status-time { font-weight: 600; }20  .status-icons { margin-left: auto; display: flex; gap: 28px; align-items: center; }21  .status-icons svg { width: 36px; height: 36px; fill: #EAEAEA; opacity: 0.9; }22  /* Video area */23  .video-wrap {24    position: absolute; top: 100px; left: 0; right: 0; height: 640px; background: #000;25  }26  .video-placeholder {27    position: absolute; inset: 0; background: #E0E0E0; border: 1px solid #BDBDBD;28    display: flex; align-items: center; justify-content: center; color: #555; font-size: 36px; letter-spacing: 0.5px;29  }30  .video-overlay {31    position: absolute; inset: 0; pointer-events: none;32  }33  .video-controls-top {34    position: absolute; top: 18px; right: 24px; display: flex; gap: 34px; align-items: center;35  }36  .video-controls-top svg { width: 48px; height: 48px; fill: rgba(255,255,255,0.9); }37  .play-large {38    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);39    width: 120px; height: 120px; background: rgba(0,0,0,0.45); border-radius: 60px; display: flex; align-items: center; justify-content: center;40  }41  .play-large svg { width: 72px; height: 72px; fill: #fff; }42  .video-bottom-bar {43    position: absolute; left: 0; right: 0; bottom: 58px; padding: 0 32px; box-sizing: border-box; color: #EAEAEA;44    display: flex; align-items: center; gap: 24px;45  }46  .progress-track {47    position: relative; height: 6px; background: rgba(255,255,255,0.25); border-radius: 3px; flex: 1;48  }49  .progress-fill { position: absolute; top: 0; left: 0; height: 6px; width: 28%; background: #ff3b30; border-radius: 3px; }50  .progress-thumb { position: absolute; top: 50%; left: 28%; transform: translate(-50%, -50%); width: 24px; height: 24px; background: #ff3b30; border-radius: 50%; }51  .timecode { font-size: 30px; color: #D0D0D0; white-space: nowrap; }52  /* Video meta section */53  .meta {54    position: absolute; top: 740px; left: 0; right: 0; padding: 24px 28px 0 28px; box-sizing: border-box;55    background: linear-gradient(180deg, rgba(18,18,18,0.92) 0%, #121212 40%, #121212 100%);56  }57  .title {58    font-size: 48px; line-height: 1.2; font-weight: 800; letter-spacing: 0.2px; margin: 8px 6px 12px 6px;59  }60  .subline {61    font-size: 30px; color: #AFAFAF; margin: 0 6px 24px 6px;62  }63  .channel-row {64    display: flex; align-items: center; gap: 18px; padding: 10px 6px 18px 6px;65  }66  .avatar {67    width: 88px; height: 88px; border-radius: 50%; background: #E0E0E0; border: 1px solid #BDBDBD;68    display: flex; align-items: center; justify-content: center; color: #666; font-size: 18px; text-align: center; padding: 8px; box-sizing: border-box;69  }70  .channel-info { display: flex; flex-direction: column; gap: 6px; }71  .channel-name { font-size: 36px; font-weight: 700; }72  .channel-subs { font-size: 28px; color: #AFAFAF; }73  .channel-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }74  .icon-btn {75    width: 96px; height: 96px; border-radius: 48px; background: #1E1E1E; border: 1px solid #2C2C2C;76    display: flex; align-items: center; justify-content: center;77  }78  .icon-btn svg { width: 44px; height: 44px; fill: #EAEAEA; }79  .chips {80    display: flex; gap: 22px; padding: 10px 0 28px 0; flex-wrap: wrap;81  }82  .chip {83    display: flex; align-items: center; gap: 14px; background: #1E1E1E; border: 1px solid #2C2C2C; color: #EAEAEA;84    padding: 18px 26px; border-radius: 32px; font-size: 32px;85  }86  .chip svg { width: 36px; height: 36px; fill: #EAEAEA; }87  /* Comments card */88  .comments {89    margin: 8px 16px 24px 16px; padding: 22px; background: #191919; border: 1px solid #2A2A2A; border-radius: 24px;90  }91  .comments .heading { font-size: 32px; margin-bottom: 12px; color: #EAEAEA; }92  .comments .text { font-size: 30px; color: #CFCFCF; line-height: 1.35; }93  /* Share bottom sheet */94  .sheet {95    position: absolute; left: 0; right: 0; bottom: 72px; height: 640px;96    background: #222; border-top-left-radius: 32px; border-top-right-radius: 32px; box-shadow: 0 -6px 24px rgba(0,0,0,0.6);97    padding: 18px 24px 20px 24px; box-sizing: border-box; color: #fff;98  }99  .grabber { width: 156px; height: 10px; background: #6C6C6C; border-radius: 6px; margin: 8px auto 10px auto; opacity: 0.8; }100  .sheet h2 { margin: 10px 8px 18px 8px; font-size: 42px; font-weight: 700; }101  .share-row {102    display: flex; gap: 28px; padding: 8px 4px 10px 8px; align-items: center;103  }104  .app {105    width: 160px; display: flex; flex-direction: column; align-items: center; gap: 16px; color: #EAEAEA; font-size: 26px; text-align: center;106  }107  .app .circle {108    width: 112px; height: 112px; border-radius: 56px; display: flex; align-items: center; justify-content: center;109    border: 1px solid #2E2E2E; background: #2A2A2A;110  }111  .circle.gmail { background: #E5533D; }112  .circle.messages { background: #3AA0FF; }113  .circle.nearby { background: #3949AB; }114  .circle.meet { background: #1FAA59; }115  .circle.more { background: #3C3C3C; }116  .circle svg { width: 54px; height: 54px; fill: #fff; }117  .copy-link {118    margin-top: 22px; padding: 18px 18px; background: #1F1F1F; border: 1px solid #2C2C2C; border-radius: 16px;119    display: flex; align-items: center; gap: 18px; font-size: 34px;120  }121  .copy-link svg { width: 40px; height: 40px; fill: #EAEAEA; }122  /* Gesture handle */123  .gesture {124    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); width: 320px; height: 10px; background: #D9D9D9; border-radius: 8px; opacity: 0.95;125  }126</style>127</head>128<body>129<div id="render-target">130  <!-- Status Bar -->131  <div class="status-bar">132    <div class="status-time">7:28</div>133    <div class="status-icons">134      <!-- Notifications dot -->135      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg>136      <!-- Battery -->137      <svg viewBox="0 0 24 24"><path d="M16 7h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-1v1H8v-1H7a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1V6h8v1zM7 8v8h10V8H7z"/></svg>138      <!-- Location/navigation -->139      <svg viewBox="0 0 24 24"><path d="M12 2l4 9-4 2-4 9 0-11 4-9z"/></svg>140      <!-- Search -->141      <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm11 18-5-5"/></svg>142      <!-- WiFi -->143      <svg viewBox="0 0 24 24"><path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-6-5a10 10 0 0 1 12 0l1.5-2A12.5 12.5 0 0 0 4.5 13L6 15zm-3-4a16 16 0 0 1 18 0l1.5-2A18.5 18.5 0 0 0 1.5 9L3 11z"/></svg>144    </div>145  </div>146 147  <!-- Video Area -->148  <div class="video-wrap">149    <div class="video-placeholder">[IMG: Video Frame – Workbench with Tool Storage]</div>150    <div class="video-overlay">151      <div class="video-controls-top">152        <!-- Closed captions -->153        <svg viewBox="0 0 24 24"><path d="M3 5h18v14H3V5zm3 4v6h4v-2H8v-2h2V9H6zm8 0v6h4v-2h-2v-2h2V9h-4z"/></svg>154        <!-- Settings -->155        <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm10 4-2-1 0-2 2-1-1-3-2 1-2-1-1-2H8l-1 2-2 1-2-1-1 3 2 1 0 2-2 1 1 3 2-1 2 1 1 2h8l1-2 2-1 2 1 1-3z"/></svg>156        <!-- Close -->157        <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg>158      </div>159      <div class="play-large">160        <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>161      </div>162      <div class="video-bottom-bar">163        <div class="progress-track">164          <div class="progress-fill"></div>165          <div class="progress-thumb"></div>166        </div>167        <div class="timecode">2:06 / 16:24</div>168      </div>169    </div>170  </div>171 172  <!-- Metadata -->173  <div class="meta">174    <div class="title">How to make A Workbench | DIY WOODWORKING</div>175    <div class="subline">18 lakh views  ·  3 yr ago  ·  …more</div>176 177    <div class="channel-row">178      <div class="avatar">[IMG: Channel Avatar]</div>179      <div class="channel-info">180        <div class="channel-name">DIY Creators</div>181        <div class="channel-subs">31.9 lakh</div>182      </div>183      <div class="channel-actions">184        <div class="icon-btn" title="Bell">185          <svg viewBox="0 0 24 24"><path d="M12 22a2.5 2.5 0 0 0 2.5-2.5h-5A2.5 2.5 0 0 0 12 22zm6-6V11a6 6 0 1 0-12 0v5L4 18v2h16v-2l-2-2z"/></svg>186        </div>187        <div class="icon-btn" title="Menu">188          <svg viewBox="0 0 24 24"><path d="M6 12a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>189        </div>190      </div>191    </div>192 193    <div class="chips">194      <div class="chip">195        <svg viewBox="0 0 24 24"><path d="M2 12h6l2-3 3 8 2-4h7"/></svg>196        60K197      </div>198      <div class="chip">199        <svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 1 0-6 6h1v5l6-6h-4a5 5 0 1 1 3-8"/></svg>200        Share201      </div>202      <div class="chip">203        <svg viewBox="0 0 24 24"><path d="M8 3v6h6M16 13v8h-8"/></svg>204        Remix205      </div>206      <div class="chip">207        <svg viewBox="0 0 24 24"><path d="M12 3v12M5 10l7-7 7 7M5 17h14v4H5z"/></svg>208        Download209      </div>210    </div>211 212    <div class="comments">213      <div class="heading">Comments 1.9K</div>214      <div class="text">Visual for "where I'm at" is very helpful. Haven't seen that very often in videos.</div>215    </div>216  </div>217 218  <!-- Share Bottom Sheet -->219  <div class="sheet">220    <div class="grabber"></div>221    <h2>Share</h2>222    <div class="share-row">223      <div class="app">224        <div class="circle gmail">225          <!-- Mail icon -->226          <svg viewBox="0 0 24 24"><path d="M2 6v12h20V6l-10 6L2 6z"/></svg>227        </div>228        <div>Gmail</div>229      </div>230      <div class="app">231        <div class="circle messages">232          <!-- Message icon -->233          <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3V4z"/></svg>234        </div>235        <div>Messages</div>236      </div>237      <div class="app">238        <div class="circle nearby">239          <!-- Nearby icon -->240          <svg viewBox="0 0 24 24"><path d="M12 2l7 7-7 7-7-7 7-7zm0 3.5 3.5 3.5L12 12 8.5 9 12 5.5z"/></svg>241        </div>242        <div>Nearby Share</div>243      </div>244      <div class="app">245        <div class="circle meet">246          <!-- Camera icon -->247          <svg viewBox="0 0 24 24"><path d="M3 5h10v14H3V5zm11 4 7-4v14l-7-4V9z"/></svg>248        </div>249        <div>Meet live sharing</div>250      </div>251      <div class="app">252        <div class="circle more">253          <!-- More icon -->254          <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/></svg>255        </div>256        <div>More</div>257      </div>258    </div>259    <div class="copy-link">260      <svg viewBox="0 0 24 24"><path d="M9 18H6a3 3 0 0 1 0-6h3m6-6h3a3 3 0 0 1 0 6h-3M8 12h8"/></svg>261      <div>Copy link</div>262    </div>263  </div>264 265  <!-- Gesture handle -->266  <div class="gesture"></div>267</div>268</body>269</html>