Mirrors/tailShape
1
0
Fork 0
mirror of https://github.com/istiyakaminsanto/tailShape.git synced 2025-12-17 19:27:01 +00:00
Code Issues Projects Releases Wiki Activity

added 8 template's

Browse Source
This commit is contained in:
merajjahir
2022-03-04 22:10:05 +06:00
parent 3c5f1a77b7
commit 06099f5d1e
51 changed files with 9038 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

944
dist/tailshape.css vendored
View File

File diff suppressed because it is too large Load Diff

48
public/componets/layout/1_layout.html Normal file
View File

@@ -0,0 +1,48 @@
<!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>layout </title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- 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>

48
public/componets/layout/dashboard_layout.html Normal file
View File

@@ -0,0 +1,48 @@
<!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>Dashboard Layout </title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- 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>

101
public/componets/layout/layout.html Normal file
View File

@@ -0,0 +1,101 @@
<!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>layout </title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- layout 1 start -->
<section class="section_divider">
<div>Layout 1</div>
</section>
<!-- layout -->
<div class="min-h-screen flex flex-col">
<header class="bg-red-50 mx-auto text-xl font-extrabold">Header</header>
<div class="flex-1 flex flex-col sm:flex-row">
<main class="flex-1 bg-indigo-100 flex items-center justify-center text-xl font-extrabold">Content here</main>
<nav class="order-first sm:w-32 bg-purple-200 flex items-center justify-center text-xl font-extrabold">Sidebar</nav>
<aside class="sm:w-32 bg-yellow-100 text-xl font-extrabold flex items-center justify-center">Right Sidebar</aside>
</div>
<footer class="bg-gray-100 mx-auto text-xl font-extrabold ">Footer</footer>
</div>
<!-- layout -->
<!-- layout 1 end -->
<!-- layout 2 start -->
<section class="section_divider">
<div>Layout 2 independent scroll </div>
</section>
<!--
1. Apply h-screen at flex flex-col layout
2. Apply overflow-y-hidden at main container
3. Apply overflow-y-auto to column that needs scroll
-->
<div class="min-h-screen flex flex-col h-screen">
<header class="bg-red-50">Header</header>
<!-- main container -->
<div class="flex-1 flex flex-row overflow-y-hidden">
<main class="flex-1 bg-indigo-100 overflow-y-auto">Content here</main>
<nav class="order-first sm:w-32 bg-purple-200 overflow-y-auto">Sidebar</nav>
<aside class="sm:w-32 bg-yellow-100 overflow-y-auto">Right Sidebar</aside>
</div>
<!-- end main container -->
<footer class="bg-gray-100">Footer</footer>
</div>
<!-- layout 2 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>

26
public/componets/navs_headers/1_header.html
View File

@@ -4,8 +4,10 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script> -->
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<link rel="stylesheet" href="./../../../dist/tailshape.css">
<title>footer 1</title>
<title>Header 1</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
@@ -17,27 +19,29 @@
<section class="section_divider" id="header_1">
<div>Header 1</div>
</section>
<section class="h-screen">
<nav class="px-2 bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700">
<div class="container flex flex-wrap justify-between items-center mx-auto">
<div x-data="{ open: false , mobile_Open :true }" class="container flex flex-wrap justify-between items-center mx-auto">
<a href="#" class="flex">
<svg class="mr-3 h-10" width="51" height="70" viewBox="0 0 51 70" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M1 53H27.9022C40.6587 53 51 42.7025 51 30H24.0978C11.3412 30 1 40.2975 1 53Z" fill="#76A9FA"></path><path d="M-0.876544 32.1644L-0.876544 66.411C11.9849 66.411 22.4111 55.9847 22.4111 43.1233L22.4111 8.87674C10.1196 8.98051 0.518714 19.5571 -0.876544 32.1644Z" fill="#A4CAFE"></path><path d="M50 5H23.0978C10.3413 5 0 15.2975 0 28H26.9022C39.6588 28 50 17.7025 50 5Z" fill="#1C64F2"></path></g><defs><clipPath id="clip0"><rect width="51" height="70" fill="white"></rect></clipPath></defs></svg>
<span class="self-center text-lg font-semibold text-gray-900 whitespace-nowrap dark:text-white">FlowBite</span>
</a>
<button data-collapse-toggle="mobile-menu" type="button" class="inline-flex justify-center items-center ml-3 text-gray-400 rounded-lg md:hidden hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-500" aria-controls="mobile-menu-2" aria-expanded="false">
<button data-collapse-toggle="mobile-menu" @click="mobile_Open = ! mobile_Open" type="button" class="inline-flex justify-center items-center ml-3 text-gray-400 rounded-lg md:hidden hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-500" aria-controls="mobile-menu-2" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
<div class="hidden w-full md:block md:w-auto" id="mobile-menu">
<div :class="mobile_Open ? 'block' : 'hidden'" class=" w-full md:block md:w-auto" id="mobile-menu">
<ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
<li>
<a href="#" class="block py-2 pr-4 pl-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-white dark:bg-blue-600 md:dark:bg-transparent" aria-current="page">Home</a>
</li>
<li>
<button id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" class="flex justify-between items-center py-2 pr-4 pl-3 w-full font-medium text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-gray-400 dark:hover:text-white dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Dropdown <svg class="ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button>
<!-- this is the dropdown button -->
<button id="dropdownNavbarLink" @click="open = ! open" data-dropdown-toggle="dropdownNavbar" class="flex justify-between items-center py-2 pr-4 pl-3 w-full font-medium text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-gray-400 dark:hover:text-white dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Dropdown <svg class="ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button>
<div id="dropdownNavbar" class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600">
<div id="dropdownNavbar" x-show="open" class=" absolute z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600">
<ul class="py-1" aria-labelledby="dropdownLargeButton">
<li>
<a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white">Dashboard</a>
@@ -65,18 +69,26 @@
</li>
</ul>
</div>
</div>
</nav>
</section>
<!-- header 1 end -->
<!-- start of script section -->
<script type="text/javascript">
let toogler = document.getElementById("dark_mood_toogler");
let doc_html_el = document.getElementsByTagName('html')[0];
console.log(mobile_Open);
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'){

2
public/componets/navs_headers/2_header.html
View File

@@ -5,7 +5,7 @@
<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">
<title>footer 2</title>
<title>Header 2</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">

205
public/componets/others/10_other.html Normal file
View File

@@ -0,0 +1,205 @@
<!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>Other 10 (notification 4) </title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- other 10 start -->
<section class="section_divider">
<div>Other 10 (notification 4)</div>
</section>
<!-- notification 4 -->
<!-- notificatoin box 1 -->
<div class="shadow-lg rounded-lg bg-white mx-auto m-8 p-4 w-80 ">
<div class="text-sm pb-2">
Notification Title
<span class="float-right">
<svg
class="fill-current text-gray-600"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="22"
height="22"
>
<path
class="heroicon-ui"
d="M16.24 14.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 0 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12l2.83 2.83z"
/>
</svg>
</span>
</div>
<div class="text-sm text-gray-600 tracking-tight ">
I will never close automatically. This is a purposely very very long
description that has many many characters and words.
</div>
</div>
<!-- notificatoin box 2 -->
<div class="shadow-lg rounded-lg bg-white mx-auto m-8 p-4 w-80 flex">
<div class="pr-2">
<svg
class="fill-current text-green-600"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="22"
height="22"
>
<path
class="heroicon-ui"
d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-3.54-4.46a1 1 0 0 1 1.42-1.42 3 3 0 0 0 4.24 0 1 1 0 0 1 1.42 1.42 5 5 0 0 1-7.08 0zM9 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm6 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
/>
</svg>
</div>
<div>
<div class="text-sm pb-2">
Notification Title
<span class="float-right">
<svg
class="fill-current text-gray-600"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="22"
height="22"
>
<path
class="heroicon-ui"
d="M16.24 14.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 0 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12l2.83 2.83z"
/>
</svg>
</span>
</div>
<div class="text-sm text-gray-600 tracking-tight ">
I will never close automatically. This is a purposely very very long
description that has many many characters and words.
</div>
</div>
</div>
<!-- notificatoin box 3 -->
<div class="shadow-lg rounded-lg bg-white mx-auto m-8 p-4 w-80 flex">
<div class="pr-2">
<svg
class="fill-current text-red-600"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
>
<path
class="heroicon-ui"
d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-3.54-4.54a5 5 0 0 1 7.08 0 1 1 0 0 1-1.42 1.42 3 3 0 0 0-4.24 0 1 1 0 0 1-1.42-1.42zM9 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm6 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
/>
</svg>
</div>
<div>
<div class="text-sm pb-2">
Notification Title
<span class="float-right">
<svg
class="fill-current text-gray-600"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="22"
height="22"
>
<path
class="heroicon-ui"
d="M16.24 14.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 0 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12l2.83 2.83z"
/>
</svg>
</span>
</div>
<div class="text-sm text-gray-600 tracking-tight ">
I will never close automatically. This is a purposely very very long
description that has many many characters and words.
</div>
</div>
</div>
<!-- notificatoin box 4 -->
<div class="shadow-lg rounded-lg bg-white mx-auto m-8 p-4 w-80 flex">
<div class="pr-2">
<svg
class="fill-current text-orange-600"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
>
<path
class="heroicon-ui"
d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm0 9a1 1 0 0 1-1-1V8a1 1 0 0 1 2 0v4a1 1 0 0 1-1 1zm0 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
/>
</svg>
</div>
<div>
<div class="text-sm pb-2">
Notification Title
<span class="float-right">
<svg
class="fill-current text-gray-600"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="22"
height="22"
>
<path
class="heroicon-ui"
d="M16.24 14.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 0 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12l2.83 2.83z"
/>
</svg>
</span>
</div>
<div class="text-sm text-gray-600 tracking-tight ">
I will never close automatically. This is a purposely very very long
description that has many many characters and words.
</div>
</div>
</div>
<!-- notification 4 -->
<!-- other 10 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>

97
public/componets/others/11_other.html Normal file
View File

@@ -0,0 +1,97 @@
<!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>Other 11 </title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- other 11 start -->
<section class="section_divider">
<div>Other 11 (notification 5) </div>
</section>
<!-- notification 5 -->
<div class="flex items-center justify-center my-10 bg-gray-100 ">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl border p-8 w-3xl">
<div class="mb-4">
<h1 class="font-semibold text-gray-800 dark:text-emerald-200">Friend Requests</h1>
</div>
<div class="flex justify-center items-center mb-8">
<div class="w-1/5">
<img class="w-12 h-12 rounded-full border border-gray-100 shadow-sm" src="https://randomuser.me/api/portraits/men/20.jpg" alt="user image" />
</div>
<div class="w-4/5">
<div>
<span class="font-semibold text-gray-800 dark:text-emerald-400">Ezio Dani</span>
<span class="text-gray-400">wants to be your friend</span>
</div>
<div class="font-semibold">
<a href="" class="text-blue-600 mr-2">Accept</a>
<a href="" class="text-gray-400">Decline</a>
</div>
</div>
</div>
<div class="flex justify-center items-center">
<div class="w-1/5">
<img class="w-12 h-12 rounded-full border border-gray-100 shadow-sm" src="https://randomuser.me/api/portraits/women/20.jpg" alt="user image" />
</div>
<div class="w-4/5">
<div>
<span class="font-semibold text-gray-800 dark:text-emerald-400">Bianca Chen</span>
<span class="text-gray-400">wants to be your friend</span>
</div>
<div class="font-semibold">
<a href="" class="text-blue-600 mr-2">Accept</a>
<a href="" class="text-gray-400">Decline</a>
</div>
</div>
</div>
</div>
</div>
<!-- notification 5 -->
<!-- other 11 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>

68
public/componets/others/12_other.html Normal file
View File

@@ -0,0 +1,68 @@
<!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>Other 12</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- other 12 start -->
<section class="section_divider">
<div>Other 12 (ribbon at corner 1)</div>
</section>
<!-- ribbon 1 -->
<div class="relative overflow-hidden mx-auto my-10 w-56 h-56 bg-white border-2 dark:border-emerald-400 border-black">
<div class="absolute left-0 top-0 h-16 w-16">
<div
class="absolute transform -rotate-45 bg-gray-600 text-center text-white font-semibold py-1 left-[-34px] top-[32px] w-[170px]">
Popular
</div>
</div>
</div>
<!-- ribbon 1 -->
<!-- other 12 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>

68
public/componets/others/13_other.html Normal file
View File

@@ -0,0 +1,68 @@
<!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>Other 13</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- other 13 star -->
<section class="section_divider">
<div>Other 13 (avatar 1)</div>
</section>
<!-- avatar 1 -->
<div class="relative w-12 mx-auto my-10">
<img class="rounded-full ring-2 ring-gray-100 w-12 h-12" src="https://source.unsplash.com/random/100*100/?employee" />
<div
class="absolute bottom-0 right-0 h-3 w-3 rounded-full ring ring-white bg-green-600"
></div>
</div>
<!-- avatar 1 -->
<!-- other 13 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>

85
public/componets/others/14_other.html Normal file
View File

@@ -0,0 +1,85 @@
<!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>Other 14 </title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- other 14 start -->
<section class="section_divider">
<div>Other 14 (avater 2)</div>
</section>
<!-- avater 2 -->
<div class="flex -space-x-4 justify-center my-10">
<img
class="rounded-full ring ring-white w-12 h-12"
src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
/>
<img
class="rounded-full ring ring-white w-12 h-12"
src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
/>
<img
class="rounded-full ring ring-white w-12 h-12"
src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
/>
<img
class="rounded-full ring ring-white w-12 h-12"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
/>
<div
class="flex items-center justify-center rounded-full ring ring-white w-12 h-12 bg-gray-300 font-semibold text-white"
>
+5
</div>
</div>
<!-- avater 2 -->
<!-- other 14 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>

92
public/componets/others/15_other.html Normal file
View File

@@ -0,0 +1,92 @@
<!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>Other 15</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- other 15 star -->
<section class="section_divider">
<div>Other 15 (breadcrumb 1 )</div>
</section>
<!-- breadcrumb 1 -->
<div class=" my-10 dark:bg-gray-800 flex justify-center items-center py-4 overflow-y-auto whitespace-nowrap">
<a href="#" class="text-gray-600 dark:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
</svg>
</a>
<span class="mx-5 text-gray-500 dark:text-gray-300">
/
</span>
<a href="#" class="text-gray-600 dark:text-gray-200 hover:underline">
Account
</a>
<span class="mx-5 text-gray-500 dark:text-gray-300">
/
</span>
<a href="#" class="text-gray-600 dark:text-gray-200 hover:underline">
Profile
</a>
<span class="mx-5 text-gray-500 dark:text-gray-300">
/
</span>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">
Settings
</a>
</div>
<!-- breadcrumb 1 -->
<!-- other 15 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>

98
public/componets/others/16_other.html Normal file
View File

@@ -0,0 +1,98 @@
<!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>Other 16</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- other 16 start -->
<section class="section_divider">
<div>Other 16 (breadcrumb 2)</div>
</section>
<!-- breadcrumb 2 -->
<div class=" my-10 dark:bg-gray-800 flex justify-center items-center py-4 overflow-y-auto whitespace-nowrap">
<a href="#" class="text-gray-600 dark:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
</svg>
</a>
<span class="mx-5 text-gray-500 dark:text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</span>
<a href="#" class="text-gray-600 dark:text-gray-200 hover:underline">
Account
</a>
<span class="mx-5 text-gray-500 dark:text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</span>
<a href="#" class="text-gray-600 dark:text-gray-200 hover:underline">
Profile
</a>
<span class="mx-5 text-gray-500 dark:text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</span>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">
Settings
</a>
</div>
<!-- breadcrumb 2 -->
<!-- other 16 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>

78
public/componets/others/17_other.html Normal file
View File

@@ -0,0 +1,78 @@
<!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>Other 17 </title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- other 17 start -->
<section class="section_divider">
<div>Other 17 ( newsletter )</div>
</section>
<section class=" my-10 flex flex-col max-w-4xl mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800 md:flex-row md:h-48">
<div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700 md:dark:bg-gray-800">
<div class="px-6 py-6 md:px-8 md:py-0">
<h2 class="text-lg font-bold text-gray-700 dark:text-white md:text-gray-100">Sign Up For <span class="text-blue-600 dark:text-blue-400 md:text-blue-300">Project</span> Updates</h2>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400 md:text-gray-400">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur obcaecati odio</p>
</div>
</div>
<div class="flex items-center justify-center pb-6 md:py-0 md:w-1/2">
<form>
<div class="flex flex-col p-1 overflow-hidden border rounded-lg dark:border-gray-600 lg:flex-row dark:focus-within:border-blue-300 focus-within:ring focus-within:ring-opacity-40 focus-within:border-blue-400 focus-within:ring-blue-300">
<input class="px-6 py-2 text-gray-700 placeholder-gray-500 bg-white outline-none dark:bg-gray-800 dark:placeholder-gray-400 focus:placeholder-transparent dark:focus:placeholder-transparent" type="text" name="email" placeholder="Enter your email" aria-label="Enter your email">
<button class="px-4 py-3 text-sm font-medium tracking-wider text-gray-100 uppercase transition-colors duration-200 transform bg-gray-700 rounded-lg hover:bg-gray-600 focus:bg-gray-600 focus:outline-none">subscribe</button>
</div>
</form>
</div>
</section>
<!-- other 17 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>

92
public/componets/others/18_other.html Normal file
View File

