version v.1.0.1 > Jquery Add + Module Function

postd/static/css/header.css

@@ -40,11 +40,13 @@
         position:fixed;
         top: 0;
         z-index: 7;
-        box-shadow:0 3px 7px var(--shadow);
+        background-color: transparent;
+        box-shadow:0 0 0 0 blue;
     }
 
     @media (max-width:768px) {
         header{
+
             background-color: var(--first-clr) !important;
             box-shadow:0 3px 7px var(--shadow) !important;
         }
@@ -57,6 +59,7 @@
             color: var(--second-clr) !important;
         }
 
+
     }
 
 
@@ -157,9 +160,11 @@
         right: 0.5rem;
         font-size: 2.6rem;
         cursor: pointer;
+        border: 0;
 
     }
-    #bar-icon a{
+    #bar-icon button{
+        border: 0;
         color:var(--trid-clr);
     }
 

postd/static/css/main.css

@@ -28,6 +28,47 @@
 
 }
 
+
+::-webkit-scrollbar {
+    width: 11px;
+}
+
+::-webkit-scrollbar-track {
+
+    box-shadow: inset 0 0 5px grey; 
+    /* border-radius: 10px; */
+}
+
+::-webkit-scrollbar-thumb {
+    background: #A9A9A9; 
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #8d8c8c; 
+}
+
+#menu-bar::-webkit-scrollbar {
+    width: 10px;
+}
+
+#menu-bar::-webkit-scrollbar-track {
+
+    box-shadow: inset 0 0 5px grey; 
+    /* border-radius: 10px; */
+}
+
+#menu-bar::-webkit-scrollbar-thumb {
+    background: #31b411; 
+    border-radius: 10px;
+}
+
+
+#menu-bar::-webkit-scrollbar-thumb:hover {
+    background: #b30000; 
+}
+
+
 /* home */
 
 

postd/static/js/main.js

