forked from vyla-entertainment/home-frontend
added mac support
This commit is contained in:
186
index.html
186
index.html
@@ -119,7 +119,7 @@
|
||||
"@type": "SoftwareApplication",
|
||||
"name": "Vyla Home",
|
||||
"applicationCategory": "MultimediaApplication",
|
||||
"operatingSystem": "Windows",
|
||||
"operatingSystem": "Windows, macOS",
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "0",
|
||||
@@ -318,20 +318,49 @@
|
||||
</div>
|
||||
|
||||
<div class="hero-cta-row reveal">
|
||||
<a class="hero-cta hero-cta-dark" id="hero-copy-script-btn" href="#" target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
Download Release v0.0.0
|
||||
</a>
|
||||
<div class="download-expandable" id="hero-download-expandable" aria-expanded="false">
|
||||
<button class="hero-cta hero-cta-dark" id="hero-download-btn">
|
||||
<span class="download-btn-text">Download v0.0.0</span>
|
||||
<svg class="dropdown-arrow" width="17" height="17" viewBox="0 0 24 24" fill="currentColor"
|
||||
aria-hidden="true">
|
||||
<path d="M7 10l5 5 5-5z" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="download-options" id="hero-download-options" aria-hidden="true">
|
||||
<a href="#" class="download-option" id="hero-windows-download">
|
||||
<svg class="windows-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"
|
||||
aria-hidden="true">
|
||||
<path
|
||||
d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.949-1.951" />
|
||||
</svg>
|
||||
<span>Windows v0.0.0</span>
|
||||
</a>
|
||||
<a href="#" class="download-option" id="hero-mac-download">
|
||||
<svg class="mac-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"
|
||||
aria-hidden="true">
|
||||
<path
|
||||
d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
|
||||
</svg>
|
||||
<span>Mac v0.0.0</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="hero-cta hero-cta-light" href="https://gitlab.com/vyla-entertainment/home/-/releases"
|
||||
<a class="hero-cta hero-cta-unsure" href="https://gitlab.com/vyla-entertainment/home/-/releases"
|
||||
target="_blank" rel="noopener noreferrer">
|
||||
View Releases
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function setupLatestDownload() {
|
||||
const btn = document.getElementById("hero-copy-script-btn");
|
||||
async function setupExpandableDownload(expandableId, btnId, optionsId, windowsId, macId) {
|
||||
const expandable = document.getElementById(expandableId);
|
||||
const downloadBtn = document.getElementById(btnId);
|
||||
const downloadOptions = document.getElementById(optionsId);
|
||||
const windowsDownload = document.getElementById(windowsId);
|
||||
const macDownload = document.getElementById(macId);
|
||||
|
||||
if (!expandable || !downloadBtn || !downloadOptions || !windowsDownload || !macDownload) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
@@ -344,16 +373,66 @@
|
||||
const version = release.tag_name;
|
||||
const fileVersion = version.replace(/^v/, "");
|
||||
|
||||
btn.href =
|
||||
`https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/packages/generic/vyla-home/${version}/Vyla-Home_${fileVersion}_x64-setup.exe`;
|
||||
const windowsAsset = release.assets?.links?.find(link =>
|
||||
link.name?.toLowerCase().endsWith(".exe")
|
||||
);
|
||||
const macAsset = release.assets?.links?.find(link =>
|
||||
link.name?.toLowerCase().endsWith(".dmg")
|
||||
);
|
||||
|
||||
const btnText = downloadBtn.querySelector('.download-btn-text');
|
||||
if (btnText) {
|
||||
btnText.textContent = `Download ${version}`;
|
||||
}
|
||||
|
||||
if (windowsAsset?.url) {
|
||||
windowsDownload.href = windowsAsset.url;
|
||||
windowsDownload.querySelector('span').textContent = `Windows ${version}`;
|
||||
} else {
|
||||
windowsDownload.href = `https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/packages/generic/vyla-home/${version}/Vyla-Home_${fileVersion}_x64-setup.exe`;
|
||||
windowsDownload.querySelector('span').textContent = `Windows ${version}`;
|
||||
}
|
||||
|
||||
if (macAsset?.url) {
|
||||
macDownload.href = macAsset.url;
|
||||
macDownload.querySelector('span').textContent = `Mac ${version}`;
|
||||
} else {
|
||||
macDownload.href = `https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/packages/generic/vyla-home/${version}/Vyla-Home_${fileVersion}_aarch64.dmg`;
|
||||
macDownload.querySelector('span').textContent = `Mac ${version}`;
|
||||
}
|
||||
|
||||
downloadBtn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const isExpanded = expandable.getAttribute('aria-expanded') === 'true';
|
||||
expandable.setAttribute('aria-expanded', !isExpanded);
|
||||
downloadOptions.setAttribute('aria-hidden', isExpanded);
|
||||
downloadOptions.classList.toggle('show', !isExpanded);
|
||||
});
|
||||
|
||||
btn.textContent = `Download Release ${version}`;
|
||||
} catch (error) {
|
||||
btn.textContent = "Download Latest Release";
|
||||
const btnText = downloadBtn.querySelector('.download-btn-text');
|
||||
if (btnText) {
|
||||
btnText.textContent = "Download Latest Release";
|
||||
}
|
||||
windowsDownload.querySelector('span').textContent = "Windows (Latest)";
|
||||
macDownload.querySelector('span').textContent = "Mac (Latest)";
|
||||
}
|
||||
}
|
||||
|
||||
setupLatestDownload();
|
||||
setupExpandableDownload("hero-download-expandable", "hero-download-btn", "hero-download-options", "hero-windows-download", "hero-mac-download");
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
const expandables = document.querySelectorAll('.download-expandable');
|
||||
expandables.forEach(expandable => {
|
||||
const btn = expandable.querySelector('button');
|
||||
const options = expandable.querySelector('.download-options');
|
||||
if (btn && options && !expandable.contains(e.target)) {
|
||||
expandable.setAttribute('aria-expanded', 'false');
|
||||
options.setAttribute('aria-hidden', 'true');
|
||||
options.classList.remove('show');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="hero-preview-wrap reveal">
|
||||
@@ -363,7 +442,14 @@
|
||||
<path
|
||||
d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.949-1.951" />
|
||||
</svg>
|
||||
<span>Available for Windows 10 / 11 (64-bit)</span>
|
||||
<span>Windows 10 / 11 (64-bit)</span>
|
||||
<span class="platform-divider">•</span>
|
||||
<svg class="mac-icon" width="13" height="13" viewBox="0 0 24 24" fill="currentColor"
|
||||
aria-hidden="true">
|
||||
<path
|
||||
d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
|
||||
</svg>
|
||||
<span>macOS (Apple Silicon)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -532,53 +618,37 @@
|
||||
<div class="container cta-banner-content reveal">
|
||||
<h2 id="cta-heading" class="cta-banner-title">Try Vyla Home today</h2>
|
||||
<p class="cta-banner-subtitle">Your Entertainment. Zero Servers Attached.</p>
|
||||
<a class="hero-cta hero-cta-light" id="cta-copy-script-btn" href="#" target="_blank"
|
||||
rel="noopener noreferrer">Download Now</a>
|
||||
<div class="download-expandable" id="cta-download-expandable" aria-expanded="false">
|
||||
<button class="hero-cta hero-cta-light" id="cta-download-btn">
|
||||
<span class="download-btn-text">Download Now</span>
|
||||
<svg class="dropdown-arrow" width="17" height="17" viewBox="0 0 24 24" fill="currentColor"
|
||||
aria-hidden="true">
|
||||
<path d="M7 10l5 5 5-5z" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="download-options" id="cta-download-options" aria-hidden="true">
|
||||
<a href="#" class="download-option" id="cta-windows-download">
|
||||
<svg class="windows-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"
|
||||
aria-hidden="true">
|
||||
<path
|
||||
d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.949-1.951" />
|
||||
</svg>
|
||||
<span>Windows v0.0.0</span>
|
||||
</a>
|
||||
<a href="#" class="download-option" id="cta-mac-download">
|
||||
<svg class="mac-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"
|
||||
aria-hidden="true">
|
||||
<path
|
||||
d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
|
||||
</svg>
|
||||
<span>Mac v0.0.0</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function setupLatestDownload() {
|
||||
const buttons = [
|
||||
document.getElementById("hero-copy-script-btn"),
|
||||
document.getElementById("cta-copy-script-btn")
|
||||
];
|
||||
|
||||
try {
|
||||
const project = "vyla-entertainment%2Fhome";
|
||||
|
||||
const response = await fetch(
|
||||
`https://gitlab.com/api/v4/projects/${project}/releases/permalink/latest`
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch latest release: ${response.status}`);
|
||||
}
|
||||
|
||||
const release = await response.json();
|
||||
|
||||
const asset = release.assets?.links?.find(link =>
|
||||
link.name?.toLowerCase().endsWith(".exe")
|
||||
);
|
||||
|
||||
if (!asset?.url) {
|
||||
throw new Error("No .exe asset found in latest release");
|
||||
}
|
||||
|
||||
buttons.forEach(button => {
|
||||
if (button) {
|
||||
button.href = asset.url;
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
buttons.forEach(button => {
|
||||
if (button) {
|
||||
button.textContent = "Download Latest Release";
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
setupLatestDownload();
|
||||
setupExpandableDownload("cta-download-expandable", "cta-download-btn", "cta-download-options", "cta-windows-download", "cta-mac-download");
|
||||
</script>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user