footer

WatermelonKatanaDevs · Dec 6, 2024 · d962d75 · d962d75
1 parent 7e9b56e
commit d962d75
Show file tree

Hide file tree

Showing 5 changed files with 383 additions and 4 deletions.
diff --git a/Assets/scripts/footer.js b/Assets/scripts/footer.js
@@ -0,0 +1,28 @@
+const footer = document.createElement('footer');
+
+footer.innerHTML = `
+<footer class="footer">
+    <div class="social-buttons">
+        <a href="https://discord.gg/S8XTzKEz5f" target="_blank" class="social-btn discord-btn">
+            <i class="fab fa-discord"></i> Discord
+        </a>
+        <a href="https://github.com/watermelonkatanadevs" target="_blank" class="social-btn github-btn">
+            <i class="fab fa-github"></i> GitHub
+        </a>
+        <a href="https://www.linkedin.com/company/watermelonkatana/" target="_blank" class="social-btn linkedin-btn">
+            <i class="fab fa-linkedin"></i> LinkedIn
+        </a>
+        <a href="https://twitter.com/WatermelonKatana" target="_blank" class="social-btn twitter-btn">
+            <i class="fab fa-twitter"></i> Twitter
+        </a>
+    </div>
+
+    <div class="footer-info">
+        <p>Email: <a href="mailto:admin@watermelonkatana.com">admin@watermelonkatana.com</a></p>
+        <p>&copy; 2024 WatermelonKatana. All rights reserved.</p>
+        <p>Stay updated with our <a href="/news">latest news</a>!</p>
+    </div>
+</footer>
+`;
+
+document.body.appendChild(footer);
diff --git a/Assets/scripts/sidebar.js b/Assets/scripts/sidebar.js
@@ -0,0 +1,18 @@
+const sidebar = document.getElementById('sidebar');
+const hamburger = document.getElementById('hamburger');
+
+sidebar.innerHTML = `
+    <div class="sidebar-header">
+        <img class="katana_logo" src="/images/watermelonexplode.png" alt="Sidebar Logo">
+    </div>
+    <a href="#" class="active">Home</a>
+    <a href="#" class="inactive">Games</a>
+    <a href="#" class="inactive">Chat</a>
+    <a href="#" class="inactive">Profile</a>
+`;
+
+document.body.appendChild(sidebar);
+
+hamburger.addEventListener('click', () => {
+    sidebar.classList.toggle('open');
+});
diff --git a/Assets/styles/v3.css b/Assets/styles/v3.css
@@ -0,0 +1,301 @@
+/*
+    Frontend Styles
+    Version: Beta 3.0
+    Author: Colack & Frontend Contributors
+*/
+
+@import url('https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed&display=swap');
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
+
+:root {
+    --background-grey: #222222;
+    --background-light-grey: #2d2d2d;
+    --element-green: #c1ff72;
+    --element-red: #f8413c;
+    --sidebar-width: 250px;
+    --transition-duration: 0.3s;
+    --box-padding: 20px;
+    --border-color: #575757;
+    --border-width: 2px;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Barlow Semi Condensed', sans-serif;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    background-color: var(--background-grey);
+}
+
+.main_content {
+    flex-grow: 1;
+    padding: 20px;
+    transition: margin-left var(--transition-duration) ease;
+}
+
+.sidebar {
+    position: fixed;
+    top: 0;
+    left: -250px;
+    width: var(--sidebar-width);
+    height: 100vh;
+    background-color: var(--background-grey);
+    color: white;
+    padding: 20px;
+    box-sizing: border-box;
+    transition: left var(--transition-duration) ease;
+    z-index: 100;
+}
+
+.sidebar.open {
+    left: 0;
+}
+
+.sidebar-header {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+}
+
+.sidebar .katana_logo {
+    width: 100%;
+    max-width: 180px;
+    height: auto;
+}
+
+.sidebar a {
+    color: white;
+    text-decoration: none;
+    display: block;
+    padding: 12px 0;
+    font-size: 18px;
+}
+
+.sidebar a:hover {
+    background-color: #575757;
+    border-radius: 5px;
+}
+
+.sidebar a.active {
+    font-weight: bold;
+    background-color: var(--element-green);
+}
+
+.hamburger-btn {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    font-size: 30px;
+    background-color: transparent;
+    border: none;
+    color: #ffffff6f;
+    cursor: pointer;
+    z-index: 1000;
+}
+
+.hamburger-icon {
+    display: block;
+    width: 35px;
+    height: 5px;
+    background-color: white;
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+.hamburger-icon::before,
+.hamburger-icon::after {
+    content: '';
+    position: absolute;
+    width: 35px;
+    height: 5px;
+    background-color: white;
+    transition: all 0.3s ease;
+}
+
+.hamburger-icon::before {
+    top: -10px;
+}
+
+.hamburger-icon::after {
+    top: 10px;
+}
+
+.katana_logo {
+    width: 250px;
+    height: auto;
+    margin-bottom: 20px;
+}
+
+.katana_intro h2 {
+    font-family: 'Fugaz One', cursive;
+    font-size: 28px;
+    color: var(--element-green);
+    margin-bottom: 20px;
+}
+
+.katana_intro h1 {
+    font-family: 'Fugaz One', cursive;
+    font-size: 40px;
+    color: var(--element-green);
+    margin-bottom: 20px;
+}
+
+.katana_intro strong {
+    color: var(--element-red);
+}
+
+.boxed-text {
+    border: var(--border-width) solid var(--border-color);
+    padding: var(--box-padding);
+    background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
+    border-radius: 8px;
+    width: fit-content;
+    max-width: 39%;  
+    margin-bottom: 20px;
+    color: white;
+}
+
+.boxed-text p strong {
+    color: var(--element-green);
+}
+
+.boxed-text h1 strong {
+    color: var(--element-red);
+}
+
+.boxed-text h1 {
+    font-size: 36px; /* Adjust size for h1 inside boxed text */
+    margin-bottom: 10px;
+}
+
+.boxed-text p {
+    font-size: 18px;
+    line-height: 1.5;
+}
+
+@media (max-width: 768px) {
+    .katana_logo {
+        width: 200px;
+    }
+
+    .main_content {
+        padding: 10px;
+    }
+
+    .katana_intro h2 {
+        font-size: 22px;
+    }
+
+    .sidebar {
+        width: 200px;
+    }
+
+    .hamburger-btn {
+        left: 15px;
+    }
+
+    .boxed-text {
+        width: 100%;
+    }
+}
+
+/* Footer Styling */
+.footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background-color: var(--background-light-grey);
+    display: flex;
+    justify-content: space-between;  /* Align the items to the sides */
+    padding: 15px 30px;
+    z-index: 200;
+    box-sizing: border-box;
+}
+
+/* Social Media Button Container */
+.social-buttons {
+    display: flex;
+    align-items: center;
+}
+
+.social-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--element-green);
+    color: white;
+    text-decoration: none;
+    padding: 12px 20px;
+    margin: 0 10px;
+    border-radius: 5px;
+    font-size: 18px;
+    transition: background-color 0.3s;
+    box-sizing: border-box;
+}
+
+.social-btn i {
+    margin-right: 8px; /* Space between icon and text */
+}
+
+.social-btn:hover {
+    background-color: var(--element-red);
+}
+
+/* Specific color for each social button */
+.discord-btn {
+    background-color: #7289da;
+}
+
+.github-btn {
+    background-color: #333;
+}
+
+.linkedin-btn {
+    background-color: #0077b5;
+}
+
+.discord-btn:hover {
+    background-color: #5d6c8e;
+}
+
+.github-btn:hover {
+    background-color: #444;
+}
+
+.linkedin-btn:hover {
+    background-color: #005582;
+}
+
+.twitter-btn {
+    background-color: #1da1f2;
+}
+
+.twitter-btn:hover {
+    background-color: #0b7bc1;
+}
+
+/* Footer Info Styling (Email and Copyright) */
+.footer-info {
+    color: white;
+    font-size: 14px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;  /* Align to the right */
+    justify-content: center;
+}
+
+.footer-info a {
+    color: var(--element-green);
+    text-decoration: none;
+}
+
+.footer-info a:hover {
+    text-decoration: underline;
+}
+
+.footer-info p {
+    margin: 5px 0;
+}
diff --git a/Pages/home.html b/Pages/home.html
@@ -16,6 +16,7 @@
     <meta property="og:description" content="Post your projects, Interact with other peoples' projects, Chat with your friends & More! We have a large gallery of games and a growing user base, help us out by either posting your browser game here or playing other peoples' games!"/>
     <link rel="stylesheet" type="text/css" href="/styles/style.css">
     <link rel="stylesheet" type="text/css" href="/styles/home.css">
+    <link rel="stylesheet" type="text/css" href="/styles/v3.css">
     <script src="/scripts/HtmlSanitizer.js"></script>
     <script src="/scripts/script.js"></script>
   </head>
@@ -49,11 +50,9 @@ <h2>Latest Projects</h2>
         <h2>Hot Forum Topics</h2>
         <div id="postlist" class="post-list"></div>
       </section>
-      <footer id="footer" class="main-footer">
-        <p>&copy; 2024 WatermelonKatana. All rights reserved.</p>
-      </footer>
     </div>
 
+    <script src="/scripts/footer.js"></script>
     <script>
       const featuredList = document.querySelector('#featuredList');
       const latestList = document.querySelector('#latestList');
@@ -92,7 +91,6 @@ <h2>Hot Forum Topics</h2>
       })();
 
       const header = document.querySelector('#header');
-      const footer = document.querySelector('#footer');
       const user = document.getElementById('username');
       (async () => {
         const data = await getAuth();