init commit
This commit is contained in:
Alireza Vaezi
commit
ffacc86d19
|
|
@ -0,0 +1 @@
|
|||
*.mp4
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Home</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
.station-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20%;
|
||||
}
|
||||
|
||||
.station-links a {
|
||||
margin: 0 20px;
|
||||
font-size: 24px;
|
||||
text-decoration: none;
|
||||
padding: 10px 20px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.station-links a:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<div class="station-links">
|
||||
<a href="station1.html">Station 1</a>
|
||||
<a href="station2.html">Station 2</a>
|
||||
<a href="station3.html">Station 3</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
// Function to open video in modal and autoplay
|
||||
function openVideo(src, title, description) {
|
||||
const videoPlayer = document.getElementById("videoPlayer");
|
||||
videoPlayer.src = src;
|
||||
videoPlayer.autoplay = true; // Enable autoplay
|
||||
videoPlayer.loop = true; // Enable looping
|
||||
videoPlayer.play(); // Start playing
|
||||
|
||||
document.getElementById("videoModalTitle").innerText = title;
|
||||
document.getElementById("videoModalDescription").innerHTML = description;
|
||||
}
|
||||
|
||||
// Stop video when modal is closed
|
||||
document.getElementById("videoModal").addEventListener("hidden.bs.modal", function () {
|
||||
const videoPlayer = document.getElementById("videoPlayer");
|
||||
videoPlayer.pause(); // Stop playback
|
||||
videoPlayer.currentTime = 0; // Reset to beginning
|
||||
});
|
||||
|
||||
// Function to dynamically generate video cards
|
||||
function generateVideoCards(videos) {
|
||||
const videoContainer = document.getElementById("video-container");
|
||||
|
||||
videos.forEach(video => {
|
||||
const col = document.createElement("div");
|
||||
col.classList.add("col-md-4", "mb-4");
|
||||
|
||||
col.innerHTML = `
|
||||
<div class="card video-card" data-bs-toggle="modal" data-bs-target="#videoModal"
|
||||
onclick="openVideo('${video.src}', '${video.title}', '${video.description}')">
|
||||
<video class="card-img-top" autoplay loop muted>
|
||||
<source src="${video.src}" type="video/mp4">
|
||||
</video>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">${video.title}</h5>
|
||||
<p class="card-text">${video.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
videoContainer.appendChild(col);
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Instructions for Station 1</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script src="scripts.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Back Button -->
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="index.html" style="font-size: 24px; font-weight: bold;">← Back to
|
||||
Home</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="container text-center mt-4">
|
||||
<h2>Instructions for Station 1</h2>
|
||||
<div class="row mt-4" id="video-container"></div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="videoModalTitle"></h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body text-center">
|
||||
<video id="videoPlayer" class="modal-video" controls></video>
|
||||
<p id="videoModalDescription" class="mt-3 modal-description"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const videos = [
|
||||
{
|
||||
title: "Step 1 - Insert the Rocker",
|
||||
src: "Station 1/S1 Step 1.mp4",
|
||||
description: "• Retrieve rocker <b>(Bin 1A)</b> and silver head <b>(Bin 1B)</b>.<br>\
|
||||
• Align the rocker tab outward.<br>\
|
||||
• Slide it flush into the silver head.<br>\
|
||||
<strong>Caution:</strong> Misalignment can cause issues later."
|
||||
},
|
||||
{
|
||||
title: "Step 2 - Screw the Black Bolt",
|
||||
src: "Station 1/S1 Step 2.mp4",
|
||||
description: "• Hand‐thread black bolt <b>(Bin 1C)</b> through the silver head and rocker.<br>\
|
||||
• Tighten using the 13 mm wrench to hand‐tight + ½ turn.<br>\
|
||||
<strong>Tip:</strong> Overtightening may strip threads."
|
||||
},
|
||||
{
|
||||
title: "Step 3 - Align the Motor",
|
||||
src: "Station 1/S1 Step 3.mp4",
|
||||
description: "• Retrieve the motor <b>(Bin 1D)</b> and position the black wire on the left.<br>\
|
||||
• Align motor shaft with the rocker assembly.<br>\
|
||||
• Gently seat motor until fully engaged.<br>\
|
||||
<strong>Warning:</strong> Watch for pinch points around the rocker."
|
||||
},
|
||||
{
|
||||
title: "Step 4 - Insert the Guide Screws",
|
||||
src: "Station 1/S1 Step 4.mp4",
|
||||
description: "• From <b>(Bin 1E)</b> place one screw in each guide hole.<br>\
|
||||
• Turn each screw 1–2 rotations by hand to avoid cross‐threading.<br>\
|
||||
• Use the screwdriver to fully tighten afterward.<br>\
|
||||
<strong>Tip:</strong> Threading both screws partially first ensures proper alignment."
|
||||
},
|
||||
{
|
||||
title: "Step 5 - Place the Rubber Stop",
|
||||
src: "Station 1/S1 Step 5.mp4",
|
||||
description: "• From <b>(Bin 1F)</b>, retrieve the rubber stop.<br>\
|
||||
• Insert it into the designated slot in the casing <b>(Bin 1G)</b>.<br>\
|
||||
• Make sure it is seated snugly (no wiggle)."
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
generateVideoCards(videos)
|
||||
</script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Instructions for Station 2</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script src="scripts.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Bootstrap Navbar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="index.html" style="font-size: 24px; font-weight: bold;">← Back to
|
||||
Home</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container text-center mt-4">
|
||||
<h2>Instructions for Station 2</h2>
|
||||
<div class="row mt-4" id="video-container"></div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="videoModalTitle"></h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body text-center">
|
||||
<video id="videoPlayer" class="modal-video" controls></video>
|
||||
<p id="videoModalDescription" class="mt-3 modal-description"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const videos = [
|
||||
{
|
||||
title: "Step 1 - Rest the Motor & Wiring",
|
||||
src: "Station 2/S2 Step 1.mp4",
|
||||
description: "• Place the motor assembly (silver head) into the casing <b>(Bin 2B)</b>.<br>\
|
||||
<strong>Orientation Tip:</strong> Ensure wires aren’t pinched."
|
||||
},
|
||||
{
|
||||
title: "Step 2 - Insert the Green Circuit Board",
|
||||
src: "Station 2/S2 Step 2.mp4",
|
||||
description: "• Slide the green board into its slot.<br>\
|
||||
<strong>Check:</strong> Align any dials/wires with cutouts."
|
||||
},
|
||||
{
|
||||
title: "Step 3 - Slide in the Charging Octagon",
|
||||
src: "Station 2/S2 Step 3.mp4",
|
||||
description: "• Press the charging octagon down until fully seated.<br>\
|
||||
<strong>Tip:</strong> It should lay flat, with no tilt."
|
||||
},
|
||||
{
|
||||
title: "Step 4 - Set the Switch",
|
||||
src: "Station 2/S2 Step 4.mp4",
|
||||
description: "• Align the on/off switch with the casing opening.<br>\
|
||||
<strong>Caution:</strong> Switch must move freely; if jammed, reposition."
|
||||
},
|
||||
{
|
||||
title: "Step 5 - Insert the Rubber Stop",
|
||||
src: "Station 2/S2 Step 5.mp4",
|
||||
description: "• Fit the rubber stop firmly into the slot on the casing <b><b>(Bin 2B)</b></b>.<br>\
|
||||
<strong>Tip:</strong> It should sit flush and not fall out."
|
||||
},
|
||||
{
|
||||
title: "Step 6 - Place the Yellow Slider",
|
||||
src: "Station 2/S2 Step 6.mp4",
|
||||
description: "• Position the slider over the switch, ensuring the thumb toggle is aligned."
|
||||
},
|
||||
{
|
||||
title: "Step 7 - Snap the Casing Shut",
|
||||
src: "Station 2/S2 Step 7.mp4",
|
||||
description: "• Join the casing halves, using the charging octagon as a guide.<br>\
|
||||
<strong>Check:</strong> Listen for a “click”; no gaps should remain."
|
||||
}
|
||||
];
|
||||
|
||||
generateVideoCards(videos);
|
||||
|
||||
</script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Instructions for Station 3</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script src="scripts.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Bootstrap Navbar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="index.html" style="font-size: 24px; font-weight: bold;">← Back to
|
||||
Home</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container text-center mt-4">
|
||||
<h2>Instructions for Station 3</h2>
|
||||
<div class="row mt-4" id="video-container"></div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="videoModalTitle"></h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body text-center">
|
||||
<video id="videoPlayer" class="modal-video" controls></video>
|
||||
<p id="videoModalDescription" class="mt-3 modal-description"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const videos = [
|
||||
{
|
||||
title: "Step 1 - Press the Silver Head",
|
||||
src: "Station 3/S3 Step 1.mp4",
|
||||
description: "• Align and push the silver head firmly into the sealed casings.<br>\
|
||||
<strong>Tip:</strong> Ensure no gaps remain between casing and head."
|
||||
},
|
||||
{
|
||||
title: "Step 2 - Insert Long Black Screws",
|
||||
src: "Station 3/S3 Step 2.mp4",
|
||||
description: "• Place the long black screws <b><b><b>(Bin 3A)</b></b></b in the two holes near the silver head.<br>\
|
||||
• Place short black screws <b><b><b>(Bin 3B)</b></b></b in the remaining holes."
|
||||
},
|
||||
{
|
||||
title: "Step 3 - Secure Black Screws",
|
||||
src: "Station 3/S3 Step 3.mp4",
|
||||
description: "• Use the provided screwdriver to tighten all four black screws.<br>\
|
||||
<strong>Caution:</strong> Avoid overtightening to prevent stripping."
|
||||
},
|
||||
{
|
||||
title: "Step 4 - Slide Black Washers",
|
||||
src: "Station 3/S3 Step 4.mp4",
|
||||
description: "• Place one black washer <b><b><b>(Bin 3C)</b></b></b over each long silver screw <b><b><b>(Bin 3D)</b></b></b<br>\
|
||||
and each short silver screw <b><b><b>(Bin 3E)</b></b></b."
|
||||
},
|
||||
{
|
||||
title: "Step 5 - Insert Long Silver Screws",
|
||||
src: "Station 3/S3 Step 5.mp4",
|
||||
description: "• Screw in the long silver screws (with washers) into the top two holes.<br>\
|
||||
<strong>Tip:</strong> Keep consistent pressure; do not angle the screwdriver."
|
||||
},
|
||||
{
|
||||
title: "Step 6 - Insert Short Silver Screws",
|
||||
src: "Station 3/S3 Step 6.mp4",
|
||||
description: "• Screw in the short silver screws (with washers) into the bottom holes (underside).<br>\
|
||||
<strong>Check:</strong> Screws should sit flush with the casing."
|
||||
},
|
||||
{
|
||||
title: "Step 7 - Insert Battery",
|
||||
src: "Station 3/S3 Step 7.mp4",
|
||||
description: "• Slot the battery <b><b><b>(Bin 3F)</b></b></b in place.<br>\
|
||||
• Set the yellow dial to setting '1 of 6' if applicable."
|
||||
},
|
||||
{
|
||||
title: "Step 8 - Check Tool Functionality",
|
||||
src: "Station 3/S3 Step 8.mp4",
|
||||
description: "• Power on briefly; listen for rattling or unusual sounds.<br>\
|
||||
<strong>Safety Note:</strong> If anything seems off, power down and recheck screws."
|
||||
}
|
||||
];
|
||||
|
||||
generateVideoCards(videos);
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
/* Navbar */
|
||||
.navbar-brand {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Card Styles */
|
||||
.video-card {
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.video-card:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Card Text Alignment */
|
||||
.card-body {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Modal Styles */
|
||||
.modal-content {
|
||||
background-color: white;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.modal-video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Modal Title and Description */
|
||||
.modal-title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.modal-description {
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
max-width: 65vw;
|
||||
/* 80% of the viewport width */
|
||||
max-height: 90vh;
|
||||
/* 90% of the viewport height */
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
height: auto;
|
||||
/* max-height: 75vh; */
|
||||
}
|
||||
Loading…
Reference in New Issue