Skip to content

Commit

Permalink
Merge pull request #63 from aadibhat09/main
Browse files Browse the repository at this point in the history 
Instabox Frontend
  • Loading branch information
@aadibhat09
aadibhat09 authored Oct 31, 2024
2 parents 7d000ed + cecd3e0 commit 8ce39ab
Show file tree
Hide file tree
Showing 4 changed files with 466 additions and 4 deletions.
8 changes: 4 additions & 4 deletions _includes/nav/rate_and_relate.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
162 changes: 162 additions & 0 deletions navigation/rate_and_relate/instabox/instabox.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
---
layout: post
title: Instabox
search_exclude: true
permalink: rate_and_relate/instabox
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 {
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">Profile</a>
<a href="settings">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>
127 changes: 127 additions & 0 deletions navigation/rate_and_relate/instabox/profile.md
View file
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit 8ce39ab

Please sign in to comment.