微件:Intro：修订间差异

来自SOKA CAFE
可视化wikitext
 
（未显示同一用户的2个中间版本）
第1行： 第1行：
<<!DOCTYPE html>
<html lang="zh-CN">
<html lang="zh-CN">
<head>
<head>
第15行： 第14行：
         body {
         body {
             font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
             font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
            overflow: hidden;
            height: 100vh;
         }
         }
          
          
第213行： 第210行：
         /* 响应式设计 */
         /* 响应式设计 */
         @media (max-width: 768px) {
         @media (max-width: 768px) {
             .intro-title {
             .intro-title { font-size: 2.2em; }
                font-size: 2.2em;
             .intro-subtitle { font-size: 1em; }
            }
             .intro-logo { max-width: 130px; }
           
             .progress-container { width: 200px; }
             .intro-subtitle {
             .control-btn { padding: 6px 12px; font-size: 0.8em; }
                font-size: 1em;
            }
           
             .intro-logo {
                max-width: 130px;
            }
           
             .progress-container {
                width: 200px;
            }
           
             .control-btn {
                padding: 6px 12px;
                font-size: 0.8em;
            }
         }
         }
          
          
         @media (max-width: 480px) {
         @media (max-width: 480px) {
             .intro-title {
             .intro-title { font-size: 1.8em; letter-spacing: 1px; }
                font-size: 1.8em;
             .intro-subtitle { font-size: 0.9em; letter-spacing: 1px; }
                letter-spacing: 1px;
             .intro-logo { max-width: 100px; }
            }
             .progress-container { width: 180px; bottom: 50px; }
           
             .control-btn { padding: 5px 10px; font-size: 0.7em; }
             .intro-subtitle {
             .intro-controls { bottom: 15px; right: 15px; }
                font-size: 0.9em;
                letter-spacing: 1px;
            }
           
             .intro-logo {
                max-width: 100px;
            }
           
             .progress-container {
                width: 180px;
                bottom: 50px;
            }
           
             .control-btn {
                padding: 5px 10px;
                font-size: 0.7em;
            }
           
             .intro-controls {
                bottom: 15px;
                right: 15px;
            }
         }
         }
     </style>
     </style>
第270行： 第230行：
     <div id="intro-container" class="intro-container">
     <div id="intro-container" class="intro-container">
         <div class="petals-background" id="petals-container"></div>
         <div class="petals-background" id="petals-container"></div>
       
         <div class="decoration decoration-1"></div>
         <div class="decoration decoration-1"></div>
         <div class="decoration decoration-2"></div>
         <div class="decoration decoration-2"></div>
       
         <div class="intro-content">
         <div class="intro-content">
             <img src="https://soka.cafe/images/b/b3/%E5%85%AB%E5%8F%B6%E8%8E%B2%E5%8D%8E%E4%BC%9A%E7%A4%BE.jpg" alt="八叶莲华会社" class="intro-logo">
             <img src="https://soka.cafe/images/b/b3/%E5%85%AB%E5%8F%B6%E8%8E%B2%E5%8D%8E%E4%BC%9A%E7%A4%BE.jpg" alt="八叶莲华会社" class="intro-logo">
           
             <h1 class="intro-title">八叶莲华会社</h1>
             <h1 class="intro-title">
             <p class="intro-subtitle">“中华Air本文化的活化石，了解Air本文化的最好途径”</p>
                八叶莲华会社
            </h1>
           
             <p class="intro-subtitle">传统与创新的完美融合</p>
         </div>
         </div>
       
         <div class="progress-container">
         <div class="progress-container">
             <div class="progress-bar" id="progress-bar"></div>
             <div class="progress-bar" id="progress-bar"></div>
         </div>
         </div>
       
         <div class="intro-controls">
         <div class="intro-controls">
             <button class="control-btn" id="skip-btn">跳过</button>
             <button class="control-btn" id="skip-btn">跳过</button>
