https://hitable.cloud/

掃描 ID：: ecf48869-3424-46a7-92ff-c1fd11b6579c已完成
已提交的 URL：: https://hitable.cloud/
報告完成時間：: 2024年11月30日 00:38:19
連結 · 找到 8 個

從頁面中識別的傳出連結
連結	Text
https://www.youtube.com/@HITable	YOUTUBE
https://steamcommunity.com/id/Moneybotting/	TF2
https://steamcommunity.com/id/HitableSteam/	CS2
https://discord.gg/hvhcrew	DISCORD
https://t.me/HITing_P	TELEGRAM
https://www.moneybot.cash/forums/index.php?/profile/449-hit/
https://community.primordial.dev/members/hit.8370/
https://fatality.win/members/hit.19378/
JavaScript 變數 · 找到 7 個

在頁面的視窗物件上載入的全域 JavaScript 變數是在函數外部宣告的變數，可從目前範圍內程式碼中的任何位置存取
名稱	類型
onbeforetoggle	object
documentPictureInPicture	object
onscrollend	object
toggleMute	function
showPopup	function
typeNextText	function
fadeOutText	function
主控台記錄訊息 · 找到 0 條

記錄到 Web 主控台的訊息
HTML

頁面的原始 HTML 主體
<html><head><base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Open Graph / Discord / Telegram embed meta tags -->
<meta property="og:title" content="HIT's Bio">
<meta property="og:description" content="More info about me">
<meta property="og:type" content="website">
<title>T's Bio HI</title>

<!-- Favicon links for various devices/contexts -->
<link rel="icon" type="image/x-icon" href="hit.ico">
<link rel="apple-touch-icon" sizes="180x180" href="hit.png">
<link rel="icon" type="image/png" sizes="32x32" href="hit-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="hit-16x16.png">

<script>
// Background Music Control
let bgMusic;
let hasInteracted = false;

window.onload = function() {
    bgMusic = new Audio('music.wav');
    bgMusic.loop = true;
    bgMusic.volume = 0.5;
    bgMusic.muted = true; // Start muted
    
    // Update mute button to show muted state initially
    const muteButton = document.getElementById('muteButton');
    muteButton.textContent = '🔇'; // Set initial state to muted icon
    
    // Add error handling for audio loading
    bgMusic.addEventListener('error', function(e) {
        console.log("Error loading audio: ", e);
    });

    // Remove the click listener for first interaction since we want it to stay paused
    // We'll only start playing when unmute is explicitly clicked

    // Pause music when tab is not visible
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            if (bgMusic) bgMusic.pause();
        } else {
            if (bgMusic && !bgMusic.muted && hasInteracted) {
                bgMusic.play().catch(function(error) {
                    console.log("Playback failed:", error);
                });
            }
        }
    });
};

// Update the toggleMute function
function toggleMute() {
    if (bgMusic) {
        bgMusic.muted = !bgMusic.muted;
        const muteButton = document.getElementById('muteButton');
        muteButton.textContent = bgMusic.muted ? '🔇' : '🔊';
        
        // If unmuting for the first time, start playing
        if (!bgMusic.muted) {
            hasInteracted = true;
            bgMusic.play().catch(function(error) {
                console.log("Playback failed:", error);
            });
        }
    }
}

// Animate the title text
(function() {
    let title = "HIT's Bio ";  // Added space at end for smooth looping
    let position = 0;
    
    setInterval(function() {
        position++;
        if(position >= title.length) {
            position = 0;
        }
        document.title = title.substring(position) + title.substring(0, position);
    }, 400);
})();

// Variables for popup control
let popupTimeout;
let isPopupVisible = false;

