frontend

2024-09-10 20:21:33 +02:00
parent 1cc67371c5
commit 9b0cb634b5
276 changed files with 16434 additions and 439 deletions
--- a/templates/base.html
+++ b/templates/base.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>{% block title %}Saburly - {{ self.title }}{% endblock %}</title>
+
+    <link
+        rel="stylesheet"
+        href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
+        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
+        crossorigin="anonymous"
+    />
+
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+
+    {% load static %}
+        <link rel="stylesheet" href="{% static './css/style.css' %}">
+        <link rel="shortcut icon" type="image/png" href="{% static './images/favicon32.png' %}">
+    {% block extra_head %}{% endblock %}
+</head>
+
+<body class="font-sans mx-auto">
+    <main class="side-panel panel">
+        {% include 'header.html' %}
+        <div class="content">
+          {% block content %}
+          {% endblock %}
+        </div>
+        {% include 'footer.html' %}
+    </main>
+
+    <script>
+        //side menu
+        document.addEventListener('DOMContentLoaded', function() {
+        const sideToggle = document.querySelector('.side-toggle');
+        const sideMenu = document.querySelector('.side-menu');
+        const sideCloseButtons = document.querySelectorAll('.side-close');
+        
+        sideToggle.addEventListener('click', function() {
+            sideMenu.classList.toggle('active');
+            this.classList.toggle('menu-opened');
+            });
+        
+        sideCloseButtons.forEach(button => {
+            button.addEventListener('click', function() {
+                sideMenu.classList.remove('active');
+                sideToggle.classList.remove('menu-opened');
+                });
+            });
+        })
+        //header
+        var prevScrollPos = window.pageYOffset; 
+ 
+        window.onscroll = function() { 
+        var currentScrollPos = window.pageYOffset; 
+ 
+        if (prevScrollPos < currentScrollPos) { 
+            document.getElementById("header").classList.add("header-hidden"); 
+            document.getElementById("header").classList.remove("header-visible"); 
+        }  
+        else { 
+            document.getElementById("header").classList.add("header-visible"); 
+            document.getElementById("header").classList.remove("header-hidden"); 
+        } 
+ 
+         prevScrollPos = currentScrollPos; 
+        }; 
+    </script>
+        
+</body>
+