Skip to content

Commit

Permalink
feat: make better meow
Browse files Browse the repository at this point in the history
  • Loading branch information
prplwtf committed Dec 30, 2024
1 parent 8a3c4e6 commit e8a4d6c
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 3 deletions.
6 changes: 5 additions & 1 deletion browse/extensions/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,11 @@
cursor: pointer;
}
.platform-button:hover .platform-button-content {
background-color: color-mix(in hsl, var(--bs-body-bg) 90%, white);
--background-color: color-mix(in hsl, var(--bs-body-bg) 90%, white);
background-color: var(--background-color);
}
[data-bs-theme=light] .platform-button-content {
--background-color: color-mix(in hsl, var(--bs-body-bg) 90%, black) !important;
}

.extension-card-content {
Expand Down
87 changes: 85 additions & 2 deletions browse/extensions/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -93,8 +93,8 @@

<!-- Content -->
<div class="container mt-5 mb-5 pt-5" id="productContainer">
<div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-3 shadow-lg pt-5">
<div class="d-flex flex-column h-100 p-5 pb-4 text-white text-shadow-1">
<div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-3 position-relative pt-5 mb-4">
<div class="d-flex flex-column h-100 p-5 pb-4 text-white text-shadow-1 extension-card-content">
<h3 class="pt-5 mt-5 mb-3 placeholder-wave">
<span class="placeholder col-6 rounded-3"></span>
</h3>
Expand All @@ -103,6 +103,58 @@ <h3 class="pt-5 mt-5 mb-3 placeholder-wave">
</p>
</div>
</div>

<div class="row g-4">
<div class="col-lg-8 col-xs-12 order-lg-0 order-1">
<center>
<div class="blueprint-promotion">
<h2 class="h3 my-3">
<span class="placeholder-wave">
<span class="placeholder col-5 rounded-3"></span>
</span>
</h2>
<p>
<span class="placeholder-wave">
<span class="placeholder col-8 rounded-3"></span>
<span class="placeholder col-8 rounded-3"></span>
<span class="placeholder col-8 rounded-3"></span>
</span>
</p>
<span class="placeholder-wave">
<span class="placeholder col-4 rounded-3"></span>
</span>
</div>
</center>
</div>
<div class="col-lg-4 col-md-12">
<div class="platform-button placeholder-wave">
<span class="placeholder col-12 rounded-3 mb-2"></span>
</div>

<div class="bg-secondary-subtle p-3 mt-4 rounded-2">
<span class="placeholder-wave">
<span class="placeholder col-9 rounded-3"></span>
</span>
<br>
<span class="placeholder-wave">
<span class="placeholder col-10 rounded-3"></span>
</span>
<br>
<span class="placeholder-wave">
<span class="placeholder col-4 rounded-3"></span>
</span>

<div class="mt-2">
<span class="placeholder-wave">
<span class="placeholder col-2 rounded-3"></span>
<span class="placeholder col-3 rounded-3"></span>
<span class="placeholder col-4 rounded-3"></span>
</span>
</div>
</div>

</div>
</div>
</div>


Expand Down Expand Up @@ -206,6 +258,10 @@ <h2 class="h3 my-3">
<br><i class="bi bi-check"></i> Extensions install within minutes
<br><i class="bi bi-check"></i> Loved by developers and system administrators
</p>
<a href="../../" target="_blank" class="text-decoration-none">
Learn more
<i class="bi bi-chevron-right"></i>
</a>
</div>
</center>
</div>
Expand Down Expand Up @@ -262,7 +318,30 @@ <h2 class="h3 my-3">
~${data.stats.panels} installations
</span>
</span>
<div class="mt-2">
<span class="badge bg-light-subtle text-light-emphasis rounded-pill">
${
(data.type == "THEME") ? (`
<i class="bi bi-palette2"></i>
Theme
`) : (`
<i class="bi bi-puzzle-fill"></i>
Extension
`)
}
</span>
<span class="badge bg-light-subtle text-light-emphasis rounded-pill">
<i class="bi bi-tag-fill"></i>
${data.identifier}
</span>
<span class="badge bg-light-subtle text-light-emphasis rounded-pill">
<i class="bi bi-hash"></i>
${data.id}
</span>
</div>
</div>
</div>
</div>
`
Expand All @@ -280,6 +359,10 @@ <h2 class="h3 my-3">
.then((data) => {
displayProduct(data);
});

window.addEventListener('hashchange', () => {
window.location.reload();
});
</script>
</body>
</html>
13 changes: 13 additions & 0 deletions browse/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -652,6 +652,19 @@ <h5 class="card-title text-truncate">${

filter();
byteconfused();


// Focus search bar on CTRL+F
document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.key === 'f') {
e.preventDefault();

const elementToFocus = document.getElementById('productSearch');
if (elementToFocus) {
elementToFocus.focus();
}
}
});
</script>
</body>
</html>

0 comments on commit e8a4d6c

Please sign in to comment.