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>YouTube Video UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f0f0f;15    font-family: Arial, Helvetica, sans-serif;16    color: #fff;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0; left: 0; right: 0;23    height: 110px;24    padding: 28px 32px 0 32px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #eaeaea;30    font-size: 36px;31    letter-spacing: 1px;32    z-index: 5;33    background: linear-gradient(rgba(15,15,15,0.65), rgba(15,15,15,0));34  }35  .status-right { display: flex; gap: 20px; align-items: center; }36  .status-icon svg { width: 44px; height: 44px; fill: #eaeaea; opacity: 0.9; }37 38  /* Video area */39  .video-area {40    position: relative;41    width: 1080px;42    height: 620px;43    overflow: hidden;44  }45  .video-placeholder {46    width: 100%;47    height: 100%;48    background: #E0E0E0;49    border: 1px solid #BDBDBD;50    color: #757575;51    display: flex;52    align-items: center;53    justify-content: center;54    font-size: 34px;55    letter-spacing: 0.3px;56  }57  .controls-top {58    position: absolute;59    top: 120px;60    left: 24px;61    right: 24px;62    display: flex;63    align-items: center;64    justify-content: space-between;65    z-index: 3;66  }67  .controls-top .left-group, .controls-top .right-group {68    display: flex; align-items: center; gap: 28px;69  }70  .control-ic svg { width: 56px; height: 56px; fill: #fff; opacity: 0.95; }71  .big-center {72    position: absolute;73    top: 50%; left: 50%;74    transform: translate(-50%,-50%);75    display: flex; gap: 60px; align-items: center;76  }77  .round-btn {78    width: 140px; height: 140px;79    background: rgba(0,0,0,0.35);80    border-radius: 50%;81    display: flex; align-items: center; justify-content: center;82    backdrop-filter: blur(2px);83  }84  .round-btn svg { width: 70px; height: 70px; fill: #fff; }85  .time-row {86    position: absolute;87    bottom: 84px; left: 32px; right: 32px;88    display: flex; align-items: center; gap: 20px;89    color: #e5e5e5;90    font-size: 30px;91    text-shadow: 0 1px 2px rgba(0,0,0,0.6);92  }93  .progress {94    flex: 1;95    height: 8px;96    background: #444;97    border-radius: 8px;98    position: relative;99  }100  .progress .fill {101    position: absolute; left: 0; top: 0; bottom: 0;102    width: 28%;103    background: #ff3b3b;104    border-radius: 8px;105  }106  .progress .knob {107    position: absolute; right: -10px; top: 50%;108    transform: translateY(-50%);109    width: 24px; height: 24px; background: #ff3b3b; border-radius: 50%;110  }111  .full-screen-ic {112    position: absolute; right: 32px; bottom: 24px;113    width: 52px; height: 52px; opacity: 0.9;114  }115  .full-screen-ic svg { width: 52px; height: 52px; fill: #fff; }116 117  /* Content area */118  .content {119    padding: 24px 32px 0 32px;120  }121  .title {122    font-size: 52px;123    font-weight: 700;124    margin: 12px 0 10px 0;125  }126  .meta {127    color: #b8b8b8;128    font-size: 28px;129  }130  .hashtags span { color: #9cc2ff; margin-right: 10px; }131 132  .channel-row {133    margin-top: 26px;134    display: flex; align-items: center; justify-content: space-between;135  }136  .channel-info { display: flex; align-items: center; gap: 22px; }137  .avatar {138    width: 96px; height: 96px; border-radius: 50%;139    background: #E0E0E0; border: 1px solid #BDBDBD;140    display: flex; align-items: center; justify-content: center;141    color: #757575; font-size: 20px;142  }143  .channel-text { display: flex; flex-direction: column; }144  .channel-name { font-size: 36px; font-weight: 600; }145  .sub-count { font-size: 26px; color: #b8b8b8; margin-top: 6px; }146  .subscribe-btn {147    background: #fff; color: #111; border: none;148    border-radius: 40px; padding: 22px 40px; font-size: 32px; font-weight: 700;149  }150 151  .actions {152    margin-top: 28px;153    display: flex; gap: 22px; flex-wrap: wrap;154  }155  .pill {156    background: #1b1b1b;157    border: 1px solid #2a2a2a;158    color: #eee; border-radius: 48px;159    padding: 18px 28px;160    display: flex; align-items: center; gap: 16px;161    font-size: 30px;162  }163  .pill svg { width: 36px; height: 36px; fill: #eee; }164 165  .comments {166    margin-top: 34px;167    background: #1a1a1a;168    border-radius: 28px;169    padding: 24px;170  }171  .comments h3 {172    margin: 0 0 18px 0; font-size: 34px; color: #fff; font-weight: 700;173  }174  .comment-row { display: flex; gap: 18px; align-items: flex-start; }175  .comment-avatar {176    width: 80px; height: 80px; border-radius: 50%;177    background: #E0E0E0; border: 1px solid #BDBDBD;178    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 18px;179    flex-shrink: 0;180  }181  .comment-text { color: #ddd; font-size: 28px; line-height: 1.38; flex: 1; }182  .comment-expand { margin-left: 10px; opacity: 0.8; }183 184  /* Suggested video */185  .suggested {186    margin-top: 26px;187  }188  .thumb {189    position: relative;190    width: 1016px;191    height: 540px;192    background: #E0E0E0;193    border: 1px solid #BDBDBD;194    display: flex; align-items: center; justify-content: center;195    color: #757575; font-size: 42px;196  }197  .duration {198    position: absolute; right: 16px; bottom: 16px;199    background: rgba(0,0,0,0.8);200    padding: 8px 12px;201    border-radius: 8px;202    font-size: 26px;203  }204  .sugg-meta {205    padding: 18px 4px 0 4px;206    display: flex; align-items: flex-start; justify-content: space-between;207  }208  .sugg-left { display: flex; gap: 18px; }209  .sugg-avatar {210    width: 72px; height: 72px; border-radius: 50%;211    background: #E0E0E0; border: 1px solid #BDBDBD;212    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 14px;213    margin-top: 6px;214  }215  .sugg-title { font-size: 36px; font-weight: 700; margin-bottom: 8px; }216  .sugg-sub { font-size: 26px; color: #b8b8b8; }217  .more-btn { width: 48px; height: 48px; opacity: 0.8; margin-top: 8px; }218  .more-btn svg { width: 48px; height: 48px; fill: #b8b8b8; }219 220  /* Bottom handle */221  .home-indicator {222    position: absolute; bottom: 18px; left: 50%;223    transform: translateX(-50%);224    width: 360px; height: 10px; background: #dadada; border-radius: 10px; opacity: 0.85;225  }226</style>227</head>228<body>229<div id="render-target">230  <!-- Status bar -->231  <div class="status-bar">232    <div class="status-left">10:02</div>233    <div class="status-right">234      <div class="status-icon"><svg viewBox="0 0 24 24"><circle cx="4" cy="6" r="2"/><circle cx="10" cy="6" r="2"/><circle cx="16" cy="6" r="2"/><circle cx="22" cy="6" r="2"/></svg></div>235      <div class="status-icon"><svg viewBox="0 0 24 24"><path d="M2 8h20v8H2z" fill="none"/><path d="M3 9h18v6H3z"/></svg></div>236      <div class="status-icon"><svg viewBox="0 0 24 24"><path d="M3 12h14l4 4V4H3z"/></svg></div>237      <div class="status-icon"><svg viewBox="0 0 24 24"><path d="M4 11c4-5 12-5 16 0" fill="none" stroke="currentColor" stroke-width="2"/></svg></div>238      <div class="status-icon"><svg viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2"/><rect x="20" y="10" width="2" height="4"/></svg></div>239    </div>240  </div>241 242  <!-- Video Area -->243  <div class="video-area">244    <div class="video-placeholder">[IMG: London Eye video frame]</div>245 246    <div class="controls-top">247      <div class="left-group">248        <div class="control-ic">249          <svg viewBox="0 0 24 24"><path d="M12 15l-5-5 5-5" fill="none" stroke="white" stroke-width="2"/></svg>250        </div>251      </div>252      <div class="right-group">253        <div class="control-ic">254          <!-- Cast -->255          <svg viewBox="0 0 24 24">256            <path d="M2 8h18v10H9" fill="none" stroke="white" stroke-width="2"/>257            <path d="M3 17a3 3 0 0 0 3 3" fill="none" stroke="white" stroke-width="2"/>258            <path d="M3 13a7 7 0 0 1 7 7" fill="none" stroke="white" stroke-width="2"/>259          </svg>260        </div>261        <div class="control-ic">262          <!-- CC -->263          <svg viewBox="0 0 24 24">264            <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="white" stroke-width="2"/>265            <text x="7" y="16" font-size="9" fill="white" font-family="Arial" font-weight="700">CC</text>266          </svg>267        </div>268        <div class="control-ic">269          <!-- Gear -->270          <svg viewBox="0 0 24 24">271            <path d="M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm8 4l2 1-2 1a8 8 0 0 1-1 2l1 2-2 1-1-2a8 8 0 0 1-2 1l-1 2-2-1 1-2a8 8 0 0 1-2-1l-2 1-1-2 2-1a8 8 0 0 1-1-2l-2-1 1-2 2 1a8 8 0 0 1 1-2l-1-2 2-1 1 2a8 8 0 0 1 2-1l1-2 2 1-1 2a8 8 0 0 1 2 1l2-1 1 2-2 1a8 8 0 0 1 1 2z" fill="white"/>272          </svg>273        </div>274        <div class="control-ic">275          <!-- Close -->276          <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" stroke="white" stroke-width="2"/></svg>277        </div>278      </div>279    </div>280 281    <div class="big-center">282      <div class="round-btn">283        <!-- back 10 -->284        <svg viewBox="0 0 24 24">285          <path d="M11 6l-4 4 4 4" fill="none" stroke="white" stroke-width="2"/>286          <text x="12" y="20" font-size="8" fill="white">10</text>287        </svg>288      </div>289      <div class="round-btn">290        <!-- Pause -->291        <svg viewBox="0 0 24 24"><rect x="6" y="5" width="4" height="14"/><rect x="14" y="5" width="4" height="14"/></svg>292      </div>293      <div class="round-btn">294        <!-- forward 10 -->295