zstrike/home-frontend
1
0
Fork 0
forked from vyla-entertainment/home-frontend
Code Pull Requests Activity

updated ui & fixed download release

Browse Source
This commit is contained in:
alwaysmesmerizingyou
2026-08-26 20:32:21 -07:00
parent 2291e2d13f
commit ddaa71dda8
11 changed files with 69 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
about-us/index.html
View File

@@ -243,8 +243,8 @@
<body>
<header role="banner">
<nav class="nav" role="navigation" aria-label="Main navigation">
<div class="nav-container">
<a href="/" class="logo" aria-label="Vyla Home - Home">Vyla Home</a>
<div class="logo-image">
<img src="/assets/images/icons/logo_white.png" alt="Vyla Home">
</div>
</nav>
</header>
@@ -305,8 +305,9 @@
<section class="cta-banner" aria-labelledby="cta-heading">
<div class="cta-banner-media" aria-hidden="true">
<video class="cta-banner-video hero-atmosphere-video"
src="https://videos.pexels.com/video-files/35997189/15263283_3840_2160_25fps.mp4" autoplay loop muted
playsinline webkit-playsinline preload="auto" aria-hidden="true"></video>
src="https://videos.pexels.com/video-files/26754965/12000494_3840_2160_30fps.mp4" autoplay loop muted
playsinline webkit-playsinline preload="auto" crossorigin="anonymous" aria-hidden="true">
</video>
<canvas id="cta-byte-overlay" aria-hidden="true"></canvas>
<div class="cta-banner-overlay"></div>
</div>
@@ -319,10 +320,7 @@
<script>
async function setupLatestDownload() {
const buttons = [
document.getElementById("hero-copy-script-btn"),
document.getElementById("cta-copy-script-btn")
];
const btn = document.getElementById("hero-copy-script-btn");
try {
const response = await fetch(
@@ -335,14 +333,12 @@
const version = release.tag_name;
const fileVersion = version.replace(/^v/, "");
const downloadUrl =
btn.href =
`https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/packages/generic/vyla-home/${version}/Vyla-Home_${fileVersion}_x64-setup.exe`;
buttons.forEach(button => {
if (button) button.href = downloadUrl;
});
btn.textContent = `Download Release ${version}`;
} catch (error) {
console.error("Failed to resolve latest release:", error);
btn.textContent = "Download Latest Release";
}
}

BIN
assets/images/icons/logo_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

49
index.html
View File

@@ -241,7 +241,9 @@
<header role="banner">
<nav class="nav" role="navigation" aria-label="Main navigation">
<div class="nav-container">
<a href="/" class="logo" aria-label="Vyla Home - Home">Vyla Home</a>
<div class="logo-image">
<img src="/assets/images/icons/logo_white.png" alt="Vyla Home">
</div>
<div class="nav-links">
<a href="#features">Features</a>
<a href="#testimonials">Testimonials</a>
@@ -353,7 +355,6 @@
btn.textContent = `Download Release ${version}`;
} catch (error) {
console.error("Failed to resolve latest release:", error);
btn.textContent = "Download Latest Release";
}
}
@@ -500,21 +501,6 @@
</div>
</section>
<!--
<section id="showcases" class="showcases-section">
<div class="container showcases-heading reveal">
<h2 class="section-title-lg">Advanced Player Engine</h2>
<p class="section-subtitle">Isolated playback sandbox with custom subtitle decoders and a responsive
video pipeline.</p>
</div>
<div class="showcase-viewport">
<div class="showcase-track" id="showcase-track"></div>
</div>
</section>
-->
<section id="testimonials" class="section testimonials-section" aria-labelledby="testimonials-heading">
<div class="container testimonials-container">
<header class="testimonials-heading reveal">
@@ -569,24 +555,37 @@
];
try {
const project = "vyla-entertainment%2Fhome";
const response = await fetch(
"https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/releases/permalink/latest"
`https://gitlab.com/api/v4/projects/${project}/releases/permalink/latest`
);
if (!response.ok) throw new Error("Failed to fetch latest release");
if (!response.ok) {
throw new Error(`Failed to fetch latest release: ${response.status}`);
}
const release = await response.json();
const version = release.tag_name;
const fileVersion = version.replace(/^v/, "");
const downloadUrl =
`https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/packages/generic/vyla-home/${version}/Vyla-Home_${fileVersion}_x64-setup.exe`;
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 = downloadUrl;
if (button) {
button.href = asset.url;
}
});
} catch (error) {
console.error("Failed to resolve latest release:", error);
buttons.forEach(button => {
if (button) {
button.textContent = "Download Latest Release";
}
});
}
}

