https://juntario.com/?screen_width=800

스캔 ID:: f58aa7a8-9d65-4054-a096-1c3bd32b7e38완료
제출된 URL:: https://juntario.com/
보고서 완료:: 2024년 11월 28일 18:37:08
링크 · 1개 결과

페이지에서 식별된 외부 링크
링크	텍스트
https://www.juntario.org/	Juntario
JavaScript 변수 · 11개 결과

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

웹 콘솔에 기록된 메시지
유형	카테고리	로그
error	network	URL https://juntario.org/bgi.png 텍스트 Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin
error	network	URL https://juntario.org/bg.png 텍스트 Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin
error	network	URL https://juntario.org/bgi.png 텍스트 Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin
error	network	URL https://juntario.org/bg.png 텍스트 Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin
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>
    <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">
</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>

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

<script>
        window.onload = function() {
            var screenWidth = window.innerWidth;
            var currentUrl = window.location.href;
            var url = new URL(currentUrl);
            if (!url.searchParams.has('screen_width')) {
                url.searchParams.append('screen_width', screenWidth);
                window.location.href = url.href;
            } else {
                url.searchParams.delete('screen_width');
                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(-4deg) translate(-2px, 4px);">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) {
        .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="active"><img src="https://64.media.tumblr.com/25e988cfe59f35b0d2a33eca8e48a7b3/10a26d020241670d-32/s2048x3072/12902d5d794902b4fa0704a6a64a20faf7c49a96.png" alt="Image 2" class=""><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>
    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>
    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>
    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"></script>
</footer>
</body></html>