GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Add Videos - Playlist</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background:transparent; }8 #render-target {9 width:1080px; height:2400px;10 position:relative; overflow:hidden;11 background:#0e0f12; color:#ffffff;12 font-family: Arial, Helvetica, sans-serif;13 }14 15 /* Status bar */16 .status-bar {17 position:absolute; top:0; left:0; right:0;18 height:90px; padding:0 32px;19 display:flex; align-items:center; justify-content:space-between;20 color:#eaeaea; font-size:40px;21 }22 .status-icons { display:flex; align-items:center; gap:24px; }23 .status-icons svg { width:42px; height:42px; fill:#cfcfcf; }24 25 /* Header */26 .header {27 position:absolute; top:90px; left:0; right:0;28 height:120px; display:flex; align-items:center;29 padding:0 32px;30 }31 .close-btn {32 width:72px; height:72px; display:flex; align-items:center; justify-content:center;33 margin-right:16px;34 }35 .header-title {36 font-size:64px; font-weight:600; letter-spacing:0.5px;37 }38 .next-btn {39 margin-left:auto; font-size:48px; color:#4ea3ff; font-weight:600;40 }41 42 /* Section title */43 .section-title {44 position:absolute; top:230px; left:32px;45 font-size:40px; color:#b9bdc6;46 }47 48 /* Video list */49 .list {50 position:absolute; top:300px; left:0; right:0; bottom:0;51 padding:0 32px;52 }53 .video-row {54 display:flex; align-items:center;55 padding:28px 0; border-bottom:1px solid rgba(255,255,255,0.06);56 }57 .thumb {58 width:260px; height:146px;59 background:#E0E0E0; border:1px solid #BDBDBD;60 color:#757575; display:flex; align-items:center; justify-content:center;61 position:relative; border-radius:10px;62 flex-shrink:0;63 }64 .duration {65 position:absolute; right:8px; bottom:8px;66 background:rgba(0,0,0,0.7); color:#fff; font-size:28px;67 padding:6px 10px; border-radius:8px;68 }69 .video-info {70 flex:1; padding:0 22px;71 }72 .title {73 font-size:40px; line-height:1.25; margin-bottom:8px;74 }75 .meta {76 font-size:30px; color:#9aa0a6;77 }78 .checkbox {79 width:64px; height:64px; border:3px solid #70757a; border-radius:6px;80 display:flex; align-items:center; justify-content:center;81 margin-left:20px; flex-shrink:0;82 }83 .checkbox.selected {84 background:#1e88e5; border-color:#1e88e5;85 }86 .checkbox svg { width:40px; height:40px; fill:#fff; }87 88 /* Modal */89 .modal-overlay {90 position:absolute; left:0; right:0; top:0; bottom:0;91 background:rgba(0,0,0,0.35);92 }93 .modal {94 position:absolute; left:50%; top:50%;95 transform:translate(-50%, -50%);96 width:860px; background:#1b1c1f; border-radius:18px;97 box-shadow:0 12px 40px rgba(0,0,0,0.6);98 padding:36px 40px;99 }100 .modal h2 {101 margin:0 0 28px 0; font-size:52px; font-weight:700;102 }103 .input {104 margin-top:10px; margin-bottom:34px;105 }106 .input label { display:block; font-size:38px; color:#cfd3d7; margin-bottom:16px; }107 .input .line {108 height:0; border-bottom:2px solid #42464d; margin-bottom:16px;109 }110 .pill {111 display:inline-block; font-size:32px; color:#e7e7e7;112 background:#32353a; padding:10px 16px; border-radius:12px;113 }114 .modal-actions {115 display:flex; justify-content:flex-end; gap:40px; margin-top:24px;116 }117 .action {118 font-size:44px; color:#4ea3ff; cursor:pointer;119 }120</style>121</head>122<body>123<div id="render-target">124 125 <!-- Status bar -->126 <div class="status-bar">127 <div class="time">9:42</div>128 <div class="status-icons">129 <!-- Simple "airplane" icon as a placeholder -->130 <svg viewBox="0 0 24 24"><path d="M10 2l2 6 8 2-8 2-2 6-2-6-8-2 8-2z"/></svg>131 <!-- Wifi -->132 <svg viewBox="0 0 24 24"><path d="M2 9c5-5 15-5 20 0l-2 2c-4-4-12-4-16 0L2 9zm4 4c3-3 9-3 12 0l-2 2c-2-2-6-2-8 0l-2-2zm4 4l2 2 2-2-2-2-2 2z"/></svg>133 <!-- Battery -->134 <svg viewBox="0 0 24 24"><path d="M16 4h2v2h2v12h-2v2h-2V4zM2 6h12v12H2z"/></svg>135 </div>136 </div>137 138 <!-- Header -->139 <div class="header">140 <div class="close-btn">141 <svg viewBox="0 0 24 24" width="56" height="56" fill="#d0d0d0"><path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/></svg>142 </div>143 <div class="header-title">Add videos</div>144 <div class="next-btn">Next</div>145 </div>146 147 <!-- Section title -->148 <div class="section-title">Recently Watched</div>149 150 <!-- List -->151 <div class="list">152 <!-- Row 1 -->153 <div class="video-row">154 <div class="thumb"><span>[IMG: Video thumbnail]</span><div class="duration">3:02</div></div>155 <div class="video-info">156 <div class="title">4*TOWN (From Disney and Pixar’s Turning Red) - Nobody...</div>157 <div class="meta">DisneyMusicVEVO • 233M views • 1 year ago</div>158 </div>159 <div class="checkbox">160 <!-- empty -->161 </div>162 </div>163 164 <!-- Row 2 -->165 <div class="video-row">166 <div class="thumb"><span>[IMG: Video thumbnail]</span><div class="duration">4:12</div></div>167 <div class="video-info">168 <div class="title">Katy Perry - Part Of Me (Official)</div>169 <div class="meta">Katy Perry • 948M views • 11 years ago</div>170 </div>171 <div class="checkbox selected">172 <svg viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/></svg>173 </div>174 </div>175 176 <!-- Row 3 -->177 <div class="video-row">178 <div class="thumb"><span>[IMG: Video thumbnail]</span><div class="duration">4:12</div></div>179 <div class="video-info">180 <div class="title">Katy Perry - Roar</div>181 <div class="meta">Katy Perry • 3.8B views • 9 years ago</div>182 </div>183 <div class="checkbox selected">184 <svg viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/></svg>185 </div>186 </div>187 188 <!-- Row 4 -->189 <div class="video-row">190 <div class="thumb"><span>[IMG: Video thumbnail]</span><div class="duration">-</div></div>191 <div class="video-info">192 <div class="title">I only ate MOMOS for 24 hours challenge // Challenge Video // ...</div>193 <div class="meta">Mehak Dhawan 96 • 15K views • 2 years ago</div>194 </div>195 <div class="checkbox"></div>196 </div>197 198 <!-- Row 5 -->199 <div class="video-row">200 <div class="thumb"><span>[IMG: Video thumbnail]</span><div class="duration">3:45</div></div>201 <div class="video-info">202 <div class="title">Katy Perry - Dark Horse ft. Juicy J</div>203 <div class="meta">Katy Perry • 3.5B views • 9 years ago</div>204 </div>205 <div class="checkbox"></div>206 </div>207 208 <!-- Row 6 -->209 <div class="video-row">210 <div class="thumb"><span>[IMG: Video thumbnail]</span><div class="duration">4:18</div></div>211 <div class="video-info">212 <div class="title">Katy Perry - Bon Appétit (Official) ft. Migos</div>213 <div class="meta">Katy Perry • 1.2B views • 6 years ago</div>214 </div>215 <div class="checkbox"></div>216 </div>217 218 <!-- Row 7 -->219 <div class="video-row">220 <div class="thumb"><span>[IMG: Video thumbnail]</span><div class="duration">2:37:05</div></div>221 <div class="video-info">222 <div class="title">Rise of Nationalism in Europe Full Chapter | Class 10 History...</div>223 <div class="meta">Shubham Pathak • 1.1M views • Streamed 1 year ago</div>224 </div>225 <div class="checkbox"></div>226 </div>227 </div>228 229 <!-- Modal for New playlist -->230 <div class="modal-overlay"></div>231 <div class="modal">232 <h2>New playlist</h2>233 <div class="input">234 <label>Title</label>235 <div class="line"></div>236 </div>237 <div class="pill">Private</div>238 <div class="modal-actions">239 <div class="action">Cancel</div>240 <div class="action">Create</div>241 </div>242 </div>243 244</div>245</body>246</html>