From c758c824e75c979583c6c9963ccb273eb3086ec4 Mon Sep 17 00:00:00 2001
From: ShawnRay09 <shawnyray116@gmail.com>
Date: Sat, 2 Nov 2024 12:57:17 -0700
Subject: [PATCH] home page, styling

---
 _includes/jupyter_chatroom.html               |   2 +
 _includes/jupyter_home.html                   |  80 ++++++
 _includes/jupyter_resources.html              | 249 ++++++++++++++++++
 _includes/jupyter_timer.html                  | 145 ++++++++++
 _includes/nav/shared_interests.html           |   2 +-
 .../shared_interests/school_subjects.md       |  27 --
 .../school_subjects_chatroom.md               |   8 +
 .../shared_interests/school_subjects_home.md  |   8 +
 ...ources.md => school_subjects_resources.md} |   0
 .../{timer.md => school_subjects_timer.md}    |   0
 10 files changed, 493 insertions(+), 28 deletions(-)
 create mode 100644 _includes/jupyter_home.html
 delete mode 100644 navigation/shared_interests/school_subjects.md
 create mode 100644 navigation/shared_interests/school_subjects_chatroom.md
 create mode 100644 navigation/shared_interests/school_subjects_home.md
 rename navigation/shared_interests/{resources.md => school_subjects_resources.md} (100%)
 rename navigation/shared_interests/{timer.md => school_subjects_timer.md} (100%)

diff --git a/_includes/jupyter_chatroom.html b/_includes/jupyter_chatroom.html
index 19cd638c1..b060cf0a1 100644
--- a/_includes/jupyter_chatroom.html
+++ b/_includes/jupyter_chatroom.html
@@ -87,6 +87,7 @@
 </style>
 
 <div class="nav-buttons">
+    <a href="/flocker_frontend/shared_interests/jupyter/home/" class="nav-button">Home</a>
     <a href="/flocker_frontend/shared_interests/jupyter/chatroom/" class="nav-button">Chatroom</a>
     <a href="/flocker_frontend/shared_interests/jupyter/timer/" class="nav-button">School Timer</a>
     <a href="/flocker_frontend/shared_interests/jupyter/resources/" class="nav-button">Resources</a>
@@ -125,3 +126,4 @@ <h1>Jupyter</h1>
         }
     });
 </script>
