From ffacc86d1920b8e7488c2a63844cda4c1a17924d Mon Sep 17 00:00:00 2001 From: Alireza Vaezi Date: Sun, 9 Feb 2025 00:04:00 -0500 Subject: [PATCH] init commit --- .gitignore | 1 + index.html | 46 ++++++++++++++++++++++ scripts.js | 42 ++++++++++++++++++++ station1.html | 95 ++++++++++++++++++++++++++++++++++++++++++++ station2.html | 97 +++++++++++++++++++++++++++++++++++++++++++++ station3.html | 106 ++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 55 ++++++++++++++++++++++++++ 7 files changed, 442 insertions(+) create mode 100644 .gitignore create mode 100644 index.html create mode 100644 scripts.js create mode 100644 station1.html create mode 100644 station2.html create mode 100644 station3.html create mode 100644 styles.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2641667 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +*.mp4 diff --git a/index.html b/index.html new file mode 100644 index 0000000..127d427 --- /dev/null +++ b/index.html @@ -0,0 +1,46 @@ + + + + + + + Home + + + + + + +
+
+ Station 1 + Station 2 + Station 3 +
+
+ + + + + \ No newline at end of file diff --git a/scripts.js b/scripts.js new file mode 100644 index 0000000..d5b53c1 --- /dev/null +++ b/scripts.js @@ -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 = ` +
+ +
+
${video.title}
+

${video.description}

+
+
+ `; + videoContainer.appendChild(col); + }); +} diff --git a/station1.html b/station1.html new file mode 100644 index 0000000..e252274 --- /dev/null +++ b/station1.html @@ -0,0 +1,95 @@ + + + + + + + Instructions for Station 1 + + + + + + + + + + + + +
+

Instructions for Station 1

+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/station2.html b/station2.html new file mode 100644 index 0000000..4295610 --- /dev/null +++ b/station2.html @@ -0,0 +1,97 @@ + + + + + + + Instructions for Station 2 + + + + + + + + + + + +
+

Instructions for Station 2

+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/station3.html b/station3.html new file mode 100644 index 0000000..26f923b --- /dev/null +++ b/station3.html @@ -0,0 +1,106 @@ + + + + + + + Instructions for Station 3 + + + + + + + + + + + +
+

Instructions for Station 3

+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..f063872 --- /dev/null +++ b/styles.css @@ -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; */ +} \ No newline at end of file