GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Add videos - Mock UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #000000;14 color: #FFFFFF;15 }16 17 /* Status bar */18 .status-bar {19 height: 100px;20 padding: 0 36px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #e0e0e0;25 font-size: 34px;26 letter-spacing: 0.5px;27 }28 .status-right { display: flex; align-items: center; gap: 26px; }29 30 /* Simple icons */31 .icon { width: 42px; height: 42px; fill: #e0e0e0; }32 33 /* Header */34 .header {35 height: 140px;36 display: flex;37 align-items: center;38 padding: 0 28px;39 border-bottom: 1px solid #1f1f1f;40 }41 .header .left, .header .right { width: 150px; display: flex; align-items: center; }42 .header .center { flex: 1; text-align: left; }43 .header-title { font-size: 52px; font-weight: 700; color: #FFFFFF; }44 .next-link { margin-left: auto; color: #3ea6ff; font-size: 40px; font-weight: 600; }45 46 .subhead {47 height: 80px;48 display: flex;49 align-items: center;50 padding: 0 28px;51 color: #a5a5a5;52 font-size: 32px;53 }54 .subhead .spacer { flex: 1; }55 .section-title {56 padding: 22px 28px 10px 28px;57 font-size: 36px;58 color: #e0e0e0;59 letter-spacing: 0.2px;60 }61 62 /* List */63 .list {64 padding: 0 0 40px 0;65 }66 .video-row {67 display: flex;68 align-items: flex-start;69 padding: 20px 28px;70 gap: 24px;71 }72 .thumb {73 width: 420px;74 height: 236px;75 background: #E0E0E0;76 border: 1px solid #BDBDBD;77 color: #606060;78 display: flex;79 align-items: center;80 justify-content: center;81 position: relative;82 font-size: 26px;83 text-align: center;84 line-height: 1.25;85 }86 .duration {87 position: absolute;88 right: 10px;89 bottom: 10px;90 background: rgba(0,0,0,0.8);91 color: #fff;92 padding: 6px 10px;93 font-size: 28px;94 border-radius: 6px;95 }96 .meta {97 flex: 1;98 min-width: 0;99 }100 .title {101 font-size: 38px;102 line-height: 1.25;103 color: #fff;104 margin-top: 6px;105 margin-bottom: 10px;106 font-weight: 700;107 }108 .channel {109 font-size: 30px;110 color: #bdbdbd;111 margin-bottom: 6px;112 }113 .stats {114 font-size: 30px;115 color: #9e9e9e;116 }117 .check {118 width: 64px;119 height: 64px;120 border: 3px solid #6f6f6f;121 border-radius: 8px;122 margin-left: 10px;123 margin-top: 6px;124 }125 126 /* Divider feel without hard lines */127 .video-row + .video-row { border-top: 1px solid #101010; }128 129</style>130</head>131<body>132<div id="render-target">133 134 <!-- Status Bar -->135 <div class="status-bar">136 <div class="time">9:14</div>137 <div class="status-right">138 <!-- Mail icon -->139 <svg class="icon" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z"/></svg>140 <!-- WiFi -->141 <svg class="icon" viewBox="0 0 24 24"><path d="M12 20l3-3H9l3 3zm6-6-2.2 2.2a6 6 0 0 0-7.6 0L6 14a9 9 0 0 1 12 0zM3 10l2.1 2.1a12 12 0 0 1 13.8 0L21 10C16.7 6.6 7.3 6.6 3 10z"/></svg>142 <!-- Battery -->143 <svg class="icon" viewBox="0 0 24 24"><path d="M16 6h1c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2h-1v2H8v-2H7c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h1V4h8v2zM7 8v8h10V8H7z"/></svg>144 </div>145 </div>146 147 <!-- Header -->148 <div class="header">149 <div class="left">150 <!-- Close (X) -->151 <svg class="icon" viewBox="0 0 24 24"><path d="M18.3 5.7 12 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>152 </div>153 <div class="center">154 <div class="header-title">Add videos</div>155 </div>156 <div class="right">157 <div class="next-link">Next</div>158 </div>159 </div>160 161 <!-- Subhead and section -->162 <div class="subhead">163 <div style="color:#e0e0e0;">Recently Watched</div>164 <div class="spacer"></div>165 <div>0 videos selected</div>166 </div>167 168 <!-- List -->169 <div class="list">170 171 <!-- Row 1 -->172 <div class="video-row">173 <div class="thumb">[IMG: Rome travel vlog street scene]<div class="duration">16:50</div></div>174 <div class="meta">175 <div class="title">What to do in Rome for 3 days | Italy Travel Vlog 2022</div>176 <div class="channel">Hannah JY Moon</div>177 <div class="stats">145K views 路 10 months ago</div>178 </div>179 <div class="check"></div>180 </div>181 182 <!-- Row 2 -->183 <div class="video-row">184 <div class="thumb">[IMG: Podcast studio thumbnail]<div class="duration">58:37</div></div>185 <div class="meta">186 <div class="title">This American Life: The Call</div>187 <div class="channel">This American Life</div>188 <div class="stats">2K views 路 Streamed 11 days ago</div>189 </div>190 <div class="check"></div>191 </div>192 193 <!-- Row 3 -->194 <div class="video-row">195 <div class="thumb">[IMG: Rome travel diaries montage]<div class="duration">12:30</div></div>196 <div class="meta">197 <div class="title">rome travel vlog | arriving in italy, lots of exploring & eating | pt. I</div>198 <div class="channel">alia zaita</div>199 <div class="stats">207K views 路 1 year ago</div>200 </div>201 <div class="check"></div>202 </div>203 204 <!-- Row 4 -->205 <div class="video-row">206 <div class="thumb">[IMG: Music video frame - blue tone]<div class="duration">5:07</div></div>207 <div class="meta">208 <div class="title">Stereophonics - Graffiti On The Train</div>209 <div class="channel">Stereophonics Official</div>210 <div class="stats">14M views 路 10 years ago</div>211 </div>212 <div class="check"></div>213 </div>214 215 <!-- Row 5 -->216 <div class="video-row">217 <div class="thumb">[IMG: Dragon kite outdoors]<div class="duration">0:54</div></div>218 <div class="meta">219 <div class="title">Respect 馃敟馃槑</div>220 <div class="channel">GmmRich</div>221 <div class="stats">50M views 路 1 month ago</div>222 </div>223 <div class="check"></div>224 </div>225 226 <!-- Row 6 -->227 <div class="video-row">228 <div class="thumb">[IMG: Sketching short video frame]<div class="duration">0:48</div></div>229 <div class="meta">230 <div class="title">I drew a guy with black eyes! (Crazy reaction!)</div>231 <div class="channel">Devon Rodriguez</div>232 <div class="stats">94M views 路 1 year ago</div>233 </div>234 <div class="check"></div>235 </div>236 237 <!-- Row 7 -->238 <div class="video-row">239 <div class="thumb">[IMG: Volleyball court short]<div class="duration">0:09</div></div>240 <div class="meta">241 <div class="title">#shorts #volleyballlife #volleyballnepal #volleyball</div>242 <div class="channel">Rai Rodung</div>243 <div class="stats">10K views 路 11 days ago</div>244 </div>245 <div class="check"></div>246 </div>247 248 <!-- Row 8 -->249 <div class="video-row">250 <div class="thumb">[IMG: Field clip meme]<div class="duration">0:13</div></div>251 <div class="meta">252 <div class="title">TAHAN TAWA MEME LUCU Semua karna wanita #meme</div>253 <div class="channel">TRAVELING STUDIO</div>254 <div class="stats">3.1M views 路 1 month ago</div>255 </div>256 <div class="check"></div>257 </div>258 259 <!-- Row 9 -->260 <div class="video-row">261 <div class="thumb">[IMG: Talking head short]<div class="duration">0:25</div></div>262 <div class="meta">263 <div class="title">Polisi yang sangat di hormati dan polisi mampu melindungi ...</div>264 <div class="channel">YUZQI entertainment</div>265 <div class="stats">215M views 路 1 year ago</div>266 </div>267 <div class="check"></div>268 </div>269 270 </div>271 272</div>273</body>274</html>