+ 
\ No newline at end of file
diff --git a/_includes/jupyter_home.html b/_includes/jupyter_home.html
new file mode 100644
index 000000000..d2247d6cd
--- /dev/null
+++ b/_includes/jupyter_home.html
@@ -0,0 +1,80 @@
+<style>
+    body {
+        margin: 0;
+        font-family: Arial, sans-serif;
+        background-color: black;
+        color: white;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100vh;
+        padding: 20px; /* Add padding to prevent overlap */
+        box-sizing: border-box;
+    }
+
+    .home-container {
+        text-align: center;
+    }
+
+    .title {
+        font-size: 36px;
+        color: #a64ca6;
+        margin-top: 20px; /* Adjusts spacing above the title */
+        margin-bottom: 10px;
+    }
+
+    .subtitle {
+        font-size: 18px;
+        color: #7a3e9d;
+        margin-bottom: 30px;
+    }
+
+    .nav-buttons {
+        display: flex;
+        gap: 15px;
+        justify-content: center;
+        margin-top: 20px;
+    }
+
+    .nav-button {
+        padding: 15px 30px;
+        background-color: #7a3e9d;
+        color: white;
+        border: none;
+        border-radius: 8px;
+        cursor: pointer;
+        font-size: 16px;
+        text-decoration: none;
+        text-align: center;
+        transition: background-color 0.3s ease;
+    }
+
+    .nav-button:hover {
+        background-color: #a64ca6;
+    }
+
+    .logo {
+        width: 100px;
+        margin-bottom: 20px;
+        margin-top: 20px; /* Extra space above logo to avoid overlap */
+        animation: float 2s ease-in-out infinite;
+    }
+
+    @keyframes float {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(-10px); }
+    }
+</style>
+
+<div class="home-container">
+    <img class="logo" src="/flocker_frontend/images/jupiter.jpg" alt="jupyter logo">
+    <h1 class="title">Welcome to Jupyter Home</h1>
+    <p class="subtitle">Explore your tools below</p>
+
+    <div class="nav-buttons">
+        <a href="/flocker_frontend/shared_interests/jupyter/chatroom/" class="nav-button">Chatroom</a>
+        <a href="/flocker_frontend/shared_interests/jupyter/timer/" class="nav-button">School Timer</a>
+        <a href="/flocker_frontend/shared_interests/jupyter/resources/" class="nav-button">Resources</a>
+    </div>
+</div>
diff --git a/_includes/jupyter_resources.html b/_includes/jupyter_resources.html
index e69de29bb..df58c5ba1 100644
--- a/_includes/jupyter_resources.html
+++ b/_includes/jupyter_resources.html
@@ -0,0 +1,249 @@
+<div id="container">
+    <div class="nav-buttons">
+        <a href="/flocker_frontend/shared_interests/jupyter/home/" class="nav-button">Home</a>
+        <a href="/flocker_frontend/shared_interests/jupyter/chatroom/" class="nav-button">Chatroom</a>
+        <a href="/flocker_frontend/shared_interests/jupyter/timer/" class="nav-button">School Timer</a>
+        <a href="/flocker_frontend/shared_interests/jupyter/resources/" class="nav-button">Resources</a>
+    </div>
+
+    <h1>Subject Resources</h1>
+    <select id="subjectSelect" onchange="showResources()">
+        <option value="">Select a subject</option>
+        <option value="math">Math</option>
+        <option value="science">Science</option>
+        <option value="english">English</option>
+    </select>
+
+    <div id="resources" style="margin-top: 20px;"></div>
+</div>
+
+<style>
+    /* Styling for central alignment and purple/black theme */
+    #container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        width: 100%;
+        max-width: 600px;
+        padding: 20px;
+        background-color: #1a1a1a;
+        color: white;
+        font-family: Arial, sans-serif;
+    }
+
+    .nav-buttons {
+        display: flex;
+        gap: 10px;
+        margin-bottom: 20px;
+        justify-content: center;
+    }
+
+    .nav-button {
+        padding: 10px 20px;
+        background-color: #7a3e9d;
+        color: white;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        font-size: 14px;
+        text-decoration: none;
+        text-align: center;
+        transition: background-color 0.3s ease;
+        box-shadow: 0 0 8px #a64ca6;
+    }
+
+    .nav-button:hover {
+        background-color: #a64ca6;
+        box-shadow: 0 0 15px #a64ca6;
+    }
+
+    select {
+        padding: 10px;
+        font-size: 16px;
+        border-radius: 5px;
+        border: 1px solid #555;
+        background-color: #333;
+        color: white;
+        margin-bottom: 20px;
+    }
+
+    #resources {
+        margin-top: 20px;
+    }
+
+    a {
+        color: #a64ca6;
+        text-decoration: none;
+    }
+
+    a:hover {
+        text-decoration: underline;
+    }
+
+    h2 {
+        color: #a64ca6;
+        text-shadow: 0 0 5px #a64ca6;
+    }
+
+    #calculator, #derivativeCalculator {
+        display: none;
+        background-color: #222;
+        padding: 20px;
+        border-radius: 10px;
+        margin-top: 20px;
+        box-shadow: 0 0 15px #7a3e9d;
+        max-width: 100%;
+    }
+
+    input[type="text"] {
+        width: 100%;
+        max-width: 200px;
+        padding: 10px;
+        font-size: 18px;
+        text-align: right;
+        margin-bottom: 10px;
+        border-radius: 5px;
+        border: none;
+        background-color: #333;
+        color: white;
+    }
+
+    button {
+        padding: 10px;
+        font-size: 16px;
+        margin: 2px;
+        border-radius: 5px;
+        border: none;
+        background-color: purple;
+        color: white;
+        cursor: pointer;
+        box-shadow: 0 0 10px #7a3e9d;
+        transition: background-color 0.3s ease;
+    }
+
+    button:hover {
+        background-color: #6a2c8a;
+        box-shadow: 0 0 15px #a64ca6;
+    }
+
+    #history {
+        margin-top: 10px;
+        text-align: left;
+    }
+</style>
+
+<script>
+    function showResources() {
+        const resourcesDiv = document.getElementById("resources");
+        const subject = document.getElementById("subjectSelect").value;
+
+        let resources = "";
+
+        switch (subject) {
+            case "math":
+                resources = `
+                    <h2>Math Resources</h2>
+                    <div id="calculator">
+                        <input type="text" id="input" disabled>
+                        <div>
+                            <button onclick="clearInput()">C</button>
+                            <button onclick="appendToInput('7')">7</button>
+                            <button onclick="appendToInput('8')">8</button>
+                            <button onclick="appendToInput('9')">9</button>
+                            <button onclick="appendToInput('/')">/</button>
+                        </div>
+                        <div>
+                            <button onclick="appendToInput('4')">4</button>
+                            <button onclick="appendToInput('5')">5</button>
+                            <button onclick="appendToInput('6')">6</button>
+                            <button onclick="appendToInput('*')">*</button>
+                        </div>
+                        <div>
+                            <button onclick="appendToInput('1')">1</button>
+                            <button onclick="appendToInput('2')">2</button>
+                            <button onclick="appendToInput('3')">3</button>
+                            <button onclick="appendToInput('-')">-</button>
+                        </div>
+                        <div>
+                            <button onclick="appendToInput('0')">0</button>
+                            <button onclick="calculateResult()">=</button>
+                            <button onclick="appendToInput('+')">+</button>
+                        </div>
+                        <h3>History:</h3>
+                        <div id="history"></div>
+                    </div>
+                    <button onclick="toggleCalculator()">Toggle Calculator</button>
+                    <div id="derivativeCalculator">
+                        <h2>Derivative Calculator</h2>
+                        <input type="text" id="functionInput" placeholder="Enter polynomial function">
+                        <button onclick="calculateDerivative()">Find Derivative</button>
+                        <div id="derivativeResult"></div>
+                    </div>
+                `;
+                break;
+            case "science":
+                resources = `
+                    <h2>Science Resources</h2>
+                    <ul>
+                        <li><a href="https://www.sciencebuddies.org/" target="_blank">Science Buddies</a></li>
+                        <li><a href="https://www.periodicvideos.com/" target="_blank">Periodic Table Videos</a></li>
+                        <li><a href="https://www.cellsalive.com/" target="_blank">Cells Alive!</a></li>
+                    </ul>
+                `;
+                break;
+            case "english":
+                resources = `
+                    <h2>English Resources</h2>
+                    <ul>
+                        <li><a href="https://www.dictionary.com/" target="_blank">Dictionary</a> - Definitions and synonyms</li>
+                        <li><a href="https://www.thesaurus.com/" target="_blank">Thesaurus</a> - Synonyms and antonyms</li>
+                    </ul>
+                `;
+                break;
+            default:
+                resources = "";
+                break;
+        }
+
+        resourcesDiv.innerHTML = resources;
+
+        if (subject === "math") {
+            document.getElementById("derivativeCalculator").style.display = "block";
+        } else {
+            document.getElementById("derivativeCalculator").style.display = "none";
+        }
+    }
+
+    function toggleCalculator() {
+        const calculator = document.getElementById("calculator");
+        calculator.style.display = calculator.style.display === "none" ? "block" : "none";
+    }
+
+    function appendToInput(value) {
+        const input = document.getElementById("input");
+        input.value += value;
+    }
+
+    function clearInput() {
+        document.getElementById("input").value = "";
+    }
+
+    function calculateResult() {
+        const input = document.getElementById("input");
+        const result = eval(input.value);
+        document.getElementById("history").innerHTML += `<div>${input.value} = ${result}</div>`;
+        input.value = result;
+    }
+
+    function calculateDerivative() {
+        const functionInput = document.getElementById("functionInput").value;
+        const derivative = functionInput.replace(/(\d*)(x\^(\d+))/g, (match, coefficient, variable, power) => {
+            const newCoefficient = coefficient ? coefficient * power : power;
+            const newPower = power - 1;
+            return `${newCoefficient}x^${newPower}`;
+        }).replace(/(x)(?![\^])/g, '1');
+
+        document.getElementById("derivativeResult").innerText = `Derivative: ${derivative}`;
+    }
+</script>
diff --git a/_includes/jupyter_timer.html b/_includes/jupyter_timer.html
index e69de29bb..46acec215 100644
--- a/_includes/jupyter_timer.html
+++ b/_includes/jupyter_timer.html
@@ -0,0 +1,145 @@
+<div id="progressContainer">
+    <div class="nav-buttons">
+        <a href="/flocker_frontend/shared_interests/jupyter/home/" class="nav-button">Home</a>
+        <a href="/flocker_frontend/shared_interests/jupyter/chatroom/" class="nav-button">Chatroom</a>
+        <a href="/flocker_frontend/shared_interests/jupyter/timer/" class="nav-button">School Timer</a>
+        <a href="/flocker_frontend/shared_interests/jupyter/resources/" class="nav-button">Resources</a>
+    </div>
+</div>
+
+<style>
+    body {
+        margin: 0;
+        font-family: Arial, sans-serif;
+        background-color: black;
+        color: white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+    }
+
+    #progressContainer {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        color: white;
+    }
+
+    .nav-buttons {
+        display: flex;
+        gap: 10px;
+        margin-top: 30px;
+        justify-content: center;
+    }
+
+    .nav-button {
+        padding: 10px 20px;
+        background-color: #7a3e9d;
+        color: white;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        font-size: 14px;
+        text-decoration: none;
+        text-align: center;
+        transition: background-color 0.3s ease;
+    }
+
+    .nav-button:hover {
+        background-color: #a64ca6;
+    }
+
+    svg {
+        margin-bottom: -40px;
+    }
+
+    #timeText {
+        font-size: 20px;
+        text-align: center;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: white;
+        text-shadow: 0 0 5px purple, 0 0 10px purple;
+        padding: 10px;
+    }
+
+    .glow {
+        filter: drop-shadow(0 0 5px purple) drop-shadow(0 0 10px purple);
+    }
+</style>
+
+<script>
+    const schoolStart = new Date();
+    schoolStart.setHours(8, 35, 0, 0);
+
+    const schoolEnd = new Date();
+    schoolEnd.setHours(15, 45, 0, 0);
+
+    const radius = 150;
+    const circumference = 2 * Math.PI * radius;
+
+    const svgNamespace = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(svgNamespace, "svg");
+    svg.setAttribute("width", radius * 2 + 40);
+    svg.setAttribute("height", radius * 2 + 40);
+
+    const circle = document.createElementNS(svgNamespace, "circle");
+    circle.setAttribute("cx", radius + 20);
+    circle.setAttribute("cy", radius + 20);
+    circle.setAttribute("r", radius);
+    circle.setAttribute("stroke", "lightgray");
+    circle.setAttribute("stroke-width", "15");
+    circle.setAttribute("fill", "none");
+
+    const progressCircle = document.createElementNS(svgNamespace, "circle");
+    progressCircle.setAttribute("cx", radius + 20);
+    progressCircle.setAttribute("cy", radius + 20);
+    progressCircle.setAttribute("r", radius);
+    progressCircle.setAttribute("stroke", "purple");
+    progressCircle.setAttribute("stroke-width", "15");
+    progressCircle.setAttribute("fill", "none");
+    progressCircle.setAttribute("stroke-dasharray", circumference);
+    progressCircle.setAttribute("stroke-dashoffset", circumference);
+    progressCircle.classList.add("glow");
+
+    svg.appendChild(circle);
+    svg.appendChild(progressCircle);
+    document.getElementById('progressContainer').appendChild(svg);
+
+    const text = document.createElement("div");
+    text.id = "timeText";
+    text.textContent = "Hours Left of School";
+    document.getElementById('progressContainer').appendChild(text);
+
+    function updateProgress() {
+        const now = new Date();
+        const totalSchoolTime = schoolEnd - schoolStart;
+        let elapsedSchoolTime = 0;
+
+        if (now >= schoolStart && now < schoolEnd) {
+            elapsedSchoolTime = now - schoolStart;
+        } else if (now >= schoolEnd) {
+            elapsedSchoolTime = totalSchoolTime;
+        }
+
+        const progress = (elapsedSchoolTime / totalSchoolTime) * circumference;
+        progressCircle.setAttribute("stroke-dashoffset", circumference - progress);
+
+        let message;
+        if (now < schoolStart) {
+            message = `School starts in ${Math.floor((schoolStart - now) / 60000)} minutes.`;
+        } else if (now < schoolEnd) {
+            message = `Hours left of school: ${Math.ceil((schoolEnd - now) / 60000 / 60)} hour(s).`;
+        } else {
+            message = 'School is over for the day.';
+        }
+
+        document.getElementById('timeText').textContent = message;
+    }
+
+    updateProgress();
+    setInterval(updateProgress, 60000);
+</script>
diff --git a/_includes/nav/shared_interests.html b/_includes/nav/shared_interests.html
index 297f448e2..51c23035f 100644
--- a/_includes/nav/shared_interests.html
+++ b/_includes/nav/shared_interests.html
@@ -7,7 +7,7 @@
         </td>
         <td id="Limitless Connections"><a href="{{site.baseurl}}/shared_interests/limitconnect">Limitless Connections</a></td>
         <td id="DNHS Football"><a href="{{site.baseurl}}/shared_interests/football">DNHS Football</a></td>
