added 8 template's

2022-03-04 22:10:05 +06:00
parent 3c5f1a77b7
commit 06099f5d1e
51 changed files with 9038 additions and 305 deletions
--- a/public/componets/skeleton/6_skeleton.html
+++ b/public/componets/skeleton/6_skeleton.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./../../../dist/tailshape.css">
+    <link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
+    <title>Skeleton 6</title>
+</head>
+<body>
+
+
+
+    <button class="dark_mode_button_custom_style" id="dark_mood_toogler">
+        d
+    </button>
+
+    
+
+    <!-- skeleton 6 start -->
+    <section class="section_divider">
+        <div>Skeleton 6 </div>
+    </section>
+
+    <section class="m-10">
+        <div class="w-60 h-24 border-2 rounded-md mx-auto">
+            <div class="flex animate-pulse flex-row items-center h-full justify-center space-x-5">
+                <div class="w-12 bg-gray-300 h-12 rounded-full ">
+                </div>
+                <div class="flex flex-col space-y-3">
+                    <div class="w-36 bg-gray-300 h-6 rounded-md ">
+                    </div>
+                    <div class="w-24 bg-gray-300 h-6 rounded-md ">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+
+    <!-- skeleton 6 end -->
+
+
+<!-- start of script section -->
+<script type="text/javascript">
+    let toogler = document.getElementById("dark_mood_toogler");
+    let doc_html_el = document.getElementsByTagName('html')[0];
+  
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
+        if(e.ctrlKey && e.keyCode =='220'){
+          doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+  
+        }
+    })
+    doc_html_el.addEventListener('keyup',(e)=>{
+        // key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
+        if(e.ctrlKey && e.keyCode =='191'){
+          toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
+  
+        }
+    })
+    toogler.addEventListener('click',()=>{
+      doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
+      console.log(doc_html_el.className);
+    })
+  </script>
+  <!-- end of script section -->
+  
+</body>
+</html>