// Function to show popup
function showPopup() {
    if (isPopupVisible) {
        // If popup is visible, just reset the timeout
        clearTimeout(popupTimeout);
        popupTimeout = setTimeout(() => {
            const popup = document.querySelector('.popup');
            popup.classList.remove('show');
            setTimeout(() => {
                popup.remove();
                isPopupVisible = false;
            }, 300);
        }, 2000);
        return;
    }
    
    isPopupVisible = true;
    const popup = document.createElement('div');
    popup.className = 'popup';
    
    // Create arrow and message elements
    const arrow = document.createElement('div');
    arrow.className = 'popup-arrow';
    const message = document.createElement('div');
    message.className = 'popup-message';
    message.textContent = 'Not yet :]';
    
    // Add arrow and message to popup
    popup.appendChild(arrow);
    popup.appendChild(message);
    
    const fourthIcon = document.querySelector('.icon-container').children[3];
    const rect = fourthIcon.getBoundingClientRect();
    
    popup.style.top = `${rect.bottom + 15}px`; // Increased spacing for arrow
    popup.style.left = `${rect.left + (rect.width / 2)}px`;
    
    document.body.appendChild(popup);
    
    setTimeout(() => popup.classList.add('show'), 10);

    popupTimeout = setTimeout(() => {
        popup.classList.remove('show');
        setTimeout(() => {
            popup.remove();
            isPopupVisible = false;
        }, 300);
    }, 2000);
}

let typingTexts = [
    "hope kraken doesnt eat the server wires again",
    "hack vs hack enthusiast", 
    "mmm i crave for Батон",
    "pasting specialist",
    "sick beats DYLY",
    "u got tapped? cry more",
    "1 tick dt go brrrr",
    "skill issue detected",
    "ratio + cope + mald",
    "hvh is dead? lol no",
    "imagine",
    "best configs in discord",
    "best en1gma.tech and memedora.club admin"
];

let currentTextIndex = 0;
let currentCharIndex = 0;
let typingElement = null;

setTimeout(() => {
    
    // Create and add typing text element
    typingElement = document.createElement('div');
    typingElement.className = 'typing-text';
    document.querySelector('.content-wrapper').insertBefore(typingElement, document.querySelector('.button-container'));
    
    // Start typing animation
    typeNextText();
}, 6000);

function typeNextText() {
    currentCharIndex = 0;
    // Get random index different from current one
    let newIndex;
    do {
        newIndex = Math.floor(Math.random() * typingTexts.length);
    } while (newIndex === currentTextIndex && typingTexts.length > 1);
    
    currentTextIndex = newIndex;
    let textToType = typingTexts[currentTextIndex];
    typingElement.textContent = '';
    
    let typingInterval = setInterval(() => {
        if (currentCharIndex < textToType.length) {
            typingElement.textContent += textToType[currentCharIndex];
            currentCharIndex++;
        } else {
            clearInterval(typingInterval);
            setTimeout(() => {
                fadeOutText(() => {
                    typeNextText();
                });
            }, 2000); // Wait 2 seconds before fading out
        }
    }, 100); // Typing speed (100ms between characters)
}

function fadeOutText(callback) {
    typingElement.style.opacity = '0';
    setTimeout(() => {
        typingElement.style.opacity = '1';
        callback();
    }, 500); // Fade out duration
}
</script>

