diff --git a/README.md b/README.md new file mode 100644 index 0000000..a8e2d0d --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +# MDT Projects January 2024 diff --git a/index.html b/index.html new file mode 100644 index 0000000..96166c5 --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ + + + + + + + Document + + +
+
+

+

+
+
+ +
+
+ + + +
+
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..09634e9 --- /dev/null +++ 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 new file mode 100644 index 0000000..f3541f1 --- /dev/null +++ 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; +}