Skip to content

Commit

Permalink
update ZwiftBikeGalleryFull.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nick2bad4u
Nick2bad4u committed Dec 16, 2024
1 parent e4be5b9 commit d935e4a
Show file tree
Hide file tree
Showing 3 changed files with 121 additions and 71 deletions.
114 changes: 65 additions & 49 deletions zwiftbikes/ZwiftBikeGallery.html
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,68 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zwift Bike Gallery</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #121212;
color: #e0e0e0;
}
.gallery {
display: flex;
flex-wrap: wrap;
}
.bike-card {
border: 1px solid #444;
border-radius: 8px;
margin: 10px;
padding: 10px;
width: calc(33% - 40px);
box-sizing: border-box;
background-color: #1e1e1e;
}
.bike-card img {
max-width: 100%;
border-radius: 4px;
}
.bike-details {
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Zwift Bike Gallery</h1>
<div>
<label for="sortCriteria">Sort by:</label>
<select id="sortCriteria">
<option value="flatBest">Best Flat Performance</option>
<option value="flatWorst">Worst Flat Performance</option>
<option value="climbBest">Best Climb Performance</option>
<option value="climbWorst">Worst Climb Performance</option>
</select>
<button onclick="generateGallery()">Sort</button>
</div>
<div class="gallery" id="bikeGallery"></div>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Zwift Bike Gallery</title>
<style>
body {
margin: 20px;
background-color: #121212;
color: #e0e0e0;
font-family: Arial, sans-serif;
}
.gallery {
display: flex;
flex-wrap: wrap;
}
.bike-card {
box-sizing: border-box;
margin: 10px;
border: 1px solid #444;
border-radius: 8px;
background-color: #1e1e1e;
padding: 10px;
width: calc(33% - 40px);
}
.bike-card img {
border-radius: 4px;
max-width: 100%;
}
.bike-details {
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Zwift Bike Gallery</h1>
<div>
<label for="sortCriteria">Sort by:</label>
<select id="sortCriteria">
<option value="flatBest">
Best Flat Performance
</option>
<option value="flatWorst">
Worst Flat Performance
</option>
<option value="climbBest">
Best Climb Performance
</option>
<option value="climbWorst">
Worst Climb Performance
</option>
</select>
<button onclick="generateGallery()">
Sort
</button>
</div>
<div
class="gallery"
id="bikeGallery"
></div>

<script src="zwiftBikeGallery.js"></script>
</body>
<script src="zwiftBikeGallery.js"></script>
</body>
</html>
25 changes: 24 additions & 1 deletion zwiftbikes/ZwiftBikeGalleryFull.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<style>
<head><style>
body {
font-family: Arial, sans-serif;
margin: 20px;
Expand Down Expand Up @@ -26,6 +26,29 @@
margin-top: 10px;
}
</style>
<style>
.flipX video::-webkit-media-text-track-display {
transform: matrix(-1, 0, 0, 1, 0, 0) !important;
}
.flipXY video::-webkit-media-text-track-display {
transform: matrix(-1, 0, 0, -1, 0, 0) !important;
}
.flipXYX video::-webkit-media-text-track-display {
transform: matrix(1, 0, 0, -1, 0, 0) !important;
}</style><style>
@keyframes blinkWarning {
0% { color: red; }
100% { color: white; }
}
@-webkit-keyframes blinkWarning {
0% { color: red; }
100% { color: white; }
}
.blinkWarning {
-webkit-animation: blinkWarning 1s linear infinite;
-moz-animation: blinkWarning 1s linear infinite;
animation: blinkWarning 1s linear infinite;
}</style></head>
<body>
<h1>Zwift Bike Gallery</h1>
<div>
Expand Down
53 changes: 32 additions & 21 deletions zwiftbikes/zwiftBikeGallery.js
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,40 @@
// Fetch data from JSON files
async function fetchData(file) {
const response = await fetch(file);
const data = await response.json();
return data;
const response = await fetch(file);
const data = await response.json();
return data;
}

// Fetch wheels, frames, and bikes data
async function getZwiftData() {
const wheels = await fetchData('wheels.json');
const frames = await fetchData('frames.json');
const bikes = await fetchData('bikes.json');
return { wheels, frames, bikes };
const wheels = await fetchData('wheels.json');
const frames = await fetchData('frames.json');
const bikes = await fetchData('bikes.json');
return { wheels, frames, bikes };
}

// Generate bike gallery
async function generateGallery() {
const { wheels, frames, bikes } = await getZwiftData();
const gallery = document.getElementById('bikeGallery');
gallery.innerHTML = '';
const { wheels, frames, bikes } =
await getZwiftData();
const gallery = document.getElementById(
'bikeGallery',
);
gallery.innerHTML = '';

for (const bike of bikes) {
const frame = frames.find(f => f.frameid === bike.frameid);
const wheel = wheels.find(w => w.wheelid === bike.wheelid);
for (const bike of bikes) {
const frame = frames.find(
(f) => f.frameid === bike.frameid,
);
const wheel = wheels.find(
(w) => w.wheelid === bike.wheelid,
);

if (frame && wheel) {
const bikeCard = document.createElement('div');
bikeCard.className = 'bike-card';
bikeCard.innerHTML = `
if (frame && wheel) {
const bikeCard =
document.createElement('div');
bikeCard.className = 'bike-card';
bikeCard.innerHTML = `
<img src="${frame.frameimg}" alt="${frame.framemake} ${frame.framemodel}">
<div class="bike-details">
<h3>${frame.framemake} ${frame.framemodel}</h3>
Expand Down Expand Up @@ -61,10 +69,13 @@ async function generateGallery() {
<p><strong>Wheel Article:</strong> ${wheel.wheelarticle}</p>
</div>
`;
gallery.appendChild(bikeCard);
}
}
gallery.appendChild(bikeCard);
}
}
}

// Generate the gallery on page load
document.addEventListener('DOMContentLoaded', generateGallery);
document.addEventListener(
'DOMContentLoaded',
generateGallery,
);

0 comments on commit d935e4a

Please sign in to comment.