GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Video Page UI Mock</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: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 box-sizing: border-box;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: #000000;24 color: #ffffff;25 display: flex;26 align-items: center;27 padding: 0 24px;28 box-sizing: border-box;29 }30 .status-left { font-size: 38px; font-weight: 600; }31 .status-right {32 margin-left: auto;33 display: flex;34 align-items: center;35 gap: 28px;36 }37 .status-dot { width: 22px; height: 22px; background: #ffffff; border-radius: 50%; opacity: 0.9; }38 .status-icon {39 width: 34px; height: 34px; border-radius: 8px; background: #fff; opacity: 0.95;40 }41 42 /* Video area */43 .video-wrapper {44 position: absolute;45 top: 120px;46 left: 0;47 width: 1080px;48 height: 760px;49 background: #e9e9ea;50 display: flex;51 align-items: center;52 justify-content: center;53 color: #1f1f1f;54 }55 .video-banner {56 width: 920px;57 height: 520px;58 background: #E0E0E0;59 border: 1px solid #BDBDBD;60 display: flex;61 align-items: center;62 justify-content: center;63 color: #555;64 font-size: 34px;65 text-align: center;66 padding: 18px;67 }68 .overlay {69 position: absolute;70 inset: 0;71 pointer-events: none;72 }73 .ov-btn {74 position: absolute;75 width: 88px; height: 88px;76 border-radius: 44px;77 background: rgba(255,255,255,0.25);78 border: 2px solid rgba(255,255,255,0.7);79 display: flex;80 align-items: center; justify-content: center;81 color: #fff;82 }83 .btn-text { font-size: 44px; font-weight: 700; }84 .close-btn { left: 30px; top: 30px; }85 .more-btn { right: 30px; top: 30px; }86 .center-play {87 left: 496px; top: 330px; width: 88px; height: 88px; background: rgba(0,0,0,0.35);88 }89 .skip-left { left: 150px; top: 290px; width: 110px; height: 110px; }90 .skip-right { right: 150px; top: 290px; width: 110px; height: 110px; }91 .skip-label {92 position: absolute; top: -22px; left: 50%; transform: translateX(-50%);93 font-size: 36px; color: #fff; font-weight: 700;94 }95 .time-indicator {96 position: absolute; bottom: 120px; left: 30px;97 color: #fff; font-size: 34px; font-weight: 600;98 }99 .progress {100 position: absolute; bottom: 90px; left: 30px; right: 30px;101 height: 8px; background: rgba(255,255,255,0.4); border-radius: 4px;102 }103 .progress .bar {104 width: 180px; height: 8px; background: #ffffff; border-radius: 4px;105 }106 .progress .dot {107 position: absolute; left: 180px; top: -10px;108 width: 28px; height: 28px; background: #fff; border-radius: 50%;109 box-shadow: 0 0 0 3px rgba(255,255,255,0.6);110 }111 .expand-btn { position: absolute; bottom: 120px; right: 30px; width: 70px; height: 70px; border-radius: 8px; border: 2px solid rgba(255,255,255,0.8); }112 113 /* Content section */114 .content {115 position: absolute;116 top: 880px;117 left: 0;118 width: 1080px;119 padding: 30px 30px 0 30px;120 box-sizing: border-box;121 background: #fff;122 }123 .title {124 font-size: 64px;125 font-weight: 800;126 color: #0d1b2e;127 line-height: 1.1;128 letter-spacing: 0.5px;129 }130 .actions {131 margin-top: 34px;132 display: flex; gap: 40px; align-items: center;133 }134 .action {135 width: 120px; height: 120px; border: 2px solid #e0e0e0; border-radius: 22px;136 display: flex; align-items: center; justify-content: center; color: #333;137 }138 .count-row { display: flex; gap: 122px; margin-top: 14px; }139 .count { font-size: 36px; color: #1f1f1f; }140 .description {141 margin-top: 34px; font-size: 40px; color: #333; line-height: 1.4;142 }143 .more-link { color: #0077cc; }144 145 /* Author */146 .author {147 margin-top: 36px;148 display: flex; align-items: center; gap: 24px;149 }150 .avatar {151 width: 92px; height: 92px; border-radius: 46px; background: #E0E0E0; border: 1px solid #BDBDBD;152 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px;153 }154 .author-info .name { font-size: 46px; font-weight: 700; color: #222; }155 .author-info .meta { font-size: 34px; color: #666; }156 .follow-btn {157 margin-left: auto; background: #f1f5ff; border: 2px solid #d7e2ff; color: #0a3; /* adjust */158 border-radius: 18px; padding: 22px 30px; font-size: 40px; display: flex; align-items: center; gap: 16px; color: #0c1f4f;159 }160 .follow-btn .plus {161 width: 46px; height: 46px; border-radius: 12px; background: #ffffff; border: 2px solid #aac3ff;162 display: flex; align-items: center; justify-content: center; color: #2c5cff; font-weight: 800;163 }164 165 .share-btn {166 margin-top: 30px;167 width: 100%;168 background: #2e86ff;169 color: #fff;170 border-radius: 26px;171 height: 120px;172 display: flex; align-items: center; justify-content: center;173 font-size: 46px; font-weight: 700;174 gap: 22px;175 }176 .share-icon {177 width: 56px; height: 56px; background: rgba(255,255,255,0.25); border-radius: 10px;178 display: inline-flex; align-items: center; justify-content: center;179 }180 181 .autoplay {182 margin-top: 40px;183 padding-bottom: 10px;184 display: flex; align-items: center; justify-content: flex-end; gap: 24px;185 font-size: 42px; color: #333;186 }187 .toggle {188 width: 130px; height: 64px; background: #b9dbff; border-radius: 34px; padding: 8px; box-sizing: border-box;189 position: relative;190 }191 .toggle .knob {192 position: absolute; right: 8px; top: 8px; width: 48px; height: 48px; border-radius: 50%; background: #2e86ff;193 }194 195 /* More videos */196 .section-title { margin-top: 24px; font-size: 42px; font-weight: 800; color: #222; letter-spacing: 1px; }197 .video-item {198 margin-top: 24px;199 display: flex; align-items: center;200 padding: 10px 0;201 }202 .thumb {203 width: 300px; height: 180px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;204 display: flex; align-items: center; justify-content: center; font-size: 28px; text-align: center;205 border-radius: 12px;206 }207 .vi-right { margin-left: 30px; flex: 1; }208 .vi-title { font-size: 44px; font-weight: 700; color: #0d1b2e; line-height: 1.2; }209 .vi-meta { font-size: 34px; color: #666; margin-top: 10px; }210 .item-more {211 width: 60px; height: 60px; border-radius: 30px; border: 2px solid #d9d9d9; margin-left: 16px;212 }213 214 /* Floating control bar */215 .floating-bar {216 position: absolute;217 bottom: 150px;218 left: 50%;219 transform: translateX(-50%);220 width: 700px; height: 140px; border-radius: 70px;221 background: #f2f4f7; box-shadow: 0 8px 24px rgba(0,0,0,0.12);222 display: flex; align-items: center; justify-content: space-around;223 }224 .fb-btn {225 width: 140px; height: 100px; border-radius: 50px; background: #fff; border: 2px solid #e3e7ee;226 display: flex; align-items: center; justify-content: center;227 }228 229 /* SVG helpers */230 .icon {231 width: 48px; height: 48px;232 }233 .small-icon { width: 40px; height: 40px; }234</style>235</head>236<body>237<div id="render-target">238 239 <!-- Status Bar -->240 <div class="status-bar">241 <div class="status-left">12:53</div>242 <div class="status-right">243 <div class="status-dot"></div>244 <div class="status-dot"></div>245 <div class="status-dot"></div>246 <div class="status-dot"></div>247 <div class="status-dot"></div>248 <div class="status-icon"></div>249 <div class="status-icon"></div>250 </div>251 </div>252 253 <!-- Video Section -->254 <div class="video-wrapper">255 <div class="video-banner">[IMG: Training banner - "Professional Traders Academy" and stock market title]</div>256 257 <div class="overlay">258 <div class="ov-btn close-btn">259 <svg class="icon" viewBox="0 0 24 24">260 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>261 </svg>262 </div>263 <div class="ov-btn more-btn">264 <svg class="icon" viewBox="0 0 24 24">265 <circle cx="12" cy="5" r="2" fill="#fff"/>266 <circle cx="12" cy="12" r="2" fill="#fff"/>267 <circle cx="12" cy="19" r="2" fill="#fff"/>268 </svg>269 </div>270 271 <div class="ov-btn center-play">272 <svg class="icon" viewBox="0 0 24 24">273 <rect x="6" y="4" width="4" height="16" fill="#fff"></rect>274 <rect x="14" y="4" width="4" height="16" fill="#fff"></rect>275 </svg>276 </div>277 278 <div class="ov-btn skip-left">279 <div class="skip-label">10</div>280 <svg class="icon" viewBox="0 0 24 24">281 <path d="M14 6 L8 12 L14 18" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>282 <path d="M10 6 L4 12 L10 18" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>283 </svg>284 </div>285 286 <div class="ov-btn skip-right">287 <div class="skip-label">10</div>288 <svg class="icon" viewBox="0 0 24 24">289 <path d="M10 6 L16 12 L10 18" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>290 <path d="M14 6 L20 12 L14 18" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>291 </svg>292 </div>293 294 <div class="time-indicator">00:00 / 01:36</div>295 <div class="progress">296 <div class="bar"></div>297 <div class="dot"></div>298 </div>299 <div class="expand-btn"></div>300 </div>301 </div>302 303 <!-- Content Section -->304 <div class="content">305 <div class="title">Stock Market Tips Train Yourself To Success in Stock Market</div>306 307 <div class="actions">308 <div class="action">309 <svg class="icon" viewBox="0 0 24 24">310 <polygon points="8,5 19,12 8,19" fill="#333"></polygon>311 </svg>312 </div>313 <div class="action">314 <svg class="icon" viewBox="0 0 24 24">315 <path d="M12 21s-6.5-4.4-8.5-8C1.5 10 3 7 6 7c2 0 3.3 1.1 4 2 0.7-0.9 2-2 4-2 3 0 4.5 3 2.5 6-2 3.6-8.5 8-8.5 8z" fill="#333"/>316 </svg>317 </div>318 <div class="action">319 <svg class="icon" viewBox="0 0 24 24">320 <path d="M4 5h16v12H7l-3 3V5z" fill="#333"/>321 </svg>322 </div>323 </div>324 <div class="count-row">325 <div class="count">9</div>326 <div class="count">0</div>327 <div class="count">0</div>328 </div>329 330 <div class="description">331 Train yourself to success in stock market. Get all important stock/share market tips from <span class="more-link">more</span>332 </div>333 334 <div class="author">335 <div class="avatar">[Avatar]</div>336 <div class="author-info">337 <div class="name">Yatharth Dass</div>338 <div class="meta">2 videos</div>339 </div>340 <div class="follow-btn">341 <div class="plus">+</div>342 Follow343 </div>344 </div>345 346 <div class="share-btn">347 <div class="share-icon">348 <svg class="small-icon" viewBox="0 0 24 24">349 <path d="M18 8a3 3 0 1 0-2.8-3.9L8.9 8.5a3 3 0 0 0 0 6.9l6.3 4.4A3 3 0 1 0 17 18l-6.2-4.3a3 3 0 0 0 0-3.4l6.2-4.3A3 3 0 0 0 18 8z" fill="#fff"/>350 </svg>351 </div>352 Share353 </div>354 355 <div class="autoplay">356 Autoplay357 <div class="toggle"><div class="knob"></div></div>358 </div>359 360 <div class="section-title">MORE VIDEOS</div>361 <div class="video-item">362 <div class="thumb">[IMG: Whiteboard lesson on maximizing profit]</div>363 <div class="vi-right">364 <div class="vi-title">Stock Market Tips (Hindi) How to Maximize Profit in Stock Ma...</div>365 <div class="vi-meta">Yatharth Dass • 24 views • 7 years ago</div>366 </div>367 <div class="item-more"></div>368 </div>369 </div>370 371 <!-- Floating controls -->372 <div class="floating-bar">373 <div class="fb-btn">374 <svg class="icon" viewBox="0 0 24 24">375 <rect x="8" y="6" width="3" height="12" fill="#2e86ff"></rect>376 <rect x="13" y="6" width="3" height="12" fill="#2e86ff"></rect>377 </svg>378 </div>379 <div class="fb-btn">380 <svg class="icon" viewBox="0 0 24 24">381 <path d="M4 5h16v12H7l-3 3V5z" fill="#2e86ff"/>382 </svg>383 </div>384 </div>385 386</div>387</body>388</html>