<!DOCTYPE html>
<head>
    <link rel="icon" href="https://i.imgur.com/z2N6ycx.png" type="image/png">
  </head>  
<html lang="ja" style="scroll-behavior: smooth;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Aozora Club</title>
    <style>
        .developer-image {
            width: 100px; /* 画像の幅 */
            height: 100px; /* 画像の高さ */
            overflow: hidden; /* はみ出した部分を隠す */
            border-radius: 50%; /* 丸くする */
            display: flex; /* 中央揃え */
            justify-content: center; /* 中央揃え */
            align-items: center; /* 中央揃え */
        }

        .developer-image img {
            width: 100%; /* 幅を100%に */
            height: auto; /* 高さは自動調整 */
            object-fit: cover; /* 画像をフィットさせる */
        }
    </style>
</head>
<body>
    <div class="header">
        <h2><a href="https://e-z.bio/ftap" target="_blank" rel="noopener noreferrer">Aozora Club</a></h2>
        <div class="mid-spot" onclick="document.body.classList.toggle('gold');"></div>
        <button class="contact-btn" onclick="joinDiscord()">
            <span class="glow"></span>
            <span class="contact-btn-content">Join Discord</span>
        </button>
        <div class="spotlight">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

    <canvas id="particleCanvas"></canvas>

    <div class="accent-lines">
        <div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div class="heroSubP">
        <p>Aozora Club Join Now?</p>
    </div>
    <div class="hero">
        <div class="heroT">
            <h2>Aozoraclub</h2>
            <h2>Aozoraclub</h2>
        </div>
    </div>
    <p class="heroP">セカイのAozoraがここに集まる。 <br>
    <div class="mountains">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="hero-spacer"></div>

    <div class="content-section">
        <div class="content-acc">
            <div></div>
            <div></div>
        </div>
        <p class="subt">Revolutionize Roblox</p>
        <h3 class="title">Would you like to create <br>
            a script together?</h3>
        <p class="subp">Join Discord now and experience pleasure like never before. <br></p>
    </div>

    <div class="developer-section">
        <div class="developer-card">
            <div class="glow-effect"></div>
            <div class="developer-card-inner">
                <div class="developer-card-front">
                    <div class="developer-image">
                        <img src="https://i.pinimg.com/736x/c5/a2/6d/c5a26df1e7b9f223431117a332955b70.jpg" alt="Developer Photo">
                    </div>
                    <h3>Developer</h3>
                    <p>xt._.tx (907888040339443773)</p>
                    <div class="particle-dots"></div>
                </div>
                <div class="developer-card-back">
                    <div class="holographic-overlay"></div>
                    <h3>Skills</h3>
                    <ul>
                        <li><span>✦</span> Py/lua/luaU/C#/C++ Development</li>
                        <li><span>✦</span> UI Design</li>
                        <li><span>✦</span> Game Development</li>
                    </ul>
                    <div class="social-links">
                        <a href="https://discord.com/invite/y6W2DFQRGh" class="social-icon" target="_blank" rel="noopener noreferrer">
                            <img src="https://brandlogos.net/wp-content/uploads/2021/11/discord-logo.png" alt="Discord" width="24" height="24">
                        </a>
                        <a href="https://e-z.bio/ftap" class="social-icon" target="_blank" rel="noopener noreferrer">
                            <img src="https://icon-library.com/images/site-icon/site-icon-10.jpg" alt="Website" width="24" height="24">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

<!-- OGP (English version) -->
<meta property="og:title" content="Aozora Club | Creative Roblox Organization from Japan" />
<meta property="og:description" content="Aozoraclub is a Japanese creative group on Roblox, focused on game development, scripting, and community building." />
<meta property="og:image" content="https://i.imgur.com/NfhQq6I.png" />
<meta property="og:url" content="https://www.a-f.top/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Project Aozora Club" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Aozoraclub | Creative Roblox Organization from Japan" />
<meta name="twitter:description" content="Japanese Roblox group focused on creative innovation and collaborative development." />
<meta name="twitter:image" content="https://i.imgur.com/NfhQq6I.png" />
<meta name="twitter:url" content="https://www.a-f.top/" />

