src
<![CDATA[
<!DOCTYPE html>
<html lang="en">
<br><br>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { font-family: Arial, sans-serif; text-align: center; }
.cd-container { display: grid; justify-content: center; gap: 1px; }
.cd { width: 96px; height: 96px; position: relative; cursor: pointer; display: flex; align-items: center; transition: transform 0.3s ease-in-out; }
.cd-case { width: 96px; height: 96px; position: relative; transform-origin: left; transition: transform 0.6s ease-in-out; background-size: cover; }
.cd-disc {
width: 100%;
height: 100%;
position: absolute;
right: 0;
opacity: 0;
transition: opacity 0.6s ease-in-out;
background-color: black; /* Background color set to black */
background-size: cover;
border-radius: 50%;
}
.cd.open .cd-case { transform: rotateY(-180deg); }
.cd.open .cd-disc { opacity: 1; }
.cd.zoomed-in { transform: scale(4); z-index: 1000; }
</style>
</head>
<body>
<script>
function checkAndModifyLayout() {
const urlParams = new URLSearchParams(window.location.search);
if (!urlParams.has('layout')) {
// If 'layout' doesn't exist, add it with value '4x8'
urlParams.set('layout', '4x8');
window.location.search = urlParams.toString();
}
}
checkAndModifyLayout();
</script>
<!---CDCase-Start--->
<div class="cd-container" id="cd-container"></div>
<script>
function getQueryParam(name) {
const params = new URLSearchParams(window.location.search);
return params.get(name);
}
function applyLayout() {
const layout = getQueryParam('layout');
const container = document.getElementById('cd-container');
if (layout) {
const [rows, cols] = layout.split('x').map(Number);
if (!isNaN(rows) && !isNaN(cols)) {
container.style.gridTemplateColumns = `repeat(${cols}, 96px)`;
container.style.gridTemplateRows = `repeat(${rows}, 96px)`;
}
}
}
async function loadCDs() {
const response = await fetch('cds.txt');
const text = await response.text();
const container = document.getElementById('cd-container');
text.trim().split('\n').forEach(line => {
const [album, img1, img2] = line.split(' ');
const cd = document.createElement('div');
cd.className = 'cd';
cd.innerHTML = `
<div class="cd-case" style="background-image: url('${img1}');"></div>
<div class="cd-disc" style="background-image: url('${img2}');"></div>
`;
const cdCase = cd.querySelector('.cd-case');
cd.onclick = (event) => {
event.stopPropagation();
document.querySelectorAll('.cd').forEach(el => {
if (el !== cd) el.classList.remove('open', 'zoomed-in');
});
cd.classList.toggle('open');
cd.classList.toggle('zoomed-in');
};
cdCase.onclick = (event) => {
event.stopPropagation();
if (cd.classList.contains('open')) {
window.open(`https://vgmdb.net/search?q=${album}`, '_blank');
}
};
container.appendChild(cd);
});
applyLayout();
document.body.addEventListener('click', () => {
document.querySelectorAll('.cd').forEach(cd => {
cd.classList.remove('open', 'zoomed-in');
});
});
}
loadCDs();
</script>
</body>
</html>
]]></plaintext></details></span>