@@ -0,0 +1,92 @@
<!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>Other 18 </title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- other 18 start -->
<section class="section_divider">
<div>Other 18 (pagination 1 with arrow's)</div>
</section>
<div class="flex justify-center my-10">
<a href="#" class="flex items-center justify-center px-4 py-2 mx-1 text-gray-500 capitalize bg-white rounded-md cursor-not-allowed dark:bg-gray-900 dark:text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="hidden px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md sm:inline dark:bg-gray-900 dark:text-gray-200 hover:bg-blue-500 dark:hover:bg-blue-500 hover:text-white dark:hover:text-gray-200">
1
</a>
<a href="#" class="hidden px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md sm:inline dark:bg-gray-900 dark:text-gray-200 hover:bg-blue-500 dark:hover:bg-blue-500 hover:text-white dark:hover:text-gray-200">
2
</a>
<a href="#" class="hidden px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md sm:inline dark:bg-gray-900 dark:text-gray-200 hover:bg-blue-500 dark:hover:bg-blue-500 hover:text-white dark:hover:text-gray-200">
...
</a>
<a href="#" class="hidden px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md sm:inline dark:bg-gray-900 dark:text-gray-200 hover:bg-blue-500 dark:hover:bg-blue-500 hover:text-white dark:hover:text-gray-200">
9
</a>
<a href="#" class="hidden px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md sm:inline dark:bg-gray-900 dark:text-gray-200 hover:bg-blue-500 dark:hover:bg-blue-500 hover:text-white dark:hover:text-gray-200">
10
</a>
<a href="#" class="flex items-center justify-center px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md dark:bg-gray-900 dark:text-gray-200 hover:bg-blue-500 dark:hover:bg-blue-500 hover:text-white dark:hover:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</a>
</div>
<!-- other 18 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>

81
public/componets/others/19_other.html Normal file
View File

@@ -0,0 +1,81 @@
<!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>Other 19 </title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- other 19 start -->
<section class="section_divider">
<div>other 19 (pagination 2 )</div>
</section>
<!-- pagination 2 -->
<div class="flex justify-center my-10">
<a href="#" class="flex items-center px-4 py-2 mx-1 text-gray-500 bg-white rounded-md cursor-not-allowed dark:bg-gray-900 dark:text-gray-600">
previous
</a>
<a href="#" class="items-center hidden px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md sm:flex dark:bg-gray-900 dark:text-gray-200 hover:bg-blue-600 dark:hover:bg-blue-500 hover:text-white dark:hover:text-gray-200">
1
</a>
<a href="#" class="items-center hidden px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md sm:flex dark:bg-gray-900 dark:text-gray-200 hover:bg-blue-600 dark:hover:bg-blue-500 hover:text-white dark:hover:text-gray-200">
2
</a>
<a href="#" class="items-center hidden px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md sm:flex dark:bg-gray-900 dark:text-gray-200 hover:bg-blue-600 dark:hover:bg-blue-500 hover:text-white dark:hover:text-gray-200">
3
</a>
<a href="#" class="flex items-center px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md dark:bg-gray-900 dark:text-gray-200 hover:bg-blue-600 dark:hover:bg-blue-500 hover:text-white dark:hover:text-gray-200">
Next
</a>
</div>
<!-- pagination 2 -->
<!-- other 19 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>

74
public/componets/others/1_other.html Normal file
View File

@@ -0,0 +1,74 @@
<!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>Other 1 (alert 1) </title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- other 1 start -->
<section class="section_divider">
<div>Other 1 (alert 1)</div>
</section>
<!-- alert 1 -->
<div class="flex items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-xl mx-auto max-w-sm relative m-10">
<span class="text-xs font-bold uppercase px-2 mt-2 mr-2 text-green-900 bg-green-400 border rounded-full absolute top-0 right-0">New</span>
<span class="text-xs font-semibold uppercase m-1 py-1 mr-3 text-gray-500 absolute bottom-0 right-0">4:36 PM</span>
<img class="h-12 w-12 rounded-full" alt="John Doe's avatar"
src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&faces=1&faceindex=1&facepad=2.5&w=500&h=500&q=80" />
<div class="ml-5">
<h4 class="text-lg font-semibold leading-tight text-gray-900 dark:text-gray-300">John Doe</h4>
<p class="text-sm text-gray-600 dark:text-gray-300">You have a new message!</p>
</div>
</div>
<!-- alert 1 -->
<!-- other 1 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>

82
public/componets/others/20_other.html Normal file
View File

@@ -0,0 +1,82 @@
<!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>Other 20</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- other 20 start -->
<section class="section_divider">
<div>Other 20 (pagination 3 with record's )</div>
</section>
<!-- pagination 3 -->
<div class="w-full bg-white dark:bg-gray-800">
<div class="container flex flex-col items-center px-6 py-5 mx-auto space-y-6 sm:flex-row sm:justify-between sm:space-y-0 ">
<div class="-mx-2">
<a href="#" class="inline-flex items-center justify-center px-4 py-1 mx-2 text-gray-700 transition-colors duration-200 transform bg-gray-100 rounded-lg dark:text-white dark:bg-gray-700">
1
</a>
<a href="#" class="inline-flex items-center justify-center px-4 py-1 mx-2 text-gray-700 transition-colors duration-200 transform rounded-lg hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
2
</a>
<a href="#" class="inline-flex items-center justify-center px-4 py-1 mx-2 text-gray-700 transition-colors duration-200 transform rounded-lg hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
3
</a>
</div>
<div class="text-gray-500 dark:text-gray-400">
<span class="font-medium text-gray-700 dark:text-gray-100">1 - 25</span> of 77 records
</div>
</div>
</div>
<!-- pagination 3 -->
<!-- other 20 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>

51
public/componets/others/21_other.html Normal file
View File

@@ -0,0 +1,51 @@
<!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>Other </title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- 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>

157
public/componets/others/2_other.html Normal file
View File

@@ -0,0 +1,157 @@
<!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>Other 2 (alert 2)</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- other 2 start -->
<section class="section_divider">
<div>Other 2 (alert 2)</div>
</section>
<!-- alert 2 -->
<div class="flex flex-col justify-center pt-4 min-w-screen">
<div class="w-full px-2 py-4 overflow-x-auto text-center whitespace-no-wrap rounded-md" role="alert">
<div
class="relative inline-flex w-full max-w-sm ml-3 overflow-hidden bg-green-500 rounded shadow-sm hover:bg-green-600 hover:shadow-lg">
<div class="flex items-center justify-center w-12">
<svg class="w-10 h-10 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<div class="px-3 py-2 text-left">
<span class="font-semibold text-white">Success</span>
<p class="mb-1 text-sm leading-none text-white">Successfully Done!</p>
</div>
<div class="absolute right-0 p-1">
<svg class="w-6 h-6 text-white fill-current" role="button" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<title>Close</title>
<path
d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
</svg>
</div>
</div>
</div>
<div class="w-full px-2 py-4 overflow-x-auto text-center whitespace-no-wrap rounded-md" role="alert">
<div
class="relative inline-flex w-full max-w-sm ml-3 overflow-hidden bg-blue-500 rounded shadow-sm hover:bg-blue-600 hover:shadow-lg">
<div class="flex items-center justify-center w-12">
<svg class="w-10 h-10 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="px-4 py-2 text-left">
<span class="font-semibold text-white">Info</span>
<p class="mb-1 text-sm leading-none text-white">You should read this.</p>
</div>
<div class="absolute right-0 p-1">
<svg class="w-6 h-6 text-white fill-current" role="button" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<title>Close</title>
<path
d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
</svg>
</div>
</div>
</div>
<div class="w-full px-2 py-4 overflow-x-auto text-center whitespace-no-wrap rounded-md" role="alert">
<div
class="relative inline-flex w-full max-w-sm ml-3 overflow-hidden bg-yellow-500 rounded shadow-sm hover:shadow-lg hover:bg-yellow-600">
<div class="flex items-center justify-center w-12">
<svg class="w-10 h-10 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<div class="px-4 py-2 text-left">
<span class="font-semibold text-white">Warning</span>
<p class="mb-1 text-sm leading-none text-white">Something could go wrong.</p>
</div>
<div class="absolute right-0 p-1">
<svg class="w-6 h-6 text-white fill-current" role="button" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<title>Close</title>
<path
d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
</svg>
</div>
</div>
</div>
<div class="w-full px-2 py-4 overflow-x-auto text-center whitespace-no-wrap rounded-md" role="alert">
<div
class="relative inline-flex w-full max-w-sm ml-3 overflow-hidden bg-red-500 rounded shadow-sm hover:shadow-lg hover:bg-red-600">
<div class="flex items-center justify-center w-12">
<svg class="w-10 h-10 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="px-4 py-2 text-left">
<span class="font-semibold text-white">Error</span>
<p class="mb-1 text-sm leading-none text-white">Something went wrong.</p>
</div>
<div class="absolute right-0 p-1">
<svg class="w-6 h-6 text-white fill-current" role="button" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<title>Close</title>
<path
d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
</svg>
</div>
</div>
</div>
</div>
<!-- alert 2 -->
<!-- other 2 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>

149
public/componets/others/3_other.html Normal file
View File

@@ -0,0 +1,149 @@
<!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>ther 3 (alert 3) </title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- other 3 start -->
<section class="section_divider">
<div>Other 3 (alert 3)</div>
</section>
<!-- alert 3 -->
<div class="flex flex-col justify-center pt-4 bg-gray-100 min-w-screen">
<!-- success -->
<div class="flex w-full max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-md dark:bg-gray-800">
<div class="flex items-center justify-center w-12 bg-emerald-500">
<svg class="w-6 h-6 text-white fill-current" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z"/>
</svg>
</div>
<div class="px-4 py-2 -mx-3">
<div class="mx-3">
<span class="font-semibold text-emerald-500 dark:text-emerald-400">Success</span>
<p class="text-sm text-gray-600 dark:text-gray-200">Your account was registered!</p>
</div>
</div>
</div>
<!-- info -->
<div class="my-5"></div>
<div class="flex w-full max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-md dark:bg-gray-800">
<div class="flex items-center justify-center w-12 bg-blue-500">
<svg class="w-6 h-6 text-white fill-current" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/>
</svg>
</div>
<div class="px-4 py-2 -mx-3">
<div class="mx-3">
<span class="font-semibold text-blue-500 dark:text-blue-400">Info</span>
<p class="text-sm text-gray-600 dark:text-gray-200">This channel archived by the owner!</p>
</div>
</div>
</div>
<!-- warning -->
<div class="my-5"></div>
<div class="flex w-full max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-md dark:bg-gray-800">
<div class="flex items-center justify-center w-12 bg-yellow-400">
<svg class="w-6 h-6 text-white fill-current" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/>
</svg>
</div>
<div class="px-4 py-2 -mx-3">
<div class="mx-3">
<span class="font-semibold text-yellow-400 dark:text-yellow-300">Warning</span>
<p class="text-sm text-gray-600 dark:text-gray-200">Your image size is too large!</p>
</div>
</div>
</div>
<!-- error -->
<div class="my-5"></div>
<div class="flex w-full max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-md dark:bg-gray-800">
<div class="flex items-center justify-center w-12 bg-red-500">
<svg class="w-6 h-6 text-white fill-current" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<path d="M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z"/>
</svg>
</div>
<div class="px-4 py-2 -mx-3">
<div class="mx-3">
<span class="font-semibold text-red-500 dark:text-red-400">Error</span>
<p class="text-sm text-gray-600 dark:text-gray-200">Your email is already used!</p>
</div>
</div>
</div>
<!-- notification pop -->
<div class="my-5"></div>
<div class="flex w-full max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-md dark:bg-gray-800">
<div class="w-2 bg-gray-800 dark:bg-gray-900"></div>
<div class="flex items-center px-2 py-3">
<img class="object-cover w-10 h-10 rounded-full" alt="User avatar" src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=200">
<div class="mx-3">
<p class="text-gray-600 dark:text-gray-200">Sara has replied on the <a class="text-blue-500 dark:text-blue-300 hover:text-blue-400 hover:underline">uploaded image</a>.</p>
</div>
</div>
</div>
<div class="my-5"></div>
</div>
<!-- alert 3 -->
<!-- other 3 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>

94
public/componets/others/4_other.html Normal file
View File

@@ -0,0 +1,94 @@
<!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>Other 4 (alert 4) </title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- other 4 start -->
<section class="section_divider">
<div>Other 4 (alert 4)</div>
</section>
<!-- alert 4 -->
<div class="w-64 mx-auto m-2 flex items-center justify-center p-4 text-white bg-green-600 rounded" role="alert">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<h3 class="ml-3 text-sm font-medium">
Post has been published!
</h3>
</div>
<!-- Light -->
<div class="w-64 mx-auto flex items-center justify-center p-4 text-green-700 rounded bg-green-50" role="alert">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<h3 class="ml-3 text-sm font-medium">
Post has been published!
</h3>
</div>
<!-- Border -->
<div class="w-64 mx-auto m-2 flex items-center justify-center p-4 text-green-700 border-2 border-current rounded" role="alert">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<h3 class="ml-3 text-sm font-medium">
Post has been published!
</h3>
</div>
<!-- alert 4 -->
<!-- other 4 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>

102
public/componets/others/5_other.html Normal file
View File

@@ -0,0 +1,102 @@
<!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>Other 5 (alert 5) </title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- other 5 start -->
<section class="section_divider">
<div>Other 5 (alert 5)</div>
</section>
<!-- alert 5 -->
<div class="flex flex-wrap items-center justify-center my-10">
<div class="flex space-x-10 w-full flex-wrap items-center justify-center">
<!-- Component Start -->
<div class="flex items-center h-16 border border-gray-300 pr-4 w-full max-w-md shadow-lg">
<div class="flex items-center justify-center bg-gray-300 w-12 h-full">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="px-6">
<h5 class="font-semibold">Hey heads up!</h5>
<p class="text-sm">You should notice this alert!</p>
</div>
<button class="ml-auto">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
<!-- Component End -->
<!-- Component Start -->
<div class="flex items-center h-16 border border-gray-300 pr-4 w-full max-w-md shadow-lg">
<div class="flex items-center justify-center bg-gray-300 w-2 h-full">
</div>
<div class="px-6">
<h5 class="font-semibold">Hey heads up!</h5>
<p class="text-sm">You should notice this alert!</p>
</div>
<button class="ml-auto">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
<!-- Component End -->
</div>
</div>
<!-- alert 5 -->
<!-- other 5 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>

66
public/componets/others/6_other.html Normal file
View File

@@ -0,0 +1,66 @@
<!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>Ohter 6 (alert 6 ) </title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- other 6 start -->
<section class="section_divider">
<div>Ohter 6 (alert 6 )</div>
</section>
<!-- alert 6 -->
<section class="flex justify-center my-10">
<div class=" flex items-between justify-center p-6 border-l-8 sm:py-8 dark:border-green-400 dark:bg-gray-900 dark:text-gray-100">
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus?</span>
</div>
</section>
<!-- alert 6 -->
<!-- other 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>

188
public/componets/others/7_other.html Normal file
View File

@@ -0,0 +1,188 @@
<!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>Other 7 (notification 1) </title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- other 7 start -->
<section class="section_divider">
<div> Other 7 (notification 1)</div>
</section>
<!-- notification 1 -->
<div class="flex flex-col justify-center pt-4 bg-gray-100 min-w-screen">
<div class="w-full max-w-sm mx-auto my-2 overflow-hidden rounded shadow-sm">
<div class="relative flex items-center justify-between px-2 py-2 font-bold text-white bg-green-500 rounded-t">
<div class="relative flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
class="inline w-6 h-6 mr-2 opacity-75">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>Success</span>
</div>
<span class="relative">
<svg class="w-5 h-5 text-green-300 fill-current hover:text-white" role="button"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<title>Close</title>
<path
d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
</svg>
</span>
</div>
<div class="p-3 bg-white border border-gray-300 rounded-b shadow-lg">
<span class="block text-gray-600">File uploaded successfully!</span>
</div>
</div>
<div class="w-full max-w-sm mx-auto my-2 overflow-hidden rounded shadow-sm">
<div class="relative flex items-center justify-between px-2 py-2 font-bold text-white bg-blue-500">
<div class="relative flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
class="inline w-6 h-6 mr-2 opacity-75">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
</svg>
<span>New message</span>
</div>
<span class="relative">
<svg class="w-5 h-5 text-blue-300 fill-current hover:text-white" role="button"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<title>Close</title>
<path
d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
</svg>
</span>
</div>
<div class="p-3 bg-white border border-gray-300 rounded-b">
<div class="flex justify-start mb-2">
<div>
<img src="https://images.unsplash.com/photo-1541647376583-8934aaf3448a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&faces=1&faceindex=1&facepad=2.5&w=500&h=500&q=80"
class="inline object-cover w-12 h-12 mr-2 rounded-full">
</div>
<div>
<p class="font-medium leading-tight text-gray-700">John Doe</p>
<span class="block leading-tight text-gray-500">Hey! hope you are doing fine.</span>
</div>
</div>
<div class="block w-full mt-3 text-right">
<button
class="px-4 py-2 font-semibold text-gray-800 bg-white border border-gray-400 rounded-md hover:bg-gray-100 focus:outline-none">
Ignore
</button>
<button
class="px-4 py-2 font-bold text-white bg-blue-500 rounded-md hover:bg-blue-700 focus:outline-none">
Reply
</button>
</div>
</div>
</div>
<div class="w-full max-w-sm mx-auto my-2 overflow-hidden rounded shadow-sm">
<div class="relative flex items-center justify-between px-2 py-2 font-bold text-white bg-yellow-500">
<div class="relative flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
class="inline w-6 h-6 mr-2 opacity-75">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>Deleting File</span>
</div>
<span class="relative">
<svg class="w-5 h-5 text-yellow-300 fill-current hover:text-white" role="button"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<title>Close</title>
<path
d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
</svg>
</span>
</div>
<div class="p-3 bg-white border border-gray-300 rounded-b shadow-lg">
<p class="font-bold text-gray-700">Are you sure?</p>
<p class="mt-2 text-sm text-gray-500">Are you sure you want to delete this file?</p>
<div class="block w-full mt-3 text-right">
<button
class="px-4 py-2 font-semibold text-gray-800 bg-white border border-gray-400 rounded-md hover:bg-gray-100 focus:outline-none">
Cancel
</button>
<button
class="px-4 py-2 font-bold text-white bg-yellow-500 rounded-md hover:bg-yellow-700 focus:outline-none">
Confirm
</button>
</div>
</div>
</div>
<div class="w-full max-w-sm mx-auto my-2">
<div
class="relative flex items-center justify-between px-4 py-4 font-bold text-gray-700 bg-white border border-gray-300 rounded shadow-sm">
<div class="relative flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
class="inline w-6 h-6 mr-2">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>Message archived</span>
</div>
<span class="relative">
<svg class="w-5 h-5 text-gray-400 fill-current hover:text-gray-700" role="button"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<title>Close</title>
<path
d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
</svg>
</span>
<button
class="absolute right-0 mr-16 font-semibold text-blue-400 bg-transparent rounded-full focus:outline-none">
Undo
</button>
</div>
</div>
</div>
<!-- notification 1 -->
<!-- other 7 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>

67
public/componets/others/8_other.html Normal file
View File

@@ -0,0 +1,67 @@
<!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>Other 8 (notification 2) </title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- other 8 start -->
<section class="section_divider">
<div>Other 8 (notification 2)</div>
</section>
<!-- notification 2 -->
<section class="my-10 flex justify-center">
<div class="inline-flex relative w-fit">
<div class="absolute inline-block top-0 right-0 bottom-auto left-auto translate-x-2/4 -translate-y-1/2 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 py-1 px-2.5 text-xs leading-none text-center whitespace-nowrap align-baseline font-bold bg-indigo-700 text-white rounded-full z-10">99+</div>
<button type="button" class="inline-block px-7 py-3 bg-blue-600 text-white font-medium text-sm leading-snug uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">E-mails</button>
</div>
</section>
<!-- notification 2 -->
<!-- other 8 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>

71
public/componets/others/9_other.html Normal file
View File

@@ -0,0 +1,71 @@
<!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>Other 9 (notification 3) </title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- other 9 start -->
<section class="section_divider">
<div>Other 9 (notification 3)</div>
</section>
<!-- notification 3 -->
<section class="flex justify-center">
<div class="m-6 inline-flex relative w-fit ">
<div class="absolute inline-block top-2/4 right-auto bottom-2/4 left-2/4 -translate-x-2/4 -translate-y-1/2 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 p-2.5 text-xs bg-pink-700 rounded-full z-10"></div>
<div class="px-8 py-6 bg-indigo-400 flex items-center justify-center text-center rounded-lg shadow-lg">
<div>
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bell" class="mx-auto text-white w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor" d="M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z"></path>
</svg>
</div>
</div>
</div>
</section>
<!-- notification 3 -->
<!-- other 9 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>

997
public/componets/others/others.html
View File

File diff suppressed because it is too large Load Diff

67
public/componets/skeleton/1_skeleton.html Normal file
View File

@@ -0,0 +1,67 @@
<!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 1</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- skeleton 1 start -->
<section class="section_divider">
<div>Skeleton 1</div>
</section>
<div class="max-w-sm p-4 m-10 mx-auto border border-gray-300 dark:bg-gray-800 rounded-md shadow max-h-md">
<div class="flex space-x-4 animate-pulse">
<div class="flex-1 py-1 space-y-4">
<div class="w-full h-40 bg-gray-400 rounded"></div>
<div class="space-y-2">
<div class="h-4 bg-gray-400 rounded"></div>
<div class="w-5/6 h-4 bg-gray-400 rounded"></div>
</div>
</div>
</div>
</div>
<!-- skeleton 1 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>

66
public/componets/skeleton/2_skeleton.html Normal file
View File

@@ -0,0 +1,66 @@
<!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 2</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- skeleton 2 start -->
<section class="section_divider">
<div>Skeleton 2</div>
</section>
<div class="flex mx-auto flex-col m-8 rounded shadow-md w-60 sm:w-80 animate-pulse h-96">
<div class="h-48 rounded-t dark:bg-gray-700"></div>
<div class="flex-1 px-4 py-8 space-y-4 sm:p-8 dark:bg-gray-900">
<div class="w-full h-6 rounded dark:bg-gray-700"></div>
<div class="w-full h-6 rounded dark:bg-gray-700"></div>
<div class="w-3/4 h-6 rounded dark:bg-gray-700"></div>
</div>
</div>
<!-- skeleton 2 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>

70
public/componets/skeleton/3_skeleton.html Normal file
View File

@@ -0,0 +1,70 @@
<!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 3</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- skeleton 3 start -->
<section class="section_divider">
<div>Skeleton 3</div>
</section>
<div class="py-4 mx-auto my-10 rounded shadow-md w-60 sm:w-80 animate-pulse dark:bg-gray-900">
<div class="flex p-4 space-x-4 sm:px-8">
<div class="flex-shrink-0 w-16 h-16 rounded-full dark:bg-gray-700"></div>
<div class="flex-1 py-2 space-y-4">
<div class="w-full h-3 rounded dark:bg-gray-700"></div>
<div class="w-5/6 h-3 rounded dark:bg-gray-700"></div>
</div>
</div>
<div class="p-4 space-y-4 sm:px-8">
<div class="w-full h-4 rounded dark:bg-gray-700"></div>
<div class="w-full h-4 rounded dark:bg-gray-700"></div>
<div class="w-3/4 h-4 rounded dark:bg-gray-700"></div>
</div>
</div>
<!-- skeleton 3 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>

115
public/componets/skeleton/4_skeleton.html Normal file
View File

@@ -0,0 +1,115 @@
<!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 4</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- skeleton 4 start -->
<section class="section_divider">
<div>Skeleton 4</div>
</section>
<!-- This is an example component -->
<div class="w-full flex items-center flex-col bg-white">
<div class="flex flex-col bg-white shadow-md rounded-md items-center">
<div class="flex items-center p-4">
<div data-placeholder class="mr-2 h-10 w-10 rounded-full overflow-hidden relative bg-gray-200">
</div>
<div class="flex flex-col justify-between items-center">
<div data-placeholder class="mb-2 h-5 w-40 overflow-hidden relative bg-gray-200">
</div>
</div>
</div>
<div data-placeholder class="h-52 w-full overflow-hidden relative bg-gray-200"></div>
<div class="flex flex-col p-4">
<div class="flex">
<div data-placeholder class=" flex h-5 w-5 overflow-hidden relative bg-gray-200 mr-1"></div>
<div data-placeholder class="flex h-5 w-48 overflow-hidden relative bg-gray-200"></div>
</div>
<div class="flex mt-1">
<div data-placeholder class="flex h-5 w-5 overflow-hidden relative bg-gray-200 mr-1"></div>
<div data-placeholder class="flex h-5 w-48 overflow-hidden relative bg-gray-200"></div>
</div>
</div>
<div class="w-full h-px overflow-hidden relative bg-gray-200 m-4"></div>
<div class="flex justify-between items-center p-4 w-full">
<div data-placeholder class="mr-2 h-10 w-16 overflow-hidden relative bg-gray-200">
</div>
<div data-placeholder class="mb-2 h-5 w-20 overflow-hidden relative bg-gray-200">
</div>
</div>
</div>
</div>
<style>
[data-placeholder]::after {
content: "test ";
box-shadow: 0 0 50px 9px rgb(110, 98, 98);
position: absolute;
top: 0;
left: -100%;
height: 100%;
animation: load 1s infinite;
}
@keyframes load {
0%{ left: -100%}
100%{ left: 150%}
}
</style>
<!-- skeleton 4 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>

306
public/componets/skeleton/5_skeleton.html Normal file
View File

@@ -0,0 +1,306 @@
<!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 5</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- skeleton 5 start -->
<section class="section_divider">
<div>Skeleton 5</div>
</section>
<section class="text-gray-700 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap -m-4">
<div class="p-4 md:w-1/3">
<div class="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
<div class="lg:h-48 bg-gray-400 md:h-36 w-full object-cover object-center"></div>
<div class="p-6">
<h2 class="bg-gray-400 animate-pulse h-4 w-1/4 mb-2"></h2>
<h1 class="w-1/2 mb-4 h-6 animate-pulse bg-gray-500"></h1>
<p class="leading-relaxed mb-3 w-full h-3 animate-pulse bg-gray-400"></p>
<p class="leading-relaxed mb-3 w-2/3 h-3 animate-pulse bg-gray-400"></p>
<p class="leading-relaxed mb-3 w-1/2 h-3 animate-pulse bg-gray-400"></p>
<div class="flex items-center flex-wrap ">
<a class="bg-indigo-300 h-4 animate-pulse mt-2 w-32 inline-flex items-center md:mb-2 lg:mb-0">
</a>
<span class="bg-indigo-300 w-16 mt-2 h-4 animate-pulse mr-3 px-2 inline-flex items-center ml-auto leading-none text-sm pr-5 py-1">
</span>
</div>
</div>
</div>
</div>
<div class="p-4 md:w-1/3">
<div class="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
<img class="lg:h-48 md:h-36 w-full object-cover object-center" src="https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1049&q=80" alt="blog">
<div class="p-6">
<h2 class="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">CATEGORY</h2>
<h1 class="title-font text-lg font-medium text-gray-900 mb-3">The Catalyzer</h1>
<p class="leading-relaxed mb-3">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p>
<div class="flex items-center flex-wrap ">
<a class="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0">Learn More
<svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5l7 7-7 7"></path>
</svg>
</a>
<span class="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
<svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>1.2K
</span>
<span class="text-gray-600 inline-flex items-center leading-none text-sm">
<svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
</svg>6
</span>
</div>
</div>
</div>
</div>
<div class="p-4 md:w-1/3">
<div class="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
<div class="lg:h-48 bg-gray-400 md:h-36 w-full object-cover object-center"></div>
<div class="p-6">
<h2 class="bg-gray-400 animate-pulse h-4 w-1/4 mb-2"></h2>
<h1 class="w-1/2 mb-4 h-6 animate-pulse bg-gray-500"></h1>
<p class="leading-relaxed mb-3 w-full h-3 animate-pulse bg-gray-400"></p>
<p class="leading-relaxed mb-3 w-2/3 h-3 animate-pulse bg-gray-400"></p>
<p class="leading-relaxed mb-3 w-1/2 h-3 animate-pulse bg-gray-400"></p>
<div class="flex items-center flex-wrap ">
<a class="bg-indigo-300 h-4 animate-pulse mt-2 w-32 inline-flex items-center md:mb-2 lg:mb-0">
</a>
<span class="bg-indigo-300 w-16 mt-2 h-4 animate-pulse mr-3 px-2 inline-flex items-center ml-auto leading-none text-sm pr-5 py-1">
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="text-gray-700 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="ext-md text-center mt-5 font-extrabold border-b border-black p-5 mb-5">Loading</div>
<div class="flex flex-wrap -m-4">
<div class="p-4 md:w-1/3">
<div class="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
<div class="lg:h-48 bg-gray-400 md:h-36 w-full object-cover object-center"></div>
<div class="p-6">
<h2 class="bg-gray-400 animate-pulse h-4 w-1/4 mb-2"></h2>
<h1 class="w-1/2 mb-4 h-6 animate-pulse bg-gray-500"></h1>
<p class="leading-relaxed mb-3 w-full h-3 animate-pulse bg-gray-400"></p>
<p class="leading-relaxed mb-3 w-2/3 h-3 animate-pulse bg-gray-400"></p>
<p class="leading-relaxed mb-3 w-1/2 h-3 animate-pulse bg-gray-400"></p>
<div class="flex items-center flex-wrap ">
<a class="bg-indigo-300 h-4 animate-pulse mt-2 w-32 inline-flex items-center md:mb-2 lg:mb-0">
</a>
<span class="bg-indigo-300 w-16 mt-2 h-4 animate-pulse mr-3 px-2 inline-flex items-center ml-auto leading-none text-sm pr-5 py-1">
</span>
</div>
</div>
</div>
</div>
<div class="p-4 md:w-1/3">
<div class="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
<div class="lg:h-48 bg-gray-400 md:h-36 w-full object-cover object-center"></div>
<div class="p-6">
<h2 class="bg-gray-400 animate-pulse h-4 w-1/4 mb-2"></h2>
<h1 class="w-1/2 mb-4 h-6 animate-pulse bg-gray-500"></h1>
<p class="leading-relaxed mb-3 w-full h-3 animate-pulse bg-gray-400"></p>
<p class="leading-relaxed mb-3 w-2/3 h-3 animate-pulse bg-gray-400"></p>
<p class="leading-relaxed mb-3 w-1/2 h-3 animate-pulse bg-gray-400"></p>
<div class="flex items-center flex-wrap ">
<a class="bg-indigo-300 h-4 animate-pulse mt-2 w-32 inline-flex items-center md:mb-2 lg:mb-0">
</a>
<span class="bg-indigo-300 w-16 mt-2 h-4 animate-pulse mr-3 px-2 inline-flex items-center ml-auto leading-none text-sm pr-5 py-1">
</span>
</div>
</div>
</div>
</div>
<div class="p-4 md:w-1/3">
<div class="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
<div class="lg:h-48 bg-gray-400 md:h-36 w-full object-cover object-center"></div>
<div class="p-6">
<h2 class="bg-gray-400 animate-pulse h-4 w-1/4 mb-2"></h2>
<h1 class="w-1/2 mb-4 h-6 animate-pulse bg-gray-500"></h1>
<p class="leading-relaxed mb-3 w-full h-3 animate-pulse bg-gray-400"></p>
<p class="leading-relaxed mb-3 w-2/3 h-3 animate-pulse bg-gray-400"></p>
<p class="leading-relaxed mb-3 w-1/2 h-3 animate-pulse bg-gray-400"></p>
<div class="flex items-center flex-wrap ">
<a class="bg-indigo-300 h-4 animate-pulse mt-2 w-32 inline-flex items-center md:mb-2 lg:mb-0">
</a>
<span class="bg-indigo-300 w-16 mt-2 h-4 animate-pulse mr-3 px-2 inline-flex items-center ml-auto leading-none text-sm pr-5 py-1">
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<hr>
<section class="text-gray-700 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="text-md text-center mt-5 font-extrabold border-b border-black p-5 mb-5">After Loading</div>
<div class="flex flex-wrap -m-4">
<div class="p-4 md:w-1/3">
<div class="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
<img class="lg:h-48 md:h-36 w-full object-cover object-center" src="https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1049&q=80" alt="blog">
<div class="p-6">
<h2 class="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">CATEGORY</h2>
<h1 class="title-font text-lg font-medium text-gray-900 mb-3">The Catalyzer</h1>
<p class="leading-relaxed mb-3">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p>
<div class="flex items-center flex-wrap ">
<a class="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0">Learn More
<svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5l7 7-7 7"></path>
</svg>
</a>
<span class="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
<svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>1.2K
</span>
<span class="text-gray-600 inline-flex items-center leading-none text-sm">
<svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
</svg>6
</span>
</div>
</div>
</div>
</div>
<div class="p-4 md:w-1/3">
<div class="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
<img class="lg:h-48 md:h-36 w-full object-cover object-center" src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="blog">
<div class="p-6">
<h2 class="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">CATEGORY</h2>
<h1 class="title-font text-lg font-medium text-gray-900 mb-3">The 400 Blows</h1>
<p class="leading-relaxed mb-3">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p>
<div class="flex items-center flex-wrap">
<a class="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0">Learn More
<svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5l7 7-7 7"></path>
</svg>
</a>
<span class="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
<svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>1.2K
</span>
<span class="text-gray-600 inline-flex items-center leading-none text-sm">
<svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
</svg>6
</span>
</div>
</div>
</div>
</div>
<div class="p-4 md:w-1/3">
<div class="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
<img class="lg:h-48 md:h-36 w-full object-cover object-center" src="https://images.unsplash.com/photo-1593642703055-4b72c180d9b5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="blog">
<div class="p-6">
<h2 class="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">CATEGORY</h2>
<h1 class="title-font text-lg font-medium text-gray-900 mb-3">Shooting Stars</h1>
<p class="leading-relaxed mb-3">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p>
<div class="flex items-center flex-wrap ">
<a class="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0">Learn More
<svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5l7 7-7 7"></path>
</svg>
</a>
<span class="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
<svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>1.2K
</span>
<span class="text-gray-600 inline-flex items-center leading-none text-sm">
<svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
</svg>6
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- skeleton 5 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>

73
public/componets/skeleton/6_skeleton.html Normal file
View File

@@ -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>

81
public/componets/skeleton/7_skeleton.html Normal file
View File

@@ -0,0 +1,81 @@
<!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 7</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- skeleton 7 start -->
<section class="section_divider">
<div>Skeleton 7</div>
</section>
<section class="m-10">
<div class="bg-white w-96 mx-auto rounded-2xl shadow-lg">
<div class="bg-gray-200 h-48 p-3 overflow-hidden animate-pulse">
</div>
<div class="h- p-3">
<div class="grid grid-cols-3 gap-4 mt-2">
<div class="h-8 bg-gray-200 rounded animate-pulse">
</div>
<div class="h-8 bg-gray-200 rounded animate-pulse">
</div>
<div class="h-8 bg-gray-200 rounded animate-pulse">
</div>
<div class="h-8 col-span-2 bg-gray-200 rounded animate-pulse">
</div>
<div class=" h-8 bg-gray-200 rounded animate-pulse">
</div>
<div class="...">
</div>
<div class="col-span-2 ...">
</div>
</div>
</div>
</div>
</section>
<!-- skeleton 7 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>

88
public/componets/skeleton/8_skeleton.html Normal file
View File

@@ -0,0 +1,88 @@
<!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 8</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- skeleton 8 start -->
<section class="section_divider">
<div>Skeleton 8</div>
</section>
<section class="m-10">
<div class="bg-white w-1/2 mx-auto p-2 sm:p-4 sm:h-64 rounded-2xl shadow-lg flex flex-col sm:flex-row gap-5 select-none ">
<div class="h-52 sm:h-full sm:w-72 rounded-xl bg-gray-200 animate-pulse">
</div>
<div class="flex flex-col flex-1 gap-5 sm:p-2">
<div class="flex flex-1 flex-col gap-3">
<div class="bg-gray-200 w-full animate-pulse h-14 rounded-2xl">
</div>
<div class="bg-gray-200 w-full animate-pulse h-3 rounded-2xl">
</div>
<div class="bg-gray-200 w-full animate-pulse h-3 rounded-2xl">
</div>
<div class="bg-gray-200 w-full animate-pulse h-3 rounded-2xl">
</div>
<div class="bg-gray-200 w-full animate-pulse h-3 rounded-2xl">
</div>
</div>
<div class="mt-auto flex gap-3">
<div class="bg-gray-200 w-20 h-8 animate-pulse rounded-full">
</div>
<div class="bg-gray-200 w-20 h-8 animate-pulse rounded-full">
</div>
<div class="bg-gray-200 w-20 h-8 animate-pulse rounded-full ml-auto">
</div>
</div>
</div>
</div>
</section>
<!-- skeleton 8 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>

518
public/componets/skeleton/skeleton.html Normal file
View File

@@ -0,0 +1,518 @@
<!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</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- skeleton 1 start -->
<section class="section_divider">
<div>Skeleton 1</div>
</section>
<div class="max-w-sm p-4 m-10 mx-auto border border-gray-300 dark:bg-gray-800 rounded-md shadow max-h-md">
<div class="flex space-x-4 animate-pulse">
<div class="flex-1 py-1 space-y-4">
<div class="w-full h-40 bg-gray-400 rounded"></div>
<div class="space-y-2">
<div class="h-4 bg-gray-400 rounded"></div>
<div class="w-5/6 h-4 bg-gray-400 rounded"></div>
</div>
</div>
</div>
</div>
<!-- skeleton 1 end -->
<!-- skeleton 2 start -->
<section class="section_divider">
<div>Skeleton 2</div>
</section>
<div class="flex mx-auto flex-col m-8 rounded shadow-md w-60 sm:w-80 animate-pulse h-96">
<div class="h-48 rounded-t dark:bg-gray-700"></div>
<div class="flex-1 px-4 py-8 space-y-4 sm:p-8 dark:bg-gray-900">
<div class="w-full h-6 rounded dark:bg-gray-700"></div>
<div class="w-full h-6 rounded dark:bg-gray-700"></div>
<div class="w-3/4 h-6 rounded dark:bg-gray-700"></div>
</div>
</div>
<!-- skeleton 2 end -->
<!-- skeleton 3 start -->
<section class="section_divider">
<div>Skeleton 3</div>
</section>
<div class="py-4 mx-auto my-10 rounded shadow-md w-60 sm:w-80 animate-pulse dark:bg-gray-900">
<div class="flex p-4 space-x-4 sm:px-8">
<div class="flex-shrink-0 w-16 h-16 rounded-full dark:bg-gray-700"></div>
<div class="flex-1 py-2 space-y-4">
<div class="w-full h-3 rounded dark:bg-gray-700"></div>
<div class="w-5/6 h-3 rounded dark:bg-gray-700"></div>
</div>
</div>
<div class="p-4 space-y-4 sm:px-8">
<div class="w-full h-4 rounded dark:bg-gray-700"></div>
<div class="w-full h-4 rounded dark:bg-gray-700"></div>
<div class="w-3/4 h-4 rounded dark:bg-gray-700"></div>
</div>
</div>
<!-- skeleton 3 end -->
<!-- skeleton 4 start -->
<section class="section_divider">
<div>Skeleton 4</div>
</section>
<!-- This is an example component -->
<div class="w-full flex items-center flex-col bg-white">
<div class="flex flex-col bg-white shadow-md rounded-md items-center">
<div class="flex items-center p-4">
<div data-placeholder class="mr-2 h-10 w-10 rounded-full overflow-hidden relative bg-gray-200">
</div>
<div class="flex flex-col justify-between items-center">
<div data-placeholder class="mb-2 h-5 w-40 overflow-hidden relative bg-gray-200">
</div>
</div>
</div>
<div data-placeholder class="h-52 w-full overflow-hidden relative bg-gray-200"></div>
<div class="flex flex-col p-4">
<div class="flex">
<div data-placeholder class=" flex h-5 w-5 overflow-hidden relative bg-gray-200 mr-1"></div>
<div data-placeholder class="flex h-5 w-48 overflow-hidden relative bg-gray-200"></div>
</div>
<div class="flex mt-1">
<div data-placeholder class="flex h-5 w-5 overflow-hidden relative bg-gray-200 mr-1"></div>
<div data-placeholder class="flex h-5 w-48 overflow-hidden relative bg-gray-200"></div>
</div>
</div>
<div class="w-full h-px overflow-hidden relative bg-gray-200 m-4"></div>
<div class="flex justify-between items-center p-4 w-full">
<div data-placeholder class="mr-2 h-10 w-16 overflow-hidden relative bg-gray-200">
</div>
<div data-placeholder class="mb-2 h-5 w-20 overflow-hidden relative bg-gray-200">
</div>
</div>
</div>
</div>
<style>
[data-placeholder]::after {
content: "test ";
box-shadow: 0 0 50px 9px rgb(149, 12, 12);
position: absolute;
top: 0;
left: -100%;
height: 100%;
animation: load 1s infinite;
}
@keyframes load {
0%{ left: -100%}
100%{ left: 150%}
}
</style>
<!-- skeleton 4 end -->
<!-- skeleton 5 start -->
<section class="section_divider">
<div>Skeleton 5</div>
</section>
<section class="text-gray-700 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap -m-4">
<div class="p-4 md:w-1/3">
<div class="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
<div class="lg:h-48 bg-gray-400 md:h-36 w-full object-cover object-center"></div>
<div class="p-6">
<h2 class="bg-gray-400 animate-pulse h-4 w-1/4 mb-2"></h2>
<h1 class="w-1/2 mb-4 h-6 animate-pulse bg-gray-500"></h1>
<p class="leading-relaxed mb-3 w-full h-3 animate-pulse bg-gray-400"></p>
<p class="leading-relaxed mb-3 w-2/3 h-3 animate-pulse bg-gray-400"></p>
<p class="leading-relaxed mb-3 w-1/2 h-3 animate-pulse bg-gray-400"></p>
<div class="flex items-center flex-wrap ">
<a class="bg-indigo-300 h-4 animate-pulse mt-2 w-32 inline-flex items-center md:mb-2 lg:mb-0">
</a>
<span class="bg-indigo-300 w-16 mt-2 h-4 animate-pulse mr-3 px-2 inline-flex items-center ml-auto leading-none text-sm pr-5 py-1">
</span>
</div>
</div>
</div>
</div>
<div class="p-4 md:w-1/3">
<div class="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
<img class="lg:h-48 md:h-36 w-full object-cover object-center" src="https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1049&q=80" alt="blog">
<div class="p-6">
<h2 class="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">CATEGORY</h2>
<h1 class="title-font text-lg font-medium text-gray-900 mb-3">The Catalyzer</h1>
<p class="leading-relaxed mb-3">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p>
<div class="flex items-center flex-wrap ">
<a class="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0">Learn More
<svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5l7 7-7 7"></path>
</svg>
</a>
<span class="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
<svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>1.2K
</span>
<span class="text-gray-600 inline-flex items-center leading-none text-sm">
<svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
</svg>6
</span>
</div>
</div>
</div>
</div>
<div class="p-4 md:w-1/3">
<div class="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
<div class="lg:h-48 bg-gray-400 md:h-36 w-full object-cover object-center"></div>
<div class="p-6">
<h2 class="bg-gray-400 animate-pulse h-4 w-1/4 mb-2"></h2>
<h1 class="w-1/2 mb-4 h-6 animate-pulse bg-gray-500"></h1>
<p class="leading-relaxed mb-3 w-full h-3 animate-pulse bg-gray-400"></p>
<p class="leading-relaxed mb-3 w-2/3 h-3 animate-pulse bg-gray-400"></p>
<p class="leading-relaxed mb-3 w-1/2 h-3 animate-pulse bg-gray-400"></p>
<div class="flex items-center flex-wrap ">
<a class="bg-indigo-300 h-4 animate-pulse mt-2 w-32 inline-flex items-center md:mb-2 lg:mb-0">
</a>
<span class="bg-indigo-300 w-16 mt-2 h-4 animate-pulse mr-3 px-2 inline-flex items-center ml-auto leading-none text-sm pr-5 py-1">
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="text-gray-700 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="ext-md text-center mt-5 font-extrabold border-b border-black p-5 mb-5">Loading</div>
<div class="flex flex-wrap -m-4">
<div class="p-4 md:w-1/3">
<div class="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
<div class="lg:h-48 bg-gray-400 md:h-36 w-full object-cover object-center"></div>
<div class="p-6">
<h2 class="bg-gray-400 animate-pulse h-4 w-1/4 mb-2"></h2>
<h1 class="w-1/2 mb-4 h-6 animate-pulse bg-gray-500"></h1>
<p class="leading-relaxed mb-3 w-full h-3 animate-pulse bg-gray-400"></p>
<p class="leading-relaxed mb-3 w-2/3 h-3 animate-pulse bg-gray-400"></p>
<p class="leading-relaxed mb-3 w-1/2 h-3 animate-pulse bg-gray-400"></p>
<div class="flex items-center flex-wrap ">
<a class="bg-indigo-300 h-4 animate-pulse mt-2 w-32 inline-flex items-center md:mb-2 lg:mb-0">
</a>
<span class="bg-indigo-300 w-16 mt-2 h-4 animate-pulse mr-3 px-2 inline-flex items-center ml-auto leading-none text-sm pr-5 py-1">
</span>
</div>
</div>
</div>
</div>
<div class="p-4 md:w-1/3">
<div class="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
<div class="lg:h-48 bg-gray-400 md:h-36 w-full object-cover object-center"></div>
<div class="p-6">
<h2 class="bg-gray-400 animate-pulse h-4 w-1/4 mb-2"></h2>
<h1 class="w-1/2 mb-4 h-6 animate-pulse bg-gray-500"></h1>
<p class="leading-relaxed mb-3 w-full h-3 animate-pulse bg-gray-400"></p>
<p class="leading-relaxed mb-3 w-2/3 h-3 animate-pulse bg-gray-400"></p>
<p class="leading-relaxed mb-3 w-1/2 h-3 animate-pulse bg-gray-400"></p>
<div class="flex items-center flex-wrap ">
<a class="bg-indigo-300 h-4 animate-pulse mt-2 w-32 inline-flex items-center md:mb-2 lg:mb-0">
</a>
<span class="bg-indigo-300 w-16 mt-2 h-4 animate-pulse mr-3 px-2 inline-flex items-center ml-auto leading-none text-sm pr-5 py-1">
</span>
</div>
</div>
</div>
</div>
<div class="p-4 md:w-1/3">
<div class="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
<div class="lg:h-48 bg-gray-400 md:h-36 w-full object-cover object-center"></div>
<div class="p-6">
<h2 class="bg-gray-400 animate-pulse h-4 w-1/4 mb-2"></h2>
<h1 class="w-1/2 mb-4 h-6 animate-pulse bg-gray-500"></h1>
<p class="leading-relaxed mb-3 w-full h-3 animate-pulse bg-gray-400"></p>
<p class="leading-relaxed mb-3 w-2/3 h-3 animate-pulse bg-gray-400"></p>
<p class="leading-relaxed mb-3 w-1/2 h-3 animate-pulse bg-gray-400"></p>
<div class="flex items-center flex-wrap ">
<a class="bg-indigo-300 h-4 animate-pulse mt-2 w-32 inline-flex items-center md:mb-2 lg:mb-0">
</a>
<span class="bg-indigo-300 w-16 mt-2 h-4 animate-pulse mr-3 px-2 inline-flex items-center ml-auto leading-none text-sm pr-5 py-1">
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<hr>
<section class="text-gray-700 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="text-md text-center mt-5 font-extrabold border-b border-black p-5 mb-5">After Loading</div>
<div class="flex flex-wrap -m-4">
<div class="p-4 md:w-1/3">
<div class="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
<img class="lg:h-48 md:h-36 w-full object-cover object-center" src="https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1049&q=80" alt="blog">
<div class="p-6">
<h2 class="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">CATEGORY</h2>
<h1 class="title-font text-lg font-medium text-gray-900 mb-3">The Catalyzer</h1>
<p class="leading-relaxed mb-3">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p>
<div class="flex items-center flex-wrap ">
<a class="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0">Learn More
<svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5l7 7-7 7"></path>
</svg>
</a>
<span class="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
<svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>1.2K
</span>
<span class="text-gray-600 inline-flex items-center leading-none text-sm">
<svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
</svg>6
</span>
</div>
</div>
</div>
</div>
<div class="p-4 md:w-1/3">
<div class="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
<img class="lg:h-48 md:h-36 w-full object-cover object-center" src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="blog">
<div class="p-6">
<h2 class="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">CATEGORY</h2>
<h1 class="title-font text-lg font-medium text-gray-900 mb-3">The 400 Blows</h1>
<p class="leading-relaxed mb-3">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p>
<div class="flex items-center flex-wrap">
<a class="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0">Learn More
<svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5l7 7-7 7"></path>
</svg>
</a>
<span class="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
<svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>1.2K
</span>
<span class="text-gray-600 inline-flex items-center leading-none text-sm">
<svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
</svg>6
</span>
</div>
</div>
</div>
</div>
<div class="p-4 md:w-1/3">
<div class="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
<img class="lg:h-48 md:h-36 w-full object-cover object-center" src="https://images.unsplash.com/photo-1593642703055-4b72c180d9b5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="blog">
<div class="p-6">
<h2 class="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">CATEGORY</h2>
<h1 class="title-font text-lg font-medium text-gray-900 mb-3">Shooting Stars</h1>
<p class="leading-relaxed mb-3">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p>
<div class="flex items-center flex-wrap ">
<a class="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0">Learn More
<svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5l7 7-7 7"></path>
</svg>
</a>
<span class="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
<svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>1.2K
</span>
<span class="text-gray-600 inline-flex items-center leading-none text-sm">
<svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
</svg>6
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- skeleton 5 end -->
<!-- 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 -->
<!-- skeleton 7 start -->
<section class="section_divider">
<div>Skeleton 7</div>
</section>
<section class="m-10">
<div class="bg-white w-96 mx-auto rounded-2xl shadow-lg">
<div class="bg-gray-200 h-48 p-3 overflow-hidden animate-pulse">
</div>
<div class="h- p-3">
<div class="grid grid-cols-3 gap-4 mt-2">
<div class="h-8 bg-gray-200 rounded animate-pulse">
</div>
<div class="h-8 bg-gray-200 rounded animate-pulse">
</div>
<div class="h-8 bg-gray-200 rounded animate-pulse">
</div>
<div class="h-8 col-span-2 bg-gray-200 rounded animate-pulse">
</div>
<div class=" h-8 bg-gray-200 rounded animate-pulse">
</div>
<div class="...">
</div>
<div class="col-span-2 ...">
</div>
</div>
</div>
</div>
</section>
<!-- skeleton 7 end -->
<!-- skeleton 8 start -->
<section class="section_divider">
<div>Skeleton 8</div>
</section>
<section class="m-10">
<div class="bg-white w-1/2 mx-auto p-2 sm:p-4 sm:h-64 rounded-2xl shadow-lg flex flex-col sm:flex-row gap-5 select-none ">
<div class="h-52 sm:h-full sm:w-72 rounded-xl bg-gray-200 animate-pulse">
</div>
<div class="flex flex-col flex-1 gap-5 sm:p-2">
<div class="flex flex-1 flex-col gap-3">
<div class="bg-gray-200 w-full animate-pulse h-14 rounded-2xl">
</div>
<div class="bg-gray-200 w-full animate-pulse h-3 rounded-2xl">
</div>
<div class="bg-gray-200 w-full animate-pulse h-3 rounded-2xl">
</div>
<div class="bg-gray-200 w-full animate-pulse h-3 rounded-2xl">
</div>
<div class="bg-gray-200 w-full animate-pulse h-3 rounded-2xl">
</div>
</div>
<div class="mt-auto flex gap-3">
<div class="bg-gray-200 w-20 h-8 animate-pulse rounded-full">
</div>
<div class="bg-gray-200 w-20 h-8 animate-pulse rounded-full">
</div>
<div class="bg-gray-200 w-20 h-8 animate-pulse rounded-full ml-auto">
</div>
</div>
</div>
</div>
</section>
<!-- skeleton 8 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>

4
public/componets/testimonial/17_testimonial.html
View File

@@ -14,12 +14,14 @@
d
</button>
<!-- testimonail 17 start -->
<section class="section_divider">
<div>Testimonial 17</div>
</section>
<section class="bg-indigo-100 dark:bg-gray-800 ">
<div class="w-full h-screen">
<div class="">
<div class="flex flex-col lg:grid lg:gap-4 2xl:gap-6 lg:grid-cols-4 2xl:row-span-2 2xl:pb-8 ml-2 pt-4 px-6">
<!-- Beginning of the component about Daniel Clifford -->
<div class="bg-indigo-600 lg:order-1 lg:row-span-1 2xl:row-span-1 lg:col-span-2 rounded-lg shadow-xl mb-5 lg:mb-0">

2
public/componets/testimonial/testimonial.html
View File

@@ -1529,7 +1529,7 @@
<section class="section_divider">
<div>Testimonial 17</div>
</section>
<section class="bg-indigo-100 dark:bg-gray-800 w-full h-screen p-4">
<section class="bg-indigo-100 dark:bg-gray-800 p-4">
<div class="">
<div class="flex flex-col lg:grid lg:gap-4 2xl:gap-6 lg:grid-cols-4 2xl:row-span-2 2xl:pb-8 ml-2 pt-4 px-6">
<!-- Beginning of the component about Daniel Clifford -->

49
public/template/10_template.html Normal file
View File

@@ -0,0 +1,49 @@
<!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">
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<title>Template 10</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- 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>

49
public/template/11_template.html Normal file
View File

@@ -0,0 +1,49 @@
<!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">
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<title>Template 11</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- 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>

49
public/template/12_template.html Normal file
View File

@@ -0,0 +1,49 @@
<!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">
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<title>Template 12</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- 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>

2
public/template/1.html → public/template/1_template.html
View File

@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landmark</title>
<title>Landmark (template 1) </title>
<!--
For more customization options, we would advise
you to build your TailwindCSS from the source.

2
public/template/2.html → public/template/2_template.html
View File

@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flare - Landing Page</title>
<title>Flare - Landing Page (template 2)</title>
<!--
For more customization options, we would advise
you to build your TailwindCSS from the source.

151
public/template/3_template.html Normal file
View File

@@ -0,0 +1,151 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landmark (template 3)</title>
<!--
For more customization options, we would advise
you to build your TailwindCSS from the source.
https://tailwindcss.com/docs/installation
-->
<link rel="stylesheet" href="./../../dist/tailshape.css">
<!-- Small CSS to Hide elements at 1520px size -->
<style>
@media(max-width:1520px) {
.left-svg {
display: none;
}
}
/* small css for the mobile nav close */
#nav-mobile-btn.close span:first-child {
transform: rotate(45deg);
top: 4px;
position: relative;
background: #a0aec0;
}
#nav-mobile-btn.close span:nth-child(2) {
transform: rotate(-45deg);
margin-top: 0px;
background: #a0aec0;
}
</style>
</head>
<body>
<!-- component -->
<!-- Creaet Blog Portfolio By Joker Banny -->
<header class="max-h-full bg-white p-6 grid">
<!-- Navbar Menu -->
<nav class="w-full grid justify-end">
<ul class="hidden md:flex space-x-8 font-bold text-gray-700">
<li><a href="#">Works</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-gray-700 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</div>
</nav>
<!-- Section Hero -->
<div class="container mx-auto mt-8 md:mt-0 md:space-x-10 md:grid grid-cols-3 justify-center md:py-40">
<div class="grid justify-center items-center order-1 col-span-1">
<img class="lg:h-80 md:h-64 h-40 rounded-full" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde" alt="" />
</div>
<div class="mt-8 md:mt-0 lg:justify-end col-span-2">
<h1 class="text-4xl text-gray-800 text-center md:text-left font-bold mb-6">Hi, I am John, Creative Technologist</h1>
<p class="text-xl text-gray-800 text-center md:text-left">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
<button class="block mt-8 mx-auto md:mx-0 text-2xl py-3 px-6 text-red-50 font-semibold rounded bg-red-400">Download Resume</button>
</div>
</div>
</header>
<!-- Main -->
<div class="md:gap-4 p-6 bg-blue-50 md:grid">
<div class="grid grid-cols-2 justify-between lg:px-40 md:mb-4">
<h1 class="justify-start md:text-left text-2xl">Recent posts</h1>
<p class="hidden md:block text-right text-2xl">View all</p>
</div>
<div class="md:grid grid-cols-2 gap-6 lg:px-40">
<div>
<div class="bg-white p-4">
<div>
<div class="mb-4">
<h1 class="text-2xl font-bold text-gray-700">Making a design system from scratch</h1>
</div>
<div class="">
<span class="block mb-4 text-xl">12 Feb 20 20 | Design, Pattern</span>
<p class="text-lg text-gray-700">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
</div>
</div>
</div>
</div>
<div class="bg-white p-4 md:mt-0 mt-6">
<div>
<div class="mb-4">
<h1 class="text-2xl font-bold text-gray-700">Creating pixel perfect icons in Figma</h1>
<p class="hidden">View all</p>
</div>
<div class="">
<span class="block mb-4 text-xl">12 Feb 20 20 | Design, Pattern</span>
<p class="text-lg text-gray-700">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
</div>
</div>
</div>
</div>
<div class="mt-6 p-4 bg-white px-6">
<div class="border-b pb-6">
<h1 class="mt-2 mb-6 text-center text-xl">Featured works</h1>
<div class="md:grid grid-cols-2 gap-6">
<div>
<img class="md:h-full object-cover" src="https://images.unsplash.com/photo-1602992708529-c9fdb12905c9" alt="" />
</div>
<div>
<h1 class="my-6 text-2xl font-bold text-gray-700">Designing Dashboards</h1>
<span class="text-lg mr-4 py-1 px-4 rounded-full bg-gray-800 text-white">2020</span>
<spnan class="text-lg">Dashboard</spnan>
<p class="mt-6 text-lg text-gray-700">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-white">
<div class="flex mt-20 px-10 items-center justify-around max-md">
<span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 text-gray-800 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" />
</svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 textgray-800e w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2M5 3a2 2 0 00-2 2v1c0 8.284 6.716 15 15 15h1a2 2 0 002-2v-3.28a1 1 0 00-.684-.948l-4.493-1.498a1 1 0 00-1.21.502l-1.13 2.257a11.042 11.042 0 01-5.516-5.517l2.257-1.128a1 1 0 00.502-1.21L9.228 3.683A1 1 0 008.279 3H5z" />
</svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 text-gray-800 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
</svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 text-gray-800 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</span>
</div>
<p class="text-center my-10 text-lg">Copyright ©2020 All rights reserved</p>
</footer>
</body>
</html>

