gruby refaktor otyły panie
@@ -0,0 +1,6 @@
|
||||
Thanks for downloading this template!
|
||||
|
||||
Template Name: FolioOne
|
||||
Template URL: https://bootstrapmade.com/folioone-bootstrap-portfolio-website-template/
|
||||
Author: BootstrapMade.com
|
||||
License: https://bootstrapmade.com/license/
|
||||
@@ -0,0 +1,529 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>About - FolioOne Bootstrap Template</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link href="assets/img/favicon.png" rel="icon">
|
||||
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link href="https://fonts.googleapis.com" rel="preconnect">
|
||||
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Vendor CSS Files -->
|
||||
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
|
||||
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Main CSS File -->
|
||||
<link href="assets/css/main.css" rel="stylesheet">
|
||||
|
||||
<!-- =======================================================
|
||||
* Template Name: FolioOne
|
||||
* Template URL: https://bootstrapmade.com/folioone-bootstrap-portfolio-website-template/
|
||||
* Updated: Aug 23 2025 with Bootstrap v5.3.7
|
||||
* Author: BootstrapMade.com
|
||||
* License: https://bootstrapmade.com/license/
|
||||
======================================================== -->
|
||||
</head>
|
||||
|
||||
<body class="about-page">
|
||||
|
||||
<header id="header" class="header d-flex align-items-center light-background sticky-top">
|
||||
<div class="container position-relative d-flex align-items-center justify-content-between">
|
||||
|
||||
<!-- <a href="index.html" class="logo d-flex align-items-center me-auto me-xl-0">
|
||||
<img src="assets/img/logo.webp" alt="">
|
||||
<h1 class="sitename">FolioOne</h1>
|
||||
</a> -->
|
||||
|
||||
<nav id="navmenu" class="navmenu">
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="about.html" class="active">About</a></li>
|
||||
<li><a href="resume.html">Resume</a></li>
|
||||
<li><a href="services.html">Services</a></li>
|
||||
<li><a href="portfolio.html">Portfolio</a></li>
|
||||
<li class="dropdown"><a href="#"><span>Dropdown</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
|
||||
<ul>
|
||||
<li><a href="#">Dropdown 1</a></li>
|
||||
<li class="dropdown"><a href="#"><span>Deep Dropdown</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
|
||||
<ul>
|
||||
<li><a href="#">Deep Dropdown 1</a></li>
|
||||
<li><a href="#">Deep Dropdown 2</a></li>
|
||||
<li><a href="#">Deep Dropdown 3</a></li>
|
||||
<li><a href="#">Deep Dropdown 4</a></li>
|
||||
<li><a href="#">Deep Dropdown 5</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Dropdown 2</a></li>
|
||||
<li><a href="#">Dropdown 3</a></li>
|
||||
<li><a href="#">Dropdown 4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
</ul>
|
||||
<i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
|
||||
</nav>
|
||||
|
||||
<div class="header-social-links">
|
||||
<a href="#" class="twitter"><i class="bi bi-twitter-x"></i></a>
|
||||
<a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
|
||||
<a href="#" class="instagram"><i class="bi bi-instagram"></i></a>
|
||||
<a href="#" class="linkedin"><i class="bi bi-linkedin"></i></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="about section">
|
||||
|
||||
<!-- Section Title -->
|
||||
<div class="container section-title" data-aos="fade-up">
|
||||
<h2>About</h2>
|
||||
<p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam</p>
|
||||
</div><!-- End Section Title -->
|
||||
|
||||
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
||||
|
||||
<!-- Intro + Photo -->
|
||||
<div class="row align-items-center justify-content-between gy-5 mb-5">
|
||||
<div class="col-lg-7" data-aos="fade-right" data-aos-delay="150">
|
||||
<div class="intro-content">
|
||||
<span class="eyebrow">Hello there</span>
|
||||
<h2 class="headline">Hi, I'm Brandon - a calm-minded creative developer crafting serene digital journeys</h2>
|
||||
<p class="lead">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus. Sed interdum, nunc non feugiat tempor, orci lorem luctus ligula, vitae rutrum nisl lorem non nulla.
|
||||
</p>
|
||||
<p>
|
||||
Integer posuere lacus in mi fringilla, eget luctus risus pulvinar. Curabitur a arcu a nisl tempus sagittis. Aenean varius, tortor sed porttitor dictum, augue eros viverra lectus, at efficitur magna lacus in risus.
|
||||
</p>
|
||||
|
||||
<div class="cta-group">
|
||||
<a href="#portfolio" class="btn-ghost">
|
||||
View My Work <i class="bi bi-arrow-up-right"></i>
|
||||
</a>
|
||||
<a href="#" class="link-underline">
|
||||
Download Resume <i class="bi bi-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-5" data-aos="zoom-in" data-aos-delay="250">
|
||||
<figure class="profile-figure text-center text-lg-end">
|
||||
<img src="assets/img/profile/profile-square-11.webp" alt="Portrait of Alex" class="img-fluid profile-photo">
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Intro + Photo -->
|
||||
|
||||
<!-- Skills Grid -->
|
||||
<div class="mb-5">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-md-4 col-lg-3" data-aos="fade-up" data-aos-delay="120">
|
||||
<div class="skill-item">
|
||||
<i class="bi bi-layout-text-window"></i>
|
||||
<h3>UI/UX</h3>
|
||||
<p>Vivamus sagittis lacus molestie placerat.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-3" data-aos="fade-up" data-aos-delay="180">
|
||||
<div class="skill-item">
|
||||
<i class="bi bi-code-slash"></i>
|
||||
<h3>React.js</h3>
|
||||
<p>Maecenas pharetra magna sit amet risus.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-3" data-aos="fade-up" data-aos-delay="240">
|
||||
<div class="skill-item">
|
||||
<i class="bi bi-phone"></i>
|
||||
<h3>Mobile-first</h3>
|
||||
<p>Donec id elit non mi porta gravida.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-3" data-aos="fade-up" data-aos-delay="300">
|
||||
<div class="skill-item">
|
||||
<i class="bi bi-camera"></i>
|
||||
<h3>Photography</h3>
|
||||
<p>Aliquam euismod nunc at augue cursus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Skills Grid -->
|
||||
|
||||
<!-- Journey Timeline -->
|
||||
<div class="mb-5">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="120">
|
||||
<article class="timeline-item">
|
||||
<span class="dot"></span>
|
||||
<time>2018</time>
|
||||
<h4>B.A. in Design</h4>
|
||||
<p>Quisque euismod turpis ut sapien luctus bibendum.</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="180">
|
||||
<article class="timeline-item">
|
||||
<span class="dot"></span>
|
||||
<time>2020</time>
|
||||
<h4>Freelance Start</h4>
|
||||
<p>Mauris non arcu non urna convallis vulputate.</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="240">
|
||||
<article class="timeline-item">
|
||||
<span class="dot"></span>
|
||||
<time>2022</time>
|
||||
<h4>Joined Creative Studio</h4>
|
||||
<p>Nunc sed nibh et libero fermentum posuere.</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="300">
|
||||
<article class="timeline-item">
|
||||
<span class="dot"></span>
|
||||
<time>2024</time>
|
||||
<h4>Lead Frontend</h4>
|
||||
<p>Proin commodo massa sit amet urna pretium.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Journey Timeline -->
|
||||
|
||||
<!-- Quote -->
|
||||
<blockquote class="personal-quote text-center mb-5" data-aos="fade-down" data-aos-delay="200">
|
||||
<p>"Building clean and meaningful experiences through thoughtful code and quiet design."</p>
|
||||
</blockquote>
|
||||
<!-- End Quote -->
|
||||
|
||||
<!-- Fun Facts -->
|
||||
<div class="row g-3 justify-content-center">
|
||||
<div class="col-6 col-md-3 col-lg-2" data-aos="zoom-in" data-aos-delay="120">
|
||||
<div class="fact-pill">
|
||||
<i class="bi bi-magic"></i>
|
||||
<span>Minimalism</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3 col-lg-2" data-aos="zoom-in" data-aos-delay="160">
|
||||
<div class="fact-pill">
|
||||
<i class="bi bi-headphones"></i>
|
||||
<span>Lo-fi Beats</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3 col-lg-2" data-aos="zoom-in" data-aos-delay="200">
|
||||
<div class="fact-pill">
|
||||
<i class="bi bi-geo-alt"></i>
|
||||
<span>City Walks</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3 col-lg-2" data-aos="zoom-in" data-aos-delay="240">
|
||||
<div class="fact-pill">
|
||||
<i class="bi bi-brush"></i>
|
||||
<span>Sketching</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Fun Facts -->
|
||||
|
||||
</div>
|
||||
|
||||
</section><!-- /About Section -->
|
||||
|
||||
<!-- Skills Section -->
|
||||
<section id="skills" class="skills section">
|
||||
|
||||
<!-- Section Title -->
|
||||
<div class="container section-title" data-aos="fade-up">
|
||||
<h2>Skills</h2>
|
||||
<p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam</p>
|
||||
</div><!-- End Section Title -->
|
||||
|
||||
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
||||
|
||||
<div class="row g-4 skills-animation">
|
||||
|
||||
<div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="100">
|
||||
<div class="skill-box">
|
||||
<h3>HTML</h3>
|
||||
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
|
||||
<span class="text-end d-block">90%</span>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
|
||||
<div class="skill-box">
|
||||
<h3>CSS</h3>
|
||||
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur.</p>
|
||||
<span class="text-end d-block">90%</span>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="300">
|
||||
<div class="skill-box">
|
||||
<h3>JavaScript</h3>
|
||||
<p>Neque porro quisquam est qui dolorem ipsum quia dolor.</p>
|
||||
<span class="text-end d-block">80%</span>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="400">
|
||||
<div class="skill-box">
|
||||
<h3>Photoshop</h3>
|
||||
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate.</p>
|
||||
<span class="text-end d-block">55%</span>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section><!-- /Skills Section -->
|
||||
|
||||
<!-- Stats Section -->
|
||||
<section id="stats" class="stats section dark-background">
|
||||
|
||||
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
||||
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
|
||||
<div class="avatars d-flex align-items-center">
|
||||
<img src="assets/img/person/person-m-2.webp" alt="Avatar 1" class="rounded-circle" loading="lazy">
|
||||
<img src="assets/img/person/person-m-3.webp" alt="Avatar 2" class="rounded-circle" loading="lazy">
|
||||
<img src="assets/img/person/person-f-5.webp" alt="Avatar 3" class="rounded-circle" loading="lazy">
|
||||
<img src="assets/img/person/person-m-5.webp" alt="Avatar 4" class="rounded-circle" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<div class="row counters">
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="300">
|
||||
<h2><span data-purecounter-start="0" data-purecounter-end="185" data-purecounter-duration="1" class="purecounter"></span>+</h2>
|
||||
<p>Nemo enim ipsam</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="400">
|
||||
<h2><span data-purecounter-start="0" data-purecounter-end="32" data-purecounter-duration="1" class="purecounter"></span>K</h2>
|
||||
<p>Voluptatem sequi</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4" data-aos="fade-up" data-aos-delay="500">
|
||||
<h2><span data-purecounter-start="0" data-purecounter-end="128" data-purecounter-duration="1" class="purecounter"></span>+</h2>
|
||||
<p>Dolor sit consectetur</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section><!-- /Stats Section -->
|
||||
|
||||
<!-- Testimonials Section -->
|
||||
<section id="testimonials" class="testimonials section">
|
||||
|
||||
<!-- Section Title -->
|
||||
<div class="container section-title" data-aos="fade-up">
|
||||
<h2>Testimonials</h2>
|
||||
<p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
|
||||
</div><!-- End Section Title -->
|
||||
|
||||
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
||||
|
||||
<div class="swiper init-swiper">
|
||||
<script type="application/json" class="swiper-config">
|
||||
{
|
||||
"loop": true,
|
||||
"speed": 600,
|
||||
"autoplay": {
|
||||
"delay": 5000
|
||||
},
|
||||
"slidesPerView": "auto",
|
||||
"pagination": {
|
||||
"el": ".swiper-pagination",
|
||||
"type": "bullets",
|
||||
"clickable": true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<div class="swiper-wrapper">
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="testimonial-item">
|
||||
<div class="row gy-4 justify-content-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="testimonial-content">
|
||||
<p>
|
||||
<i class="bi bi-quote quote-icon-left"></i>
|
||||
<span>Proin iaculis purus consequat sem cure digni ssim donec porttitora entum suscipit rhoncus. Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen aliquam, risus at semper.</span>
|
||||
<i class="bi bi-quote quote-icon-right"></i>
|
||||
</p>
|
||||
<h3>Saul Goodman</h3>
|
||||
<h4>Ceo & Founder</h4>
|
||||
<div class="stars">
|
||||
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-2 text-center">
|
||||
<img src="assets/img/person/person-m-9.webp" class="img-fluid testimonial-img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- End testimonial item -->
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="testimonial-item">
|
||||
<div class="row gy-4 justify-content-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="testimonial-content">
|
||||
<p>
|
||||
<i class="bi bi-quote quote-icon-left"></i>
|
||||
<span>Export tempor illum tamen malis malis eram quae irure esse labore quem cillum quid cillum eram malis quorum velit fore eram velit sunt aliqua noster fugiat irure amet legam anim culpa.</span>
|
||||
<i class="bi bi-quote quote-icon-right"></i>
|
||||
</p>
|
||||
<h3>Sara Wilsson</h3>
|
||||
<h4>Designer</h4>
|
||||
<div class="stars">
|
||||
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-2 text-center">
|
||||
<img src="assets/img/person/person-f-5.webp" class="img-fluid testimonial-img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- End testimonial item -->
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="testimonial-item">
|
||||
<div class="row gy-4 justify-content-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="testimonial-content">
|
||||
<p>
|
||||
<i class="bi bi-quote quote-icon-left"></i>
|
||||
<span>Enim nisi quem export duis labore cillum quae magna enim sint quorum nulla quem veniam duis minim tempor labore quem eram duis noster aute amet eram fore quis sint minim.</span>
|
||||
<i class="bi bi-quote quote-icon-right"></i>
|
||||
</p>
|
||||
<h3>Jena Karlis</h3>
|
||||
<h4>Store Owner</h4>
|
||||
<div class="stars">
|
||||
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-2 text-center">
|
||||
<img src="assets/img/person/person-f-12.webp" class="img-fluid testimonial-img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- End testimonial item -->
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="testimonial-item">
|
||||
<div class="row gy-4 justify-content-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="testimonial-content">
|
||||
<p>
|
||||
<i class="bi bi-quote quote-icon-left"></i>
|
||||
<span>Fugiat enim eram quae cillum dolore dolor amet nulla culpa multos export minim fugiat minim velit minim dolor enim duis veniam ipsum anim magna sunt elit fore quem dolore labore illum veniam.</span>
|
||||
<i class="bi bi-quote quote-icon-right"></i>
|
||||
</p>
|
||||
<h3>John Larson</h3>
|
||||
<h4>Entrepreneur</h4>
|
||||
<div class="stars">
|
||||
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-2 text-center">
|
||||
<img src="assets/img/person/person-m-12.webp" class="img-fluid testimonial-img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- End testimonial item -->
|
||||
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section><!-- /Testimonials Section -->
|
||||
|
||||
</main>
|
||||
|
||||
<footer id="footer" class="footer">
|
||||
|
||||
<div class="container">
|
||||
<div class="copyright text-center ">
|
||||
<p>© <span>Copyright</span> <strong class="px-1 sitename">FolioOne</strong> <span>All Rights Reserved<br></span></p>
|
||||
</div>
|
||||
<div class="social-links d-flex justify-content-center">
|
||||
<a href=""><i class="bi bi-twitter-x"></i></a>
|
||||
<a href=""><i class="bi bi-facebook"></i></a>
|
||||
<a href=""><i class="bi bi-instagram"></i></a>
|
||||
<a href=""><i class="bi bi-linkedin"></i></a>
|
||||
</div>
|
||||
<div class="credits">
|
||||
<!-- All the links in the footer should remain intact. -->
|
||||
<!-- You can delete the links only if you've purchased the pro version. -->
|
||||
<!-- Licensing information: https://bootstrapmade.com/license/ -->
|
||||
<!-- Purchase the pro version with working PHP/AJAX contact form: [buy-url] -->
|
||||
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a> | <a href="https://bootstrapmade.com/tools/">DevTools</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
|
||||
<!-- Scroll Top -->
|
||||
<a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
|
||||
|
||||
<!-- Preloader -->
|
||||
<div id="preloader"></div>
|
||||
|
||||
<!-- Vendor JS Files -->
|
||||
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/vendor/php-email-form/validate.js"></script>
|
||||
<script src="assets/vendor/aos/aos.js"></script>
|
||||
<script src="assets/vendor/typed.js/typed.umd.js"></script>
|
||||
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
|
||||
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
|
||||
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
|
||||
<script src="assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
|
||||
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
|
||||
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
|
||||
|
||||
<!-- Main JS File -->
|
||||
<script src="assets/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 92 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 90 KiB |
|
After Width: | Height: | Size: 376 KiB |
|
After Width: | Height: | Size: 28 KiB |
@@ -0,0 +1,204 @@
|
||||
/**
|
||||
* Template Name: FolioOne
|
||||
* Template URL: https://bootstrapmade.com/folioone-bootstrap-portfolio-website-template/
|
||||
* Updated: Aug 23 2025 with Bootstrap v5.3.7
|
||||
* Author: BootstrapMade.com
|
||||
* License: https://bootstrapmade.com/license/
|
||||
*/
|
||||
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Apply .scrolled class to the body as the page is scrolled down
|
||||
*/
|
||||
function toggleScrolled() {
|
||||
const selectBody = document.querySelector('body');
|
||||
const selectHeader = document.querySelector('#header');
|
||||
if (!selectHeader.classList.contains('scroll-up-sticky') && !selectHeader.classList.contains('sticky-top') && !selectHeader.classList.contains('fixed-top')) return;
|
||||
window.scrollY > 100 ? selectBody.classList.add('scrolled') : selectBody.classList.remove('scrolled');
|
||||
}
|
||||
|
||||
document.addEventListener('scroll', toggleScrolled);
|
||||
window.addEventListener('load', toggleScrolled);
|
||||
|
||||
/**
|
||||
* Mobile nav toggle
|
||||
*/
|
||||
const mobileNavToggleBtn = document.querySelector('.mobile-nav-toggle');
|
||||
|
||||
function mobileNavToogle() {
|
||||
document.querySelector('body').classList.toggle('mobile-nav-active');
|
||||
mobileNavToggleBtn.classList.toggle('bi-list');
|
||||
mobileNavToggleBtn.classList.toggle('bi-x');
|
||||
}
|
||||
if (mobileNavToggleBtn) {
|
||||
mobileNavToggleBtn.addEventListener('click', mobileNavToogle);
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide mobile nav on same-page/hash links
|
||||
*/
|
||||
document.querySelectorAll('#navmenu a').forEach(navmenu => {
|
||||
navmenu.addEventListener('click', () => {
|
||||
if (document.querySelector('.mobile-nav-active')) {
|
||||
mobileNavToogle();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* Toggle mobile nav dropdowns
|
||||
*/
|
||||
document.querySelectorAll('.navmenu .toggle-dropdown').forEach(navmenu => {
|
||||
navmenu.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
this.parentNode.classList.toggle('active');
|
||||
this.parentNode.nextElementSibling.classList.toggle('dropdown-active');
|
||||
e.stopImmediatePropagation();
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Preloader
|
||||
*/
|
||||
const preloader = document.querySelector('#preloader');
|
||||
if (preloader) {
|
||||
window.addEventListener('load', () => {
|
||||
preloader.remove();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Scroll top button
|
||||
*/
|
||||
let scrollTop = document.querySelector('.scroll-top');
|
||||
|
||||
function toggleScrollTop() {
|
||||
if (scrollTop) {
|
||||
window.scrollY > 100 ? scrollTop.classList.add('active') : scrollTop.classList.remove('active');
|
||||
}
|
||||
}
|
||||
scrollTop.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('load', toggleScrollTop);
|
||||
document.addEventListener('scroll', toggleScrollTop);
|
||||
|
||||
/**
|
||||
* Animation on scroll function and init
|
||||
*/
|
||||
function aosInit() {
|
||||
AOS.init({
|
||||
duration: 600,
|
||||
easing: 'ease-in-out',
|
||||
once: true,
|
||||
mirror: false
|
||||
});
|
||||
}
|
||||
window.addEventListener('load', aosInit);
|
||||
|
||||
/**
|
||||
* Init typed.js
|
||||
*/
|
||||
const selectTyped = document.querySelector('.typed');
|
||||
if (selectTyped) {
|
||||
let typed_strings = selectTyped.getAttribute('data-typed-items');
|
||||
typed_strings = typed_strings.split(',');
|
||||
new Typed('.typed', {
|
||||
strings: typed_strings,
|
||||
loop: true,
|
||||
typeSpeed: 100,
|
||||
backSpeed: 50,
|
||||
backDelay: 2000
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Animate the skills items on reveal
|
||||
*/
|
||||
let skillsAnimation = document.querySelectorAll('.skills-animation');
|
||||
skillsAnimation.forEach((item) => {
|
||||
new Waypoint({
|
||||
element: item,
|
||||
offset: '80%',
|
||||
handler: function(direction) {
|
||||
let progress = item.querySelectorAll('.progress .progress-bar');
|
||||
progress.forEach(el => {
|
||||
el.style.width = el.getAttribute('aria-valuenow') + '%';
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Initiate Pure Counter
|
||||
*/
|
||||
new PureCounter();
|
||||
|
||||
/**
|
||||
* Init swiper sliders
|
||||
*/
|
||||
function initSwiper() {
|
||||
document.querySelectorAll(".init-swiper").forEach(function(swiperElement) {
|
||||
let config = JSON.parse(
|
||||
swiperElement.querySelector(".swiper-config").innerHTML.trim()
|
||||
);
|
||||
|
||||
if (swiperElement.classList.contains("swiper-tab")) {
|
||||
initSwiperWithCustomPagination(swiperElement, config);
|
||||
} else {
|
||||
new Swiper(swiperElement, config);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener("load", initSwiper);
|
||||
|
||||
/**
|
||||
* Init isotope layout and filters
|
||||
*/
|
||||
document.querySelectorAll('.isotope-layout').forEach(function(isotopeItem) {
|
||||
let layout = isotopeItem.getAttribute('data-layout') ?? 'masonry';
|
||||
let filter = isotopeItem.getAttribute('data-default-filter') ?? '*';
|
||||
let sort = isotopeItem.getAttribute('data-sort') ?? 'original-order';
|
||||
|
||||
let initIsotope;
|
||||
imagesLoaded(isotopeItem.querySelector('.isotope-container'), function() {
|
||||
initIsotope = new Isotope(isotopeItem.querySelector('.isotope-container'), {
|
||||
itemSelector: '.isotope-item',
|
||||
layoutMode: layout,
|
||||
filter: filter,
|
||||
sortBy: sort
|
||||
});
|
||||
});
|
||||
|
||||
isotopeItem.querySelectorAll('.isotope-filters li').forEach(function(filters) {
|
||||
filters.addEventListener('click', function() {
|
||||
isotopeItem.querySelector('.isotope-filters .filter-active').classList.remove('filter-active');
|
||||
this.classList.add('filter-active');
|
||||
initIsotope.arrange({
|
||||
filter: this.getAttribute('data-filter')
|
||||
});
|
||||
if (typeof aosInit === 'function') {
|
||||
aosInit();
|
||||
}
|
||||
}, false);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* Initiate glightbox
|
||||
*/
|
||||
const glightbox = GLightbox({
|
||||
selector: '.glightbox'
|
||||
});
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,2 @@
|
||||
The .scss (Sass) files are only available in the pro version.
|
||||
You can buy it from: https://bootstrapmade.com/folioone-bootstrap-portfolio-website-template/
|
||||
@@ -0,0 +1,614 @@
|
||||
'use strict';
|
||||
|
||||
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
||||
|
||||
var throttle = _interopDefault(require('lodash.throttle'));
|
||||
var debounce = _interopDefault(require('lodash.debounce'));
|
||||
|
||||
var callback = function callback() {};
|
||||
|
||||
function containsAOSNode(nodes) {
|
||||
var i = void 0,
|
||||
currentNode = void 0,
|
||||
result = void 0;
|
||||
|
||||
for (i = 0; i < nodes.length; i += 1) {
|
||||
currentNode = nodes[i];
|
||||
|
||||
if (currentNode.dataset && currentNode.dataset.aos) {
|
||||
return true;
|
||||
}
|
||||
|
||||
result = currentNode.children && containsAOSNode(currentNode.children);
|
||||
|
||||
if (result) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function check(mutations) {
|
||||
if (!mutations) return;
|
||||
|
||||
mutations.forEach(function (mutation) {
|
||||
var addedNodes = Array.prototype.slice.call(mutation.addedNodes);
|
||||
var removedNodes = Array.prototype.slice.call(mutation.removedNodes);
|
||||
var allNodes = addedNodes.concat(removedNodes);
|
||||
|
||||
if (containsAOSNode(allNodes)) {
|
||||
return callback();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getMutationObserver() {
|
||||
return window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
|
||||
}
|
||||
|
||||
function isSupported() {
|
||||
return !!getMutationObserver();
|
||||
}
|
||||
|
||||
function ready(selector, fn) {
|
||||
var doc = window.document;
|
||||
var MutationObserver = getMutationObserver();
|
||||
|
||||
var observer = new MutationObserver(check);
|
||||
callback = fn;
|
||||
|
||||
observer.observe(doc.documentElement, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
removedNodes: true
|
||||
});
|
||||
}
|
||||
|
||||
var observer = { isSupported: isSupported, ready: ready };
|
||||
|
||||
var classCallCheck = function (instance, Constructor) {
|
||||
if (!(instance instanceof Constructor)) {
|
||||
throw new TypeError("Cannot call a class as a function");
|
||||
}
|
||||
};
|
||||
|
||||
var createClass = function () {
|
||||
function defineProperties(target, props) {
|
||||
for (var i = 0; i < props.length; i++) {
|
||||
var descriptor = props[i];
|
||||
descriptor.enumerable = descriptor.enumerable || false;
|
||||
descriptor.configurable = true;
|
||||
if ("value" in descriptor) descriptor.writable = true;
|
||||
Object.defineProperty(target, descriptor.key, descriptor);
|
||||
}
|
||||
}
|
||||
|
||||
return function (Constructor, protoProps, staticProps) {
|
||||
if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
||||
if (staticProps) defineProperties(Constructor, staticProps);
|
||||
return Constructor;
|
||||
};
|
||||
}();
|
||||
|
||||
var _extends = Object.assign || function (target) {
|
||||
for (var i = 1; i < arguments.length; i++) {
|
||||
var source = arguments[i];
|
||||
|
||||
for (var key in source) {
|
||||
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
||||
target[key] = source[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return target;
|
||||
};
|
||||
|
||||
/**
|
||||
* Device detector
|
||||
*/
|
||||
|
||||
var fullNameRe = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i;
|
||||
var prefixRe = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i;
|
||||
var fullNameMobileRe = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i;
|
||||
var prefixMobileRe = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i;
|
||||
|
||||
function ua() {
|
||||
return navigator.userAgent || navigator.vendor || window.opera || '';
|
||||
}
|
||||
|
||||
var Detector = function () {
|
||||
function Detector() {
|
||||
classCallCheck(this, Detector);
|
||||
}
|
||||
|
||||
createClass(Detector, [{
|
||||
key: 'phone',
|
||||
value: function phone() {
|
||||
var a = ua();
|
||||
return !!(fullNameRe.test(a) || prefixRe.test(a.substr(0, 4)));
|
||||
}
|
||||
}, {
|
||||
key: 'mobile',
|
||||
value: function mobile() {
|
||||
var a = ua();
|
||||
return !!(fullNameMobileRe.test(a) || prefixMobileRe.test(a.substr(0, 4)));
|
||||
}
|
||||
}, {
|
||||
key: 'tablet',
|
||||
value: function tablet() {
|
||||
return this.mobile() && !this.phone();
|
||||
}
|
||||
|
||||
// http://browserhacks.com/#hack-acea075d0ac6954f275a70023906050c
|
||||
|
||||
}, {
|
||||
key: 'ie11',
|
||||
value: function ie11() {
|
||||
return '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style;
|
||||
}
|
||||
}]);
|
||||
return Detector;
|
||||
}();
|
||||
|
||||
var detect = new Detector();
|
||||
|
||||
/**
|
||||
* Adds multiple classes on node
|
||||
* @param {DOMNode} node
|
||||
* @param {array} classes
|
||||
*/
|
||||
var addClasses = function addClasses(node, classes) {
|
||||
return classes && classes.forEach(function (className) {
|
||||
return node.classList.add(className);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Removes multiple classes from node
|
||||
* @param {DOMNode} node
|
||||
* @param {array} classes
|
||||
*/
|
||||
var removeClasses = function removeClasses(node, classes) {
|
||||
return classes && classes.forEach(function (className) {
|
||||
return node.classList.remove(className);
|
||||
});
|
||||
};
|
||||
|
||||
var fireEvent = function fireEvent(eventName, data) {
|
||||
var customEvent = void 0;
|
||||
|
||||
if (detect.ie11()) {
|
||||
customEvent = document.createEvent('CustomEvent');
|
||||
customEvent.initCustomEvent(eventName, true, true, { detail: data });
|
||||
} else {
|
||||
customEvent = new CustomEvent(eventName, {
|
||||
detail: data
|
||||
});
|
||||
}
|
||||
|
||||
return document.dispatchEvent(customEvent);
|
||||
};
|
||||
|
||||
/**
|
||||
* Set or remove aos-animate class
|
||||
* @param {node} el element
|
||||
* @param {int} top scrolled distance
|
||||
*/
|
||||
var applyClasses = function applyClasses(el, top) {
|
||||
var options = el.options,
|
||||
position = el.position,
|
||||
node = el.node,
|
||||
data = el.data;
|
||||
|
||||
|
||||
var hide = function hide() {
|
||||
if (!el.animated) return;
|
||||
|
||||
removeClasses(node, options.animatedClassNames);
|
||||
fireEvent('aos:out', node);
|
||||
|
||||
if (el.options.id) {
|
||||
fireEvent('aos:in:' + el.options.id, node);
|
||||
}
|
||||
|
||||
el.animated = false;
|
||||
};
|
||||
|
||||
var show = function show() {
|
||||
if (el.animated) return;
|
||||
|
||||
addClasses(node, options.animatedClassNames);
|
||||
|
||||
fireEvent('aos:in', node);
|
||||
if (el.options.id) {
|
||||
fireEvent('aos:in:' + el.options.id, node);
|
||||
}
|
||||
|
||||
el.animated = true;
|
||||
};
|
||||
|
||||
if (options.mirror && top >= position.out && !options.once) {
|
||||
hide();
|
||||
} else if (top >= position.in) {
|
||||
show();
|
||||
} else if (el.animated && !options.once) {
|
||||
hide();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Scroll logic - add or remove 'aos-animate' class on scroll
|
||||
*
|
||||
* @param {array} $elements array of elements nodes
|
||||
* @return {void}
|
||||
*/
|
||||
var handleScroll = function handleScroll($elements) {
|
||||
return $elements.forEach(function (el, i) {
|
||||
return applyClasses(el, window.pageYOffset);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Get offset of DOM element
|
||||
* like there were no transforms applied on it
|
||||
*
|
||||
* @param {Node} el [DOM element]
|
||||
* @return {Object} [top and left offset]
|
||||
*/
|
||||
var offset = function offset(el) {
|
||||
var _x = 0;
|
||||
var _y = 0;
|
||||
|
||||
while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
|
||||
_x += el.offsetLeft - (el.tagName != 'BODY' ? el.scrollLeft : 0);
|
||||
_y += el.offsetTop - (el.tagName != 'BODY' ? el.scrollTop : 0);
|
||||
el = el.offsetParent;
|
||||
}
|
||||
|
||||
return {
|
||||
top: _y,
|
||||
left: _x
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Get inline option with a fallback.
|
||||
*
|
||||
* @param {Node} el [Dom element]
|
||||
* @param {String} key [Option key]
|
||||
* @param {String} fallback [Default (fallback) value]
|
||||
* @return {Mixed} [Option set with inline attributes or fallback value if not set]
|
||||
*/
|
||||
|
||||
var getInlineOption = (function (el, key, fallback) {
|
||||
var attr = el.getAttribute('data-aos-' + key);
|
||||
|
||||
if (typeof attr !== 'undefined') {
|
||||
if (attr === 'true') {
|
||||
return true;
|
||||
} else if (attr === 'false') {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return attr || fallback;
|
||||
});
|
||||
|
||||
/**
|
||||
* Calculate offset
|
||||
* basing on element's settings like:
|
||||
* - anchor
|
||||
* - offset
|
||||
*
|
||||
* @param {Node} el [Dom element]
|
||||
* @return {Integer} [Final offset that will be used to trigger animation in good position]
|
||||
*/
|
||||
|
||||
var getPositionIn = function getPositionIn(el, defaultOffset, defaultAnchorPlacement) {
|
||||
var windowHeight = window.innerHeight;
|
||||
var anchor = getInlineOption(el, 'anchor');
|
||||
var inlineAnchorPlacement = getInlineOption(el, 'anchor-placement');
|
||||
var additionalOffset = Number(getInlineOption(el, 'offset', inlineAnchorPlacement ? 0 : defaultOffset));
|
||||
var anchorPlacement = inlineAnchorPlacement || defaultAnchorPlacement;
|
||||
var finalEl = el;
|
||||
|
||||
if (anchor && document.querySelectorAll(anchor)) {
|
||||
finalEl = document.querySelectorAll(anchor)[0];
|
||||
}
|
||||
|
||||
var triggerPoint = offset(finalEl).top - windowHeight;
|
||||
|
||||
switch (anchorPlacement) {
|
||||
case 'top-bottom':
|
||||
// Default offset
|
||||
break;
|
||||
case 'center-bottom':
|
||||
triggerPoint += finalEl.offsetHeight / 2;
|
||||
break;
|
||||
case 'bottom-bottom':
|
||||
triggerPoint += finalEl.offsetHeight;
|
||||
break;
|
||||
case 'top-center':
|
||||
triggerPoint += windowHeight / 2;
|
||||
break;
|
||||
case 'center-center':
|
||||
triggerPoint += windowHeight / 2 + finalEl.offsetHeight / 2;
|
||||
break;
|
||||
case 'bottom-center':
|
||||
triggerPoint += windowHeight / 2 + finalEl.offsetHeight;
|
||||
break;
|
||||
case 'top-top':
|
||||
triggerPoint += windowHeight;
|
||||
break;
|
||||
case 'bottom-top':
|
||||
triggerPoint += windowHeight + finalEl.offsetHeight;
|
||||
break;
|
||||
case 'center-top':
|
||||
triggerPoint += windowHeight + finalEl.offsetHeight / 2;
|
||||
break;
|
||||
}
|
||||
|
||||
return triggerPoint + additionalOffset;
|
||||
};
|
||||
|
||||
var getPositionOut = function getPositionOut(el, defaultOffset) {
|
||||
var windowHeight = window.innerHeight;
|
||||
var anchor = getInlineOption(el, 'anchor');
|
||||
var additionalOffset = getInlineOption(el, 'offset', defaultOffset);
|
||||
var finalEl = el;
|
||||
|
||||
if (anchor && document.querySelectorAll(anchor)) {
|
||||
finalEl = document.querySelectorAll(anchor)[0];
|
||||
}
|
||||
|
||||
var elementOffsetTop = offset(finalEl).top;
|
||||
|
||||
return elementOffsetTop + finalEl.offsetHeight - additionalOffset;
|
||||
};
|
||||
|
||||
/* Clearing variables */
|
||||
|
||||
var prepare = function prepare($elements, options) {
|
||||
$elements.forEach(function (el, i) {
|
||||
var mirror = getInlineOption(el.node, 'mirror', options.mirror);
|
||||
var once = getInlineOption(el.node, 'once', options.once);
|
||||
var id = getInlineOption(el.node, 'id');
|
||||
var customClassNames = options.useClassNames && el.node.getAttribute('data-aos');
|
||||
|
||||
var animatedClassNames = [options.animatedClassName].concat(customClassNames ? customClassNames.split(' ') : []).filter(function (className) {
|
||||
return typeof className === 'string';
|
||||
});
|
||||
|
||||
if (options.initClassName) {
|
||||
el.node.classList.add(options.initClassName);
|
||||
}
|
||||
|
||||
el.position = {
|
||||
in: getPositionIn(el.node, options.offset, options.anchorPlacement),
|
||||
out: mirror && getPositionOut(el.node, options.offset)
|
||||
};
|
||||
|
||||
el.options = {
|
||||
once: once,
|
||||
mirror: mirror,
|
||||
animatedClassNames: animatedClassNames,
|
||||
id: id
|
||||
};
|
||||
});
|
||||
|
||||
return $elements;
|
||||
};
|
||||
|
||||
/**
|
||||
* Generate initial array with elements as objects
|
||||
* This array will be extended later with elements attributes values
|
||||
* like 'position'
|
||||
*/
|
||||
var elements = (function () {
|
||||
var elements = document.querySelectorAll('[data-aos]');
|
||||
return Array.prototype.map.call(elements, function (node) {
|
||||
return { node: node };
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* *******************************************************
|
||||
* AOS (Animate on scroll) - wowjs alternative
|
||||
* made to animate elements on scroll in both directions
|
||||
* *******************************************************
|
||||
*/
|
||||
|
||||
/**
|
||||
* Private variables
|
||||
*/
|
||||
var $aosElements = [];
|
||||
var initialized = false;
|
||||
|
||||
/**
|
||||
* Default options
|
||||
*/
|
||||
var options = {
|
||||
offset: 120,
|
||||
delay: 0,
|
||||
easing: 'ease',
|
||||
duration: 400,
|
||||
disable: false,
|
||||
once: false,
|
||||
mirror: false,
|
||||
anchorPlacement: 'top-bottom',
|
||||
startEvent: 'DOMContentLoaded',
|
||||
animatedClassName: 'aos-animate',
|
||||
initClassName: 'aos-init',
|
||||
useClassNames: false,
|
||||
disableMutationObserver: false,
|
||||
throttleDelay: 99,
|
||||
debounceDelay: 50
|
||||
};
|
||||
|
||||
// Detect not supported browsers (<=IE9)
|
||||
// http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
|
||||
var isBrowserNotSupported = function isBrowserNotSupported() {
|
||||
return document.all && !window.atob;
|
||||
};
|
||||
|
||||
var initializeScroll = function initializeScroll() {
|
||||
// Extend elements objects in $aosElements with their positions
|
||||
$aosElements = prepare($aosElements, options);
|
||||
// Perform scroll event, to refresh view and show/hide elements
|
||||
handleScroll($aosElements);
|
||||
|
||||
/**
|
||||
* Handle scroll event to animate elements on scroll
|
||||
*/
|
||||
window.addEventListener('scroll', throttle(function () {
|
||||
handleScroll($aosElements, options.once);
|
||||
}, options.throttleDelay));
|
||||
|
||||
return $aosElements;
|
||||
};
|
||||
|
||||
/**
|
||||
* Refresh AOS
|
||||
*/
|
||||
var refresh = function refresh() {
|
||||
var initialize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
||||
|
||||
// Allow refresh only when it was first initialized on startEvent
|
||||
if (initialize) initialized = true;
|
||||
if (initialized) initializeScroll();
|
||||
};
|
||||
|
||||
/**
|
||||
* Hard refresh
|
||||
* create array with new elements and trigger refresh
|
||||
*/
|
||||
var refreshHard = function refreshHard() {
|
||||
$aosElements = elements();
|
||||
|
||||
if (isDisabled(options.disable) || isBrowserNotSupported()) {
|
||||
return disable();
|
||||
}
|
||||
|
||||
refresh();
|
||||
};
|
||||
|
||||
/**
|
||||
* Disable AOS
|
||||
* Remove all attributes to reset applied styles
|
||||
*/
|
||||
var disable = function disable() {
|
||||
$aosElements.forEach(function (el, i) {
|
||||
el.node.removeAttribute('data-aos');
|
||||
el.node.removeAttribute('data-aos-easing');
|
||||
el.node.removeAttribute('data-aos-duration');
|
||||
el.node.removeAttribute('data-aos-delay');
|
||||
|
||||
if (options.initClassName) {
|
||||
el.node.classList.remove(options.initClassName);
|
||||
}
|
||||
|
||||
if (options.animatedClassName) {
|
||||
el.node.classList.remove(options.animatedClassName);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Check if AOS should be disabled based on provided setting
|
||||
*/
|
||||
var isDisabled = function isDisabled(optionDisable) {
|
||||
return optionDisable === true || optionDisable === 'mobile' && detect.mobile() || optionDisable === 'phone' && detect.phone() || optionDisable === 'tablet' && detect.tablet() || typeof optionDisable === 'function' && optionDisable() === true;
|
||||
};
|
||||
|
||||
/**
|
||||
* Initializing AOS
|
||||
* - Create options merging defaults with user defined options
|
||||
* - Set attributes on <body> as global setting - css relies on it
|
||||
* - Attach preparing elements to options.startEvent,
|
||||
* window resize and orientation change
|
||||
* - Attach function that handle scroll and everything connected to it
|
||||
* to window scroll event and fire once document is ready to set initial state
|
||||
*/
|
||||
var init = function init(settings) {
|
||||
options = _extends(options, settings);
|
||||
|
||||
// Create initial array with elements -> to be fullfilled later with prepare()
|
||||
$aosElements = elements();
|
||||
|
||||
/**
|
||||
* Disable mutation observing if not supported
|
||||
*/
|
||||
if (!options.disableMutationObserver && !observer.isSupported()) {
|
||||
console.info('\n aos: MutationObserver is not supported on this browser,\n code mutations observing has been disabled.\n You may have to call "refreshHard()" by yourself.\n ');
|
||||
options.disableMutationObserver = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Observe [aos] elements
|
||||
* If something is loaded by AJAX
|
||||
* it'll refresh plugin automatically
|
||||
*/
|
||||
if (!options.disableMutationObserver) {
|
||||
observer.ready('[data-aos]', refreshHard);
|
||||
}
|
||||
|
||||
/**
|
||||
* Don't init plugin if option `disable` is set
|
||||
* or when browser is not supported
|
||||
*/
|
||||
if (isDisabled(options.disable) || isBrowserNotSupported()) {
|
||||
return disable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Set global settings on body, based on options
|
||||
* so CSS can use it
|
||||
*/
|
||||
document.querySelector('body').setAttribute('data-aos-easing', options.easing);
|
||||
|
||||
document.querySelector('body').setAttribute('data-aos-duration', options.duration);
|
||||
|
||||
document.querySelector('body').setAttribute('data-aos-delay', options.delay);
|
||||
|
||||
/**
|
||||
* Handle initializing
|
||||
*/
|
||||
if (['DOMContentLoaded', 'load'].indexOf(options.startEvent) === -1) {
|
||||
// Listen to options.startEvent and initialize AOS
|
||||
document.addEventListener(options.startEvent, function () {
|
||||
refresh(true);
|
||||
});
|
||||
} else {
|
||||
window.addEventListener('load', function () {
|
||||
refresh(true);
|
||||
});
|
||||
}
|
||||
|
||||
if (options.startEvent === 'DOMContentLoaded' && ['complete', 'interactive'].indexOf(document.readyState) > -1) {
|
||||
// Initialize AOS if default startEvent was already fired
|
||||
refresh(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh plugin on window resize or orientation change
|
||||
*/
|
||||
window.addEventListener('resize', debounce(refresh, options.debounceDelay, true));
|
||||
|
||||
window.addEventListener('orientationchange', debounce(refresh, options.debounceDelay, true));
|
||||
|
||||
return $aosElements;
|
||||
};
|
||||
|
||||
/**
|
||||
* Export Public API
|
||||
*/
|
||||
|
||||
var aos = {
|
||||
init: init,
|
||||
refresh: refresh,
|
||||
refreshHard: refreshHard
|
||||
};
|
||||
|
||||
module.exports = aos;
|
||||
@@ -0,0 +1,610 @@
|
||||
import throttle from 'lodash.throttle';
|
||||
import debounce from 'lodash.debounce';
|
||||
|
||||
var callback = function callback() {};
|
||||
|
||||
function containsAOSNode(nodes) {
|
||||
var i = void 0,
|
||||
currentNode = void 0,
|
||||
result = void 0;
|
||||
|
||||
for (i = 0; i < nodes.length; i += 1) {
|
||||
currentNode = nodes[i];
|
||||
|
||||
if (currentNode.dataset && currentNode.dataset.aos) {
|
||||
return true;
|
||||
}
|
||||
|
||||
result = currentNode.children && containsAOSNode(currentNode.children);
|
||||
|
||||
if (result) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function check(mutations) {
|
||||
if (!mutations) return;
|
||||
|
||||
mutations.forEach(function (mutation) {
|
||||
var addedNodes = Array.prototype.slice.call(mutation.addedNodes);
|
||||
var removedNodes = Array.prototype.slice.call(mutation.removedNodes);
|
||||
var allNodes = addedNodes.concat(removedNodes);
|
||||
|
||||
if (containsAOSNode(allNodes)) {
|
||||
return callback();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getMutationObserver() {
|
||||
return window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
|
||||
}
|
||||
|
||||
function isSupported() {
|
||||
return !!getMutationObserver();
|
||||
}
|
||||
|
||||
function ready(selector, fn) {
|
||||
var doc = window.document;
|
||||
var MutationObserver = getMutationObserver();
|
||||
|
||||
var observer = new MutationObserver(check);
|
||||
callback = fn;
|
||||
|
||||
observer.observe(doc.documentElement, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
removedNodes: true
|
||||
});
|
||||
}
|
||||
|
||||
var observer = { isSupported: isSupported, ready: ready };
|
||||
|
||||
var classCallCheck = function (instance, Constructor) {
|
||||
if (!(instance instanceof Constructor)) {
|
||||
throw new TypeError("Cannot call a class as a function");
|
||||
}
|
||||
};
|
||||
|
||||
var createClass = function () {
|
||||
function defineProperties(target, props) {
|
||||
for (var i = 0; i < props.length; i++) {
|
||||
var descriptor = props[i];
|
||||
descriptor.enumerable = descriptor.enumerable || false;
|
||||
descriptor.configurable = true;
|
||||
if ("value" in descriptor) descriptor.writable = true;
|
||||
Object.defineProperty(target, descriptor.key, descriptor);
|
||||
}
|
||||
}
|
||||
|
||||
return function (Constructor, protoProps, staticProps) {
|
||||
if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
||||
if (staticProps) defineProperties(Constructor, staticProps);
|
||||
return Constructor;
|
||||
};
|
||||
}();
|
||||
|
||||
var _extends = Object.assign || function (target) {
|
||||
for (var i = 1; i < arguments.length; i++) {
|
||||
var source = arguments[i];
|
||||
|
||||
for (var key in source) {
|
||||
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
||||
target[key] = source[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return target;
|
||||
};
|
||||
|
||||
/**
|
||||
* Device detector
|
||||
*/
|
||||
|
||||
var fullNameRe = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i;
|
||||
var prefixRe = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i;
|
||||
var fullNameMobileRe = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i;
|
||||
var prefixMobileRe = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i;
|
||||
|
||||
function ua() {
|
||||
return navigator.userAgent || navigator.vendor || window.opera || '';
|
||||
}
|
||||
|
||||
var Detector = function () {
|
||||
function Detector() {
|
||||
classCallCheck(this, Detector);
|
||||
}
|
||||
|
||||
createClass(Detector, [{
|
||||
key: 'phone',
|
||||
value: function phone() {
|
||||
var a = ua();
|
||||
return !!(fullNameRe.test(a) || prefixRe.test(a.substr(0, 4)));
|
||||
}
|
||||
}, {
|
||||
key: 'mobile',
|
||||
value: function mobile() {
|
||||
var a = ua();
|
||||
return !!(fullNameMobileRe.test(a) || prefixMobileRe.test(a.substr(0, 4)));
|
||||
}
|
||||
}, {
|
||||
key: 'tablet',
|
||||
value: function tablet() {
|
||||
return this.mobile() && !this.phone();
|
||||
}
|
||||
|
||||
// http://browserhacks.com/#hack-acea075d0ac6954f275a70023906050c
|
||||
|
||||
}, {
|
||||
key: 'ie11',
|
||||
value: function ie11() {
|
||||
return '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style;
|
||||
}
|
||||
}]);
|
||||
return Detector;
|
||||
}();
|
||||
|
||||
var detect = new Detector();
|
||||
|
||||
/**
|
||||
* Adds multiple classes on node
|
||||
* @param {DOMNode} node
|
||||
* @param {array} classes
|
||||
*/
|
||||
var addClasses = function addClasses(node, classes) {
|
||||
return classes && classes.forEach(function (className) {
|
||||
return node.classList.add(className);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Removes multiple classes from node
|
||||
* @param {DOMNode} node
|
||||
* @param {array} classes
|
||||
*/
|
||||
var removeClasses = function removeClasses(node, classes) {
|
||||
return classes && classes.forEach(function (className) {
|
||||
return node.classList.remove(className);
|
||||
});
|
||||
};
|
||||
|
||||
var fireEvent = function fireEvent(eventName, data) {
|
||||
var customEvent = void 0;
|
||||
|
||||
if (detect.ie11()) {
|
||||
customEvent = document.createEvent('CustomEvent');
|
||||
customEvent.initCustomEvent(eventName, true, true, { detail: data });
|
||||
} else {
|
||||
customEvent = new CustomEvent(eventName, {
|
||||
detail: data
|
||||
});
|
||||
}
|
||||
|
||||
return document.dispatchEvent(customEvent);
|
||||
};
|
||||
|
||||
/**
|
||||
* Set or remove aos-animate class
|
||||
* @param {node} el element
|
||||
* @param {int} top scrolled distance
|
||||
*/
|
||||
var applyClasses = function applyClasses(el, top) {
|
||||
var options = el.options,
|
||||
position = el.position,
|
||||
node = el.node,
|
||||
data = el.data;
|
||||
|
||||
|
||||
var hide = function hide() {
|
||||
if (!el.animated) return;
|
||||
|
||||
removeClasses(node, options.animatedClassNames);
|
||||
fireEvent('aos:out', node);
|
||||
|
||||
if (el.options.id) {
|
||||
fireEvent('aos:in:' + el.options.id, node);
|
||||
}
|
||||
|
||||
el.animated = false;
|
||||
};
|
||||
|
||||
var show = function show() {
|
||||
if (el.animated) return;
|
||||
|
||||
addClasses(node, options.animatedClassNames);
|
||||
|
||||
fireEvent('aos:in', node);
|
||||
if (el.options.id) {
|
||||
fireEvent('aos:in:' + el.options.id, node);
|
||||
}
|
||||
|
||||
el.animated = true;
|
||||
};
|
||||
|
||||
if (options.mirror && top >= position.out && !options.once) {
|
||||
hide();
|
||||
} else if (top >= position.in) {
|
||||
show();
|
||||
} else if (el.animated && !options.once) {
|
||||
hide();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Scroll logic - add or remove 'aos-animate' class on scroll
|
||||
*
|
||||
* @param {array} $elements array of elements nodes
|
||||
* @return {void}
|
||||
*/
|
||||
var handleScroll = function handleScroll($elements) {
|
||||
return $elements.forEach(function (el, i) {
|
||||
return applyClasses(el, window.pageYOffset);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Get offset of DOM element
|
||||
* like there were no transforms applied on it
|
||||
*
|
||||
* @param {Node} el [DOM element]
|
||||
* @return {Object} [top and left offset]
|
||||
*/
|
||||
var offset = function offset(el) {
|
||||
var _x = 0;
|
||||
var _y = 0;
|
||||
|
||||
while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
|
||||
_x += el.offsetLeft - (el.tagName != 'BODY' ? el.scrollLeft : 0);
|
||||
_y += el.offsetTop - (el.tagName != 'BODY' ? el.scrollTop : 0);
|
||||
el = el.offsetParent;
|
||||
}
|
||||
|
||||
return {
|
||||
top: _y,
|
||||
left: _x
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Get inline option with a fallback.
|
||||
*
|
||||
* @param {Node} el [Dom element]
|
||||
* @param {String} key [Option key]
|
||||
* @param {String} fallback [Default (fallback) value]
|
||||
* @return {Mixed} [Option set with inline attributes or fallback value if not set]
|
||||
*/
|
||||
|
||||
var getInlineOption = (function (el, key, fallback) {
|
||||
var attr = el.getAttribute('data-aos-' + key);
|
||||
|
||||
if (typeof attr !== 'undefined') {
|
||||
if (attr === 'true') {
|
||||
return true;
|
||||
} else if (attr === 'false') {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return attr || fallback;
|
||||
});
|
||||
|
||||
/**
|
||||
* Calculate offset
|
||||
* basing on element's settings like:
|
||||
* - anchor
|
||||
* - offset
|
||||
*
|
||||
* @param {Node} el [Dom element]
|
||||
* @return {Integer} [Final offset that will be used to trigger animation in good position]
|
||||
*/
|
||||
|
||||
var getPositionIn = function getPositionIn(el, defaultOffset, defaultAnchorPlacement) {
|
||||
var windowHeight = window.innerHeight;
|
||||
var anchor = getInlineOption(el, 'anchor');
|
||||
var inlineAnchorPlacement = getInlineOption(el, 'anchor-placement');
|
||||
var additionalOffset = Number(getInlineOption(el, 'offset', inlineAnchorPlacement ? 0 : defaultOffset));
|
||||
var anchorPlacement = inlineAnchorPlacement || defaultAnchorPlacement;
|
||||
var finalEl = el;
|
||||
|
||||
if (anchor && document.querySelectorAll(anchor)) {
|
||||
finalEl = document.querySelectorAll(anchor)[0];
|
||||
}
|
||||
|
||||
var triggerPoint = offset(finalEl).top - windowHeight;
|
||||
|
||||
switch (anchorPlacement) {
|
||||
case 'top-bottom':
|
||||
// Default offset
|
||||
break;
|
||||
case 'center-bottom':
|
||||
triggerPoint += finalEl.offsetHeight / 2;
|
||||
break;
|
||||
case 'bottom-bottom':
|
||||
triggerPoint += finalEl.offsetHeight;
|
||||
break;
|
||||
case 'top-center':
|
||||
triggerPoint += windowHeight / 2;
|
||||
break;
|
||||
case 'center-center':
|
||||
triggerPoint += windowHeight / 2 + finalEl.offsetHeight / 2;
|
||||
break;
|
||||
case 'bottom-center':
|
||||
triggerPoint += windowHeight / 2 + finalEl.offsetHeight;
|
||||
break;
|
||||
case 'top-top':
|
||||
triggerPoint += windowHeight;
|
||||
break;
|
||||
case 'bottom-top':
|
||||
triggerPoint += windowHeight + finalEl.offsetHeight;
|
||||
break;
|
||||
case 'center-top':
|
||||
triggerPoint += windowHeight + finalEl.offsetHeight / 2;
|
||||
break;
|
||||
}
|
||||
|
||||
return triggerPoint + additionalOffset;
|
||||
};
|
||||
|
||||
var getPositionOut = function getPositionOut(el, defaultOffset) {
|
||||
var windowHeight = window.innerHeight;
|
||||
var anchor = getInlineOption(el, 'anchor');
|
||||
var additionalOffset = getInlineOption(el, 'offset', defaultOffset);
|
||||
var finalEl = el;
|
||||
|
||||
if (anchor && document.querySelectorAll(anchor)) {
|
||||
finalEl = document.querySelectorAll(anchor)[0];
|
||||
}
|
||||
|
||||
var elementOffsetTop = offset(finalEl).top;
|
||||
|
||||
return elementOffsetTop + finalEl.offsetHeight - additionalOffset;
|
||||
};
|
||||
|
||||
/* Clearing variables */
|
||||
|
||||
var prepare = function prepare($elements, options) {
|
||||
$elements.forEach(function (el, i) {
|
||||
var mirror = getInlineOption(el.node, 'mirror', options.mirror);
|
||||
var once = getInlineOption(el.node, 'once', options.once);
|
||||
var id = getInlineOption(el.node, 'id');
|
||||
var customClassNames = options.useClassNames && el.node.getAttribute('data-aos');
|
||||
|
||||
var animatedClassNames = [options.animatedClassName].concat(customClassNames ? customClassNames.split(' ') : []).filter(function (className) {
|
||||
return typeof className === 'string';
|
||||
});
|
||||
|
||||
if (options.initClassName) {
|
||||
el.node.classList.add(options.initClassName);
|
||||
}
|
||||
|
||||
el.position = {
|
||||
in: getPositionIn(el.node, options.offset, options.anchorPlacement),
|
||||
out: mirror && getPositionOut(el.node, options.offset)
|
||||
};
|
||||
|
||||
el.options = {
|
||||
once: once,
|
||||
mirror: mirror,
|
||||
animatedClassNames: animatedClassNames,
|
||||
id: id
|
||||
};
|
||||
});
|
||||
|
||||
return $elements;
|
||||
};
|
||||
|
||||
/**
|
||||
* Generate initial array with elements as objects
|
||||
* This array will be extended later with elements attributes values
|
||||
* like 'position'
|
||||
*/
|
||||
var elements = (function () {
|
||||
var elements = document.querySelectorAll('[data-aos]');
|
||||
return Array.prototype.map.call(elements, function (node) {
|
||||
return { node: node };
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* *******************************************************
|
||||
* AOS (Animate on scroll) - wowjs alternative
|
||||
* made to animate elements on scroll in both directions
|
||||
* *******************************************************
|
||||
*/
|
||||
|
||||
/**
|
||||
* Private variables
|
||||
*/
|
||||
var $aosElements = [];
|
||||
var initialized = false;
|
||||
|
||||
/**
|
||||
* Default options
|
||||
*/
|
||||
var options = {
|
||||
offset: 120,
|
||||
delay: 0,
|
||||
easing: 'ease',
|
||||
duration: 400,
|
||||
disable: false,
|
||||
once: false,
|
||||
mirror: false,
|
||||
anchorPlacement: 'top-bottom',
|
||||
startEvent: 'DOMContentLoaded',
|
||||
animatedClassName: 'aos-animate',
|
||||
initClassName: 'aos-init',
|
||||
useClassNames: false,
|
||||
disableMutationObserver: false,
|
||||
throttleDelay: 99,
|
||||
debounceDelay: 50
|
||||
};
|
||||
|
||||
// Detect not supported browsers (<=IE9)
|
||||
// http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
|
||||
var isBrowserNotSupported = function isBrowserNotSupported() {
|
||||
return document.all && !window.atob;
|
||||
};
|
||||
|
||||
var initializeScroll = function initializeScroll() {
|
||||
// Extend elements objects in $aosElements with their positions
|
||||
$aosElements = prepare($aosElements, options);
|
||||
// Perform scroll event, to refresh view and show/hide elements
|
||||
handleScroll($aosElements);
|
||||
|
||||
/**
|
||||
* Handle scroll event to animate elements on scroll
|
||||
*/
|
||||
window.addEventListener('scroll', throttle(function () {
|
||||
handleScroll($aosElements, options.once);
|
||||
}, options.throttleDelay));
|
||||
|
||||
return $aosElements;
|
||||
};
|
||||
|
||||
/**
|
||||
* Refresh AOS
|
||||
*/
|
||||
var refresh = function refresh() {
|
||||
var initialize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
||||
|
||||
// Allow refresh only when it was first initialized on startEvent
|
||||
if (initialize) initialized = true;
|
||||
if (initialized) initializeScroll();
|
||||
};
|
||||
|
||||
/**
|
||||
* Hard refresh
|
||||
* create array with new elements and trigger refresh
|
||||
*/
|
||||
var refreshHard = function refreshHard() {
|
||||
$aosElements = elements();
|
||||
|
||||
if (isDisabled(options.disable) || isBrowserNotSupported()) {
|
||||
return disable();
|
||||
}
|
||||
|
||||
refresh();
|
||||
};
|
||||
|
||||
/**
|
||||
* Disable AOS
|
||||
* Remove all attributes to reset applied styles
|
||||
*/
|
||||
var disable = function disable() {
|
||||
$aosElements.forEach(function (el, i) {
|
||||
el.node.removeAttribute('data-aos');
|
||||
el.node.removeAttribute('data-aos-easing');
|
||||
el.node.removeAttribute('data-aos-duration');
|
||||
el.node.removeAttribute('data-aos-delay');
|
||||
|
||||
if (options.initClassName) {
|
||||
el.node.classList.remove(options.initClassName);
|
||||
}
|
||||
|
||||
if (options.animatedClassName) {
|
||||
el.node.classList.remove(options.animatedClassName);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Check if AOS should be disabled based on provided setting
|
||||
*/
|
||||
var isDisabled = function isDisabled(optionDisable) {
|
||||
return optionDisable === true || optionDisable === 'mobile' && detect.mobile() || optionDisable === 'phone' && detect.phone() || optionDisable === 'tablet' && detect.tablet() || typeof optionDisable === 'function' && optionDisable() === true;
|
||||
};
|
||||
|
||||
/**
|
||||
* Initializing AOS
|
||||
* - Create options merging defaults with user defined options
|
||||
* - Set attributes on <body> as global setting - css relies on it
|
||||
* - Attach preparing elements to options.startEvent,
|
||||
* window resize and orientation change
|
||||
* - Attach function that handle scroll and everything connected to it
|
||||
* to window scroll event and fire once document is ready to set initial state
|
||||
*/
|
||||
var init = function init(settings) {
|
||||
options = _extends(options, settings);
|
||||
|
||||
// Create initial array with elements -> to be fullfilled later with prepare()
|
||||
$aosElements = elements();
|
||||
|
||||
/**
|
||||
* Disable mutation observing if not supported
|
||||
*/
|
||||
if (!options.disableMutationObserver && !observer.isSupported()) {
|
||||
console.info('\n aos: MutationObserver is not supported on this browser,\n code mutations observing has been disabled.\n You may have to call "refreshHard()" by yourself.\n ');
|
||||
options.disableMutationObserver = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Observe [aos] elements
|
||||
* If something is loaded by AJAX
|
||||
* it'll refresh plugin automatically
|
||||
*/
|
||||
if (!options.disableMutationObserver) {
|
||||
observer.ready('[data-aos]', refreshHard);
|
||||
}
|
||||
|
||||
/**
|
||||
* Don't init plugin if option `disable` is set
|
||||
* or when browser is not supported
|
||||
*/
|
||||
if (isDisabled(options.disable) || isBrowserNotSupported()) {
|
||||
return disable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Set global settings on body, based on options
|
||||
* so CSS can use it
|
||||
*/
|
||||
document.querySelector('body').setAttribute('data-aos-easing', options.easing);
|
||||
|
||||
document.querySelector('body').setAttribute('data-aos-duration', options.duration);
|
||||
|
||||
document.querySelector('body').setAttribute('data-aos-delay', options.delay);
|
||||
|
||||
/**
|
||||
* Handle initializing
|
||||
*/
|
||||
if (['DOMContentLoaded', 'load'].indexOf(options.startEvent) === -1) {
|
||||
// Listen to options.startEvent and initialize AOS
|
||||
document.addEventListener(options.startEvent, function () {
|
||||
refresh(true);
|
||||
});
|
||||
} else {
|
||||
window.addEventListener('load', function () {
|
||||
refresh(true);
|
||||
});
|
||||
}
|
||||
|
||||
if (options.startEvent === 'DOMContentLoaded' && ['complete', 'interactive'].indexOf(document.readyState) > -1) {
|
||||
// Initialize AOS if default startEvent was already fired
|
||||
refresh(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh plugin on window resize or orientation change
|
||||
*/
|
||||
window.addEventListener('resize', debounce(refresh, options.debounceDelay, true));
|
||||
|
||||
window.addEventListener('orientationchange', debounce(refresh, options.debounceDelay, true));
|
||||
|
||||
return $aosElements;
|
||||
};
|
||||
|
||||
/**
|
||||
* Export Public API
|
||||
*/
|
||||
|
||||
var aos = {
|
||||
init: init,
|
||||
refresh: refresh,
|
||||
refreshHard: refreshHard
|
||||
};
|
||||
|
||||
export default aos;
|
||||
@@ -0,0 +1,601 @@
|
||||
/*!
|
||||
* Bootstrap Reboot v5.3.8 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2025 The Bootstrap Authors
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
:root,
|
||||
[data-bs-theme=light] {
|
||||
--bs-blue: #0d6efd;
|
||||
--bs-indigo: #6610f2;
|
||||
--bs-purple: #6f42c1;
|
||||
--bs-pink: #d63384;
|
||||
--bs-red: #dc3545;
|
||||
--bs-orange: #fd7e14;
|
||||
--bs-yellow: #ffc107;
|
||||
--bs-green: #198754;
|
||||
--bs-teal: #20c997;
|
||||
--bs-cyan: #0dcaf0;
|
||||
--bs-black: #000;
|
||||
--bs-white: #fff;
|
||||
--bs-gray: #6c757d;
|
||||
--bs-gray-dark: #343a40;
|
||||
--bs-gray-100: #f8f9fa;
|
||||
--bs-gray-200: #e9ecef;
|
||||
--bs-gray-300: #dee2e6;
|
||||
--bs-gray-400: #ced4da;
|
||||
--bs-gray-500: #adb5bd;
|
||||
--bs-gray-600: #6c757d;
|
||||
--bs-gray-700: #495057;
|
||||
--bs-gray-800: #343a40;
|
||||
--bs-gray-900: #212529;
|
||||
--bs-primary: #0d6efd;
|
||||
--bs-secondary: #6c757d;
|
||||
--bs-success: #198754;
|
||||
--bs-info: #0dcaf0;
|
||||
--bs-warning: #ffc107;
|
||||
--bs-danger: #dc3545;
|
||||
--bs-light: #f8f9fa;
|
||||
--bs-dark: #212529;
|
||||
--bs-primary-rgb: 13, 110, 253;
|
||||
--bs-secondary-rgb: 108, 117, 125;
|
||||
--bs-success-rgb: 25, 135, 84;
|
||||
--bs-info-rgb: 13, 202, 240;
|
||||
--bs-warning-rgb: 255, 193, 7;
|
||||
--bs-danger-rgb: 220, 53, 69;
|
||||
--bs-light-rgb: 248, 249, 250;
|
||||
--bs-dark-rgb: 33, 37, 41;
|
||||
--bs-primary-text-emphasis: #052c65;
|
||||
--bs-secondary-text-emphasis: #2b2f32;
|
||||
--bs-success-text-emphasis: #0a3622;
|
||||
--bs-info-text-emphasis: #055160;
|
||||
--bs-warning-text-emphasis: #664d03;
|
||||
--bs-danger-text-emphasis: #58151c;
|
||||
--bs-light-text-emphasis: #495057;
|
||||
--bs-dark-text-emphasis: #495057;
|
||||
--bs-primary-bg-subtle: #cfe2ff;
|
||||
--bs-secondary-bg-subtle: #e2e3e5;
|
||||
--bs-success-bg-subtle: #d1e7dd;
|
||||
--bs-info-bg-subtle: #cff4fc;
|
||||
--bs-warning-bg-subtle: #fff3cd;
|
||||
--bs-danger-bg-subtle: #f8d7da;
|
||||
--bs-light-bg-subtle: #fcfcfd;
|
||||
--bs-dark-bg-subtle: #ced4da;
|
||||
--bs-primary-border-subtle: #9ec5fe;
|
||||
--bs-secondary-border-subtle: #c4c8cb;
|
||||
--bs-success-border-subtle: #a3cfbb;
|
||||
--bs-info-border-subtle: #9eeaf9;
|
||||
--bs-warning-border-subtle: #ffe69c;
|
||||
--bs-danger-border-subtle: #f1aeb5;
|
||||
--bs-light-border-subtle: #e9ecef;
|
||||
--bs-dark-border-subtle: #adb5bd;
|
||||
--bs-white-rgb: 255, 255, 255;
|
||||
--bs-black-rgb: 0, 0, 0;
|
||||
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||
--bs-body-font-family: var(--bs-font-sans-serif);
|
||||
--bs-body-font-size: 1rem;
|
||||
--bs-body-font-weight: 400;
|
||||
--bs-body-line-height: 1.5;
|
||||
--bs-body-color: #212529;
|
||||
--bs-body-color-rgb: 33, 37, 41;
|
||||
--bs-body-bg: #fff;
|
||||
--bs-body-bg-rgb: 255, 255, 255;
|
||||
--bs-emphasis-color: #000;
|
||||
--bs-emphasis-color-rgb: 0, 0, 0;
|
||||
--bs-secondary-color: rgba(33, 37, 41, 0.75);
|
||||
--bs-secondary-color-rgb: 33, 37, 41;
|
||||
--bs-secondary-bg: #e9ecef;
|
||||
--bs-secondary-bg-rgb: 233, 236, 239;
|
||||
--bs-tertiary-color: rgba(33, 37, 41, 0.5);
|
||||
--bs-tertiary-color-rgb: 33, 37, 41;
|
||||
--bs-tertiary-bg: #f8f9fa;
|
||||
--bs-tertiary-bg-rgb: 248, 249, 250;
|
||||
--bs-heading-color: inherit;
|
||||
--bs-link-color: #0d6efd;
|
||||
--bs-link-color-rgb: 13, 110, 253;
|
||||
--bs-link-decoration: underline;
|
||||
--bs-link-hover-color: #0a58ca;
|
||||
--bs-link-hover-color-rgb: 10, 88, 202;
|
||||
--bs-code-color: #d63384;
|
||||
--bs-highlight-color: #212529;
|
||||
--bs-highlight-bg: #fff3cd;
|
||||
--bs-border-width: 1px;
|
||||
--bs-border-style: solid;
|
||||
--bs-border-color: #dee2e6;
|
||||
--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
|
||||
--bs-border-radius: 0.375rem;
|
||||
--bs-border-radius-sm: 0.25rem;
|
||||
--bs-border-radius-lg: 0.5rem;
|
||||
--bs-border-radius-xl: 1rem;
|
||||
--bs-border-radius-xxl: 2rem;
|
||||
--bs-border-radius-2xl: var(--bs-border-radius-xxl);
|
||||
--bs-border-radius-pill: 50rem;
|
||||
--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||||
--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
|
||||
--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
||||
--bs-focus-ring-width: 0.25rem;
|
||||
--bs-focus-ring-opacity: 0.25;
|
||||
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
|
||||
--bs-form-valid-color: #198754;
|
||||
--bs-form-valid-border-color: #198754;
|
||||
--bs-form-invalid-color: #dc3545;
|
||||
--bs-form-invalid-border-color: #dc3545;
|
||||
}
|
||||
|
||||
[data-bs-theme=dark] {
|
||||
color-scheme: dark;
|
||||
--bs-body-color: #dee2e6;
|
||||
--bs-body-color-rgb: 222, 226, 230;
|
||||
--bs-body-bg: #212529;
|
||||
--bs-body-bg-rgb: 33, 37, 41;
|
||||
--bs-emphasis-color: #fff;
|
||||
--bs-emphasis-color-rgb: 255, 255, 255;
|
||||
--bs-secondary-color: rgba(222, 226, 230, 0.75);
|
||||
--bs-secondary-color-rgb: 222, 226, 230;
|
||||
--bs-secondary-bg: #343a40;
|
||||
--bs-secondary-bg-rgb: 52, 58, 64;
|
||||
--bs-tertiary-color: rgba(222, 226, 230, 0.5);
|
||||
--bs-tertiary-color-rgb: 222, 226, 230;
|
||||
--bs-tertiary-bg: #2b3035;
|
||||
--bs-tertiary-bg-rgb: 43, 48, 53;
|
||||
--bs-primary-text-emphasis: #6ea8fe;
|
||||
--bs-secondary-text-emphasis: #a7acb1;
|
||||
--bs-success-text-emphasis: #75b798;
|
||||
--bs-info-text-emphasis: #6edff6;
|
||||
--bs-warning-text-emphasis: #ffda6a;
|
||||
--bs-danger-text-emphasis: #ea868f;
|
||||
--bs-light-text-emphasis: #f8f9fa;
|
||||
--bs-dark-text-emphasis: #dee2e6;
|
||||
--bs-primary-bg-subtle: #031633;
|
||||
--bs-secondary-bg-subtle: #161719;
|
||||
--bs-success-bg-subtle: #051b11;
|
||||
--bs-info-bg-subtle: #032830;
|
||||
--bs-warning-bg-subtle: #332701;
|
||||
--bs-danger-bg-subtle: #2c0b0e;
|
||||
--bs-light-bg-subtle: #343a40;
|
||||
--bs-dark-bg-subtle: #1a1d20;
|
||||
--bs-primary-border-subtle: #084298;
|
||||
--bs-secondary-border-subtle: #41464b;
|
||||
--bs-success-border-subtle: #0f5132;
|
||||
--bs-info-border-subtle: #087990;
|
||||
--bs-warning-border-subtle: #997404;
|
||||
--bs-danger-border-subtle: #842029;
|
||||
--bs-light-border-subtle: #495057;
|
||||
--bs-dark-border-subtle: #343a40;
|
||||
--bs-heading-color: inherit;
|
||||
--bs-link-color: #6ea8fe;
|
||||
--bs-link-hover-color: #8bb9fe;
|
||||
--bs-link-color-rgb: 110, 168, 254;
|
||||
--bs-link-hover-color-rgb: 139, 185, 254;
|
||||
--bs-code-color: #e685b5;
|
||||
--bs-highlight-color: #dee2e6;
|
||||
--bs-highlight-bg: #664d03;
|
||||
--bs-border-color: #495057;
|
||||
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
|
||||
--bs-form-valid-color: #75b798;
|
||||
--bs-form-valid-border-color: #75b798;
|
||||
--bs-form-invalid-color: #ea868f;
|
||||
--bs-form-invalid-border-color: #ea868f;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
:root {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--bs-body-font-family);
|
||||
font-size: var(--bs-body-font-size);
|
||||
font-weight: var(--bs-body-font-weight);
|
||||
line-height: var(--bs-body-line-height);
|
||||
color: var(--bs-body-color);
|
||||
text-align: var(--bs-body-text-align);
|
||||
background-color: var(--bs-body-bg);
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1rem 0;
|
||||
color: inherit;
|
||||
border: 0;
|
||||
border-top: var(--bs-border-width) solid;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
h6, h5, h4, h3, h2, h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
color: var(--bs-heading-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: calc(1.375rem + 1.5vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: calc(1.325rem + 0.9vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: calc(1.3rem + 0.6vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h3 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: calc(1.275rem + 0.3vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
-webkit-text-decoration-skip-ink: none;
|
||||
text-decoration-skip-ink: none;
|
||||
}
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 0.1875em;
|
||||
color: var(--bs-highlight-color);
|
||||
background-color: var(--bs-highlight-bg);
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 0.75em;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:hover {
|
||||
--bs-link-color-rgb: var(--bs-link-hover-color-rgb);
|
||||
}
|
||||
|
||||
a:not([href]):not([class]), a:not([href]):not([class]):hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: var(--bs-font-monospace);
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
pre code {
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 0.875em;
|
||||
color: var(--bs-code-color);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
a > code {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding: 0.1875rem 0.375rem;
|
||||
font-size: 0.875em;
|
||||
color: var(--bs-body-bg);
|
||||
background-color: var(--bs-body-color);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
kbd kbd {
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
img,
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
table {
|
||||
caption-side: bottom;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
color: var(--bs-secondary-color);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: inherit;
|
||||
text-align: -webkit-match-parent;
|
||||
}
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tfoot,
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
button:focus:not(:focus-visible) {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
[role=button] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select {
|
||||
word-wrap: normal;
|
||||
}
|
||||
select:disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
button,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=submit] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
button:not(:disabled),
|
||||
[type=button]:not(:disabled),
|
||||
[type=reset]:not(:disabled),
|
||||
[type=submit]:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
float: left;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: inherit;
|
||||
font-size: calc(1.275rem + 0.3vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
legend {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
legend + * {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
::-webkit-datetime-edit-fields-wrapper,
|
||||
::-webkit-datetime-edit-text,
|
||||
::-webkit-datetime-edit-minute,
|
||||
::-webkit-datetime-edit-hour-field,
|
||||
::-webkit-datetime-edit-day-field,
|
||||
::-webkit-datetime-edit-month-field,
|
||||
::-webkit-datetime-edit-year-field {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::-webkit-inner-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type=search] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
[type=search]::-webkit-search-cancel-button {
|
||||
cursor: pointer;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
/* rtl:raw:
|
||||
[type="tel"],
|
||||
[type="url"],
|
||||
[type="email"],
|
||||
[type="number"] {
|
||||
direction: ltr;
|
||||
}
|
||||
*/
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
::file-selector-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=bootstrap-reboot.css.map */
|
||||
@@ -0,0 +1,598 @@
|
||||
/*!
|
||||
* Bootstrap Reboot v5.3.8 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2025 The Bootstrap Authors
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
:root,
|
||||
[data-bs-theme=light] {
|
||||
--bs-blue: #0d6efd;
|
||||
--bs-indigo: #6610f2;
|
||||
--bs-purple: #6f42c1;
|
||||
--bs-pink: #d63384;
|
||||
--bs-red: #dc3545;
|
||||
--bs-orange: #fd7e14;
|
||||
--bs-yellow: #ffc107;
|
||||
--bs-green: #198754;
|
||||
--bs-teal: #20c997;
|
||||
--bs-cyan: #0dcaf0;
|
||||
--bs-black: #000;
|
||||
--bs-white: #fff;
|
||||
--bs-gray: #6c757d;
|
||||
--bs-gray-dark: #343a40;
|
||||
--bs-gray-100: #f8f9fa;
|
||||
--bs-gray-200: #e9ecef;
|
||||
--bs-gray-300: #dee2e6;
|
||||
--bs-gray-400: #ced4da;
|
||||
--bs-gray-500: #adb5bd;
|
||||
--bs-gray-600: #6c757d;
|
||||
--bs-gray-700: #495057;
|
||||
--bs-gray-800: #343a40;
|
||||
--bs-gray-900: #212529;
|
||||
--bs-primary: #0d6efd;
|
||||
--bs-secondary: #6c757d;
|
||||
--bs-success: #198754;
|
||||
--bs-info: #0dcaf0;
|
||||
--bs-warning: #ffc107;
|
||||
--bs-danger: #dc3545;
|
||||
--bs-light: #f8f9fa;
|
||||
--bs-dark: #212529;
|
||||
--bs-primary-rgb: 13, 110, 253;
|
||||
--bs-secondary-rgb: 108, 117, 125;
|
||||
--bs-success-rgb: 25, 135, 84;
|
||||
--bs-info-rgb: 13, 202, 240;
|
||||
--bs-warning-rgb: 255, 193, 7;
|
||||
--bs-danger-rgb: 220, 53, 69;
|
||||
--bs-light-rgb: 248, 249, 250;
|
||||
--bs-dark-rgb: 33, 37, 41;
|
||||
--bs-primary-text-emphasis: #052c65;
|
||||
--bs-secondary-text-emphasis: #2b2f32;
|
||||
--bs-success-text-emphasis: #0a3622;
|
||||
--bs-info-text-emphasis: #055160;
|
||||
--bs-warning-text-emphasis: #664d03;
|
||||
--bs-danger-text-emphasis: #58151c;
|
||||
--bs-light-text-emphasis: #495057;
|
||||
--bs-dark-text-emphasis: #495057;
|
||||
--bs-primary-bg-subtle: #cfe2ff;
|
||||
--bs-secondary-bg-subtle: #e2e3e5;
|
||||
--bs-success-bg-subtle: #d1e7dd;
|
||||
--bs-info-bg-subtle: #cff4fc;
|
||||
--bs-warning-bg-subtle: #fff3cd;
|
||||
--bs-danger-bg-subtle: #f8d7da;
|
||||
--bs-light-bg-subtle: #fcfcfd;
|
||||
--bs-dark-bg-subtle: #ced4da;
|
||||
--bs-primary-border-subtle: #9ec5fe;
|
||||
--bs-secondary-border-subtle: #c4c8cb;
|
||||
--bs-success-border-subtle: #a3cfbb;
|
||||
--bs-info-border-subtle: #9eeaf9;
|
||||
--bs-warning-border-subtle: #ffe69c;
|
||||
--bs-danger-border-subtle: #f1aeb5;
|
||||
--bs-light-border-subtle: #e9ecef;
|
||||
--bs-dark-border-subtle: #adb5bd;
|
||||
--bs-white-rgb: 255, 255, 255;
|
||||
--bs-black-rgb: 0, 0, 0;
|
||||
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||
--bs-body-font-family: var(--bs-font-sans-serif);
|
||||
--bs-body-font-size: 1rem;
|
||||
--bs-body-font-weight: 400;
|
||||
--bs-body-line-height: 1.5;
|
||||
--bs-body-color: #212529;
|
||||
--bs-body-color-rgb: 33, 37, 41;
|
||||
--bs-body-bg: #fff;
|
||||
--bs-body-bg-rgb: 255, 255, 255;
|
||||
--bs-emphasis-color: #000;
|
||||
--bs-emphasis-color-rgb: 0, 0, 0;
|
||||
--bs-secondary-color: rgba(33, 37, 41, 0.75);
|
||||
--bs-secondary-color-rgb: 33, 37, 41;
|
||||
--bs-secondary-bg: #e9ecef;
|
||||
--bs-secondary-bg-rgb: 233, 236, 239;
|
||||
--bs-tertiary-color: rgba(33, 37, 41, 0.5);
|
||||
--bs-tertiary-color-rgb: 33, 37, 41;
|
||||
--bs-tertiary-bg: #f8f9fa;
|
||||
--bs-tertiary-bg-rgb: 248, 249, 250;
|
||||
--bs-heading-color: inherit;
|
||||
--bs-link-color: #0d6efd;
|
||||
--bs-link-color-rgb: 13, 110, 253;
|
||||
--bs-link-decoration: underline;
|
||||
--bs-link-hover-color: #0a58ca;
|
||||
--bs-link-hover-color-rgb: 10, 88, 202;
|
||||
--bs-code-color: #d63384;
|
||||
--bs-highlight-color: #212529;
|
||||
--bs-highlight-bg: #fff3cd;
|
||||
--bs-border-width: 1px;
|
||||
--bs-border-style: solid;
|
||||
--bs-border-color: #dee2e6;
|
||||
--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
|
||||
--bs-border-radius: 0.375rem;
|
||||
--bs-border-radius-sm: 0.25rem;
|
||||
--bs-border-radius-lg: 0.5rem;
|
||||
--bs-border-radius-xl: 1rem;
|
||||
--bs-border-radius-xxl: 2rem;
|
||||
--bs-border-radius-2xl: var(--bs-border-radius-xxl);
|
||||
--bs-border-radius-pill: 50rem;
|
||||
--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||||
--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
|
||||
--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
||||
--bs-focus-ring-width: 0.25rem;
|
||||
--bs-focus-ring-opacity: 0.25;
|
||||
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
|
||||
--bs-form-valid-color: #198754;
|
||||
--bs-form-valid-border-color: #198754;
|
||||
--bs-form-invalid-color: #dc3545;
|
||||
--bs-form-invalid-border-color: #dc3545;
|
||||
}
|
||||
|
||||
[data-bs-theme=dark] {
|
||||
color-scheme: dark;
|
||||
--bs-body-color: #dee2e6;
|
||||
--bs-body-color-rgb: 222, 226, 230;
|
||||
--bs-body-bg: #212529;
|
||||
--bs-body-bg-rgb: 33, 37, 41;
|
||||
--bs-emphasis-color: #fff;
|
||||
--bs-emphasis-color-rgb: 255, 255, 255;
|
||||
--bs-secondary-color: rgba(222, 226, 230, 0.75);
|
||||
--bs-secondary-color-rgb: 222, 226, 230;
|
||||
--bs-secondary-bg: #343a40;
|
||||
--bs-secondary-bg-rgb: 52, 58, 64;
|
||||
--bs-tertiary-color: rgba(222, 226, 230, 0.5);
|
||||
--bs-tertiary-color-rgb: 222, 226, 230;
|
||||
--bs-tertiary-bg: #2b3035;
|
||||
--bs-tertiary-bg-rgb: 43, 48, 53;
|
||||
--bs-primary-text-emphasis: #6ea8fe;
|
||||
--bs-secondary-text-emphasis: #a7acb1;
|
||||
--bs-success-text-emphasis: #75b798;
|
||||
--bs-info-text-emphasis: #6edff6;
|
||||
--bs-warning-text-emphasis: #ffda6a;
|
||||
--bs-danger-text-emphasis: #ea868f;
|
||||
--bs-light-text-emphasis: #f8f9fa;
|
||||
--bs-dark-text-emphasis: #dee2e6;
|
||||
--bs-primary-bg-subtle: #031633;
|
||||
--bs-secondary-bg-subtle: #161719;
|
||||
--bs-success-bg-subtle: #051b11;
|
||||
--bs-info-bg-subtle: #032830;
|
||||
--bs-warning-bg-subtle: #332701;
|
||||
--bs-danger-bg-subtle: #2c0b0e;
|
||||
--bs-light-bg-subtle: #343a40;
|
||||
--bs-dark-bg-subtle: #1a1d20;
|
||||
--bs-primary-border-subtle: #084298;
|
||||
--bs-secondary-border-subtle: #41464b;
|
||||
--bs-success-border-subtle: #0f5132;
|
||||
--bs-info-border-subtle: #087990;
|
||||
--bs-warning-border-subtle: #997404;
|
||||
--bs-danger-border-subtle: #842029;
|
||||
--bs-light-border-subtle: #495057;
|
||||
--bs-dark-border-subtle: #343a40;
|
||||
--bs-heading-color: inherit;
|
||||
--bs-link-color: #6ea8fe;
|
||||
--bs-link-hover-color: #8bb9fe;
|
||||
--bs-link-color-rgb: 110, 168, 254;
|
||||
--bs-link-hover-color-rgb: 139, 185, 254;
|
||||
--bs-code-color: #e685b5;
|
||||
--bs-highlight-color: #dee2e6;
|
||||
--bs-highlight-bg: #664d03;
|
||||
--bs-border-color: #495057;
|
||||
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
|
||||
--bs-form-valid-color: #75b798;
|
||||
--bs-form-valid-border-color: #75b798;
|
||||
--bs-form-invalid-color: #ea868f;
|
||||
--bs-form-invalid-border-color: #ea868f;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
:root {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--bs-body-font-family);
|
||||
font-size: var(--bs-body-font-size);
|
||||
font-weight: var(--bs-body-font-weight);
|
||||
line-height: var(--bs-body-line-height);
|
||||
color: var(--bs-body-color);
|
||||
text-align: var(--bs-body-text-align);
|
||||
background-color: var(--bs-body-bg);
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1rem 0;
|
||||
color: inherit;
|
||||
border: 0;
|
||||
border-top: var(--bs-border-width) solid;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
h6, h5, h4, h3, h2, h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
color: var(--bs-heading-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: calc(1.375rem + 1.5vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: calc(1.325rem + 0.9vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: calc(1.3rem + 0.6vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h3 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: calc(1.275rem + 0.3vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
-webkit-text-decoration-skip-ink: none;
|
||||
text-decoration-skip-ink: none;
|
||||
}
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 0.1875em;
|
||||
color: var(--bs-highlight-color);
|
||||
background-color: var(--bs-highlight-bg);
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 0.75em;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:hover {
|
||||
--bs-link-color-rgb: var(--bs-link-hover-color-rgb);
|
||||
}
|
||||
|
||||
a:not([href]):not([class]), a:not([href]):not([class]):hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: var(--bs-font-monospace);
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
pre code {
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 0.875em;
|
||||
color: var(--bs-code-color);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
a > code {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding: 0.1875rem 0.375rem;
|
||||
font-size: 0.875em;
|
||||
color: var(--bs-body-bg);
|
||||
background-color: var(--bs-body-color);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
kbd kbd {
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
img,
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
table {
|
||||
caption-side: bottom;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
color: var(--bs-secondary-color);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: inherit;
|
||||
text-align: -webkit-match-parent;
|
||||
}
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tfoot,
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
button:focus:not(:focus-visible) {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
[role=button] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select {
|
||||
word-wrap: normal;
|
||||
}
|
||||
select:disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
button,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=submit] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
button:not(:disabled),
|
||||
[type=button]:not(:disabled),
|
||||
[type=reset]:not(:disabled),
|
||||
[type=submit]:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
float: right;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: inherit;
|
||||
font-size: calc(1.275rem + 0.3vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
legend {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
legend + * {
|
||||
clear: right;
|
||||
}
|
||||
|
||||
::-webkit-datetime-edit-fields-wrapper,
|
||||
::-webkit-datetime-edit-text,
|
||||
::-webkit-datetime-edit-minute,
|
||||
::-webkit-datetime-edit-hour-field,
|
||||
::-webkit-datetime-edit-day-field,
|
||||
::-webkit-datetime-edit-month-field,
|
||||
::-webkit-datetime-edit-year-field {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::-webkit-inner-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type=search] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
[type=search]::-webkit-search-cancel-button {
|
||||
cursor: pointer;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
[type="tel"],
|
||||
[type="url"],
|
||||
[type="email"],
|
||||
[type="number"] {
|
||||
direction: ltr;
|
||||
}
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
::file-selector-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
/*# sourceMappingURL=bootstrap-reboot.rtl.css.map */
|
||||
@@ -0,0 +1,939 @@
|
||||
.glightbox-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999999 !important;
|
||||
overflow: hidden;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-moz-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.glightbox-container.inactive {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.glightbox-container .gcontainer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.glightbox-container .gslider {
|
||||
-webkit-transition: -webkit-transform 0.4s ease;
|
||||
transition: -webkit-transform 0.4s ease;
|
||||
transition: transform 0.4s ease;
|
||||
transition: transform 0.4s ease, -webkit-transform 0.4s ease;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: -webkit-box !important;
|
||||
display: -ms-flexbox !important;
|
||||
display: flex !important;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.glightbox-container .gslide {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.glightbox-container .gslide.current {
|
||||
opacity: 1;
|
||||
z-index: 99999;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.glightbox-container .gslide.prev {
|
||||
opacity: 1;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.glightbox-container .gslide-inner-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.glightbox-container .ginner-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-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;
|
||||
max-width: 100%;
|
||||
margin: auto;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.glightbox-container .ginner-container.gvideo-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.glightbox-container .ginner-container.desc-bottom,
|
||||
.glightbox-container .ginner-container.desc-top {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.glightbox-container .ginner-container.desc-left,
|
||||
.glightbox-container .ginner-container.desc-right {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.gslide iframe,
|
||||
.gslide video {
|
||||
outline: none !important;
|
||||
border: none;
|
||||
min-height: 165px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-ms-touch-action: auto;
|
||||
touch-action: auto;
|
||||
}
|
||||
|
||||
.gslide:not(.current) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.gslide-image {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gslide-image img {
|
||||
max-height: 100vh;
|
||||
display: block;
|
||||
padding: 0;
|
||||
float: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
max-width: 100vw;
|
||||
width: auto;
|
||||
height: auto;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
margin: auto;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.desc-top .gslide-image img,
|
||||
.desc-bottom .gslide-image img {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.desc-left .gslide-image img,
|
||||
.desc-right .gslide-image img {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.gslide-image img.zoomable {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gslide-image img.dragging {
|
||||
cursor: -webkit-grabbing !important;
|
||||
cursor: grabbing !important;
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.gslide-video {
|
||||
position: relative;
|
||||
max-width: 100vh;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.gslide-video .plyr__poster-enabled.plyr--loading .plyr__poster {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gslide-video .gvideo-wrapper {
|
||||
width: 100%;
|
||||
/* max-width: 160vmin; */
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.gslide-video::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 0, 0, 0.34);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gslide-video.playing::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gslide-video.fullscreen {
|
||||
max-width: 100% !important;
|
||||
min-width: 100%;
|
||||
height: 75vh;
|
||||
}
|
||||
|
||||
.gslide-video.fullscreen video {
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.gslide-inline {
|
||||
background: #fff;
|
||||
text-align: left;
|
||||
max-height: calc(100vh - 40px);
|
||||
overflow: auto;
|
||||
max-width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.gslide-inline .ginlined-content {
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gslide-inline .dragging {
|
||||
cursor: -webkit-grabbing !important;
|
||||
cursor: grabbing !important;
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.ginlined-content {
|
||||
overflow: auto;
|
||||
display: block !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.gslide-external {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
background: #fff;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
max-height: 75vh;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.gslide-media {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.zoomed .gslide-media {
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.desc-top .gslide-media,
|
||||
.desc-bottom .gslide-media {
|
||||
margin: 0 auto;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gslide-description {
|
||||
position: relative;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 100%;
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
|
||||
.gslide-description.description-left,
|
||||
.gslide-description.description-right {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.gslide-description.description-bottom,
|
||||
.gslide-description.description-top {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gslide-description p {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.gslide-description p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.zoomed .gslide-description {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.glightbox-button-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Description for mobiles
|
||||
* something like facebook does the description
|
||||
* for the photos
|
||||
*/
|
||||
|
||||
.glightbox-mobile .glightbox-container .gslide-description {
|
||||
height: auto !important;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding: 19px 11px;
|
||||
max-width: 100vw !important;
|
||||
-webkit-box-ordinal-group: 3 !important;
|
||||
-ms-flex-order: 2 !important;
|
||||
order: 2 !important;
|
||||
max-height: 78vh;
|
||||
overflow: auto !important;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.75)));
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
|
||||
-webkit-transition: opacity 0.3s linear;
|
||||
transition: opacity 0.3s linear;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.glightbox-mobile .glightbox-container .gslide-title {
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.glightbox-mobile .glightbox-container .gslide-desc {
|
||||
color: #a1a1a1;
|
||||
}
|
||||
|
||||
.glightbox-mobile .glightbox-container .gslide-desc a {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.glightbox-mobile .glightbox-container .gslide-desc * {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.glightbox-mobile .glightbox-container .gslide-desc .desc-more {
|
||||
color: #fff;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.gdesc-open .gslide-media {
|
||||
-webkit-transition: opacity 0.5s ease;
|
||||
transition: opacity 0.5s ease;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.gdesc-open .gdesc-inner {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.gdesc-closed .gslide-media {
|
||||
-webkit-transition: opacity 0.5s ease;
|
||||
transition: opacity 0.5s ease;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.greset {
|
||||
-webkit-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.gabsolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.grelative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.glightbox-desc {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.glightbox-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gloader {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
-webkit-animation: lightboxLoader 0.8s infinite linear;
|
||||
animation: lightboxLoader 0.8s infinite linear;
|
||||
border: 2px solid #fff;
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
display: block;
|
||||
z-index: 9999;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
top: 47%;
|
||||
}
|
||||
|
||||
.goverlay {
|
||||
width: 100%;
|
||||
height: calc(100vh + 1px);
|
||||
position: fixed;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
background: #000;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
.glightbox-mobile .goverlay {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.gprev,
|
||||
.gnext,
|
||||
.gclose {
|
||||
z-index: 99999;
|
||||
cursor: pointer;
|
||||
width: 26px;
|
||||
height: 44px;
|
||||
border: none;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gprev svg,
|
||||
.gnext svg,
|
||||
.gclose svg {
|
||||
display: block;
|
||||
width: 25px;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gprev.disabled,
|
||||
.gnext.disabled,
|
||||
.gclose.disabled {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.gprev .garrow,
|
||||
.gnext .garrow,
|
||||
.gclose .garrow {
|
||||
stroke: #fff;
|
||||
}
|
||||
|
||||
.gbtn.focused {
|
||||
outline: 2px solid #0f3d81;
|
||||
}
|
||||
|
||||
iframe.wait-autoplay {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.glightbox-closing .gnext,
|
||||
.glightbox-closing .gprev,
|
||||
.glightbox-closing .gclose {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
/*Skin */
|
||||
|
||||
.glightbox-clean .gslide-description {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.glightbox-clean .gdesc-inner {
|
||||
padding: 22px 20px;
|
||||
}
|
||||
|
||||
.glightbox-clean .gslide-title {
|
||||
font-size: 1em;
|
||||
font-weight: normal;
|
||||
font-family: arial;
|
||||
color: #000;
|
||||
margin-bottom: 19px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.glightbox-clean .gslide-desc {
|
||||
font-size: 0.86em;
|
||||
margin-bottom: 0;
|
||||
font-family: arial;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.glightbox-clean .gslide-video {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.glightbox-clean .gprev,
|
||||
.glightbox-clean .gnext,
|
||||
.glightbox-clean .gclose {
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.glightbox-clean .gprev path,
|
||||
.glightbox-clean .gnext path,
|
||||
.glightbox-clean .gclose path {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.glightbox-clean .gprev {
|
||||
position: absolute;
|
||||
top: -100%;
|
||||
left: 30px;
|
||||
width: 40px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.glightbox-clean .gnext {
|
||||
position: absolute;
|
||||
top: -100%;
|
||||
right: 30px;
|
||||
width: 40px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.glightbox-clean .gclose {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
top: 15px;
|
||||
right: 10px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.glightbox-clean .gclose svg {
|
||||
width: 18px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.glightbox-clean .gclose:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/*CSS Animations*/
|
||||
|
||||
.gfadeIn {
|
||||
-webkit-animation: gfadeIn 0.5s ease;
|
||||
animation: gfadeIn 0.5s ease;
|
||||
}
|
||||
|
||||
.gfadeOut {
|
||||
-webkit-animation: gfadeOut 0.5s ease;
|
||||
animation: gfadeOut 0.5s ease;
|
||||
}
|
||||
|
||||
.gslideOutLeft {
|
||||
-webkit-animation: gslideOutLeft 0.3s ease;
|
||||
animation: gslideOutLeft 0.3s ease;
|
||||
}
|
||||
|
||||
.gslideInLeft {
|
||||
-webkit-animation: gslideInLeft 0.3s ease;
|
||||
animation: gslideInLeft 0.3s ease;
|
||||
}
|
||||
|
||||
.gslideOutRight {
|
||||
-webkit-animation: gslideOutRight 0.3s ease;
|
||||
animation: gslideOutRight 0.3s ease;
|
||||
}
|
||||
|
||||
.gslideInRight {
|
||||
-webkit-animation: gslideInRight 0.3s ease;
|
||||
animation: gslideInRight 0.3s ease;
|
||||
}
|
||||
|
||||
.gzoomIn {
|
||||
-webkit-animation: gzoomIn 0.5s ease;
|
||||
animation: gzoomIn 0.5s ease;
|
||||
}
|
||||
|
||||
.gzoomOut {
|
||||
-webkit-animation: gzoomOut 0.5s ease;
|
||||
animation: gzoomOut 0.5s ease;
|
||||
}
|
||||
|
||||
@-webkit-keyframes lightboxLoader {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lightboxLoader {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes gfadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gfadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes gfadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gfadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes gslideInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-60%, 0, 0);
|
||||
transform: translate3d(-60%, 0, 0);
|
||||
}
|
||||
to {
|
||||
visibility: visible;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gslideInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-60%, 0, 0);
|
||||
transform: translate3d(-60%, 0, 0);
|
||||
}
|
||||
to {
|
||||
visibility: visible;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes gslideOutLeft {
|
||||
from {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate3d(-60%, 0, 0);
|
||||
transform: translate3d(-60%, 0, 0);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gslideOutLeft {
|
||||
from {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate3d(-60%, 0, 0);
|
||||
transform: translate3d(-60%, 0, 0);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes gslideInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
visibility: visible;
|
||||
-webkit-transform: translate3d(60%, 0, 0);
|
||||
transform: translate3d(60%, 0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gslideInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
visibility: visible;
|
||||
-webkit-transform: translate3d(60%, 0, 0);
|
||||
transform: translate3d(60%, 0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes gslideOutRight {
|
||||
from {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate3d(60%, 0, 0);
|
||||
transform: translate3d(60%, 0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gslideOutRight {
|
||||
from {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate3d(60%, 0, 0);
|
||||
transform: translate3d(60%, 0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes gzoomIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale3d(0.3, 0.3, 0.3);
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gzoomIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale3d(0.3, 0.3, 0.3);
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes gzoomOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale3d(0.3, 0.3, 0.3);
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gzoomOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale3d(0.3, 0.3, 0.3);
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.glightbox-container .ginner-container {
|
||||
width: auto;
|
||||
height: auto;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
.glightbox-container .ginner-container.desc-top .gslide-description {
|
||||
-webkit-box-ordinal-group: 1;
|
||||
-ms-flex-order: 0;
|
||||
order: 0;
|
||||
}
|
||||
.glightbox-container .ginner-container.desc-top .gslide-image,
|
||||
.glightbox-container .ginner-container.desc-top .gslide-image img {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
.glightbox-container .ginner-container.desc-left .gslide-description {
|
||||
-webkit-box-ordinal-group: 1;
|
||||
-ms-flex-order: 0;
|
||||
order: 0;
|
||||
}
|
||||
.glightbox-container .ginner-container.desc-left .gslide-image {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
.gslide-image img {
|
||||
max-height: 97vh;
|
||||
max-width: 100%;
|
||||
}
|
||||
.gslide-image img.zoomable {
|
||||
cursor: -webkit-zoom-in;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
.zoomed .gslide-image img.zoomable {
|
||||
cursor: -webkit-grab;
|
||||
cursor: grab;
|
||||
}
|
||||
.gslide-inline {
|
||||
max-height: 95vh;
|
||||
}
|
||||
.gslide-external {
|
||||
max-height: 100vh;
|
||||
}
|
||||
.gslide-description.description-left,
|
||||
.gslide-description.description-right {
|
||||
max-width: 275px;
|
||||
}
|
||||
.glightbox-open {
|
||||
height: auto;
|
||||
}
|
||||
.goverlay {
|
||||
background: rgba(0, 0, 0, 0.92);
|
||||
}
|
||||
.glightbox-clean .gslide-media {
|
||||
-webkit-box-shadow: 1px 2px 9px 0px rgba(0, 0, 0, 0.65);
|
||||
box-shadow: 1px 2px 9px 0px rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
.glightbox-clean .description-left .gdesc-inner,
|
||||
.glightbox-clean .description-right .gdesc-inner {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.glightbox-clean .gprev,
|
||||
.glightbox-clean .gnext,
|
||||
.glightbox-clean .gclose {
|
||||
background-color: rgba(0, 0, 0, 0.32);
|
||||
}
|
||||
.glightbox-clean .gprev:hover,
|
||||
.glightbox-clean .gnext:hover,
|
||||
.glightbox-clean .gclose:hover {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
.glightbox-clean .gprev {
|
||||
top: 45%;
|
||||
}
|
||||
.glightbox-clean .gnext {
|
||||
top: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.glightbox-clean .gclose {
|
||||
opacity: 0.7;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 420px) {
|
||||
.goverlay {
|
||||
background: #000;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
/*!
|
||||
* imagesLoaded PACKAGED v5.0.0
|
||||
* JavaScript is all like "You images are done yet or what?"
|
||||
* MIT License
|
||||
*/
|
||||
!function(t,e){"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e()}("undefined"!=typeof window?window:this,(function(){function t(){}let e=t.prototype;return e.on=function(t,e){if(!t||!e)return this;let i=this._events=this._events||{},s=i[t]=i[t]||[];return s.includes(e)||s.push(e),this},e.once=function(t,e){if(!t||!e)return this;this.on(t,e);let i=this._onceEvents=this._onceEvents||{};return(i[t]=i[t]||{})[e]=!0,this},e.off=function(t,e){let i=this._events&&this._events[t];if(!i||!i.length)return this;let s=i.indexOf(e);return-1!=s&&i.splice(s,1),this},e.emitEvent=function(t,e){let i=this._events&&this._events[t];if(!i||!i.length)return this;i=i.slice(0),e=e||[];let s=this._onceEvents&&this._onceEvents[t];for(let n of i){s&&s[n]&&(this.off(t,n),delete s[n]),n.apply(this,e)}return this},e.allOff=function(){return delete this._events,delete this._onceEvents,this},t})),
|
||||
/*!
|
||||
* imagesLoaded v5.0.0
|
||||
* JavaScript is all like "You images are done yet or what?"
|
||||
* MIT License
|
||||
*/
|
||||
function(t,e){"object"==typeof module&&module.exports?module.exports=e(t,require("ev-emitter")):t.imagesLoaded=e(t,t.EvEmitter)}("undefined"!=typeof window?window:this,(function(t,e){let i=t.jQuery,s=t.console;function n(t,e,o){if(!(this instanceof n))return new n(t,e,o);let r=t;var h;("string"==typeof t&&(r=document.querySelectorAll(t)),r)?(this.elements=(h=r,Array.isArray(h)?h:"object"==typeof h&&"number"==typeof h.length?[...h]:[h]),this.options={},"function"==typeof e?o=e:Object.assign(this.options,e),o&&this.on("always",o),this.getImages(),i&&(this.jqDeferred=new i.Deferred),setTimeout(this.check.bind(this))):s.error(`Bad element for imagesLoaded ${r||t}`)}n.prototype=Object.create(e.prototype),n.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)};const o=[1,9,11];n.prototype.addElementImages=function(t){"IMG"===t.nodeName&&this.addImage(t),!0===this.options.background&&this.addElementBackgroundImages(t);let{nodeType:e}=t;if(!e||!o.includes(e))return;let i=t.querySelectorAll("img");for(let t of i)this.addImage(t);if("string"==typeof this.options.background){let e=t.querySelectorAll(this.options.background);for(let t of e)this.addElementBackgroundImages(t)}};const r=/url\((['"])?(.*?)\1\)/gi;function h(t){this.img=t}function d(t,e){this.url=t,this.element=e,this.img=new Image}return n.prototype.addElementBackgroundImages=function(t){let e=getComputedStyle(t);if(!e)return;let i=r.exec(e.backgroundImage);for(;null!==i;){let s=i&&i[2];s&&this.addBackground(s,t),i=r.exec(e.backgroundImage)}},n.prototype.addImage=function(t){let e=new h(t);this.images.push(e)},n.prototype.addBackground=function(t,e){let i=new d(t,e);this.images.push(i)},n.prototype.check=function(){if(this.progressedCount=0,this.hasAnyBroken=!1,!this.images.length)return void this.complete();let t=(t,e,i)=>{setTimeout((()=>{this.progress(t,e,i)}))};this.images.forEach((function(e){e.once("progress",t),e.check()}))},n.prototype.progress=function(t,e,i){this.progressedCount++,this.hasAnyBroken=this.hasAnyBroken||!t.isLoaded,this.emitEvent("progress",[this,t,e]),this.jqDeferred&&this.jqDeferred.notify&&this.jqDeferred.notify(this,t),this.progressedCount===this.images.length&&this.complete(),this.options.debug&&s&&s.log(`progress: ${i}`,t,e)},n.prototype.complete=function(){let t=this.hasAnyBroken?"fail":"done";if(this.isComplete=!0,this.emitEvent(t,[this]),this.emitEvent("always",[this]),this.jqDeferred){let t=this.hasAnyBroken?"reject":"resolve";this.jqDeferred[t](this)}},h.prototype=Object.create(e.prototype),h.prototype.check=function(){this.getIsImageComplete()?this.confirm(0!==this.img.naturalWidth,"naturalWidth"):(this.proxyImage=new Image,this.img.crossOrigin&&(this.proxyImage.crossOrigin=this.img.crossOrigin),this.proxyImage.addEventListener("load",this),this.proxyImage.addEventListener("error",this),this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.proxyImage.src=this.img.currentSrc||this.img.src)},h.prototype.getIsImageComplete=function(){return this.img.complete&&this.img.naturalWidth},h.prototype.confirm=function(t,e){this.isLoaded=t;let{parentNode:i}=this.img,s="PICTURE"===i.nodeName?i:this.img;this.emitEvent("progress",[this,s,e])},h.prototype.handleEvent=function(t){let e="on"+t.type;this[e]&&this[e](t)},h.prototype.onload=function(){this.confirm(!0,"onload"),this.unbindEvents()},h.prototype.onerror=function(){this.confirm(!1,"onerror"),this.unbindEvents()},h.prototype.unbindEvents=function(){this.proxyImage.removeEventListener("load",this),this.proxyImage.removeEventListener("error",this),this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},d.prototype=Object.create(h.prototype),d.prototype.check=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.img.src=this.url,this.getIsImageComplete()&&(this.confirm(0!==this.img.naturalWidth,"naturalWidth"),this.unbindEvents())},d.prototype.unbindEvents=function(){this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},d.prototype.confirm=function(t,e){this.isLoaded=t,this.emitEvent("progress",[this,this.element,e])},n.makeJQueryPlugin=function(e){(e=e||t.jQuery)&&(i=e,i.fn.imagesLoaded=function(t,e){return new n(this,t,e).jqDeferred.promise(i(this))})},n.makeJQueryPlugin(),n}));
|
||||
@@ -0,0 +1,85 @@
|
||||
/**
|
||||
* PHP Email Form Validation - v3.11
|
||||
* URL: https://bootstrapmade.com/php-email-form/
|
||||
* Author: BootstrapMade.com
|
||||
*/
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
let forms = document.querySelectorAll('.php-email-form');
|
||||
|
||||
forms.forEach( function(e) {
|
||||
e.addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
let thisForm = this;
|
||||
|
||||
let action = thisForm.getAttribute('action');
|
||||
let recaptcha = thisForm.getAttribute('data-recaptcha-site-key');
|
||||
|
||||
if( ! action ) {
|
||||
displayError(thisForm, 'The form action property is not set!');
|
||||
return;
|
||||
}
|
||||
thisForm.querySelector('.loading').classList.add('d-block');
|
||||
thisForm.querySelector('.error-message').classList.remove('d-block');
|
||||
thisForm.querySelector('.sent-message').classList.remove('d-block');
|
||||
|
||||
let formData = new FormData( thisForm );
|
||||
|
||||
if ( recaptcha ) {
|
||||
if(typeof grecaptcha !== "undefined" ) {
|
||||
grecaptcha.ready(function() {
|
||||
try {
|
||||
grecaptcha.execute(recaptcha, {action: 'php_email_form_submit'})
|
||||
.then(token => {
|
||||
formData.set('recaptcha-response', token);
|
||||
php_email_form_submit(thisForm, action, formData);
|
||||
})
|
||||
} catch(error) {
|
||||
displayError(thisForm, error);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
displayError(thisForm, 'The reCaptcha javascript API url is not loaded!')
|
||||
}
|
||||
} else {
|
||||
php_email_form_submit(thisForm, action, formData);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function php_email_form_submit(thisForm, action, formData) {
|
||||
fetch(action, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: {'X-Requested-With': 'XMLHttpRequest'}
|
||||
})
|
||||
.then(response => {
|
||||
if( response.ok ) {
|
||||
return response.text();
|
||||
} else {
|
||||
throw new Error(`${response.status} ${response.statusText} ${response.url}`);
|
||||
}
|
||||
})
|
||||
.then(data => {
|
||||
thisForm.querySelector('.loading').classList.remove('d-block');
|
||||
if (data.trim() == 'OK') {
|
||||
thisForm.querySelector('.sent-message').classList.add('d-block');
|
||||
thisForm.reset();
|
||||
} else {
|
||||
throw new Error(data ? data : 'Form submission failed and no error message returned from: ' + action);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
displayError(thisForm, error);
|
||||
});
|
||||
}
|
||||
|
||||
function displayError(thisForm, error) {
|
||||
thisForm.querySelector('.loading').classList.remove('d-block');
|
||||
thisForm.querySelector('.error-message').innerHTML = error;
|
||||
thisForm.querySelector('.error-message').classList.add('d-block');
|
||||
}
|
||||
|
||||
})();
|
||||