106 lines
4.5 KiB
HTML
106 lines
4.5 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 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> |