TigerVNC is a high-performance, platform-neutral implementation of VNC (Virtual Network Computing), a client/server application that allows users to launch and interact with graphical applications on remote machines. TigerVNC provides the levels of performance necessary to run 3D and video applications, and it attempts to maintain a common look and feel and re-use components, where possible, across the various platforms that it supports. TigerVNC also provides extensions for advanced authentication methods and TLS encryption.
<footer> <i class="fas fa-crown"></i> Enjambre · discografía esencial 2006–2024 · hecha con <i class="fas fa-heart" style="color:#b47c48;"></i> para los seguidores </footer>
// inicializar y renderizar function init() { initFilters(); render(); }
// fondo de imagen con gradiente + ícono representativo const bgGradient = `linear-gradient(135deg, ${album.coverColor}dd, ${album.coverColor}aa)`; // lista de tracks (mostrar máximo 6 primeros) const trackListItems = album.tracks.slice(0, 8).map(track => `<li><i class="fas fa-music" style="font-size: 0.6rem; margin-right: 4px;"></i> ${escapeHtml(track)}</li>`).join(''); const moreTracks = album.tracks.length > 8 ? `<li style="background: none;">+${album.tracks.length - 8} más</li>` : ''; enjambre discografia
init();
// evento búsqueda searchInput.addEventListener('input', onSearchInput); i class="fas fa-crown">
// filtrar por búsqueda (título, año, canción) if (currentSearch.trim() !== '') { const searchTermNormalized = normalizeText(currentSearch.trim()); filtered = filtered.filter(album => { // match por título if (normalizeText(album.title).includes(searchTermNormalized)) return true; // match por año (string) if (album.year.toString().includes(searchTermNormalized)) return true; // match por tracks if (album.tracks.some(track => normalizeText(track).includes(searchTermNormalized))) return true; return false; }); }
// pequeño helper para evitar XSS function escapeHtml(str) { return str.replace(/[&<>]/g, function(m) { if (m === '&') return '&'; if (m === '<') return '<'; if (m === '>') return '>'; return m; }).replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, function(c) { return c; }); } i class="fas fa-heart" style="color:#b47c48
// elementos DOM const gridContainer = document.getElementById('discogGrid'); const searchInput = document.getElementById('searchInput'); const filterBtns = document.querySelectorAll('.filter-btn'); const statsSpan = document.getElementById('statsCounter');
<div class="controls"> <div class="search-box"> <i class="fas fa-search"></i> <input type="text" id="searchInput" placeholder="Buscar por álbum, año o canción..."> </div> <div class="filter-buttons" id="filterGroup"> <button class="filter-btn active" data-filter="all"><i class="fas fa-album-collection"></i> Todos</button> <button class="filter-btn" data-filter="estudio"><i class="fas fa-microphone-alt"></i> Estudio</button> <button class="filter-btn" data-filter="ep"><i class="fas fa-compact-disc"></i> EP</button> <button class="filter-btn" data-filter="live"><i class="fas fa-drumstick-bite"></i> En vivo</button> </div> <div class="stats" id="statsCounter">🎵 0 discos</div> </div>
/* discography grid */ .container { max-width: 1400px; margin: 2rem auto; padding: 0 1.5rem; } .discog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; } .card { background: #ffffffea; backdrop-filter: blur(0px); border-radius: 28px; overflow: hidden; box-shadow: 0 12px 24px -12px rgba(0,0,0,0.2); transition: transform 0.25s ease, box-shadow 0.3s; border: 1px solid #f0e2d4; } .card:hover { transform: translateY(-6px); box-shadow: 0 20px 30px -12px rgba(0,0,0,0.25); } .card-img { height: 220px; background: #d9cdbf; display: flex; align-items: center; justify-content: center; font-size: 4rem; color: #7c5f45; position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; transition: all 0.2s; } /* fallback icon if no image bg */ .card-img i { text-shadow: 2px 2px 0 rgba(0,0,0,0.1); } .card-content { padding: 1.5rem 1.3rem 1.8rem; } .album-year { font-size: 0.8rem; letter-spacing: 1px; font-weight: 600; color: #b47c48; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; } .album-title { font-size: 1.7rem; font-weight: 700; margin: 0.4rem 0 0.5rem; line-height: 1.2; color: #231f1b; } .album-type { display: inline-block; background: #f0e4d8; padding: 0.2rem 0.9rem; border-radius: 20px; font-size: 0.7rem; font-weight: 600; margin-bottom: 0.8rem; text-transform: uppercase; } .tracklist { margin-top: 1rem; border-top: 1px dashed #e5d5c6; padding-top: 0.9rem; } .tracklist h4 { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #aa7e5a; margin-bottom: 0.6rem; display: flex; align-items: center; gap: 6px; } .tracklist ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; } .tracklist li { font-size: 0.8rem; background: #f8f2ec; padding: 0.2rem 0.6rem; border-radius: 20px; color: #4e3a2c; font-weight: 400; } .no-results { text-align: center; grid-column: 1 / -1; padding: 4rem; background: #f4ede6; border-radius: 60px; font-size: 1.2rem; color: #876e55; } footer { text-align: center; padding: 2rem; font-size: 0.8rem; color: #7c6857; border-top: 1px solid #e2cfbf; margin-top: 2rem; } @media (max-width: 650px) { .hero h1 { font-size: 2.5rem; } .controls { flex-direction: column; align-items: stretch; } .filter-buttons { justify-content: center; } .discog-grid { gap: 1.2rem; } .album-title { font-size: 1.4rem; } } </style> </head> <body>