<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Template Library</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #fff;
color: #000;
margin: 0;
padding: 1rem;
}
#templateContainer {
margin: 0;
padding: 0;
border: none;
box-shadow: none;
}
.topic-section {
margin-bottom: 2rem;
border: 1px solid #c9e3db;
border-radius: 8px;
}
.topic-heading {
background-color: #c9e3db;
padding: 0.75rem 1rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
}
.arrow {
transition: transform 0.3s;
}
.collapsed .arrow {
transform: rotate(-90deg);
}
.template-list {
list-style: none;
margin: 0;
padding: 0 1rem 1rem;
display: block;
}
.template-list li {
padding: 0.5rem 0;
border-bottom: 1px solid #eee;
}
.template-list a {
text-decoration: none;
color: #D2181F;
font-weight: 500;
}
.date {
margin-left: 10px;
font-size: 0.9em;
color: #666;
}
.new-badge {
background-color: #D2181F;
color: white;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.75em;
margin-left: 10px;
}
#searchInput {
margin-bottom: 1rem;
padding: 0.5rem;
width: 100%;
max-width: 400px;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
<input type="text" id="searchInput" placeholder="Search
templates...">
<div id="templateContainer"></div>
<script>
const sheetUrl = '[Link]
1vQGpS9aBJqQpVuxCFtUi91QkjNT0r0Ic1XE8PTRIHQq3k7co9wCIA5P2thy4s
ka9IG_2aKinDYdMeIX/pub?output=csv';
fetch(sheetUrl)
.then(res => [Link]())
.then(csvText => {
const rows = [Link]().split('\n');
const headers = [Link]().split(',');
const data = [Link](row => {
const values = [Link](',');
return [Link]((acc, header, i) => {
acc[[Link]()] = values[i] ? values[i].trim() : '';
return acc;
}, {});
});
initTemplateTable(data);
});
function initTemplateTable(data) {
const container = [Link]('templateContainer');
function renderTable(filteredData) {
[Link] = '';
const grouped = {};
[Link](item => {
if (!grouped[[Link]]) grouped[[Link]] = [];
grouped[[Link]].push(item);
});
[Link](grouped).forEach(([topic, items]) => {
const section = [Link]('div');
[Link]('topic-section');
const heading = [Link]('div');
[Link] = 'topic-heading';
[Link] = `<span>${topic}</span><span
class="arrow">▼</span>`;
const list = [Link]('ul');
[Link] = 'template-list';
[Link] = 'block';
[Link]('click', () => {
const isVisible = [Link] !== 'none';
[Link] = isVisible ? 'none' : 'block';
[Link]('collapsed');
});
[Link](item => {
const listItem = [Link]('li');
const dateParts = [Link]('/');
const fileDate = new Date(`20${dateParts[2]}`, dateParts[1] - 1,
dateParts[0]);
const now = new Date();
const isNew = [Link]() === [Link]() &&
[Link]() === [Link]();
[Link] = `
<a href="${[Link]}" target="_blank">${[Link]}</a>
<span class="date">(${[Link]('en-GB',
{ month: 'long', year: 'numeric' })})</span>
${isNew ? '<span class="new-badge">NEW</span>' : ''}
`;
[Link](listItem);
});
[Link](heading);
[Link](list);
[Link](section);
});
}
renderTable(data);
[Link]('searchInput').addEventListener('input', (e)
=> {
const value = [Link]();
const filtered = [Link](item =>
[Link]().includes(value) ||
[Link]().includes(value)
);
renderTable(filtered);
});
}
</script>
