GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Mobile UI - Video Screen</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2160px;10    position: relative;11    overflow: hidden;12    background: #0f0f0f;13    color: #fff;14  }15 16  /* Top status bar */17  .status-bar {18    height: 90px;19    background: #000;20    color: #e0e0e0;21    display: flex;22    align-items: center;23    justify-content: space-between;24    padding: 0 28px;25    font-size: 34px;26    box-sizing: border-box;27  }28  .status-icons { display: flex; gap: 26px; align-items: center; }29  .status-icons svg { width: 32px; height: 32px; fill: #e0e0e0; }30 31  /* Video area */32  .video-area {33    width: 100%;34    height: 620px;35    position: relative;36    background: #181818;37  }38  .frame-placeholder {39    position: absolute;40    left: 0; top: 0; right: 0; bottom: 0;41    display: flex; align-items: center; justify-content: center;42    background: #E0E0E0;43    border: 1px solid #BDBDBD;44    color: #757575;45    font-size: 36px;46  }47  .overlay-controls {48    position: absolute; left: 0; top: 0; right: 0; bottom: 0;49    pointer-events: none;50  }51  .overlay-controls .round {52    width: 100px; height: 100px; border-radius: 50%;53    border: 1px solid rgba(255,255,255,0.25);54    background: rgba(255,255,255,0.08);55    display: flex; align-items: center; justify-content: center;56    position: absolute;57  }58  .overlay-controls svg { width: 52px; height: 52px; fill: #fff; }59  .round.center { left: 50%; top: 50%; transform: translate(-50%, -50%); }60  .round.left { left: 70px; top: 50%; transform: translateY(-50%); }61  .round.right { right: 70px; top: 50%; transform: translateY(-50%); }62  .overlay-top {63    position: absolute; left: 0; right: 0; top: 18px;64    display: flex; justify-content: flex-end; gap: 26px; padding-right: 26px;65  }66  .overlay-top .icon-square {67    width: 72px; height: 72px; border-radius: 14px;68    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25);69    display: flex; align-items: center; justify-content: center;70  }71  .overlay-top svg { width: 40px; height: 40px; fill: #fff; }72 73  /* Time and progress */74  .time-row {75    display: flex; align-items: center; gap: 20px;76    padding: 16px 28px 8px 28px;77    font-size: 34px; color: #e0e0e0;78  }79  .progress {80    height: 8px; margin: 0 28px 16px 28px; background: #2a2a2a; border-radius: 6px; position: relative;81  }82  .progress .fill { width: 78%; height: 100%; background: #ff0000; border-radius: 6px; }83  .progress .knob {84    width: 24px; height: 24px; background: #ff0000; border-radius: 50%;85    position: absolute; top: 50%; left: 78%; transform: translate(-50%, -50%);86    box-shadow: 0 0 0 4px rgba(255,0,0,0.2);87  }88 89  /* Title and meta */90  .content {91    padding: 0 28px;92  }93  .title {94    font-size: 52px; font-weight: 700; line-height: 1.2; margin: 12px 0 10px 0;95  }96  .meta {97    color: #bdbdbd; font-size: 34px; margin-bottom: 24px;98  }99 100  /* Channel row */101  .channel-row {102    display: flex; align-items: center; justify-content: space-between;103    margin-bottom: 24px;104  }105  .channel-left { display: flex; align-items: center; gap: 20px; }106  .avatar {107    width: 92px; height: 92px; border-radius: 50%;108    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;109    display: flex; align-items: center; justify-content: center; font-size: 20px;110  }111  .channel-info { display: flex; flex-direction: column; }112  .channel-name { font-size: 44px; font-weight: 600; }113  .subs { font-size: 30px; color: #bdbdbd; }114 115  .subscribe-btn {116    background: #ffffff; color: #000; font-weight: 700;117    padding: 22px 34px; border-radius: 36px; font-size: 34px; border: none;118  }119 120  /* Action buttons */121  .actions { display: flex; gap: 24px; margin-bottom: 26px; }122  .pill {123    background: #1a1a1a; border: 1px solid #2e2e2e; color: #fff;124    padding: 22px 24px; border-radius: 28px; display: flex; align-items: center; gap: 16px;125    font-size: 32px;126  }127  .pill svg { width: 36px; height: 36px; fill: #fff; }128 129  /* Comments */130  .comments-header { font-size: 40px; font-weight: 700; margin: 10px 0 18px 0; }131  .comment-card {132    background: #121212; border: 1px solid #2e2e2e; border-radius: 26px;133    padding: 24px; display: flex; gap: 20px;134  }135  .comment-text {136    font-size: 34px; color: #e8e8e8; line-height: 1.4;137  }138 139  /* Large image below */140  .large-image {141    width: 100%;142    height: 900px;143    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;144    display: flex; align-items: center; justify-content: center;145    font-size: 40px; margin-top: 24px;146  }147 148  /* Utility icons */149  .icon-play path { d: path("M0 0"); }150</style>151</head>152<body>153<div id="render-target">154 155  <!-- Status bar -->156  <div class="status-bar">157    <div>2:08</div>158    <div class="status-icons">159      <!-- Simple status icons -->160      <svg viewBox="0 0 24 24"><path d="M4 11h16v2H4z"/></svg>161      <svg viewBox="0 0 24 24"><path d="M12 3l8 6-8 6-8-6 8-6zm0 12l8 6H4l8-6z"/></svg>162      <svg viewBox="0 0 24 24"><path d="M13 3a9 9 0 100 18 9 9 0 000-18zm0 4a1 1 0 011 1v5l4 2-.5 1-4.5-2.5V8a1 1 0 011-1z"/></svg>163      <svg viewBox="0 0 24 24"><path d="M7 20h10a3 3 0 003-3V7a3 3 0 00-3-3H7a3 3 0 00-3 3v10a3 3 0 003 3zm0-2a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v10a1 1 0 01-1 1H7z"/></svg>164      <div>100%</div>165    </div>166  </div>167 168  <!-- Video player area -->169  <div class="video-area">170    <div class="frame-placeholder">[IMG: Video frame]</div>171 172    <!-- Overlay controls -->173    <div class="overlay-controls">174      <div class="round left">175        <!-- Replay 10 -->176        <svg viewBox="0 0 24 24"><path d="M12 6V2L7 7l5 5V8a6 6 0 016 6h2a8 8 0 00-8-8zm-1 9h2v-4h-2v4z"/></svg>177      </div>178      <div class="round center">179        <!-- Play icon -->180        <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7-11-7z"/></svg>181      </div>182      <div class="round right">183        <!-- Forward 10 -->184        <svg viewBox="0 0 24 24"><path d="M12 6V2l5 5-5 5V8a6 6 0 00-6 6H4a8 8 0 018-8zm1 9h-2v-4h2v4z"/></svg>185      </div>186 187      <div class="overlay-top">188        <div class="icon-square">189          <!-- CC -->190          <svg viewBox="0 0 24 24"><path d="M3 5h18v14H3V5zm3 4h4v2H6v-2zm8 0h4v2h-4v-2zm-8 4h4v2H6v-2zm8 0h4v2h-4v-2z"/></svg>191        </div>192        <div class="icon-square">193          <!-- Settings gear -->194          <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 110 8 4 4 0 010-8zm9 4l-2 .5a7 7 0 00-.8 2l1.3 1.6-1.4 1.4-1.6-1.3a7 7 0 00-2 .8L14 21h-2l-.5-2a7 7 0 00-2-.8l-1.6 1.3-1.4-1.4 1.3-1.6a7 7 0 00-.8-2L3 12v-2l2-.5a7 7 0 00.8-2L4.5 4.9 5.9 3.5 7.5 4.8a7 7 0 002-.8L10 2h2l.5 2a7 7 0 002 .8l1.6-1.3 1.4 1.4-1.3 1.6a7 7 0 00.8 2L21 10v2z"/></svg>195        </div>196        <div class="icon-square">197          <!-- Close -->198          <svg viewBox="0 0 24 24"><path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/></svg>199        </div>200      </div>201    </div>202  </div>203 204  <!-- Time and progress -->205  <div class="time-row">206    <div>2:47 / 3:22</div>207  </div>208  <div class="progress">209    <div class="fill"></div>210    <div class="knob"></div>211  </div>212 213  <!-- Content -->214  <div class="content">215    <div class="title">Miley Cyrus - Flowers (Official Video)</div>216    <div class="meta">464M views • 4mo ago • #22 global top music video • more</div>217 218    <div class="channel-row">219      <div class="channel-left">220        <div class="avatar">[IMG]</div>221        <div class="channel-info">222          <div class="channel-name">Miley Cyrus</div>223          <div class="subs">18.1M subscribers</div>224        </div>225      </div>226      <button class="subscribe-btn">Subscribe</button>227    </div>228 229    <div class="actions">230      <div class="pill">231        <!-- Like -->232        <svg viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 01-2-2v-7a2 2 0 012-2h4v11zm2-11l3-7h1a2 2 0 012 2v8h4l-5 10H11V10z"/></svg>233        <span>6.7M</span>234      </div>235      <div class="pill">236        <!-- Live chat -->237        <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 4V4z"/></svg>238        <span>Live chat</span>239      </div>240      <div class="pill">241        <!-- Share -->242        <svg viewBox="0 0 24 24"><path d="M18 16a3 3 0 00-2.6 1.5L8.8 14a3 3 0 000-4l6.6-3.5A3 3 0 1014 5a3 3 0 001.2 2.4L8.6 11a3 3 0 100 2l6.6 3.6A3 3 0 1018 16z"/></svg>243        <span>Share</span>244      </div>245      <div class="pill">246        <!-- Remix -->247        <svg viewBox="0 0 24 24"><path d="M4 4h8v4H8v4H4V4zm8 8h8v8h-8v-4h4v-4h-4v-4z"/></svg>248        <span>Remix</span>249      </div>250    </div>251 252    <div class="comments-header">Comments 165K</div>253    <div class="comment-card">254      <div class="avatar">[IMG]</div>255      <div class="comment-text">256        I think she has a special place in our hearts because a lot of us got to watch her grow up. It’s so cool to see…257      </div>258    </div>259 260    <div class="large-image">[IMG: Hotel room with city view]</div>261  </div>262 263</div>264</body>265</html>