adding standard layouts
This commit is contained in:
sairaj mote
GitHub
parent
f027a1d73d
commit
2b8ff162bd
347
Layouts/boxes layout/css/main.css
Normal file
347
Layouts/boxes layout/css/main.css
Normal file
@ -0,0 +1,347 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap");
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
html {
|
||||
margin-left: calc(100vw - 100%);
|
||||
}
|
||||
|
||||
body {
|
||||
--accent-color: #303F9F;
|
||||
--text-color: 17, 17, 17;
|
||||
--foreground-color: 255, 255, 255;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
color: rgba(var(--text-color), 1);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body[data-theme="dark"] {
|
||||
--accent-color: #4a5cd3;
|
||||
--foreground-color: 20, 20, 20;
|
||||
--text-color: 238, 238, 238;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1.5rem 0;
|
||||
line-height: 1.7;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
.hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hide-completely {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
fill: none;
|
||||
stroke: rgba(var(--text-color), 0.8);
|
||||
stroke-width: 6;
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: space-evenly;
|
||||
-ms-flex-pack: space-evenly;
|
||||
justify-content: space-evenly;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
border-top: solid 1px rgba(var(--text-color), 0.2);
|
||||
border-right: none;
|
||||
z-index: 3;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
|
||||
#navbar .navbar-item {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0.3em;
|
||||
margin: 0.3em;
|
||||
border-radius: 0.4em;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
font-size: 0.9em;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
letter-spacing: 0.08em;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
#navbar .navbar-item h5 {
|
||||
font-size: 0.6em;
|
||||
margin-top: 0.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#navbar .active {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
#navbar .active .icon {
|
||||
stroke: var(--accent-color);
|
||||
}
|
||||
|
||||
#main_header {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
-ms-grid-columns: auto 1fr;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.6rem 0.6rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
#logo h4 {
|
||||
text-transform: capitalize;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#logo h5 {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#logo #main_logo {
|
||||
height: 1.4rem;
|
||||
width: 1.4rem;
|
||||
fill: rgba(var(--text-color), 1);
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.toggle input[type='checkbox'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle .switch {
|
||||
overflow: hidden;
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
justify-items: center;
|
||||
padding: 0.2rem;
|
||||
min-height: 1.6rem;
|
||||
max-height: 1.6rem;
|
||||
border-radius: 0.5rem;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.toggle .circle {
|
||||
border-radius: 0.5rem;
|
||||
-webkit-transition: -webkit-transform 0.3s;
|
||||
transition: -webkit-transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
transition: transform 0.3s, -webkit-transform 0.3s;
|
||||
fill: rgba(var(--text-color), 0.8);
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
}
|
||||
|
||||
.toggle .circle:first-of-type {
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.toggle .circle line {
|
||||
stroke: rgba(var(--text-color), 0.8);
|
||||
stroke-width: 6;
|
||||
}
|
||||
|
||||
.toggle input:checked ~ .switch .circle {
|
||||
-webkit-transform: translateY(-1.7rem);
|
||||
transform: translateY(-1.7rem);
|
||||
}
|
||||
|
||||
.page {
|
||||
padding: 2rem 0;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.options-tab {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.options-tab .option {
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
border-radius: 0.4rem;
|
||||
padding: 1.5rem;
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
width: 9rem;
|
||||
border: solid 1px rgba(var(--text-color), 0.2);
|
||||
text-transform: capitalize;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.options-tab .option .icon {
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
height: 2.8rem;
|
||||
width: 2.8rem;
|
||||
padding: 0.8rem;
|
||||
border-radius: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
stroke: rgba(var(--text-color), 0.4);
|
||||
}
|
||||
|
||||
.options-tab .option h4 {
|
||||
font-weight: 400;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
#home_page h1 {
|
||||
margin-top: 3vw;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#home_page p {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
#home_page h2 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
body {
|
||||
padding: 1rem 6vw;
|
||||
margin-left: 6rem;
|
||||
}
|
||||
p {
|
||||
max-width: 40rem;
|
||||
}
|
||||
#navbar {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
right: auto;
|
||||
width: 6rem;
|
||||
border-top: none;
|
||||
border-right: solid 1px rgba(var(--text-color), 0.2);
|
||||
}
|
||||
#navbar .navbar-item {
|
||||
width: auto;
|
||||
padding: 1.4em 0;
|
||||
margin: 0.6em;
|
||||
}
|
||||
#navbar .navbar-item .icon {
|
||||
height: 1.4rem;
|
||||
width: 1.4rem;
|
||||
}
|
||||
#navbar .navbar-item h5 {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
#navbar .navbar-item:hover .icon {
|
||||
stroke: rgba(var(--text-color), 1);
|
||||
}
|
||||
#navbar .navbar-item:hover h5 {
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
#navbar .navbar-item.active:hover .icon {
|
||||
stroke: var(--accent-color);
|
||||
}
|
||||
#navbar .navbar-item.active:hover h5 {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
9
Layouts/boxes layout/css/main.css.map
Normal file
9
Layouts/boxes layout/css/main.css.map
Normal file
File diff suppressed because one or more lines are too long
272
Layouts/boxes layout/css/main.scss
Normal file
272
Layouts/boxes layout/css/main.scss
Normal file
@ -0,0 +1,272 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap');
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
:root{
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
html{
|
||||
margin-left: calc(100vw - 100%);
|
||||
}
|
||||
body{
|
||||
--accent-color: #303F9F;
|
||||
--text-color: 17, 17, 17;
|
||||
--foreground-color: 255, 255, 255;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
color: rgba(var(--text-color), 1);
|
||||
font-size: 16px;
|
||||
}
|
||||
body[data-theme="dark"]{
|
||||
--accent-color: #4a5cd3;
|
||||
--foreground-color: 20, 20, 20;
|
||||
--text-color: 238, 238, 238;
|
||||
}
|
||||
h1, h2, h3, h4, h5{
|
||||
font-family: 'Poppins', sans-serif;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
h1{
|
||||
font-size: 3rem;
|
||||
}
|
||||
h2{
|
||||
font-size: 2rem;
|
||||
}
|
||||
h3{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
h4{
|
||||
font-size: 1rem;
|
||||
}
|
||||
h5{
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
p{
|
||||
margin: 1.5rem 0;
|
||||
line-height: 1.7;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.hide{
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hide-completely{
|
||||
display: none !important;
|
||||
}
|
||||
.icon{
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
fill: none;
|
||||
stroke: rgba(var(--text-color), 0.8);
|
||||
stroke-width: 6;
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
#navbar{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
border-top: solid 1px rgba(var(--text-color), 0.2);
|
||||
border-right: none;
|
||||
z-index: 3;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
.navbar-item{
|
||||
position: relative;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0.3em;
|
||||
margin: 0.3em;
|
||||
border-radius: 0.4em;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
font-size: 0.9em;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
letter-spacing: 0.08em;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
h5{
|
||||
font-size: 0.6em;
|
||||
margin-top: 0.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.active{
|
||||
color: var(--accent-color);
|
||||
.icon{
|
||||
stroke: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
#main_header{
|
||||
display: flex;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
#logo{
|
||||
display: grid;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.6rem 0.6rem;
|
||||
margin-right: 1rem;
|
||||
h4{
|
||||
text-transform: capitalize;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
h5{
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
#main_logo{
|
||||
height: 1.4rem;
|
||||
width: 1.4rem;
|
||||
fill: rgba(var(--text-color), 1);
|
||||
stroke: none;
|
||||
}
|
||||
}
|
||||
.toggle{
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
padding: 0;
|
||||
input[type='checkbox']{
|
||||
display: none;
|
||||
}
|
||||
.switch{
|
||||
overflow: hidden;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-items: center;
|
||||
padding: 0.2rem;
|
||||
min-height: 1.6rem;
|
||||
max-height: 1.6rem;
|
||||
border-radius: 0.5rem;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
.circle{
|
||||
border-radius: 0.5rem;
|
||||
transition: transform 0.3s;
|
||||
&:first-of-type{
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
fill: rgba(var(--text-color), 0.8);
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
line{
|
||||
stroke: rgba(var(--text-color), 0.8);
|
||||
stroke-width: 6;
|
||||
}
|
||||
}
|
||||
input:checked ~ .switch .circle{
|
||||
transform: translateY(-1.7rem);
|
||||
}
|
||||
}
|
||||
.page{
|
||||
padding: 2rem 0;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
.options-tab{
|
||||
display: flex;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
.option{
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
border-radius: 0.4rem;
|
||||
padding: 1.5rem;
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
width: 9rem;
|
||||
border: solid 1px rgba(var(--text-color), 0.2);
|
||||
text-transform: capitalize;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
.icon{
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
height: 2.8rem;
|
||||
width: 2.8rem;
|
||||
padding: 0.8rem;
|
||||
border-radius: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
stroke: rgba(var(--text-color), 0.4);
|
||||
}
|
||||
h4{
|
||||
font-weight: 400;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
#home_page{
|
||||
h1{
|
||||
margin-top: 3vw;
|
||||
font-weight: 600;
|
||||
}
|
||||
p{
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
h2{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 640px){
|
||||
body{
|
||||
padding: 1rem 6vw;
|
||||
margin-left: 6rem;
|
||||
}
|
||||
p{
|
||||
max-width: 40rem;
|
||||
}
|
||||
#navbar{
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
right: auto;
|
||||
width: 6rem;
|
||||
border-top: none;
|
||||
border-right: solid 1px rgba(var(--text-color), 0.2);
|
||||
.navbar-item{
|
||||
width: auto;
|
||||
padding: 1.4em 0;
|
||||
margin: 0.6em;
|
||||
.icon{
|
||||
height: 1.4rem;
|
||||
width: 1.4rem;
|
||||
}
|
||||
h5{
|
||||
font-size: 0.8em;
|
||||
}
|
||||
&:hover{
|
||||
.icon{
|
||||
stroke: rgba(var(--text-color), 1);
|
||||
}
|
||||
h5{
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
}
|
||||
&.active:hover{
|
||||
.icon{
|
||||
stroke: var(--accent-color);
|
||||
}
|
||||
h5{
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
136
Layouts/boxes layout/index.html
Normal file
136
Layouts/boxes layout/index.html
Normal file
@ -0,0 +1,136 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
|
||||
<body data-theme="light">
|
||||
<header id="main_header" class="flex">
|
||||
<div id="logo">
|
||||
<svg id="main_logo" viewBox="0 0 27.25 32">
|
||||
<title>RanchiMall</title>
|
||||
<path
|
||||
d="M27.14,30.86c-.74-2.48-3-4.36-8.25-6.94a20,20,0,0,1-4.2-2.49,6,6,0,0,1-1.25-1.67,4,4,0,0,1,0-2.26c.37-1.08.79-1.57,3.89-4.55a11.66,11.66,0,0,0,3.34-4.67,6.54,6.54,0,0,0,.05-2.82C20,3.6,18.58,2,16.16.49c-.89-.56-1.29-.64-1.3-.24a3,3,0,0,1-.3.72l-.3.55L13.42.94C13,.62,12.4.26,12.19.15c-.4-.2-.73-.18-.72.05a9.39,9.39,0,0,1-.61,1.33s-.14,0-.27-.13C8.76.09,8-.27,8,.23A11.73,11.73,0,0,1,6.76,2.6C4.81,5.87,2.83,7.49.77,7.49c-.89,0-.88,0-.61,1,.22.85.33.92,1.09.69A5.29,5.29,0,0,0,3,8.33c.23-.17.45-.29.49-.26a2,2,0,0,1,.22.63A1.31,1.31,0,0,0,4,9.34a5.62,5.62,0,0,0,2.27-.87L7,8l.13.55c.19.74.32.82,1,.65a7.06,7.06,0,0,0,3.46-2.47l.6-.71-.06.64c-.17,1.63-1.3,3.42-3.39,5.42L6.73,14c-3.21,3.06-3,5.59.6,8a46.77,46.77,0,0,0,4.6,2.41c.28.13,1,.52,1.59.87,3.31,2,4.95,3.92,4.95,5.93a2.49,2.49,0,0,0,.07.77h0c.09.09,0,.1.9-.14a2.61,2.61,0,0,0,.83-.32,3.69,3.69,0,0,0-.55-1.83A11.14,11.14,0,0,0,17,26.81a35.7,35.7,0,0,0-5.1-2.91C9.37,22.64,8.38,22,7.52,21.17a3.53,3.53,0,0,1-1.18-2.48c0-1.38.71-2.58,2.5-4.23,2.84-2.6,3.92-3.91,4.67-5.65a3.64,3.64,0,0,0,.42-2A3.37,3.37,0,0,0,13.61,5l-.32-.74.29-.48c.17-.27.37-.63.46-.8l.15-.3.44.64a5.92,5.92,0,0,1,1,2.81,5.86,5.86,0,0,1-.42,1.94c0,.12-.12.3-.15.4a9.49,9.49,0,0,1-.67,1.1,28,28,0,0,1-4,4.29C8.62,15.49,8.05,16.44,8,17.78a3.28,3.28,0,0,0,1.11,2.76c.95,1,2.07,1.74,5.25,3.32,3.64,1.82,5.22,2.9,6.41,4.38A4.78,4.78,0,0,1,21.94,31a3.21,3.21,0,0,0,.14.92,1.06,1.06,0,0,0,.43-.05l.83-.22.46-.12-.06-.46c-.21-1.53-1.62-3.25-3.94-4.8a37.57,37.57,0,0,0-5.22-2.82A13.36,13.36,0,0,1,11,21.19a3.36,3.36,0,0,1-.8-4.19c.41-.85.83-1.31,3.77-4.15,2.39-2.31,3.43-4.13,3.43-6a5.85,5.85,0,0,0-2.08-4.29c-.23-.21-.44-.43-.65-.65A2.5,2.5,0,0,1,15.27.69a10.6,10.6,0,0,1,2.91,2.78A4.16,4.16,0,0,1,19,6.16a4.91,4.91,0,0,1-.87,3c-.71,1.22-1.26,1.82-4.27,4.67a9.47,9.47,0,0,0-2.07,2.6,2.76,2.76,0,0,0-.33,1.54,2.76,2.76,0,0,0,.29,1.47c.57,1.21,2.23,2.55,4.65,3.73a32.41,32.41,0,0,1,5.82,3.24c2.16,1.6,3.2,3.16,3.2,4.8a1.94,1.94,0,0,0,.09.76,4.54,4.54,0,0,0,1.66-.4C27.29,31.42,27.29,31.37,27.14,30.86ZM6.1,7h0a3.77,3.77,0,0,1-1.46.45L4,7.51l.68-.83a25.09,25.09,0,0,0,3-4.82A12,12,0,0,1,8.28.76c.11-.12.77.32,1.53,1l.63.58-.57.84A10.34,10.34,0,0,1,6.1,7Zm5.71-1.78A9.77,9.77,0,0,1,9.24,7.18h0a5.25,5.25,0,0,1-1.17.28l-.58,0,.65-.78a21.29,21.29,0,0,0,2.1-3.12c.22-.41.42-.76.44-.79s.5.43.9,1.24L12,5ZM13.41,3a2.84,2.84,0,0,1-.45.64,11,11,0,0,1-.9-.91l-.84-.9.19-.45c.34-.79.39-.8,1-.31A9.4,9.4,0,0,1,13.8,2.33q-.18.34-.39.69Z" />
|
||||
</svg>
|
||||
<span>
|
||||
<h5>RanchiMall</h5>
|
||||
<h4>App Name</h4>
|
||||
</span>
|
||||
</div>
|
||||
<label class="toggle" title="Change theme">
|
||||
<input type="checkbox" name="theme toggle" id="theme_toggle">
|
||||
<div class="switch">
|
||||
<svg class="circle" viewBox="0 0 64 64">
|
||||
<title>dark theme</title>
|
||||
<path
|
||||
d="M48.25,45.45A27.26,27.26,0,0,1,20.82,18.37,26.75,26.75,0,0,1,27.47.71a31.71,31.71,0,0,0-27,31.2,31.8,31.8,0,0,0,32,31.59A32,32,0,0,0,63.12,41.12,27.59,27.59,0,0,1,48.25,45.45Z"
|
||||
transform="translate(0 0)" />
|
||||
</svg>
|
||||
<svg class="circle" viewBox="0 0 64 64">
|
||||
<title>light theme</title>
|
||||
<circle cx="32" cy="32" r="13.9" />
|
||||
<line x1="32" y1="6.86" x2="32" />
|
||||
<line x1="32" y1="64" x2="32" y2="57.14" />
|
||||
<line x1="57.14" y1="32" x2="64" y2="32" />
|
||||
<line y1="32" x2="6.86" y2="32" />
|
||||
<line x1="49.78" y1="14.22" x2="54.63" y2="9.37" />
|
||||
<line x1="9.37" y1="54.63" x2="14.22" y2="49.78" />
|
||||
<line x1="49.78" y1="49.78" x2="54.63" y2="54.63" />
|
||||
<line x1="9.37" y1="9.37" x2="14.22" y2="14.22" />
|
||||
</svg>
|
||||
</div>
|
||||
</label>
|
||||
</header>
|
||||
<nav id="navbar">
|
||||
<div class="navbar-item active" onclick="showPage(this, 'home_page')">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
<path
|
||||
d="M24.77,44.15H40.06V63.5H53.4V36h5.66a3.38,3.38,0,0,0,2.53-5.68l-6.73-7.16V11.26H46.48v3L34.53,1.59a3.49,3.49,0,0,0-5.06,0L2.41,30.35A3.38,3.38,0,0,0,4.94,36H10.6V63.5H24.77" />
|
||||
</svg>
|
||||
<h5>Home</h5>
|
||||
</div>
|
||||
<div class="navbar-item" onclick="showPage(this, 'profile_page')">
|
||||
<svg class="icon" viewBox="0 0 49.54 61.12">
|
||||
<path
|
||||
d="M49.34,19.94c7.73,0,13.26,5.26,13.26,14S58.18,50.14,49.71,50.08,36.82,42.66,36.82,33.93s5.53-14,13.26-14"
|
||||
transform="translate(-25.23 -20)" />
|
||||
<path
|
||||
d="M43.83,52c-2.34,4.38-9.77,6.64-15.31,9.06-2.29,1-4.11,13-1.53,13a46.06,46.06,0,0,0,23.51,6,40.48,40.48,0,0,0,22.51-6c2.58,0,.76-12-1.53-13-5.54-2.42-13-4.68-15.31-9.06"
|
||||
transform="translate(-25.23 -19.44)" />
|
||||
</svg>
|
||||
<h5>User</h5>
|
||||
</div>
|
||||
</nav>
|
||||
<main>
|
||||
<section class="page" id="home_page">
|
||||
<h1>Heading</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi excepturi eius voluptate quod quasi
|
||||
dolore, quisquam, voluptatem repellendus sapiente consectetur similique ducimus dicta magni harum,
|
||||
perspiciatis unde debitis? Eveniet, temporibus!
|
||||
</p>
|
||||
|
||||
<h3>Options</h3>
|
||||
|
||||
<div class="options-tab">
|
||||
<div class="option">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
<title>transfer</title>
|
||||
<polyline
|
||||
points="17.04 35.97 14.57 33.5 40.15 7.9 32.75 0.5 55.52 0.5 55.52 23.28 48.12 15.87 23.86 40.14 15.88 48.13 8.48 40.72 8.48 63.5 31.25 63.5 23.85 56.1 49.43 30.5 46.96 28.03" />
|
||||
</svg>
|
||||
<h4>Option</h4>
|
||||
</div>
|
||||
<div class="option">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
<title>transfer</title>
|
||||
<polyline
|
||||
points="17.04 35.97 14.57 33.5 40.15 7.9 32.75 0.5 55.52 0.5 55.52 23.28 48.12 15.87 23.86 40.14 15.88 48.13 8.48 40.72 8.48 63.5 31.25 63.5 23.85 56.1 49.43 30.5 46.96 28.03" />
|
||||
</svg>
|
||||
<h4>Option</h4>
|
||||
</div>
|
||||
<div class="option">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
<title>transfer</title>
|
||||
<polyline
|
||||
points="17.04 35.97 14.57 33.5 40.15 7.9 32.75 0.5 55.52 0.5 55.52 23.28 48.12 15.87 23.86 40.14 15.88 48.13 8.48 40.72 8.48 63.5 31.25 63.5 23.85 56.1 49.43 30.5 46.96 28.03" />
|
||||
</svg>
|
||||
<h4>Option</h4>
|
||||
</div>
|
||||
<div class="option">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
<title>transfer</title>
|
||||
<polyline
|
||||
points="17.04 35.97 14.57 33.5 40.15 7.9 32.75 0.5 55.52 0.5 55.52 23.28 48.12 15.87 23.86 40.14 15.88 48.13 8.48 40.72 8.48 63.5 31.25 63.5 23.85 56.1 49.43 30.5 46.96 28.03" />
|
||||
</svg>
|
||||
<h4>Option</h4>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="profile_page" class="page hide-completely">
|
||||
<h2>User Settings</h2>
|
||||
</section>
|
||||
</main>
|
||||
<script id="helper_functions" src="js/helper.js"></script>
|
||||
<script src="js/components.js"></script>
|
||||
<script id="UI_functions">
|
||||
let allPages = document.querySelectorAll('.page'),
|
||||
allTabs = document.querySelectorAll('.navbar-item');
|
||||
function showPage(btn, page) {
|
||||
allPages.forEach((page) => {
|
||||
page.classList.add('hide-completely')
|
||||
})
|
||||
allTabs.forEach((tab) => {
|
||||
tab.classList.remove('active')
|
||||
})
|
||||
document.getElementById(page).classList.remove('hide-completely')
|
||||
btn.classList.add('active')
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
2918
Layouts/boxes layout/js/components.js
Normal file
2918
Layouts/boxes layout/js/components.js
Normal file
File diff suppressed because it is too large
Load Diff
133
Layouts/boxes layout/js/helper.js
Normal file
133
Layouts/boxes layout/js/helper.js
Normal file
@ -0,0 +1,133 @@
|
||||
if (!navigator.onLine)
|
||||
notify('There seems to be a problem connecting to the internet.', 'error', 'fixed', true)
|
||||
window.addEventListener('offline', () => {
|
||||
notify('There seems to be a problem connecting to the internet.', 'error', 'fixed', true)
|
||||
})
|
||||
window.addEventListener('online', () => {
|
||||
notify('We are back online.', '', '', true)
|
||||
})
|
||||
let themeToggler = document.getElementById("theme_toggle")
|
||||
if (localStorage.theme === "dark") {
|
||||
darkTheme()
|
||||
themeToggler.checked = true;
|
||||
} else {
|
||||
lightTheme()
|
||||
themeToggler.checked = false;
|
||||
}
|
||||
|
||||
function lightTheme() {
|
||||
document.body.setAttribute("data-theme", "light");
|
||||
}
|
||||
|
||||
function darkTheme() {
|
||||
document.body.setAttribute("data-theme", "dark");
|
||||
}
|
||||
themeToggler.addEventListener("change", () => {
|
||||
if (themeToggler.checked) {
|
||||
darkTheme()
|
||||
localStorage.setItem("theme", "dark");
|
||||
} else {
|
||||
lightTheme()
|
||||
localStorage.setItem("theme", "light");
|
||||
}
|
||||
})
|
||||
|
||||
// function required for popups or modals to appear
|
||||
class Stack {
|
||||
constructor() {
|
||||
this.items = [];
|
||||
}
|
||||
push(element) {
|
||||
this.items.push(element);
|
||||
}
|
||||
pop() {
|
||||
if (this.items.length == 0)
|
||||
return "Underflow";
|
||||
return this.items.pop();
|
||||
}
|
||||
peek(index) {
|
||||
let newIndex = index ? index : 1
|
||||
return this.items[this.items.length - index];
|
||||
}
|
||||
}
|
||||
let popupStack = new Stack(),
|
||||
zIndex = 10;
|
||||
function showPopup(popup, permission) {
|
||||
let thisPopup = document.getElementById(popup);
|
||||
document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)
|
||||
popupStack.push({ thisPopup, permission })
|
||||
thisPopup.show(permission, popupStack)
|
||||
zIndex++;
|
||||
thisPopup.setAttribute('style', `z-index: ${zIndex}`)
|
||||
return thisPopup;
|
||||
}
|
||||
function setAttributes(el, attrs) {
|
||||
for (var key in attrs) {
|
||||
el.setAttribute(key, attrs[key]);
|
||||
}
|
||||
}
|
||||
// displays a popup for asking permission. Use this instead of JS confirm
|
||||
let confirmation = function (message) {
|
||||
return new Promise(resolve => {
|
||||
let popup = document.getElementById('confirmation');
|
||||
showPopup('confirmation')
|
||||
popup.querySelector('#confirm_message').textContent = message;
|
||||
popup.querySelector('.submit-btn').onclick = () => {
|
||||
hidePopup()
|
||||
resolve(true);
|
||||
}
|
||||
popup.querySelector('.cancel-btn').onclick = () => {
|
||||
hidePopup()
|
||||
resolve(false);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// displays a popup for asking user input. Use this instead of JS prompt
|
||||
let askPrompt = function (message, defaultVal) {
|
||||
return new Promise(resolve => {
|
||||
let popup = document.getElementById('prompt'),
|
||||
input = popup.querySelector('input');
|
||||
if (defaultVal)
|
||||
input.value = defaultVal;
|
||||
showPopup('prompt')
|
||||
input.focus()
|
||||
input.addEventListener('keyup', e => {
|
||||
if (e.key === 'Enter') {
|
||||
resolve(input.value);
|
||||
hidePopup()
|
||||
}
|
||||
})
|
||||
popup.querySelector('#prompt_message').textContent = message;
|
||||
popup.querySelector('.submit-btn').onclick = () => {
|
||||
hidePopup()
|
||||
resolve(input.value);
|
||||
}
|
||||
popup.querySelector('.cancel-btn').onclick = () => {
|
||||
hidePopup()
|
||||
resolve(null);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function formatedTime(time) {
|
||||
let timeFrag = new Date(parseInt(time)).toString().split(' '),
|
||||
day = timeFrag[0],
|
||||
month = timeFrag[1],
|
||||
date = timeFrag[2],
|
||||
year = timeFrag[3],
|
||||
hours = timeFrag[4].slice(0, timeFrag[4].lastIndexOf(':')),
|
||||
finalTime = '';
|
||||
parseInt(hours.split(':')[0]) > 12 ? finalTime = 'PM' : finalTime = 'AM'
|
||||
return `${hours} ${finalTime} ${day} ${date} ${month} ${year}`
|
||||
}
|
||||
|
||||
function copyToClipboard(parent) {
|
||||
let toast = document.getElementById('textCopied'),
|
||||
textToCopy = parent.querySelector('.copy').textContent;
|
||||
navigator.clipboard.writeText(textToCopy)
|
||||
toast.classList.remove('hide');
|
||||
setTimeout(() => {
|
||||
toast.classList.add('hide');
|
||||
}, 2000)
|
||||
}
|
||||
240
Layouts/many sections layout/css/main.css
Normal file
240
Layouts/many sections layout/css/main.css
Normal file
@ -0,0 +1,240 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap");
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
--accent-color: #303F9F;
|
||||
--text-color: 17, 17, 17;
|
||||
--foreground-color: 255, 255, 255;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
color: rgba(var(--text-color), 1);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body[data-theme="dark"] {
|
||||
--foreground-color: 20, 20, 20;
|
||||
--text-color: 238, 238, 238;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 1.5rem;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1.5rem 0;
|
||||
line-height: 1.7;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
.hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hide-completely {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
fill: none;
|
||||
stroke: rgba(var(--text-color), 0.8);
|
||||
stroke-width: 6;
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.toggle input[type='checkbox'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle .switch {
|
||||
overflow: hidden;
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
justify-items: center;
|
||||
padding: 0.2rem;
|
||||
min-height: 1.6rem;
|
||||
max-height: 1.6rem;
|
||||
border-radius: 0.5rem;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.toggle .circle {
|
||||
border-radius: 0.5rem;
|
||||
-webkit-transition: -webkit-transform 0.3s;
|
||||
transition: -webkit-transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
transition: transform 0.3s, -webkit-transform 0.3s;
|
||||
fill: rgba(var(--text-color), 0.8);
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
}
|
||||
|
||||
.toggle .circle:first-of-type {
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.toggle .circle line {
|
||||
stroke: rgba(var(--text-color), 0.8);
|
||||
stroke-width: 6;
|
||||
}
|
||||
|
||||
.toggle input:checked ~ .switch .circle {
|
||||
-webkit-transform: translateY(-1.7rem);
|
||||
transform: translateY(-1.7rem);
|
||||
}
|
||||
|
||||
#navbar {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
padding: 1.5rem 2rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
border-bottom: solid 1px rgba(var(--text-color), 0.16);
|
||||
-webkit-box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.06);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#logo {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
-ms-grid-columns: auto 1fr;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.6rem 0.6rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
#logo h4 {
|
||||
text-transform: capitalize;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#logo h5 {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#logo #main_logo {
|
||||
height: 1.4rem;
|
||||
width: 1.4rem;
|
||||
fill: rgba(var(--text-color), 1);
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.section h3 + p {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.section:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1.5rem;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
min-width: 20rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-right: 1.5rem;
|
||||
border: solid 1px rgba(var(--text-color), 0.2);
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
sm-menu {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
main {
|
||||
margin: 1.5rem 4vw;
|
||||
}
|
||||
p {
|
||||
max-width: 40rem;
|
||||
}
|
||||
}
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
9
Layouts/many sections layout/css/main.css.map
Normal file
9
Layouts/many sections layout/css/main.css.map
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "AAAA,OAAO,CAAC,oHAAI;AACZ,AAAA,CAAC,CAAA;EACG,UAAU,EAAE,UAAU;EACtB,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CAAC;EACT,WAAW,EAAE,oBAAoB;CACpC;;AACD,AAAA,KAAK,CAAA;EACD,eAAe,EAAE,MAAM;CAC1B;;AACD,AAAA,IAAI,CAAA;EACA,cAAc,CAAA,QAAC;EACf,YAAY,CAAA,WAAC;EACb,kBAAkB,CAAA,cAAC;EACnB,UAAU,EAAE,gCAAgC;EAC5C,KAAK,EAAE,0BAA0B;EACjC,SAAS,EAAE,IAAI;CAClB;;AACD,AAAA,IAAI,CAAA,AAAA,UAAC,CAAW,MAAM,AAAjB,EAAkB;EACnB,kBAAkB,CAAA,WAAC;EACnB,YAAY,CAAA,cAAC;CAChB;;AACD,AAAA,IAAI,CAAA;EACA,MAAM,EAAE,MAAM;CACjB;;AACD,AAAA,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAA;EACd,WAAW,EAAE,qBAAqB;EAClC,cAAc,EAAE,UAAU;CAC7B;;AACD,AAAA,EAAE,CAAA;EACE,SAAS,EAAE,IAAI;CAClB;;AACD,AAAA,EAAE,CAAA;EACE,SAAS,EAAE,IAAI;CAClB;;AACD,AAAA,EAAE,CAAA;EACE,SAAS,EAAE,MAAM;CACpB;;AACD,AAAA,EAAE,CAAA;EACE,SAAS,EAAE,IAAI;CAClB;;AACD,AAAA,EAAE,CAAA;EACE,SAAS,EAAE,MAAM;CACpB;;AACD,AAAA,CAAC,CAAA;EACG,MAAM,EAAE,QAAQ;EAChB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,4BAA4B;CACtC;;AACD,AAAA,KAAK,CAAA;EACD,OAAO,EAAE,CAAC;EACV,cAAc,EAAE,IAAI;CACvB;;AACD,AAAA,gBAAgB,CAAA;EACZ,OAAO,EAAE,eAAe;CAC3B;;AACD,AAAA,KAAK,CAAA;EACD,OAAO,EAAE,IAAI;CAChB;;AACD,AAAA,KAAK,CAAA;EACD,MAAM,EAAE,MAAM;EACd,KAAK,EAAE,MAAM;EACb,IAAI,EAAE,IAAI;EACV,MAAM,EAAE,4BAA4B;EACpC,YAAY,EAAE,CAAC;EACf,QAAQ,EAAE,OAAO;EACjB,cAAc,EAAE,KAAK;EACrB,eAAe,EAAE,KAAK;CACzB;;AACD,AAAA,OAAO,CAAA;EACH,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,OAAO;EACf,OAAO,EAAE,CAAC;EACV,OAAO,EAAE,CAAC;CAoCb;;AAxCD,AAKI,OALG,CAKH,KAAK,CAAA,AAAA,IAAC,CAAK,UAAU,AAAf,EAAgB;EAClB,OAAO,EAAE,IAAI;CAChB;;AAPL,AAQI,OARG,CAQH,OAAO,CAAA;EACH,QAAQ,EAAE,MAAM;EAChB,OAAO,EAAE,WAAW;EACpB,cAAc,EAAE,MAAM;EACtB,aAAa,EAAE,MAAM;EACrB,OAAO,EAAE,MAAM;EACf,UAAU,EAAE,MAAM;EAClB,UAAU,EAAE,MAAM;EAClB,aAAa,EAAE,MAAM;EACrB,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,CAAC;CACZ;;AAnBL,AAoBI,OApBG,CAoBH,OAAO,CAAA;EACH,aAAa,EAAE,MAAM;EACrB,UAAU,EAAE,cAAc;EAI1B,IAAI,EAAE,4BAA4B;EAClC,QAAQ,EAAE,OAAO;EACjB,cAAc,EAAE,KAAK;EACrB,eAAe,EAAE,KAAK;EACtB,MAAM,EAAE,MAAM;EACd,KAAK,EAAE,MAAM;CAKhB;;AApCL,AAuBQ,OAvBD,CAoBH,OAAO,AAGF,cAAc,CAAA;EACX,aAAa,EAAE,MAAM;CACxB;;AAzBT,AAgCQ,OAhCD,CAoBH,OAAO,CAYH,IAAI,CAAA;EACA,MAAM,EAAE,4BAA4B;EACpC,YAAY,EAAE,CAAC;CAClB;;AAnCT,AAqCI,OArCG,CAqCH,KAAK,AAAA,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAA;EAC3B,SAAS,EAAE,mBAAmB;CACjC;;AAEL,AAAA,OAAO,CAAA;EACH,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,QAAQ,EAAE,MAAM;EAChB,OAAO,EAAE,WAAW;EACpB,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,CAAC;EACR,GAAG,EAAE,CAAC;EACN,UAAU,EAAE,gCAAgC;EAC5C,aAAa,EAAE,KAAK,CAAC,GAAG,CAAC,6BAA6B;EACtD,UAAU,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,mBAAmB;EAC/C,OAAO,EAAE,CAAC;CACb;;AACD,AAAA,KAAK,CAAA;EACD,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,KAAK,EAAE,IAAI;EACX,qBAAqB,EAAE,QAAQ;EAC/B,GAAG,EAAE,aAAa;EAClB,YAAY,EAAE,IAAI;CAgBrB;;AAtBD,AAOI,KAPC,CAOD,EAAE,CAAA;EACE,cAAc,EAAE,UAAU;EAC1B,SAAS,EAAE,MAAM;EACjB,WAAW,EAAE,GAAG;CACnB;;AAXL,AAYI,KAZC,CAYD,EAAE,CAAA;EACE,WAAW,EAAE,oBAAoB;EACjC,WAAW,EAAE,GAAG;CACnB;;AAfL,AAgBI,KAhBC,CAgBD,UAAU,CAAA;EACN,MAAM,EAAE,MAAM;EACd,KAAK,EAAE,MAAM;EACb,IAAI,EAAE,0BAA0B;EAChC,MAAM,EAAE,IAAI;CACf;;AAEL,AAAA,QAAQ,CAAA;EACJ,UAAU,EAAE,IAAI;CAOnB;;AARD,AAEI,QAFI,CAEJ,EAAE,GAAG,CAAC,CAAA;EACF,UAAU,EAAE,IAAI;CACnB;;AAJL,AAKI,QALI,AAKH,cAAc,CAAA;EACX,UAAU,EAAE,CAAC;CAChB;;AAEL,AAAA,KAAK,CAAA;EACD,OAAO,EAAE,MAAM;EACf,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,SAAS,EAAE,KAAK;EAChB,aAAa,EAAE,MAAM;EACrB,YAAY,EAAE,MAAM;EACpB,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,4BAA4B;CAIjD;;AAXD,AAQI,KARC,CAQD,EAAE,CAAA;EACE,WAAW,EAAE,GAAG;CACnB;;AAEL,AAAA,OAAO,CAAA;EACH,WAAW,EAAE,IAAI;CACpB;;AACD,MAAM,MAAM,MAAM,MAAM,SAAS,EAAE,KAAK;EACpC,AAAA,IAAI,CAAA;IACA,MAAM,EAAE,UAAU;GACrB;EACD,AAAA,CAAC,CAAA;IACG,SAAS,EAAE,KAAK;GACnB",
|
||||
"sources": [
|
||||
"main.scss"
|
||||
],
|
||||
"names": [],
|
||||
"file": "main.css"
|
||||
}
|
||||
178
Layouts/many sections layout/css/main.scss
Normal file
178
Layouts/many sections layout/css/main.scss
Normal file
@ -0,0 +1,178 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap');
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
:root{
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
body{
|
||||
--accent-color: #303F9F;
|
||||
--text-color: 17, 17, 17;
|
||||
--foreground-color: 255, 255, 255;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
color: rgba(var(--text-color), 1);
|
||||
font-size: 16px;
|
||||
}
|
||||
body[data-theme="dark"]{
|
||||
--foreground-color: 20, 20, 20;
|
||||
--text-color: 238, 238, 238;
|
||||
}
|
||||
main{
|
||||
margin: 1.5rem;
|
||||
}
|
||||
h1, h2, h3, h4, h5{
|
||||
font-family: 'Poppins', sans-serif;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
h1{
|
||||
font-size: 3rem;
|
||||
}
|
||||
h2{
|
||||
font-size: 2rem;
|
||||
}
|
||||
h3{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
h4{
|
||||
font-size: 1rem;
|
||||
}
|
||||
h5{
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
p{
|
||||
margin: 1.5rem 0;
|
||||
line-height: 1.7;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.hide{
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hide-completely{
|
||||
display: none !important;
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
.icon{
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
fill: none;
|
||||
stroke: rgba(var(--text-color), 0.8);
|
||||
stroke-width: 6;
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
.toggle{
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
padding: 0;
|
||||
input[type='checkbox']{
|
||||
display: none;
|
||||
}
|
||||
.switch{
|
||||
overflow: hidden;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-items: center;
|
||||
padding: 0.2rem;
|
||||
min-height: 1.6rem;
|
||||
max-height: 1.6rem;
|
||||
border-radius: 0.5rem;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
.circle{
|
||||
border-radius: 0.5rem;
|
||||
transition: transform 0.3s;
|
||||
&:first-of-type{
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
fill: rgba(var(--text-color), 0.8);
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
line{
|
||||
stroke: rgba(var(--text-color), 0.8);
|
||||
stroke-width: 6;
|
||||
}
|
||||
}
|
||||
input:checked ~ .switch .circle{
|
||||
transform: translateY(-1.7rem);
|
||||
}
|
||||
}
|
||||
#navbar{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
padding: 1.5rem 2rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
border-bottom: solid 1px rgba(var(--text-color), 0.16);
|
||||
box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.06);
|
||||
z-index: 3;
|
||||
}
|
||||
#logo{
|
||||
display: grid;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.6rem 0.6rem;
|
||||
margin-right: 1rem;
|
||||
h4{
|
||||
text-transform: capitalize;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
h5{
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
#main_logo{
|
||||
height: 1.4rem;
|
||||
width: 1.4rem;
|
||||
fill: rgba(var(--text-color), 1);
|
||||
stroke: none;
|
||||
}
|
||||
}
|
||||
.section{
|
||||
margin-top: 3rem;
|
||||
h3 + p{
|
||||
margin-top: 1rem;
|
||||
}
|
||||
&:first-of-type{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.card{
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 20rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-right: 1.5rem;
|
||||
border: solid 1px rgba(var(--text-color), 0.2);
|
||||
h3{
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
sm-menu{
|
||||
margin-left: auto;
|
||||
}
|
||||
@media only screen and (min-width: 640px){
|
||||
main{
|
||||
margin: 1.5rem 4vw;
|
||||
}
|
||||
p{
|
||||
max-width: 40rem;
|
||||
}
|
||||
}
|
||||
186
Layouts/many sections layout/index.html
Normal file
186
Layouts/many sections layout/index.html
Normal file
@ -0,0 +1,186 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
|
||||
<body data-theme="light">
|
||||
<nav id="navbar">
|
||||
<div id="logo">
|
||||
<svg id="main_logo" viewBox="0 0 27.25 32">
|
||||
<title>RanchiMall</title>
|
||||
<path
|
||||
d="M27.14,30.86c-.74-2.48-3-4.36-8.25-6.94a20,20,0,0,1-4.2-2.49,6,6,0,0,1-1.25-1.67,4,4,0,0,1,0-2.26c.37-1.08.79-1.57,3.89-4.55a11.66,11.66,0,0,0,3.34-4.67,6.54,6.54,0,0,0,.05-2.82C20,3.6,18.58,2,16.16.49c-.89-.56-1.29-.64-1.3-.24a3,3,0,0,1-.3.72l-.3.55L13.42.94C13,.62,12.4.26,12.19.15c-.4-.2-.73-.18-.72.05a9.39,9.39,0,0,1-.61,1.33s-.14,0-.27-.13C8.76.09,8-.27,8,.23A11.73,11.73,0,0,1,6.76,2.6C4.81,5.87,2.83,7.49.77,7.49c-.89,0-.88,0-.61,1,.22.85.33.92,1.09.69A5.29,5.29,0,0,0,3,8.33c.23-.17.45-.29.49-.26a2,2,0,0,1,.22.63A1.31,1.31,0,0,0,4,9.34a5.62,5.62,0,0,0,2.27-.87L7,8l.13.55c.19.74.32.82,1,.65a7.06,7.06,0,0,0,3.46-2.47l.6-.71-.06.64c-.17,1.63-1.3,3.42-3.39,5.42L6.73,14c-3.21,3.06-3,5.59.6,8a46.77,46.77,0,0,0,4.6,2.41c.28.13,1,.52,1.59.87,3.31,2,4.95,3.92,4.95,5.93a2.49,2.49,0,0,0,.07.77h0c.09.09,0,.1.9-.14a2.61,2.61,0,0,0,.83-.32,3.69,3.69,0,0,0-.55-1.83A11.14,11.14,0,0,0,17,26.81a35.7,35.7,0,0,0-5.1-2.91C9.37,22.64,8.38,22,7.52,21.17a3.53,3.53,0,0,1-1.18-2.48c0-1.38.71-2.58,2.5-4.23,2.84-2.6,3.92-3.91,4.67-5.65a3.64,3.64,0,0,0,.42-2A3.37,3.37,0,0,0,13.61,5l-.32-.74.29-.48c.17-.27.37-.63.46-.8l.15-.3.44.64a5.92,5.92,0,0,1,1,2.81,5.86,5.86,0,0,1-.42,1.94c0,.12-.12.3-.15.4a9.49,9.49,0,0,1-.67,1.1,28,28,0,0,1-4,4.29C8.62,15.49,8.05,16.44,8,17.78a3.28,3.28,0,0,0,1.11,2.76c.95,1,2.07,1.74,5.25,3.32,3.64,1.82,5.22,2.9,6.41,4.38A4.78,4.78,0,0,1,21.94,31a3.21,3.21,0,0,0,.14.92,1.06,1.06,0,0,0,.43-.05l.83-.22.46-.12-.06-.46c-.21-1.53-1.62-3.25-3.94-4.8a37.57,37.57,0,0,0-5.22-2.82A13.36,13.36,0,0,1,11,21.19a3.36,3.36,0,0,1-.8-4.19c.41-.85.83-1.31,3.77-4.15,2.39-2.31,3.43-4.13,3.43-6a5.85,5.85,0,0,0-2.08-4.29c-.23-.21-.44-.43-.65-.65A2.5,2.5,0,0,1,15.27.69a10.6,10.6,0,0,1,2.91,2.78A4.16,4.16,0,0,1,19,6.16a4.91,4.91,0,0,1-.87,3c-.71,1.22-1.26,1.82-4.27,4.67a9.47,9.47,0,0,0-2.07,2.6,2.76,2.76,0,0,0-.33,1.54,2.76,2.76,0,0,0,.29,1.47c.57,1.21,2.23,2.55,4.65,3.73a32.41,32.41,0,0,1,5.82,3.24c2.16,1.6,3.2,3.16,3.2,4.8a1.94,1.94,0,0,0,.09.76,4.54,4.54,0,0,0,1.66-.4C27.29,31.42,27.29,31.37,27.14,30.86ZM6.1,7h0a3.77,3.77,0,0,1-1.46.45L4,7.51l.68-.83a25.09,25.09,0,0,0,3-4.82A12,12,0,0,1,8.28.76c.11-.12.77.32,1.53,1l.63.58-.57.84A10.34,10.34,0,0,1,6.1,7Zm5.71-1.78A9.77,9.77,0,0,1,9.24,7.18h0a5.25,5.25,0,0,1-1.17.28l-.58,0,.65-.78a21.29,21.29,0,0,0,2.1-3.12c.22-.41.42-.76.44-.79s.5.43.9,1.24L12,5ZM13.41,3a2.84,2.84,0,0,1-.45.64,11,11,0,0,1-.9-.91l-.84-.9.19-.45c.34-.79.39-.8,1-.31A9.4,9.4,0,0,1,13.8,2.33q-.18.34-.39.69Z" />
|
||||
</svg>
|
||||
<span>
|
||||
<h5>RanchiMall</h5>
|
||||
<h4>App name</h4>
|
||||
</span>
|
||||
</div>
|
||||
<sm-input placeholder="search" oninput="console.log(this.value)"></sm-input>
|
||||
<label class="toggle" title="Change theme">
|
||||
<input type="checkbox" name="theme toggle" id="theme_toggle">
|
||||
<div class="switch">
|
||||
<svg class="circle" viewBox="0 0 64 64">
|
||||
<title>dark theme</title>
|
||||
<path
|
||||
d="M48.25,45.45A27.26,27.26,0,0,1,20.82,18.37,26.75,26.75,0,0,1,27.47.71a31.71,31.71,0,0,0-27,31.2,31.8,31.8,0,0,0,32,31.59A32,32,0,0,0,63.12,41.12,27.59,27.59,0,0,1,48.25,45.45Z"
|
||||
transform="translate(0 0)" />
|
||||
</svg>
|
||||
<svg class="circle" viewBox="0 0 64 64">
|
||||
<title>light theme</title>
|
||||
<circle cx="32" cy="32" r="13.9" />
|
||||
<line x1="32" y1="6.86" x2="32" />
|
||||
<line x1="32" y1="64" x2="32" y2="57.14" />
|
||||
<line x1="57.14" y1="32" x2="64" y2="32" />
|
||||
<line y1="32" x2="6.86" y2="32" />
|
||||
<line x1="49.78" y1="14.22" x2="54.63" y2="9.37" />
|
||||
<line x1="9.37" y1="54.63" x2="14.22" y2="49.78" />
|
||||
<line x1="49.78" y1="49.78" x2="54.63" y2="54.63" />
|
||||
<line x1="9.37" y1="9.37" x2="14.22" y2="14.22" />
|
||||
</svg>
|
||||
</div>
|
||||
</label>
|
||||
</nav>
|
||||
<main>
|
||||
<section class="section">
|
||||
<div class="flex">
|
||||
<h3>Section Heading</h3>
|
||||
<sm-menu set-context="true">
|
||||
<sm-menu-option>first option</sm-menu-option>
|
||||
<sm-menu-option>second option</sm-menu-option>
|
||||
<sm-menu-option>third option</sm-menu-option>
|
||||
</sm-menu>
|
||||
</div>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
</p>
|
||||
<sm-carousel>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
</sm-carousel>
|
||||
</section>
|
||||
<section class="section">
|
||||
<div class="flex">
|
||||
<h3>Section Heading</h3>
|
||||
<sm-menu set-context="true">
|
||||
<sm-menu-option>first option</sm-menu-option>
|
||||
<sm-menu-option>second option</sm-menu-option>
|
||||
<sm-menu-option>third option</sm-menu-option>
|
||||
</sm-menu>
|
||||
</div>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
</p>
|
||||
<sm-carousel>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
</sm-carousel>
|
||||
</section>
|
||||
<section class="section">
|
||||
<div class="flex">
|
||||
<h3>Section Heading</h3>
|
||||
<sm-menu set-context="true">
|
||||
<sm-menu-option>first option</sm-menu-option>
|
||||
<sm-menu-option>second option</sm-menu-option>
|
||||
<sm-menu-option>third option</sm-menu-option>
|
||||
</sm-menu>
|
||||
</div>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
</p>
|
||||
<sm-carousel>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
</sm-carousel>
|
||||
</section>
|
||||
</main>
|
||||
<script id="helper_functions" src="js/helper.js"></script>
|
||||
<script src="js/components.js"></script>
|
||||
<script id="UI_functions">
|
||||
let allPages = document.querySelectorAll('.page'),
|
||||
allTabs = document.querySelectorAll('.navbar-item');
|
||||
function showPage(btn, page) {
|
||||
allPages.forEach((page) => {
|
||||
page.classList.add('hide-completely')
|
||||
})
|
||||
allTabs.forEach((tab) => {
|
||||
tab.classList.remove('active')
|
||||
})
|
||||
document.getElementById(page).classList.remove('hide-completely')
|
||||
btn.classList.add('active')
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
2918
Layouts/many sections layout/js/components.js
Normal file
2918
Layouts/many sections layout/js/components.js
Normal file
File diff suppressed because it is too large
Load Diff
133
Layouts/many sections layout/js/helper.js
Normal file
133
Layouts/many sections layout/js/helper.js
Normal file
@ -0,0 +1,133 @@
|
||||
if (!navigator.onLine)
|
||||
notify('There seems to be a problem connecting to the internet.', 'error', 'fixed', true)
|
||||
window.addEventListener('offline', () => {
|
||||
notify('There seems to be a problem connecting to the internet.', 'error', 'fixed', true)
|
||||
})
|
||||
window.addEventListener('online', () => {
|
||||
notify('We are back online.', '', '', true)
|
||||
})
|
||||
let themeToggler = document.getElementById("theme_toggle")
|
||||
if (localStorage.theme === "dark") {
|
||||
darkTheme()
|
||||
themeToggler.checked = true;
|
||||
} else {
|
||||
lightTheme()
|
||||
themeToggler.checked = false;
|
||||
}
|
||||
|
||||
function lightTheme() {
|
||||
document.body.setAttribute("data-theme", "light");
|
||||
}
|
||||
|
||||
function darkTheme() {
|
||||
document.body.setAttribute("data-theme", "dark");
|
||||
}
|
||||
themeToggler.addEventListener("change", () => {
|
||||
if (themeToggler.checked) {
|
||||
darkTheme()
|
||||
localStorage.setItem("theme", "dark");
|
||||
} else {
|
||||
lightTheme()
|
||||
localStorage.setItem("theme", "light");
|
||||
}
|
||||
})
|
||||
|
||||
// function required for popups or modals to appear
|
||||
class Stack {
|
||||
constructor() {
|
||||
this.items = [];
|
||||
}
|
||||
push(element) {
|
||||
this.items.push(element);
|
||||
}
|
||||
pop() {
|
||||
if (this.items.length == 0)
|
||||
return "Underflow";
|
||||
return this.items.pop();
|
||||
}
|
||||
peek(index) {
|
||||
let newIndex = index ? index : 1
|
||||
return this.items[this.items.length - index];
|
||||
}
|
||||
}
|
||||
let popupStack = new Stack(),
|
||||
zIndex = 10;
|
||||
function showPopup(popup, permission) {
|
||||
let thisPopup = document.getElementById(popup);
|
||||
document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)
|
||||
popupStack.push({ thisPopup, permission })
|
||||
thisPopup.show(permission, popupStack)
|
||||
zIndex++;
|
||||
thisPopup.setAttribute('style', `z-index: ${zIndex}`)
|
||||
return thisPopup;
|
||||
}
|
||||
function setAttributes(el, attrs) {
|
||||
for (var key in attrs) {
|
||||
el.setAttribute(key, attrs[key]);
|
||||
}
|
||||
}
|
||||
// displays a popup for asking permission. Use this instead of JS confirm
|
||||
let confirmation = function (message) {
|
||||
return new Promise(resolve => {
|
||||
let popup = document.getElementById('confirmation');
|
||||
showPopup('confirmation')
|
||||
popup.querySelector('#confirm_message').textContent = message;
|
||||
popup.querySelector('.submit-btn').onclick = () => {
|
||||
hidePopup()
|
||||
resolve(true);
|
||||
}
|
||||
popup.querySelector('.cancel-btn').onclick = () => {
|
||||
hidePopup()
|
||||
resolve(false);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// displays a popup for asking user input. Use this instead of JS prompt
|
||||
let askPrompt = function (message, defaultVal) {
|
||||
return new Promise(resolve => {
|
||||
let popup = document.getElementById('prompt'),
|
||||
input = popup.querySelector('input');
|
||||
if (defaultVal)
|
||||
input.value = defaultVal;
|
||||
showPopup('prompt')
|
||||
input.focus()
|
||||
input.addEventListener('keyup', e => {
|
||||
if (e.key === 'Enter') {
|
||||
resolve(input.value);
|
||||
hidePopup()
|
||||
}
|
||||
})
|
||||
popup.querySelector('#prompt_message').textContent = message;
|
||||
popup.querySelector('.submit-btn').onclick = () => {
|
||||
hidePopup()
|
||||
resolve(input.value);
|
||||
}
|
||||
popup.querySelector('.cancel-btn').onclick = () => {
|
||||
hidePopup()
|
||||
resolve(null);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function formatedTime(time) {
|
||||
let timeFrag = new Date(parseInt(time)).toString().split(' '),
|
||||
day = timeFrag[0],
|
||||
month = timeFrag[1],
|
||||
date = timeFrag[2],
|
||||
year = timeFrag[3],
|
||||
hours = timeFrag[4].slice(0, timeFrag[4].lastIndexOf(':')),
|
||||
finalTime = '';
|
||||
parseInt(hours.split(':')[0]) > 12 ? finalTime = 'PM' : finalTime = 'AM'
|
||||
return `${hours} ${finalTime} ${day} ${date} ${month} ${year}`
|
||||
}
|
||||
|
||||
function copyToClipboard(parent) {
|
||||
let toast = document.getElementById('textCopied'),
|
||||
textToCopy = parent.querySelector('.copy').textContent;
|
||||
navigator.clipboard.writeText(textToCopy)
|
||||
toast.classList.remove('hide');
|
||||
setTimeout(() => {
|
||||
toast.classList.add('hide');
|
||||
}, 2000)
|
||||
}
|
||||
349
Layouts/sidebar layout/css/main.css
Normal file
349
Layouts/sidebar layout/css/main.css
Normal file
@ -0,0 +1,349 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap");
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
--accent-color: #303F9F;
|
||||
--text-color: 17, 17, 17;
|
||||
--foreground-color: 255, 255, 255;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
color: rgba(var(--text-color), 1);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body[data-theme="dark"] {
|
||||
--accent-color: #4a5cd3;
|
||||
--foreground-color: 20, 20, 20;
|
||||
--text-color: 238, 238, 238;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1.5rem 0;
|
||||
line-height: 1.7;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
.hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hide-completely {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.no-transformations {
|
||||
-webkit-transform: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
fill: none;
|
||||
stroke: rgba(var(--text-color), 0.8);
|
||||
stroke-width: 6;
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
-webkit-box-shadow: 0.2rem 0 0.5rem rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0.2rem 0 0.5rem rgba(0, 0, 0, 0.1);
|
||||
z-index: 3;
|
||||
padding: 1rem 0;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
border-right: solid 1px rgba(var(--text-color), 0.16);
|
||||
-webkit-transform: translateX(-100%);
|
||||
transform: translateX(-100%);
|
||||
-webkit-transition: -webkit-transform 0.3s;
|
||||
transition: -webkit-transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
transition: transform 0.3s, -webkit-transform 0.3s;
|
||||
}
|
||||
|
||||
#navbar .navbar-item {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0.6rem 1.5rem;
|
||||
padding-right: 3rem;
|
||||
border-radius: 0.4em;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
font-size: 0.9em;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
#navbar .navbar-item .icon {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
#navbar .navbar-item h4 {
|
||||
text-transform: capitalize;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#navbar .active {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
#navbar .active .icon {
|
||||
stroke: var(--accent-color);
|
||||
}
|
||||
|
||||
#logo {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
-ms-grid-columns: auto 1fr;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.6rem 0.6rem;
|
||||
margin-right: 1rem;
|
||||
padding: 0.6rem 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#logo h4 {
|
||||
text-transform: capitalize;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#logo h5 {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#logo #main_logo {
|
||||
height: 1.4rem;
|
||||
width: 1.4rem;
|
||||
fill: rgba(var(--text-color), 1);
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
margin-top: auto;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.toggle input[type='checkbox'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle .switch {
|
||||
overflow: hidden;
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
justify-items: center;
|
||||
padding: 0.2rem;
|
||||
min-height: 1.6rem;
|
||||
max-height: 1.6rem;
|
||||
border-radius: 0.5rem;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.toggle .circle {
|
||||
border-radius: 0.5rem;
|
||||
-webkit-transition: -webkit-transform 0.3s;
|
||||
transition: -webkit-transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
transition: transform 0.3s, -webkit-transform 0.3s;
|
||||
fill: rgba(var(--text-color), 0.8);
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
}
|
||||
|
||||
.toggle .circle:first-of-type {
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.toggle .circle line {
|
||||
stroke: rgba(var(--text-color), 0.8);
|
||||
stroke-width: 6;
|
||||
}
|
||||
|
||||
.toggle input:checked ~ .switch .circle {
|
||||
-webkit-transform: translateY(-1.7rem);
|
||||
transform: translateY(-1.7rem);
|
||||
}
|
||||
|
||||
.page {
|
||||
padding: 2rem 1.5rem;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.options-tab {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.options-tab .option {
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
border-radius: 0.4rem;
|
||||
padding: 1.5rem;
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
width: 9rem;
|
||||
border: solid 1px rgba(var(--text-color), 0.2);
|
||||
text-transform: capitalize;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.options-tab .option .icon {
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
height: 2.8rem;
|
||||
width: 2.8rem;
|
||||
padding: 0.8rem;
|
||||
border-radius: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
stroke: rgba(var(--text-color), 0.4);
|
||||
}
|
||||
|
||||
.options-tab .option h4 {
|
||||
font-weight: 400;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
#home_page h1 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#home_page p {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
#home_page h2 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
#main_header {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
#main_header .icon {
|
||||
stroke-width: 12;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
border-radius: 2rem;
|
||||
padding: 1rem;
|
||||
-webkit-box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.16), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.16);
|
||||
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.16), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
main {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-columns: auto 1fr;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 2rem;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
p {
|
||||
max-width: 40rem;
|
||||
}
|
||||
#navbar {
|
||||
position: relative;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
height: 100%;
|
||||
}
|
||||
#main_header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.navbar-item:hover {
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
}
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
9
Layouts/sidebar layout/css/main.css.map
Normal file
9
Layouts/sidebar layout/css/main.css.map
Normal file
File diff suppressed because one or more lines are too long
267
Layouts/sidebar layout/css/main.scss
Normal file
267
Layouts/sidebar layout/css/main.scss
Normal file
@ -0,0 +1,267 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap');
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
:root{
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
body{
|
||||
--accent-color: #303F9F;
|
||||
--text-color: 17, 17, 17;
|
||||
--foreground-color: 255, 255, 255;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
color: rgba(var(--text-color), 1);
|
||||
font-size: 16px;
|
||||
}
|
||||
body[data-theme="dark"]{
|
||||
--accent-color: #4a5cd3;
|
||||
--foreground-color: 20, 20, 20;
|
||||
--text-color: 238, 238, 238;
|
||||
}
|
||||
h1, h2, h3, h4, h5{
|
||||
font-family: 'Poppins', sans-serif;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
h1{
|
||||
font-size: 3rem;
|
||||
}
|
||||
h2{
|
||||
font-size: 2rem;
|
||||
}
|
||||
h3{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
h4{
|
||||
font-size: 1rem;
|
||||
}
|
||||
h5{
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
p{
|
||||
margin: 1.5rem 0;
|
||||
line-height: 1.7;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.hide{
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hide-completely{
|
||||
display: none !important;
|
||||
}
|
||||
.no-transformations{
|
||||
transform: none !important;
|
||||
}
|
||||
.icon{
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
fill: none;
|
||||
stroke: rgba(var(--text-color), 0.8);
|
||||
stroke-width: 6;
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
#navbar{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
box-shadow: 0.2rem 0 0.5rem rgba(0, 0, 0, 0.1);
|
||||
z-index: 3;
|
||||
padding: 1rem 0;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
border-right: solid 1px rgba(var(--text-color), 0.16);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s;
|
||||
.navbar-item{
|
||||
display: flex;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0.6rem 1.5rem;
|
||||
padding-right: 3rem;
|
||||
border-radius: 0.4em;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
font-size: 0.9em;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
.icon{
|
||||
margin-right: 1rem;
|
||||
}
|
||||
h4{
|
||||
text-transform: capitalize;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.active{
|
||||
color: var(--accent-color);
|
||||
.icon{
|
||||
stroke: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
#logo{
|
||||
display: grid;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.6rem 0.6rem;
|
||||
margin-right: 1rem;
|
||||
padding: 0.6rem 2rem;
|
||||
margin-bottom: 1rem;
|
||||
h4{
|
||||
text-transform: capitalize;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
h5{
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
#main_logo{
|
||||
height: 1.4rem;
|
||||
width: 1.4rem;
|
||||
fill: rgba(var(--text-color), 1);
|
||||
stroke: none;
|
||||
}
|
||||
}
|
||||
.toggle{
|
||||
margin-top: auto;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
input[type='checkbox']{
|
||||
display: none;
|
||||
}
|
||||
.switch{
|
||||
overflow: hidden;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-items: center;
|
||||
padding: 0.2rem;
|
||||
min-height: 1.6rem;
|
||||
max-height: 1.6rem;
|
||||
border-radius: 0.5rem;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.circle{
|
||||
border-radius: 0.5rem;
|
||||
transition: transform 0.3s;
|
||||
&:first-of-type{
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
fill: rgba(var(--text-color), 0.8);
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
line{
|
||||
stroke: rgba(var(--text-color), 0.8);
|
||||
stroke-width: 6;
|
||||
}
|
||||
}
|
||||
input:checked ~ .switch .circle{
|
||||
transform: translateY(-1.7rem);
|
||||
}
|
||||
}
|
||||
.page{
|
||||
padding: 2rem 1.5rem;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.options-tab{
|
||||
display: flex;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
.option{
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
border-radius: 0.4rem;
|
||||
padding: 1.5rem;
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
width: 9rem;
|
||||
border: solid 1px rgba(var(--text-color), 0.2);
|
||||
text-transform: capitalize;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
.icon{
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
height: 2.8rem;
|
||||
width: 2.8rem;
|
||||
padding: 0.8rem;
|
||||
border-radius: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
stroke: rgba(var(--text-color), 0.4);
|
||||
}
|
||||
h4{
|
||||
font-weight: 400;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
#home_page{
|
||||
h1{
|
||||
font-weight: 600;
|
||||
}
|
||||
p{
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
h2{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 640px){
|
||||
#main_header{
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding: 1.5rem;
|
||||
.icon{
|
||||
stroke-width: 12;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
border-radius: 2rem;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.16),
|
||||
0 0.4rem 0.8rem rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 640px){
|
||||
main{
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 2rem;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
p{
|
||||
max-width: 40rem;
|
||||
}
|
||||
#navbar{
|
||||
position: relative;
|
||||
transform: none;
|
||||
height: 100%;
|
||||
}
|
||||
#main_header{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (hover: hover){
|
||||
.navbar-item:hover{
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
}
|
||||
154
Layouts/sidebar layout/index.html
Normal file
154
Layouts/sidebar layout/index.html
Normal file
@ -0,0 +1,154 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
|
||||
<body data-theme="light">
|
||||
<main>
|
||||
<nav id="navbar">
|
||||
<div id="logo">
|
||||
<svg id="main_logo" viewBox="0 0 27.25 32">
|
||||
<title>RanchiMall</title>
|
||||
<path
|
||||
d="M27.14,30.86c-.74-2.48-3-4.36-8.25-6.94a20,20,0,0,1-4.2-2.49,6,6,0,0,1-1.25-1.67,4,4,0,0,1,0-2.26c.37-1.08.79-1.57,3.89-4.55a11.66,11.66,0,0,0,3.34-4.67,6.54,6.54,0,0,0,.05-2.82C20,3.6,18.58,2,16.16.49c-.89-.56-1.29-.64-1.3-.24a3,3,0,0,1-.3.72l-.3.55L13.42.94C13,.62,12.4.26,12.19.15c-.4-.2-.73-.18-.72.05a9.39,9.39,0,0,1-.61,1.33s-.14,0-.27-.13C8.76.09,8-.27,8,.23A11.73,11.73,0,0,1,6.76,2.6C4.81,5.87,2.83,7.49.77,7.49c-.89,0-.88,0-.61,1,.22.85.33.92,1.09.69A5.29,5.29,0,0,0,3,8.33c.23-.17.45-.29.49-.26a2,2,0,0,1,.22.63A1.31,1.31,0,0,0,4,9.34a5.62,5.62,0,0,0,2.27-.87L7,8l.13.55c.19.74.32.82,1,.65a7.06,7.06,0,0,0,3.46-2.47l.6-.71-.06.64c-.17,1.63-1.3,3.42-3.39,5.42L6.73,14c-3.21,3.06-3,5.59.6,8a46.77,46.77,0,0,0,4.6,2.41c.28.13,1,.52,1.59.87,3.31,2,4.95,3.92,4.95,5.93a2.49,2.49,0,0,0,.07.77h0c.09.09,0,.1.9-.14a2.61,2.61,0,0,0,.83-.32,3.69,3.69,0,0,0-.55-1.83A11.14,11.14,0,0,0,17,26.81a35.7,35.7,0,0,0-5.1-2.91C9.37,22.64,8.38,22,7.52,21.17a3.53,3.53,0,0,1-1.18-2.48c0-1.38.71-2.58,2.5-4.23,2.84-2.6,3.92-3.91,4.67-5.65a3.64,3.64,0,0,0,.42-2A3.37,3.37,0,0,0,13.61,5l-.32-.74.29-.48c.17-.27.37-.63.46-.8l.15-.3.44.64a5.92,5.92,0,0,1,1,2.81,5.86,5.86,0,0,1-.42,1.94c0,.12-.12.3-.15.4a9.49,9.49,0,0,1-.67,1.1,28,28,0,0,1-4,4.29C8.62,15.49,8.05,16.44,8,17.78a3.28,3.28,0,0,0,1.11,2.76c.95,1,2.07,1.74,5.25,3.32,3.64,1.82,5.22,2.9,6.41,4.38A4.78,4.78,0,0,1,21.94,31a3.21,3.21,0,0,0,.14.92,1.06,1.06,0,0,0,.43-.05l.83-.22.46-.12-.06-.46c-.21-1.53-1.62-3.25-3.94-4.8a37.57,37.57,0,0,0-5.22-2.82A13.36,13.36,0,0,1,11,21.19a3.36,3.36,0,0,1-.8-4.19c.41-.85.83-1.31,3.77-4.15,2.39-2.31,3.43-4.13,3.43-6a5.85,5.85,0,0,0-2.08-4.29c-.23-.21-.44-.43-.65-.65A2.5,2.5,0,0,1,15.27.69a10.6,10.6,0,0,1,2.91,2.78A4.16,4.16,0,0,1,19,6.16a4.91,4.91,0,0,1-.87,3c-.71,1.22-1.26,1.82-4.27,4.67a9.47,9.47,0,0,0-2.07,2.6,2.76,2.76,0,0,0-.33,1.54,2.76,2.76,0,0,0,.29,1.47c.57,1.21,2.23,2.55,4.65,3.73a32.41,32.41,0,0,1,5.82,3.24c2.16,1.6,3.2,3.16,3.2,4.8a1.94,1.94,0,0,0,.09.76,4.54,4.54,0,0,0,1.66-.4C27.29,31.42,27.29,31.37,27.14,30.86ZM6.1,7h0a3.77,3.77,0,0,1-1.46.45L4,7.51l.68-.83a25.09,25.09,0,0,0,3-4.82A12,12,0,0,1,8.28.76c.11-.12.77.32,1.53,1l.63.58-.57.84A10.34,10.34,0,0,1,6.1,7Zm5.71-1.78A9.77,9.77,0,0,1,9.24,7.18h0a5.25,5.25,0,0,1-1.17.28l-.58,0,.65-.78a21.29,21.29,0,0,0,2.1-3.12c.22-.41.42-.76.44-.79s.5.43.9,1.24L12,5ZM13.41,3a2.84,2.84,0,0,1-.45.64,11,11,0,0,1-.9-.91l-.84-.9.19-.45c.34-.79.39-.8,1-.31A9.4,9.4,0,0,1,13.8,2.33q-.18.34-.39.69Z" />
|
||||
</svg>
|
||||
<span>
|
||||
<h5>RanchiMall</h5>
|
||||
<h4>App Name</h4>
|
||||
</span>
|
||||
</div>
|
||||
<div class="navbar-item active" onclick="showPage(this, 'home_page')">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
<path
|
||||
d="M24.77,44.15H40.06V63.5H53.4V36h5.66a3.38,3.38,0,0,0,2.53-5.68l-6.73-7.16V11.26H46.48v3L34.53,1.59a3.49,3.49,0,0,0-5.06,0L2.41,30.35A3.38,3.38,0,0,0,4.94,36H10.6V63.5H24.77" />
|
||||
</svg>
|
||||
<h4>Home</h4>
|
||||
</div>
|
||||
<div class="navbar-item" onclick="showPage(this, 'profile_page')">
|
||||
<svg class="icon" viewBox="0 0 49.54 61.12">
|
||||
<path
|
||||
d="M49.34,19.94c7.73,0,13.26,5.26,13.26,14S58.18,50.14,49.71,50.08,36.82,42.66,36.82,33.93s5.53-14,13.26-14"
|
||||
transform="translate(-25.23 -20)" />
|
||||
<path
|
||||
d="M43.83,52c-2.34,4.38-9.77,6.64-15.31,9.06-2.29,1-4.11,13-1.53,13a46.06,46.06,0,0,0,23.51,6,40.48,40.48,0,0,0,22.51-6c2.58,0,.76-12-1.53-13-5.54-2.42-13-4.68-15.31-9.06"
|
||||
transform="translate(-25.23 -19.44)" />
|
||||
</svg>
|
||||
<h4>User</h4>
|
||||
</div>
|
||||
<label class="toggle navbar-item" title="Change theme">
|
||||
<input type="checkbox" name="theme toggle" id="theme_toggle">
|
||||
<div class="switch">
|
||||
<svg class="circle" viewBox="0 0 64 64">
|
||||
<title>dark theme</title>
|
||||
<path
|
||||
d="M48.25,45.45A27.26,27.26,0,0,1,20.82,18.37,26.75,26.75,0,0,1,27.47.71a31.71,31.71,0,0,0-27,31.2,31.8,31.8,0,0,0,32,31.59A32,32,0,0,0,63.12,41.12,27.59,27.59,0,0,1,48.25,45.45Z"
|
||||
transform="translate(0 0)" />
|
||||
</svg>
|
||||
<svg class="circle" viewBox="0 0 64 64">
|
||||
<title>light theme</title>
|
||||
<circle cx="32" cy="32" r="13.9" />
|
||||
<line x1="32" y1="6.86" x2="32" />
|
||||
<line x1="32" y1="64" x2="32" y2="57.14" />
|
||||
<line x1="57.14" y1="32" x2="64" y2="32" />
|
||||
<line y1="32" x2="6.86" y2="32" />
|
||||
<line x1="49.78" y1="14.22" x2="54.63" y2="9.37" />
|
||||
<line x1="9.37" y1="54.63" x2="14.22" y2="49.78" />
|
||||
<line x1="49.78" y1="49.78" x2="54.63" y2="54.63" />
|
||||
<line x1="9.37" y1="9.37" x2="14.22" y2="14.22" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4>Toggle theme</h4>
|
||||
</label>
|
||||
</nav>
|
||||
<header id="main_header">
|
||||
<svg id="sidebar_btn" class="icon" viewBox="0 0 64 64">
|
||||
<title>menu</title>
|
||||
<line y1="12" x2="64" y2="12" />
|
||||
<line y1="52" x2="42" y2="52" />
|
||||
</svg>
|
||||
</header>
|
||||
<section class="page" id="home_page">
|
||||
<h1>Heading</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi excepturi eius voluptate quod quasi
|
||||
dolore, quisquam, voluptatem repellendus sapiente consectetur similique ducimus dicta magni harum,
|
||||
</p>
|
||||
<h3>Options</h3>
|
||||
|
||||
<div class="options-tab">
|
||||
<div class="option">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
<title>transfer</title>
|
||||
<polyline
|
||||
points="17.04 35.97 14.57 33.5 40.15 7.9 32.75 0.5 55.52 0.5 55.52 23.28 48.12 15.87 23.86 40.14 15.88 48.13 8.48 40.72 8.48 63.5 31.25 63.5 23.85 56.1 49.43 30.5 46.96 28.03" />
|
||||
</svg>
|
||||
<h4>Option</h4>
|
||||
</div>
|
||||
<div class="option">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
<title>transfer</title>
|
||||
<polyline
|
||||
points="17.04 35.97 14.57 33.5 40.15 7.9 32.75 0.5 55.52 0.5 55.52 23.28 48.12 15.87 23.86 40.14 15.88 48.13 8.48 40.72 8.48 63.5 31.25 63.5 23.85 56.1 49.43 30.5 46.96 28.03" />
|
||||
</svg>
|
||||
<h4>Option</h4>
|
||||
</div>
|
||||
<div class="option">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
<title>transfer</title>
|
||||
<polyline
|
||||
points="17.04 35.97 14.57 33.5 40.15 7.9 32.75 0.5 55.52 0.5 55.52 23.28 48.12 15.87 23.86 40.14 15.88 48.13 8.48 40.72 8.48 63.5 31.25 63.5 23.85 56.1 49.43 30.5 46.96 28.03" />
|
||||
</svg>
|
||||
<h4>Option</h4>
|
||||
</div>
|
||||
<div class="option">
|
||||
<svg class="icon" viewBox="0 0 64 64">
|
||||
<title>transfer</title>
|
||||
<polyline
|
||||
points="17.04 35.97 14.57 33.5 40.15 7.9 32.75 0.5 55.52 0.5 55.52 23.28 48.12 15.87 23.86 40.14 15.88 48.13 8.48 40.72 8.48 63.5 31.25 63.5 23.85 56.1 49.43 30.5 46.96 28.03" />
|
||||
</svg>
|
||||
<h4>Option</h4>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="profile_page" class="page hide-completely">
|
||||
<h2>User Settings</h2>
|
||||
</section>
|
||||
</main>
|
||||
<script id="helper_functions" src="js/helper.js"></script>
|
||||
<script src="js/components.js"></script>
|
||||
<script id="UI_functions">
|
||||
let allPages = document.querySelectorAll('.page'),
|
||||
allTabs = document.querySelectorAll('.navbar-item');
|
||||
function showPage(btn, page) {
|
||||
allPages.forEach((page) => {
|
||||
page.classList.add('hide-completely')
|
||||
})
|
||||
allTabs.forEach((tab) => {
|
||||
tab.classList.remove('active')
|
||||
})
|
||||
document.getElementById(page).classList.remove('hide-completely')
|
||||
btn.classList.add('active')
|
||||
}
|
||||
let sidebarBtn = document.getElementById('sidebar_btn'),
|
||||
sidebar = document.getElementById('navbar'),
|
||||
sidebarExpanded = false;
|
||||
sidebarBtn.addEventListener('click', e => {
|
||||
sidebar.classList.add('no-transformations')
|
||||
sidebarExpanded = true
|
||||
})
|
||||
addEventListener('click', e => {
|
||||
if(sidebarExpanded)
|
||||
if(!e.target.closest('#navbar') && !e.target.closest('#sidebar_btn')){
|
||||
sidebar.classList.remove('no-transformations')
|
||||
sidebarExpanded = false;
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
2918
Layouts/sidebar layout/js/components.js
Normal file
2918
Layouts/sidebar layout/js/components.js
Normal file
File diff suppressed because it is too large
Load Diff
133
Layouts/sidebar layout/js/helper.js
Normal file
133
Layouts/sidebar layout/js/helper.js
Normal file
@ -0,0 +1,133 @@
|
||||
if (!navigator.onLine)
|
||||
notify('There seems to be a problem connecting to the internet.', 'error', 'fixed', true)
|
||||
window.addEventListener('offline', () => {
|
||||
notify('There seems to be a problem connecting to the internet.', 'error', 'fixed', true)
|
||||
})
|
||||
window.addEventListener('online', () => {
|
||||
notify('We are back online.', '', '', true)
|
||||
})
|
||||
let themeToggler = document.getElementById("theme_toggle")
|
||||
if (localStorage.theme === "dark") {
|
||||
darkTheme()
|
||||
themeToggler.checked = true;
|
||||
} else {
|
||||
lightTheme()
|
||||
themeToggler.checked = false;
|
||||
}
|
||||
|
||||
function lightTheme() {
|
||||
document.body.setAttribute("data-theme", "light");
|
||||
}
|
||||
|
||||
function darkTheme() {
|
||||
document.body.setAttribute("data-theme", "dark");
|
||||
}
|
||||
themeToggler.addEventListener("change", () => {
|
||||
if (themeToggler.checked) {
|
||||
darkTheme()
|
||||
localStorage.setItem("theme", "dark");
|
||||
} else {
|
||||
lightTheme()
|
||||
localStorage.setItem("theme", "light");
|
||||
}
|
||||
})
|
||||
|
||||
// function required for popups or modals to appear
|
||||
class Stack {
|
||||
constructor() {
|
||||
this.items = [];
|
||||
}
|
||||
push(element) {
|
||||
this.items.push(element);
|
||||
}
|
||||
pop() {
|
||||
if (this.items.length == 0)
|
||||
return "Underflow";
|
||||
return this.items.pop();
|
||||
}
|
||||
peek(index) {
|
||||
let newIndex = index ? index : 1
|
||||
return this.items[this.items.length - index];
|
||||
}
|
||||
}
|
||||
let popupStack = new Stack(),
|
||||
zIndex = 10;
|
||||
function showPopup(popup, permission) {
|
||||
let thisPopup = document.getElementById(popup);
|
||||
document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)
|
||||
popupStack.push({ thisPopup, permission })
|
||||
thisPopup.show(permission, popupStack)
|
||||
zIndex++;
|
||||
thisPopup.setAttribute('style', `z-index: ${zIndex}`)
|
||||
return thisPopup;
|
||||
}
|
||||
function setAttributes(el, attrs) {
|
||||
for (var key in attrs) {
|
||||
el.setAttribute(key, attrs[key]);
|
||||
}
|
||||
}
|
||||
// displays a popup for asking permission. Use this instead of JS confirm
|
||||
let confirmation = function (message) {
|
||||
return new Promise(resolve => {
|
||||
let popup = document.getElementById('confirmation');
|
||||
showPopup('confirmation')
|
||||
popup.querySelector('#confirm_message').textContent = message;
|
||||
popup.querySelector('.submit-btn').onclick = () => {
|
||||
hidePopup()
|
||||
resolve(true);
|
||||
}
|
||||
popup.querySelector('.cancel-btn').onclick = () => {
|
||||
hidePopup()
|
||||
resolve(false);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// displays a popup for asking user input. Use this instead of JS prompt
|
||||
let askPrompt = function (message, defaultVal) {
|
||||
return new Promise(resolve => {
|
||||
let popup = document.getElementById('prompt'),
|
||||
input = popup.querySelector('input');
|
||||
if (defaultVal)
|
||||
input.value = defaultVal;
|
||||
showPopup('prompt')
|
||||
input.focus()
|
||||
input.addEventListener('keyup', e => {
|
||||
if (e.key === 'Enter') {
|
||||
resolve(input.value);
|
||||
hidePopup()
|
||||
}
|
||||
})
|
||||
popup.querySelector('#prompt_message').textContent = message;
|
||||
popup.querySelector('.submit-btn').onclick = () => {
|
||||
hidePopup()
|
||||
resolve(input.value);
|
||||
}
|
||||
popup.querySelector('.cancel-btn').onclick = () => {
|
||||
hidePopup()
|
||||
resolve(null);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function formatedTime(time) {
|
||||
let timeFrag = new Date(parseInt(time)).toString().split(' '),
|
||||
day = timeFrag[0],
|
||||
month = timeFrag[1],
|
||||
date = timeFrag[2],
|
||||
year = timeFrag[3],
|
||||
hours = timeFrag[4].slice(0, timeFrag[4].lastIndexOf(':')),
|
||||
finalTime = '';
|
||||
parseInt(hours.split(':')[0]) > 12 ? finalTime = 'PM' : finalTime = 'AM'
|
||||
return `${hours} ${finalTime} ${day} ${date} ${month} ${year}`
|
||||
}
|
||||
|
||||
function copyToClipboard(parent) {
|
||||
let toast = document.getElementById('textCopied'),
|
||||
textToCopy = parent.querySelector('.copy').textContent;
|
||||
navigator.clipboard.writeText(textToCopy)
|
||||
toast.classList.remove('hide');
|
||||
setTimeout(() => {
|
||||
toast.classList.add('hide');
|
||||
}, 2000)
|
||||
}
|
||||
233
Layouts/tabs layout/css/main.css
Normal file
233
Layouts/tabs layout/css/main.css
Normal file
@ -0,0 +1,233 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap");
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
--accent-color: #303F9F;
|
||||
--text-color: 17, 17, 17;
|
||||
--foreground-color: 255, 255, 255;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
color: rgba(var(--text-color), 1);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body[data-theme="dark"] {
|
||||
--accent-color: #6a7dff;
|
||||
--foreground-color: 20, 20, 20;
|
||||
--text-color: 238, 238, 238;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1.5rem 0;
|
||||
line-height: 1.7;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
.hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hide-completely {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
fill: none;
|
||||
stroke: rgba(var(--text-color), 0.8);
|
||||
stroke-width: 6;
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.toggle input[type='checkbox'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle .switch {
|
||||
overflow: hidden;
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
justify-items: center;
|
||||
padding: 0.2rem;
|
||||
min-height: 1.6rem;
|
||||
max-height: 1.6rem;
|
||||
border-radius: 0.5rem;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.toggle .circle {
|
||||
border-radius: 0.5rem;
|
||||
-webkit-transition: -webkit-transform 0.3s;
|
||||
transition: -webkit-transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
transition: transform 0.3s, -webkit-transform 0.3s;
|
||||
fill: rgba(var(--text-color), 0.8);
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
}
|
||||
|
||||
.toggle .circle:first-of-type {
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.toggle .circle line {
|
||||
stroke: rgba(var(--text-color), 0.8);
|
||||
stroke-width: 6;
|
||||
}
|
||||
|
||||
.toggle input:checked ~ .switch .circle {
|
||||
-webkit-transform: translateY(-1.7rem);
|
||||
transform: translateY(-1.7rem);
|
||||
}
|
||||
|
||||
sm-tabs {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
sm-tabs::part(tab-header) {
|
||||
border-bottom: solid 1px rgba(var(--text-color), 0.2);
|
||||
padding: 0 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
sm-tabs::part(panel-container) {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding: 1.5rem 2rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#logo {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
-ms-grid-columns: auto 1fr;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.6rem 0.6rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
#logo h4 {
|
||||
text-transform: capitalize;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#logo h5 {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#logo #main_logo {
|
||||
height: 1.4rem;
|
||||
width: 1.4rem;
|
||||
fill: rgba(var(--text-color), 1);
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.section h3 + p {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.section:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1.5rem;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
width: 20rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-right: 1.5rem;
|
||||
border: solid 1px rgba(var(--text-color), 0.2);
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
sm-tabs::part(tab-header), sm-tabs::part(panel-container) {
|
||||
padding: 0 4vw;
|
||||
}
|
||||
p {
|
||||
max-width: 40rem;
|
||||
}
|
||||
}
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
9
Layouts/tabs layout/css/main.css.map
Normal file
9
Layouts/tabs layout/css/main.css.map
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"sources": [
|
||||
"main.scss"
|
||||
],
|
||||
"names": [],
|
||||
"file": "main.css"
|
||||
}
|
||||
178
Layouts/tabs layout/css/main.scss
Normal file
178
Layouts/tabs layout/css/main.scss
Normal file
@ -0,0 +1,178 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap');
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
:root{
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
body{
|
||||
--accent-color: #303F9F;
|
||||
--text-color: 17, 17, 17;
|
||||
--foreground-color: 255, 255, 255;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
color: rgba(var(--text-color), 1);
|
||||
font-size: 16px;
|
||||
}
|
||||
body[data-theme="dark"]{
|
||||
--accent-color: #6a7dff;
|
||||
--foreground-color: 20, 20, 20;
|
||||
--text-color: 238, 238, 238;
|
||||
}
|
||||
h1, h2, h3, h4, h5{
|
||||
font-family: 'Poppins', sans-serif;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
h1{
|
||||
font-size: 3rem;
|
||||
}
|
||||
h2{
|
||||
font-size: 2rem;
|
||||
}
|
||||
h3{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
h4{
|
||||
font-size: 1rem;
|
||||
}
|
||||
h5{
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
p{
|
||||
margin: 1.5rem 0;
|
||||
line-height: 1.7;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.hide{
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hide-completely{
|
||||
display: none !important;
|
||||
}
|
||||
.icon{
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
fill: none;
|
||||
stroke: rgba(var(--text-color), 0.8);
|
||||
stroke-width: 6;
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
.toggle{
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
padding: 0;
|
||||
input[type='checkbox']{
|
||||
display: none;
|
||||
}
|
||||
.switch{
|
||||
overflow: hidden;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-items: center;
|
||||
padding: 0.2rem;
|
||||
min-height: 1.6rem;
|
||||
max-height: 1.6rem;
|
||||
border-radius: 0.5rem;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
.circle{
|
||||
border-radius: 0.5rem;
|
||||
transition: transform 0.3s;
|
||||
&:first-of-type{
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
fill: rgba(var(--text-color), 0.8);
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
line{
|
||||
stroke: rgba(var(--text-color), 0.8);
|
||||
stroke-width: 6;
|
||||
}
|
||||
}
|
||||
input:checked ~ .switch .circle{
|
||||
transform: translateY(-1.7rem);
|
||||
}
|
||||
}
|
||||
sm-tabs{
|
||||
margin-bottom: 2rem;
|
||||
&::part(tab-header){
|
||||
border-bottom: solid 1px rgba(var(--text-color), 0.2);
|
||||
padding: 0 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
&::part(panel-container){
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
}
|
||||
#navbar{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1.5rem 2rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
z-index: 3;
|
||||
}
|
||||
#logo{
|
||||
display: grid;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.6rem 0.6rem;
|
||||
margin-right: 1rem;
|
||||
h4{
|
||||
text-transform: capitalize;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
h5{
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
#main_logo{
|
||||
height: 1.4rem;
|
||||
width: 1.4rem;
|
||||
fill: rgba(var(--text-color), 1);
|
||||
stroke: none;
|
||||
}
|
||||
}
|
||||
.section{
|
||||
margin-top: 3rem;
|
||||
h3 + p{
|
||||
margin-top: 1rem;
|
||||
}
|
||||
&:first-of-type{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.card{
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 20rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-right: 1.5rem;
|
||||
border: solid 1px rgba(var(--text-color), 0.2);
|
||||
h3{
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 640px){
|
||||
sm-tabs{
|
||||
&::part(tab-header),
|
||||
&::part(panel-container){
|
||||
padding: 0 4vw;
|
||||
}
|
||||
}
|
||||
p{
|
||||
max-width: 40rem;
|
||||
}
|
||||
}
|
||||
204
Layouts/tabs layout/index.html
Normal file
204
Layouts/tabs layout/index.html
Normal file
@ -0,0 +1,204 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
|
||||
<body data-theme="light">
|
||||
<nav id="navbar">
|
||||
<div id="logo">
|
||||
<svg id="main_logo" viewBox="0 0 27.25 32">
|
||||
<title>RanchiMall</title>
|
||||
<path
|
||||
d="M27.14,30.86c-.74-2.48-3-4.36-8.25-6.94a20,20,0,0,1-4.2-2.49,6,6,0,0,1-1.25-1.67,4,4,0,0,1,0-2.26c.37-1.08.79-1.57,3.89-4.55a11.66,11.66,0,0,0,3.34-4.67,6.54,6.54,0,0,0,.05-2.82C20,3.6,18.58,2,16.16.49c-.89-.56-1.29-.64-1.3-.24a3,3,0,0,1-.3.72l-.3.55L13.42.94C13,.62,12.4.26,12.19.15c-.4-.2-.73-.18-.72.05a9.39,9.39,0,0,1-.61,1.33s-.14,0-.27-.13C8.76.09,8-.27,8,.23A11.73,11.73,0,0,1,6.76,2.6C4.81,5.87,2.83,7.49.77,7.49c-.89,0-.88,0-.61,1,.22.85.33.92,1.09.69A5.29,5.29,0,0,0,3,8.33c.23-.17.45-.29.49-.26a2,2,0,0,1,.22.63A1.31,1.31,0,0,0,4,9.34a5.62,5.62,0,0,0,2.27-.87L7,8l.13.55c.19.74.32.82,1,.65a7.06,7.06,0,0,0,3.46-2.47l.6-.71-.06.64c-.17,1.63-1.3,3.42-3.39,5.42L6.73,14c-3.21,3.06-3,5.59.6,8a46.77,46.77,0,0,0,4.6,2.41c.28.13,1,.52,1.59.87,3.31,2,4.95,3.92,4.95,5.93a2.49,2.49,0,0,0,.07.77h0c.09.09,0,.1.9-.14a2.61,2.61,0,0,0,.83-.32,3.69,3.69,0,0,0-.55-1.83A11.14,11.14,0,0,0,17,26.81a35.7,35.7,0,0,0-5.1-2.91C9.37,22.64,8.38,22,7.52,21.17a3.53,3.53,0,0,1-1.18-2.48c0-1.38.71-2.58,2.5-4.23,2.84-2.6,3.92-3.91,4.67-5.65a3.64,3.64,0,0,0,.42-2A3.37,3.37,0,0,0,13.61,5l-.32-.74.29-.48c.17-.27.37-.63.46-.8l.15-.3.44.64a5.92,5.92,0,0,1,1,2.81,5.86,5.86,0,0,1-.42,1.94c0,.12-.12.3-.15.4a9.49,9.49,0,0,1-.67,1.1,28,28,0,0,1-4,4.29C8.62,15.49,8.05,16.44,8,17.78a3.28,3.28,0,0,0,1.11,2.76c.95,1,2.07,1.74,5.25,3.32,3.64,1.82,5.22,2.9,6.41,4.38A4.78,4.78,0,0,1,21.94,31a3.21,3.21,0,0,0,.14.92,1.06,1.06,0,0,0,.43-.05l.83-.22.46-.12-.06-.46c-.21-1.53-1.62-3.25-3.94-4.8a37.57,37.57,0,0,0-5.22-2.82A13.36,13.36,0,0,1,11,21.19a3.36,3.36,0,0,1-.8-4.19c.41-.85.83-1.31,3.77-4.15,2.39-2.31,3.43-4.13,3.43-6a5.85,5.85,0,0,0-2.08-4.29c-.23-.21-.44-.43-.65-.65A2.5,2.5,0,0,1,15.27.69a10.6,10.6,0,0,1,2.91,2.78A4.16,4.16,0,0,1,19,6.16a4.91,4.91,0,0,1-.87,3c-.71,1.22-1.26,1.82-4.27,4.67a9.47,9.47,0,0,0-2.07,2.6,2.76,2.76,0,0,0-.33,1.54,2.76,2.76,0,0,0,.29,1.47c.57,1.21,2.23,2.55,4.65,3.73a32.41,32.41,0,0,1,5.82,3.24c2.16,1.6,3.2,3.16,3.2,4.8a1.94,1.94,0,0,0,.09.76,4.54,4.54,0,0,0,1.66-.4C27.29,31.42,27.29,31.37,27.14,30.86ZM6.1,7h0a3.77,3.77,0,0,1-1.46.45L4,7.51l.68-.83a25.09,25.09,0,0,0,3-4.82A12,12,0,0,1,8.28.76c.11-.12.77.32,1.53,1l.63.58-.57.84A10.34,10.34,0,0,1,6.1,7Zm5.71-1.78A9.77,9.77,0,0,1,9.24,7.18h0a5.25,5.25,0,0,1-1.17.28l-.58,0,.65-.78a21.29,21.29,0,0,0,2.1-3.12c.22-.41.42-.76.44-.79s.5.43.9,1.24L12,5ZM13.41,3a2.84,2.84,0,0,1-.45.64,11,11,0,0,1-.9-.91l-.84-.9.19-.45c.34-.79.39-.8,1-.31A9.4,9.4,0,0,1,13.8,2.33q-.18.34-.39.69Z" />
|
||||
</svg>
|
||||
<span>
|
||||
<h5>RanchiMall</h5>
|
||||
<h4>App name</h4>
|
||||
</span>
|
||||
</div>
|
||||
<label class="toggle" title="Change theme">
|
||||
<input type="checkbox" name="theme toggle" id="theme_toggle">
|
||||
<div class="switch">
|
||||
<svg class="circle" viewBox="0 0 64 64">
|
||||
<title>dark theme</title>
|
||||
<path
|
||||
d="M48.25,45.45A27.26,27.26,0,0,1,20.82,18.37,26.75,26.75,0,0,1,27.47.71a31.71,31.71,0,0,0-27,31.2,31.8,31.8,0,0,0,32,31.59A32,32,0,0,0,63.12,41.12,27.59,27.59,0,0,1,48.25,45.45Z"
|
||||
transform="translate(0 0)" />
|
||||
</svg>
|
||||
<svg class="circle" viewBox="0 0 64 64">
|
||||
<title>light theme</title>
|
||||
<circle cx="32" cy="32" r="13.9" />
|
||||
<line x1="32" y1="6.86" x2="32" />
|
||||
<line x1="32" y1="64" x2="32" y2="57.14" />
|
||||
<line x1="57.14" y1="32" x2="64" y2="32" />
|
||||
<line y1="32" x2="6.86" y2="32" />
|
||||
<line x1="49.78" y1="14.22" x2="54.63" y2="9.37" />
|
||||
<line x1="9.37" y1="54.63" x2="14.22" y2="49.78" />
|
||||
<line x1="49.78" y1="49.78" x2="54.63" y2="54.63" />
|
||||
<line x1="9.37" y1="9.37" x2="14.22" y2="14.22" />
|
||||
</svg>
|
||||
</div>
|
||||
</label>
|
||||
</nav>
|
||||
<main>
|
||||
<sm-tabs class="border-bottom">
|
||||
<sm-tab slot="tab">Page 1</sm-tab>
|
||||
<sm-panel slot="panel">
|
||||
<section class="section">
|
||||
<h3>Heading</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
</p>
|
||||
<sm-carousel>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
</sm-carousel>
|
||||
</section>
|
||||
<section class="section">
|
||||
<h3>Heading</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
</p>
|
||||
<sm-carousel>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
</sm-carousel>
|
||||
</section>
|
||||
</sm-panel>
|
||||
<sm-tab slot="tab">Page 2</sm-tab>
|
||||
<sm-panel slot="panel">
|
||||
<section class="section">
|
||||
<h3>Heading</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
</p>
|
||||
<sm-carousel>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
</sm-carousel>
|
||||
</section>
|
||||
<section class="section">
|
||||
<h3>Heading</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
</p>
|
||||
<sm-carousel>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Card</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, officia.
|
||||
</p>
|
||||
</div>
|
||||
</sm-carousel>
|
||||
</section>
|
||||
</sm-panel>
|
||||
</sm-tabs>
|
||||
</main>
|
||||
<script id="helper_functions" src="js/helper.js"></script>
|
||||
<script src="js/components.js"></script>
|
||||
<script id="UI_functions">
|
||||
let allPages = document.querySelectorAll('.page'),
|
||||
allTabs = document.querySelectorAll('.navbar-item');
|
||||
function showPage(btn, page) {
|
||||
allPages.forEach((page) => {
|
||||
page.classList.add('hide-completely')
|
||||
})
|
||||
allTabs.forEach((tab) => {
|
||||
tab.classList.remove('active')
|
||||
})
|
||||
document.getElementById(page).classList.remove('hide-completely')
|
||||
btn.classList.add('active')
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
2918
Layouts/tabs layout/js/components.js
Normal file
2918
Layouts/tabs layout/js/components.js
Normal file
File diff suppressed because it is too large
Load Diff
133
Layouts/tabs layout/js/helper.js
Normal file
133
Layouts/tabs layout/js/helper.js
Normal file
@ -0,0 +1,133 @@
|
||||
if (!navigator.onLine)
|
||||
notify('There seems to be a problem connecting to the internet.', 'error', 'fixed', true)
|
||||
window.addEventListener('offline', () => {
|
||||
notify('There seems to be a problem connecting to the internet.', 'error', 'fixed', true)
|
||||
})
|
||||
window.addEventListener('online', () => {
|
||||
notify('We are back online.', '', '', true)
|
||||
})
|
||||
let themeToggler = document.getElementById("theme_toggle")
|
||||
if (localStorage.theme === "dark") {
|
||||
darkTheme()
|
||||
themeToggler.checked = true;
|
||||
} else {
|
||||
lightTheme()
|
||||
themeToggler.checked = false;
|
||||
}
|
||||
|
||||
function lightTheme() {
|
||||
document.body.setAttribute("data-theme", "light");
|
||||
}
|
||||
|
||||
function darkTheme() {
|
||||
document.body.setAttribute("data-theme", "dark");
|
||||
}
|
||||
themeToggler.addEventListener("change", () => {
|
||||
if (themeToggler.checked) {
|
||||
darkTheme()
|
||||
localStorage.setItem("theme", "dark");
|
||||
} else {
|
||||
lightTheme()
|
||||
localStorage.setItem("theme", "light");
|
||||
}
|
||||
})
|
||||
|
||||
// function required for popups or modals to appear
|
||||
class Stack {
|
||||
constructor() {
|
||||
this.items = [];
|
||||
}
|
||||
push(element) {
|
||||
this.items.push(element);
|
||||
}
|
||||
pop() {
|
||||
if (this.items.length == 0)
|
||||
return "Underflow";
|
||||
return this.items.pop();
|
||||
}
|
||||
peek(index) {
|
||||
let newIndex = index ? index : 1
|
||||
return this.items[this.items.length - index];
|
||||
}
|
||||
}
|
||||
let popupStack = new Stack(),
|
||||
zIndex = 10;
|
||||
function showPopup(popup, permission) {
|
||||
let thisPopup = document.getElementById(popup);
|
||||
document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)
|
||||
popupStack.push({ thisPopup, permission })
|
||||
thisPopup.show(permission, popupStack)
|
||||
zIndex++;
|
||||
thisPopup.setAttribute('style', `z-index: ${zIndex}`)
|
||||
return thisPopup;
|
||||
}
|
||||
function setAttributes(el, attrs) {
|
||||
for (var key in attrs) {
|
||||
el.setAttribute(key, attrs[key]);
|
||||
}
|
||||
}
|
||||
// displays a popup for asking permission. Use this instead of JS confirm
|
||||
let confirmation = function (message) {
|
||||
return new Promise(resolve => {
|
||||
let popup = document.getElementById('confirmation');
|
||||
showPopup('confirmation')
|
||||
popup.querySelector('#confirm_message').textContent = message;
|
||||
popup.querySelector('.submit-btn').onclick = () => {
|
||||
hidePopup()
|
||||
resolve(true);
|
||||
}
|
||||
popup.querySelector('.cancel-btn').onclick = () => {
|
||||
hidePopup()
|
||||
resolve(false);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// displays a popup for asking user input. Use this instead of JS prompt
|
||||
let askPrompt = function (message, defaultVal) {
|
||||
return new Promise(resolve => {
|
||||
let popup = document.getElementById('prompt'),
|
||||
input = popup.querySelector('input');
|
||||
if (defaultVal)
|
||||
input.value = defaultVal;
|
||||
showPopup('prompt')
|
||||
input.focus()
|
||||
input.addEventListener('keyup', e => {
|
||||
if (e.key === 'Enter') {
|
||||
resolve(input.value);
|
||||
hidePopup()
|
||||
}
|
||||
})
|
||||
popup.querySelector('#prompt_message').textContent = message;
|
||||
popup.querySelector('.submit-btn').onclick = () => {
|
||||
hidePopup()
|
||||
resolve(input.value);
|
||||
}
|
||||
popup.querySelector('.cancel-btn').onclick = () => {
|
||||
hidePopup()
|
||||
resolve(null);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function formatedTime(time) {
|
||||
let timeFrag = new Date(parseInt(time)).toString().split(' '),
|
||||
day = timeFrag[0],
|
||||
month = timeFrag[1],
|
||||
date = timeFrag[2],
|
||||
year = timeFrag[3],
|
||||
hours = timeFrag[4].slice(0, timeFrag[4].lastIndexOf(':')),
|
||||
finalTime = '';
|
||||
parseInt(hours.split(':')[0]) > 12 ? finalTime = 'PM' : finalTime = 'AM'
|
||||
return `${hours} ${finalTime} ${day} ${date} ${month} ${year}`
|
||||
}
|
||||
|
||||
function copyToClipboard(parent) {
|
||||
let toast = document.getElementById('textCopied'),
|
||||
textToCopy = parent.querySelector('.copy').textContent;
|
||||
navigator.clipboard.writeText(textToCopy)
|
||||
toast.classList.remove('hide');
|
||||
setTimeout(() => {
|
||||
toast.classList.add('hide');
|
||||
}, 2000)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user