GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Video Detail Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #ffffff;13    color: #111;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    background: #000;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 28px;28    box-sizing: border-box;29    font-weight: 600;30    letter-spacing: 0.5px;31  }32  .status-left { display: flex; align-items: center; gap: 20px; }33  .status-icons { display: flex; align-items: center; gap: 18px; margin-left: 18px; }34  .dot {35    width: 22px; height: 22px; background: #fff; border-radius: 50%;36    opacity: .9;37  }38  .status-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }39  .status-icon {40    width: 34px; height: 34px; opacity: .95;41  }42 43  /* Video hero */44  .video-hero {45    position: absolute;46    top: 120px;47    left: 0;48    width: 1080px;49    height: 780px;50    background: #E0E0E0;51    border-bottom: 1px solid #d0d0d0;52    display: flex;53    align-items: center;54    justify-content: center;55    color: #555;56    font-size: 34px;57    text-align: center;58  }59  .watermark {60    position: absolute;61    bottom: 22px;62    right: 26px;63    background: rgba(0,0,0,0.6);64    color: #fff;65    padding: 8px 16px;66    border-radius: 10px;67    font-size: 26px;68  }69 70  /* Content area */71  .content {72    position: absolute;73    top: 900px;74    left: 0;75    width: 100%;76    padding: 34px 40px 0 40px;77    box-sizing: border-box;78  }79  .title {80    font-size: 56px;81    font-weight: 800;82    line-height: 1.08;83    margin-bottom: 34px;84  }85 86  .actions {87    display: flex;88    align-items: center;89    gap: 46px;90    margin: 10px 0 14px 0;91  }92  .action {93    display: flex;94    flex-direction: column;95    align-items: center;96    gap: 16px;97  }98  .action svg {99    width: 84px; height: 84px; stroke: #111; fill: none; stroke-width: 3.5;100  }101  .count {102    font-size: 34px; color: #444;103  }104 105  .description {106    margin-top: 30px;107    font-size: 38px;108    color: #333;109    line-height: 1.35;110  }111 112  /* Author row */113  .author {114    margin-top: 40px;115    display: flex;116    align-items: center;117    gap: 26px;118  }119  .avatar {120    width: 110px; height: 110px; background: #E0E0E0; border: 1px solid #BDBDBD;121    border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #777; font-size: 22px;122  }123  .author-info { display: flex; flex-direction: column; }124  .author-name { font-size: 44px; font-weight: 700; }125  .author-sub { font-size: 32px; color: #666; margin-top: 8px; }126  .follow-btn {127    margin-left: auto;128    display: inline-flex;129    align-items: center;130    gap: 14px;131    background: #fff;132    border: 2px solid #E0E0E0;133    padding: 18px 28px;134    border-radius: 20px;135    font-size: 38px;136    font-weight: 700;137  }138  .follow-btn svg { width: 36px; height: 36px; }139 140  /* Share button */141  .share-wrap {142    margin-top: 36px;143  }144  .share-btn {145    width: 100%;146    height: 150px;147    background: #3da3ff;148    color: #fff;149    border-radius: 24px;150    display: flex;151    align-items: center;152    justify-content: center;153    gap: 22px;154    font-size: 48px;155    font-weight: 800;156    box-shadow: 0 6px 0 #2b86d8;157  }158  .share-btn svg { width: 54px; height: 54px; fill: #fff; }159 160  /* More videos header */161  .section-header {162    margin-top: 44px;163    display: flex;164    align-items: center;165    font-size: 40px;166    font-weight: 800;167  }168  .section-header .spacer { flex: 1; }169  .autoplay {170    display: flex;171    align-items: center;172    gap: 22px;173    color: #444;174    font-weight: 700;175  }176  .switch {177    width: 120px; height: 64px; background: #cfeaff; border-radius: 38px; position: relative;178    border: 2px solid #a0d0ff;179  }180  .switch::after {181    content: "";182    position: absolute; top: 6px; right: 6px;183    width: 50px; height: 50px; background: #3da3ff; border-radius: 50%;184  }185 186  /* Video item */187  .video-item {188    margin-top: 24px;189    display: flex;190    align-items: flex-start;191    padding: 18px 10px;192    border-radius: 18px;193  }194  .thumb {195    width: 320px; height: 200px; background: #E0E0E0; border: 1px solid #BDBDBD;196    display: flex; align-items: center; justify-content: center; color: #666; font-size: 26px;197    border-radius: 12px;198  }199  .vinfo {200    flex: 1;201    margin-left: 24px;202  }203  .vtitle {204    font-size: 40px;205    font-weight: 800;206    line-height: 1.18;207    color: #111;208  }209  .vmeta {210    margin-top: 16px;211    font-size: 32px;212    color: #666;213  }214  .more-vert {215    width: 54px; height: 54px; margin-left: 14px; opacity: .6;216  }217 218  /* Bottom floating control */219  .floating {220    position: absolute;221    left: 50%;222    transform: translateX(-50%);223    bottom: 140px;224    width: 640px;225    height: 140px;226    background: #f6f6f6;227    border: 1px solid #e4e4e4;228    border-radius: 90px;229    display: flex;230    align-items: center;231    justify-content: space-around;232    box-shadow: 0 10px 24px rgba(0,0,0,0.15);233  }234  .float-btn {235    width: 140px; height: 100px; border-radius: 30px;236    background: #ffffff; border: 1px solid #e0e0e0;237    display: flex; align-items: center; justify-content: center;238  }239  .float-btn svg { width: 60px; height: 60px; }240</style>241</head>242<body>243<div id="render-target">244 245  <!-- Status bar -->246  <div class="status-bar">247    <div class="status-left">248      <div style="font-size:42px;">12:54</div>249      <div class="status-icons">250        <div class="dot"></div>251        <div class="dot"></div>252        <div class="dot"></div>253        <div class="dot"></div>254      </div>255    </div>256    <div class="status-right">257      <!-- WiFi -->258      <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">259        <path d="M2 8c5-4 15-4 20 0"></path>260        <path d="M5 12c3-3 11-3 14 0"></path>261        <path d="M8 16c2-2 6-2 8 0"></path>262        <circle cx="12" cy="20" r="2" fill="#fff"></circle>263      </svg>264      <!-- Signal -->265      <svg class="status-icon" viewBox="0 0 24 24" fill="#fff">266        <rect x="2" y="14" width="4" height="8"></rect>267        <rect x="8" y="10" width="4" height="12" opacity=".8"></rect>268        <rect x="14" y="6" width="4" height="16" opacity=".6"></rect>269        <rect x="20" y="2" width="2" height="20" opacity=".4"></rect>270      </svg>271      <!-- Lock/Notif -->272      <svg class="status-icon" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="2">273        <rect x="5" y="10" width="14" height="10" rx="2"></rect>274        <path d="M7 10V7a5 5 0 0 1 10 0v3"></path>275      </svg>276    </div>277  </div>278 279  <!-- Video hero -->280  <div class="video-hero">281    <div>[IMG: Video frame - instructor in studio backdrop]</div>282    <div class="watermark">PTAcoaching.com</div>283  </div>284 285  <!-- Content -->286  <div class="content">287    <div class="title">288      Stock Market Tips Train Yourself To Success in Stock Market289    </div>290 291    <div class="actions">292      <div class="action">293        <!-- Play icon -->294        <svg viewBox="0 0 24 24">295          <circle cx="12" cy="12" r="10"></circle>296          <polygon points="10,8 17,12 10,16" fill="#111" stroke="none"></polygon>297        </svg>298        <div class="count">9</div>299      </div>300      <div class="action">301        <!-- Heart outline -->302        <svg viewBox="0 0 24 24">303          <path d="M12 21s-8-5.5-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-8 11-8 11z"></path>304        </svg>305        <div class="count">0</div>306      </div>307      <div class="action">308        <!-- Comment bubble -->309        <svg viewBox="0 0 24 24">310          <path d="M21 15a4 4 0 0 1-4 4H8l-5 3V6a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v9z"></path>311        </svg>312        <div class="count">0</div>313      </div>314      <div style="margin-left:auto; display:flex; align-items:center;">315        <!-- Menu dots -->316        <svg viewBox="0 0 24 24" width="56" height="56" fill="#444" style="opacity:.8;">317          <circle cx="12" cy="5" r="2.2"></circle>318          <circle cx="12" cy="12" r="2.2"></circle>319          <circle cx="12" cy="19" r="2.2"></circle>320        </svg>321      </div>322    </div>323 324    <div class="description">325      Train yourself to success in stock market. Get all important stock/share market tips from...326    </div>327 328    <div class="author">329      <div class="avatar">Avatar</div>330      <div class="author-info">331        <div class="author-name">Yatharth Dass</div>332        <div class="author-sub">2 videos</div>333      </div>334      <div class="follow-btn">335        <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="3">336          <path d="M12 5v14M5 12h14"></path>337        </svg>338        Follow339      </div>340    </div>341 342    <div class="share-wrap">343      <div class="share-btn">344        <svg viewBox="0 0 24 24">345          <path d="M12 3v12"></path>346          <path d="M7 8l5-5 5 5" fill="none"></path>347          <rect x="5" y="13" width="14" height="8" rx="2" fill="none"></rect>348        </svg>349        Share350      </div>351    </div>352 353    <div class="section-header">354      <div>MORE VIDEOS</div>355      <div class="spacer"></div>356      <div class="autoplay">357        Autoplay358        <div class="switch"></div>359      </div>360    </div>361 362    <div class="video-item">363      <div class="thumb">[IMG: Video thumbnail with whiteboard]</div>364      <div class="vinfo">365        <div class="vtitle">Stock Market Tips (Hindi) How to Maximize Profit in Stock Ma...</div>366        <div class="vmeta">Yatharth Dass</div>367        <div class="vmeta">24 views • 7 years ago</div>368      </div>369      <svg class="more-vert" viewBox="0 0 24 24" fill="#444">370        <circle cx="12" cy="5" r="2"></circle>371        <circle cx="12" cy="12" r="2"></circle>372        <circle cx="12" cy="19" r="2"></circle>373      </svg>374    </div>375  </div>376 377  <!-- Bottom floating controls -->378  <div class="floating">379    <div class="float-btn">380      <!-- small player icon -->381      <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.2">382        <rect x="3" y="3" width="18" height="18" rx="3"></rect>383        <polygon points="10,8 16,12 10,16" fill="#111" stroke="none"></polygon>384      </svg>385    </div>386    <div class="float-btn">387      <!-- chat icon -->388      <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.2">389        <path d="M21 15a4 4 0 0 1-4 4H8l-5 3V6a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v9z"></path>390      </svg>391    </div>392  </div>393 394</div>395</body>396</html>