1527
public/template/4_template.html Normal file
View File

File diff suppressed because it is too large Load Diff

514
public/template/5_template.html Normal file
View File

@@ -0,0 +1,514 @@
<!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">
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<link rel="stylesheet" href="./../../../dist/tailshape.css">
<title>Template 5</title>
</head>
<body >
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- header 1 start -->
<nav class="px-2 py-3 bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700">
<div x-data="{ open: false , mobile_Open :false }" class="container flex flex-wrap justify-between items-center mx-auto">
<a href="#" class="flex">
<svg class="mr-3 h-10" width="51" height="70" viewBox="0 0 51 70" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M1 53H27.9022C40.6587 53 51 42.7025 51 30H24.0978C11.3412 30 1 40.2975 1 53Z" fill="#76A9FA"></path><path d="M-0.876544 32.1644L-0.876544 66.411C11.9849 66.411 22.4111 55.9847 22.4111 43.1233L22.4111 8.87674C10.1196 8.98051 0.518714 19.5571 -0.876544 32.1644Z" fill="#A4CAFE"></path><path d="M50 5H23.0978C10.3413 5 0 15.2975 0 28H26.9022C39.6588 28 50 17.7025 50 5Z" fill="#1C64F2"></path></g><defs><clipPath id="clip0"><rect width="51" height="70" fill="white"></rect></clipPath></defs></svg>
<span class="self-center text-lg font-semibold text-gray-900 whitespace-nowrap dark:text-white">FlowBite</span>
</a>
<button data-collapse-toggle="mobile-menu" @click="mobile_Open = ! mobile_Open" type="button" class="inline-flex justify-center items-center ml-3 text-gray-400 rounded-lg md:hidden hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-500" aria-controls="mobile-menu-2" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
<div :class="mobile_Open ? 'block w-full md:block md:w-auto' : 'hidden w-full md:block md:w-auto'" id="mobile-menu">
<ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
<li>
<a href="#" class="block py-2 pr-4 pl-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-white dark:bg-blue-600 md:dark:bg-transparent" aria-current="page">Home</a>
</li>
<li>
<!-- this is the dropdown button -->
<button id="dropdownNavbarLink" @click="open = ! open" data-dropdown-toggle="dropdownNavbar" class="flex justify-between items-center py-2 pr-4 pl-3 w-full font-medium text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-gray-400 dark:hover:text-white dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Dropdown <svg class="ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button>
<div id="dropdownNavbar" x-show="open" class=" absolute z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600">
<ul class="py-1" aria-labelledby="dropdownLargeButton">
<li>
<a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white">Earnings</a>
</li>
</ul>
<div class="py-1">
<a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white">Sign out</a>
</div>
</div>
</li>
<li>
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 dark:hover:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Services</a>
</li>
<li>
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 dark:hover:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Pricing</a>
</li>
<li>
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 dark:hover:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- header 1 end -->
<!-- hero 1 start -->
<section class="text-gray-600 dark:bg-gray-800 body-font">
<div class="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
<img class="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600">
<div class="text-center lg:w-2/3 w-full">
<h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 dark:text-cyan-300">Microdosing synth tattooed vexillologist</h1>
<p class="mb-8 leading-relaxed">
Meggings kinfolk echo park stumptown DIY, kale chips beard jianbing tousled. Chambray dreamcatcher trust fund, kitsch vice godard disrupt ramps hexagon mustache umami snackwave tilde chillwave
ugh. Pour-over meditation PBR&amp;B pickled ennui celiac mlkshk freegan photo booth af fingerstache pitchfork.
</p>
<div class="flex justify-center">
<button class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none dark:hover:bg-cyan-400 dark:hover:text-gray-800 hover:bg-indigo-600 rounded text-lg">Button</button>
<button class="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 dark:bg-cyan-400 rounded dark:hover:bg-indigo-600 dark:hover:text-gray-200 text-lg">Button</button>
</div>
</div>
</div>
</section>
<!-- hero 1 end -->
<!-- feature 1 start -->
<section class="p-24 bg-white dark:bg-gray-900">
<div class="container px-6 py-10 mx-auto">
<h1 class="text-3xl font-semibold text-gray-800 capitalize lg:text-4xl dark:text-white">explore our <br> awesome <span class="underline decoration-blue-500">Components</span></h1>
<p class="mt-4 text-gray-500 xl:mt-6 dark:text-gray-300">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum quam voluptatibus
</p>
<div class="grid grid-cols-1 gap-8 mt-8 xl:mt-12 xl:gap-12 md:grid-cols-2 xl:grid-cols-3">
<div class="p-8 space-y-3 border-2 border-blue-400 dark:border-blue-300 rounded-xl">
<span class="inline-block text-blue-500 dark:text-blue-400">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z" />
</svg>
</span>
<h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">elegant Dark Mode</h1>
<p class="text-gray-500 dark:text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
</p>
<a href="#" class="inline-flex p-2 text-blue-500 capitalize transition-colors duration-200 transform bg-blue-100 rounded-full dark:bg-blue-500 dark:text-white hover:underline hover:text-blue-600 dark:hover:text-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</a>
</div>
<div class="p-8 space-y-3 border-2 border-blue-400 dark:border-blue-300 rounded-xl">
<span class="inline-block text-blue-500 dark:text-blue-400">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
</svg>
</span>
<h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Easy to customiztions</h1>
<p class="text-gray-500 dark:text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
</p>
<a href="#" class="inline-flex p-2 text-blue-500 capitalize transition-colors duration-200 transform bg-blue-100 rounded-full dark:bg-blue-500 dark:text-white hover:underline hover:text-blue-600 dark:hover:text-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</a>
</div>
<div class="p-8 space-y-3 border-2 border-blue-400 dark:border-blue-300 rounded-xl">
<span class="inline-block text-blue-500 dark:text-blue-400">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
</svg>
</span>
<h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Simple & clean designs</h1>
<p class="text-gray-500 dark:text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
</p>
<a href="#" class="inline-flex p-2 text-blue-500 capitalize transition-colors duration-200 transform bg-blue-100 rounded-full dark:bg-blue-500 dark:text-white hover:underline hover:text-blue-600 dark:hover:text-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</a>
</div>
</div>
</div>
</section>
<!-- feature 1 end -->
<!-- pricing 1 start -->
<section class="p-24 dark:bg-gray-800">
<div class="text-center transform scale-75 " >
<div class="xl:p-18 xl:m-auto ">
<div class="grid xl:grid-cols-3">
<div class="z-10 pb-20 mt-20 bg-white dark:bg-gray-800 border-2 rounded-lg shadow-xl xl:p-20 xl:ml-1 hover:shadow-2xl">
<div class="w-2/6 p-4 m-auto mt-12 border-4 border-purple-400 rounded-full xl:mt-0">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 213.485 213.485"
style="enable-background:new 0 0 213.485 213.485;" xml:space="preserve">
<path
d="M213.476,86.779c-0.005,0.081-0.056,0.819-0.231,1.995c-2.921,21.747-13.64,44.973-34.97,44.973
c-25.05,0-62.748-17.839-71.532-22.171c-8.784,4.332-46.482,22.171-71.532,22.171c-21.33,0-32.049-23.226-34.97-44.972
c-0.176-1.177-0.227-1.915-0.232-1.996c-0.142-2.184,1.498-4.077,3.68-4.248c2.165-0.169,4.096,1.444,4.295,3.624
c0.004,0.04,0.055,0.577,0.178,1.494c0.934,6.179,4.835,20.462,20.875,20.462c10.768,0,18.494-6.938,26.674-14.285
c7.712-6.927,15.687-14.089,26.179-14.089c13.162,0,20.803,9.241,24.854,16.792c4.051-7.551,11.692-16.792,24.853-16.792
c10.491,0,18.467,7.162,26.179,14.089c8.181,7.347,15.907,14.285,26.675,14.285c16.04,0,19.94-14.284,20.874-20.463
c0.123-0.917,0.174-1.453,0.178-1.496c0.202-2.179,2.119-3.782,4.298-3.619C211.981,82.706,213.618,84.597,213.476,86.779z" />
</svg>
</div>
<h3 class="mt-8 text-4xl font-bold">Free</h3>
<h3 class="mt-6 mb-6 text-4xl font-semibold text-purple-400">$0 / Month</h3>
<ul class="space-y-6 text-xl">
<li class="dark:hover:text-purple-400 transition-color duration-300">30-Day Trial</li>
<li class="dark:hover:text-purple-400 transition-color duration-300">500GB Bandwidth</li>
<li class="dark:hover:text-purple-400 transition-color duration-300">200H DiskSpaces&#8482;</li>
<li class="dark:hover:text-purple-400 transition-color duration-300">5 Course Submissions</li>
</ul>
<button
class="w-5/6 h-16 mt-12 text-xl font-semibold text-white bg-purple-400 rounded xl:mb-6">Order</button>
</div>
<div
class="z-10 pb-20 mt-20 transform scale-110 bg-white dark:bg-gray-800 border-2 rounded-lg shadow-xl xl:p-20 xl:ml-1 hover:shadow-2xl">
<div class="w-2/6 p-4 m-auto mt-12 border-4 border-purple-400 rounded-full xl:mt-0">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 213.485 213.485"
style="enable-background:new 0 0 213.485 213.485;" xml:space="preserve">
<path
d="M213.476,86.779c-0.005,0.081-0.056,0.819-0.231,1.995c-2.921,21.747-13.64,44.973-34.97,44.973
c-25.05,0-62.748-17.839-71.532-22.171c-8.784,4.332-46.482,22.171-71.532,22.171c-21.33,0-32.049-23.226-34.97-44.972
c-0.176-1.177-0.227-1.915-0.232-1.996c-0.142-2.184,1.498-4.077,3.68-4.248c2.165-0.169,4.096,1.444,4.295,3.624
c0.004,0.04,0.055,0.577,0.178,1.494c0.934,6.179,4.835,20.462,20.875,20.462c10.768,0,18.494-6.938,26.674-14.285
c7.712-6.927,15.687-14.089,26.179-14.089c13.162,0,20.803,9.241,24.854,16.792c4.051-7.551,11.692-16.792,24.853-16.792
c10.491,0,18.467,7.162,26.179,14.089c8.181,7.347,15.907,14.285,26.675,14.285c16.04,0,19.94-14.284,20.874-20.463
c0.123-0.917,0.174-1.453,0.178-1.496c0.202-2.179,2.119-3.782,4.298-3.619C211.981,82.706,213.618,84.597,213.476,86.779z" />
</svg>
</div>
<h3 class="mt-8 text-3xl font-bold">Medium</h3>
<h3 class="mt-6 mb-6 text-4xl font-semibold text-purple-400">$25 / Month</h3>
<ul class="space-y-6 text-xl">
<li class="dark:hover:text-purple-400 transition-color duration-300">Incl. Free package</li>
<li class="dark:hover:text-purple-400 transition-color duration-300">1TB Bandwidth</li>
<li class="dark:hover:text-purple-400 transition-color duration-300">1TB DiskSpaces&#8482;</li>
<li class="dark:hover:text-purple-400 transition-color duration-300">15 Course Submissions</li>
</ul>
<button class="w-5/6 h-16 mt-12 text-xl font-semibold text-white bg-purple-400 rounded xl:mb-6">Order
Now</button>
</div>
<div class="pb-20 mt-20 bg-white dark:bg-gray-800 border-2 rounded-lg shadow-xl xl:p-20 xl:ml-1 hover:shadow-2xl">
<div class="w-2/6 p-4 m-auto mt-12 border-4 border-purple-400 rounded-full xl:mt-0">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 213.485 213.485"
style="enable-background:new 0 0 213.485 213.485;" xml:space="preserve">
<path
d="M213.476,86.779c-0.005,0.081-0.056,0.819-0.231,1.995c-2.921,21.747-13.64,44.973-34.97,44.973
c-25.05,0-62.748-17.839-71.532-22.171c-8.784,4.332-46.482,22.171-71.532,22.171c-21.33,0-32.049-23.226-34.97-44.972
c-0.176-1.177-0.227-1.915-0.232-1.996c-0.142-2.184,1.498-4.077,3.68-4.248c2.165-0.169,4.096,1.444,4.295,3.624
c0.004,0.04,0.055,0.577,0.178,1.494c0.934,6.179,4.835,20.462,20.875,20.462c10.768,0,18.494-6.938,26.674-14.285
c7.712-6.927,15.687-14.089,26.179-14.089c13.162,0,20.803,9.241,24.854,16.792c4.051-7.551,11.692-16.792,24.853-16.792
c10.491,0,18.467,7.162,26.179,14.089c8.181,7.347,15.907,14.285,26.675,14.285c16.04,0,19.94-14.284,20.874-20.463
c0.123-0.917,0.174-1.453,0.178-1.496c0.202-2.179,2.119-3.782,4.298-3.619C211.981,82.706,213.618,84.597,213.476,86.779z" />
</svg>
</div>
<h3 class="mt-8 text-3xl font-bold">Large</h3>
<h3 class="mt-6 mb-6 text-4xl font-semibold text-purple-400 ">$50 / Month</h3>
<ul class="space-y-6 text-xl ">
<li class="dark:hover:text-purple-400 transition-color duration-300">Incl. Medium package</li>
<li class="dark:hover:text-purple-400 transition-color duration-300">Unlimited Bandwidth</li>
<li class="dark:hover:text-purple-400 transition-color duration-300">2.4TB DiskSpaces&#8482;</li>
<li class="dark:hover:text-purple-400 transition-color duration-300">Unlimited Submissions</li>
</ul>
<button
class="w-5/6 h-16 mt-12 text-xl font-semibold text-white bg-purple-400 rounded xl:mb-6">Order</button>
</div>
</div>
</div>
</div>
</section>
<!-- pricing 1 end -->
<!-- testimonial 1 start -->
<section class="text-gray-600 dark:bg-gray-800 ">
<div class="container px-5 py-24 mx-auto">
<h1 class="text-3xl font-medium title-font text-gray-900 dark:text-white mb-12 text-center">Testimonials</h1>
<div class="flex flex-wrap -m-4">
<div class="p-4 md:w-1/2 w-full">
<div class="h-full bg-gray-100 dark:bg-gray-600 p-8 rounded">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="block w-5 h-5 dark:text-white text-gray-400 mb-4" viewBox="0 0 975.036 975.036">
<path d="M925.036 57.197h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.399 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l36 76c11.6 24.399 40.3 35.1 65.1 24.399 66.2-28.6 122.101-64.8 167.7-108.8 55.601-53.7 93.7-114.3 114.3-181.9 20.601-67.6 30.9-159.8 30.9-276.8v-239c0-27.599-22.401-50-50-50zM106.036 913.497c65.4-28.5 121-64.699 166.9-108.6 56.1-53.7 94.4-114.1 115-181.2 20.6-67.1 30.899-159.6 30.899-277.5v-239c0-27.6-22.399-50-50-50h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.4 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l35.9 75.8c11.601 24.399 40.501 35.2 65.301 24.399z"></path>
</svg>
<p class="leading-relaxed mb-6 dark:text-white text-gray-600">Synth chartreuse iPhone lomo cray raw denim brunch everyday carry neutra before they sold out fixie 90's microdosing. Tacos pinterest fanny pack venmo, post-ironic heirloom try-hard pabst authentic iceland.</p>
<a class="inline-flex items-center">
<img alt="testimonial" src="https://dummyimage.com/106x106" class="w-12 h-12 rounded-full flex-shrink-0 object-cover object-center">
<span class="flex-grow flex flex-col pl-4">
<span class="title-font font-medium text-gray-900">Holden Caulfield</span>
<span class="text-gray-500 dark:text-white text-sm">UI DEVELOPER</span>
</span>
</a>
</div>
</div>
<div class="p-4 md:w-1/2 w-full">
<div class="h-full dark:bg-gray-600 bg-gray-100 p-8 rounded">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="block w-5 h-5 text-gray-400 mb-4" viewBox="0 0 975.036 975.036">
<path d="M925.036 57.197h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.399 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l36 76c11.6 24.399 40.3 35.1 65.1 24.399 66.2-28.6 122.101-64.8 167.7-108.8 55.601-53.7 93.7-114.3 114.3-181.9 20.601-67.6 30.9-159.8 30.9-276.8v-239c0-27.599-22.401-50-50-50zM106.036 913.497c65.4-28.5 121-64.699 166.9-108.6 56.1-53.7 94.4-114.1 115-181.2 20.6-67.1 30.899-159.6 30.899-277.5v-239c0-27.6-22.399-50-50-50h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.4 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l35.9 75.8c11.601 24.399 40.501 35.2 65.301 24.399z"></path>
</svg>
<p class="leading-relaxed mb-6 dark:text-white text-gray-600">Synth chartreuse iPhone lomo cray raw denim brunch everyday carry neutra before they sold out fixie 90's microdosing. Tacos pinterest fanny pack venmo, post-ironic heirloom try-hard pabst authentic iceland.</p>
<a class="inline-flex items-center">
<img alt="testimonial" src="https://dummyimage.com/107x107" class="w-12 h-12 rounded-full flex-shrink-0 object-cover object-center">
<span class="flex-grow flex flex-col pl-4">
<span class="title-font font-medium text-gray-900">Alper Kamu</span>
<span class="text-gray-500 dark:text-white text-sm">DESIGNER</span>
</span>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- testimonial 1 end -->
<!-- contact 1 start -->
<section class="py-24 dark:bg-gray-800 dark:text-gray-50">
<div class="grid max-w-6xl grid-cols-1 px-6 mx-auto lg:px-8 md:grid-cols-2 md:divide-x">
<div class="py-6 md:py-0 md:px-6">
<h1 class="text-4xl font-bold">Get in touch</h1>
<p class="pt-2 pb-4">Fill in the form to start a conversation</p>
<div class="space-y-4">
<p class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 mr-2 sm:mr-6">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
</svg>
<span>Fake address, 9999 City</span>
</p>
<p class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 mr-2 sm:mr-6">
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path>
</svg>
<span>123456789</span>
</p>
<p class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 mr-2 sm:mr-6">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
</svg>
<span>contact@business.com</span>
</p>
</div>
</div>
<form novalidate="" class="flex flex-col py-6 space-y-6 md:py-0 md:px-6 ng-untouched ng-pristine ng-valid">
<label class="block">
<span class="mb-1">Full name</span>
<input type="text" placeholder="Leroy Jenkins" class="block w-full rounded-md shadow-sm focus:ring focus:ring-opacity-75 focus:ring-green-400 dark:bg-gray-800">
</label>
<label class="block">
<span class="mb-1">Email address</span>
<input type="email" placeholder="leroy@jenkins.com" class="block w-full rounded-md shadow-sm focus:ring focus:ring-opacity-75 focus:ring-green-400 dark:bg-gray-800">
</label>
<label class="block">
<span class="mb-1">Message</span>
<textarea rows="3" class="block w-full rounded-md focus:ring focus:ring-opacity-75 focus:ring-green-400 dark:bg-gray-800"></textarea>
</label>
<button type="button" class="self-center px-8 py-3 text-lg rounded focus:ring hover:ring focus:ring-opacity-75 dark:bg-green-400 dark:text-gray-900 focus:ring-green-400 hover:ring-green-400">Submit</button>
</form>
</div>
</section>
<!-- contact 1 end -->
<!--footer 2 start-->
<section class="flex items-end w-full bg-white dark:bg-gray-800">
<footer class="w-full text-gray-700 bg-gray-100 dark:bg-gray-800 body-font">
<div
class="container flex flex-col flex-wrap px-5 py-24 mx-auto md:items-center lg:items-start md:flex-row md:flex-no-wrap">
<div class="flex-shrink-0 w-64 mx-auto text-center md:mx-0 md:text-left">
<a class="flex items-center justify-center font-medium text-gray-900 title-font md:justify-start">
<svg class="w-auto h-5 text-gray-900 dark:text-sky-300 fill-current" viewBox="0 0 202 69"
xmlns="http://www.w3.org/2000/svg">
<path
d="M57.44.672s6.656 1.872 6.656 5.72c0 0-1.56 2.6-3.744 6.552 8.424 1.248 16.744 1.248 23.816-1.976-1.352 7.904-12.688 8.008-26.208 6.136-7.696 13.624-19.656 36.192-19.656 42.848 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C56.608 53.088 42.152 69 36.432 69c-4.472 0-8.216-5.928-8.216-10.4 0-6.552 11.752-28.08 20.28-42.952-9.984-1.664-20.176-3.64-27.976-3.848-13.936 0-16.64 3.536-17.576 6.032-.104.312-.52.52-.832.312-3.744-7.072-1.456-14.56 14.144-14.56 9.36 0 22.048 4.576 34.944 7.592C54.736 5.04 57.44.672 57.44.672zm46.124 41.08c1.144-1.456 4.264.728 3.016 2.392C100.236 53.088 85.78 69 80.06 69c-4.576 0-8.32-5.928-8.32-10.4v-.208C67.58 64.32 63.524 69 61.34 69c-4.472 0-8.944-4.992-8.944-11.856 0-10.608 15.704-33.072 24.96-33.072 4.992 0 7.384 2.392 8.528 4.576l2.6-4.576s6.656 1.976 6.656 5.824c0 0-13.312 24.336-13.312 30.056 0 .208 0 .624.52.624 4.472 0 17.888-14.352 21.216-18.824zm-40.56 18.72c2.184 0 11.752-13.312 17.368-22.048l4.16-7.488c-8.008-7.904-27.248 29.536-21.528 29.536zm57.564-38.168c-2.184 0-4.992-2.808-4.992-4.784 0-2.912 5.824-14.872 7.28-14.872 2.6 0 6.136 2.808 6.136 6.344 0 2.08-7.176 12.064-8.424 13.312zm-17.68 46.592c-4.472 0-8.216-5.928-8.216-10.4 0-6.656 16.744-34.528 16.744-34.528s6.552 1.976 6.552 5.824c0 0-13.312 24.336-13.312 30.056 0 .208.104.624.624.624 4.472 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392-6.448 8.944-20.904 24.856-26.624 24.856zM147.244.672s6.656 1.872 6.656 5.72c0 0-25.792 43.784-25.792 53.56 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C146.412 53.088 131.956 69 126.236 69c-4.472 0-8.216-5.928-8.216-10.4 0-10.4 29.224-57.928 29.224-57.928zM169.7 60.16c3.848-2.392 7.904-6.864 10.816-10.92 6.656-9.464 11.544-20.696 10.504-27.352-.312-3.432-.104-4.056 3.12-2.704 5.2 2.392 11.336 8.632 2.184 22.88-5.2 8.008-12.48 15.288-19.344 19.76-2.704 1.768-6.344 3.328-9.984 4.16-.52.416-1.04.728-1.456.936-1.872 1.352-4.264 2.08-7.592 2.08-14.664 0-16.848-12.272-16.848-16.016 0-2.392 3.224-4.68 4.784-3.744.208.104.312.416.312.624 0 2.808 1.872 13.104 9.984 13.104 7.904 0 3.432-18.304 2.288-27.144-1.456 2.288-3.432 4.992-5.616 8.32-2.6 3.744-5.72 1.456-4.784 0 5.824-8.424 9.152-13.832 11.856-18.616 1.248-2.08 3.328-3.328 6.448-3.328 2.704 0 5.824 3.016 6.864 4.784.312.52 0 1.04-.52 1.144a5.44 5.44 0 00-4.368 5.408c0 6.968 2.6 17.16 1.664 24.856l-.312 1.768z"
fill-rule="nonzero" /></svg>
</a>
<p class="mt-2 text-sm text-gray-500 dark:text-gray-300">Design, Code and Ship!</p>
<div class="mt-4">
<span class="inline-flex justify-center mt-2 sm:ml-auto sm:mt-0 sm:justify-start">
<a class="text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="w-5 h-5" viewBox="0 0 24 24">
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
</svg>
</a>
<a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="w-5 h-5" viewBox="0 0 24 24">
<path
d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z">
</path>
</svg>
</a>
<a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
</svg>
</a>
<a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
<svg fill="currentColor" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
<path stroke="none"
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z">
</path>
<circle cx="4" cy="4" r="2" stroke="none"></circle>
</svg>
</a>
</span>
</div>
</div>
<div class="flex flex-wrap flex-grow mt-10 -mb-10 text-center md:pl-20 md:mt-0 md:text-left">
<div class="w-full px-4 lg:w-1/4 md:w-1/2">
<h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font dark:text-sky-300">About</h2>
<nav class="mb-10 list-none">
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Company</a>
</li>
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Careers</a>
</li>
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Blog</a>
</li>
</nav>
</div>
<div class="w-full px-4 lg:w-1/4 md:w-1/2">
<h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 dark:text-sky-300 uppercase title-font">Support</h2>
<nav class="mb-10 list-none">
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Contact Support</a>
</li>
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Help Resources</a>
</li>
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Release Updates</a>
</li>
</nav>
</div>
<div class="w-full px-4 lg:w-1/4 md:w-1/2">
<h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font dark:text-sky-300">Platform
</h2>
<nav class="mb-10 list-none">
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Terms &amp; Privacy</a>
</li>
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Pricing</a>
</li>
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">FAQ</a>
</li>
</nav>
</div>
<div class="w-full px-4 lg:w-1/4 md:w-1/2">
<h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font dark:text-sky-300">Contact</h2>
<nav class="mb-10 list-none">
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Send a Message</a>
</li>
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Request a Quote</a>
</li>
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">+123-456-7890</a>
</li>
</nav>
</div>
</div>
</div>
</footer>
</section>
<!--footer 2 end-->
<!--footer 1 start-->
<footer class="p-4 dark:bg-gray-800 ">
<div class=" mx-5 flex flex-col lg:flex-row items-center ">
<div class="w-full dark:text-gray-300 lg:w-auto lg:mr-auto text-center lg:text-left">© 2019 Dunder Mifflin</div>
<div class="flex justify-center items-center mt-4 lg:mt-0"><img class="w-6 h-6" src="https://tailwind-css-components.appseed.us/placeholders/icons/message.svg" alt=""><img class="w-6 h-6 mx-6" src="https://tailwind-css-components.appseed.us/placeholders/icons/share.svg" alt=""><img class="w-6 h-6" src="https://tailwind-css-components.appseed.us/placeholders/icons/star.svg" alt=""></div>
</div>
</footer>
<!--footer 1 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>

