+ coming soon... (#120)

IRVLUTD · Sep 17, 2024 · 4bacfa9 · 4bacfa9
1 parent d853aef
commit 4bacfa9
Show file tree

Hide file tree

Showing 2 changed files with 122 additions and 0 deletions.
diff --git a/iTeach/InteractiveTeaching-main.dark.anonymous.jpg b/iTeach/InteractiveTeaching-main.dark.anonymous.jpg
diff --git a/iTeach/index.html b/iTeach/index.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Coming Soon</title>
+    <style>
+        body { margin: 0; padding: 0; }
+        html { height: 100%; cursor: default; }
+        body {
+            font-family: "Roboto", sans-serif;
+            width: 100%; height: 100%;
+            text-align: center;
+            display: table;
+            opacity: 1;
+            animation: fadein 3s forwards;
+        }
+        h2 {
+            font-weight: 300;
+            margin-bottom: 25px;
+        }
+        img {
+            max-width: 45%;
+            height: auto;
+        }
+        #main {
+            vertical-align: middle;
+            display: table-cell;
+        }
+        #progress {
+            width: 45%;
+            margin: 0 auto;
+            border-radius: 25px;
+            background-color: #f3f2f2;
+            padding: 7px 5px;
+        }
+        #fill {
+            padding: 2px 0;
+            width: 0%; /* Default to 0%, will be updated by JS */
+            border-radius: 25px;
+        }
+        #barpercent h3 {
+            color: white;
+            margin: 0; padding: 0;
+            opacity: 1;
+            animation: fadein 3s forwards;
+        }
+        @keyframes fadein  {
+            from { opacity: 0; }
+        }
+        @media screen and (max-width:600px) {
+            img {
+                max-width: 100%; /* Make image full width on mobile */
+            }
+            h1 {
+                font-size: 1.3em;
+            }
+            h2 {
+                margin: 1.1em;
+                font-size: 1.1em;
+            }
+            #progress {
+                width: 80%; /* Adjust progress bar for mobile */
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="main">
+        <h1>i-Teach: Interactive Teaching for Robot Perception using Mixed Reality</h1>
+        <img src="InteractiveTeaching-main.dark.anonymous.jpg" alt="Logo Image">
+        <h2>🚧 Our website is under construction, but something amazing is coming soon! Stay tuned! 😊✨</h2>
+        <div id="progress"><div id="fill"><div id="barpercent"><h3 id="progress-text">0%</h3></div></div></div>
+        <footer>
+            <p style="font-size: 0.8em; color: #777; margin-top: 20px;">Adapted from <a href="https://github.com/YC/coming-soon" target="_blank">https://github.com/YC/coming-soon</a></p>
+        </footer>
+    </div>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">
+
+    <script>
+        function getProgressPercentage(startDate, endDate) {
+            const today = new Date();
+            const start = new Date(startDate);
+            const end = new Date(endDate);
+
+            // Ensure that today's date falls within the range
+            if (today < start) return 0;
+            if (today > end) return 100;
+
+            const totalDuration = end - start;
+            const elapsed = today - start;
+
+            return Math.round((elapsed / totalDuration) * 100);
+        }
+
+        function getProgressColor(percentage) {
+            const colors = ['#ff0000', '#ff8000', '#ffbf00', '#ffff00', '#bfff00', '#80ff00', '#00ff00']; // Red to Green spectrum
+            const index = Math.min(Math.floor(percentage / (100 / 7)), 6); // Divide into 7 sections
+            return colors[index];
+        }
+
+        function updateProgressBar() {
+            const progressPercentage = getProgressPercentage('2024-09-16', '2024-09-22');
+            const progressColor = getProgressColor(progressPercentage);
+
+            // Update the width and background color of the progress bar
+            const progressBar = document.getElementById('fill');
+            const progressText = document.getElementById('progress-text');
+            progressBar.style.width = progressPercentage + '%';
+            progressBar.style.backgroundColor = progressColor;
+
+            // Update the percentage text inside the progress bar
+            progressText.textContent = progressPercentage + '%';
+        }
+
+        // Call the function to update progress bar on page load
+        updateProgressBar();
+    </script>
+
+
+</body>
+</html>