codePugHacKEr/pages46
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update index.html

Browse source
This commit is contained in:
radmanplays 2024-02-04 11:46:00 +03:30 • committed by GitHub
commit fa1e06b4c5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 1 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

68
index.html
View file

@ -26,73 +26,7 @@
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
fetch('mods.json')
.then(response => response.json())
.then(data => {
const modContainer = document.getElementById('modContainer');
const searchInput = document.getElementById('searchInput');
// Remove existing cards
modContainer.innerHTML = '';
// Add cards from the JSON data
data.mods.forEach(mod => {
const card = document.createElement('div');
card.className = 'col-md-11 col-lg-12 col-xl-11';
card.innerHTML = `
<div class="card">
<div class="card-body p-4">
<h4 class="card-title" style="padding-top: 0px;margin-left: 3px;padding-bottom: 0px;margin-bottom: 2px;margin-top: 0px;padding-left: 112px;">${mod['display-name']}</h4>
<p style="padding-left: 108px;margin-top: 3px;margin-bottom: -25px;margin-left: 5px;">Author :&nbsp;</p>
<a href="${mod['author-link']}" style="padding-left: 113px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;margin-top: -23px;margin-bottom: -15px;margin-left: 65px;">
<i class="far fa-user" style="font-size: 16px;"></i>&nbsp;${mod.author}&nbsp;
</a>
<p class="card-text" style="margin-top: 3px;padding-left: 113px;margin-bottom: -35px;padding-bottom: 0px;padding-top: 6px;">${mod.description}</p>
<img style="padding-top: 0px;padding-bottom: 0px;margin-bottom: -48px;margin-top: -89px;" src="${mod.icon}" width="100">
</div>
</div>`;
modContainer.appendChild(card);
});
// Add event listener for search input
searchInput.addEventListener('input', () => {
const searchValue = searchInput.value.toLowerCase();
// Filter mods based on search input
const filteredMods = data.mods.filter(mod =>
mod['display-name'].toLowerCase().includes(searchValue) ||
mod.description.toLowerCase().includes(searchValue) ||
mod['author-link'].toLowerCase().includes(searchValue)
);
// Update mod cards based on filtered mods
modContainer.innerHTML = '';
filteredMods.forEach(mod => {
const card = document.createElement('div');
card.className = 'col-md-11 col-lg-12 col-xl-11';
card.innerHTML = `
<div class="card">
<div class="card-body p-4">
<h4 class="card-title" style="padding-top: 0px;margin-left: 3px;padding-bottom: 0px;margin-bottom: 2px;margin-top: 0px;padding-left: 112px;">${mod['display-name']}</h4>
<p style="padding-left: 108px;margin-top: 3px;margin-bottom: -25px;margin-left: 5px;">Author :&nbsp;</p>
<a href="${mod['author-link']}" style="padding-left: 113px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;margin-top: -23px;margin-bottom: -15px;margin-left: 65px;">
<i class="far fa-user" style="font-size: 16px;"></i>&nbsp;${mod.author}&nbsp;
</a>
<p class="card-text" style="margin-top: 3px;padding-left: 113px;margin-bottom: -35px;padding-bottom: 0px;padding-top: 6px;">${mod.description}</p>
<img style="padding-top: 0px;padding-bottom: 0px;margin-bottom: -48px;margin-top: -89px;" src="${mod.icon}" width="100">
</div>
</div>`;
modContainer.appendChild(card);
});
});
})
.catch(error => console.error('Error fetching mods.json:', error));
</script>
<script src="app.js"></script>
</body>
</html>