637
public/template/6_template.html Normal file
View File

@@ -0,0 +1,637 @@
<!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">
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<title>Template 6</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- header 2 start -->
<section class="relative w-full px-8 text-gray-700 bg-white dark:bg-gray-800 body-font">
<div class="container flex flex-col flex-wrap items-center justify-between py-5 mx-auto md:flex-row max-w-7xl">
<a href="#_" class="relative z-10 flex items-center w-auto text-2xl font-extrabold leading-none dark:text-gray-400 text-black select-none">WEBSITE.</a>
<nav class="top-0 left-0 z-0 flex items-center justify-center w-full h-full py-5 -ml-0 space-x-5 text-base md:-ml-5 md:py-0 md:absolute">
<a href="#_" class="relative font-medium leading-6 text-gray-600 dark:text-gray-400 dark:hover:text-gray-200 transition duration-150 ease-out hover:text-gray-900" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
<span class="block">Home</span>
<span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
<span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform dark:bg-gray-400 bg-gray-900" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
</span>
</a>
<a href="#_" class="relative font-medium leading-6 dark:text-gray-400 dark:hover:text-gray-200 text-gray-600 transition duration-150 ease-out hover:text-gray-900" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
<span class="block">Features</span>
<span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
<span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform bg-gray-900 dark:bg-gray-400" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
</span>
</a>
<a href="#_" class="relative font-medium leading-6 text-gray-600 dark:text-gray-400 dark:hover:text-gray-200 transition duration-150 ease-out hover:text-gray-900" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
<span class="block">Pricing</span>
<span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
<span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform bg-gray-900 dark:bg-gray-400" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
</span>
</a>
<a href="#_" class="relative font-medium leading-6 text-gray-600 transition duration-150 ease-out hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
<span class="block">Blog</span>
<span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
<span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform bg-gray-900 dark:bg-gray-400" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
</span>
</a>
</nav>
<div class="relative z-10 inline-flex items-center space-x-3 md:ml-5 lg:justify-end">
<a href="#" class="inline-flex items-center justify-center px-4 py-2 text-base font-medium leading-6 text-gray-600 whitespace-no-wrap bg-white border border-gray-200 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:shadow-none">
Sign in
</a>
<span class="inline-flex rounded-md shadow-sm">
<a href="#" class="inline-flex items-center justify-center px-4 py-2 text-base font-medium leading-6 text-white whitespace-no-wrap bg-blue-600 border border-blue-700 rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Sign up
</a>
</span>
</div>
</div>
</section>
<!-- header 2 end -->
<!-- hero 2 start -->
<div class="relative flex flex-col items-center justify-center min-h-screen dark:bg-gray-800 bg-white bg-cover min-w-screen">
<div class="flex flex-col items-center justify-center p-10 mx-auto lg:flex-row lg:max-w-6xl lg:p-0">
<div
class="container relative z-20 flex flex-col w-full px-5 pb-1 pr-12 mb-16 text-2xl text-gray-700 lg:w-1/2 sm:px-0 md:px-10 sm:items-center lg:items-start lg:mb-0">
<h1
class="relative z-20 text-5xl font-extrabold leading-none text-purple-500 xl:text-6xl sm:text-center lg:text-left">
Designed with<br class="md:hidden lg:block"> <span class="text-gray-800">you in mind</span></h1>
<p class="relative z-20 block mt-6 text-base text-gray-500 xl:text-xl sm:text-center lg:text-left">We've
crafted
the ultimate design tool that will help you build the design of your dreams. Built with configuration in
mind,
you can fully customize every aspect.</p>
<div class="relative flex mt-4">
<a href="#_"
class="flex items-center self-start justify-center px-5 py-3 mt-5 text-base font-medium leading-tight text-white transition duration-150 ease-in-out bg-purple-500 border border-transparent rounded-full shadow hover:bg-purple-600 focus:outline-none focus:border-purple-600 focus:shadow-outline-purple md:py-4 md:text-lg xl:text-xl md:px-10">Get
Started</a>
<a href="#_"
class="relative flex items-center self-start justify-center py-3 pl-10 pr-5 mt-5 ml-5 text-base font-medium leading-tight text-gray-400 transition duration-150 ease-in-out bg-gray-100 border-transparent rounded-full shadow-sm md:pl-16 md:pr-10 hover:text-purple-500 focus:outline-none md:py-4 md:text-lg xl:text-xl">
<svg class="absolute left-0 w-6 h-6 ml-3 md:w-10 md:h-10" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
clip-rule="evenodd"></path>
</svg>
<span class="text-purple-500">How It Works</span>
</a>
</div>
</div>
<div class="relative w-full px-5 rounded-lg cursor-pointer md:w-2/3 lg:w-1/2 group xl:px-0">
<div class="absolute top-0 left-0 w-11/12 -mt-20 opacity-50">
<svg class="w-full h-full ml-4 text-purple-100 dark:text-gray-700" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor"
d="M45,-78C58.3,-70.3,69,-58.2,75.2,-44.4C81.3,-30.7,82.9,-15.3,83.5,0.4C84.2,16,83.8,32.1,76.5,43.9C69.2,55.7,55.1,63.3,41.2,69.4C27.3,75.4,13.6,80,-0.7,81.2C-15.1,82.5,-30.1,80.3,-41.2,72.6C-52.2,64.9,-59.2,51.6,-67.1,38.5C-75.1,25.5,-83.9,12.8,-83.8,0C-83.8,-12.7,-74.9,-25.4,-65.8,-36.4C-56.7,-47.4,-47.4,-56.7,-36.4,-65.7C-25.4,-74.7,-12.7,-83.5,1.6,-86.2C15.9,-89,31.8,-85.7,45,-78Z"
transform="translate(100 100)" />
</svg>
</div>
<div class="relative overflow-hidden rounded-md shadow-2xl cursor-pointer group">
<div class="absolute flex items-center justify-center w-full h-full">
<span class="flex items-center justify-center w-20 h-20 bg-purple-500 rounded-full shadow-2xl">
<svg class="w-auto h-8 ml-1 text-white fill-current" viewBox="0 0 52 66"
xmlns="http://www.w3.org/2000/svg">
<path
d="M50 30.7L4.1.6C2.6-.4.8.9.8 2.9v60.3c0 2 1.8 3.3 3.3 2.3L50 35.3c1.5-1 1.5-3.6 0-4.6z"
fill-rule="nonzero" /></svg>
</span>
</div>
<img src="https://images.unsplash.com/photo-1493857671505-72967e2e2760?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&h=1603&q=80"
class="z-10 object-cover w-full h-full">
</div>
</div>
</div>
</div>
<!-- hero 2 end -->
<!-- start cta 2 -->
<section class="flex justify-around pb-24 dark:bg-gray-800">
<div class="p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
</a>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
<a href="#" class="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Read more
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
<div class="p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
</a>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
<a href="#" class="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Read more
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
<div class="p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
</a>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
<a href="#" class="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Read more
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
</section>
<!-- end cta 2 -->
<!-- feature 2 start -->
<section class="bg-white dark:bg-gray-900 p-24">
<div class="container py-10 mx-auto">
<h1 class="text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">explore our <br> awesome <span class="text-blue-500">Components</span></h1>
<div class="grid grid-cols-1 gap-8 mt-8 xl:mt-12 xl:gap-16 md:grid-cols-2 xl:grid-cols-3">
<div class="flex flex-col items-center p-6 space-y-3 text-center bg-gray-100 rounded-xl dark:bg-gray-800">
<span class="inline-block p-3 text-blue-500 bg-blue-100 rounded-full dark:text-white dark:bg-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
</svg>
</span>
<h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Copy & paste components</h1>
<p class="text-gray-500 dark:text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
</p>
<a href="#" class="flex items-center -mx-1 text-sm text-blue-500 capitalize transition-colors duration-200 transform dark:text-blue-400 hover:underline hover:text-blue-600 dark:hover:text-blue-500">
<span class="mx-1">read more</span>
<svg class="w-4 h-4 mx-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
<div class="flex flex-col items-center p-6 space-y-3 text-center bg-gray-100 rounded-xl dark:bg-gray-800">
<span class="inline-block p-3 text-blue-500 bg-blue-100 rounded-full dark:text-white dark:bg-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
</svg>
</span>
<h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Zero Configrations</h1>
<p class="text-gray-500 dark:text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
</p>
<a href="#" class="flex items-center -mx-1 text-sm text-blue-500 capitalize transition-colors duration-200 transform dark:text-blue-400 hover:underline hover:text-blue-600 dark:hover:text-blue-500">
<span class="mx-1">read more</span>
<svg class="w-4 h-4 mx-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
<div class="flex flex-col items-center p-6 space-y-3 text-center bg-gray-100 rounded-xl dark:bg-gray-800">
<span class="inline-block p-3 text-blue-500 bg-blue-100 rounded-full dark:text-white dark:bg-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
</svg>
</span>
<h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Simple & clean designs</h1>
<p class="text-gray-500 dark:text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
</p>
<a href="#" class="flex items-center -mx-1 text-sm text-blue-500 capitalize transition-colors duration-200 transform dark:text-blue-400 hover:underline hover:text-blue-600 dark:hover:text-blue-500">
<span class="mx-1">read more</span>
<svg class="w-4 h-4 mx-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
</div>
</section>
<!-- feature 2 end -->
<!-- pricing 2 start -->
<section x-data="{ toggle: 'basic' }"
class="relative py-24 bg-gray-200 dark:bg-gray-800 min-w-screen animation-fade animation-delay">
<div class="container w-full px-10 mx-auto sm:px-5 ">
<div class="sm:flex ">
<aside class="w-full sm:flex-initial">
<div @click="toggle = 'basic'"
:class="{ 'bg-blue-500 text-white hover:bg-blue-700': toggle === 'basic' }"
class="flex mt-1 text-black bg-white rounded-md hover:text-white hover:bg-gray-700">
<div class="self-center flex-shrink p-5">
<svg x-show="toggle === 'basic'" class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<ellipse style="fill:#32BEA6;" cx="256" cy="256" rx="256" ry="255.832" />
<polygon style="fill:#FFFFFF;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
391.88,166.392 " />
</svg>
<svg x-show="toggle != 'basic'" class="w-8 text-gray-700 stroke-current stroke-2" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;"
xml:space="preserve">
<ellipse style="fill:#FFFFFF;" cx="256" cy="256" rx="256" ry="255.832" />
</svg>
</div>
<div class="flex-grow px-0 py-5 md:px-5">
<div class="text-2xl">Basic</div>
<div class="pt-1 text-sm">Start pack + 3 submissions</div>
</div>
<div class="self-center flex-shrink w-32 px-5 py-5 text-2xl text-center md:px-5">$ 5</div>
</div>
<div @click="toggle = 'silver'"
:class="{ 'bg-blue-500 text-white hover:bg-blue-700': toggle === 'silver' }"
class="flex mt-3 text-black bg-white rounded-md hover:text-white hover:bg-gray-700">
<div class="self-center flex-shrink p-5">
<svg x-show="toggle === 'silver'" class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<ellipse style="fill:#32BEA6;" cx="256" cy="256" rx="256" ry="255.832" />
<polygon style="fill:#FFFFFF;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
391.88,166.392 " />
</svg>
<svg x-show="toggle != 'silver'" class="w-8 text-gray-700 stroke-current stroke-2" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;"
xml:space="preserve">
<ellipse style="fill:#FFFFFF;" cx="256" cy="256" rx="256" ry="255.832" />
</svg>
</div>
<div class="flex-grow px-0 py-5 md:px-5">
<div class="text-2xl">Silver</div>
<div class="pt-1 text-sm text-gray-500">Start pack + 10 submissions</div>
</div>
<div class="self-center flex-shrink w-32 px-5 py-5 text-2xl text-center md:px-5">$ 10</div>
</div>
<div @click="toggle = 'gold'" :class="{ 'bg-blue-500 text-white hover:bg-blue-700': toggle === 'gold' }"
class="flex mt-3 text-black bg-white rounded-md hover:text-white hover:bg-gray-700">
<div class="self-center flex-shrink p-5">
<svg x-show="toggle === 'gold'" class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<ellipse style="fill:#32BEA6;" cx="256" cy="256" rx="256" ry="255.832" />
<polygon style="fill:#FFFFFF;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
391.88,166.392 " />
</svg>
<svg x-show="toggle != 'gold'" class="w-8 text-gray-700 stroke-current stroke-2" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;"
xml:space="preserve">
<ellipse style="fill:#FFFFFF;" cx="256" cy="256" rx="256" ry="255.832" />
</svg>
</div>
<div class="flex-grow px-0 py-5 md:px-5">
<div class="text-2xl">Gold</div>
<div class="pt-1 text-sm text-gray-500">Start pack + 20 submissions</div>
</div>
<div class="self-center flex-shrink w-32 px-5 py-5 text-2xl text-center md:px-5">$ 15</div>
</div>
</aside>
<div x-show="toggle === 'basic'"
class="flex w-full mt-10 bg-white dark:bg-gray-800 rounded-md sm:mt-1 sm:ml-5 sm:flex-initial">
<div class="flex-grow px-8 py-5 dark:text-white dark:border-2 dark:rounded-l-md dark:border-emerald-300">
<div class="text-4xl">
Basic Package
</div>
<div class="mt-0 text-lg text-gray-500">3 Submissions</div>
<div class="flex mt-5 ">
<div class="self-center flex-shrink">
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
391.88,166.392 " />
</svg>
</div>
<div class="self-center flex-grow ml-3">Starter pack</div>
</div>
<div class="flex">
<div class="self-center flex-shrink">
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
391.88,166.392 " />
</svg>
</div>
<div class="self-center flex-grow ml-3">3 Submissions</div>
</div>
<div class="flex">
<div class="self-center flex-shrink">
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
391.88,166.392 " />
</svg>
</div>
<div class="self-center flex-grow ml-3">FREE Ebook</div>
</div>
<div class="flex">
<div class="mt-8">
<a href="#">
<div
class="w-full px-8 py-4 text-center text-white bg-green-500 rounded-md hover:bg-green-800 pointer-cursor">
Choose Package
</div>
</a>
</div>
</div>
</div>
<div class="flex w-64 h-full bg-blue-500 dark:border-l-2 bg-opacity-25 rounded-r md:flex-shrink bg-[url(https://picsum.photos/400/400?grayscale)]"
></div>
</div>
<div x-show="toggle === 'silver'"
class="flex w-full mt-10 bg-white dark:bg-gray-800 rounded-md sm:mt-1 sm:ml-5 sm:flex-initial">
<div class="flex-grow px-8 py-5 dark:text-white">
<div class="text-4xl ">
Silver Package
</div>
<div class="mt-0 text-lg text-gray-500">10 Submissions</div>
<div class="flex mt-5">
<div class="self-center flex-shrink">
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
391.88,166.392 " />
</svg>
</div>
<div class="self-center flex-grow ml-3">Starter pack</div>
</div>
<div class="flex">
<div class="self-center flex-shrink">
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
391.88,166.392 " />
</svg>
</div>
<div class="self-center flex-grow ml-3">10 Submissions</div>
</div>
<div class="flex">
<div class="self-center flex-shrink">
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
391.88,166.392 " />
</svg>
</div>
<div class="self-center flex-grow ml-3">FREE Ebook</div>
</div>
<div class="flex">
<div class="mt-8">
<a href="#">
<div
class="w-full px-8 py-4 text-center text-white bg-green-500 rounded-md hover:bg-green-800 pointer-cursor">
Choose Package
</div>
</a>
</div>
</div>
</div>
<div class="flex w-64 h-full bg-blue-500 dark:border-l-2 dark:border-emerald-300 bg-opacity-25 rounded-r md:flex-shrink"
style="background: url('https://picsum.photos/400/400?grayscale');"></div>
</div>
<div x-show="toggle === 'gold'"
class="flex w-full mt-10 bg-white dark:bg-gray-800 rounded-md sm:mt-1 sm:ml-5 sm:flex-initial">
<div class="flex-grow px-8 py-5 dark:text-white">
<div class="text-4xl">
Gold Package
</div>
<div class="mt-0 text-lg text-gray-500">20 Submissions</div>
<div class="flex mt-5">
<div class="self-center flex-shrink">
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
391.88,166.392 " />
</svg>
</div>
<div class="self-center flex-grow ml-3">Starter pack</div>
</div>
<div class="flex">
<div class="self-center flex-shrink">
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
391.88,166.392 " />
</svg>
</div>
<div class="self-center flex-grow ml-3">20 Submissions</div>
</div>
<div class="flex">
<div class="self-center flex-shrink">
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
391.88,166.392 " />
</svg>
</div>
<div class="self-center flex-grow ml-3">FREE Ebook</div>
</div>
<div class="flex">
<div class="mt-8">
<a href="#">
<div
class="w-full px-8 py-4 text-center text-white bg-green-500 rounded-md hover:bg-green-800 pointer-cursor">
Choose Package
</div>
</a>
</div>
</div>
</div>
<div class="flex w-64 h-full bg-blue-500 bg-opacity-25 dark:border-l-2 dark:border-emerald-300 rounded-r md:flex-shrink"
style="background: url('https://picsum.photos/400/400?grayscale');"></div>
</div>
</div>
</div>
</section>
<!-- pricing 2 end -->
<!--footer 2 start-->
<section class="pt-24 flex items-end w-full bg-white dark:bg-gray-800">
<footer class="w-full text-gray-700 bg-gray-100 dark:bg-gray-800 body-font">
<div
class="container flex flex-col flex-wrap px-5 py-24 mx-auto md:items-center lg:items-start md:flex-row md:flex-no-wrap">
<div class="flex-shrink-0 w-64 mx-auto text-center md:mx-0 md:text-left">
<a class="flex items-center justify-center font-medium text-gray-900 title-font md:justify-start">
<svg class="w-auto h-5 text-gray-900 dark:text-sky-300 fill-current" viewBox="0 0 202 69"
xmlns="http://www.w3.org/2000/svg">
<path
d="M57.44.672s6.656 1.872 6.656 5.72c0 0-1.56 2.6-3.744 6.552 8.424 1.248 16.744 1.248 23.816-1.976-1.352 7.904-12.688 8.008-26.208 6.136-7.696 13.624-19.656 36.192-19.656 42.848 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C56.608 53.088 42.152 69 36.432 69c-4.472 0-8.216-5.928-8.216-10.4 0-6.552 11.752-28.08 20.28-42.952-9.984-1.664-20.176-3.64-27.976-3.848-13.936 0-16.64 3.536-17.576 6.032-.104.312-.52.52-.832.312-3.744-7.072-1.456-14.56 14.144-14.56 9.36 0 22.048 4.576 34.944 7.592C54.736 5.04 57.44.672 57.44.672zm46.124 41.08c1.144-1.456 4.264.728 3.016 2.392C100.236 53.088 85.78 69 80.06 69c-4.576 0-8.32-5.928-8.32-10.4v-.208C67.58 64.32 63.524 69 61.34 69c-4.472 0-8.944-4.992-8.944-11.856 0-10.608 15.704-33.072 24.96-33.072 4.992 0 7.384 2.392 8.528 4.576l2.6-4.576s6.656 1.976 6.656 5.824c0 0-13.312 24.336-13.312 30.056 0 .208 0 .624.52.624 4.472 0 17.888-14.352 21.216-18.824zm-40.56 18.72c2.184 0 11.752-13.312 17.368-22.048l4.16-7.488c-8.008-7.904-27.248 29.536-21.528 29.536zm57.564-38.168c-2.184 0-4.992-2.808-4.992-4.784 0-2.912 5.824-14.872 7.28-14.872 2.6 0 6.136 2.808 6.136 6.344 0 2.08-7.176 12.064-8.424 13.312zm-17.68 46.592c-4.472 0-8.216-5.928-8.216-10.4 0-6.656 16.744-34.528 16.744-34.528s6.552 1.976 6.552 5.824c0 0-13.312 24.336-13.312 30.056 0 .208.104.624.624.624 4.472 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392-6.448 8.944-20.904 24.856-26.624 24.856zM147.244.672s6.656 1.872 6.656 5.72c0 0-25.792 43.784-25.792 53.56 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C146.412 53.088 131.956 69 126.236 69c-4.472 0-8.216-5.928-8.216-10.4 0-10.4 29.224-57.928 29.224-57.928zM169.7 60.16c3.848-2.392 7.904-6.864 10.816-10.92 6.656-9.464 11.544-20.696 10.504-27.352-.312-3.432-.104-4.056 3.12-2.704 5.2 2.392 11.336 8.632 2.184 22.88-5.2 8.008-12.48 15.288-19.344 19.76-2.704 1.768-6.344 3.328-9.984 4.16-.52.416-1.04.728-1.456.936-1.872 1.352-4.264 2.08-7.592 2.08-14.664 0-16.848-12.272-16.848-16.016 0-2.392 3.224-4.68 4.784-3.744.208.104.312.416.312.624 0 2.808 1.872 13.104 9.984 13.104 7.904 0 3.432-18.304 2.288-27.144-1.456 2.288-3.432 4.992-5.616 8.32-2.6 3.744-5.72 1.456-4.784 0 5.824-8.424 9.152-13.832 11.856-18.616 1.248-2.08 3.328-3.328 6.448-3.328 2.704 0 5.824 3.016 6.864 4.784.312.52 0 1.04-.52 1.144a5.44 5.44 0 00-4.368 5.408c0 6.968 2.6 17.16 1.664 24.856l-.312 1.768z"
fill-rule="nonzero" /></svg>
</a>
<p class="mt-2 text-sm text-gray-500 dark:text-gray-300">Design, Code and Ship!</p>
<div class="mt-4">
<span class="inline-flex justify-center mt-2 sm:ml-auto sm:mt-0 sm:justify-start">
<a class="text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="w-5 h-5" viewBox="0 0 24 24">
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
</svg>
</a>
<a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="w-5 h-5" viewBox="0 0 24 24">
<path
d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z">
</path>
</svg>
</a>
<a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
</svg>
</a>
<a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
<svg fill="currentColor" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
<path stroke="none"
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z">
</path>
<circle cx="4" cy="4" r="2" stroke="none"></circle>
</svg>
</a>
</span>
</div>
</div>
<div class="flex flex-wrap flex-grow mt-10 -mb-10 text-center md:pl-20 md:mt-0 md:text-left">
<div class="w-full px-4 lg:w-1/4 md:w-1/2">
<h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font dark:text-sky-300">About</h2>
<nav class="mb-10 list-none">
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Company</a>
</li>
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Careers</a>
</li>
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Blog</a>
</li>
</nav>
</div>
<div class="w-full px-4 lg:w-1/4 md:w-1/2">
<h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 dark:text-sky-300 uppercase title-font">Support</h2>
<nav class="mb-10 list-none">
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Contact Support</a>
</li>
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Help Resources</a>
</li>
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Release Updates</a>
</li>
</nav>
</div>
<div class="w-full px-4 lg:w-1/4 md:w-1/2">
<h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font dark:text-sky-300">Platform
</h2>
<nav class="mb-10 list-none">
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Terms &amp; Privacy</a>
</li>
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Pricing</a>
</li>
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">FAQ</a>
</li>
</nav>
</div>
<div class="w-full px-4 lg:w-1/4 md:w-1/2">
<h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font dark:text-sky-300">Contact</h2>
<nav class="mb-10 list-none">
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Send a Message</a>
</li>
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Request a Quote</a>
</li>
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">+123-456-7890</a>
</li>
</nav>
</div>
</div>
</div>
<div class="bg-gray-300 dark:bg-gray-700">
<div class="container px-5 py-4 mx-auto">
<p class="text-sm text-gray-700 dark:text-white capitalize xl:text-center">© 2020 All rights reserved </p>
</div>
</div>
</footer>
</section>
<!--footer 2 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>

