From d53033510767ac712b4489c6e791ebd2a70c7d1c Mon Sep 17 00:00:00 2001
From: aadibhat09 <aadibhat09@gmail.com>
Date: Thu, 31 Oct 2024 11:32:26 -0700
Subject: [PATCH 1/2] instabox

---
 _includes/nav/rate_and_relate.html            |   8 +-
 .../rate_and_relate/instabox/instabox.md      | 163 ++++++++++++++++++
 2 files changed, 167 insertions(+), 4 deletions(-)
 create mode 100644 navigation/rate_and_relate/instabox/instabox.md

diff --git a/_includes/nav/rate_and_relate.html b/_includes/nav/rate_and_relate.html
index 7fcfd754..daf1f0ce 100644
--- a/_includes/nav/rate_and_relate.html
+++ b/_includes/nav/rate_and_relate.html
@@ -5,9 +5,9 @@
                 <img src="{{site.baseurl}}/images/rate_and_relate/rate_and_relate.png" width="50%" alt="Icon">
             </a>
         </td>
-        <td id="instabox"><a href="{{site.baseurl}}/rate_and_relate/instabox">Instabox</a></td>
-        <td id="flavor_fusion"><a href="{{site.baseurl}}/rate_and_relate/flavor_fusion">Flavor Fusion</a></td>
-        <td id="book_review"><a href="{{site.baseurl}}/rate_and_relate/book_review">Book Reviews</a></td>
-        <td id="update_the_nest"><a href="{{site.baseurl}}/rateandrelate/update_the_nest">Update The Nest</a></td>
+        <td id="Instabox"><a href="{{site.baseurl}}/rate_and_relate/instabox">Instabox</a></td>
+        <td id="FlavorFusion"><a href="{{site.baseurl}}/rate_and_relate/flavor_fusion">Flavor Fusion</a></td>
+        <td id="BookReview"><a href="{{site.baseurl}}/rate_and_relate/book_review">Book Reviews</a></td>
+        <td id="UpdateTheNest"><a href="{{site.baseurl}}/rateandrelate/update_the_nest">Update The Nest</a></td>
     </tr>
 </table>
