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

스캔 ID:: 76893658-f26f-40e8-aec3-53b8af270ac9완료
제출된 URL:: https://juntario.org/
보고서 완료:: 2024년 12월 14일 23:01:15
링크 · 0개 결과

페이지에서 식별된 외부 링크
JavaScript 변수 · 14개 결과

페이지의 창 개체에 로드된 전역 JavaScript 변수는 함수 외부에서 선언된 변수로, 현재 범위 내에서 코드의 어느 부분에서나 액세스할 수 있습니다
이름	유형
onbeforetoggle	object
documentPictureInPicture	object
onscrollend	object
__cfBeacon	object
__cfQR	object
slider	object
images	object
currentImage	number
changeImage	function
showParagraph	function
콘솔 로그 메시지 · 8개 결과

웹 콘솔에 기록된 메시지
유형	카테고리	로그
warning	other	텍스트 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	텍스트 Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'browsing-topics'.
warning	other	텍스트 Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.
warning	other	텍스트 Error with Permissions-Policy header: Unrecognized feature: 'usb'.
warning	other	텍스트 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	텍스트 Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'browsing-topics'.
warning	other	텍스트 Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.
warning	other	텍스트 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>