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 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: #121212;15    color: #FFFFFF;16    font-family: Roboto, Arial, Helvetica, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0; left: 0;23    width: 100%;24    height: 110px;25    background: #1a1f1e;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 32px;30    color: #e9e9e9;31    font-size: 40px;32    letter-spacing: 0.5px;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 26px;38    opacity: 0.95;39  }40  .status-icon svg { width: 44px; height: 44px; fill: none; stroke: #ffffff; stroke-width: 3; }41 42  /* Toolbar */43  .toolbar {44    position: absolute;45    top: 110px; left: 0;46    width: 100%;47    height: 160px;48    background: #1a1f1e;49    display: flex;50    align-items: center;51    padding: 0 32px;52    border-bottom: 1px solid rgba(255,255,255,0.06);53  }54  .back-btn svg { width: 62px; height: 62px; }55  .title {56    font-size: 64px;57    margin-left: 20px;58    color: #eaeaea;59  }60  .toolbar-actions {61    margin-left: auto;62    display: flex;63    align-items: center;64    gap: 36px;65  }66  .toolbar-actions svg { width: 56px; height: 56px; fill: none; stroke: #ffffff; stroke-width: 3.2; }67 68  /* Video area */69  .video-zone {70    position: absolute;71    top: 270px;72    left: 0;73    width: 100%;74    height: 1730px;75    background: #0a0a0a;76  }77  .video-frame {78    width: 1080px;79    height: 608px; /* 16:9 letterboxed frame for 1080px width */80    margin: 330px auto 0;81    background: #E0E0E0;82    border: 1px solid #BDBDBD;83    color: #757575;84    display: flex;85    align-items: center;86    justify-content: center;87    font-size: 46px;88    position: relative;89  }90 91  /* Center overlay controls */92  .center-controls {93    position: absolute;94    left: 50%;95    top: 50%;96    transform: translate(-50%, -50%);97    height: 180px;98    width: 720px;99  }100  .control {101    position: absolute;102    top: 0;103    width: 132px; height: 132px;104    border-radius: 50%;105    border: 4px solid #ffffff;106    display: flex;107    align-items: center;108    justify-content: center;109    color: #ffffff;110  }111  .rewind { left: 80px; }112  .forward { right: 80px; }113  .playpause {114    position: absolute;115    left: 50%;116    transform: translateX(-50%);117    width: 180px; height: 180px;118    background: #ffffff;119    border-radius: 50%;120    box-shadow: 0 6px 18px rgba(0,0,0,0.35);121    display: flex; align-items: center; justify-content: center;122  }123  .pause-bars {124    width: 70px; height: 100px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px;125  }126  .pause-bars span {127    display: block; width: 100%; height: 100%; background: #4b4b4b; border-radius: 6px;128  }129  .control svg { width: 70px; height: 70px; stroke: #ffffff; stroke-width: 6; fill: none; }130  .control .n {131    position: absolute;132    bottom: -8px;133    width: 36px; height: 36px;134    background: rgba(0,0,0,0.6);135    border-radius: 50%;136    font-size: 28px; line-height: 36px; text-align: center;137    border: 2px solid #fff;138  }139 140  /* Bottom controls */141  .bottom-controls {142    position: absolute;143    left: 0; right: 0;144    bottom: 190px;145    height: 230px;146    background: #0f0f0f;147    padding: 18px 28px 0;148  }149  .progress {150    position: relative;151    height: 70px;152    display: flex;153    align-items: center;154    padding: 0 12px;155  }156  .track {157    position: relative;158    width: 100%;159    height: 6px;160    background: #4b4b4b;161    border-radius: 4px;162  }163  .played {164    position: absolute;165    left: 0; top: 0; height: 100%;166    width: 5%;167    background: #9bd7d5;168    border-radius: 4px;169  }170  .knob {171    position: absolute;172    left: 5%;173    top: 50%;174    transform: translate(-50%, -50%);175    width: 22px; height: 22px;176    background: #9bd7d5; border-radius: 50%;177  }178  .meta-row {179    display: flex; align-items: center; justify-content: space-between;180    padding: 18px 8px 0;181  }182  .time {183    font-size: 42px; color: #e9e9e9; letter-spacing: 1px;184  }185  .time .dot { opacity: 0.7; padding: 0 12px; }186  .bc-actions {187    display: flex; align-items: center; gap: 38px;188  }189  .bc-actions .cc {190    display: inline-flex; align-items: center; justify-content: center;191    width: 62px; height: 46px; border: 3px solid #dcdcdc; color: #dcdcdc;192    font-weight: 700; border-radius: 6px; font-size: 26px;193  }194  .bc-actions svg { width: 62px; height: 62px; stroke: #eaeaea; stroke-width: 3.2; fill: none; }195 196  /* Gesture pill */197  .gesture-pill {198    position: absolute;199    left: 50%;200    transform: translateX(-50%);201    bottom: 54px;202    width: 320px; height: 12px;203    background: #e6e6e6;204    border-radius: 12px;205    opacity: 0.8;206  }207</style>208</head>209<body>210<div id="render-target">211 212  <!-- Status bar -->213  <div class="status-bar">214    <div class="status-left">3:37</div>215    <div class="status-right">216      <div class="status-icon" title="Download"><svg viewBox="0 0 48 48"><path d="M24 5v22m0 0l8-8m-8 8l-8-8M8 41h32"/></svg></div>217      <div class="status-icon" title="Alert"><svg viewBox="0 0 48 48"><path d="M24 7l16 28H8L24 7z"/><circle cx="24" cy="33" r="2.5" fill="#fff"/><path d="M24 19v9" /></svg></div>218      <div class="status-icon" title="Check1"><svg viewBox="0 0 48 48"><path d="M10 26l7 7 21-21"/></svg></div>219      <div class="status-icon" title="Check2"><svg viewBox="0 0 48 48"><path d="M10 26l7 7 21-21"/></svg></div>220      <div class="status-icon" title="Dot"><svg viewBox="0 0 48 48"><circle cx="24" cy="24" r="3.5" fill="#ffffff"/></svg></div>221      <div class="status-icon" title="WiFi"><svg viewBox="0 0 48 48"><path d="M6 18c10-8 26-8 36 0M12 24c7-6 17-6 24 0M18 30c4-3 8-3 12 0"/><circle cx="24" cy="36" r="3" fill="#fff"/></svg></div>222      <div class="status-icon" title="Battery"><svg viewBox="0 0 60 48"><rect x="4" y="12" width="42" height="24" rx="3" ry="3" /><rect x="48" y="18" width="6" height="12" rx="2" ry="2" fill="#fff" stroke="none"/></svg></div>223    </div>224  </div>225 226  <!-- Toolbar -->227  <div class="toolbar">228    <div class="back-btn" aria-label="Back">229      <svg viewBox="0 0 48 48">230        <path d="M30 8L14 24l16 16" stroke="#ffffff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>231      </svg>232    </div>233    <div class="title">beach.mp4</div>234    <div class="toolbar-actions">235      <svg viewBox="0 0 48 48" aria-label="Comments">236        <path d="M8 10h32v22H18l-10 8v-8z" />237      </svg>238      <svg viewBox="0 0 48 48" aria-label="More">239        <circle cx="24" cy="10" r="3.2" fill="#ffffff" />240        <circle cx="24" cy="24" r="3.2" fill="#ffffff" />241        <circle cx="24" cy="38" r="3.2" fill="#ffffff" />242      </svg>243    </div>244  </div>245 246  <!-- Video Region -->247  <div class="video-zone">248    <div class="video-frame">[IMG: Video Frame - Beach Aerial]249      <!-- Center overlay controls -->250      <div class="center-controls">251        <div class="control rewind">252          <svg viewBox="0 0 48 48" aria-label="Rewind 5">253            <path d="M34 34a12 12 0 1 1-2-18" />254            <path d="M33 16l-9 0 0-9" />255          </svg>256          <div class="n">5</div>257        </div>258 259        <div class="playpause" aria-label="Pause">260          <div class="pause-bars"><span></span><span></span></div>261        </div>262 263        <div class="control forward">264          <svg viewBox="0 0 48 48" aria-label="Forward 15">265            <path d="M14 34a12 12 0 1 0 2-18" />266            <path d="M15 16l9 0 0-9" />267          </svg>268          <div class="n">15</div>269        </div>270      </div>271    </div>272 273    <!-- Bottom controls -->274    <div class="bottom-controls">275      <div class="progress">276        <div class="track">277          <div class="played"></div>278          <div class="knob"></div>279        </div>280      </div>281      <div class="meta-row">282        <div class="time">00:01 <span class="dot">·</span> 00:21</div>283        <div class="bc-actions">284          <div class="cc">CC</div>285          <svg viewBox="0 0 48 48" aria-label="Settings">286            <path d="M20 6h8l1 5 5 3-3 5 3 5-5 3-1 5h-8l-1-5-5-3 3-5-3-5 5-3z" />287            <circle cx="24" cy="24" r="5" />288          </svg>289          <svg viewBox="0 0 48 48" aria-label="Fullscreen">290            <path d="M18 8H8v10M30 8h10v10M40 30v10H30M8 30v10h10" />291          </svg>292        </div>293      </div>294    </div>295  </div>296 297  <!-- Gesture bar -->298  <div class="gesture-pill"></div>299 300</div>301</body>302</html>