GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Yo Yo Mundi - Vimeo Results</title>6<meta name="viewport" content="width=1080, initial-scale=1">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 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 color: #222;16 }17 18 /* Header area */19 .app-header {20 position: relative;21 width: 100%;22 height: 240px;23 background: linear-gradient(#4A8FD9, #4A8FD9);24 color: #fff;25 }26 .status-bar {27 height: 80px;28 display: flex;29 align-items: center;30 padding: 0 36px;31 font-weight: 600;32 font-size: 40px;33 letter-spacing: 0.2px;34 opacity: 0.95;35 }36 .status-left { display: flex; align-items: center; gap: 28px; }37 .status-right { margin-left: auto; display: flex; align-items: center; gap: 30px; }38 39 .header-row {40 height: 160px;41 display: flex;42 align-items: center;43 padding: 0 30px;44 gap: 24px;45 }46 .back-btn, .close-btn {47 width: 96px; height: 96px;48 display: flex; align-items: center; justify-content: center;49 border-radius: 48px;50 background: rgba(255,255,255,0.18);51 }52 .header-title {53 font-size: 64px;54 font-weight: 700;55 flex: 1;56 }57 58 /* Tabs and filters section */59 .content {60 position: relative;61 background: #fff;62 }63 .tabs {64 display: flex;65 align-items: center;66 padding: 24px 36px 0;67 border-bottom: 1px solid #e6eaef;68 height: 120px;69 }70 .tab {71 font-size: 44px;72 color: #111;73 font-weight: 700;74 margin-right: 36px;75 padding-bottom: 24px;76 position: relative;77 }78 .tab.inactive { color: #7b8a99; font-weight: 600; }79 .tab.active::after {80 content: "";81 position: absolute;82 left: 0; bottom: 0;83 width: 220px; height: 8px;84 background: #49B3E6;85 border-radius: 4px;86 }87 88 .filters {89 display: flex;90 align-items: center;91 gap: 24px;92 padding: 24px 36px;93 }94 .chip {95 display: flex;96 align-items: center;97 gap: 18px;98 padding: 18px 26px;99 border: 1px solid #d3dbe4;100 border-radius: 18px;101 font-size: 40px;102 color: #2e3b4e;103 background: #f7f9fc;104 }105 .chip .label { font-weight: 700; }106 .filters .sliders {107 width: 96px; height: 96px;108 border: 1px solid #d3dbe4;109 border-radius: 18px;110 display: flex; align-items: center; justify-content: center;111 background: #f7f9fc;112 margin-left: 8px;113 }114 115 .results-count {116 padding: 0 36px 8px;117 font-size: 38px;118 color: #607489;119 }120 121 /* List */122 .list {123 padding: 12px 36px 120px;124 }125 .item {126 display: flex;127 gap: 28px;128 padding: 34px 0;129 border-bottom: 1px solid #eef2f7;130 align-items: center;131 }132 .thumb {133 width: 360px;134 height: 204px;135 border-radius: 24px;136 position: relative;137 background: #E0E0E0;138 border: 1px solid #BDBDBD;139 display: flex; align-items: center; justify-content: center;140 color: #757575; font-size: 36px; text-align: center;141 overflow: hidden;142 }143 .duration {144 position: absolute;145 right: 16px; bottom: 16px;146 background: rgba(0,0,0,0.7);147 color: #fff;148 font-size: 34px;149 padding: 8px 16px;150 border-radius: 12px;151 }152 .meta {153 flex: 1;154 min-width: 0;155 }156 .title {157 font-size: 46px;158 line-height: 1.25;159 color: #223042;160 font-weight: 800;161 margin-bottom: 12px;162 }163 .sub {164 font-size: 36px;165 color: #73879B;166 }167 .spacer { flex: 0 0 auto; }168 .menu-btn {169 width: 72px; height: 72px;170 display: flex; align-items: center; justify-content: center;171 border-radius: 36px;172 }173 174 /* Bottom gesture bar */175 .gesture-bar {176 position: absolute;177 left: 50%;178 bottom: 24px;179 transform: translateX(-50%);180 width: 360px; height: 16px;181 background: #000;182 border-radius: 8px;183 opacity: 0.9;184 }185</style>186</head>187<body>188<div id="render-target">189 <div class="app-header">190 <div class="status-bar">191 <div class="status-left">192 <span>8:47</span>193 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff" opacity="0.9"><circle cx="12" cy="12" r="3"/></svg>194 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff" opacity="0.9"><circle cx="12" cy="12" r="2"/><circle cx="4" cy="12" r="2"/><circle cx="20" cy="12" r="2"/></svg>195 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff" opacity="0.9"><rect x="3" y="4" width="18" height="16" rx="2" ry="2"/></svg>196 </div>197 <div class="status-right">198 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff" opacity="0.9"><path d="M2 18h20L12 6 2 18z"/></svg>199 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" opacity="0.9"><path d="M3 12h18"/><path d="M21 12l-3-3"/><path d="M21 12l-3 3"/></svg>200 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" opacity="0.9"><rect x="2" y="7" width="18" height="10" rx="2"/><rect x="20" y="9" width="2" height="6"/></svg>201 </div>202 </div>203 <div class="header-row">204 <div class="back-btn" aria-label="Back">205 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">206 <path d="M15 18l-6-6 6-6"/>207 </svg>208 </div>209 <div class="header-title">Yo Yo Mundi</div>210 <div class="close-btn" aria-label="Close">211 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">212 <circle cx="12" cy="12" r="11" opacity="0.25" />213 <path d="M16 8l-8 8M8 8l8 8"/>214 </svg>215 </div>216 </div>217 </div>218 219 <div class="content">220 <div class="tabs">221 <div class="tab inactive">My account</div>222 <div class="tab active">On Vimeo</div>223 </div>224 225 <div class="filters">226 <div class="chip">227 <span class="label">Video</span>228 <svg width="36" height="36" viewBox="0 0 24 24" fill="#2e3b4e"><path d="M7 10l5 5 5-5z"/></svg>229 </div>230 <div class="chip">231 <span class="label">Relevance</span>232 <svg width="36" height="36" viewBox="0 0 24 24" fill="#2e3b4e"><path d="M7 10l5 5 5-5z"/></svg>233 </div>234 <div class="sliders" aria-label="Filters">235 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#2e3b4e" stroke-width="2">236 <circle cx="7" cy="7" r="2"/><path d="M3 7h4M9 7h12"/>237 <circle cx="11" cy="12" r="2"/><path d="M3 12h6M13 12h8"/>238 <circle cx="15" cy="17" r="2"/><path d="M3 17h8M17 17h4"/>239 </svg>240 </div>241 </div>242 243 <div class="results-count">36 results for "Yo Yo Mundi"</div>244 245 <div class="list">246 <!-- Item 1 -->247 <div class="item">248 <div class="thumb">249 [IMG: Video thumbnail - Yo Yo Mundi]250 <div class="duration">03:30</div>251 </div>252 <div class="meta">253 <div class="title">YO YO MUNDI - CHIEDILO ALLE NUVOLE</div>254 <div class="sub">aivano • 15 views • 4 years ago</div>255 </div>256 <div class="spacer"></div>257 <div class="menu-btn">258 <svg width="36" height="36" viewBox="0 0 24 24" fill="#8fa0b3">259 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>260 </svg>261 </div>262 </div>263 264 <!-- Item 2 -->265 <div class="item">266 <div class="thumb">267 [IMG: Video thumbnail - Yo Yo Mundi]268 <div class="duration">05:09</div>269 </div>270 <div class="meta">271 <div class="title">YO YO MUNDI - DIETRO LE NUVOLE</div>272 <div class="sub">aivano • 12 views • 4 years ago</div>273 </div>274 <div class="menu-btn">275 <svg width="36" height="36" viewBox="0 0 24 24" fill="#8fa0b3">276 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>277 </svg>278 </div>279 </div>280 281 <!-- Item 3 -->282 <div class="item">283 <div class="thumb">284 [IMG: Video thumbnail - Guitar close-up]285 <div class="duration">03:17</div>286 </div>287 <div class="meta">288 <div class="title">Yo Yo Mundi - L'impazienza</div>289 <div class="sub">Terminal Production • 36 views • 11 years ago</div>290 </div>291 <div class="menu-btn">292 <svg width="36" height="36" viewBox="0 0 24 24" fill="#8fa0b3">293 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>294 </svg>295 </div>296 </div>297 298 <!-- Item 4 -->299 <div class="item">300 <div class="thumb">301 [IMG: Video thumbnail - Illustrated title card]302 <div class="duration">03:44</div>303 </div>304 <div class="meta">305 <div class="title">YO YO MUNDI - OVUNQUE SI NASCONDA</div>306 <div class="sub">aivano • 49 views • 2 years ago</div>307 </div>308 <div class="menu-btn">309 <svg width="36" height="36" viewBox="0 0 24 24" fill="#8fa0b3">310 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>311 </svg>312 </div>313 </div>314 315 <!-- Item 5 -->316 <div class="item">317 <div class="thumb">318 [IMG: Video thumbnail - Sepia collage]319 <div class="duration">04:41</div>320 </div>321 <div class="meta">322 <div class="title">YO YO MUNDI - TUTTE LE MEMORIE SCRITTE DEL M...</div>323 <div class="sub">aivano • 13 views • 4 years ago</div>324 </div>325 <div class="menu-btn">326 <svg width="36" height="36" viewBox="0 0 24 24" fill="#8fa0b3">327 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>328 </svg>329 </div>330 </div>331 332 <!-- Item 6 -->333 <div class="item">334 <div class="thumb">335 [IMG: Video thumbnail - Audience in theater]336 <div class="duration">06:27</div>337 </div>338 <div class="meta">339 <div class="title">Colibrì Band e Paolo Bonfanti - 13 (Yo Yo Mundi)</div>340 <div class="sub">Casale News • 122 views • 5 years ago</div>341 </div>342 <div class="menu-btn">343 <svg width="36" height="36" viewBox="0 0 24 24" fill="#8fa0b3">344 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>345 </svg>346 </div>347 </div>348 </div>349 </div>350 351 <div class="gesture-bar"></div>352</div>353</body>354</html>