https://whatthe.site/

스캔 ID:: 601e21cf-0fb4-4cfe-bb97-b167183b5589완료
제출된 URL:: https://whatthe.site/
보고서 완료:: 2024년 12월 19일 16:24:54

링크 · 0개 결과

페이지에서 식별된 외부 링크

JavaScript 변수 · 8개 결과

페이지의 창 개체에 로드된 전역 JavaScript 변수는 함수 외부에서 선언된 변수로, 현재 범위 내에서 코드의 어느 부분에서나 액세스할 수 있습니다

이름	유형
onbeforetoggle	object
documentPictureInPicture	object
onscrollend	object
clearPreviousEffect	function
typeEffect	function
startSequence	function
resetSequence	function
handleEnter	function

콘솔 로그 메시지 · 2개 결과

웹 콘솔에 기록된 메시지

유형	카테고리	로그
verbose	dom	URL https://whatthe.site/ 텍스트 [DOM] Password field is not contained in a form: (More info: https://goo.gl/9p2vKq) %o
error	network	URL https://whatthe.site/favicon.ico 텍스트 Failed to load resource: the server responded with a status of 404 (Not Found)

HTML

페이지의 원시 HTML 본문

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>What the</title>
    <style>
        body {
            background-color: #1a1a1a;
            color: white;
            font-family: monospace;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .message {
            font-size: 24px;
            white-space: nowrap;
            overflow: hidden;
        }
        input[type="password"] {
            background-color: #2a2a2a;
            border: none;
            color: white;
            font-size: 24px;
            padding: 10px;
            margin-top: 20px;
            display: block;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
            20%, 40%, 60%, 80% { transform: translateX(10px); }
        }
        .shake {
            animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
        }
    </style>
</head>
<body>

<div id="message1" class="message">What th</div>
<div id="message2" class="message"></div>
<input type="password" id="passwordInput" placeholder="Password..." style="opacity: 0;">

<script>
    const message1 = document.getElementById('message1');
    const message2 = document.getElementById('message2');
    const passwordInput = document.getElementById('passwordInput');
    let enterAccepted = true;

    function clearPreviousEffect() {
        message1.innerHTML = '';
        message2.innerHTML = '';
        passwordInput.value = '';
        passwordInput.style.opacity = 0;
    }

    function typeEffect(element, text, callback) {
        let index = 0;
        element.innerHTML = '';

        function type() {
            if (index < text.length) {
                element.innerHTML += text.charAt(index);
                index++;
                setTimeout(type, 110);
            } else if (callback) {
                callback();
            }
        }

        type();
    }

    function startSequence() {
        clearPreviousEffect(); 
        enterAccepted = true;
        typeEffect(message1, "What the", () => {
            typeEffect(message2, "Please enter the password...", () => {
                passwordInput.style.opacity = 1;
                passwordInput.focus();
            });
        });
    }

    function resetSequence() {
        clearPreviousEffect();
        setTimeout(startSequence, 500);
    }

    function handleEnter(e) {
        if (e.key === "Enter" && enterAccepted) {
            enterAccepted = false; 
            passwordInput.classList.add('shake');
            setTimeout(() => {
                passwordInput.classList.remove('shake');
                typeEffect(message1, "Incorrect password...", () => {
                    setTimeout(resetSequence, 1500); 
                });
            }, 820); 
        }
    }

    passwordInput.addEventListener('input', () => {
        passwordInput.addEventListener('keydown', handleEnter);
    });

    window.onload = startSequence;
</script>




</body></html>