554
public/template/7_template.html Normal file
View File

@@ -0,0 +1,554 @@
<!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">
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<title>Template 7</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- header 3 start -->
<header class="text-gray-600 dark:bg-gray-800 body-font">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
<span class="ml-3 text-xl dark:text-gray-400">Tailblocks</span>
</a>
<nav class="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
<a class="mr-5 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">First Link</a>
<a class="mr-5 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Second Link</a>
<a class="mr-5 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Third Link</a>
<a class="mr-5 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Fourth Link</a>
</nav>
<button class="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
Button
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
</div>
</header>
<!-- header 3 end -->
<!-- hero 3 start -->
<div class="relative flex flex-col items-center justify-center min-h-screen bg-cover "
style="background-image:url('https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80')">
<div class="absolute inset-0 w-full h-full bg-black bg-opacity-75"></div>
<div class="flex flex-col max-w-6xl md:flex-row mx-auto">
<div class="container relative flex flex-col md:w-1/2 px-10 pb-5 pr-12 text-2xl font-hairline text-white">
<h2 class="relative z-20 text-5xl font-extrabold leading-tight text-white">Build a culture<br> that excels
</h2>
<p class="relative z-20 block mt-4 text-xl">We've created the ultimate resource for turning your culture
into a
super-powered productivity machine by encouraging collaboration growth, and incentives!</p>
<div class="flex mt-4">
<a href="#_"
class="flex items-center self-start justify-center px-5 py-3 mt-5 text-base font-medium leading-tight text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-lg shadow hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo md:py-4 md:text-lg md:px-8">Get
Started</a>
<a href="#_"
class="flex items-center self-start justify-center px-5 py-3 mt-5 ml-5 text-base font-medium leading-tight text-indigo-500 transition duration-150 ease-in-out bg-gray-200 border-transparent rounded-lg shadow hover:bg-white focus:outline-none focus:border-gray-100 focus:shadow-outline-gray md:py-4 md:text-lg md:px-8">How
It Works</a>
</div>
</div>
<div class="relative md:w-1/2 overflow-hidden rounded-lg shadow-2xl cursor-pointer group">
<div class="absolute flex items-center justify-center w-full h-full bg-black bg-opacity-25">
<span class="flex items-center justify-center w-20 h-20 bg-white bg-opacity-75 rounded-full">
<svg class="w-auto h-8 ml-1 text-indigo-600 fill-current" viewBox="0 0 52 66"
xmlns="http://www.w3.org/2000/svg">
<path d="M50 30.7L4.1.6C2.6-.4.8.9.8 2.9v60.3c0 2 1.8 3.3 3.3 2.3L50 35.3c1.5-1 1.5-3.6 0-4.6z"
fill-rule="nonzero" /></svg>
</span>
</div>
<img src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3290&q=80"
class="object-cover w-full h-full">
</div>
</div>
</div>
<!-- hero 3 end -->
<!-- accordion 2 start -->
<div class="flex items-center justify-center py-20 transition-height duration-300 from-purple-100 via-red-300 to-indigo-500 bg-gradient-to-br">
<div class='w-full max-w-lg px-10 py-8 mx-auto bg-white rounded-lg shadow-xl'>
<h1 class="text-xl mb-10 text-center">TAILWINDCSS ACCORDION WITH <code>&lt;details&gt; &lt;summary&gt;</code> HTML Tag</h1>
<details class="w-full bg-white border border-blue-500 cursor-pointer mb-3 transition-all duration-700 ">
<summary class="w-full bg-white text-dark flex justify-between px-4 py-3 after:content-['+'] ">Morbi at sagittis velit</summary>
<p class="px-4 py-3">
Nunc posuere dapibus urna quis cursus. Mauris malesuada tincidunt diam vel placerat mi tincidunt ac. Nullam augue urna, venenatis ut blandit eget, auctor vel eros. In ut dolor ante
</p>
</details>
<details class="w-full bg-white border border-blue-500 cursor-pointer mb-3 transition-all duration-700 ">
<summary class="w-full bg-white text-dark flex justify-between px-4 py-3 transition-all duration-700 after:content-['+']">Etiam ut lacus in enim sagittis posuere at a elit</summary>
<p class="px-4 py-3 transition-all duration-700">
Fusce sed laoreet ex. Aenean justo nisl, eleifend eget eleifend sit amet, imperdiet id libero. Suspendisse et tempus leo, et lacinia arcu. Etiam at ante in est efficitur fringilla eleifend nec tellus. Integer sed auctor lectus, nec ullamcorper arcu. Nullam nec eros elit. Nulla tempor massa ut quam elementum dignissim. Sed eu pulvinar est, vel vehicula dolor. Pellentesque in ante vel elit facilisis consectetur eu id felis
</p>
</details>
<details class="w-full bg-white border border-blue-500 cursor-pointer mb-3 transition-all duration-700 ">
<summary class="w-full bg-white text-dark flex justify-between px-4 py-3 transition-all duration-700 after:content-['+']">
Nam auctor fringilla magna id porta
</summary>
<p class="px-4 py-3 transition-all duration-700">
Etiam maximus vitae eros eu vestibulum. Donec posuere, magna non tincidunt dignissim, magna tortor mollis augue, at maximus ante lacus vel tellus. Vestibulum vestibulum consectetur tortor id sagittis. Suspendisse nisi ipsum, pretium a lorem at, laoreet condimentum arcu
</p>
</details>
<!-- THE CSS -->
<style>
details[open] summary::after {
content: "-";
transition: all;
transition-duration: 1s;
}
</style>
</div>
</div>
<!-- accordion 2 end -->
<!-- team 1 start -->
<section class="dark:bg-gray-800 bg-white py-24">
<section class="container p-6 mx-auto ">
<h2 class="text-xl font-medium text-gray-800 capitalize dark:text-white md:text-2xl">Our Team</h2>
<div class="flex items-center justify-center">
<div class="grid gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<div class="w-full max-w-xs text-center">
<img class="object-cover object-center w-full h-48 mx-auto rounded-lg" src="https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=739&q=80" alt="avatar"/>
<div class="mt-2">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Ahmed Omer</h3>
<span class="mt-1 font-medium text-gray-600 dark:text-gray-300">CEO</span>
</div>
</div>
<div class="w-full max-w-xs text-center">
<img class="object-cover object-center w-full h-48 mx-auto rounded-lg" src="https://images.unsplash.com/photo-1516756587022-7891ad56a8cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
<div class="mt-2">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Jane Doe</h3>
<span class="mt-1 font-medium text-gray-600 dark:text-gray-300">Co-founder</span>
</div>
</div>
<div class="w-full max-w-xs text-center">
<img class="object-cover object-center w-full h-48 mx-auto rounded-lg" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=731&q=80" alt="avatar"/>
<div class="mt-2">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Steve Ben</h3>
<span class="mt-1 font-medium text-gray-600 dark:text-gray-300">UI/UX</span>
</div>
</div>
<div class="w-full max-w-xs text-center">
<img class="object-cover object-center w-full h-48 mx-auto rounded-lg" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
<div class="mt-2">
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Patterson Johnson</h3>
<span class="mt-1 font-medium text-gray-600 dark:text-gray-300">Software Engineer</span>
</div>
</div>
</div>
</div>
</section>
</section>
<!-- team 1 end -->
<!-- feature 2 start -->
<section class="bg-white dark:bg-gray-900 py-24">
<div class="container px-6 py-10 mx-auto">
<h1 class="text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">explore our <br> awesome <span class="text-blue-500">Components</span></h1>
<div class="grid grid-cols-1 gap-8 mt-8 xl:mt-12 xl:gap-16 md:grid-cols-2 xl:grid-cols-3">
<div class="flex flex-col items-center p-6 space-y-3 text-center bg-gray-100 rounded-xl dark:bg-gray-800">
<span class="inline-block p-3 text-blue-500 bg-blue-100 rounded-full dark:text-white dark:bg-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
</svg>
</span>
<h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Copy & paste components</h1>
<p class="text-gray-500 dark:text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
</p>
<a href="#" class="flex items-center -mx-1 text-sm text-blue-500 capitalize transition-colors duration-200 transform dark:text-blue-400 hover:underline hover:text-blue-600 dark:hover:text-blue-500">
<span class="mx-1">read more</span>
<svg class="w-4 h-4 mx-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
<div class="flex flex-col items-center p-6 space-y-3 text-center bg-gray-100 rounded-xl dark:bg-gray-800">
<span class="inline-block p-3 text-blue-500 bg-blue-100 rounded-full dark:text-white dark:bg-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
</svg>
</span>
<h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Zero Configrations</h1>
<p class="text-gray-500 dark:text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
</p>
<a href="#" class="flex items-center -mx-1 text-sm text-blue-500 capitalize transition-colors duration-200 transform dark:text-blue-400 hover:underline hover:text-blue-600 dark:hover:text-blue-500">
<span class="mx-1">read more</span>
<svg class="w-4 h-4 mx-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
<div class="flex flex-col items-center p-6 space-y-3 text-center bg-gray-100 rounded-xl dark:bg-gray-800">
<span class="inline-block p-3 text-blue-500 bg-blue-100 rounded-full dark:text-white dark:bg-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
</svg>
</span>
<h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Simple & clean designs</h1>
<p class="text-gray-500 dark:text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
</p>
<a href="#" class="flex items-center -mx-1 text-sm text-blue-500 capitalize transition-colors duration-200 transform dark:text-blue-400 hover:underline hover:text-blue-600 dark:hover:text-blue-500">
<span class="mx-1">read more</span>
<svg class="w-4 h-4 mx-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
</div>
</section>
<!-- feature 2 end -->
<!-- testimonial 3 start -->
<section class="text-gray-600 dark:bg-gray-800 body-font ">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap -m-4">
<div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
<div class="h-full text-center">
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 dark:border-2 dark:border-indigo-500 bg-gray-100" src="https://dummyimage.com/302x302">
<p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
<h2 class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm">HOLDEN CAULFIELD</h2>
<p class="text-gray-500 dark:text-indigo-500">Senior Product Designer</p>
</div>
</div>
<div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
<div class="h-full text-center">
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100 dark:border-2 dark:border-indigo-500" src="https://dummyimage.com/300x300">
<p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
<h2 class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm">ALPER KAMU</h2>
<p class="text-gray-500 dark:text-indigo-500">UI Develeoper</p>
</div>
</div>
<div class="lg:w-1/3 lg:mb-0 p-4">
<div class="h-full text-center">
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100 dark:border-2 dark:border-indigo-500 " src="https://dummyimage.com/305x305">
<p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
<h2 class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm">HENRY LETHAM</h2>
<p class="text-gray-500 dark:text-indigo-500">CTO</p>
</div>
</div>
</div>
</div>
</section>
<!-- testimonial 3 end -->
<!-- card 2 start -->
<section class="flex flex-col md:flex-row justify-between dark:bg-gray-800 dark:text-gray-50 py-24">
<div class=" my-10 mx-auto max-w-xs p-6 rounded-md shadow-md dark:bg-gray-900 dark:text-gray-50">
<img src="https://source.unsplash.com/random/300x300/?1" alt="" class="object-cover object-center w-full rounded-md h-72 dark:bg-gray-500">
<div class="mt-6 mb-2">
<span class="block text-xs font-medium tracking-widest uppercase dark:text-green-400">Quisque</span>
<h2 class="text-xl font-semibold tracking-wide">Nam maximus purus</h2>
</div>
<p class="dark:text-gray-100">Mauris et lorem at elit tristique dignissim et ullamcorper elit. In sed feugiat mi. Etiam ut lacinia dui.</p>
</div>
<div class=" my-10 mx-auto max-w-xs p-6 rounded-md shadow-md dark:bg-gray-900 dark:text-gray-50">
<img src="https://source.unsplash.com/random/300x300/?1" alt="" class="object-cover object-center w-full rounded-md h-72 dark:bg-gray-500">
<div class="mt-6 mb-2">
<span class="block text-xs font-medium tracking-widest uppercase dark:text-green-400">Quisque</span>
<h2 class="text-xl font-semibold tracking-wide">Nam maximus purus</h2>
</div>
<p class="dark:text-gray-100">Mauris et lorem at elit tristique dignissim et ullamcorper elit. In sed feugiat mi. Etiam ut lacinia dui.</p>
</div>
<div class=" my-10 mx-auto max-w-xs p-6 rounded-md shadow-md dark:bg-gray-900 dark:text-gray-50">
<img src="https://source.unsplash.com/random/300x300/?1" alt="" class="object-cover object-center w-full rounded-md h-72 dark:bg-gray-500">
<div class="mt-6 mb-2">
<span class="block text-xs font-medium tracking-widest uppercase dark:text-green-400">Quisque</span>
<h2 class="text-xl font-semibold tracking-wide">Nam maximus purus</h2>
</div>
<p class="dark:text-gray-100">Mauris et lorem at elit tristique dignissim et ullamcorper elit. In sed feugiat mi. Etiam ut lacinia dui.</p>
</div>
</section>
<!-- card 2 end -->
<!-- contact 1 start -->
<section class="py-24 dark:bg-gray-800 dark:text-gray-50">
<div class="grid container grid-cols-1 px-6 mx-auto lg:px-8 md:grid-cols-2 md:divide-x">
<div class="py-6 md:py-0 md:px-6">
<h1 class="text-4xl font-bold">Get in touch</h1>
<p class="pt-2 pb-4">Fill in the form to start a conversation</p>
<div class="space-y-4">
<p class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 mr-2 sm:mr-6">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
</svg>
<span>Fake address, 9999 City</span>
</p>
<p class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 mr-2 sm:mr-6">
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path>
</svg>
<span>123456789</span>
</p>
<p class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 mr-2 sm:mr-6">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
</svg>
<span>contact@business.com</span>
</p>
</div>
</div>
<form novalidate="" class="flex flex-col py-6 space-y-6 md:py-0 md:px-6 ng-untouched ng-pristine ng-valid">
<label class="block">
<span class="mb-1">Full name</span>
<input type="text" placeholder="Leroy Jenkins" class="block w-full rounded-md shadow-sm focus:ring focus:ring-opacity-75 focus:ring-green-400 dark:bg-gray-800">
</label>
<label class="block">
<span class="mb-1">Email address</span>
<input type="email" placeholder="leroy@jenkins.com" class="block w-full rounded-md shadow-sm focus:ring focus:ring-opacity-75 focus:ring-green-400 dark:bg-gray-800">
</label>
<label class="block">
<span class="mb-1">Message</span>
<textarea rows="3" class="block w-full rounded-md focus:ring focus:ring-opacity-75 focus:ring-green-400 dark:bg-gray-800"></textarea>
</label>
<button type="button" class="self-center px-8 py-3 text-lg rounded focus:ring hover:ring focus:ring-opacity-75 dark:bg-green-400 dark:text-gray-900 focus:ring-green-400 hover:ring-green-400">Submit</button>
</form>
</div>
</section>
<!-- contact 1 end -->
<!--footer 3 start -->
<footer class="bg-gray-900">
<div class="container px-4 py-16 mx-auto sm:px-6 lg:px-8">
<div class="lg:flex lg:gap-8">
<div>
<span class="block w-32 h-10 bg-gray-700 rounded-lg"></span>
</div>
<div class="grid grid-cols-2 gap-8 mt-8 lg:mt-0 lg:grid-cols-5 lg:gap-y-16">
<div class="col-span-2">
<div>
<h2 class="text-2xl font-bold text-white">
Get the latest news!
</h2>
<p class="mt-6 text-gray-400">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse non cupiditate quae nam molestias.
</p>
</div>
</div>
<div class="col-span-2 lg:col-span-3 lg:flex lg:items-end">
<form class="w-full text-white">
<label for="email" class="sr-only"> Email </label>
<div class="p-2 border sm:flex sm:items-center border-white/10">
<input class="w-full h-12 p-3 text-sm font-medium tracking-widest placeholder-gray-400 uppercase bg-transparent border-none" type="email" id="email" placeholder="Enter your email">
<button class="w-full h-12 px-6 py-3 mt-1 text-sm font-bold tracking-wide uppercase bg-red-700 sm:ml-4 sm:flex-shrink-0 sm:w-auto sm:mt-0" type="submit">
Sign Up
</button>
</div>
</form>
</div>
<div class="col-span-2 pt-6 border-t sm:col-span-1 border-white/10">
<p class="font-bold text-white"> Services </p>
<nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
<a class="inline-block" href=""> 1on1 Coaching </a>
<a class="inline-block" href=""> Company Review </a>
<a class="inline-block" href=""> Accounts Review </a>
<a class="inline-block" href=""> HR Consulting </a>
<a class="inline-block" href=""> SEO Optimisation </a>
</nav>
</div>
<div class="col-span-2 pt-6 border-t sm:col-span-1 border-white/10">
<p class="font-bold text-white"> Company </p>
<nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
<a class="inline-block" href=""> About </a>
<a class="inline-block" href=""> Meet the Team </a>
<a class="inline-block" href=""> History </a>
<a class="inline-block" href=""> Careers </a>
</nav>
</div>
<div class="col-span-2 pt-6 border-t sm:col-span-1 border-white/10">
<p class="font-bold text-white"> Helpful Links </p>
<nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
<a class="inline-block" href=""> Contact </a>
<a class="inline-block" href=""> FAQs </a>
<a class="inline-block" href=""> Live Chat </a>
</nav>
</div>
<div class="col-span-2 pt-6 border-t sm:col-span-1 border-white/10">
<p class="font-bold text-white"> Legal </p>
<nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
<a class="inline-block" href=""> Accessibility </a>
<a class="inline-block" href=""> Returns Policy </a>
<a class="inline-block" href=""> Refund Policy </a>
<a class="inline-block" href=""> Hiring Statistics </a>
</nav>
</div>
<div class="col-span-2 pt-6 border-t sm:col-span-1 border-white/10">
<p class="font-bold text-white"> Downloads </p>
<nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
<a class="inline-block" href=""> Marketing Calendar </a>
<a class="inline-block" href=""> SEO Infographics </a>
</nav>
</div>
<div class="flex col-span-2 space-x-4 text-gray-500 lg:col-span-5">
<a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
<span class="sr-only"> Facebook </span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
</svg>
</a>
<a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
<span class="sr-only"> Instagram </span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>
</svg>
</a>
<a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
<span class="sr-only"> Twitter </span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
</svg>
</a>
<a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
<span class="sr-only"> GitHub </span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
</svg>
</a>
<a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
<span class="sr-only"> Dribbble </span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="pt-8 mt-12 border-t border-white/10">
<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
<p class="text-xs text-center text-gray-400 lg:text-left">
Copyright © 2022. Company Name. All rights reserved.
</p>
<nav class="flex justify-center space-x-4 text-xs text-gray-400 lg:justify-end">
<a href=""> Terms &amp; Conditions </a>
<a href=""> Privacy Policy </a>
<a href=""> Cookies </a>
</nav>
</div>
</div>
</div>
</footer>
<!--footer 3 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>

49
public/template/8_template.html Normal file
View File

@@ -0,0 +1,49 @@
<!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">
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<title>Template 8</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- 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>

49
public/template/9_template.html Normal file
View File

@@ -0,0 +1,49 @@
<!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">
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<title>Template 9</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- 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>