https://juntario.org/?sw=800

ID de l'analyse :: 76893658-f26f-40e8-aec3-53b8af270ac9Terminée
URL soumise :: https://juntario.org/
Fin du rapport :: 14 déc. 2024, 23:01:15
Liens : 0 trouvé(s)

Liens sortants identifiés à partir de la page
Variables JavaScript : 14 trouvée(s)

Les variables JavaScript globales chargées dans l'objet fenêtre d'une page sont des variables déclarées en dehors des fonctions et accessibles depuis n'importe quel endroit du code au sein du champ d'application actuel
Nom	Type
onbeforetoggle	object
documentPictureInPicture	object
onscrollend	object
__cfBeacon	object
__cfQR	object
slider	object
images	object
currentImage	number
changeImage	function
showParagraph	function
Messages de journal de console : 8 trouvé(s)

Messages consignés dans la console web
Type	Catégorie	Enregistrement
warning	other	texte Error with Feature-Policy header: Some features are specified in both Feature-Policy and Permissions-Policy header: camera, microphone. Values defined in Permissions-Policy header will be used.
warning	other	texte Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'browsing-topics'.
warning	other	texte Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.
warning	other	texte Error with Permissions-Policy header: Unrecognized feature: 'usb'.
warning	other	texte Error with Feature-Policy header: Some features are specified in both Feature-Policy and Permissions-Policy header: camera, microphone. Values defined in Permissions-Policy header will be used.
warning	other	texte Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'browsing-topics'.
warning	other	texte Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.
warning	other	texte Error with Permissions-Policy header: Unrecognized feature: 'usb'.
HTML

Le corps HTML de la page en données brutes
<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>Juntario</title>
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.juntario.org/">
    <meta property="og:title" content="Juntario">
    <meta property="og:description" content="The Official Website for hosting Juntario's artworks, and receiving answers to the FAQs.">
    <meta property="og:image" content="https://www.juntario.org/poster.png">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <link rel="canonical" href="https://www.juntario.org">
    <link rel="stylesheet" href="style.css">
<style>
  @media (max-width: 600px) {
    #acceptCookies, #privacyInfo {
      width: 100%;
      margin-top: 10px;
      box-sizing: border-box;
    }
    .cookie-banner {
      width: auto;
      padding: 10px;
    }
  }
  #acceptCookies, #privacyInfo {
    border: 2px solid red;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  }
</style></head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="https://www.juntario.org/">Juntario</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="about">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="socials">Socials</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="gallery">Gallery</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="faq">FAQ</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
<script type="text/javascript">
const removeBanner = (cookieBanner) => {
  if (document.body.contains(cookieBanner)) {
    document.body.removeChild(cookieBanner);
  }
};