\ No newline at end of file
diff --git a/navigation/rate_and_relate/instabox/instabox.md b/navigation/rate_and_relate/instabox/instabox.md
new file mode 100644
index 00000000..8a308d49
--- /dev/null
+++ b/navigation/rate_and_relate/instabox/instabox.md
@@ -0,0 +1,163 @@
+---
+layout: post 
+title: Instabox
+search_exclude: true
+permalink: rate_and_relate/instabox
+menu: nav/rate_and_relate.html
+---
+
+<title>Instabox</title>
+<style>
+    body {
+        font-family: Arial, sans-serif;
+        background-color: #333;
+        color: white;
+        margin: 0;
+        padding: 0;
+    }
+    hr {
+        border-color: #333;
+    }
+    /* Navbar styling */
+    .navbar {
+        padding: 10px;
+        display: flex;
+        align-items: center;
+    }
+    .navbar a {
+        color: white;
+        text-decoration: none;
+        padding: 10px 20px;
+        font-size: 18px;
+    }
+    .navbar a:hover {
+        background-color: #6a59a3;
+        border-radius: 5px;
+    }
+    .container {
+        display: flex;
+        justify-content: space-between;
+        padding: 20px;
+        height: calc(100vh - 60px); /* Full height minus navbar */
+    }
+    /* Added margin for each box */
+    .leaderboard-box,
+    .instabox-box {
+        margin: 10px;
+    }
+    .leaderboard-box {
+        background-color: #444;
+        border-radius: 10px;
+        padding: 10px;
+        height: 100%;
+        /* width: 15%; */
+        overflow-y: scroll;
+        box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
+    }
+    .instabox-box {
+        background-color: #555;
+        border-radius: 10px;
+        padding: 20px;
+        width: 65%;
+        display: flex;
+        flex-direction: column;
+        box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
+    }
+    /* Instabox chatbox */
+    .instabox {
+        flex-grow: 1;
+        overflow-y: auto;
+        padding: 20px;
+        background-color: #666;
+        border-radius: 5px;
+    }
+    .instabox p {
+        margin: 10px 0;
+    }
+    .instabox textarea {
+        width: 100%;
+        height: 60px;
+        padding: 10px;
+        border-radius: 5px;
+        border: none;
+        font-size: 16px;
+    }
+    .leaderboard-box h2 {
+        text-align: center;
+        margin-bottom: 10px;
+    }
+    .leaderboard ul li {
+        padding: 10px;
+        border-bottom: 1px solid #777;
+    }
+    .leaderboard ul {
+        list-style: none;
+        padding: 0;
+    }
+    /* Responsive design */
+    @media (max-width: 768px) {
+        .container {
+            flex-direction: column;
+            align-items: center;
+        }
+        .leaderboard-box {
+            width: 100%;
+            height: auto;
+            margin-bottom: 20px;
+        }
+        .instabox-box {
+            width: 100%;
+        }
+    }
+</style>
+<body>
+    <hr>
+    <!-- Navbar -->
+    <div class="navbar">
+        <a href="#">Home</a>
+        <a href="profile.html">Profile</a>
+        <a href="settings.html">Settings</a>
+    </div>
+    <div class="container">
+        <!-- Instabox chatbox -->
+        <div class="instabox-box">
+            <h2>Instabox 💬</h2>
+            <div class="instabox" id="instabox">
+                <p><strong>Shish Kabob:</strong> Hey bro! What’s good [1 hr ago]</p>
+                <p><strong>Me:</strong> Nothing much, just studying for AP Chemistry.</p>
+                <p>You responded one hour and 23 minutes after the notification, with a bonus of -60 points, for a total of 63 points!</p>
+            </div>
+            <textarea id="chatInput" placeholder="Type your message..."></textarea>
+        </div>
+        <!-- Leaderboard box -->
+        <div class="leaderboard-box">
+            <h2>Leaderboard 🏆</h2>
+            <div class="leaderboard">
+                <ul>
+                    <li>🥇 Rama Kama Jamabama - 63</li>
+                    <li>🥈 Jenneth Jabberson - 159</li>
+                    <li>🥉 Googly Moogly - 203</li>
+                    <li>🔺 Shannon Cannonball - 443</li>
+                    <li>🔺 Shish Kabob - 652</li>
+                    <li>🔺 Frenk Bonobo - 654</li>
+                    <li>🔺 Galvin Ized-Steel - 730</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Handle chat input submission
+        const instabox = document.getElementById("instabox");
+        const chatInput = document.getElementById("chatInput");
+        chatInput.addEventListener("keypress", function (e) {
+            if (e.key === "Enter") {
+                e.preventDefault();
+                const newMessage = document.createElement("p");
+                newMessage.innerHTML = `<strong>Me:</strong> ${chatInput.value}`;
+                instabox.appendChild(newMessage);
+                chatInput.value = "";
+                instabox.scrollTop = instabox.scrollHeight; // Scroll to the latest message
+            }
+        });
+    </script>
+</body>
\ No newline at end of file

From bf80f21ba93bbcb62c9ee9c11ab3cdaa54f7f8c9 Mon Sep 17 00:00:00 2001
From: aadibhat09 <aadibhat09@gmail.com>
Date: Thu, 31 Oct 2024 14:40:58 -0700
Subject: [PATCH 2/2] Instabox frontend

---
 .../rate_and_relate/instabox/instabox.md      |   7 +-
 .../rate_and_relate/instabox/profile.md       | 127 +++++++++++++
 .../rate_and_relate/instabox/settings.md      | 173 ++++++++++++++++++
 3 files changed, 303 insertions(+), 4 deletions(-)
 create mode 100644 navigation/rate_and_relate/instabox/profile.md
 create mode 100644 navigation/rate_and_relate/instabox/settings.md

diff --git a/navigation/rate_and_relate/instabox/instabox.md b/navigation/rate_and_relate/instabox/instabox.md
index 8a308d49..e007154c 100644
--- a/navigation/rate_and_relate/instabox/instabox.md
+++ b/navigation/rate_and_relate/instabox/instabox.md
@@ -6,7 +6,6 @@ permalink: rate_and_relate/instabox
 menu: nav/rate_and_relate.html
 ---
 