第301行： 第253行：
             const muteBtn = document.getElementById('mute-btn');
             const muteBtn = document.getElementById('mute-btn');
             const petalsContainer = document.getElementById('petals-container');
             const petalsContainer = document.getElementById('petals-container');
             let audioContext;
 
             let oscillator;
             // --- MODIFIED: Replaced oscillator with Audio element ---
             let backgroundAudio;  
             let isMuted = false;
             let isMuted = false;
             let animationDuration = 4500; // 动画总时长（毫秒）
             let animationDuration = 4500; // 动画总时长（毫秒）
            let animationTimer;
              
              
             // 创建花瓣背景
             // 创建花瓣背景
第312行： 第266行：
                     const petal = document.createElement('div');
                     const petal = document.createElement('div');
                     petal.classList.add('petal');
                     petal.classList.add('petal');
                   
                    // 随机位置和大小
                     const size = Math.random() * 15 + 10;
                     const size = Math.random() * 15 + 10;
                     petal.style.width = `${size}px`;
                     petal.style.width = `${size}px`;
第320行： 第272行：
                     petal.style.animationDelay = `${Math.random() * 10}s`;
                     petal.style.animationDelay = `${Math.random() * 10}s`;
                     petal.style.animationDuration = `${Math.random() * 10 + 10}s`;
                     petal.style.animationDuration = `${Math.random() * 10 + 10}s`;
                   
                    // 随机旋转和颜色
                     petal.style.transform = `rotate(${Math.random() * 90}deg)`;
                     petal.style.transform = `rotate(${Math.random() * 90}deg)`;
                     petal.style.background = `rgba(214, 177, 97, ${Math.random() * 0.5 + 0.3})`;
                     petal.style.background = `rgba(214, 177, 97, ${Math.random() * 0.5 + 0.3})`;
                   
                     petalsContainer.appendChild(petal);
                     petalsContainer.appendChild(petal);
                 }
                 }
             }
             }
           
 
             // 创建音效
             // --- REPLACED: Function now loads and plays the MP3 file ---
             function createSound() {
             function createSound() {
                 try {
                 try {
                     audioContext = new (window.AudioContext || window.webkitAudioContext)();
                     const audioURL = 'https://vip.123pan.cn/1826204916/Composition/%E3%80%90%E6%BA%90%E6%96%87%E4%BB%B6%E3%80%91%E5%AE%97%E6%95%99%E9%83%BD%E5%B8%82%E7%A5%AD%20~%20Shukyo%20City%20Festival/%E3%80%90%E7%BB%84%E6%9B%B2%E3%80%91RB%20Suite%20of%20Trihydrate%20Final.mp3';
                    oscillator = audioContext.createOscillator();
                     backgroundAudio = new Audio(audioURL);
                     const gainNode = audioContext.createGain();
                     backgroundAudio.volume = 0.8; // Set initial volume
                      
                     backgroundAudio.play();
                    oscillator.type = 'sine';
 
                    oscillator.frequency.setValueAtTime(440, audioContext.currentTime);
                     // Set up automatic fade out at the end of the animation
                    gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
                     setTimeout(fadeOutAndStop, animationDuration - 1200);
                      
 
                    oscillator.connect(gainNode);
                    gainNode.connect(audioContext.destination);
                   
                    oscillator.start();
                   
                     // 淡出音效
                     setTimeout(() => {
                        gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 1.2);
                    }, animationDuration - 1200);
                 } catch (e) {
                 } catch (e) {
                     console.log('音频上下文不支持');
                     console.error('Error creating or playing audio:', e);
                 }
                 }
             }
             }
              
              
             // 跳过动画
             // --- ADDED: New function to fade out the audio smoothly ---
            function fadeOutAndStop() {
                if (!backgroundAudio) return;
 
                const fadeDuration = 1200; // 1.2 seconds
                const fadeInterval = 50; // ms
                const volumeDecrement = backgroundAudio.volume / (fadeDuration / fadeInterval);
 
                const fade = setInterval(() => {
                    let currentVolume = backgroundAudio.volume - volumeDecrement;
                    if (currentVolume > 0) {
                        backgroundAudio.volume = currentVolume;
                    } else {
                        backgroundAudio.volume = 0;
                        backgroundAudio.pause();
                        clearInterval(fade);
                    }
                }, fadeInterval);
            }
 
            // --- MODIFIED: This function now controls the new audio element ---
             function skipAnimation() {
             function skipAnimation() {
                 container.style.opacity = '0';
                 document.body.style.overflow = '';
                clearTimeout(animationTimer);
                  
                  
                 if (oscillator) {
                // Fade out audio if it's playing
                     oscillator.stop();
                 if (backgroundAudio) {
                     fadeOutAndStop();
                 }
                 }
               
                container.style.opacity = '0';
                  
                  
                 setTimeout(() => {
                 setTimeout(() => {
第367行： 第331行：
             }
             }
              
              
             // 切换静音
             // --- MODIFIED: This function now controls the new audio element ---
             function toggleMute() {
             function toggleMute() {
                 if (!audioContext) return;
                 if (!backgroundAudio) return; // Don't do anything if audio hasn't been created
               
                if (isMuted) {
                    audioContext.resume();
                    muteBtn.textContent = '🔊';
                } else {
                    audioContext.suspend();
                    muteBtn.textContent = '🔇';
                }
                  
                  
                 isMuted = !isMuted;
                 isMuted = !isMuted;
                backgroundAudio.muted = isMuted;
                muteBtn.textContent = isMuted ? '🔇' : '🔊';
             }
             }
              
              
             // 初始化
             // 初始化
             function init() {
             function init() {
                document.body.style.overflow = 'hidden';
                 createPetals();
                 createPetals();
                  
                  
                // 触发入场动画
                 requestAnimationFrame(() => {
                 requestAnimationFrame(() => {
                     container.style.opacity = '1';
                     container.style.opacity = '1';
                     container.classList.add('is-active');
                     container.classList.add('is-active');
                      
                      
                    // 开始进度条动画
                     let progress = 0;
                     let progress = 0;
                     const interval = 30;
                     const interval = 30;
第399行： 第356行：
                         progress += increments;
                         progress += increments;
                         progressBar.style.width = `${progress}%`;
                         progressBar.style.width = `${progress}%`;
                       
                         if (progress >= 100) {
                         if (progress >= 100) {
                             clearInterval(progressInterval);
                             clearInterval(progressInterval);
第405行： 第361行：
                     }, interval);
                     }, interval);
                      
                      
                     // 创建音效（需要用户交互）
                     // --- MODIFIED: The click listener now creates the MP3 sound ---
                     document.body.addEventListener('click', function() {
                     document.body.addEventListener('click', function() {
                         if (!audioContext) {
                         if (!backgroundAudio) { // Only create sound once
                             createSound();
                             createSound();
                         }
                         }
第413行： 第369行：
                 });
                 });
                  
                  
                 // 设置自动结束
                 animationTimer = setTimeout(skipAnimation, animationDuration);
                setTimeout(skipAnimation, animationDuration);
               
                // 事件监听
                 skipBtn.addEventListener('click', skipAnimation);
                 skipBtn.addEventListener('click', skipAnimation);
                 muteBtn.addEventListener('click', toggleMute);
                 muteBtn.addEventListener('click', toggleMute);
             }
             }
              
              
            // 启动初始化
             init();
             init();
         });
         });
     </script>
     </script>
</body>
</body>
</html><noinclude>
</html>
{{#Widget:Intro}}
</noinclude>

2025年8月30日 (六) 06:53的最新版本

八叶莲华会社

八叶莲华会社

“中华Air本文化的活化石，了解Air本文化的最好途径”

取自“https://soka.cafe/index.php?title=微件:Intro&oldid=2657”