const createBanner = () => {
  const cookieBanner = document.createElement('div');
  cookieBanner.style.position = 'fixed';
  cookieBanner.style.bottom = '20px';
  cookieBanner.style.left = '20px';
  cookieBanner.style.right = '20px';
  cookieBanner.style.backgroundColor = '#333';
  cookieBanner.style.color = 'white';
  cookieBanner.style.padding = '15px 20px';
  cookieBanner.style.textAlign = 'center';
  cookieBanner.style.zIndex = '9999';
  cookieBanner.style.fontFamily = 'Arial, sans-serif';
  cookieBanner.style.borderRadius = '8px';
  cookieBanner.style.boxSizing = 'border-box';

  const bannerText = document.createElement('span');
  bannerText.textContent = 'This website uses necessary cookies to ensure its basic functionalities, such as Cloudflare Services and Content Delivery Networks (CDNs). By continuing to use this site, you agree to our use of necessary cookies.';

  const acceptButton = document.createElement('button');
  acceptButton.id = 'acceptCookies';
  acceptButton.textContent = 'OK';
  acceptButton.style.marginTop = '10px';
  acceptButton.style.padding = '10px 20px';
  acceptButton.style.backgroundColor = '#007BFF';
  acceptButton.style.color = 'white';
  acceptButton.style.border = 'none';
  acceptButton.style.borderRadius = '4px';
  acceptButton.style.cursor = 'pointer';
  acceptButton.style.marginRight = '10px';

  const privacyButton = document.createElement('button');
  privacyButton.id = 'privacyInfo';
  privacyButton.textContent = 'Privacy info';
  privacyButton.style.marginTop = '10px';
  privacyButton.style.padding = '10px 20px';
  privacyButton.style.backgroundColor = '#28A745';
  privacyButton.style.color = 'white';
  privacyButton.style.border = 'none';
  privacyButton.style.borderRadius = '4px';
  privacyButton.style.cursor = 'pointer';

  cookieBanner.appendChild(bannerText);
  cookieBanner.appendChild(document.createElement('br'));
  cookieBanner.appendChild(acceptButton);
  cookieBanner.appendChild(privacyButton);

  document.body.appendChild(cookieBanner);

  acceptButton.addEventListener('click', () => {
    try {
      localStorage.setItem('cookiesAccepted', 'true');
      removeBanner(cookieBanner);
    } catch (error) {
      console.error('Error saving cookiesAccepted to localStorage:', error);
    }
  });

  privacyButton.addEventListener('click', () => {
    bannerText.textContent = 'Juntario.org does not collect personal information about the visitors nor share it with any Third-Parties / Advertisers / Companies. The only information obtained is publicly available such as your IP address. The Cloudflare Services provide error handling and reporting (RUM) analytics to identify performance issues, this does not collect personal information for Advertisers or any other Entity. Some functionality of the website depends on the collection of the screen width and height of the device. This data is used to optimize the user experience (e.g., adjusting layouts for mobile or desktop views).';
  });
};

try {
  const cookiesAccepted = localStorage.getItem('cookiesAccepted');
  if (cookiesAccepted !== 'true') {
    createBanner();
  }
} catch (error) {
  console.error('Error accessing localStorage:', error);
}

const style = document.createElement('style');
style.innerHTML = `
  @media (max-width: 600px) {
    #acceptCookies, #privacyInfo {
      width: 100%;
      margin-top: 10px;
      box-sizing: border-box;
    }
    .cookie-banner {
      width: auto;
      padding: 10px;
    }
  }
  #acceptCookies, #privacyInfo {
    border: 2px solid red;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  }
`;
document.head.appendChild(style);
</script>

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&amp;display=swap" rel="stylesheet">

<script type="text/javascript">
        window.onload = function() {
            var screenWidth = window.innerWidth;
            var currentUrl = window.location.href;
            var url = new URL(currentUrl);
            if (!url.searchParams.has('sw')) {
                url.searchParams.append('sw', screenWidth);
                window.location.href = url.href;
            } else {
                url.searchParams.delete('sw');
                window.history.replaceState({}, document.title, url.pathname);
            }
        };
</script>
<style>
#subtext {
    font-size: 1.2em;
}
.glitch {
    font-size: 5rem;
    position: relative;
    color: black;
    font-weight: none;
    animation: glitch-skew 3s infinite;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    color: inherit;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    animation: glitch-anim 2s infinite ease-in-out;
}

.glitch::before {
    left: 2px;
    text-shadow: -2px 0 red;
    clip: rect(2px, 900px, 90px, 0);
    animation: glitch-anim 2.5s infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -2px 0 cyan;
    clip: rect(10px, 900px, 85px, 0);
    animation: glitch-anim2 1.5s infinite linear alternate-reverse;
}

@keyframes glitch-skew {
    0%, 100% {
        transform: skew(0deg);
    }
    50% {
        transform: skew(5deg);
    }
}

@keyframes glitch-anim {
    0%, 20%, 40%, 60%, 80%, 100% {
        clip: rect(0, 900px, 0, 0);
    }
    10% {
        clip: rect(80px, 900px, 90px, 0);
    }
    30% {
        clip: rect(40px, 900px, 50px, 0);
    }
    50% {
        clip: rect(60px, 900px, 70px, 0);
    }
    70% {
        clip: rect(20px, 900px, 30px, 0);
    }
    90% {
        clip: rect(100px, 900px, 110px, 0);
    }
}

