95 lines
4.0 KiB
HTML
95 lines
4.0 KiB
HTML
<!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> |