22
privacy-policy/index.html
View File

@@ -243,8 +243,8 @@
<body>
<header role="banner">
<nav class="nav" role="navigation" aria-label="Main navigation">
<div class="nav-container">
<a href="/" class="logo" aria-label="Vyla Home - Home">Vyla Home</a>
<div class="logo-image">
<img src="/assets/images/icons/logo_white.png" alt="Vyla Home">
</div>
</nav>
</header>
@@ -316,8 +316,9 @@
<section class="cta-banner" aria-labelledby="cta-heading">
<div class="cta-banner-media" aria-hidden="true">
<video class="cta-banner-video hero-atmosphere-video"
src="https://videos.pexels.com/video-files/35997189/15263283_3840_2160_25fps.mp4" autoplay loop muted
playsinline webkit-playsinline preload="auto" aria-hidden="true"></video>
src="https://videos.pexels.com/video-files/26754965/12000494_3840_2160_30fps.mp4" autoplay loop muted
playsinline webkit-playsinline preload="auto" crossorigin="anonymous" aria-hidden="true">
</video>
<canvas id="cta-byte-overlay" aria-hidden="true"></canvas>
<div class="cta-banner-overlay"></div>
</div>
@@ -330,10 +331,7 @@
<script>
async function setupLatestDownload() {
const buttons = [
document.getElementById("hero-copy-script-btn"),
document.getElementById("cta-copy-script-btn")
];
const btn = document.getElementById("hero-copy-script-btn");
try {
const response = await fetch(
@@ -346,14 +344,12 @@
const version = release.tag_name;
const fileVersion = version.replace(/^v/, "");
const downloadUrl =
btn.href =
`https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/packages/generic/vyla-home/${version}/Vyla-Home_${fileVersion}_x64-setup.exe`;
buttons.forEach(button => {
if (button) button.href = downloadUrl;
});
btn.textContent = `Download Release ${version}`;
} catch (error) {
console.error("Failed to resolve latest release:", error);
btn.textContent = "Download Latest Release";
}
}

1
src/scripts/config/constants.js
View File

@@ -5,7 +5,6 @@ export const DISCORD_LOADER_SCRIPT = 'https://gitlab.com/vyla-entertainment/home
export const DATA_PATHS = {
partners: 'src/data/partners.json',
reviews: 'src/data/reviews.json',
showcases: 'src/data/showcases.json',
};
export const DISCORD_INVITE_API = `https://discord.com/api/v10/invites/${DISCORD_INVITE_CODE}?with_counts=true`;

8
src/scripts/sections/hero.js
View File

@@ -10,8 +10,6 @@ function initVideoColorExtraction() {
const videos = document.querySelectorAll('.hero-atmosphere-video');
if (videos.length === 0) return;
console.log('Video color extraction initialized, found', videos.length, 'videos');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d', { willReadFrequently: true });
let animationFrameId;
@@ -21,7 +19,6 @@ function initVideoColorExtraction() {
function extractColors() {
const video = videos[0];
if (video.readyState < 2) {
console.log('Video not ready, readyState:', video.readyState);
animationFrameId = requestAnimationFrame(extractColors);
return;
}
@@ -59,11 +56,8 @@ function initVideoColorExtraction() {
frameCount++;
if (frameCount % 30 === 0) {
console.log('Frame', frameCount, '- Extracted color:', currentVideoColor);
console.log('CSS variable set:', getComputedStyle(document.documentElement).getPropertyValue('--video-dominant-color'));
}
} catch (e) {
console.error('Error extracting video colors:', e);
}
animationFrameId = requestAnimationFrame(extractColors);
@@ -90,12 +84,10 @@ function initVideoColorExtraction() {
videos.forEach(video => {
video.addEventListener('pause', () => {
console.log('Video paused, stopping color extraction');
cancelAnimationFrame(animationFrameId);
});
video.addEventListener('play', () => {
console.log('Video playing, starting color extraction');
animationFrameId = requestAnimationFrame(extractColors);
});
});

12
src/scripts/services/showcases-service.js
View File

@@ -1,12 +0,0 @@
import { DATA_PATHS } from '../config/constants.js';
import { fetchJsonArray } from './json-source.js';
import { youtubeIdFromUrl } from '../utils/youtube.js';
export async function getShowcaseVideos() {
const links = await fetchJsonArray(DATA_PATHS.showcases);
const videos = links
.map((url) => ({ url, id: youtubeIdFromUrl(url) }))
.filter((video) => video.id);
if (!videos.length) throw new Error('No valid showcase videos found');
return videos;
}

15
src/styles/layout/nav.css
View File

@@ -5,6 +5,7 @@
padding: 1.25rem 0;
z-index: var(--z-nav);
width: 100%;
z-index: 1000;
}
.nav-container {
@@ -20,17 +21,25 @@
font-weight: 700;
font-size: 1.125rem;
letter-spacing: -0.02em;
height: 50px;
width: 50px;
}
.nav-links {
display: flex;
gap: clamp(1.25rem, 3vw, 2.5rem);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
padding: 1rem 1rem;
gap: 1.25rem;
border-radius: 100px;
}
.nav-links a {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-fg-dim);
color: var(--color-fg);
transition: color var(--duration-fast) ease;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
@@ -43,7 +52,7 @@
@media (max-width: 768px) {
.nav-links {
gap: 1.25rem;
padding: 0rem 1rem;
}
.nav-links a {
@@ -64,4 +73,4 @@
display: inline-flex;
align-items: center;
}
}
}

4
src/styles/pages/other.css
View File

@@ -1,3 +1,7 @@
body {
background-color: #000000 !important;
}
.content-wrapper {
width: min(900px, calc(100% - 2 * var(--content-padding-inline)));
margin: 0 auto;

4
src/styles/sections/hero-content.css
View File

@@ -9,8 +9,8 @@
}
.logo-image {
width: 100px;
height: 100px;
width: 60px;
height: 60px;
}
.logo-image img {

22
terms-of-service/index.html
View File

@@ -243,8 +243,8 @@
<body>
<header role="banner">
<nav class="nav" role="navigation" aria-label="Main navigation">
<div class="nav-container">
<a href="/" class="logo" aria-label="Vyla Home - Home">Vyla Home</a>
<div class="logo-image">
<img src="/assets/images/icons/logo_white.png" alt="Vyla Home">
</div>
</nav>
</header>
@@ -303,8 +303,9 @@
<section class="cta-banner" aria-labelledby="cta-heading">
<div class="cta-banner-media" aria-hidden="true">
<video class="cta-banner-video hero-atmosphere-video"
src="https://videos.pexels.com/video-files/35997189/15263283_3840_2160_25fps.mp4" autoplay loop muted
playsinline webkit-playsinline preload="auto" aria-hidden="true"></video>
src="https://videos.pexels.com/video-files/26754965/12000494_3840_2160_30fps.mp4" autoplay loop muted
playsinline webkit-playsinline preload="auto" crossorigin="anonymous" aria-hidden="true">
</video>
<canvas id="cta-byte-overlay" aria-hidden="true"></canvas>
<div class="cta-banner-overlay"></div>
</div>
@@ -317,10 +318,7 @@
<script>
async function setupLatestDownload() {
const buttons = [
document.getElementById("hero-copy-script-btn"),
document.getElementById("cta-copy-script-btn")
];
const btn = document.getElementById("hero-copy-script-btn");
try {
const response = await fetch(
@@ -333,14 +331,12 @@
const version = release.tag_name;
const fileVersion = version.replace(/^v/, "");
const downloadUrl =
btn.href =
`https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/packages/generic/vyla-home/${version}/Vyla-Home_${fileVersion}_x64-setup.exe`;
buttons.forEach(button => {
if (button) button.href = downloadUrl;
});
btn.textContent = `Download Release ${version}`;
} catch (error) {
console.error("Failed to resolve latest release:", error);
btn.textContent = "Download Latest Release";
}
}