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

掃描 ID：
76893658-f26f-40e8-aec3-53b8af270ac9已完成
已提交的 URL：
https://juntario.org/
報告完成時間：

連結 · 找到 0 個

從頁面中識別的傳出連結

JavaScript 變數 · 找到 14 個

在頁面的視窗物件上載入的全域 JavaScript 變數是在函數外部宣告的變數，可從目前範圍內程式碼中的任何位置存取

名稱類型
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
__cfBeaconobject
__cfQRobject
sliderobject
imagesobject
currentImagenumber
changeImagefunction
showParagraphfunction

主控台記錄訊息 · 找到 8 條

記錄到 Web 主控台的訊息

類型類別記錄
warningother
Text
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
Text
Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'browsing-topics'.
warningother
Text
Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.
warningother
Text
Error with Permissions-Policy header: Unrecognized feature: 'usb'.
warningother
Text
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
Text
Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'browsing-topics'.
warningother
Text
Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.
warningother
Text
Error with Permissions-Policy header: Unrecognized feature: 'usb'.

HTML

頁面的原始 HTML 主體

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