mirror of
https://github.com/d3ward/toolz.git
synced 2024-09-20 14:56:17 +08:00
613 lines
21 KiB
HTML
613 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title> 404 - Not Found</title>
|
|
<link rel="shortcut icon" href="./src/svg/toolz.svg" type="image/svg+xml">
|
|
<title>Ad Blocker Test</title>
|
|
<style>
|
|
/* ---------------- Basic resets and improvements --------------- */
|
|
*,
|
|
*:after,
|
|
*:before {
|
|
box-sizing: border-box;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
html,
|
|
[data-theme=light] {
|
|
--black: #000;
|
|
--white: #fff;
|
|
--green: #2ECC40;
|
|
--blue: #0074D8;
|
|
--red: #FF4132;
|
|
--orange: #FF851A;
|
|
--yellow: #ffcd36;
|
|
--primary: #f3535b;
|
|
--accent: #E3F2FD;
|
|
--active: #ECEFF1;
|
|
--txt: #14191f;
|
|
--txt-r: var(--white);
|
|
--bg: #ffffff;
|
|
--bg2: #f9fafb;
|
|
--bg3: #edf0f2;
|
|
--brd: #C4CDD5;
|
|
--brd2: #a8afb6;
|
|
--bg-nav: var(--bg);
|
|
--bg-nav-hover: var(--bg2);
|
|
--bb-nav: var(--primary);
|
|
--bg-input: var(--bg2);
|
|
--brd-input: var(--bg2);
|
|
--bg-btn: var(--primary);
|
|
--bg-btn-hover: inset 0 0 100px 100px #ffffff20;
|
|
--txt-btn: var(--white);
|
|
--brd-btn: var(--primary);
|
|
--bg-card: var(--bg);
|
|
--b-shadow: #95abbb;
|
|
--bg-details: var(--bg2);
|
|
--bg-details-open: var(--primary);
|
|
--txt-details-open: var(--txt-r);
|
|
--bg-aside: transparent;
|
|
--shadow-aside: none;
|
|
--bg-tabs: var(--bg);
|
|
--brd-tabs-l: var(--primary);
|
|
--brd-tabs: var(--bg2);
|
|
--bg-table: var(--bg);
|
|
--fake-brd-table: inset 0 0px 0px 1px rgb(0 0 0 / 16%);
|
|
--bg-table-hover: var(--bg3);
|
|
--brd-table: var(--bg3);
|
|
--shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
|
|
--radius: .4rem;
|
|
--bg-square: #ffffff70;
|
|
}
|
|
|
|
[data-theme=dark] {
|
|
--black: #060609;
|
|
--white: #f2f4f7;
|
|
--blue: #4dacff;
|
|
--green: #67e5a8;
|
|
--red: #ff564d;
|
|
--orange: #ff9f4d;
|
|
--yellow: #ffd24d;
|
|
--primary: var(--white);
|
|
--txt: #f2f4f7;
|
|
--txt-r: #14191f;
|
|
--bg3: #2c3844;
|
|
--bg2: #242e37;
|
|
--bg: #14191f;
|
|
--bg-nav: var(--bg);
|
|
--bg-nav-hover: var(--bg2);
|
|
--bg-form: var(--bg2);
|
|
--bg-btn: var(--primary);
|
|
--bg-btn-hover: inset 0 0 100px 100px #00000033;
|
|
--brd-btn: var(--primary);
|
|
--txt-btn: var(--black);
|
|
--bg-card: var(--bg);
|
|
--bg-details: var(--bg2);
|
|
--bg-details2: var(--bg3);
|
|
--b-shadow: var(--black);
|
|
--bg-square: #00000070;
|
|
|
|
}
|
|
|
|
[data-theme=light] .light-icon,
|
|
[data-theme=dark] .dark-icon {
|
|
display: block !important;
|
|
}
|
|
|
|
.theme-icon {
|
|
display: none;
|
|
}
|
|
|
|
html {
|
|
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
font-size: 13pt;
|
|
scroll-behavior: smooth;
|
|
color: var(--txt);
|
|
background: var(--bg);
|
|
}
|
|
|
|
body,
|
|
html {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
background-color: #f7b42c;
|
|
background-image: linear-gradient(315deg, #f7b42c 0%, #fc575e 74%);
|
|
|
|
}
|
|
|
|
hr {
|
|
border: 0;
|
|
border-top: 2px solid var(--brd);
|
|
}
|
|
|
|
section {
|
|
overflow-x: hidden;
|
|
padding: 0 1rem 6rem;
|
|
}
|
|
|
|
li,
|
|
dd {
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
/* ------------------ Heading ----------------- */
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.6em;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2em;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.7em;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
h6 {
|
|
font-size: 1em;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
p strong,
|
|
p b {
|
|
color: var(--txt);
|
|
}
|
|
|
|
h1+h2,
|
|
h2+h3,
|
|
h3+h4,
|
|
h4+h5,
|
|
h5+h6 {
|
|
margin: 0;
|
|
}
|
|
|
|
/* ------------------- Links ------------------ */
|
|
a {
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
a:not([class*=btn]) {
|
|
border-bottom: 2px solid transparent;
|
|
}
|
|
|
|
a:not([class*=btn]):hover {
|
|
border-bottom: 2px solid currentColor;
|
|
}
|
|
|
|
/* ------------------ Header ------------------ */
|
|
header+.hero {
|
|
padding-top: 4rem;
|
|
}
|
|
|
|
.hero {
|
|
padding: 2rem 1rem;
|
|
text-align: center;
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
/* ------------ Animation On Scroll ----------- */
|
|
[class*=_aos],
|
|
._aos {
|
|
opacity: 0;
|
|
transition: opacity 1s, transform 1.3s;
|
|
}
|
|
|
|
._aos-zoom {
|
|
transform: scale(0.4);
|
|
}
|
|
|
|
._aos-left {
|
|
transform: translate3d(-100px, 0, 0);
|
|
}
|
|
|
|
._aos-right {
|
|
transform: translate3d(100px, 0, 0);
|
|
}
|
|
|
|
._aos-top {
|
|
transform: translate3d(0, -100px, 0);
|
|
}
|
|
|
|
._aos-bottom {
|
|
transform: translate3d(0, 100px, 0);
|
|
}
|
|
|
|
._aos-done {
|
|
opacity: 1;
|
|
transform: translateZ(0) scale(1);
|
|
}
|
|
|
|
@keyframes rotate-fade {
|
|
0% {
|
|
transform: translateY(0) rotate(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(-1000px) rotate(720deg) scale(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.squares {
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
top: 0;
|
|
left: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.squares li {
|
|
position: absolute;
|
|
display: block;
|
|
list-style: none;
|
|
width: 300px;
|
|
height: 150px;
|
|
bottom: -200px;
|
|
background-image: url('data:image/svg+xml,<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M150.717 23.77c-20.252 0-36.667 16.415-36.667 36.667v29.127c0 20.251 16.415 36.667 36.667 36.667 20.251 0 36.666-16.416 36.666-36.667v-29.13c0-20.258-16.408-36.664-36.666-36.664zm22 65.998c0 12.13-9.868 22-22 22-12.13 0-22-9.87-22-22V60.434c0-12.132 9.87-22 22-22 12.132 0 22 9.868 22 22zm117.676 3.154a7.334 7.334 0 01-7.333 7.333h-7.334v18.741a7.334 7.334 0 01-14.666 0v-18.741h-51.334a7.344 7.344 0 01-6.199-3.412 7.342 7.342 0 01-.43-7.061l29.334-61.921c1.724-3.66 6.124-5.211 9.768-3.486a7.338 7.338 0 013.488 9.77l-24.374 51.443h39.747V53.001a7.334 7.334 0 0114.666 0v32.587h7.334c4.056 0 7.333 3.3 7.333 7.334zm-192.785 0a7.334 7.334 0 01-7.334 7.333h-7.333v18.74a7.334 7.334 0 01-14.667 0v-18.74H16.941a7.344 7.344 0 01-6.2-3.413 7.342 7.342 0 01-.43-7.06L39.646 27.86c1.725-3.66 6.125-5.21 9.769-3.485a7.338 7.338 0 013.488 9.77L28.527 85.587h39.747V53a7.334 7.334 0 0114.667 0v32.588h7.333c4.057 0 7.334 3.3 7.334 7.333z"/></svg>');
|
|
animation: rotate-fade 5s linear infinite;
|
|
}
|
|
|
|
.squares li:nth-child(0) {
|
|
left: 80%;
|
|
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
.squares li:nth-child(1) {
|
|
left: 60%;
|
|
|
|
animation-delay: 4s;
|
|
}
|
|
|
|
.squares li:nth-child(2) {
|
|
left: 45%;
|
|
|
|
animation-delay: 8s;
|
|
}
|
|
|
|
.squares li:nth-child(3) {
|
|
left: 5%;
|
|
|
|
animation-delay: 12s;
|
|
}
|
|
|
|
.squares li:nth-child(4) {
|
|
left: 5%;
|
|
|
|
animation-delay: 16s;
|
|
}
|
|
|
|
.squares li:nth-child(5) {
|
|
left: 60%;
|
|
|
|
animation-delay: 20s;
|
|
}
|
|
|
|
.squares li:nth-child(6) {
|
|
left: 15%;
|
|
|
|
animation-delay: 24s;
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
margin: auto;
|
|
width: 100%;
|
|
max-width: 60rem;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
/* ---------------- Go Top Link --------------- */
|
|
.gt-link {
|
|
transition: all 0.25s ease-in-out;
|
|
position: fixed;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 1;
|
|
min-width: unset;
|
|
cursor: pointer;
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
.gt-link.hidden {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* ------------------ Buttons ----------------- */
|
|
button,
|
|
[class^=btn] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
justify-content: center;
|
|
border: 0px;
|
|
color: var(--txt-btn);
|
|
background-color: var(--bg-btn);
|
|
outline: none;
|
|
padding: 0.6rem;
|
|
font-size: inherit;
|
|
cursor: pointer;
|
|
border-radius: var(--radius);
|
|
margin: 0.5rem;
|
|
height: 2.6rem;
|
|
min-width: 100px;
|
|
transition: all 0.2s ease-in-out;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
button:focus,
|
|
[class^=btn]:focus {
|
|
outline: none;
|
|
}
|
|
|
|
button.mw-auto,
|
|
[class^=btn].mw-auto {
|
|
min-width: unset;
|
|
}
|
|
|
|
button[disabled],
|
|
[class^=btn][disabled] {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
button:not([disabled]):hover,
|
|
[class^=btn]:not([disabled]):hover {
|
|
box-shadow: var(--bg-btn-hover);
|
|
}
|
|
|
|
button.ghost,
|
|
[class^=btn].ghost {
|
|
background: transparent;
|
|
color: var(--txt);
|
|
border: 2px solid var(--bg-btn);
|
|
}
|
|
|
|
button.ghost:hover,
|
|
[class^=btn].ghost:hover {
|
|
background: var(--bg-btn);
|
|
color: var(--txt-btn) !important;
|
|
box-shadow: none;
|
|
}
|
|
|
|
button>svg,
|
|
[class^=btn]>svg {
|
|
display: block;
|
|
height: 1.3rem;
|
|
width: 1.3rem;
|
|
fill: currentColor;
|
|
max-height: 1.7rem;
|
|
}
|
|
|
|
/* ------------------- Card ------------------- */
|
|
.card {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
padding: 1rem;
|
|
background: var(--bg-card);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.card>* {
|
|
width: 100%;
|
|
margin: 0;
|
|
margin-top: .5rem;
|
|
}
|
|
|
|
.card>.img-w {
|
|
padding: 1rem;
|
|
box-shadow: 0 8px 20px -4px var(--b-shadow);
|
|
max-width: 100px;
|
|
border-radius: 50%;
|
|
margin: 15px auto 15px;
|
|
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
.card>p {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
._2-col {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: .5rem;
|
|
}
|
|
|
|
@media only screen and (min-width: 564px) {
|
|
._2-col {
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<ul class="squares">
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
<main>
|
|
<div class="hero">
|
|
<div class="_aos-top">
|
|
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M150.717 23.77c-20.252 0-36.667 16.415-36.667 36.667v29.127c0 20.251 16.415 36.667 36.667 36.667 20.251 0 36.666-16.416 36.666-36.667v-29.13c0-20.258-16.408-36.664-36.666-36.664zm22 65.998c0 12.13-9.868 22-22 22-12.13 0-22-9.87-22-22V60.434c0-12.132 9.87-22 22-22 12.132 0 22 9.868 22 22zm117.676 3.154a7.334 7.334 0 01-7.333 7.333h-7.334v18.741a7.334 7.334 0 01-14.666 0v-18.741h-51.334a7.344 7.344 0 01-6.199-3.412 7.342 7.342 0 01-.43-7.061l29.334-61.921c1.724-3.66 6.124-5.211 9.768-3.486a7.338 7.338 0 013.488 9.77l-24.374 51.443h39.747V53.001a7.334 7.334 0 0114.666 0v32.587h7.334c4.056 0 7.333 3.3 7.333 7.334zm-192.785 0a7.334 7.334 0 01-7.334 7.333h-7.333v18.74a7.334 7.334 0 01-14.667 0v-18.74H16.941a7.344 7.344 0 01-6.2-3.413 7.342 7.342 0 01-.43-7.06L39.646 27.86c1.725-3.66 6.125-5.21 9.769-3.485a7.338 7.338 0 013.488 9.77L28.527 85.587h39.747V53a7.334 7.334 0 0114.667 0v32.588h7.333c4.057 0 7.334 3.3 7.334 7.333z" />
|
|
</svg>
|
|
</div>
|
|
<div class="_aos-bottom _txt-black">
|
|
<h2><strong>Not Found</strong></h2>
|
|
<h5>But maybe you are looking for one of these toolz !</h5>
|
|
</div>
|
|
</div>
|
|
<section>
|
|
<div class="_2-col" id="ext-grid">
|
|
<a href="https://d3ward.github.io/toolz/adblock.html">
|
|
<div class="card _aos-bottom _txt">
|
|
<div class="img-w"><svg version="1.0" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 106 106">
|
|
<path
|
|
d="M35 1.5c-9.1 2-22.1 6.3-25.9 8.6-4.3 2.6-4.9 4.8-4.6 16.6.8 25.7 13 51.2 32.8 68.7 8.2 7.2 13.1 10.6 15.5 10.6 4.9 0 20.6-13.4 29.6-25.4 12.6-16.7 18.8-35 19-55.9.1-10.6 0-10.9-2.6-13.2C95.7 8.8 87.9 5.7 77 2.8 67.2.2 44.4-.5 35 1.5zm36 6.6c7.5 1.4 22.7 6.6 23.7 8.2 1.1 1.8.5 14.1-1.1 22.2-2.3 11.6-8 25.8-14.1 35-4.6 7-18.5 21.4-23.4 24.4l-3.4 2-3.1-2.2C40 91.1 28.7 77.9 22.2 66c-3.6-6.6-8.7-20.7-9.7-27-.4-2.5-.9-5.2-1-6.1-.4-2-.7-10.2-.6-14.2.1-2.3.9-3.1 4.9-4.8 15.7-6.8 36.9-9 55.2-5.8z" />
|
|
<path
|
|
d="M44.7 13.6c-.1.1-2.4.4-5.2.8-5.8.7-14.8 3.2-18.9 5.3-2.9 1.5-2.9 1.5-2.3 9.1.6 9.1 3.3 21.2 5.1 23.8 1.3 1.7 1.5 1.7 6 0 2.5-1 4.6-2.2 4.6-2.7s.1-1.1.1-1.4c.1-.2.6-2.8 1-5.6C36.9 31.3 48.6 24 59.6 27.7 63.4 29 71 35.2 71 37.1c0 2.5 14.5-.3 16-3.1.5-1 1-4.1 1.1-7 .2-4.2-.2-5.6-1.7-6.7-2.3-1.7-13.6-5.2-18.9-5.9-4.2-.6-22.3-1.2-22.8-.8zM76.5 46.9c-2.3.5-3.3 1.5-4.5 4.7-5 13.2-19.1 17.9-29.7 9.8-3.1-2.3-3.6-2.4-6.9-1.2-5 1.8-5.9 3.9-3.7 8.6 2.5 5.3 18.2 21.2 21 21.2 2.9 0 14.1-10.5 19.9-18.6C79.4 61.9 85.8 47 83.1 47c-.5 0-1.5-.2-2.3-.4-.7-.2-2.6-.1-4.3.3z" />
|
|
</svg></div>
|
|
<h5 class="_txt-center">Adblock Test</h5>
|
|
</div>
|
|
</a>
|
|
<a href="https://d3ward.github.io/toolz/fontlist.html" >
|
|
<div class="card _aos-bottom _txt">
|
|
<div class="img-w"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill="currentColor"
|
|
d="M216 120h272c13.3 0 24-10.7 24-24s-10.75-24-24-24H216c-13.3 0-24 10.75-24 24s10.7 24 24 24zm272 272H216c-13.3 0-24 10.7-24 24s10.75 24 24 24h272c13.25 0 24-10.75 24-24s-10.7-24-24-24zm0-160H216c-13.3 0-24 10.7-24 24s10.75 24 24 24h272c13.3 0 24-10.7 24-24s-10.7-24-24-24zM191.384 208.425L116.16 29.321c-3.344-7.975-16.469-7.975-19.813 0L21.123 208.425c-2.302 5.472.273 11.776 5.744 14.069a10.73 10.73 0 0014.07-5.745l15.129-36.022h100.388l15.13 36.022c1.71 4.124 5.695 6.587 9.904 6.587 1.386 0 2.799-.266 4.156-.84 5.471-2.295 8.068-8.608 5.74-14.07zM65.115 159.216l41.15-98.373 41.158 98.015H65.115zM153.843 356.303c10.402-10.045 16.92-24.107 16.92-39.687 0-30.523-24.822-55.358-55.358-55.358h-62.5c-5.915 0-10.714 4.8-10.714 10.715v178.571c0 5.938 4.8 10.714 10.714 10.714h76.786c30.536 0 55.357-24.821 55.357-55.357 0-21.83-12.812-40.58-31.205-49.598zM63.62 282.687h51.785c18.71 0 33.929 15.219 33.929 33.929s-15.223 33.928-33.929 33.928H63.62zM129.69 439.83H63.62v-67.857h66.071c18.71 0 33.929 15.218 33.929 33.928 0 18.71-15.224 33.929-33.929 33.929z" />
|
|
</svg></div>
|
|
<h5 class="_txt-center">FontList</h5>
|
|
</div>
|
|
</a>
|
|
<a href="https://d3ward.github.io/toolz/units.html" >
|
|
<div class="card _aos-bottom _txt">
|
|
<div class="img-w">
|
|
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
<path fill="currentColor"
|
|
d="M464 272h-224v-224C240 21.6 218.4 0 192 0H48C21.6 0 0 21.6 0 48v416C0 490.4 21.6 512 48 512h416c26.4 0 48-21.6 48-48V320C512 293.6 490.4 272 464 272zM464 464h-416v-416H192v47.1H112c-8.836 0-16 7.162-16 16c0 8.836 7.164 16 16 16L192 128v64H112C103.2 192 96 199.2 96 208C96 216.8 103.2 224 112 224H192v64H112C103.2 288 96 295.2 96 304C96 312.8 103.2 320 112 320H192v80C192 408.8 199.2 416 208 416C216.8 416 224 408.8 224 400V320h64v80c0 8.836 7.164 16 16 16c8.838 0 16-7.164 16-16V320h64v80c0 8.836 7.164 16 16 16c8.838 0 16-7.164 16-16V320h48V464z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
<h5 class="_txt-center">Units</h5>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
<footer class="_bg _radius _aos">
|
|
<div class="cnt ">
|
|
<div class="grid">
|
|
<div>Icons by <b><a href="https://heroicons.dev/">Heroicons</a> (<a
|
|
href="https://github.com/tailwindlabs/heroicons/blob/master/LICENSE"
|
|
class="_txt-cl">MIT</a>)</b>
|
|
</div>
|
|
<div>
|
|
Designed by Eduard Ursu(<b><a href="https://d3ward.github.io">d3ward</a></b>) © 2021
|
|
</div>
|
|
<div>
|
|
Licensed under <b><a
|
|
href="https://creativecommons.org/licenses/by-nc-sa/4.0/">[NC-SA-4.0]</a></b>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
<button class="gt-link hide" id="gt-link">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6">
|
|
<path d="M12 6H0l6-6z" /></svg>
|
|
</button>
|
|
</body>
|
|
<script>
|
|
function aos() {
|
|
const t = this;
|
|
t.items = document.querySelectorAll("[class*=_aos]");
|
|
if (IntersectionObserver && t.items) {
|
|
let callback = function (entries) {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting && !entry.target.classList.contains('_aos-done')) {
|
|
entry.target.classList.add('_aos-done');
|
|
} else {
|
|
entry.target.classList.remove('_aos-done');
|
|
}
|
|
});
|
|
}
|
|
let observer = new IntersectionObserver(callback, {
|
|
root: null,
|
|
threshold: 0
|
|
});
|
|
t.items.forEach((item) => {
|
|
observer.observe(item);
|
|
});
|
|
}
|
|
}
|
|
|
|
function gotop() {
|
|
var t = this;
|
|
t.gt = document.getElementById('gt-link');
|
|
t.scrollToTop = function () {
|
|
window.scroll({
|
|
top: 0,
|
|
left: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
t.listeners = function () {
|
|
window.addEventListener("scroll", () => {
|
|
let y = window.scrollY;
|
|
if (y > 0) {
|
|
t.gt.classList.remove("hidden");
|
|
} else {
|
|
t.gt.classList.add("hidden");
|
|
}
|
|
});
|
|
t.gt.onclick = function (e) {
|
|
e.preventDefault();
|
|
if (document.documentElement.scrollTop || document.body.scrollTop > 0) {
|
|
t.scrollToTop();
|
|
}
|
|
}
|
|
}
|
|
if (t.gt) {
|
|
t.listeners();
|
|
}
|
|
}
|
|
// Call the function when the DOM is loaded
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
new gotop();
|
|
new aos();
|
|
});
|
|
</script>
|
|
|
|
</html> |