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>Add videos - UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #121212; color: #EEEEEE;13 font-family: Arial, Helvetica, sans-serif;14 }15 /* Top bar */16 .topbar {17 position: absolute; left: 0; top: 0; right: 0;18 height: 220px;19 padding: 80px 36px 0 36px;20 box-sizing: border-box;21 }22 .topbar .title {23 font-size: 44px; font-weight: 600; letter-spacing: 0.2px;24 margin-left: 64px; color: #EDEDED;25 }26 .close-btn {27 position: absolute; left: 24px; top: 92px; width: 40px; height: 40px; cursor: pointer;28 }29 .next-text {30 position: absolute; right: 24px; top: 100px;31 color: #3ea6ff; font-weight: 600; font-size: 32px; cursor: pointer;32 }33 .selected-count {34 position: absolute; right: 24px; top: 160px; font-size: 24px; color: #BDBDBD;35 }36 .section-label {37 position: absolute; left: 36px; top: 240px;38 font-size: 28px; color: #BDBDBD;39 }40 41 /* Video list */42 .video-list {43 position: absolute; left: 0; right: 0; top: 290px; bottom: 0;44 padding: 0 24px;45 box-sizing: border-box;46 }47 .video-item {48 display: flex; align-items: flex-start;49 margin: 20px 12px;50 position: relative;51 }52 .thumb {53 position: relative;54 width: 360px; height: 202px;55 background: #E0E0E0;56 border: 1px solid #BDBDBD;57 border-radius: 18px;58 display: flex; align-items: center; justify-content: center;59 color: #757575; font-size: 22px; text-align: center;60 overflow: hidden;61 }62 .duration {63 position: absolute; right: 10px; bottom: 10px;64 background: rgba(0,0,0,0.7); color: #fff;65 font-size: 22px; padding: 6px 10px; border-radius: 10px;66 }67 .live-badge {68 position: absolute; right: 10px; top: 10px;69 background: #ff4e45; color: #fff; font-weight: 600;70 font-size: 20px; padding: 6px 10px; border-radius: 10px;71 }72 .meta {73 margin-left: 24px; flex: 1;74 }75 .meta .title {76 font-size: 30px; line-height: 40px; color: #F1F1F1; margin-bottom: 8px;77 }78 .meta .channel { font-size: 26px; color: #C7C7C7; }79 .meta .stats { font-size: 24px; color: #9E9E9E; margin-top: 6px; }80 81 /* Checkbox */82 .check {83 width: 48px; height: 48px; border: 2px solid #777; border-radius: 6px;84 display: flex; align-items: center; justify-content: center;85 margin-left: 16px;86 }87 .check.selected {88 background: #3ea6ff; border-color: #3ea6ff;89 }90 .check svg { width: 28px; height: 28px; }91 .check.selected svg path { stroke: #fff; }92 93 /* Bottom sheet modal */94 .playlist-modal {95 position: absolute; left: 100px; top: 1040px; width: 880px; height: 500px;96 background: #262626; border-radius: 22px;97 box-shadow: 0 24px 60px rgba(0,0,0,0.6);98 padding: 36px;99 box-sizing: border-box;100 }101 .playlist-modal .heading {102 font-size: 40px; font-weight: 700; margin-bottom: 30px;103 }104 .playlist-modal .label {105 font-size: 28px; color: #EDEDED; margin-bottom: 16px;106 }107 .playlist-modal .underline {108 height: 2px; background: #555; width: 100%; margin-top: 12px;109 }110 .privacy-pill {111 display: inline-flex; align-items: center; gap: 12px;112 background: #3a3a3a; color: #D9D9D9;113 border-radius: 14px; padding: 10px 16px;114 font-size: 24px; margin-top: 24px;115 }116 .privacy-pill svg { width: 22px; height: 22px; }117 118 /* Mini player overlay */119 .miniplayer {120 position: absolute; right: 60px; top: 1320px;121 width: 480px; height: 300px;122 background: #000; border-radius: 24px; overflow: hidden;123 display: flex; align-items: center; justify-content: center;124 }125 .miniplayer .thumb {126 width: 92%; height: 88%; border-radius: 14px;127 }128 129 /* Gesture bar */130 .gesture {131 position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%);132 width: 240px; height: 10px; background: rgba(255,255,255,0.85);133 border-radius: 10px;134 }135</style>136</head>137<body>138<div id="render-target">139 140 <div class="topbar">141 <div class="close-btn">142 <svg viewBox="0 0 24 24">143 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#EDEDED" stroke-width="2.5" stroke-linecap="round" fill="none"/>144 </svg>145 </div>146 <div class="title">Add videos</div>147 <div class="next-text">Next</div>148 <div class="selected-count">1 video selected</div>149 </div>150 151 <div class="section-label">Recently Watched</div>152 153 <div class="video-list">154 155 <!-- Item 1 -->156 <div class="video-item">157 <div class="thumb">158 [IMG: Fashion runway scene]159 <div class="duration">8:03</div>160 <div class="live-badge">LIVE</div>161 </div>162 <div class="meta">163 <div class="title">Autumn outfits inspo. Milan's fashion life in anticipation of Milan Fashion Week</div>164 <div class="channel">MILAN ON TREND</div>165 <div class="stats">13K views • 1 day ago</div>166 </div>167 <div class="check">168 <!-- empty (not selected) -->169 </div>170 </div>171 172 <!-- Item 2 (selected) -->173 <div class="video-item">174 <div class="thumb">175 [IMG: Concert stage]176 <div class="duration">4:59</div>177 </div>178 <div class="meta">179 <div class="title">🍁 Luciano Pavarotti, James Brown - It's A Man's Man's Man's World</div>180 <div class="channel">Luciano Pavarotti</div>181 <div class="stats">92M views • 4 years ago</div>182 </div>183 <div class="check selected">184 <svg viewBox="0 0 24 24">185 <path d="M4 12 L10 18 L20 6" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>186 </svg>187 </div>188 </div>189 190 <!-- Item 3 -->191 <div class="video-item">192 <div class="thumb">193 [IMG: Fashion show stage]194 <div class="duration">9:01</div>195 </div>196 <div class="meta">197 <div class="title">FIRDAWS | FULL FASHION SHOW</div>198 <div class="channel">Fashion Channel</div>199 <div class="stats">9.7K views • 2 weeks ago</div>200 </div>201 <div class="check"></div>202 </div>203 204 <!-- Item 4 -->205 <div class="video-item">206 <div class="thumb">207 [IMG: Comedy clip frame]208 <div class="duration">1:01</div>209 </div>210 <div class="meta">211 <div class="title">Crazy laugh compilation - Best moments</div>212 <div class="channel">DesSoFunny</div>213 <div class="stats">9.5M views • 3 weeks ago</div>214 </div>215 <div class="check"></div>216 </div>217 218 <!-- Item 5 -->219 <div class="video-item">220 <div class="thumb">221 [IMG: Toddler at home]222 <div class="duration">0:25</div>223 </div>224 <div class="meta">225 <div class="title">Toddler goes into denial when mom tells her it's Football Saturday</div>226 <div class="channel">Majically News</div>227 <div class="stats">23M views • 9 months ago</div>228 </div>229 <div class="check"></div>230 </div>231 232 <!-- Item 6 -->233 <div class="video-item">234 <div class="thumb">235 [IMG: Duet performance on stage]236 <div class="duration">5:06</div>237 </div>238 <div class="meta">239 <div class="title">Luciano Pavarotti & Celine Dion - I Hate You Then I Love You</div>240 <div class="channel">glennSuperdude</div>241 <div class="stats">29M views • 10 years ago</div>242 </div>243 <div class="check"></div>244 </div>245 246 <!-- Item 7 -->247 <div class="video-item">248 <div class="thumb">249 [IMG: Live concert orchestra]250 <div class="duration">3:19</div>251 </div>252 <div class="meta">253 <div class="title">Luciano Pavarotti, Bryan Adams - 'O Sole Mio (Live)</div>254 <div class="channel">Luciano Pavarotti</div>255 <div class="stats">3.9M views • 4 years ago</div>256 </div>257 <div class="check"></div>258 </div>259 260 </div>261 262 <!-- Bottom sheet modal -->263 <div class="playlist-modal">264 <div class="heading">New playlist</div>265 <div class="label">Title</div>266 <div class="underline"></div>267 <div class="privacy-pill" style="margin-top: 24px;">268 <svg viewBox="0 0 24 24">269 <path d="M6 10 V8a6 6 0 1 1 12 0v2 M6 10 H18 V20 H6 Z" stroke="#D9D9D9" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>270 </svg>271 Private272 </div>273 </div>274 275 <!-- Mini player overlay -->276 <div class="miniplayer">277 <div class="thumb">[IMG: Sketch artwork]</div>278 </div>279 280 <!-- Gesture bar -->281 <div class="gesture"></div>282 283</div>284</body>285</html>