<script>
    const targetText = "Aozora Club";
    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*";
    let iterations = 0;
    
    function hackerTitle() {
        let displayed = "";
        for (let i = 0; i < targetText.length; i++) {
            if (i < iterations) {
                displayed += targetText[i];
            } else {
                displayed += chars[Math.floor(Math.random() * chars.length)];
            }
        }
    
        document.title = displayed;
    
        if (iterations < targetText.length) {
            iterations++;
            setTimeout(hackerTitle, 100); // 文字が現れる速度
        } else {
            // 完成後も定期的にもう一度やるなら↓
            setTimeout(() => {
                iterations = 0;
                hackerTitle();
            }, 500); // 3秒後に再アニメーション
        }
    }
    
    hackerTitle();
    </script>

<!-- bodyタグの最後に追加 -->
<div class="quantum-counter">
    <div class="counter-holo-display">
      <div class="counter-digits" id="quantumCount">
        <span>0</span><span>0</span><span>0</span><span>0</span>
      </div>
      <div class="holo-grid"></div>
      <div class="particle-ring"></div>
    </div>
    <div class="counter-label">VISITORS</div>
    <div class="counter-pulse"></div>
  </div>

  <!DOCTYPE html>
  <html lang="ja">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Aozora Club with Music Player</title>
      <link rel="stylesheet" href="styles.css">
      <link rel="icon" href="https://i.imgur.com/z2N6ycx.png" type="image/png">
  </head>
  <body>
      <!-- あなたの既存のコンテンツ -->
  
      <!-- 音楽プレイヤー -->
      <div class="music-player">
          <audio id="bgMusic" loop>
              <source src="youtube_Ks17y5uTrbw_audio.mp3" type="audio/mpeg">
          </audio>
          
          <div class="player-container">
              <div class="player-controls">
                  <button class="control-btn" id="playPauseBtn">
                      <svg class="play-icon" viewBox="0 0 24 24">
                          <path d="M8 5v14l11-7z"/>
                      </svg>
                      <svg class="pause-icon" viewBox="0 0 24 24">
                          <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
                      </svg>
                  </button>
                  
                  <div class="progress-container">
                      <div class="progress-bar" id="progressBar"></div>
                      <div class="progress-thumb" id="progressThumb"></div>
                  </div>
                  
                  <div class="time-display">
                      <span id="currentTime">0:00</span>
                      <span id="duration">0:00</span>
                  </div>
                  
                  <button class="control-btn volume-btn" id="volumeBtn">
                      <svg class="volume-high" viewBox="0 0 24 24">
                          <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
                      </svg>
                      <svg class="volume-low" viewBox="0 0 24 24">
                          <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
                      </svg>
                      <svg class="volume-mute" viewBox="0 0 24 24">
                          <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
                      </svg>
                  </button>
                  
                  <div class="volume-slider-container">
                      <input type="range" min="0" max="1" step="0.01" value="0.5" class="volume-slider" id="volumeSlider">
                  </div>
              </div>
              
              <div class="song-info">
                  <div class="song-title">Now Playing</div>
                  <div class="artist-name">HOME - Resonance</div>
              </div>
              
              <div class="visualizer" id="visualizer">
                  <div class="bar"></div>
                  <div class="bar"></div>
                  <div class="bar"></div>
                  <div class="bar"></div>
                  <div class="bar"></div>
                  <div class="bar"></div>
                  <div class="bar"></div>
                  <div class="bar"></div>
                  <div class="bar"></div>
                  <div class="bar"></div>
              </div>
          </div>
      </div>
  
      <script src="script.js"></script>
  </body>
  </html>