TDD: 1, Me: 0

app/ui/static/css/fonts/oswald.css

@@ -0,0 +1,14 @@
+@font-face {
+  font-family: 'Oswald';
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url(./TK3_WkUHHAIjg75cFRf3bXL8LICs13FvgUE.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Oswald';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(./TK3_WkUHHAIjg75cFRf3bXL8LICs1y9ogUE.ttf) format('truetype');
+}

app/ui/static/css/reset.min.css

@@ -0,0 +1 @@
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

app/ui/static/css/style.css

@@ -0,0 +1,419 @@
+@import url("./fonts/oswald.css");
+
+body {
+
+  overflow: hidden;
+
+  font-family: "Oswald", sans-serif;
+  background-color: #212121;
+}
+body section {
+  width: 90%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+body section .row {
+  align-items: center;
+  height: 100vh;
+}
+
+.card {
+  position: relative;
+  height: 400px;
+  width: 100%;
+  margin: 10px 0;
+  transition: ease all 2.3s;
+  perspective: 1200px;
+}
+.card:hover .cover {
+  transform: rotateX(0deg) rotateY(-180deg);
+}
+.card:hover .cover:before {
+  transform: translateZ(30px);
+}
+.card:hover .cover:after {
+  background-color: black;
+}
+.card:hover .cover h1 {
+  transform: translateZ(100px);
+}
+.card:hover .cover .price {
+  transform: translateZ(60px);
+}
+.card:hover .cover a {
+  transform: translateZ(-60px) rotatey(-180deg);
+}
+.card .cover {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  transform-style: preserve-3d;
+  transition: ease all 2.3s;
+  background-size: cover;
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+.card .cover:before {
+  content: "";
+  position: absolute;
+  border: 5px solid rgba(255, 255, 255, 0.5);
+  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
+  top: 20px;
+  left: 20px;
+  right: 20px;
+  bottom: 20px;
+  z-index: 2;
+  transition: ease all 2.3s;
+  transform-style: preserve-3d;
+  transform: translateZ(0px);
+}
+.card .cover:after {
+  content: "";
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  z-index: 2;
+  transition: ease all 1.3s;
+  background: rgba(0, 0, 0, 0.4);
+}
+.card .cover.item-a {
+  background-image: url("./images/img1.jpeg");
+}
+.card .cover.item-b {
+  background-image: url("./images/img2.jpeg");
+}
+.card .cover.item-c {
+  background-image: url("./images/img3.jpeg");
+}
+.card .cover h1 {
+  font-weight: 600;
+  position: absolute;
+  bottom: 55px;
+  left: 50px;
+  color: white;
+  transform-style: preserve-3d;
+  transition: ease all 2.3s;
+  z-index: 3;
+  font-size: 3em;
+  transform: translateZ(0px);
+}
+.card .cover .price {
+  font-weight: 200;
+  position: absolute;
+  top: 55px;
+  right: 50px;
+  color: white;
+  transform-style: preserve-3d;
+  transition: ease all 2.3s;
+  z-index: 4;
+  font-size: 2em;
+  transform: translateZ(0px);
+}
+.card .card-back {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background: #0b0f08;
+  transform-style: preserve-3d;
+  transition: ease all 2.3s;
+  transform: translateZ(-1px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.card .card-back a {
+  transform-style: preserve-3d;
+  transition: ease transform 2.3s, ease background 0.5s;
+  transform: translateZ(-1px) rotatey(-180deg);
+  background: transparent;
+  border: 1px solid white;
+  font-weight: 200;
+  font-size: 1.3em;
+  color: white;
+  padding: 14px 32px;
+  outline: none;
+  text-decoration: none;
+}
+.card .card-back a:hover {
+  background-color: white;
+  color: #0b0f08;
+}
+
+h3 {
+  color: #62f5c8;
+}
+.modal-wrapper {
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  background: rgba(0, 0, 0, 0); /* Start with transparent background */
+  box-sizing: border-box;
+  cursor: auto;
+  opacity: 1;
+  overflow-y: auto;
+  transition: 0.5s background ease, 0.5s opacity ease;
+  z-index: 100;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: 15px;
+  display:none;
+  opacity:0;
+}
+.modal-container {
+  background-color: #001020;
+  border-radius: 5px;
+  margin: auto;
+  max-width: 700px;
+  min-width: 200px;
+  position: relative;
+  padding: 20px;
+  color: #fff;
+  transform: scale(0);
+  transition: transform 0.5s ease;
+}
+.modal-wrapper.show .modal-container {
+  transform: scale(1);
+}
+.modal-wrapper.show {
+  background: #254642d9;
+} 
+.modal-close {
+  background: none;
+  border: none;
+  color: #62f5c8;
+  cursor: pointer;
+  outline: none;
+  padding: 0;
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  z-index: 10;
+}
+.modal-heading {
+  text-align: center; /* Center align the heading */
+}
+
+.modal-timer {
+  width: 0%;
+  height: 4px;
+  background: #42C0F2; /* Change color as needed */
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  border-top-right-radius: 5px;
+  box-shadow: 0 0 8px #42C0F2;
+}
+.timer-animation {
+  animation: countdown 5s linear forwards;
+}
+@keyframes countdown {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0%;
+  }
+}
+
+.spinner {
+color: #45d6b5;
+position: fixed;
+top: 50%;
+left: 50%;
+transform: translate(-50%, -50%);
+width: 280px;
+height: 280px;
+display: flex;
+align-items: center;
+justify-content: center;
+}
+
+.semi-circle {
+position: absolute;
+border-radius: 50%;
+border: 10px solid transparent;
+border-top-color: transparent; /* Color for the first semi-circle */
+transform-origin: center;
+}
+
+.semi-circle-1 {
+width: 300px; /* Smaller radius */ height: 300px; top: 50%; left: 50%; transform: translate(-50%, -50%);
+border-top-color: #45d6b5;
+animation: rotate-circle-1 2s linear infinite;
+}
+
+.semi-circle-2 {
+width: 350px; /* Medium radius */ height: 350px; top: 50%; left: 50%; transform: translate(-50%, -50%);
+border-top-color: #ff5733;
+animation: rotate-circle-2 3s linear infinite;
+}
+
+.semi-circle-3 {
+width: 400px; /* Larger radius */ height: 400px; top: 50%; left: 50%; transform: translate(-50%, -50%);
+border-top-color: #42f58d;
+animation: rotate-circle-3 4s linear infinite;
+}
+
+@keyframes rotate-circle-1 {
+0% { transform: translate(-50%, -50%) rotate(0deg); }
+100% { transform: translate(-50%, -50%) rotate(360deg); }
+}
+
+@keyframes rotate-circle-2 {
+0% { transform: translate(-50%, -50%) rotate(120deg); }
+100% { transform: translate(-50%, -50%) rotate(480deg); }
+}
+
+@keyframes rotate-circle-3 {
+0% { transform: translate(-50%, -50%) rotate(240deg); }
+100% { transform: translate(-50%, -50%) rotate(600deg); }
+}
+
+.preloader {
+position: fixed;
+top: 0;
+left: 0;
+width: 100%;
+height: 100vh;
+display: none;
+justify-content: center;
+align-items: center;
+flex-direction: column;
+z-index: 1000;
+}
+
+.progress-container {
+width: 300px;
+height: 2px;
+background: rgba(255, 255, 255, 0.1);
+margin-bottom: 20px;
+position: relative;
+z-index: 2;
+}
+
+.progress-bar {
+position: absolute;
+left: 0;
+top: 0;
+height: 100%;
+width: 0%;
+}
+
+.percentage {
+position: fixed;
+bottom: 32px;
+right: 32px;
+font-weight: 300;
+font-size: 15rem;
+line-height: 0.8;
+opacity: 0.1;
+}
+
+.text-container {
+height: 3em;
+position: relative;
+overflow: hidden;
+margin: 20px 0;
+width: 200px;
+}
+
+.loading-text {
+font-weight: 300;
+font-size: 1rem;
+text-transform: uppercase;
+letter-spacing: -0.02em;
+position: absolute;
+width: 100%;
+text-align: center;
+}
+
+.loading-text.initial {
+transform: translateY(0);
+}
+
+.loading-text.complete {
+transform: translateY(100%);
+}
+
+.loading-text .char {
+display: inline-block;
+}
+
+.content {
+margin: auto;
+position: fixed;
+top: 0;
+left: 0;
+width: 100%;
+height: 100vh;
+display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+visibility: hidden;
+z-index: 1;
+
+overflow: auto;
+
+}
+
+.content h1 {
+font-size: 3rem;
+margin-bottom: 1rem;
+overflow: hidden;
+}
+
+.content p {
+font-size: 1.2rem;
+overflow: hidden;
+}
+
+.content .char {
+display: inline-block;
+transform: translateY(100%);
+opacity: 0;
+}
+
+/* Add these classes for the stagger animation */
+.preloader-item {
+opacity: 1;
+transform: translateY(0);
+}
+
+/* Media Queries for Mobile Devices */
+@media (max-width: 768px) {
+.spinner {
+width: 140px;
+height: 140px;
+}
+.semi-circle-1 {
+width: 150px;
+height: 150px;
+}
+.semi-circle-2 {
+width: 175px;
+height: 175px;
+}
+.semi-circle-3 {
+width: 200px;
+height: 200px;
+}
+.percentage {
+font-size: 10rem;
+}
+
+.content {
+max-height: calc(100vh - 7vh);
+}
+body section .row{
+padding-top: 3.5vh; /* Adjust this value as needed */
+padding-bottom: 3.5vh; /* Adjust this value as needed */
+box-sizing: border-box;
+}
+
+}

app/ui/static/script.js

@@ -0,0 +1,260 @@
+// Disable GSAP's use of requestAnimationFrame
+gsap.ticker.fps(60);
+gsap.ticker.lagSmoothing(0);
+
+// Add an event listener to call showLoadingSpinner when the DOM is fully loaded
+// document.addEventListener('DOMContentLoaded', function() { showLoadingSpinner(); });
+
+function select(selector) {
+    return document.querySelector(selector);
+}
+
+function showLoadingSpinner() {
+    const spinner = select("#loading-spinner");
+    spinner.style.display = "block";
+}
+
+function hideLoadingSpinner() {
+    const spinner = select("#loading-spinner");
+    spinner.style.display = "none";
+}
+
+document.addEventListener("click", debounce((e) => {
+    if (e.target.closest(`[data-action="openModal"]`)) {
+	const device = e.target.dataset.device;
+	const action = e.target.dataset.actionType;
+	let url = `/${action}/${device}`;
+	if (action === "wol") {
+	    fetchKey().then((key) => {
+	        url += `?key=${key}`;
+		showLoadingSpinner();
+		openModal(url);
+	    }).catch(error => {
+                console.error('Error fetching key:', error);
+	    });
+	} else {
+	    showLoadingSpinner();
+            openModal(url);
+	}
+    }
+    if (
+        e.target.closest(`[data-action="closeModal"]`) ||
+        e.target.classList.contains("modal-wrapper")
+    ) {
+        closeModal();
+    }
+}, 300));
+
+let countdown;
+
+async function fetchKey() {
+    try {
+        const response = await fetch('/get_key');
+        const data = await response.json();
+        return data.key;
+    } catch (error) {
+        console.error('Error fetching key:', error);
+	throw error;
+    }
+}
+
+function openModal(url) {
+    closeExistingModal().then(() => {
+        fetch(url)
+            .then(response => response.text())
+            .then(html => {
+		hideLoadingSpinner();
+                const modal = `
+                    <div class="modal-wrapper">
+                        <div class="modal-container">
+                            <button class="modal-close" data-action="closeModal">
+                                <svg viewBox="0 0 20 20" width="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
+                                    <path d="M 2 2 L 18 18" stroke-width="3" fill="transparent"></path>
+                                    <path d="M 18 2 L 2 18" stroke-width="3" fill="transparent"></path>
+                                </svg>
+                            </button>
+			    <h3 class="modal-heading">Server says</h3>
+			    <br>
+			    ${html}
+			    <div class="modal-timer" id="modal-timer"></div>
+                        </div>
+                    </div>`;
+                select("body").insertAdjacentHTML("beforeend", modal);
+		const wrapper = select(".modal-wrapper");
+		wrapper.style.display = "flex";
+                select("body").style.overflow = "hidden";
+                setTimeout(() => {
+		    wrapper.style.opacity = 1;
+		    wrapper.classList.add("show");
+	    	    startCountdown();
+                }, 100);
+	    }).catch(error => {
+                hideLoadingSpinner();
+		console.error('Error fetching content:', error)
+            });
+    });
+}
+
+function closeModal() {
+    const wrapper = document.querySelector(".modal-wrapper");
+    return new Promise((resolve) => {
+        if (wrapper) {
+            const container = document.querySelector(".modal-container");
+	    if (container) {
+                container.style.transform = 'scale(0)';
+	    }
+            wrapper.style.opacity = 0;
+            setTimeout(() => {
+	        if (wrapper.parentNode) {
+                    wrapper.remove();
+                }
+	        select("body").style.overflow = "";
+	        clearTimeout(countdown);
+		resolve();
+            }, 500);
+        } else {
+	    resolve();
+	}
+    });
+}
+
+function closeExistingModal() {
+    const existingWrapper = document.querySelector(".modal-wrapper");
+    return new Promise((resolve) => {
+        if (existingWrapper) {
+	    existingWrapper.style.opacity = 0;
+	    setTimeout(() => {
+                if (existingWrapper.parentNode) {
+	            existingWrapper.remove();
+	        }
+                select("body").style.overflow = ""; // Reset body overflow
+                clearTimeout(countdown); // Clear any existing countdown
+		resolve();
+	    }, 500);
+	} else {
+	    resolve();
+	}
+    });
+}
+
+function startCountdown() {
+    const timer = document.getElementById('modal-timer');
+    if (timer) {
+        timer.classList.add('timer-animation');
+	countdown = setTimeout(() => {
+	    closeModal();
+	}, 5000);
+    }
+}
+
+/* Debounce Function */
+function debounce(func, wait) {
+    let timeout;
+    return function(...args) {
+        clearTimeout(timeout);
+	timeout = setTimeout(() => func.apply(this, args), wait);
+    };
+}
+
+window.onload = function() {
+
+  
+  document.querySelector(".preloader").style.display = 'flex';
+
+  const loadingText = new SplitType(".loading-text.initial", { types: "chars" });
+  const completeText = new SplitType(".loading-text.complete", { types: "chars" });
+  const titleText = new SplitType(".content h1", { types: "chars" });
+  const paragraphText = new SplitType(".content p", { types: "chars" });
+
+  gsap.set(".loading-text.complete", { y: "100%" });
+  gsap.set(loadingText.chars, { opacity: 0, y: 100 });
+  gsap.set(completeText.chars, { opacity: 0, y: 100 });
+
+  gsap.to(loadingText.chars, {
+    opacity: 1,
+    y: 0,
+    duration: 0.5,
+    stagger: 0.05,
+    ease: "power2.out"
+  });
+
+
+  const colorStages = [
+    { bg: "rgb(60, 66, 55)", text: "rgb(230, 225, 215)" },
+    { bg: "rgb(200, 180, 160)", text: "rgb(60, 66, 55)" },
+    { bg: "rgb(230, 225, 215)", text: "rgb(60, 66, 55)" },
+    { bg: "rgb(100, 110, 90)", text: "rgb(230, 225, 215)" }
+  ];
+
+  function updateColors(progress) {
+    const stage = Math.floor(progress / 25);
+    if (stage < colorStages.length) {
+      document.querySelector(".preloader").style.backgroundColor = colorStages[stage].bg;
+      document.querySelector(".progress-bar").style.backgroundColor = colorStages[stage].text;
+      document.querySelectorAll(".loading-text .char, .percentage").forEach((el) => {
+	el.style.color = colorStages[stage].text;
+      });
+    }
+  }
+
+  const tl = gsap.timeline({ paused: true });
+  tl.to(".progress-bar", {
+    width: "100%",
+    duration: 5,
+    ease: "power1.inOut",
+    onUpdate: function () {
+      const progress = Math.round(this.progress() * 100);
+      document.querySelector(".percentage").textContent = progress;
+      updateColors(progress);
+    }
+  }).to(".loading-text.initial", {
+    y: "-100%",
+    duration: 0.5,
+    ease: "power2.inOut"
+  }).to(".loading-text.complete", {
+    y: "0%",
+    duration: 0.5,
+    ease: "power2.inOut"
+  }, "<" ).to(completeText.chars, {
+    opacity: 1,
+    y: 0,
+    duration: 0.3,
+    stagger: 0.03,
+    ease: "power2.out"
+  }, "<0.2" ).to(".preloader", {
+    y: "-100vh",
+    duration: 1,
+    ease: "power2.inOut",
+    delay: 0.8
+  }).set(".content", {
+    visibility: "visible"
+  }, "-=1").to([titleText.chars, paragraphText.chars], {
+    opacity: 1,
+    y: 0,
+    duration: 1,
+    stagger: 0.02,
+    ease: "power4.out"
+  }, "-=0.5").set(".preloader", {
+    display: "none" });
+
+  let isFirstLoad = !localStorage.getItem('firstLoadDone');
+  if (!isFirstLoad) {
+    const tl = gsap.timeline();
+    tl.set(".preloader", {
+      display: "none"
+    }).set(".content", {
+      visibility: "visible"
+    }, "-=1").to([titleText.chars, paragraphText.chars], {
+      opacity: 1,
+      y: 0,
+      duration: 2,
+      stagger: 0.04,
+      ease: "power2.out"
+    }, "=0.5")
+  } else { 
+    document.querySelector('.preloader').style.display = 'flex';
+    tl.play(); // Start the GSAP timeline
+    localStorage.setItem('firstLoadDone', 'true');
+  }
+
+};