:root {
–primary: #4CAF50;
–bg: #1e1e1e;
–panel: #2d2d2d;
–text: #ffffff;
–border: #444;
}
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background-color: var(–bg);
color: var(–text);
margin: 0;
padding: 20px;
display: flex;
gap: 20px;
height: 100vh;
box-sizing: border-box;
}
.left-panel, .right-panel {
flex: 1;
background: var(–panel);
padding: 20px;
border-radius: 8px;
display: flex;
flex-direction: column;
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
overflow-y: auto;
}
h2, h3 {
margin-top: 0;
border-bottom: 1px solid var(–border);
padding-bottom: 10px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-size: 14px;
font-weight: bold;
}
input, textarea, select {
width: 100%;
padding: 10px;
background: #1a1a1a;
border: 1px solid var(–border);
color: white;
border-radius: 4px;
box-sizing: border-box;
}
button {
background: var(–primary);
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
width: 100%;
transition: background 0.2s;
}
button:hover {
background: #45a049;
}
.divider {
height: 1px;
background: var(–border);
margin: 20px 0;
}
pre {
background: #1a1a1a;
padding: 15px;
border-radius: 4px;
border: 1px solid var(–border);
overflow-x: auto;
flex-grow: 1;
color: #9cdcfe;
}
.success-msg {
color: #4CAF50;
font-size: 14px;
display: none;
text-align: center;
margin-top: 10px;
}

// Your generated code will appear here...

// Main state object holding the data
let ZG_COLLECTIONS = {};

function updateOutput() {
const outputArea = document.getElementById(‘codeOutput’);
// Format the object beautifully with 2 spaces indentation
const jsonString = JSON.stringify(ZG_COLLECTIONS, null, 2);

const finalCode = `
window.ZG_COLLECTIONS = ${jsonString};
`;

outputArea.textContent = finalCode;
updateDropdown();
}

function updateDropdown() {
const select = document.getElementById(‘targetCollection’);
select.innerHTML = ”;

const keys = Object.keys(ZG_COLLECTIONS);
if (keys.length === 0) {
select.innerHTML = ‘– Create a collection first –‘;
return;
}

keys.forEach(key => {
const option = document.createElement(‘option’);
option.value = key;
option.textContent = ZG_COLLECTIONS[key].name + ` (${key})`;
select.appendChild(option);
});
}

function addCollection() {
const id = document.getElementById(‘colId’).value.trim();
const name = document.getElementById(‘colName’).value.trim();
const desc = document.getElementById(‘colDesc’).value.trim();
const cover = document.getElementById(‘colCover’).value.trim();

if (!id || !name) {
alert(“Collection ID and Name are required!”);
return;
}

ZG_COLLECTIONS[id] = {
name: name,
description: desc,
covers: cover ? [cover] : [],
games: []
};

// Clear inputs
document.getElementById(‘colId’).value = ”;
document.getElementById(‘colName’).value = ”;
document.getElementById(‘colDesc’).value = ”;
document.getElementById(‘colCover’).value = ”;

updateOutput();
}

function addGame() {
const targetId = document.getElementById(‘targetCollection’).value;
const title = document.getElementById(‘gameTitle’).value.trim();
const url = document.getElementById(‘gameUrl’).value.trim();
const image = document.getElementById(‘gameImage’).value.trim();

if (!targetId) {
alert(“Please create and select a collection first!”);
return;
}
if (!title || !url || !image) {
alert(“Title, URL, and Image are required to add a game!”);
return;
}

// Push game to the selected collection
ZG_COLLECTIONS[targetId].games.push({
title: title,
url: url,
image: image
});

// Clear game inputs
document.getElementById(‘gameTitle’).value = ”;
document.getElementById(‘gameUrl’).value = ”;
document.getElementById(‘gameImage’).value = ”;

updateOutput();
}

function copyCode() {
const codeText = document.getElementById(‘codeOutput’).textContent;
navigator.clipboard.writeText(codeText).then(() => {
const msg = document.getElementById(‘copySuccess’);
msg.style.display = ‘block’;
setTimeout(() => {
msg.style.display = ‘none’;
}, 2000);
}).catch(err => {
alert(“Failed to copy code: ” + err);
});
}