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 Player - beach.mp4</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #151C1A;15    color: #E7ECEA;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 100px;25    background: #1B2321;26    display: flex;27    align-items: center;28    padding: 0 28px;29    box-sizing: border-box;30    font-size: 38px;31    color: #D7DEDC;32  }33  .status-right {34    margin-left: auto;35    display: flex;36    align-items: center;37    gap: 24px;38  }39  .icon { display: inline-flex; }40 41  /* App bar */42  .app-bar {43    position: absolute;44    top: 100px;45    left: 0;46    width: 1080px;47    height: 160px;48    background: #202A28;49    display: flex;50    align-items: center;51    padding: 0 28px;52    box-sizing: border-box;53  }54  .app-title {55    font-size: 72px;56    margin-left: 22px;57    letter-spacing: 0.5px;58    color: #E8EEEC;59  }60  .app-actions {61    margin-left: auto;62    display: flex;63    align-items: center;64    gap: 36px;65  }66 67  /* Video area */68  .video-area {69    position: absolute;70    top: 260px; /* status(100) + app(160) */71    left: 0;72    width: 1080px;73    height: 1790px; /* leaves room for gesture pill */74    background: #0A0A0A;75  }76 77  .video-frame {78    position: absolute;79    top: 440px; /* center-ish letterboxed */80    left: 0;81    width: 1080px;82    height: 620px;83    background: #E0E0E0;84    border: 1px solid #BDBDBD;85    display: flex;86    justify-content: center;87    align-items: center;88    color: #757575;89    font-size: 46px;90  }91 92  /* Center controls */93  .overlay-controls {94    position: absolute;95    top: 700px;96    left: 0;97    width: 1080px;98    display: flex;99    justify-content: center;100    align-items: center;101    gap: 140px;102    pointer-events: none;103  }104 105  .play-btn {106    width: 160px;107    height: 160px;108    background: #FFFFFF;109    border-radius: 50%;110    display: flex;111    justify-content: center;112    align-items: center;113  }114  .skip {115    width: 140px;116    height: 140px;117  }118 119  /* Progress and controls at bottom */120  .progress-wrap {121    position: absolute;122    left: 0;123    bottom: 210px;124    width: 1080px;125    padding: 0 26px;126    box-sizing: border-box;127  }128  .progress-line {129    position: relative;130    width: 100%;131    height: 6px;132    background: rgba(255,255,255,0.12);133    border-radius: 4px;134    overflow: visible;135  }136  .progress-fill {137    position: absolute;138    left: 0;139    top: 0;140    height: 6px;141    width: calc(100% - 34px); /* almost complete */142    background: #8ED6D3;143    border-radius: 4px 0 0 4px;144  }145  .progress-dot {146    position: absolute;147    right: -8px;148    top: -10px;149    width: 28px;150    height: 28px;151    background: #8ED6D3;152    border-radius: 50%;153  }154  .bottom-row {155    margin-top: 26px;156    display: flex;157    align-items: center;158    font-size: 44px;159    color: #D8DEDC;160  }161  .bottom-row .spacer { flex: 1; }162  .control-icon {163    width: 64px;164    height: 64px;165    margin-left: 46px;166    opacity: 0.9;167  }168  .bullet {169    margin: 0 16px;170    opacity: 0.6;171  }172 173  /* Gesture pill */174  .gesture {175    position: absolute;176    bottom: 40px;177    left: 50%;178    transform: translateX(-50%);179    width: 300px;180    height: 14px;181    background: #E5E5E5;182    border-radius: 8px;183    opacity: 0.95;184  }185</style>186</head>187<body>188<div id="render-target">189 190  <!-- Status Bar -->191  <div class="status-bar">192    <div>3:39</div>193    <div class="status-right">194      <!-- simple status glyphs -->195      <svg class="icon" width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#DADADA" stroke-width="2"><path d="M21 6v12a2 2 0 0 1-2 2h-3"></path><path d="M3 18v-6a2 2 0 0 1 2-2h3"></path><path d="M9 18v-3a2 2 0 0 1 2-2h3"></path><path d="M15 18v-9a2 2 0 0 1 2-2h2"></path></svg>196      <svg class="icon" width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#DADADA" stroke-width="2"><rect x="3" y="7" width="18" height="10" rx="2"></rect><rect x="19" y="9" width="2" height="6" fill="#DADADA" stroke="none"></rect></svg>197    </div>198  </div>199 200  <!-- App Bar -->201  <div class="app-bar">202    <!-- Back Arrow -->203    <svg class="icon" width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#E7ECEA" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">204      <path d="M15 4L7 12l8 8"></path>205    </svg>206    <div class="app-title">beach.mp4</div>207    <div class="app-actions">208      <!-- Comment/bubble icon -->209      <svg class="icon" width="70" height="70" viewBox="0 0 24 24" fill="none" stroke="#E7ECEA" stroke-width="2">210        <rect x="3" y="4" width="18" height="14" rx="2"></rect>211        <path d="M8 18l-3 3v-3"></path>212        <path d="M7 8h10M7 11h10"></path>213      </svg>214      <!-- Menu (vertical dots) -->215      <svg class="icon" width="60" height="60" viewBox="0 0 24 24" fill="#E7ECEA">216        <circle cx="12" cy="5" r="2"></circle>217        <circle cx="12" cy="12" r="2"></circle>218        <circle cx="12" cy="19" r="2"></circle>219      </svg>220    </div>221  </div>222 223  <!-- Video Area -->224  <div class="video-area">225    <div class="video-frame">[IMG: Beach video frame]</div>226 227    <!-- Overlay Controls -->228    <div class="overlay-controls">229      <!-- Skip back 5 -->230      <svg class="skip" viewBox="0 0 64 64">231        <circle cx="32" cy="32" r="26" fill="none" stroke="rgba(255,255,255,0.9)" stroke-width="4" stroke-dasharray="60 120"></circle>232        <path d="M18 20 L12 26 L19 26" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>233        <text x="32" y="40" text-anchor="middle" font-size="20" fill="#FFFFFF" font-family="Arial">5</text>234      </svg>235 236      <!-- Play Button -->237      <div class="play-btn">238        <svg width="90" height="90" viewBox="0 0 100 100">239          <polygon points="38,28 74,50 38,72" fill="#1E2725"></polygon>240        </svg>241      </div>242 243      <!-- Skip forward 15 -->244      <svg class="skip" viewBox="0 0 64 64">245        <circle cx="32" cy="32" r="26" fill="none" stroke="rgba(255,255,255,0.9)" stroke-width="4" stroke-dasharray="60 120" transform="scale(-1,1) translate(-64,0)"></circle>246        <path d="M46 20 L52 26 L45 26" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>247        <text x="32" y="40" text-anchor="middle" font-size="20" fill="#FFFFFF" font-family="Arial">15</text>248      </svg>249    </div>250 251    <!-- Bottom progress and controls -->252    <div class="progress-wrap">253      <div class="progress-line">254        <div class="progress-fill"></div>255        <div class="progress-dot"></div>256      </div>257      <div class="bottom-row">258        <div>00:21 <span class="bullet">·</span> 00:21</div>259        <div class="spacer"></div>260        <!-- CC -->261        <svg class="control-icon" viewBox="0 0 24 24" fill="none" stroke="#C8CFCD" stroke-width="2">262          <rect x="3" y="6" width="18" height="12" rx="2"></rect>263          <path d="M8 12c0-1 .6-2 2-2h1M8 12c0 1 .6 2 2 2h1"></path>264          <path d="M13 12c0-1 .6-2 2-2h1M13 12c0 1 .6 2 2 2h1"></path>265        </svg>266        <!-- Settings gear -->267        <svg class="control-icon" viewBox="0 0 24 24" fill="none" stroke="#C8CFCD" stroke-width="2">268          <circle cx="12" cy="12" r="3"></circle>269          <path d="M19.4 15a1 1 0 0 0 .2-1l-1-1.7a7 7 0 0 0 0-2.6l1-1.7a1 1 0 0 0-.2-1l-1.5-1.5a1 1 0 0 0-1-.2l-1.7 1a7 7 0 0 0-2.6 0l-1.7-1a1 1 0 0 0-1 .2L6.1 5a1 1 0 0 0-.2 1l1 1.7a7 7 0 0 0 0 2.6l-1 1.7a1 1 0 0 0 .2 1l1.5 1.5a1 1 0 0 0 1 .2l1.7-1a7 7 0 0 0 2.6 0l1.7 1a1 1 0 0 0 1-.2z"></path>270        </svg>271        <!-- Fullscreen -->272        <svg class="control-icon" viewBox="0 0 24 24" fill="none" stroke="#C8CFCD" stroke-width="2">273          <path d="M9 3H3v6M15 3h6v6M9 21H3v-6M21 15v6h-6"></path>274        </svg>275      </div>276    </div>277  </div>278 279  <!-- Gesture pill -->280  <div class="gesture"></div>281 282</div>283</body>284</html>