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>Mobile Video Player Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #0d0d0d; color: #fff;12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; width: 100%; height: 110px;17 background: #16231d; color: #eaeaea; display: flex; align-items: center; justify-content: space-between;18 padding: 0 40px; box-sizing: border-box; font-weight: 500; letter-spacing: 0.5px;19 }20 .status-left { font-size: 36px; }21 .status-right { display: flex; gap: 26px; align-items: center; }22 .status-icon svg { width: 40px; height: 40px; fill: #eaeaea; opacity: 0.9; }23 24 /* Video area */25 .video-area {26 position: absolute; top: 110px; left: 0; width: 100%; height: 740px; background: #000;27 }28 .video-frame {29 width: 100%; height: 100%;30 background: #E0E0E0; border-top: 1px solid #2b2b2b; border-bottom: 1px solid #2b2b2b;31 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 38px;32 }33 34 /* Overlay controls */35 .overlay {36 position: absolute; inset: 0; pointer-events: none;37 }38 .overlay-top {39 position: absolute; top: 24px; left: 24px; right: 24px; display: flex; justify-content: space-between; align-items: center;40 }41 .overlay-top .left, .overlay-top .right { display: flex; gap: 28px; align-items: center; }42 .overlay-icon {43 width: 64px; height: 64px; background: rgba(0,0,0,0.35); border-radius: 8px; display: flex; align-items: center; justify-content: center;44 pointer-events: none;45 }46 .overlay-icon svg { width: 36px; height: 36px; fill: #fff; }47 48 .center-controls {49 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);50 display: flex; align-items: center; gap: 40px;51 }52 .circle-btn {53 width: 140px; height: 140px; border-radius: 70px; background: rgba(30,30,30,0.5);54 display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(0,0,0,0.35);55 }56 .circle-btn.small { width: 120px; height: 120px; border-radius: 60px; }57 .circle-btn svg { width: 64px; height: 64px; fill: #fff; }58 59 .bottom-info {60 position: absolute; left: 32px; bottom: 130px; font-size: 36px; color: #eaeaea;61 text-shadow: 0 2px 6px rgba(0,0,0,0.5);62 }63 .progress-bar {64 position: absolute; left: 0; right: 0; bottom: 62px; height: 18px;65 display: flex; align-items: center;66 }67 .track {68 height: 6px; background: rgba(255,255,255,0.2);69 width: calc(100% - 40px); margin: 0 20px; border-radius: 3px; position: relative;70 }71 .progress {72 position: absolute; left: 0; top: 0; height: 6px; width: 260px; background: #ff0000; border-radius: 3px;73 }74 .knob {75 position: absolute; left: 250px; top: -6px; width: 18px; height: 18px; background: #ff3333; border-radius: 9px; box-shadow: 0 2px 6px rgba(0,0,0,0.4);76 }77 78 /* Queue section header */79 .sheet-header {80 position: absolute; top: 850px; left: 0; width: 100%; height: 170px; background: #111;81 padding: 28px 36px; box-sizing: border-box; border-top: 1px solid #1e1e1e;82 }83 .sheet-title { font-size: 48px; font-weight: 600; color: #fff; }84 .sheet-sub { font-size: 40px; color: #9e9e9e; margin-left: 14px; font-weight: 500; }85 .sheet-actions {86 margin-top: 28px; display: flex; gap: 44px; align-items: center;87 }88 .sheet-actions .icon { width: 72px; height: 72px; border-radius: 14px; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; }89 .sheet-actions svg { width: 40px; height: 40px; fill: #d9d9d9; }90 .sheet-close {91 position: absolute; right: 30px; top: 30px; width: 72px; height: 72px; border-radius: 12px; background: rgba(255,255,255,0.08);92 display: flex; align-items: center; justify-content: center;93 }94 .sheet-close svg { width: 40px; height: 40px; fill: #f5f5f5; }95 96 /* Video list */97 .list {98 position: absolute; top: 1020px; left: 0; right: 0; bottom: 140px; overflow: hidden; padding: 20px 22px; box-sizing: border-box;99 }100 .video-item {101 display: flex; gap: 28px; padding: 26px 10px; border-bottom: 1px solid #1a1a1a; align-items: flex-start;102 }103 .thumb {104 width: 320px; height: 180px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 16px;105 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; font-weight: 600;106 position: relative;107 }108 .thumb .duration {109 position: absolute; right: 12px; bottom: 10px; background: rgba(0,0,0,0.7); color: #fff; font-size: 28px; padding: 6px 10px; border-radius: 8px;110 }111 .details { flex: 1; }112 .title {113 font-size: 44px; color: #f5f5f5; line-height: 1.2; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;114 }115 .meta { font-size: 34px; color: #bfbfbf; margin-bottom: 18px; }116 .item-actions { display: flex; gap: 36px; align-items: center; }117 .item-actions .icon { width: 60px; height: 60px; border-radius: 12px; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; }118 .item-actions svg { width: 36px; height: 36px; fill: #d9d9d9; }119 .dots { width: 24px; height: 24px; border-radius: 12px; margin-left: auto; display: flex; align-items: center; justify-content: center; }120 .dots svg { width: 40px; height: 40px; fill: #bbb; }121 122 /* Bottom gesture pill */123 .gesture-pill {124 position: absolute; left: 50%; transform: translateX(-50%);125 bottom: 36px; width: 540px; height: 16px; border-radius: 8px; background: #e6e6e6; opacity: 0.85;126 }127</style>128</head>129<body>130<div id="render-target">131 132 <!-- Status bar -->133 <div class="status-bar">134 <div class="status-left">10:20</div>135 <div class="status-right">136 <div class="status-icon">137 <!-- headphones icon -->138 <svg viewBox="0 0 24 24"><path d="M12 3C7 3 3 7 3 12v3h3v-3c0-3 2.7-5.5 6-5.5s6 2.5 6 5.5v3h3v-3c0-5-4-9-9-9zM6 16v3h2v-3H6zm10 0v3h2v-3h-2z"/></svg>139 </div>140 <div class="status-icon">141 <!-- battery -->142 <svg viewBox="0 0 24 24"><path d="M16 5h2v2h2v10h-2v2h-2V5zM3 7h12v10H3V7z"/></svg>143 </div>144 <div class="status-icon">145 <!-- wifi -->146 <svg viewBox="0 0 24 24"><path d="M12 18l2 2-2 2-2-2 2-2zm-6-6c4-4 12-4 16 0l-2 2c-3-3-9-3-12 0l-2-2zm3 3c3-3 9-3 12 0l-2 2c-2-2-6-2-8 0l-2-2z"/></svg>147 </div>148 </div>149 </div>150 151 <!-- Video area -->152 <div class="video-area">153 <div class="video-frame">[IMG: Fractal pattern video frame]</div>154 155 <!-- Overlay controls -->156 <div class="overlay">157 158 <div class="overlay-top">159 <div class="left">160 <div class="overlay-icon">161 <!-- chevron down -->162 <svg viewBox="0 0 24 24"><path d="M7 9l5 5 5-5H7z"/></svg>163 </div>164 </div>165 <div class="right">166 <div class="overlay-icon">167 <!-- cast -->168 <svg viewBox="0 0 24 24"><path d="M3 5h18v12H13v-2h6V7H5v2H3V5zm0 6c3 0 6 3 6 6H7c0-2.2-1.8-4-4-4v-2zm0 4c1.7 0 3 1.3 3 3H3v-3z"/></svg>169 </div>170 <div class="overlay-icon">171 <!-- CC -->172 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2" ry="2"></rect><path d="M8 12c0-1.7 1.2-3 3-3h1v2h-1c-.6 0-1 .4-1 1s.4 1 1 1h1v2h-1c-1.8 0-3-1.3-3-3zm6 0c0-1.7 1.2-3 3-3h1v2h-1c-.6 0-1 .4-1 1s.4 1 1 1h1v2h-1c-1.8 0-3-1.3-3-3z" fill="#000"/></svg>173 </div>174 <div class="overlay-icon">175 <!-- settings -->176 <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 100 8 4 4 0 000-8zm9 4l-2.2.5c-.2.8-.6 1.5-1.1 2.2l1.3 1.9-2.1 2.1-1.9-1.3c-.7.5-1.5.9-2.3 1.1L12 21l-.6-2.2c-.8-.2-1.6-.6-2.3-1.1l-1.9 1.3-2.1-2.1 1.3-1.9c-.5-.7-.9-1.4-1.1-2.2L3 12l2.2-.5c.2-.8.6-1.5 1.1-2.2L5 7.4 7.1 5.3 9 6.6c.7-.5 1.5-.9 2.3-1.1L12 3l.6 2.2c.8.2 1.6.6 2.3 1.1l1.9-1.3 2.1 2.1-1.3 1.9c.5.7.9 1.4 1.1 2.2L21 12z"/></svg>177 </div>178 <div class="overlay-icon">179 <!-- close -->180 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2" fill="none"/></svg>181 </div>182 </div>183 </div>184 185 <div class="center-controls">186 <div class="circle-btn small">187 <!-- rewind 10 -->188 <svg viewBox="0 0 24 24"><path d="M11 6l-6 6 6 6V6zM14 9c2 0 3 1.5 3 3.5S16 16 14 16s-3-1.5-3-3.5 1-3.5 3-3.5zm0 2c-.7 0-1 .6-1 1.5s.3 1.5 1 1.5 1-.6 1-1.5-.3-1.5-1-1.5z"/></svg>189 </div>190 <div class="circle-btn">191 <!-- pause -->192 <svg viewBox="0 0 24 24"><rect x="6" y="5" width="4" height="14"></rect><rect x="14" y="5" width="4" height="14"></rect></svg>193 </div>194 <div class="circle-btn small">195 <!-- forward 10 -->196 <svg viewBox="0 0 24 24"><path d="M13 6v12l6-6-6-6zM10 9c2 0 3 1.5 3 3.5S12 16 10 16s-3-1.5-3-3.5S8 9 10 9zm0 2c-.7 0-1 .6-1 1.5s.3 1.5 1 1.5 1-.6 1-1.5-.3-1.5-1-1.5z"/></svg>197 </div>198 </div>199 200 <div class="bottom-info">3:24 / 17:46</div>201 <div class="progress-bar">202 <div class="track">203 <div class="progress"></div>204 <div class="knob"></div>205 </div>206 </div>207 </div>208 </div>209 210 <!-- Queue sheet header -->211 <div class="sheet-header">212 <div style="display:flex; align-items:center; gap:10px;">213 <div class="sheet-title">Night meditation</div>214 <div class="sheet-sub">• 1/2</div>215 </div>216 <div class="sheet-actions">217 <div class="icon" title="Repeat">218 <svg viewBox="0 0 24 24"><path d="M7 7h9l-2-2 3 3-3 3 2-2H7v4H5V7h2zm10 10H8l2 2-3-3 3-3-2 2h9v-4h2v6h-2z"/></svg>219 </div>220 <div class="icon" title="Shuffle">221 <svg viewBox="0 0 24 24"><path d="M4 7h4l4 5-2 2-3-3H4V7zm0 10h4l2-2-2-2-2 2H4v2zm10-6l2-2h4v-2h-4l-3 3 1 1zm0 6l2 2h4v-2h-4l-3-3-1 1z"/></svg>222 </div>223 </div>224 <div class="sheet-close">225 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2" fill="none"/></svg>226 </div>227 </div>228 229 <!-- Video queue list -->230 <div class="list">231 232 <div class="video-item">233 <div class="thumb">234 [IMG: Thumbnail - "LISTEN TO FOR 21 DAYS"]235 <div class="duration">21:12</div>236 </div>237 <div class="details">238 <div class="title">Most Powerful Meditation for Manifestation</div>239 <div class="meta">Aaron Doughty • 6.9M views • 5 years ago</div>240 <div class="item-actions">241 <div class="icon" title="Like">242 <svg viewBox="0 0 24 24"><path d="M9 21H5V10h4v11zm2-11l4-6 2 1v5h4v10H11V10z"/></svg>243 </div>244 <div class="icon" title="Share">245 <svg viewBox="0 0 24 24"><path d="M18 8l-6-4v3H8c-3 0-5 3-5 6v5h3v-5c0-2 1.5-4 4-4h2v3l6-4z"/></svg>246 </div>247 </div>248 </div>249 <div class="dots">250 <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"></circle><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle></svg>251 </div>252 </div>253 254 <div class="video-item">255 <div class="thumb">256 [IMG: Thumbnail - "ATTRACT YOUR SOULMATE"]257 <div class="duration">26:18</div>258 </div>259 <div class="details">260 <div class="title">Powerful Love Affirmations For Singles To Attract Soulmate</div>261 <div class="meta">Mind Body Soul • 744K views • 1 year ago</div>262 <div class="item-actions">263 <div class="icon" title="Like">264 <svg viewBox="0 0 24 24"><path d="M9 21H5V10h4v11zm2-11l4-6 2 1v5h4v10H11V10z"/></svg>265 </div>266 <div class="icon" title="Share">267 <svg viewBox="0 0 24 24"><path d="M18 8l-6-4v3H8c-3 0-5 3-5 6v5h3v-5c0-2 1.5-4 4-4h2v3l6-4z"/></svg>268 </div>269 </div>270 </div>271 <div class="dots">272 <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"></circle><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle></svg>273 </div>274 </div>275 276 </div>277 278 <!-- Gesture pill -->279 <div class="gesture-pill"></div>280 281</div>282</body>283</html>