First commit

Thomas-Jld · Jan 12, 2024 · 91b7313 · 91b7313
commit 91b7313
Show file tree

Hide file tree

Showing 4 changed files with 305 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+# MDT Projects January 2024
diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link  type="text/css" rel="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+<body>
+    <div id="mural">
+        <div id="muralTitle">
+            <h2 id="title"></h2>
+            <h3 id="author"></h3>
+        </div>
+        <div id="iframeDiv" class="iframeAnim" >
+            <iframe id="muralIframe"frameborder="0" scrolling="no"></iframe>
+        </div>
+        <div id="muralControls">
+            <button id="muralPreviousButton" class="muralButton"><</button>
+            <button id="muralVisitButton">View Code</button>
+            <button id="muralNextButton" class="muralButton">></button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,129 @@
+
+const muralDiv = document.getElementById("mural");
+let currentMural = 0;
+
+function changeMural(title, author, source) {
+    let titleElement = document.getElementById("title");
+    titleElement.className = "muralTitle";
+    titleElement.innerHTML = title;
+
+    let authorElement = document.getElementById("author");
+    authorElement.className = "muralAuthor";
+    authorElement.innerHTML = `by ${author}.`;
+
+    let iframeElement = document.getElementById("muralIframe");
+    iframeElement.src = source;
+
+    window.history.pushState("", "", `#${currentMural}`);
+    window.location.hash = currentMural;
+}
+
+let muralList = [
+    {
+        title: "Arctic Freezer",
+        author: "Gauthier G",
+        source: "https://jeeezzus.github.io/MDT_Three.JS/"
+    },
+    {
+        title: "Solar Oven",
+        author: "Yohann C",
+        source: "https://yocoss.github.io/SolarOven/"
+    },
+    {
+        title: "OUI",
+        author: "Claudio O",
+        source: "https://claudio9701.github.io/ift-mdt-three/"
+    },
+    {
+        title: "3D Speech-Driven Animation",
+        author: "Hugo Da",
+        source: "https://hugodmn.github.io/ThreeJsProject/"
+    },
+    {
+        title: "BIOS",
+        author: "Thaïs G",
+        source: "https://thaisgauthier.github.io/3D-projet/"
+    },
+    {
+        title: "GCode Viewer",
+        author: "Marc-Adrien M",
+        source: "https://ram6ces.github.io/gcode-viewer/"
+    },
+    {
+        title: "Whistle Babe",
+        author: "Mathis T",
+        source: "https://matlamenasse.github.io/whistle_babe/"
+    },
+    {
+        title: "Tiny Marsh",
+        author: "Noé G",
+        source: "https://antoinoe.github.io/threejs/"
+    },
+    {
+        title: "Relaxing Waves",
+        author: "Diane B",
+        source: "https://dianubv.github.io/RelaxingWaves/"
+    },
+    {
+        title: "Voice Interaction",
+        author: "Nathan V",
+        source: "https://arcadia24.github.io/voice-interaction-three/"
+    },
+    {
+        title: "HeartBit",
+        author: "Marine B",
+        source: "https://marinereynaud25.github.io/HeartBit-ThreeJS/"
+    },
+    {
+        title: "Point Cloud Visualisation",
+        author: "Etienne P",
+        source: "https://etienne248.github.io/TreeJs_Point_Cloud_visualisation/"
+    },
+    {
+        title: "3D Music Visualizer",
+        author: "Hugo J",
+        source: "https://hugo-jrlnd.github.io/MDT_project/"
+    }
+]
+
+
+let viewCode = document.getElementById("muralVisitButton");
+viewCode.onclick = () => {
+    let link = document.getElementById('muralIframe').src;
+    let username = link.split('.')[0].split('//')[1];
+    let repo = link.split('/').slice(-2, -1)[0]
+    let url = `https://github.com/${username}/${repo}`;
+    window.open(url)
+}
+
+let iframeDiv = document.getElementById("iframeDiv");
+function triggerAnimation() {
+    // remove iframeAnim class
+    iframeDiv.classList.remove("iframeAnim");
+    // trigger reflow
+    void iframeDiv.offsetWidth;
+    // add iframeAnim class
+    iframeDiv.classList.add("iframeAnim");
+}
+
+let nextButton = document.getElementById("muralNextButton");
+nextButton.onclick = () => {
+    currentMural = (currentMural + 1) % muralList.length;
+    changeMural(muralList[currentMural].title, muralList[currentMural].author, muralList[currentMural].source);
+    triggerAnimation();
+}
+
+let previousButton = document.getElementById("muralPreviousButton");
+previousButton.onclick = () => {
+    currentMural = (currentMural - 1 + muralList.length) % muralList.length;
+    changeMural(muralList[currentMural].title, muralList[currentMural].author, muralList[currentMural].source);
+    triggerAnimation();
+}
+
+
+if (window.location.hash) {
+    let hash = window.location.hash.substring(1);
+    currentMural = parseInt(hash);
+}
+
+changeMural(muralList[currentMural].title, muralList[currentMural].author, muralList[currentMural].source);
diff --git a/style.css b/style.css
@@ -0,0 +1,149 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+:root {
+    --primary-color: #777777;
+    --secondary-color: #f5f5f5;
+    --tertiary-color: #f2f2f2;
+    --quaternary-color: #ffffff;
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+
+    overflow-y: hidden;
+    font-family: 'Inter', sans-serif;
+
+    background-color: var(--secondary-color);
+}
+
+#mural {
+    width: 100vw;
+    height: 100vh;
+
+    display: flex;
+    flex-direction: column;
+}
+
+#muralTitle {
+    width: 100vw;
+    height: 8vh;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+#muralTitle h2 {
+    padding: 0;
+    margin: 0;
+
+    text-decoration: underline;
+
+    line-height: 1.5rem;
+    vertical-align: baseline;
+}
+#muralTitle h3 {
+    padding: 0;
+    margin: 0 0 0 4rem;
+
+    font-weight: 300;
+
+    line-height: 1.5rem;
+    vertical-align: baseline;
+}
+
+@keyframes transition {
+    0%   {
+        width: 80vw;
+    }
+    50%  {
+        width: 0;
+    }
+    100% {
+        width: 80vw;
+    }
+}
+
+#iframeDiv {
+    width: 80vw;
+    margin: 0 auto;
+    animation-duration: 0.5s;
+    animation-iteration-count: 1;
+    overflow: hidden;
+}
+
+#mural iframe {
+    width: 80vw;
+    height: 80vh;
+
+    border: 1px solid #919191;
+    color: #919191;
+    box-shadow: 0 0.2rem 0.5rem var(--tertiary-color);
+
+    border: none;
+    overflow: hidden;
+
+    transition: all 0.5s ease;
+
+
+    background-color: var(--primary-color);
+}
+
+.iframeAnim {
+    animation-name: transition;
+}
+
+
+@media screen and (max-width: 768px) {
+    #mural iframe {
+        width: 90vw;
+    }
+}
+
+
+#muralControls {
+    width: 80vw;
+    height: 12vh;
+    margin: 0 auto;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+}
+
+button {
+    background-color: var(--secondary-color);
+    color: var(--primary-color);
+    border: 1px solid var(--primary-color);
+
+    font-size: 1.2rem;
+}
+
+button:hover {
+    background-color: var(--primary-color);
+    color: var(--secondary-color);
+    border: 1px solid var(--secondary-color);
+
+    cursor: pointer;
+}
+
+.muralButton {
+    width: 4rem;
+    height: 4rem;
+
+    font-size: 2rem;
+    box-shadow: 0 0.2rem 0.5rem var(--tertiary-color);
+
+    border-radius: 2rem;
+}
+
+
+#muralVisitButton {
+    width: 10rem;
+    height: 4rem;
+
+    border-radius: 2rem;
+}