GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>YouTube Shorts 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: #0f0f0f;13 color: #fff;14 }15 16 /* Top overlay bar */17 .top-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 120px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 padding: 0 28px;27 box-sizing: border-box;28 }29 .top-left, .top-right {30 display: flex;31 align-items: center;32 gap: 36px;33 }34 .top-icon {35 width: 48px;36 height: 48px;37 opacity: 0.95;38 }39 .top-icon svg { width: 100%; height: 100%; fill: #ffffff; }40 41 /* Video area */42 .video {43 position: absolute;44 top: 120px;45 left: 0;46 right: 0;47 bottom: 220px; /* leave space for bottom nav */48 }49 .video .image {50 position: absolute;51 left: 0;52 top: 0;53 width: 1080px;54 height: 2060px;55 background: #E0E0E0;56 border: 1px solid #BDBDBD;57 display: flex;58 justify-content: center;59 align-items: center;60 color: #424242;61 font-size: 34px;62 text-align: center;63 }64 /* Pause bars */65 .pause {66 position: absolute;67 top: 50%;68 left: 50%;69 width: 90px;70 height: 90px;71 transform: translate(-50%, -50%);72 display: flex;73 gap: 18px;74 align-items: center;75 justify-content: center;76 }77 .pause div {78 width: 26px;79 height: 70px;80 background: #ffffff;81 border-radius: 6px;82 box-shadow: 0 0 4px rgba(0,0,0,0.4);83 }84 85 /* Right side actions */86 .actions {87 position: absolute;88 right: 32px;89 top: 520px;90 display: flex;91 flex-direction: column;92 gap: 70px;93 }94 .action {95 display: flex;96 align-items: center;97 gap: 18px;98 }99 .action .btn {100 width: 92px;101 height: 92px;102 border-radius: 24px;103 background: rgba(255,255,255,0.08);104 border: 1px solid rgba(255,255,255,0.18);105 display: flex;106 align-items: center;107 justify-content: center;108 font-size: 52px;109 }110 .action .label {111 font-size: 36px;112 color: #f5f5f5;113 text-shadow: 0 1px 0 rgba(0,0,0,0.4);114 }115 .count {116 font-size: 34px;117 color: #e0e0e0;118 margin-left: 16px;119 }120 121 /* Channel info and hashtags */122 .info {123 position: absolute;124 left: 28px;125 bottom: 268px;126 right: 28px;127 color: #fff;128 }129 .channel-row {130 display: flex;131 align-items: center;132 gap: 22px;133 margin-bottom: 18px;134 }135 .avatar {136 width: 92px;137 height: 92px;138 border-radius: 50%;139 background: #E0E0E0;140 border: 1px solid #BDBDBD;141 display: flex;142 align-items: center;143 justify-content: center;144 color: #616161;145 font-size: 22px;146 }147 .handle {148 font-size: 44px;149 font-weight: 600;150 }151 .subscribe {152 margin-left: auto;153 background: #e53935;154 color: #fff;155 padding: 18px 30px;156 border-radius: 12px;157 font-size: 38px;158 font-weight: 700;159 }160 .tags {161 font-size: 42px;162 color: #dddddd;163 }164 165 /* Progress bar above nav */166 .progress {167 position: absolute;168 bottom: 240px;169 left: 50%;170 transform: translateX(-50%);171 width: 520px;172 height: 16px;173 background: rgba(255,255,255,0.2);174 border-radius: 12px;175 overflow: hidden;176 }177 .progress .fill {178 width: 60%;179 height: 100%;180 background: #ffffff;181 }182 183 /* Bottom navigation */184 .bottom-nav {185 position: absolute;186 bottom: 0;187 left: 0;188 width: 1080px;189 height: 220px;190 background: #111111;191 border-top: 1px solid rgba(255,255,255,0.06);192 display: flex;193 align-items: center;194 justify-content: space-around;195 }196 .nav-item {197 display: flex;198 flex-direction: column;199 align-items: center;200 gap: 16px;201 color: #f7f7f7;202 }203 .nav-icon {204 width: 86px;205 height: 86px;206 border-radius: 20px;207 background: rgba(255,255,255,0.08);208 border: 1px solid rgba(255,255,255,0.18);209 display: flex;210 align-items: center;211 justify-content: center;212 }213 .nav-icon svg { width: 56px; height: 56px; fill: #ffffff; }214 .nav-label {215 font-size: 34px;216 color: #f0f0f0;217 }218 .plus {219 width: 120px;220 height: 120px;221 border-radius: 50%;222 background: #1f1f1f;223 border: 3px solid #ffffff;224 display: flex;225 align-items: center;226 justify-content: center;227 }228 .red-dot {229 position: absolute;230 top: -6px;231 right: -6px;232 width: 18px;233 height: 18px;234 background: #e53935;235 border-radius: 50%;236 }237</style>238</head>239<body>240<div id="render-target">241 242 <!-- Top overlay bar -->243 <div class="top-bar">244 <div class="top-left">245 <div class="top-icon">246 <svg viewBox="0 0 24 24">247 <path d="M15.5 4l-9 8 9 8v-4.5L9.5 12 15.5 8.5V4z"/>248 </svg>249 </div>250 </div>251 <div class="top-right">252 <div class="top-icon">253 <svg viewBox="0 0 24 24">254 <circle cx="10" cy="10" r="6" stroke="white" stroke-width="2" fill="none"/>255 <line x1="15" y1="15" x2="22" y2="22" stroke="white" stroke-width="2"/>256 </svg>257 </div>258 <div class="top-icon">259 <svg viewBox="0 0 24 24">260 <rect x="4" y="5" width="16" height="12" rx="2" fill="#fff"/>261 <circle cx="12" cy="11" r="2" fill="#0f0f0f"/>262 </svg>263 </div>264 <div class="top-icon">265 <svg viewBox="0 0 24 24">266 <circle cx="12" cy="5" r="2"/>267 <circle cx="12" cy="12" r="2"/>268 <circle cx="12" cy="19" r="2"/>269 </svg>270 </div>271 </div>272 </div>273 274 <!-- Main video area -->275 <div class="video">276 <div class="image">[IMG: Mountain bike flip in desert]</div>277 278 <!-- Pause icon -->279 <div class="pause">280 <div></div><div></div>281 </div>282 283 <!-- Right action buttons -->284 <div class="actions">285 <div class="action">286 <div class="btn">👍</div>287 <div class="label">Like</div>288 </div>289 290 <div class="action">291 <div class="btn">👎</div>292 <div class="label">Dislike</div>293 </div>294 295 <div class="action">296 <div class="btn">💬</div>297 <div class="label">Comments</div>298 <div class="count">794</div>299 </div>300 301 <div class="action">302 <div class="btn">↗</div>303 <div class="label">Share</div>304 </div>305 306 <div class="action">307 <div class="btn">🔁</div>308 <div class="label">Remix</div>309 </div>310 </div>311 312 <!-- Channel info -->313 <div class="info">314 <div class="channel-row">315 <div class="avatar">[IMG]</div>316 <div class="handle">@BradonSweeney</div>317 <div class="subscribe">Subscribe</div>318 </div>319 <div class="tags">Mtb #shorts #mtb #bike #fyp</div>320 </div>321 322 <!-- Progress bar -->323 <div class="progress"><div class="fill"></div></div>324 </div>325 326 <!-- Bottom navigation -->327 <div class="bottom-nav">328 <div class="nav-item">329 <div class="nav-icon">330 <svg viewBox="0 0 24 24">331 <path d="M3 12l9-8 9 8v9h-6v-6H9v6H3z"/>332 </svg>333 </div>334 <div class="nav-label">Home</div>335 </div>336 337 <div class="nav-item">338 <div class="nav-icon">339 <svg viewBox="0 0 24 24">340 <rect x="6" y="4" width="12" height="16" rx="2"/>341 <rect x="8" y="8" width="8" height="8" fill="#0f0f0f"/>342 </svg>343 </div>344 <div class="nav-label">Shorts</div>345 </div>346 347 <div class="nav-item">348 <div class="plus">349 <svg viewBox="0 0 24 24">350 <rect x="10" y="4" width="4" height="16" fill="#fff"/>351 <rect x="4" y="10" width="16" height="4" fill="#fff"/>352 </svg>353 </div>354 </div>355 356 <div class="nav-item" style="position: relative;">357 <div class="nav-icon" style="position: relative;">358 <svg viewBox="0 0 24 24">359 <path d="M4 5h16v4H4zM4 11h16v4H4zM4 17h16v2H4z"/>360 </svg>361 <span class="red-dot"></span>362 </div>363 <div class="nav-label">Subscriptions</div>364 </div>365 366 <div class="nav-item">367 <div class="nav-icon">368 <svg viewBox="0 0 24 24">369 <rect x="5" y="6" width="14" height="12" rx="2"/>370 <rect x="9" y="3" width="6" height="3"/>371 </svg>372 </div>373 <div class="nav-label">Library</div>374 </div>375 </div>376 377</div>378</body>379</html>