Spaces:
Running
Running
File size: 3,614 Bytes
f67eee9 4702132 f67eee9 4702132 f67eee9 4702132 f67eee9 4702132 f67eee9 4702132 f67eee9 4702132 f67eee9 4702132 f67eee9 4702132 f67eee9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
async function loadContent() {
try {
const response = await fetch("content.json");
const content = await response.json();
// Header
document.querySelector("[data-title]").textContent = content.title;
document.querySelector("[data-version]").textContent = content.version;
document.querySelector("[data-subtitle]").textContent = content.subtitle;
document.querySelector("[data-meta]").textContent = content.meta;
document.querySelector("[data-badge]").textContent = content.badge;
document.title = content.title;
// Source
const sourceUrlEl = document.querySelector("[data-source-url]");
sourceUrlEl.href = content.sourceUrl;
sourceUrlEl.textContent = content.sourceUrl || "No source available";
document.querySelector("[data-source-text]").textContent = content.sourceText;
// Sections
const sectionsContainer = document.querySelector("[data-sections]");
content.sections.forEach((section) => {
const sectionEl = document.createElement("div");
sectionEl.className = "section";
sectionEl.innerHTML = `
<div class="section-label">${content.sectionLabel}</div>
<h2>${section.title}</h2>
${Array.isArray(section.content)
? `<ul>${section.content.map((item) => `<li>${item}</li>`).join("")}</ul>`
: `<p>${section.content}</p>`
}
`;
sectionsContainer.appendChild(sectionEl);
});
// Side panel
const sidePanel = document.querySelector("[data-sidepanel]");
sidePanel.innerHTML = `
<div class="side-card">
<div class="pill">
<span class="pill-dot"></span>
${content.sidePanel.pill}
</div>
<h3 class="side-title">${content.sidePanel.principles.title}</h3>
<div class="principles-list" data-principles></div>
</div>
<div class="side-card">
<h3 class="side-title">${content.sidePanel.snapshot.title}</h3>
<div class="meta-grid">
${content.sidePanel.snapshot.items
.map(([key, value]) => `
<div class="meta-item">
<span>${key}</span>
<span>${value}</span>
</div>
`)
.join("")}
</div>
</div>
<div class="side-card">
<h3 class="side-title">${content.sidePanel.hint.title}</h3>
<p class="side-text">${content.sidePanel.hint.text}</p>
</div>
`;
// Render principles with SVG icons
const principlesList = document.querySelector("[data-principles]");
if (content.sidePanel.principles.items) {
const items = content.sidePanel.principles.items;
const allowedItems = items.filter(item => item.type === 'allow');
const avoidItems = items.filter(item => item.type === 'avoid');
principlesList.innerHTML = `
<div class="permissions-group">
${allowedItems.map(item => `
<div class="permission-item">
<img src="assets/correct.svg" width="16" height="16" alt="Allowed" />
<span>${item.text}</span>
</div>
`).join('')}
</div>
<div class="permissions-group avoid">
${avoidItems.map(item => `
<div class="permission-item">
<img src="assets/avoid.svg" width="16" height="16" alt="Prohibited" />
<span>${item.text}</span>
</div>
`).join('')}
</div>
`;
}
} catch (error) {
console.error("Error loading content:", error);
document.body.innerHTML = "<h1>Error loading license content</h1>";
}
}
loadContent();
|