-<title>Instabox</title>
 <style>
     body {
         font-family: Arial, sans-serif;
@@ -114,9 +113,9 @@ menu: nav/rate_and_relate.html
     <hr>
     <!-- Navbar -->
     <div class="navbar">
-        <a href="#">Home</a>
-        <a href="profile.html">Profile</a>
-        <a href="settings.html">Settings</a>
+        <a href="">Home</a>
+        <a href="profile">Profile</a>
+        <a href="settings">Settings</a>
     </div>
     <div class="container">
         <!-- Instabox chatbox -->
diff --git a/navigation/rate_and_relate/instabox/profile.md b/navigation/rate_and_relate/instabox/profile.md
new file mode 100644
index 00000000..107c0632
--- /dev/null
+++ b/navigation/rate_and_relate/instabox/profile.md
@@ -0,0 +1,127 @@
+---
+layout: post 
+title: Profile
+search_exclude: true
+permalink: rate_and_relate/instabox/profile
+menu: nav/rate_and_relate.html
+---
+
+<style>
+    body {
+        font-family: Arial, sans-serif;
+        background-color: #333;
+        color: white;
+        margin: 0;
+        padding: 0;
+    }
+    hr {
+        border-color: #333;
+    }
+    /* Navbar styling */
+    .navbar {
+        padding: 10px;
+        display: flex;
+        align-items: center;
+    }
+    .navbar a {
+        color: white;
+        text-decoration: none;
+        padding: 10px 20px;
+        font-size: 18px;
+    }
+    .navbar a:hover {
+        background-color: #6a59a3;
+        border-radius: 5px;
+    }
+    /* Profile container */
+    .container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 20px;
+        margin-top: 20px;
+    }
+    /* Profile card */
+    .profile-card {
+        background-color: #444;
+        border-radius: 10px;
+        padding: 20px;
+        width: 80%;
+        max-width: 600px;
+        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+        text-align: center;
+        margin-bottom: 20px;
+    }
+    .profile-card img {
+        width: 120px;
+        height: 120px;
+        border-radius: 50%;
+        margin-bottom: 15px;
+    }
+    .profile-card h2 {
+        margin: 10px 0;
+        color: #6a59a3;
+    }
+    .profile-card p {
+        margin: 5px 0;
+    }
+    /* Profile stats */
+    .stats-card {
+        background-color: #555;
+        border-radius: 10px;
+        padding: 20px;
+        width: 80%;
+        max-width: 600px;
+        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+        text-align: left;
+    }
+    .stats-card h3 {
+        color: #6a59a3;
+    }
+    .stats-list {
+        list-style-type: none;
+        padding: 0;
+    }
+    .stats-list li {
+        margin: 10px 0;
+        padding: 10px;
+        border-bottom: 1px solid #777;
+    }
+    /* Responsive adjustments */
+    @media (max-width: 768px) {
+        .profile-card,
+        .stats-card {
+            width: 95%;
+        }
+    }
+</style>
+<body>
+    <hr>
+    <!-- Navbar -->
+    <div class="navbar">
+        <a href=".">Home</a>
+        <a href="">Profile</a>
+        <a href="settings">Settings</a>
+    </div>
+    <div class="container">
+        <!-- Profile card -->
+        <div class="profile-card">
+            <img src="profile-picture.jpg" alt="Profile Picture">
+            <h2>Username</h2>
+            <p>📍 Location: Hometown</p>
+            <p>🌟 Status: "Always pushing the limits!"</p>
+        </div>
+        <!-- Stats card -->
+        <div class="stats-card">
+            <h3>Your Stats</h3>
+            <ul class="stats-list">
+                <li><strong>Current Score:</strong> 63</li>
+                <li><strong>Weekly Average:</strong> 104</li>
+                <li><strong>Monthly Average:</strong> 251</li>
+                <li><strong>Leaderboard Appearances:</strong> 13</li>
+                <li><strong>Podium Finishes:</strong> 2</li>
+                <li><strong>Friends:</strong> 24</li>
+            </ul>
+        </div>
+    </div>
+</body>
\ No newline at end of file
diff --git a/navigation/rate_and_relate/instabox/settings.md b/navigation/rate_and_relate/instabox/settings.md
new file mode 100644
index 00000000..c495e3c1
--- /dev/null
+++ b/navigation/rate_and_relate/instabox/settings.md
@@ -0,0 +1,173 @@
+---
+layout: post 
+title: Settings
+search_exclude: true
+permalink: rate_and_relate/instabox/settings
+menu: nav/rate_and_relate.html
+---
+
+<style>
+    body {
+        font-family: Arial, sans-serif;
+        background-color: #333;
+        color: white;
+        margin: 0;
+        padding: 0;
+    }
+    hr {
+        border-color: #333;
+    }
+    /* Navbar styling */
+    .navbar {
+        padding: 10px;
+        display: flex;
+        align-items: center;
+    }
+    .navbar a {
+        color: white;
+        text-decoration: none;
+        padding: 10px 20px;
+        font-size: 18px;
+    }
+    .navbar a:hover {
+        background-color: #6a59a3;
+        border-radius: 5px;
+    }
+    /* Container */
+    .container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 20px;
+        margin-top: 20px;
+    }
+    /* Settings form */
+    .settings-card {
+        background-color: #444;
+        border-radius: 10px;
+        padding: 20px;
+        width: 80%;
+        max-width: 600px;
+        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+        margin-bottom: 20px;
+    }
+    .settings-card h2 {
+        text-align: center;
+        color: #6a59a3;
+        margin-bottom: 20px;
+    }
+    .settings-card label {
+        display: block;
+        margin: 10px 0 5px;
+        color: #bbb;
+    }
+    .settings-card input[type="text"],
+    .settings-card input[type="password"] {
+        width: 100%;
+        padding: 10px;
+        border-radius: 5px;
+        border: none;
+        font-size: 16px;
+        margin-bottom: 15px;
+    }
+    /* Divider styling */
+    .divider {
+        border-top: 1px solid #777;
+        margin: 20px 0;
+    }
+    /* Password fields in row */
+    .password-fields {
+        display: flex;
+        gap: 10px;
+    }
+    .password-fields input {
+        width: 100%;
+        margin-bottom: 0;
+    }
+    /* Button styling */
+    .settings-card button {
+        width: 100%;
+        padding: 10px;
+        border-radius: 5px;
+        border: none;
+        font-size: 16px;
+        color: white;
+        cursor: pointer;
+        margin-top: 15px;
+    }
+    .save-btn {
+        background-color: #6a59a3;
+    }
+    .save-btn:hover {
+        background-color: #5a4a8a;
+    }
+    .logout-btn {
+        background-color: #aa4b4b;
+    }
+    .logout-btn:hover {
+        background-color: #993c3c;
+    }
+    /* Responsive adjustments */
+    @media (max-width: 768px) {
+        .settings-card {
+            width: 95%;
+        }
+        .password-fields {
+            flex-direction: column;
+            gap: 0;
+        }
+    }
+</style>
+<body>
+    <hr>
+    <!-- Navbar -->
+    <div class="navbar">
+        <a href=".">Home</a>
+        <a href="profile">Profile</a>
+        <a href="">Settings</a>
+    </div>
+    <div class="container">
+        <!-- Settings card -->
+        <div class="settings-card">
+            <h2>Account Settings</h2>
+            <!-- Username change -->
+            <label for="username">Change Username:</label>
+            <input type="text" id="username" placeholder="Enter new username">
+            <!-- Divider line -->
+            <div class="divider"></div>
+            <!-- Password change section -->
+            <label for="current-password">Current Password:</label>
+            <input type="password" id="current-password" placeholder="Enter current password">
+            <label for="new-password">New Password:</label>
+            <div class="password-fields">
+                <input type="password" id="new-password" placeholder="New password">
+                <input type="password" id="confirm-password" placeholder="Confirm new password">
+            </div>
+            <!-- Save Changes button -->
+            <button class="save-btn" onclick="validatePasswords()">Save Changes</button>
+            <!-- Log Out button -->
+            <button class="logout-btn">Log Out</button>
+        </div>
+    </div>
+    <script>
+        function validatePasswords() {
+            const newPassword = document.getElementById("new-password").value;
+            const confirmPassword = document.getElementById("confirm-password").value;
+            const currentPassword = document.getElementById("current-password").value;
+            if (currentPassword === "") {
+                alert("Please enter your current password.");
+                return;
+            }
+            if (newPassword === "") {
+                alert("Please enter a new password.");
+                return;
+            }
+            if (newPassword !== confirmPassword) {
+                alert("New passwords do not match.");
+            } else {
+                alert("Password changed successfully!");
+                // Here, you would handle the form submission to update the user's password
+            }
+        }
+    </script>
+</body>
\ No newline at end of file