@@ -1,146 +1,79 @@
-let a,
-b,
-c;
-a= true;
-d=document.getElementById("lost"); 
-c=document.getElementById('lost1');
-
-const header=document.querySelector('header')
-header.style.backgroundColor='transparent'
-header.style.boxShadow='0 0 0 0 blue'
-const headlink = document.querySelectorAll('.header-link')
-
-
-let m
-m=window.innerWidth
-
-
-if (m<768){
-    d.style.display='none'
-    c.style.display='none'
-    header.style.backgroundColor='#f1f1f1'
-    headlink[0].style.color="#000"
-    for(i=1;i<=headlink.length;i++){
-            headlink[i].style.color="rgba(63, 59, 59,0.83)"
-    }
-}
-
-// ekran ölçüləri dəyişdikdə dispeyin flex olma hali 
-
-function will(){
-    let f
-
-    f=window.innerWidth
-
-    if (f>768){
-        d.style.display='flex'
-        c.style.display='flex'
-
-
-
-    }else{
-        d.style.display='none'
-        c.style.display='none'
-
-    }
 
+let MyHeader = (function(){
+    let HeaderFunction = function(){
+        const lostjq = $("#lost")
+        const lost1jq = $("#lost1")
+        const headlink = document.querySelectorAll('.header-link')
+
+        $(window).resize(function () { 
+            let window_size=window.innerWidth
+            if (window_size>768){
+                lostjq.css({display:'flex'})
+                lost1jq.css({display:'flex'})
+            }else{
+                lostjq.css({display:'none'})
+                lost1jq.css({display:'none'})
+            }
+        });
+        $('#bar-icon').click(function(){
+            lostjq.slideToggle(400,function(){
+                lost1jq.slideToggle(400);
+            });
+        })
+        const headerjq = $("header")
+        let window_size=window.innerWidth
+        if (window_size<768){
+            lostjq.css({display:'none'})
+            lost1jq.css({display:'none'})
+            headerjq.css({
+                backgroundColor:'#f1f1f1',
+                boxShadow:'0 0 15px 0 rgba(78, 78, 78, 0.342)'
+            })
+            $(headlink[0]).css({color:'#000'})
+            for(i=1;i<=headlink.length;i++){
+                $(headlink[i]).css({color:"rgba(63, 59, 59,0.83)"})
+            }
+        }
 
-
-
-}
-
-
-
-function iconclick(){
+        window.addEventListener('scroll',()=>{
+            if (document.documentElement.scrollTop<=50){
+                headerjq.css({
+                    backgroundColor:'transparent',
+                    boxShadow:'0 0 0 0 blue'
+                })
+                for(i=0;i<=headlink.length;i++){
+                    $(headlink[i]).css({
+                        color:'#fff'
+                    });
+                }
+            }else{
+                headerjq.css({
+                    backgroundColor:'#f1f1f1',
+                    boxShadow:'0 0 15px 0 rgba(78, 78, 78, 0.342)'
+                })
+                $(headlink[0]).css({color:'#000'})
+                for(i=1;i<=headlink.length;i++){
+                    $(headlink[i]).css({
+                        color:'#3f3b3b'
+                    });
+                }
+            }
+        })
 
-    if (a===true){
-
-        a=false;
-        d.style.display='flex'
-        c.style.display='flex'
-
-    }else{
-        a=true;
-        d.style.display='none'
-        c.style.display='none'
-
-
-    }
-}
-
-
-
-// header --> stiky navbar 
-
-window.addEventListener('scroll',()=>{
-    if (document.documentElement.scrollTop<=50){
-        header.style.backgroundColor='transparent'
-        header.style.boxShadow='0 0 0 0 blue'
-
-        for(i=0;i<=headlink.length;i++){
-            headlink[i].style.color='#fff'
-        }
-    }else{
-
-        header.style.backgroundColor='#f1f1f1'
-        headlink[0].style.color='#000'
-        header.style.boxShadow='0 0 15px 0 rgba(78, 78, 78, 0.342)'
-        for(i=1;i<=headlink.length;i++){
-            headlink[i].style.color='#3f3b3b'
-
-        }
-
     }
-})
-
 
-// Show More --> btn
+    return { header : HeaderFunction}
 
+})()
 
-// Deskop Show More --> btn
-
-let showBoxDeskop = document.getElementById('showbox');
-let btnShowDeskop = document.getElementById('btnDeskop')
-
-function showMore(){
-    if (a===true){
-        a=false;
-        showBoxDeskop.style.display='flex';
-        btnShowDeskop.innerHTML='...Show Less';
-
-
-    }else{
-        a=true;
-        showBoxDeskop.style.display='none';
-        btnShowDeskop.innerHTML='Show More...';
-    }
-
-
-}
-
-
-
-
-// Tablet Show More --> btn
-
-let BoxTablet = document.getElementById('showBoxTablet')
-let btnTablet = document.getElementById('btnTablet')
-
-function MoreTablet(){
-    if(a==true){
-        a=false;
-        BoxTablet.style.display='flex'
-        btnTablet.innerHTML='...Show Less'
-    }else{
-        a=true;
-        BoxTablet.style.display='none';
-        btnTablet.innerHTML='Show More...'
-    }
-
-}
 
 
 
+MyHeader.header()
 
 
+$(document).ready(function () {
+    var jazzMusic = document.getElementById("music");
+    jazzMusic.play();
+});
 

postd/static/js/myproject.js

@@ -0,0 +1,48 @@
+// Show More --> btn
+
+// Show More --> btn
+let MyProject = (function(){
+
+    let MainFunction=function(){
+
+        // Deskop Show More --> btn
+        let isbtnClickDeskop = true
+        let btnDeskop=$("#btnDeskop")
+        btnDeskop.click(function () { 
+            $('#showbox').slideToggle(500,function(){
+                if (isbtnClickDeskop===true){
+                    isbtnClickDeskop=false;
+                    btnDeskop.html('...Show Less');
+                }else{
+                    isbtnClickDeskop=true;
+                    btnDeskop.html('Show More...');
+                }
+            });
+
+        });
+
+        // Tablet Show More --> btn
+        let btnTablets = $('#btnTablet')
+        let isbtnClickTablet = true
+        btnTablets.click(function () { 
+            $('#showBoxTablet').slideToggle(500,function(){
+                if(isbtnClickTablet==true){
+                    isbtnClickTablet=false;
+                    btnTablets.html('...Show Less')
+                }else{
+                    isbtnClickTablet=true;
+                    btnTablets.html('Show More...')
+                }
+            });
+        });
+
+    }
+
+    return{
+        MainFunction
+    }
+
+})()
+
+
+MyProject.MainFunction()

postd/templates/base.html

@@ -38,7 +38,7 @@
 
 
 </head>
-<body onresize="will()" >
+<body id="body" >
 
 
 
@@ -51,11 +51,11 @@
 
 
     {% include "include/footer.html" %}
-
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
 
     <script src="{{url_for('static', filename='js/main.js')}}"></script>
+    <script src="{{url_for('static', filename='js/myproject.js')}}"></script>
 </body>
 </html

postd/templates/include/header.html

@@ -8,16 +8,16 @@
                     <h4 class=" header-link">Dr.MadWill</h4>
                 </a>
                 <div id="bar-icon" >
-                    <a onclick="iconclick()" >
+                    <button >
                         <i class="fas fa-bars"></i>
-                    </a>
+                    </button>
                 </div>
             </div>
 
 
             <ul id="lost" class="pr-row">
                 <li>
-                    <a href="{{ url_for('main')}}#home" onmouseover="max()" class="pr-link pr-row header-link">Home</a>
+                    <a href="{{ url_for('main')}}#home"  class="pr-link pr-row header-link">Home</a>
                 </li>
 
                 <li>
@@ -34,6 +34,8 @@ <h4 class=" header-link">Dr.MadWill</h4>
             </ul>
 
         </div>
+
+
 
         <ul id="lost1"  class="pr-row pr-share">