|
<!DOCTYPE html> |
|
<html lang="en" data-bs-theme="dark"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>discography_v2_cdn_front</title> |
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/moment@2/moment.min.js"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/vidstack@1.0.0/cdn/with-layouts/vidstack.js" type="module"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js"></script> |
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css"> |
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> |
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/fontawesome.min.css"> |
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vidstack@1.0.0/player/styles/default/theme.min.css"> |
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vidstack@1.0.0/player/styles/default/layouts/audio.min.css"> |
|
<link rel="preconnect" href="https://rsms.me"> |
|
<link rel="stylesheet" href="https://rsms.me/inter/inter.css"> |
|
<link rel="preconnect" href="https://cdn.jsdelivr.net"> |
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css"> |
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"> |
|
<link rel="stylesheet" href="style.css"> |
|
</head> |
|
<body> |
|
<div id="fsOverlayLoadingScr" class=""> |
|
<div id="fsOverlayLoadingScr_loadingSpinner"> |
|
<svg class="fsOverlayLoadingScr_loadingCircular"> |
|
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/> |
|
</svg> |
|
</div> |
|
</div> |
|
<div id="mainContainer" class="container px-4 my-4"> |
|
<h1 class="user-select-none text-center">discography_v2_cdn_front</h1> |
|
<hr class="my-4"> |
|
<div id="topMenuButtonContainer" class="text-center"> |
|
<a class="btn btn-primary mx-1" href="#albumAllListTitleLabel" role="button">Album List</a> |
|
<a class="btn btn-primary mx-1" href="#trackAllListTitleLabel" role="button">Track List</a> |
|
<button id="showSettingsModalButton" class="btn btn-primary mx-1" type="button" data-bs-toggle="modal" data-bs-target="#settingsModal">Settings</button> |
|
</div> |
|
<div class="modal fade user-select-none" id="settingsModal" tabindex="-1"> |
|
<div class="modal-dialog modal-dialog-scrollable"> |
|
<div class="modal-content"> |
|
<div class="modal-header"> |
|
<h1 class="modal-title fs-5" id="settingsModalLabel"><i class="bi bi-gear-wide-connected me-2"></i>Settings</h1> |
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button> |
|
</div> |
|
<div class="modal-body"> |
|
<h1 class="fs-3">UI</h1> |
|
<form id="settingsUiSwitchUiMode" class="d-flex justify-content-between align-items-center"> |
|
<label>Switch UI mode</label> |
|
<div class="btn-group w-100%" id="settingsUiSwitchUiModeDiv" role="group"> |
|
<input type="radio" class="btn-check" name="settingsUiSwitchUiMode" id="settingsUiSwitchUiModeLight" autocomplete="off" value="light"> |
|
<label class="btn btn-outline-primary" for="settingsUiSwitchUiModeLight">Light</label> |
|
<input type="radio" class="btn-check" name="settingsUiSwitchUiMode" id="settingsUiSwitchUiModeDark" autocomplete="off" value="dark"> |
|
<label class="btn btn-outline-primary" for="settingsUiSwitchUiModeDark">Dark</label> |
|
</div> |
|
</form> |
|
</div> |
|
<div class="modal-footer"> |
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> |
|
<button type="button" class="btn btn-primary" id="settingsApplyButton">Save/Apply</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<hr class="my-4"> |
|
<h3 id="albumAllListTitleLabel" class="mb-3 user-select-none">Album List</h3> |
|
<div class="fetchingDataNowLabel user-select-none d-none"> |
|
<div class="d-inline-flex align-items-center mb-3"> |
|
<div class="spinner-border text-primary me-2" role="status"> |
|
<span class="visually-hidden">Loading...</span> |
|
</div> |
|
<span>Fetching data ...</span> |
|
</div> |
|
</div> |
|
<div id="albumAllCardGroup" class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-4 g-4 user-select-none"></div> |
|
<hr class="my-4"> |
|
<h3 id="trackAllListTitleLabel" class="mb-3 user-select-none">Track List</h3> |
|
<div class="fetchingDataNowLabel user-select-none d-none"> |
|
<div class="d-inline-flex align-items-center mb-3"> |
|
<div class="spinner-border text-primary me-2" role="status"> |
|
<span class="visually-hidden">Loading...</span> |
|
</div> |
|
<span>Fetching data ...</span> |
|
</div> |
|
</div> |
|
<div id="trackAllListGroup" class="list-group user-select-none"> |
|
<button type="button" class="list-group-item list-group-item-action d-flex" disabled> |
|
<div class="flex-fill w-100">Artist</div> |
|
<div class="flex-fill w-100">Album</div> |
|
<div class="flex-fill w-100">Track</div> |
|
</button> |
|
</div> |
|
<div class="modal fade user-select-none" data-bs-backdrop="static" data-bs-keyboard="false" id="albumInfoModal" tabindex="-1"> |
|
<div class="modal-dialog modal-lg modal-fullscreen-md-down modal-dialog-scrollable"> |
|
<div class="modal-content"> |
|
<div class="modal-header"> |
|
<h1 class="modal-title fs-5" id="albumInfoModalLabel"><i class="bi bi-file-earmark-music me-2"></i>Album Info</h1> |
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button> |
|
</div> |
|
<div class="modal-body"> |
|
<div id="albumInfoModalContent" class="bg-transparent position-relative"> |
|
<h3>Metadata</h3> |
|
<h4>General</h4> |
|
<table class="table table-sm table-responsive table-hover table-borderless align-middle"> |
|
<tbody> |
|
<tr> |
|
<td>Album Title</td> |
|
<td id="albumInfoModal-metadataTable-albumTitle">---</td> |
|
</tr> |
|
<tr> |
|
<td>Album Artist</td> |
|
<td id="albumInfoModal-metadataTable-albumArtist">---</td> |
|
</tr> |
|
<tr> |
|
<td>Album Released</td> |
|
<td id="albumInfoModal-metadataTable-albumReleaseDate">YYYY/MM/DD</td> |
|
</tr> |
|
<tr> |
|
<td>Album Barcode</td> |
|
<td id="albumInfoModal-metadataTable-albumBarcode">Sample Number</td> |
|
</tr> |
|
<tr> |
|
<td>Album Copyright</td> |
|
<td id="albumInfoModal-metadataTable-albumCopyright">---</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
<h4>Track List</h4> |
|
<div id="albumInfoModal-trackAllListGroup" class="list-group user-select-none mb-4"> |
|
|
|
|
|
|
|
|
|
</div> |
|
<h4>External Links</h4> |
|
<table id="albumInfoModal-externalLinkTableRoot" class="table table-sm table-responsive table-hover table-borderless align-middle"> |
|
<tbody id="albumInfoModal-externalLinkTable"> |
|
</tbody> |
|
</table> |
|
<h4>Cover Artwork Images</h4> |
|
<div class="mb-3" id="albumInfoModal-coverArtLinkDiv"> |
|
</div> |
|
<div id="debugAreaSection" class="d-none"> |
|
<h3>Debug Area</h3> |
|
<div class="accordion" id="albumInfoModal-DebugAcd"> |
|
<div class="accordion-item"> |
|
<h2 class="accordion-header"> |
|
<button class="accordion-button collapsed user-select-none" type="button" data-bs-toggle="collapse" data-bs-target="#albumInfoModal-DebugAcdInCollapse">Parsed data output (album)</button> |
|
</h2> |
|
<div id="albumInfoModal-DebugAcdInCollapse" class="accordion-collapse collapse" data-bs-parent="#albumInfoModal-DebugAcd"> |
|
<div class="accordion-body"> |
|
<pre class=""><code id="albumInfoModal-DebugAcdOutputEl"></code></pre> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="modal-footer"> |
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="modal fade user-select-none" data-bs-backdrop="static" data-bs-keyboard="false" id="trackInfoModal" tabindex="-1"> |
|
<div class="modal-dialog modal-lg modal-fullscreen-md-down modal-dialog-scrollable"> |
|
<div class="modal-content"> |
|
<div class="modal-header"> |
|
<h1 class="modal-title fs-5" id="trackInfoModalLabel"><i class="bi bi-file-earmark-music me-2"></i>Track Info</h1> |
|
<button type="button" id="trackInfoModal-ModalCloseIconButton" class="btn-close" data-bs-dismiss="modal"></button> |
|
</div> |
|
<div class="modal-body"> |
|
<h3>Direct Download</h3> |
|
<table class="table table-sm table-responsive table-hover table-borderless align-middle"> |
|
<tbody id="trackInfoModal-downloadTable"> |
|
</tbody> |
|
</table> |
|
<h3>Preview</h3> |
|
<audio id="trackInfoModal-previewAudio" class="w-100 align-middle text-center mb-3" controls controlslist="nodownload" preload="none" src=""></audio> |
|
<h3>Metadata</h3> |
|
<h4>General</h4> |
|
<table class="table table-sm table-responsive table-hover table-borderless align-middle"> |
|
<tbody> |
|
<tr> |
|
<td>Track Title</td> |
|
<td id="trackInfoModal-metadataTable-trackTitle">---</td> |
|
</tr> |
|
<tr> |
|
<td>Artists</td> |
|
<td id="trackInfoModal-metadataTable-artists">---</td> |
|
</tr> |
|
<tr> |
|
<td>Lyricist</td> |
|
<td id="trackInfoModal-metadataTable-lyricist">---</td> |
|
</tr> |
|
<tr> |
|
<td>Composer</td> |
|
<td id="trackInfoModal-metadataTable-composer">---</td> |
|
</tr> |
|
<tr> |
|
<td>Arranger</td> |
|
<td id="trackInfoModal-metadataTable-arranger">---</td> |
|
</tr> |
|
<tr> |
|
<td>Track Duration (Readable)</td> |
|
<td id="trackInfoModal-metadataTable-trackDurationReadable">---</td> |
|
</tr> |
|
<tr> |
|
<td>Track Duration (MS)</td> |
|
<td id="trackInfoModal-metadataTable-trackDurationMsec">---</td> |
|
</tr> |
|
<tr> |
|
<td>Track Duration (Samples)</td> |
|
<td id="trackInfoModal-metadataTable-trackDurationSamples">---</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
<table class="table table-sm table-responsive table-hover table-borderless align-middle"> |
|
<tbody> |
|
<tr> |
|
<td>Album Title</td> |
|
<td id="trackInfoModal-metadataTable-albumTitle">---</td> |
|
</tr> |
|
<tr> |
|
<td>Album Artist</td> |
|
<td id="trackInfoModal-metadataTable-albumArtist">---</td> |
|
</tr> |
|
<tr> |
|
<td>Album Released</td> |
|
<td id="trackInfoModal-metadataTable-albumReleaseDate">YYYY/MM/DD</td> |
|
</tr> |
|
<tr> |
|
<td>Album Barcode</td> |
|
<td id="trackInfoModal-metadataTable-albumBarcode">Sample Number</td> |
|
</tr> |
|
<tr> |
|
<td>Album Copyright</td> |
|
<td id="trackInfoModal-metadataTable-albumCopyright">---</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
<h4>External Links</h4> |
|
<table id="trackInfoModal-externalLinkTableRoot" class="table table-sm table-responsive table-hover table-borderless align-middle"> |
|
<tbody id="trackInfoModal-externalLinkTable"> |
|
</tbody> |
|
</table> |
|
<h4>Cover Artwork Images</h4> |
|
<div class="mb-3" id="trackInfoModal-coverArtLinkDiv"> |
|
</div> |
|
<div id="debugAreaSection" class="d-none"> |
|
<h3>Debug Area</h3> |
|
<div class="accordion" id="trackInfoModal-DebugAcd"> |
|
<div class="accordion-item"> |
|
<h2 class="accordion-header"> |
|
<button class="accordion-button collapsed user-select-none" type="button" data-bs-toggle="collapse" data-bs-target="#trackInfoModal-DebugAcdInCollapse">Parsed data output (album)</button> |
|
</h2> |
|
<div id="trackInfoModal-DebugAcdInCollapse" class="accordion-collapse collapse" data-bs-parent="#trackInfoModal-DebugAcd"> |
|
<div class="accordion-body"> |
|
<pre class=""><code id="trackInfoModal-DebugAcdOutputEl"></code></pre> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="modal-footer"> |
|
<button type="button" id="trackInfoModal-ModalCloseButton" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="modal fade user-select-none" data-bs-backdrop="static" data-bs-keyboard="false" id="trackInfoModal2" tabindex="-1"> |
|
<div class="modal-dialog modal-lg modal-fullscreen-md-down modal-dialog-scrollable"> |
|
<div class="modal-content"> |
|
<div class="modal-header"> |
|
<h1 class="modal-title fs-5" id="trackInfoModal2Label"><i class="bi bi-file-earmark-music me-2"></i>Track Info</h1> |
|
<button type="button" id="trackInfoModal2-ModalCloseIconButton" class="btn-close" data-bs-target="#albumInfoModal" data-bs-toggle="modal"></button> |
|
</div> |
|
<div class="modal-body"> |
|
<h3>Direct Download</h3> |
|
<table class="table table-sm table-responsive table-hover table-borderless align-middle"> |
|
<tbody id="trackInfoModal2-downloadTable"> |
|
</tbody> |
|
</table> |
|
<h3>Preview</h3> |
|
<audio id="trackInfoModal2-previewAudio" class="w-100 align-middle text-center mb-3" controls controlslist="nodownload" preload="none" src=""></audio> |
|
<h3>Metadata</h3> |
|
<h4>General</h4> |
|
<table class="table table-sm table-responsive table-hover table-borderless align-middle"> |
|
<tbody> |
|
<tr> |
|
<td>Track Title</td> |
|
<td id="trackInfoModal2-metadataTable-trackTitle">---</td> |
|
</tr> |
|
<tr> |
|
<td>Artists</td> |
|
<td id="trackInfoModal2-metadataTable-artists">---</td> |
|
</tr> |
|
<tr> |
|
<td>Lyricist</td> |
|
<td id="trackInfoModal2-metadataTable-lyricist">---</td> |
|
</tr> |
|
<tr> |
|
<td>Composer</td> |
|
<td id="trackInfoModal2-metadataTable-composer">---</td> |
|
</tr> |
|
<tr> |
|
<td>Arranger</td> |
|
<td id="trackInfoModal2-metadataTable-arranger">---</td> |
|
</tr> |
|
<tr> |
|
<td>Track Duration (Readable)</td> |
|
<td id="trackInfoModal2-metadataTable-trackDurationReadable">---</td> |
|
</tr> |
|
<tr> |
|
<td>Track Duration (MS)</td> |
|
<td id="trackInfoModal2-metadataTable-trackDurationMsec">---</td> |
|
</tr> |
|
<tr> |
|
<td>Track Duration (Samples)</td> |
|
<td id="trackInfoModal2-metadataTable-trackDurationSamples">---</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
<table class="table table-sm table-responsive table-hover table-borderless align-middle"> |
|
<tbody> |
|
<tr> |
|
<td>Album Title</td> |
|
<td id="trackInfoModal2-metadataTable-albumTitle">---</td> |
|
</tr> |
|
<tr> |
|
<td>Album Artist</td> |
|
<td id="trackInfoModal2-metadataTable-albumArtist">---</td> |
|
</tr> |
|
<tr> |
|
<td>Album Released</td> |
|
<td id="trackInfoModal2-metadataTable-albumReleaseDate">YYYY/MM/DD</td> |
|
</tr> |
|
<tr> |
|
<td>Album Barcode</td> |
|
<td id="trackInfoModal2-metadataTable-albumBarcode">Sample Number</td> |
|
</tr> |
|
<tr> |
|
<td>Album Copyright</td> |
|
<td id="trackInfoModal2-metadataTable-albumCopyright">---</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
<h4>External Links</h4> |
|
<table id="trackInfoModal2-externalLinkTableRoot" class="table table-sm table-responsive table-hover table-borderless align-middle"> |
|
<tbody id="trackInfoModal2-externalLinkTable"> |
|
</tbody> |
|
</table> |
|
<h4>Cover Artwork Images</h4> |
|
<div class="mb-3" id="trackInfoModal2-coverArtLinkDiv"> |
|
</div> |
|
<div id="debugAreaSection" class="d-none"> |
|
<h3>Debug Area</h3> |
|
<div class="accordion" id="trackInfoModal2-DebugAcd"> |
|
<div class="accordion-item"> |
|
<h2 class="accordion-header"> |
|
<button class="accordion-button collapsed user-select-none" type="button" data-bs-toggle="collapse" data-bs-target="#trackInfoModal2-DebugAcdInCollapse">Parsed data output (album)</button> |
|
</h2> |
|
<div id="trackInfoModal2-DebugAcdInCollapse" class="accordion-collapse collapse" data-bs-parent="#trackInfoModal2-DebugAcd"> |
|
<div class="accordion-body"> |
|
<pre class=""><code id="trackInfoModal2-DebugAcdOutputEl"></code></pre> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="modal-footer"> |
|
<button type="button" id="trackInfoModal2-ModalCloseButton" class="btn btn-secondary" data-bs-target="#albumInfoModal" data-bs-toggle="modal">Close</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<hr class="my-4"> |
|
<div id="debugAreaSection" class="d-none"> |
|
<h3 class="user-select-none">Debug Area</h3> |
|
<button id="trackListingTestButton" class="btn btn-primary mb-3" type="button"><i class="bi bi-menu-button-wide me-1"></i>List track</button> |
|
<h4 class="user-select-none">Fetch data output testing</h3> |
|
<button id="loadDatabaseTestButton" class="btn btn-primary mb-3" type="button"><i class="bi bi-database-down me-1"></i>Load Database</button> |
|
<div class="fetchingDataNowLabel user-select-none d-none"> |
|
<div class="d-inline-flex align-items-center mb-3"> |
|
<div class="spinner-border text-primary me-2" role="status"> |
|
<span class="visually-hidden">Loading...</span> |
|
</div> |
|
<span>Fetching data ...</span> |
|
</div> |
|
</div> |
|
<div class="accordion" id="databaseTestOutputAccordion"> |
|
<div class="accordion-item"> |
|
<h2 class="accordion-header"> |
|
<button class="accordion-button collapsed user-select-none" type="button" data-bs-toggle="collapse" data-bs-target="#databaseTestRawOutputCollapse"> |
|
Raw data output |
|
</button> |
|
</h2> |
|
<div id="databaseTestRawOutputCollapse" class="accordion-collapse collapse" data-bs-parent="#databaseTestOutputAccordion"> |
|
<div class="accordion-body"> |
|
<pre class=""><code id="databaseTestInfoCodeEl"></code></pre> |
|
<pre class=""><code id="databaseTestOutputCodeEl"></code></pre> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<hr class="my-4"> |
|
</div> |
|
<iframe data-aa='2297053' src='//acceptable.a-ads.com/2297053' style='border:0px; padding:0; width:100%; height:100%; overflow:hidden; background-color: transparent;'></iframe> |
|
<footer> |
|
<p class="my-1"><small class="text-body-tertiary user-select-none">This page using: Bootstrap, Axios, CryptoJS, A-ADS, Inter, Fira Code, Noto Sans JP</small></p> |
|
<p class="my-1"><small class="text-body-tertiary user-select-none">(C) 2024 daydreamer-json, and other contributer. All rights reserved.</small></p> |
|
</footer> |
|
</div> |
|
<script src="script.js"></script> |
|
</body> |
|
</html> |
|
|