-        <td id="School Subjects"><a href="{{site.baseurl}}/shared_interests/jupyter/chatroom">School Subjects</a></td>
+        <td id="School Subjects"><a href="{{site.baseurl}}/shared_interests/jupyter/home">School Subjects</a></td>
         <td id="Music"><a href="{{site.baseurl}}/music/">Music</a></td>
         <td id="Satire"><a href="{{site.baseurl}}/shared_interests/satire">Satire</a></td>
         <td id="AGK"><a href="{{site.baseurl}}/shared_interests/agk/agk.html">AGK</a></td>
diff --git a/navigation/shared_interests/school_subjects.md b/navigation/shared_interests/school_subjects.md
deleted file mode 100644
index 90112d989..000000000
--- a/navigation/shared_interests/school_subjects.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-layout: page
-title: Chatroom
-search_exclude: true
-permalink: /shared_interests/jupyter/chatroom/
-menu: nav/shared_interests.html
----
-
-<!-- FOR THE NAV MENU AS IT IS NOT WORKING ON YOUR PAGE -->
-<table>
-    <tr>
-        <td id="sharedinterests">
-            <a href="{{site.baseurl}}/shared_interests/home">
-                <img src="{{site.baseurl}}/images/school_logo.png" alt="logo" width="150" height="150">
-            </a>
-        </td>
-        <td id="Limitless Connections"><a href="{{site.baseurl}}/shared_interests/limitconnect">Limitless Connections</a></td>
-        <td id="DNHS Football"><a href="{{site.baseurl}}/shared_interests/football">DNHS Football</a></td>
-        <td id="School Subjects"><a href="{{site.baseurl}}/shared_interests/jupyter/chatroom">School Subjects</a></td>
-        <td id="Music"><a href="{{site.baseurl}}/music/">Music</a></td>
-        <td id="Satire"><a href="{{site.baseurl}}/shared_interests/satire">Satire</a></td>
-        <td id="PLACEHOLDER6"><a href="{{site.baseurl}}/shared_interests/agk.html">AGK</a></td>
-    </tr>
-</table>
-<!-- END OF NAV MENU -->
-
-{% include jupyter_chatroom.html %}
\ No newline at end of file
diff --git a/navigation/shared_interests/school_subjects_chatroom.md b/navigation/shared_interests/school_subjects_chatroom.md
new file mode 100644
index 000000000..c56152cc8
--- /dev/null
+++ b/navigation/shared_interests/school_subjects_chatroom.md
@@ -0,0 +1,8 @@
+---
+layout: page
+title: Chatroom
+search_exclude: true
+permalink: /shared_interests/jupyter/chatroom/
+---
+
+{% include jupyter_chatroom.html %}
\ No newline at end of file
diff --git a/navigation/shared_interests/school_subjects_home.md b/navigation/shared_interests/school_subjects_home.md
new file mode 100644
index 000000000..ccdc44c5d
--- /dev/null
+++ b/navigation/shared_interests/school_subjects_home.md
@@ -0,0 +1,8 @@
+---
+layout: page
+title: School Subjects Home
+search_exclude: true
+permalink: /shared_interests/jupyter/home/
+---
+
+{% include jupyter_home.html %}
\ No newline at end of file
diff --git a/navigation/shared_interests/resources.md b/navigation/shared_interests/school_subjects_resources.md
similarity index 100%
rename from navigation/shared_interests/resources.md
rename to navigation/shared_interests/school_subjects_resources.md
diff --git a/navigation/shared_interests/timer.md b/navigation/shared_interests/school_subjects_timer.md
similarity index 100%
rename from navigation/shared_interests/timer.md
rename to navigation/shared_interests/school_subjects_timer.md