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

ID scansione:
76893658-f26f-40e8-aec3-53b8af270ac9Fatto
URL inviato:
https://juntario.org/
Report terminato:

I link in uscita identificati dalla pagina

Variabili JavaScript · 14 trovate

Le variabili JavaScript globali caricate sull'oggetto finestra di una pagina sono variabili dichiarate all'esterno delle funzioni e accessibili da qualsiasi punto del codice nell'ambito corrente

NomeTipo
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
__cfBeaconobject
__cfQRobject
sliderobject
imagesobject
currentImagenumber
changeImagefunction
showParagraphfunction

Messaggi di log della console · 8 trovati

Messaggi registrati nella console Web

TipoCategoriaLog
warningother
Testo
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.
warningother
Testo
Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'browsing-topics'.
warningother
Testo
Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.
warningother
Testo
Error with Permissions-Policy header: Unrecognized feature: 'usb'.
warningother
Testo
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.
warningother
Testo
Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'browsing-topics'.
warningother
Testo
Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.
warningother
Testo
Error with Permissions-Policy header: Unrecognized feature: 'usb'.

HTML

Il corpo HTML non elaborato della pagina

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