<style>
  body {
    margin: 0;
    padding: 0;
    background-color: #000000;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Arial', sans-serif;
    overflow: hidden;
    flex-direction: column;
  }

  #muteButton {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
    opacity: 0.8;
    animation: textGlowPulse 2s ease-in-out infinite; /* Added this line */
  }

  #muteButton.active {
    opacity: 1;
  }

  .popup {
    position: fixed;
    transform: translateX(-50%) scale(0.7);
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 1000;
  }

  .popup-arrow {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgba(255, 255, 255, 0.2);
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    backdrop-filter: blur(10px);
  }

  .popup-message {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 15px 25px;
    border-radius: 20px;
    color: #ffffff;
    font-weight: bold;
  }

  .popup.show {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }

  .content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    position: relative; /* Add this */
  }

  .hit-text {
    color: #ffffff;
    font-size: 8rem;
    font-weight: bold;
    letter-spacing: 10px;
    animation: textGlowPulse 2s ease-in-out infinite;
    margin: 0;
    padding: 0;
    transition: transform 0.8s ease;
  }

    .typing-text {
    color: #ffffff;
    font-size: 1.5rem;
    margin-top: 0px;
    margin-bottom: 0px;
    min-height: 2rem;
    animation: textGlowPulse 2s ease-in-out infinite;
    transition: opacity 0.5s ease;
    text-align: center;
  }

  .button-container {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    transform: translateX(52px); /* Changed from 50px to 52px for another slight right movement */
  }

  .social-button {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 3px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px 15px;
    animation: textGlowPulse 2s ease-in-out infinite;
    text-decoration: none;
    transition: transform 0.2s ease;
  }

  .separator {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: bold;
    animation: textGlowPulse 2s ease-in-out infinite;
  }

  .social-button:hover {
    transform: scale(1.1);
  }

  .icon-container {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    justify-content: center;
    align-items: center;
  }

  .icon-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .icon-button:hover {
    transform: scale(1.2);
    filter: brightness(1.2);
  }

  .icon-button img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    animation: svgGlowPulse 2s ease-in-out infinite;
    filter: brightness(0) invert(1);
    transition: all 0.3s ease;
  }

  .icon-button:hover img {
    transform: scale(1.1);
  }

  @keyframes textGlowPulse {
    0% {
      text-shadow: 0 0 5px rgba(255, 255, 255, 0.8),
                   0 0 10px rgba(255, 255, 255, 0.8);
    }
    50% {
      text-shadow: 0 0 20px rgba(255, 255, 255, 0.8),
                   0 0 30px rgba(255, 255, 255, 0.8),
                   0 0 40px rgba(255, 255, 255, 0.8);
    }
    100% {
      text-shadow: 0 0 5px rgba(255, 255, 255, 0.8),
                   0 0 10px rgba(255, 255, 255, 0.8);
    }
  }

  @keyframes svgGlowPulse {
    0% {
        filter: brightness(0) invert(1) drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
    }
    50% {
        filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.8))
               drop-shadow(0 0 12px rgba(255, 255, 255, 0.8));
    }
    100% {
        filter: brightness(0) invert(1) drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
    }
  }

  @media screen and (max-width: 768px) {
    .hit-text {
      font-size: 6rem;
      letter-spacing: 5px;
    }

    .button-container {
      transform: translateX(0); /* Reset transform on mobile */
      flex-direction: column;
      gap: 15px;
    }

    .social-button {
      font-size: 1.8rem;
      letter-spacing: 2px;
    }

    .separator {
      display: none;
    }

    .icon-container {
      gap: 15px;
    }

    .icon-button {
      width: 35px;
      height: 35px;
    }

    .icon-button img {
      width: 20px;
      height: 20px;
    }

    #muteButton {
      width: 35px;
      height: 35px;
      font-size: 18px;
    }
  }

  @media screen and (max-width: 480px) {
    .hit-text {
      font-size: 5rem;
      letter-spacing: 3px;
    }

    .social-button {
      font-size: 1.5rem;
      padding: 8px 12px;
    }

    .icon-button {
      width: 30px;
      height: 30px;
    }

    .icon-button img {
      width: 18px;
      height: 18px;
    }

    #muteButton {
      width: 30px;
      height: 30px;
      font-size: 16px;
    }
  }
</style>
</head>
<body>
  <button id="muteButton" onclick="toggleMute()">🔇</button>
  <div class="content-wrapper">
    <div class="hit-text">HIT</div>
    <div class="button-container">
      <a href="https://www.youtube.com/@HITable" class="social-button">YOUTUBE</a>
      <span class="separator">•</span>
      <a href="https://steamcommunity.com/id/Moneybotting/" class="social-button">TF2</a>
      <span class="separator">•</span>
      <a href="https://steamcommunity.com/id/HitableSteam/" class="social-button">CS2</a>
      <span class="separator">•</span>
      <a href="https://discord.gg/hvhcrew" class="social-button">DISCORD</a>
      <span class="separator">•</span>
      <a href="https://t.me/HITing_P" class="social-button">TELEGRAM</a>
    </div>
    <div class="icon-container">
      <a href="https://www.moneybot.cash/forums/index.php?/profile/449-hit/" class="icon-button">
        <img alt="Moneybot" src="mb.png" width="32" height="32">
      </a>
      <a href="https://community.primordial.dev/members/hit.8370/" class="icon-button">
        <img alt="Primo" src="prim.png" width="28" height="28">
      </a>
      <a href="https://fatality.win/members/hit.19378/" class="icon-button">
        <img alt="Fatality" src="ft.png" width="24" height="24">
      </a>
      <div class="icon-button" onclick="showPopup()" style="color: white; font-size: 20px; font-weight: bold; animation: textGlowPulse 2s ease-in-out infinite;">
        GS
      </div>
    </div>
  </div>


</body></html>