GD-ML/AndroidCode
13.4k
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 Detail UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #ffffff;11 }12 /* Status bar */13 .status-bar {14 position: absolute; top: 0; left: 0; width: 100%; height: 84px; color: #fff; background: #000;15 display: flex; align-items: center; justify-content: space-between; padding: 0 36px; box-sizing: border-box;16 font-size: 34px; letter-spacing: 0.2px;17 }18 .status-left { display: flex; gap: 18px; align-items: center; }19 .status-right { display: flex; gap: 24px; align-items: center; }20 .dot { width: 18px; height: 18px; background: #fff; border-radius: 50%; opacity: 0.85; }21 .small-dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.85; }22 /* Video area */23 .video-area {24 position: absolute; top: 84px; left: 0; width: 100%; height: 930px; background: #000;25 }26 .video-actions-top {27 position: absolute; top: 30px; left: 30px; right: 30px; display: flex; justify-content: space-between; align-items: center;28 }29 .icon-btn { width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; }30 .icon-white { fill: none; stroke: #fff; stroke-width: 5; }31 .ellipsis-vertical { display: flex; flex-direction: column; gap: 8px; }32 .ellipsis-vertical span { width: 10px; height: 10px; background: #fff; border-radius: 50%; display: block; }33 .replay {34 position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center;35 }36 .replay svg { width: 110px; height: 110px; }37 .replay label { display: block; margin-top: 16px; font-size: 36px; color: #fff; opacity: 0.95; }38 .timeline {39 position: absolute; bottom: 0; left: 0; width: 100%; height: 160px; color: #fff; padding: 0 30px 18px; box-sizing: border-box;40 }41 .time-row { display: flex; align-items: center; justify-content: space-between; font-size: 32px; opacity: 0.9; margin-bottom: 16px; }42 .progress {43 height: 6px; background: rgba(255,255,255,0.25); position: relative; border-radius: 3px;44 }45 .progress .filled { position: absolute; top: 0; left: 0; height: 6px; width: 78%; background: #3BA1F3; border-radius: 3px; }46 .progress .knob { position: absolute; top: 50%; right: 0; transform: translate(50%,-50%); width: 22px; height: 22px; background: #fff; border-radius: 50%; }47 .fullscreen {48 position: absolute; bottom: 26px; right: 30px; width: 48px; height: 48px;49 }50 /* Content card */51 .content {52 position: absolute; top: 1014px; left: 0; width: 100%; height: 1386px; background: #fff; border-top-left-radius: 24px; border-top-right-radius: 24px;53 box-shadow: 0 -2px 0 rgba(0,0,0,0.04);54 }55 .title {56 font-size: 64px; font-weight: 800; color: #0E1A22; line-height: 1.15; margin: 40px 40px 28px;57 }58 .action-row {59 display: flex; align-items: center; justify-content: space-between; margin: 0 28px;60 }61 .action-left { display: flex; gap: 28px; align-items: flex-start; }62 .action-card {63 width: 130px; height: 130px; border: 1px solid #D7DDE3; border-radius: 22px; display: flex; align-items: center; justify-content: center; background: #fff;64 }65 .count-row { display: flex; gap: 98px; margin: 10px 40px 0; font-size: 28px; color: #3A4652; }66 .menu-dots { margin-right: 20px; }67 .desc {68 margin: 30px 40px; font-size: 34px; color: #2D3A45; line-height: 1.5;69 }70 .desc .more { color: #2A85FF; }71 .divider { height: 1px; background: #E6EBF0; margin: 24px 40px; }72 .channel-row {73 display: flex; align-items: center; justify-content: space-between; margin: 24px 40px;74 }75 .channel-left { display: flex; align-items: center; gap: 24px; }76 .avatar {77 width: 90px; height: 90px; border-radius: 50%; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;78 }79 .channel-name { font-size: 38px; font-weight: 700; color: #14202A; }80 .channel-meta { font-size: 28px; color: #6B7785; margin-top: 6px; }81 .follow-btn {82 padding: 18px 28px; border-radius: 16px; background: #EEF7FF; color: #0F6FDB; border: 1px solid #CFE6FF; font-size: 32px; display: flex; align-items: center; gap: 14px;83 }84 .share-wrap { margin: 30px 40px 8px; }85 .share-btn {86 width: 100%; height: 150px; background: #2F8CFB; color: #fff; border-radius: 28px; display: flex; align-items: center; justify-content: center; gap: 22px; font-size: 42px; font-weight: 700; box-shadow: 0 6px 10px rgba(47,140,251,0.25);87 }88 .section-head {89 display: flex; align-items: center; justify-content: space-between; margin: 38px 40px 12px; color: #2D3A45; font-size: 30px; font-weight: 700;90 }91 .toggle {92 display: flex; align-items: center; gap: 16px; color: #6B7785; font-size: 30px;93 }94 .switch {95 width: 96px; height: 52px; background: #CFE6FF; border-radius: 26px; position: relative;96 }97 .switch .knob {98 width: 44px; height: 44px; background: #2F8CFB; border-radius: 50%; position: absolute; top: 4px; right: 4px;99 box-shadow: 0 2px 6px rgba(0,0,0,0.15);100 }101 .video-list { margin: 0 40px; }102 .video-item {103 display: grid; grid-template-columns: 420px 1fr 48px; align-items: center; gap: 26px; padding: 24px 0; border-bottom: 1px solid #EEF2F6;104 }105 .thumb {106 position: relative; width: 420px; height: 220px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;107 }108 .duration {109 position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.7); color: #fff; padding: 6px 12px; border-radius: 8px; font-size: 24px;110 }111 .vid-info .title { margin: 0; font-size: 36px; font-weight: 700; color: #13202A; }112 .vid-info .meta { margin-top: 8px; font-size: 28px; color: #6B7785; }113 .item-menu { display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; }114 .item-menu span { width: 10px; height: 10px; background: #8FA1B3; border-radius: 50%; display: block; }115 /* Floating actions */116 .floating {117 position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%); width: 520px; height: 130px; background: #fff; border-radius: 80px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);118 display: flex; align-items: center; justify-content: space-evenly; border: 1px solid #E9EEF3;119 }120 .round-btn { width: 110px; height: 110px; border-radius: 55px; background: #F3F7FB; border: 1px solid #D9E3ED; display: flex; align-items: center; justify-content: center; }121 /* Home indicator */122 .home-indicator {123 position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 300px; height: 10px; background: #20252B; border-radius: 6px; opacity: 0.35;124 }125 /* Simple icon styles */126 .icon-dark { fill: none; stroke: #1C2B36; stroke-width: 5; }127 .icon-blue { stroke: #fff; fill: none; stroke-width: 5; }128</style>129</head>130<body>131<div id="render-target">132 <!-- Status bar -->133 <div class="status-bar">134 <div class="status-left">135 <span>10:05</span>136 <div class="dot"></div>137 <div class="dot"></div>138 <div class="dot"></div>139 <span style="font-weight:700;">ovo</span>140 <div class="small-dot"></div>141 </div>142 <div class="status-right">143 <svg width="34" height="34"><path class="icon-white" d="M4 26 L16 10 L28 26"></path></svg>144 <svg width="34" height="34"><rect x="6" y="8" width="22" height="18" rx="3" stroke="#fff" fill="none" stroke-width="4"></rect><path d="M11 16 L17 12 L23 16" stroke="#fff" fill="none" stroke-width="4"></path></svg>145 </div>146 </div>147 148 <!-- Video area -->149 <div class="video-area">150 <div class="video-actions-top">151 <div class="icon-btn">152 <svg width="44" height="44" viewBox="0 0 44 44">153 <path class="icon-white" d="M10 10 L34 34 M34 10 L10 34"></path>154 </svg>155 </div>156 <div class="ellipsis-vertical">157 <span></span><span></span><span></span>158 </div>159 </div>160 161 <div class="replay">162 <svg viewBox="0 0 100 100">163 <path d="M50 20 A30 30 0 1 1 20 50" stroke="#ffffff" stroke-width="6" fill="none"></path>164 <path d="M18 42 L28 24 L34 44 Z" fill="#ffffff"></path>165 </svg>166 <label>Replay</label>167 </div>168 169 <div class="timeline">170 <div class="time-row">171 <span>01:53 / 01:54</span>172 </div>173 <div class="progress">174 <div class="filled"></div>175 <div class="knob"></div>176 </div>177 <div class="fullscreen">178 <svg viewBox="0 0 48 48">179 <path d="M6 18 L6 6 L18 6" stroke="#fff" stroke-width="4" fill="none"></path>180 <path d="M42 30 L42 42 L30 42" stroke="#fff" stroke-width="4" fill="none"></path>181 <path d="M18 42 L6 42 L6 30" stroke="#fff" stroke-width="4" fill="none"></path>182 <path d="M30 6 L42 6 L42 18" stroke="#fff" stroke-width="4" fill="none"></path>183 </svg>184 </div>185 </div>186 </div>187 188 <!-- Content card -->189 <div class="content">190 <div class="title">Soba Summer Gluten-Free Recipe</div>191 192 <div class="action-row">193 <div class="action-left">194 <div>195 <div class="action-card">196 <svg width="54" height="54" viewBox="0 0 54 54">197 <path class="icon-dark" d="M20 16 L40 27 L20 38 Z"></path>198 <rect x="10" y="10" width="34" height="34" rx="10" stroke="#D0D8E0" fill="none" stroke-width="3"></rect>199 </svg>200 </div>201 </div>202 <div>203 <div class="action-card">204 <svg width="54" height="54" viewBox="0 0 54 54">205 <path class="icon-dark" d="M27 40 C12 30 9 24 13 18 C16 14 22 14 27 19 C32 14 38 14 41 18 C45 24 42 30 27 40 Z"></path>206 </svg>207 </div>208 </div>209 <div>210 <div class="action-card">211 <svg width="54" height="54" viewBox="0 0 54 54">212 <path class="icon-dark" d="M12 14 H42 V34 H24 L18 40 V34 H12 Z"></path>213 </svg>214 </div>215 </div>216 </div>217 <div class="menu-dots ellipsis-vertical">218 <span></span><span></span><span></span>219 </div>220 </div>221 222 <div class="count-row">223 <span>108</span>224 <span>1</span>225 <span>0</span>226 </div>227 228 <div class="desc">229 korKitchen does a weekly gluten-free recipe for you to enjoy. It's nutrish & delish! You can see m<span class="more">... more</span>230 </div>231 232 <div class="divider"></div>233 234 <div class="channel-row">235 <div class="channel-left">236 <div class="avatar">[IMG: Channel Avatar]</div>237 <div>238 <div class="channel-name">Maja Kermath</div>239 <div class="channel-meta">51 videos</div>240 </div>241 </div>242 <div class="follow-btn">243 <svg width="30" height="30" viewBox="0 0 30 30">244 <path d="M6 16 L12 22 L24 8" stroke="#0F6FDB" stroke-width="4" fill="none"></path>245 </svg>246 <span>Following</span>247 </div>248 </div>249 250 <div class="divider"></div>251 252 <div class="share-wrap">253 <div class="share-btn">254 <svg width="44" height="44" viewBox="0 0 44 44">255 <path class="icon-blue" d="M22 8 L22 28"></path>256 <path class="icon-blue" d="M14 16 L22 8 L30 16"></path>257 <rect x="10" y="24" width="24" height="12" rx="3" stroke="#fff" fill="none" stroke-width="4"></rect>258 </svg>259 <span>Share</span>260 </div>261 </div>262 263 <div class="section-head">264 <span>MORE VIDEOS</span>265 <div class="toggle">266 <span>Autoplay</span>267 <div class="switch"><div class="knob"></div></div>268 </div>269 </div>270 271 <div class="video-list">272 <div class="video-item">273 <div class="thumb">274 [IMG: Video Thumbnail - silhouetted person near window]275 <div class="duration">02:55</div>276 </div>277 <div class="vid-info">278 <div class="title">On-the-Go Flow #1</div>279 <div class="meta">Maja Kermath</div>280 <div class="meta">763 views • 10 years ago</div>281 </div>282 <div class="item-menu">283 <span></span><span></span><span></span>284 </div>285 </div>286 287 <div class="video-item">288 <div class="thumb">289 [IMG: Video Thumbnail - group fitness posing]290 <div class="duration">01:36</div>291 </div>292 <div class="vid-info">293 <div class="title">Kor180 Beauties</div>294 <div class="meta">Maja Kermath</div>295 <div class="meta">views • years ago</div>296 </div>297 <div class="item-menu">298 <span></span><span></span><span></span>299 </div>300 </div>301 </div>302 </div>303 304 <!-- Floating quick actions -->305 <div class="floating">306 <div class="round-btn">307 <svg width="42" height="42" viewBox="0 0 42 42">308 <path d="M16 12 L32 21 L16 30 Z" stroke="#1C2B36" fill="none" stroke-width="4"></path>309 </svg>310 </div>311 <div class="round-btn">312 <svg width="42" height="42" viewBox="0 0 42 42">313 <path d="M10 12 H32 V26 H22 L18 30 V26 H10 Z" stroke="#1C2B36" fill="none" stroke-width="4"></path>314 </svg>315 </div>316 </div>317 318 <!-- Home indicator -->319 <div class="home-indicator"></div>320</div>321</body>322</html>