CinePlex/plex.html

641 lines
39 KiB
HTML

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>__MSG_appName__ - __MSG_appTagline__</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Orbitron:wght@500;600;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/equalizer.css">
<link rel="stylesheet" href="css/photos.css">
</head>
<body>
<div id="particles-js"></div>
<header class="top-bar">
<div class="top-bar-left">
<button id="sidebar-toggle" class="btn-icon" aria-label="__MSG_toggleNavigation__"><i class="fas fa-bars"></i></button>
<a class="navbar-brand logo" href="#" id="reset-view-btn">__MSG_appName__</a>
</div>
<div class="top-bar-center">
<div class="search-bar">
<input type="text" class="search-input" id="search-input" placeholder="__MSG_searchPlaceholder__">
<i class="fas fa-search search-icon"></i>
</div>
</div>
<div class="top-bar-right">
<button id="openMusicPlayerDesktop" class="btn-icon" title="__MSG_openMusicPlayer__">
<i class="fas fa-music"></i>
</button>
<button id="settings-btn" class="btn-icon" title="__MSG_settings__">
<i class="fas fa-cog"></i>
</button>
</div>
</header>
<nav class="sidebar-nav" id="sidebar-nav">
<ul class="sidebar-menu">
<li><a class="nav-link active" href="#" id="nav-movies"><i class="fas fa-film"></i><span>__MSG_navMovies__</span></a></li>
<li><a class="nav-link" href="#" id="nav-series"><i class="fas fa-tv"></i><span>__MSG_navSeries__</span></a></li>
<li><a class="nav-link" href="#" id="nav-photos"><i class="fas fa-images"></i><span>__MSG_navPhotos__</span></a></li>
<li><a class="nav-link" href="#" id="nav-stats"><i class="fas fa-chart-pie"></i><span>__MSG_navStats__</span></a></li>
<li><a class="nav-link" href="#" id="nav-favorites"><i class="fas fa-heart"></i><span>__MSG_navFavorites__</span></a></li>
<li><a class="nav-link" href="#" id="nav-history"><i class="fas fa-history"></i><span>__MSG_navHistory__</span></a></li>
<li><a class="nav-link" href="#" id="nav-recommendations"><i class="fas fa-magic"></i><span>__MSG_navRecommendations__</span></a></li>
<li><a class="nav-link d-lg-none" href="#" id="openMusicPlayerMobile"><i class="fas fa-music"></i><span>__MSG_navMusic__</span></a></li>
</ul>
</nav>
<div id="main-container">
<div id="main-view">
<section class="hero" id="hero-section">
<div class="hero-background-container">
<div class="hero-background hero-background-1"></div>
<div class="hero-background hero-background-2"></div>
</div>
<div class="hero-content">
<h1 class="hero-title">__MSG_heroWelcome__</h1>
<p class="hero-subtitle">__MSG_heroSubtitle__</p>
<div class="hero-meta">
<span class="hero-meta-item" id="hero-rating"></span>
<span class="hero-meta-item" id="hero-year"></span>
<span class="hero-meta-item" id="hero-extra"></span>
</div>
<div class="hero-buttons">
<button class="btn btn-primary" id="hero-play-btn" disabled><i class="fas fa-plus-circle"></i> __MSG_addStream__</button>
<button class="btn btn-secondary" id="hero-info-btn" disabled><i class="fas fa-info-circle"></i> __MSG_moreInfo__</button>
</div>
</div>
</section>
<main class="main-content">
<div class="container-fluid">
<section id="content-section">
<div class="section-header">
<h2 class="section-title" id="main-section-title">__MSG_popularMovies__</h2>
</div>
<div class="filters mb-4" style="display: none;">
<select class="filter-select" id="genre-filter">
<option value="">__MSG_allGenres__</option>
</select>
<select class="filter-select" id="year-filter">
<option value="">__MSG_allYears__</option>
</select>
<select class="filter-select" id="sort-filter">
<option value="popularity.desc">__MSG_sortPopular__</option>
<option value="vote_average.desc">__MSG_sortTopRated__</option>
<option id="sort-release-date" value="release_date.desc">__MSG_sortRecent__</option>
</select>
</div>
<div id="content-grid" class="content-grid">
<div class="col-12 text-center mt-5">
<div class="spinner" style="position: static; margin: auto; display: block;"></div>
</div>
</div>
<div class="text-center mt-5"><button id="load-more" class="btn btn-primary" style="display: none;">__MSG_loadMore__</button></div>
</section>
<section id="photos-section" style="display: none;">
<div class="photos-header">
<nav aria-label="breadcrumb">
<ol id="photos-breadcrumb" class="breadcrumb">
</ol>
</nav>
<select class="filter-select" id="photos-token-select">
<option value="">__MSG_selectServer__</option>
</select>
</div>
<div id="photos-grid"></div>
<div id="photos-loader" class="text-center py-5" style="display: none;">
<div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">__MSG_loading__</span>
</div>
</div>
<div id="photos-empty-state" class="empty-state" style="display: none;">
<i class="fas fa-image"></i>
<p class="lead">__MSG_photosEmptyState__</p>
<p class="text-muted">__MSG_photosEmptyStateSub__</p>
</div>
</section>
<section id="stats-section" style="display: none;">
<div class="section-header">
<h2 class="section-title">__MSG_statsTitle__</h2>
</div>
<div id="stats-filters" class="filters mb-4" style="display: none;">
<select class="filter-select" id="stats-token-filter">
<option value="all">__MSG_statsAllTokens__</option>
</select>
</div>
<div id="stats-loader" class="text-center py-5">
<div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">__MSG_loading__</span>
</div>
<p class="mt-3 lead">__MSG_statsAnalyzing__</p>
</div>
<div id="stats-content" class="stats-grid" style="display: none;">
<div class="stats-card">
<div class="stat-header">
<i class="fas fa-key stat-icon"></i>
<span class="stat-label">__MSG_statsActiveTokens__</span>
</div>
<div id="total-tokens" class="stat-value">0</div>
</div>
<div class="stats-card">
<div class="stat-header">
<i class="fas fa-server stat-icon"></i>
<span class="stat-label">__MSG_statsServersFound__</span>
</div>
<div id="total-servers" class="stat-value">0</div>
</div>
<div class="stats-card">
<div class="stat-header">
<i class="fas fa-film stat-icon"></i>
<span class="stat-label">__MSG_statsUniqueMovies__</span>
</div>
<div id="total-movies" class="stat-value">0</div>
</div>
<div class="stats-card">
<div class="stat-header">
<i class="fas fa-tv stat-icon"></i>
<span class="stat-label">__MSG_statsUniqueSeries__</span>
</div>
<div id="total-series" class="stat-value">0</div>
</div>
<div class="stats-card">
<div class="stat-header">
<i class="fas fa-music stat-icon"></i>
<span class="stat-label">__MSG_statsUniqueArtists__</span>
</div>
<div id="total-artists" class="stat-value">0</div>
</div>
<div id="token-details-card" class="stats-card token-details-card">
<div class="stat-header">
<i class="fas fa-network-wired stat-icon"></i>
<span class="stat-label">__MSG_statsTokenServers__</span>
</div>
<ul id="token-server-list" class="server-list"></ul>
</div>
<div class="chart-container full-width">
<h3 class="chart-title">__MSG_statsChartMoviesByGenre__</h3>
<canvas id="movie-genres-chart"></canvas>
</div>
<div class="chart-container full-width">
<h3 class="chart-title">__MSG_statsChartSeriesByGenre__</h3>
<canvas id="series-genres-chart"></canvas>
</div>
<div class="chart-container full-width">
<h3 class="chart-title">__MSG_statsChartByDecade__</h3>
<canvas id="decade-chart"></canvas>
</div>
</div>
</section>
<section id="recommendations-section" style="display: none;">
<div class="section-header">
<h2 class="section-title">__MSG_recommendationsTitle__</h2>
</div>
<div id="recommendations-grid" class="content-grid"></div>
</section>
<section id="history-section" style="display: none;">
<div class="section-header">
<h2 class="section-title">__MSG_historyTitle__</h2>
<button id="clear-history-btn" class="btn btn-danger btn-sm"><i class="fas fa-trash-alt me-2"></i>__MSG_clearHistory__</button>
</div>
<div id="history-list"></div>
</section>
<div id="consoleOutputContainer" class="mt-5" style="display: none;">
<h3 class="section-subtitle mt-4">__MSG_consoleTitle__</h3>
<div id="consoleOutput"></div>
</div>
</div>
</main>
</div>
<footer class="footer">
<div class="container">
<div class="footer-content">
<a class="footer-logo-link" href="#" id="footer-logo-btn">
<span class="footer-logo-text">__MSG_appName__</span>
</a>
<div class="footer-links">
<a href="#" class="footer-link" id="footer-movies">__MSG_navMovies__</a>
<a href="#" class="footer-link" id="footer-series">__MSG_navSeries__</a>
<a href="#" class="footer-link" id="footer-stats">__MSG_navStats__</a>
<a href="#" class="footer-link" id="footer-favorites">__MSG_navFavorites__</a>
</div>
<p class="footer-credit">__MSG_footerCredit__</p>
</div>
</div>
</footer>
</div>
<section class="item-details" id="item-details-view">
<div class="back-button"><i class="fas fa-arrow-left"></i></div>
<div id="item-details-content"></div>
</section>
<div id="video-lightbox" class="lightbox">
<div class="lightbox-content">
<button class="lightbox-close" aria-label="__MSG_closeTrailer__"><i class="fas fa-times"></i></button>
<div class="video-container"><iframe id="video-iframe" frameborder="0" allow="autoplay; encrypted-media"
allowfullscreen title="Video Player"></iframe></div>
</div>
</div>
<div id="photo-lightbox" style="display: none;">
<div class="photo-lightbox-container">
<button class="photo-lightbox-btn" id="photo-lightbox-close" aria-label="__MSG_close__"><i class="fas fa-times"></i></button>
<button class="photo-lightbox-btn" id="photo-lightbox-prev" aria-label="__MSG_previous__"><i class="fas fa-chevron-left"></i></button>
<img src="" alt="__MSG_photoViewer__" class="photo-lightbox-img" id="photo-lightbox-img">
<button class="photo-lightbox-btn" id="photo-lightbox-next" aria-label="__MSG_next__"><i class="fas fa-chevron-right"></i></button>
<div class="photo-lightbox-caption" id="photo-lightbox-caption"></div>
</div>
</div>
<div id="notification-container" style="position: fixed; bottom: 1rem; right: 1rem; z-index: 1090;"></div>
<div id="notification-template" style="display: none;">
<div class="notification">
<div class="notification-content"><i class="fas"></i><span>__MSG_notificationTemplateText__</span></div>
</div>
</div>
<div class="spinner" id="spinner"></div>
<div class="modal fade" id="settingsModal" tabindex="-1" aria-labelledby="settingsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="settingsModalLabel"><i class="fas fa-cog me-2"></i>__MSG_settingsTitleFull__</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="__MSG_close__"></button>
</div>
<div class="modal-body p-0">
<ul class="nav nav-tabs" id="settingsTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab" aria-controls="general" aria-selected="true">
<i class="fas fa-sliders-h me-2"></i>__MSG_settingsTabGeneral__
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="plex-tab" data-bs-toggle="tab" data-bs-target="#plex" type="button" role="tab" aria-controls="plex" aria-selected="false">
<i class="fas fa-server me-2"></i>__MSG_settingsTabPlex__
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="php-gen-tab" data-bs-toggle="tab" data-bs-target="#php-gen" type="button" role="tab" aria-controls="php-gen" aria-selected="false">
<i class="fab fa-php me-2"></i>__MSG_settingsTabPhpGen__
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="data-tab" data-bs-toggle="tab" data-bs-target="#data" type="button" role="tab" aria-controls="data" aria-selected="false">
<i class="fas fa-database me-2"></i>__MSG_settingsTabData__
</button>
</li>
</ul>
<div class="tab-content p-4" id="settingsTabsContent">
<div class="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab">
<h5 class="mb-3">__MSG_settingsApiServer__</h5>
<div class="mb-3">
<label for="tmdbApiKey" class="form-label">__MSG_settingsTmdbApiLabel__</label>
<input type="password" class="form-control" id="tmdbApiKey" placeholder="__MSG_settingsTmdbApiPlaceholder__">
</div>
<div class="mb-3">
<label for="appLanguage" class="form-label">__MSG_settingsTmdbLangLabel__</label>
<select class="form-control" id="appLanguage">
<option value="es">__MSG_lang_es__</option>
<option value="en">__MSG_lang_en__</option>
<option value="fr">__MSG_lang_fr__</option>
<option value="de">__MSG_lang_de__</option>
</select>
</div>
<div class="mb-3">
<label for="phpScriptUrl" class="form-label">__MSG_settingsPhpUrlLabel__</label>
<input type="url" class="form-control" id="phpScriptUrl" placeholder="__MSG_settingsPhpUrlPlaceholder__">
</div>
<h5 class="mt-4 mb-3">__MSG_settingsInterface__</h5>
<div class="d-flex justify-content-between align-items-center mb-3">
<label for="lightModeToggle" class="form-label mb-0">__MSG_settingsLightTheme__</label>
<div class="toggle-switch">
<input type="checkbox" id="lightModeToggle">
<label for="lightModeToggle"></label>
</div>
</div>
<div class="d-flex justify-content-between align-items-center">
<label for="showHeroToggle" class="form-label mb-0">__MSG_settingsShowHero__</label>
<div class="toggle-switch">
<input type="checkbox" id="showHeroToggle" checked>
<label for="showHeroToggle"></label>
</div>
</div>
</div>
<div class="tab-pane fade" id="plex" role="tabpanel" aria-labelledby="plex-tab">
<div class="row">
<div class="col-md-5">
<h5 class="mb-3">__MSG_settingsScanContent__</h5>
<p class="small text-muted mb-3">__MSG_settingsScanDesc__</p>
<label class="d-block mb-2"><input type="checkbox" id="updateMovies" value="movies"> __MSG_settingsScanMovies__</label>
<label class="d-block mb-2"><input type="checkbox" id="updateShows" value="series"> __MSG_settingsScanShows__</label>
<label class="d-block mb-2"><input type="checkbox" id="updateArtists" value="artists"> __MSG_settingsScanArtists__</label>
<label class="d-block mb-2"><input type="checkbox" id="updatePhotos" value="photos"> __MSG_settingsScanPhotos__</label>
<hr class="my-3">
<label class="d-block mb-3"><input type="checkbox" id="updateAll"> __MSG_settingsSelectAll__</label>
<button type="button" class="btn btn-primary w-100" id="confirmScanBtn"><i class="fas fa-sync-alt me-1"></i> __MSG_settingsStartScan__</button>
</div>
<div class="col-md-7">
<h5 class="mb-3">__MSG_settingsPlexTokens__</h5>
<p class="small text-muted mb-2">__MSG_settingsPlexTokensDesc__</p>
<div id="editor"></div>
<button type="button" class="btn btn-success mt-3 w-100" id="saveTokensBtn"><i class="fas fa-save me-1"></i> __MSG_settingsSaveTokens__</button>
</div>
</div>
</div>
<div class="tab-pane fade" id="php-gen" role="tabpanel" aria-labelledby="php-gen-tab">
<h5 class="mb-3">__MSG_settingsPhpGenTitle__</h5>
<div class="row">
<div class="col-lg-5">
<h6>__MSG_settingsPhpFileOptions__</h6>
<div class="mb-3">
<label for="phpSavePath" class="form-label">__MSG_settingsPhpSavePathLabel__</label>
<input type="text" id="phpSavePath" class="form-control form-control-sm" placeholder="__MSG_settingsPhpSavePathPlaceholder__">
</div>
<div class="mb-3">
<label for="phpFilename" class="form-label">__MSG_settingsPhpFilenameLabel__</label>
<input type="text" id="phpFilename" class="form-control form-control-sm" value="CinePlex_Playlist.m3u">
</div>
<h6 class="mt-3">__MSG_settingsPhpFileAction__</h6>
<div class="form-check">
<input class="form-check-input" type="radio" name="phpFileAction" id="phpFileActionAppend" checked>
<label class="form-check-label" for="phpFileActionAppend">
__MSG_settingsPhpActionAppend__
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="phpFileAction" id="phpFileActionOverwrite">
<label class="form-check-label" for="phpFileActionOverwrite">
__MSG_settingsPhpActionOverwrite__
</label>
</div>
<h6>__MSG_settingsPhpSecurity__</h6>
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" id="phpSecretKeyCheck">
<label class="form-check-label" for="phpSecretKeyCheck">__MSG_settingsPhpUseSecretKey__</label>
</div>
<div class="mb-3">
<input type="text" id="phpSecretKey" class="form-control form-control-sm" placeholder="__MSG_settingsPhpSecretKeyPlaceholder__">
</div>
</div>
<div class="col-lg-7">
<h6>__MSG_settingsPhpGeneratedCode__</h6>
<textarea id="generatedPhpCode" class="form-control" rows="12" readonly placeholder="__MSG_settingsPhpGeneratedPlaceholder__"></textarea>
<div class="d-grid gap-2 mt-2">
<button class="btn btn-primary" id="generatePhpScriptBtn"><i class="fas fa-cogs me-2"></i>__MSG_settingsGenerateScript__</button>
<button class="btn btn-secondary" id="copyPhpScriptBtn"><i class="fas fa-copy me-2"></i>__MSG_settingsCopyScript__</button>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="data" role="tabpanel" aria-labelledby="data-tab">
<h5 class="mb-3">__MSG_settingsDataManagement__</h5>
<div class="d-grid gap-3">
<button type="button" class="btn btn-info" id="import-db-btn"><i class="fas fa-file-import me-2"></i>__MSG_settingsImportDb__</button>
<button type="button" class="btn btn-info" id="exportDbBtn"><i class="fas fa-file-export me-2"></i>__MSG_settingsExportDb__</button>
<hr>
<button type="button" class="btn btn-danger" id="clearDataBtn"><i class="fas fa-trash me-2"></i>__MSG_settingsClearContent__</button>
<p class="small text-muted text-center mt-2">__MSG_settingsClearContentDesc__</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">__MSG_settingsClose__</button>
<button type="button" class="btn btn-primary" id="saveSettingsBtn"><i class="fas fa-save me-1"></i> __MSG_settingsSave__</button>
</div>
</div>
</div>
</div>
<div id="musicPlayerContainer">
<div class="sidenav">
<div class="sidenav-header">
<h4>__MSG_musicSidenavTitle__</h4>
<button id="closeSideNavBtn"><i class="fas fa-times"></i></button>
</div>
<div id="artistListContainer" class="music-panel">
<div class="panel-controls">
<div id="tokenSelectorContainer" class="custom-select">
<div class="select-selected">
<span data-value="all">__MSG_musicAllServers__</span>
<i class="fas fa-chevron-down"></i>
</div>
<div class="select-items select-hide"></div>
</div>
<div class="search-wrapper">
<i class="fas fa-search"></i>
<input type="text" id="searchArtist" placeholder="__MSG_musicSearchArtistPlaceholder__">
</div>
</div>
<div id="artistList" class="artist-grid"></div>
<div id="artistNavigation" class="pagination-controls">
<button id="prevArtistsBtn" class="btn-icon-sm" style="display: none;"><i class="fas fa-chevron-left"></i></button>
<span id="artistCounter"></span>
<button id="nextArtistsBtn" class="btn-icon-sm" style="display: none;"><i class="fas fa-chevron-right"></i></button>
</div>
</div>
<div id="songListContainer" class="music-panel">
<div class="panel-controls song-list-controls">
<button id="backBtn" class="btn-icon back-btn-icon"><i class="fas fa-arrow-left"></i></button>
<div id="artist-header-info">
<img id="artist-header-thumb" src="img/no-profile.png" alt="Artista">
<h5 id="artist-header-title">Nombre del Artista</h5>
</div>
</div>
<div class="search-wrapper search-wrapper-songs">
<i class="fas fa-search"></i>
<input type="text" id="searchSong" placeholder="__MSG_musicSearchDiscographyPlaceholder__">
</div>
<div id="listaCanciones" class="song-list"></div>
</div>
<div id="side-nav-now-playing" style="display: none;">
<img id="side-nav-album-cover" src="img/no-poster.png" alt="">
<div class="details">
<p id="side-nav-track-title">__MSG_musicNothingPlaying__</p>
<p id="side-nav-track-artist"></p>
</div>
<div id="side-nav-play-pause" class="control-btn play-pause-main"><i class="fas fa-play"></i></div>
</div>
<div id="loader" class="text-center p-4" style="display: none;">
<div class="spinner-border spinner-border-sm text-primary" role="status">
<span class="visually-hidden">__MSG_loading__</span>
</div>
__MSG_loading__
</div>
</div>
</div>
<div id="miniplayer" style="display: none;">
<div class="miniplayer-bg"></div>
<div class="player-left-info" id="trackInfo">
<img id="albumCover" src="img/no-poster.png" alt="" class="album-cover">
<div class="details">
<p id="trackTitle">__MSG_musicSelectSong__</p>
<p id="trackArtist">__MSG_musicToStart__</p>
</div>
</div>
<div class="player-center-controls">
<div id="player-controls">
<button id="prevBtn" class="control-btn" title="__MSG_previous__"><i class="fas fa-step-backward"></i></button>
<button id="playPauseBtn" class="control-btn play-pause-main" title="Reproducir/Pausar"><i class="fas fa-play"></i></button>
<button id="nextBtn" class="control-btn" title="__MSG_next__"><i class="fas fa-step-forward"></i></button>
</div>
<div class="time-and-progress">
<span id="elapsedTime" class="time-label">0:00</span>
<div id="progressBarContainer">
<div id="seek-hover-bar"></div>
<div id="played-bar"></div>
<div id="progress-handle"></div>
</div>
<span id="remainingTime" class="time-label">0:00</span>
</div>
</div>
<div class="player-right-actions">
<button id="downloadBtn" class="control-btn" title="__MSG_miniplayerDownloadSong__"><i class="fas fa-download"></i></button>
<button id="downloadAlbumBtn" class="control-btn" title="__MSG_miniplayerDownloadAlbum__"><i class="fas fa-file-audio"></i></button>
<div id="volumeControl">
<button id="volume-icon-btn" class="control-btn" title="__MSG_miniplayerVolume__"><i class="fas fa-volume-up"></i></button>
<div class="volume-slider-wrapper">
<input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1">
</div>
</div>
<button id="shuffleBtn" class="control-btn" title="__MSG_miniplayerShuffle__"><i class="fas fa-random"></i></button>
<button id="eqBtn" class="control-btn" title="__MSG_miniplayerEqualizer__"><i class="fas fa-sliders-h"></i></button>
<button id="openMusicPlayerFromMiniplayer" class="control-btn" title="__MSG_miniplayerOpenList__"><i class="fas fa-list"></i></button>
</div>
<audio id="audioPlayer"></audio>
<div id="equalizer-panel">
<div class="equalizer-header">
<h5>__MSG_eqTitle__</h5>
<button id="closeEqBtn" class="close-btn"><i class="fas fa-times"></i></button>
</div>
<div class="equalizer-top-bar">
<div class="control-group presets">
<label for="eq-presets">__MSG_eqPresetsLabel__</label>
<select id="eq-presets" class="custom-select-sm">
<option value="flat">__MSG_eqPresetFlat__</option>
<option value="rock">__MSG_eqPresetRock__</option>
<option value="pop">__MSG_eqPresetPop__</option>
<option value="jazz">__MSG_eqPresetJazz__</option>
<option value="classical">__MSG_eqPresetClassical__</option>
<option value="bass_boost">__MSG_eqPresetBassBoost__</option>
</select>
</div>
<div class="control-group preamp">
<label>__MSG_eqPreampLabel__</label>
<input type="range" id="preamp-slider" class="eq-slider" min="-12" max="12" step="1" value="0">
<span class="slider-value">0 dB</span>
</div>
</div>
<div class="equalizer-bands-grid">
<div class="band">
<label>60</label>
<input type="range" class="eq-slider band-slider" data-band="0" min="-12" max="12" step="1" value="0">
<span class="slider-value">0 dB</span>
</div>
<div class="band">
<label>170</label>
<input type="range" class="eq-slider band-slider" data-band="1" min="-12" max="12" step="1" value="0">
<span class="slider-value">0 dB</span>
</div>
<div class="band">
<label>310</label>
<input type="range" class="eq-slider band-slider" data-band="2" min="-12" max="12" step="1" value="0">
<span class="slider-value">0 dB</span>
</div>
<div class="band">
<label>600</label>
<input type="range" class="eq-slider band-slider" data-band="3" min="-12" max="12" step="1" value="0">
<span class="slider-value">0 dB</span>
</div>
<div class="band">
<label>1k</label>
<input type="range" class="eq-slider band-slider" data-band="4" min="-12" max="12" step="1" value="0">
<span class="slider-value">0 dB</span>
</div>
<div class="band">
<label>3k</label>
<input type="range" class="eq-slider band-slider" data-band="5" min="-12" max="12" step="1" value="0">
<span class="slider-value">0 dB</span>
</div>
<div class="band">
<label>6k</label>
<input type="range" class="eq-slider band-slider" data-band="6" min="-12" max="12" step="1" value="0">
<span class="slider-value">0 dB</span>
</div>
<div class="band">
<label>12k</label>
<input type="range" class="eq-slider band-slider" data-band="7" min="-12" max="12" step="1" value="0">
<span class="slider-value">0 dB</span>
</div>
<div class="band">
<label>14k</label>
<input type="range" class="eq-slider band-slider" data-band="8" min="-12" max="12" step="1" value="0">
<span class="slider-value">0 dB</span>
</div>
<div class="band">
<label>16k</label>
<input type="range" class="eq-slider band-slider" data-band="9" min="-12" max="12" step="1" value="0">
<span class="slider-value">0 dB</span>
</div>
</div>
<div class="visualizer-container">
<canvas id="visualizer-canvas"></canvas>
</div>
</div>
</div>
<div class="modal fade" id="infoModal" tabindex="-1" aria-labelledby="infoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="infoModalLabel">__MSG_infoModalTitle__</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="__MSG_close__"></button>
</div>
<div class="modal-body">
<p id="modalTitle"><strong>__MSG_infoModalFieldTitle__</strong> <span></span></p>
<p id="modalArtist"><strong>__MSG_infoModalFieldArtist__</strong> <span></span></p>
<p id="modalAlbum"><strong>__MSG_infoModalFieldAlbum__</strong> <span></span></p>
<p id="modalSong"><strong>__MSG_infoModalFieldSong__</strong> <span></span></p>
<p id="modalYear"><strong>__MSG_infoModalFieldYear__</strong> <span></span></p>
<p id="modalGenre"><strong>__MSG_infoModalFieldGenre__</strong> <span></span></p>
</div>
</div>
</div>
</div>
<script src="lib/bootstrap.bundle.min.js"></script>
<script src="lib/gsap.min.js"></script>
<script src="lib/ScrollTrigger.min.js"></script>
<script src="lib/particles.min.js"></script>
<script src="lib/ace.js"></script>
<script src="lib/chart.umd.min.js"></script>
<script src="js/i18n.js"></script>
<script type="module" src="js/main.js"></script>
</body>
</html>