Merge pull request #107 from GavinCopley/main

Period 1 Brown - School Subjects
nighthawkcoders · Nov 4, 2024 · f105954 · f105954
2 parents bba80c8 + ee8a96f
commit f105954
Show file tree

Hide file tree

Showing 10 changed files with 493 additions and 28 deletions.
diff --git 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>
+
diff --git a/_includes/jupyter_home.html 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
@@ -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>