@keyframes glitch-anim2 {
    0%, 20%, 40%, 60%, 80%, 100% {
        clip: rect(0, 900px, 0, 0);
    }
    10% {
        clip: rect(70px, 900px, 80px, 0);
    }
    30% {
        clip: rect(50px, 900px, 60px, 0);
    }

    70% {
        clip: rect(10px, 900px, 20px, 0);
    }
    90% {
        clip: rect(90px, 900px, 100px, 0);
    }
}
.bk {
    background-color: #111;
    color: white;
    width: 100%;
    padding: 15px 0;
    margin-top: 150px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10;
    white-space: nowrap;
}

.mDT {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.375;
    letter-spacing: 0.5px;
    display: flex;
    white-space: nowrap;
    letter-spacing: 2px;
}

.tC {
    display: flex;
    animation: mT 200s linear infinite;
}

.tC span {
    display: inline-block;
    padding-right: 12.5px;
}

@keyframes mT {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
</style>
<div class="container" style="padding-top: 70px;">
    <h1 class="glitch" data-text="Juntario" id="welcome-text" style="text-align: center; color: white; text-shadow: rgba(0, 0, 0, 0.6) 0px 2px 4px; transform: skew(3deg) translate(1px, 3px);">Juntario</h1>
<p class="glitch" data-text="The Official Website" id="subtext" style="text-align: center; padding-bottom: 50px; color: white; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.60);">The Official Website</p>
</div>
<div class="container" style="text-align: center; padding-top: 50px; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.60);">
  <h1 class="head" style="color: white; font-size: 62px; margin: 0 20px; display: inline-block; font-style: italic;">Entertainment.</h1>
  <h1 class="head" style="color: white; font-size: 62px; margin: 0 20px; display: inline-block; font-style: italic;">Artworks.</h1>
  <h1 class="head" style="color: white; font-size: 62px; margin: 0 20px; display: inline-block; font-style: italic;">Specialties.</h1>
</div>
    <div class="bk">
        <div class="mDT">
            <div class="tC">
                <span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
                <span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
                <span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
                <span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
                <span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
                <span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
                <span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
                <span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
                <span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
                <span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
                <span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
                <span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
                <span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
                <span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
                <span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
                <span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
            </div>
        </div>
    </div>
<div class="imagination" style="background-image: url('https://juntario.org/bgi.png'); background-size: cover; background-attachment: fixed; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; width: 100%; height: 100vh; z-index: 99;">
<h1 style="margin: 0; padding: 0; position: relative; top: 10%; left: 50%; transform: translate(-50%, -50%); text-align: center; font: 50px 'Poppins', sans-serif; color:white; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);">The Featured Artworks</h1>
<style>
img {
        border: 50px solid #ffffff;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
    .imagination-slider {
        position: relative;
        width: 1000px;
        height: 750px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
    }

    .imagination-slider img {
        position: absolute;
        top: 0;
        left: 0;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
    }
    .imagination-slider img.active {
        opacity: 1;
    }
    @media only screen and (max-width: 1030px) {
         h1 {
          top: 15%;
         }
        .imagination-slider {
            width: 100%;
            height: 60vh;
            max-height: 60vh;
            max-width: 100%;
            position: relative;
            top: 10%;
            left: 0;
            transform: none;
            overflow: hidden;
        }
        .imagination-slider img {
            width: 100%;
            height: 100%;
            max-height: 60vh;
            max-width: 100%;
            object-fit: cover;
        }
    }
</style>
<div class="imagination-slider">
    <img src="https://64.media.tumblr.com/90109b82fdda03d5fe5d10c7f67dbf17/c09ca58dc8fe7578-7b/s2048x3072/d2af4a7d670b5b6baaa5ca2573f3bf7d04490f2a.png" alt="Image 1" class=""><img src="https://64.media.tumblr.com/25e988cfe59f35b0d2a33eca8e48a7b3/10a26d020241670d-32/s2048x3072/12902d5d794902b4fa0704a6a64a20faf7c49a96.png" alt="Image 2" class="active"><img src="https://64.media.tumblr.com/0440252c4e10fadf7f226e61af8aedb3/389e668ef77fcb6b-e7/s2048x3072/b994349c9227847ec8eb1a3e9f560cb47946776e.png" alt="Image 3" class=""><img src="https://64.media.tumblr.com/8d41668dc506d74881b92774a4cfad6b/469fce35d631e7e3-f0/s2048x3072/036253f1cf9dac407ab9c34d7ac71ea53045838b.png" alt="Image 4" class=""><img src="https://64.media.tumblr.com/65bc33c27ee097daaa68a1c03e55c961/cb92cf27dc8b214e-91/s2048x3072/984c2f5053c904b3697acd53ca506370625e3104.png" alt="Image 5" class=""></div>
<script type="text/javascript">
    var slider = document.querySelector('.imagination-slider');
    var images = slider.getElementsByTagName('img');
    var currentImage = 0;

    function changeImage() {
        images[currentImage].classList.remove('active');
        currentImage = (currentImage + 1) % images.length;
        images[currentImage].classList.add('active');
    }

    setInterval(changeImage, 3000);
</script>
</div>
<style>
.bb {
    background-color: #111;
    color: white;
    width: 100%;
    padding: 15px 0;
/*  margin-top: 150px; */
    margin-top: 0px; 
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10;
    white-space: nowrap;
}

.bbs {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.375;
    letter-spacing: 0.5px;
    display: flex;
    white-space: nowrap;
    letter-spacing: 2px;
}

.te-black {
    display: flex;
    animation: mBT 200s linear infinite;
}

.te-black span {
    display: inline-block;
    padding-right: 12.5px;
}

@keyframes mBT {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0%);
    }
}
</style>
<div class="bb">
      <div class="bbs">
            <div class="te-black">
                <span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
                <span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
                <span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
                <span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
                <span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
                <span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
                <span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
                <span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
                <span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
                <span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
                <span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
                <span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
                <span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
                <span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
                <span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
                <span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
                <span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
                <span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
            </div>
      </div>
