SMANAGE/backup/www/Invite/test.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./css/clock.css" rel="stylesheet" />
    <link href="./css/night.css" rel="stylesheet" />
    <link href="./css/anim.css" rel="stylesheet" />
</head>
<body>
    <div class="anim-page-container">
        <div class="anim-page anim-page--first anim-page--active">
            <div class="night">
                <div class="shooting_star"></div>
                <div class="shooting_star"></div>
                <div class="shooting_star"></div>
                <div class="shooting_star"></div>
                <div class="shooting_star"></div>
                <!--<div class="shooting_star"></div>
                <div class="shooting_star"></div>
                <div class="shooting_star"></div>
                <div class="shooting_star"></div>
                <div class="shooting_star"></div>
                <div class="shooting_star"></div>
                <div class="shooting_star"></div>
                <div class="shooting_star"></div>
                <div class="shooting_star"></div>
                <div class="shooting_star"></div>
                <div class="shooting_star"></div>
                <div class="shooting_star"></div>
                <div class="shooting_star"></div>-->
            </div>
            <h1 class="anim-page__title">HI [名字]</h1>
            <p class="anim-page__content">欢迎来到 [银河锋锐软件开发工作室] 入职 系统，点击 [下一步] 来完成你的 [入职信息]</p>
        </div>
        <div class="anim-page anim-page--second anim-page--right">
            <h1 class="anim-page__title">时间</h1>
            <p class="anim-page__content">接下来我们大约要消耗你 5-10 分钟，由于协议问题，<br>我们不会保存你的cookies，因此你需要一次性完成内容。<br>点击"下一步"即代表你已知晓</p>
            <div class="clock-fall-container">
                <!-- 10个时钟，每个都有不同的时间 -->
                <div class="falling-clock falling-clock-1 clock-1" style="--target-scale:1.2; --hour-start:-30deg; --minute-start:-180deg">
                    <div class="clock-face">
                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="12" cy="12" r="10" fill="none" stroke="#4285F4" stroke-width="1.5"/>
                        </svg>
                        <div class="clock-hand clock-hand-hour"></div>
                        <div class="clock-hand clock-hand-minute"></div>
                        <div class="clock-center"></div>
                    </div>
                </div>
                <div class="falling-clock falling-clock-2 clock-2" style="--target-scale:1.3; --hour-start:-60deg; --minute-start:-90deg">
                    <div class="clock-face">
                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="12" cy="12" r="10" fill="none" stroke="#EA4335" stroke-width="1.5"/>
                        </svg>
                        <div class="clock-hand clock-hand-hour"></div>
                        <div class="clock-hand clock-hand-minute"></div>
                        <div class="clock-center"></div>
                    </div>
                </div>
                <div class="falling-clock falling-clock-3 clock-3" style="--target-scale:1.1; --hour-start:-120deg; --minute-start:-270deg">
                    <div class="clock-face">
                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="12" cy="12" r="10" fill="none" stroke="#34A853" stroke-width="1.5"/>
                        </svg>
                        <div class="clock-hand clock-hand-hour"></div>
                        <div class="clock-hand clock-hand-minute"></div>
                        <div class="clock-center"></div>
                    </div>
                </div>
                <div class="falling-clock falling-clock-4 clock-4" style="--target-scale:1.4; --hour-start:-150deg; --minute-start:-45deg">
                    <div class="clock-face">
                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="12" cy="12" r="10" fill="none" stroke="#FBBC05" stroke-width="1.5"/>
                        </svg>
                        <div class="clock-hand clock-hand-hour"></div>
                        <div class="clock-hand clock-hand-minute"></div>
                        <div class="clock-center"></div>
                    </div>
                </div>
                <div class="falling-clock falling-clock-5 clock-5" style="--target-scale:1.2; --hour-start:-210deg; --minute-start:-135deg">
                    <div class="clock-face">
                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="12" cy="12" r="10" fill="none" stroke="#673AB7" stroke-width="1.5"/>
                        </svg>
                        <div class="clock-hand clock-hand-hour"></div>
                        <div class="clock-hand clock-hand-minute"></div>
                        <div class="clock-center"></div>
                    </div>
                </div>
                <div class="falling-clock falling-clock-6 clock-6" style="--target-scale:1.5; --hour-start:-240deg; --minute-start:-315deg">
                    <div class="clock-face">
                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="12" cy="12" r="10" fill="none" stroke="#9C27B0" stroke-width="1.5"/>
                        </svg>
                        <div class="clock-hand clock-hand-hour"></div>
                        <div class="clock-hand clock-hand-minute"></div>
                        <div class="clock-center"></div>
                    </div>
                </div>
                <div class="falling-clock falling-clock-7 clock-7" style="--target-scale:1.3; --hour-start:-270deg; --minute-start:-225deg">
                    <div class="clock-face">
                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="12" cy="12" r="10" fill="none" stroke="#3F51B5" stroke-width="1.5"/>
                        </svg>
                        <div class="clock-hand clock-hand-hour"></div>
                        <div class="clock-hand clock-hand-minute"></div>
                        <div class="clock-center"></div>
                    </div>
                </div>
                <div class="falling-clock falling-clock-8 clock-8" style="--target-scale:1.1; --hour-start:-300deg; --minute-start:-360deg">
                    <div class="clock-face">
                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="12" cy="12" r="10" fill="none" stroke="#00BCD4" stroke-width="1.5"/>
                        </svg>
                        <div class="clock-hand clock-hand-hour"></div>
                        <div class="clock-hand clock-hand-minute"></div>
                        <div class="clock-center"></div>
                    </div>
                </div>
                <div class="falling-clock falling-clock-9 clock-9" style="--target-scale:1.4; --hour-start:-330deg; --minute-start:-160deg">
                    <div class="clock-face">
                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="12" cy="12" r="10" fill="none" stroke="#FF9800" stroke-width="1.5"/>
                        </svg>
                        <div class="clock-hand clock-hand-hour"></div>
                        <div class="clock-hand clock-hand-minute"></div>
                        <div class="clock-center"></div>
                    </div>
                </div>
                <div class="falling-clock falling-clock-10 clock-10" style="--target-scale:1.2; --hour-start:-360deg; --minute-start:-200deg">
                    <div class="clock-face">
                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="12" cy="12" r="10" fill="none" stroke="#E91E63" stroke-width="1.5"/>
                        </svg>
                        <div class="clock-hand clock-hand-hour"></div>
                        <div class="clock-hand clock-hand-minute"></div>
                        <div class="clock-center"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="anim-page anim-page--third anim-page--right">
            <h1 class="anim-page__title">页面 3</h1>
            <p class="anim-page__content">这是第三个页面内容。三次方缓出动画使切换效果更加自然和专业。</p>
        </div>
        <div class="anim-page anim-page--fourth anim-page--right">
            <h1 class="anim-page__title">页面 4</h1>
            <p class="anim-page__content">这是第四个也是最后一个页面内容。您可以返回到之前的页面。</p>
        </div>
    </div>
    
    <div class="anim-nav">
        <button class="anim-nav__btn anim-nav__btn--prev anim-nav__btn--disabled">上一步</button>
        <button class="anim-nav__btn anim-nav__btn--next">下一步</button>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const container = document.querySelector('.anim-page-container');
            const pages = document.querySelectorAll('.anim-page');
            const prevBtn = document.querySelector('.anim-nav__btn--prev');
            const nextBtn = document.querySelector('.anim-nav__btn--next');
            let currentPage = 0;
            
            // 初始化所有页面位置
            function initPages() {
                pages.forEach((page, index) => {
                    if (index === 0) {
                        page.classList.add('anim-page--active');
                        page.classList.remove('anim-page--left', 'anim-page--right');
                    } else {
                        page.classList.add('anim-page--right');
                        page.classList.remove('anim-page--active', 'anim-page--left');
                    }
                });
            }
            
            function updateButtons() {
                prevBtn.classList.toggle('anim-nav__btn--disabled', currentPage === 0);
                nextBtn.classList.toggle('anim-nav__btn--disabled', currentPage === pages.length - 1);
            }
            
            function goToPage(index) {
                if (index === currentPage) return;
                
                const direction = index > currentPage ? 'right' : 'left';
                const outgoingPage = pages[currentPage];
                const incomingPage = pages[index];
                
                // 设置进入页面的初始位置
                incomingPage.classList.remove('anim-page--left', 'anim-page--right');
                incomingPage.classList.add(direction === 'right' ? 'anim-page--right' : 'anim-page--left');
                
                // 强制重绘
                incomingPage.offsetHeight;
                
                // 开始动画
                outgoingPage.classList.remove('anim-page--active');
                outgoingPage.classList.add(direction === 'right' ? 'anim-page--left' : 'anim-page--right');
                
                incomingPage.classList.remove('anim-page--left', 'anim-page--right');
                incomingPage.classList.add('anim-page--active');
                
                currentPage = index;
                updateButtons();
                if (index == 1) {
                    window.resetClockAnimations();
                }
            }
            
            prevBtn.addEventListener('click', function() {
                if (currentPage > 0) {
                    goToPage(currentPage - 1);
                }
            });
            
            nextBtn.addEventListener('click', function() {
                if (currentPage < pages.length - 1) {
                    goToPage(currentPage + 1);
                }
            });
            
            // 添加键盘导航支持
            document.addEventListener('keydown', function(e) {
                if (e.key === 'ArrowLeft' && currentPage > 0) {
                    goToPage(currentPage - 1);
                } else if (e.key === 'ArrowRight' && currentPage < pages.length - 1) {
                    goToPage(currentPage + 1);
                }
            });
            initPages();
            updateButtons();
        });


        document.addEventListener('DOMContentLoaded', function() {
            const container = document.querySelector('.clock-fall-container');
            const clocks = document.querySelectorAll('.falling-clock');
            window.resetClockAnimations = function() {
                clocks.forEach(clock => {
                    // 重置动画
                    clock.style.animation = 'none';
                    void clock.offsetWidth;
                    
                    // 获取时钟的类名和对应的动画
                    const clockClass = Array.from(clock.classList)
                        .find(cls => cls.startsWith('falling-clock-'));
                    
                    if (clockClass) {
                        const num = clockClass.replace('falling-clock-', '');
                        clock.style.animation = `clockFall${num} 2s ease-in-out 0.${num}s forwards, clockSpin 3s linear 0.${num}s forwards`;
                    }
                });
            }
            // 点击容器重新开始动画
            container.addEventListener('click', window.resetClockAnimations);
        });
    </script>
</body>
</html>