Skip to content

Commit

Permalink
feat /browse: extension pages my beloved
Browse files Browse the repository at this point in the history
  • Loading branch information
@prplwtf
prplwtf committed Dec 30, 2024
1 parent 52b35ed commit 6209026
Show file tree
Hide file tree
Showing 5 changed files with 111 additions and 97 deletions.
Binary file added .assets/storage/misc/png/13.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed browse/assets/statistics.jpg
View file
Binary file not shown.
24 changes: 9 additions & 15 deletions browse/extensions/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,21 +23,15 @@
);
}

[data-bs-theme=light] .platform-button {
--bs-btn-color: #000;
--bs-btn-bg: #f8f9fa;
--bs-btn-border-color: #f8f9fa;
--bs-btn-hover-color: #000;
--bs-btn-hover-bg: #d3d4d5;
--bs-btn-hover-border-color: #c6c7c8;
--bs-btn-focus-shadow-rgb: 211,212,213;
--bs-btn-active-color: #000;
--bs-btn-active-bg: #c6c7c8;
--bs-btn-active-border-color: #babbbc;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #000;
--bs-btn-disabled-bg: #f8f9fa;
--bs-btn-disabled-border-color: #f8f9fa;
.platform-button > * {
text-decoration: none !important;
}
.platform-button-content {
transition: background-color .2s;
cursor: pointer;
}
.platform-button:hover .platform-button-content {
background-color: color-mix(in hsl, var(--bs-body-bg) 90%, white);
}

.extension-card-content {
Expand Down
126 changes: 89 additions & 37 deletions browse/extensions/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@

<!-- 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-4 shadow-lg pt-5">
<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">
<h3 class="pt-5 mt-5 mb-3 placeholder-wave">
<span class="placeholder col-6 rounded-3"></span>
Expand Down Expand Up @@ -176,44 +176,92 @@ <h3 class="pt-5 mt-5 mb-3 placeholder-wave">
/** @param {Product[]} products */
function displayProduct(data) {
const productContainer = document.getElementById("productContainer");
let date = new Date(data.created);
date = date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
});
productContainer.innerHTML = `
<div class="shadow-lg rounded-4">
<div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 rounded-bottom-0 position-relative pt-5" style="background: url('${data.banner}') center; background-size: cover; border: unset;">
<div class="blur-gradient-overlay"></div>
<div class="d-flex flex-column h-100 p-5 pt-5 text-white text-shadow-1 position-relative extension-card-content">
<h3 class="pt-5 mt-5 mb-3 fw-bolder">
${data.name}
</h3>
${data.summary}
</div>
<div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-3 position-relative pt-5 mb-4" style="background: url('${data.banner}') center; background-size: cover; border: unset;">
<div class="blur-gradient-overlay"></div>
<div class="d-flex flex-column h-100 p-5 pt-5 text-white text-shadow-1 position-relative extension-card-content">
<h3 class="pt-5 mt-5 mb-3 fw-bolder">
${data.name}
</h3>
${data.summary}
</div>
</div>
<div class="row g-4">
<div class="col-8">
<center>
<div class="w-75">
<img src="../../.assets/storage/misc/png/13.png" height="150"/>
<h2 class="h3 my-3">
Install and manage this extension with <b>Blueprint</b>!
</h2>
<p>
<i class="bi bi-check"></i> Avoid conflicts between modifications
<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>
</div>
</center>
</div>
<div class="rounded-4 rounded-top-0 bg-dark-subtle p-4 py-2">
<div class="row">
${Object.entries(data.platforms)
.map(
([platform, _data]) => `
<a
class="dropdown-item rounded-2 col m-2"
href="${
platform === "BUILTBYBIT"
? "https://" +
_data.url.replace(/^https?:\/\//i, "") +
"?ref=449337&"
: _data.url + "?"
}utm_source=blueprint.zip&utm_medium=card&utm_content=for_${
data.identifier
}"
>
<button class="btn btn-dark platform-button w-100">
<img src="/browse/assets/source/${
platforms[platform][1]
}" alt="" width="24" height="24">
${platforms[platform][0]}
</button>
</a>
`
)
.join("")}
<div class="col-4">
${Object.entries(data.platforms)
.map(
([platform, _data]) => `
<div class="platform-button">
<a href="${
platform === "BUILTBYBIT"
? "https://" +
_data.url.replace(/^https?:\/\//i, "") +
"?ref=449337&"
: _data.url + "?"
}utm_source=blueprint.zip&utm_medium=card&utm_content=for_${
data.identifier
}"
>
<div class="input-group mb-2 flex-nowrap">
<label class="input-group-text w-100 border-0 platform-button-content">
<img src="/browse/assets/source/${
platforms[platform][1]
}" alt="" width="24" height="24" class="me-2">
${platforms[platform][0]}
</label>
<label class="input-group-text border-0 text-secondary platform-button-content">${_data.price} ${_data.currency}</label>
</div>
</a>
</div>
`)
.join("")}
<div class="bg-secondary-subtle p-3 mt-4 rounded-2">
<span>
<i class="bi bi-calendar-week-fill"></i>
Released on
<span class="opacity-50">
${date}
</span>
</span>
<br>
<span>
<i class="bi bi-people-fill"></i>
Created by
<span class="opacity-50">
${data.author.name}
</span>
</span>
<br>
<span>
<i class="bi bi-bar-chart-fill"></i>
Used by
<span class="opacity-50">
~${data.stats.panels} installations
</span>
</span>
</div>
</div>
</div>
Expand All @@ -223,6 +271,10 @@ <h3 class="pt-5 mt-5 mb-3 fw-bolder">
// Load product
const extension_id = (new URL(window.location)).hash.slice(1);

if(!extension_id) {
window.location = "../"
}

fetch("https://api.blueprintframe.work/api/extensions/"+extension_id)
.then((response) => response.json())
.then((data) => {
Expand Down
58 changes: 13 additions & 45 deletions browse/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -408,53 +408,21 @@ <h1 class="modal-title fs-5" id="filterModalLabel"><i class="bi bi-filter"></i>
"col-sm-12 col-md-6 col-lg-4 mb-4 " + categoryClass;
listItem.innerHTML = `
<div class="card overflow-hidden bg-dark-subtle">
<img src="${
product.banner
}" onclick="setTimeout(() => {document.getElementById('${
product.identifier
}Button').click()}, 1)" class="card-img-top img-dim product-image" alt="${
product.name
}"/>
<div class="btn-group position-absolute" style="right: 11px; top: 0px;">
<button type="button" id="${
<a href="./extensions/#${product.identifier}" class="text-decoration-none text-body">
<img src="${
product.banner
}" onclick="setTimeout(() => {document.getElementById('${
product.identifier
}Button" class="btn btn-secondary rounded-2 buy-btn border-0 backdrop-blur" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-chevron-down"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end gap-1 p-2 rounded-3 mx-0 border-0 shadow w-220px">
${Object.entries(product.platforms)
.map(
([platform, data]) => `
<li>
<a
class="dropdown-item rounded-2"
href="${
platform === "BUILTBYBIT"
? "https://" +
data.url.replace(/^https?:\/\//i, "") +
"?ref=449337&"
: data.url + "?"
}utm_source=blueprint.zip&utm_medium=card&utm_content=for_${
product.identifier
}"
>
<img src="/browse/assets/source/${
platforms[platform][1]
}" alt="" width="24" height="24">
${platforms[platform][0]}
</a>
</li>
`
)
.join("")}
</ul>
</div>
<div class="card-body">
<h5 class="card-title text-truncate">${
}Button').click()}, 1)" class="card-img-top img-dim product-image" alt="${
product.name
} <span class="author-tag">by ${product.author.name}</span></h5>
<p class="card-text text-truncate">${product.summary}</p>
</div>
}"/>
<div class="card-body">
<h5 class="card-title text-truncate">${
product.name
} <span class="author-tag">by ${product.author.name}</span></h5>
<p class="card-text text-truncate">${product.summary}</p>
</div>
</a>
</div>
`;

Expand Down

1 comment on commit 6209026

@RepGraphics
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I approve, NIFTY!

Please sign in to comment.