</div>
<div class="vi" style="background-image: url('https://juntario.org/bg.png'); background-size: cover; background-attachment: fixed; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; width: 100%; height: 100vh; z-index: 99;">
<h1 style="margin: 0; padding: 0; position: relative; top: 10%; left: 50%; transform: translate(-50%, -50%); text-align: center; font: 50px 'Poppins', sans-serif; color:white; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);">Writing &amp; Ideas</h1>
<style>
img {
        border: 50px solid #ffffff;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
        .vi {
            width: 100%;
            height: 100vh;
            max-height: 100vh;
            max-width: 100%;
            position: relative;
            top: 0%;
            left: 0;
            transform: none;
            overflow: hidden;
        }

    .vi img {
        position: absolute;
        top: 0;
        left: 0;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
    }
    .vi img.active {
        opacity: 1;
    }
    @media only screen and (max-width: 1030px) {
        .vi {
            width: 100%;
            height: 100vh;
            max-height: 100vh;
            max-width: 100%;
            position: relative;
            top: 0%;
            left: 0;
            transform: none;
            overflow: hidden;
        }
        .vi img {
            width: 100%;
            height: 100%;
            max-height: 60vh;
            max-width: 100%;
            object-fit: cover;
        }
</style>
<style>
    .fade {
        opacity: 0;
        transition: opacity 2s ease-in-out;
    }
    .fade.av {
        opacity: 1;
    }
</style>
<div class="vi" overflow:="" hidden;="">
<p class="fade av" id="para1" style="background-color: rgba(0, 0, 0, 0.6); margin: 0; padding: 15px; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); text-align: center; font: 48px 'Poppins', sans-serif; color:white; text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.6);">The only way to lose is to do nothing.</p>
<p class="fade" id="para2" style="background-color: rgba(0, 0, 0, 0.6); margin: 0; padding: 15px; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); text-align: center; font: 48px 'Poppins', sans-serif; color:white; text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.6);">Practice takes time, sometimes years, but don't lose hope.</p>
<p class="fade" id="para3" style="background-color: rgba(0, 0, 0, 0.6); margin: 0; padding: 15px; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); text-align: center; font: 48px 'Poppins', sans-serif; color:white; text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.6);">You may feel defeated sometimes, but remember, even if that is true you have still gained experience.</p>
<p class="fade" id="para4" style="background-color: rgba(0, 0, 0, 0.6); margin: 0; padding: 15px; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); text-align: center; font: 48px 'Poppins', sans-serif; color:white; text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.6);">You are not God, remind yourself that you need to take breaks for various reasons.</p>
<p class="fade" id="para5" style="background-color: rgba(0, 0, 0, 0.6); margin: 0; padding: 15px; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); text-align: center; font: 48px 'Poppins', sans-serif; color:white; text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.6);">Recommendations, suggestions and opinions are not orders and criticism is unavoidable.</p>
<p class="fade" id="para6" style="background-color: rgba(0, 0, 0, 0.6); margin: 0; padding: 15px; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); text-align: center; font: 48px 'Poppins', sans-serif; color:white; text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.6);">Enjoy the simple things in life.</p>
</div>
</div>
<script type="text/javascript">
    let currentIndex = 0;
    const paragraphs = document.querySelectorAll('.fade');

    function showParagraph(index) {
        paragraphs.forEach((para, i) => {
            para.classList.toggle('av', i === index);
        });
    }

    function cycleParagraphs() {
        showParagraph(currentIndex);
        currentIndex = (currentIndex + 1) % paragraphs.length;
    }

    setInterval(cycleParagraphs, 7000);
    cycleParagraphs();
</script>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
    const glitchText = document.querySelector('.glitch');

    function randomGlitchEffect() {
        let randomSkew = Math.floor(Math.random() * 10) - 5;
        let randomXOffset = Math.floor(Math.random() * 10) - 5;
        let randomYOffset = Math.floor(Math.random() * 10) - 5;

        glitchText.style.transform = `skew(${randomSkew}deg) translate(${randomXOffset}px, ${randomYOffset}px)`;

        setTimeout(randomGlitchEffect, Math.random() * 500);
    }

    randomGlitchEffect();
});
</script>
<footer class="text-center py-4" style="position: relative; bottom: 0; margin: 0; padding: 0; width: 100%; height: 1vh; display: flex; justify-content: center; align-items: center;">
<p style="margin: 0; padding: 10px; color: white; font-size: 12px;">© 2024 Juntario.All rights reserved.</p>
<script defer="" crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
</footer>
<script defer="" src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon="{&quot;rayId&quot;:&quot;8f21d0cfcf1f3833&quot;,&quot;version&quot;:&quot;2024.10.5&quot;,&quot;r&quot;:1,&quot;serverTiming&quot;:{&quot;name&quot;:{&quot;cfExtPri&quot;:true,&quot;cfL4&quot;:true,&quot;cfSpeedBrain&quot;:true,&quot;cfCacheStatus&quot;:true}},&quot;token&quot;:&quot;8c83dd7285724c2896b5d4e44d86e658&quot;,&quot;b&quot;:1}" crossorigin="anonymous"></script>
<div style="position: fixed; bottom: 20px; left: 20px; right: 20px; background-color: rgb(51, 51, 51); color: white; padding: 15px 20px; text-align: center; z-index: 9999; font-family: Arial, sans-serif; border-radius: 8px; box-sizing: border-box;"><span>This website uses necessary cookies to ensure its basic functionalities, such as Cloudflare Services and Content Delivery Networks (CDNs). By continuing to use this site, you agree to our use of necessary cookies.</span><br><button id="acceptCookies" style="margin-top: 10px; padding: 10px 20px; background-color: rgb(0, 123, 255); color: white; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px;">OK</button><button id="privacyInfo" style="margin-top: 10px; padding: 10px 20px; background-color: rgb(40, 167, 69); color: white; border: none; border-radius: 4px; cursor: pointer;">Privacy info</button></div></body></html>