SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Un Amore Senza Tempo - 浪漫意式表白书</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Google Fonts for Italian Classic Typography -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Great+Vibes&family=Noto+Serif+SC:wght@300;400;600;700&display=swap" rel="stylesheet">
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        gold: {
                            light: '#f9e79f',
                            DEFAULT: '#d4af37',
                            dark: '#aa7c11',
                        },
                        terracotta: '#c05a46',
                        burgundy: '#5c1d24',
                        parchment: '#fcf8ee',
                        olive: '#556b2f'
                    },
                    fontFamily: {
                        cinzel: ['Cinzel', 'serif'],
                        cursive: ['Great Vibes', 'cursive'],
                        serifCN: ['Noto Serif SC', 'serif']
                    }
                }
            }
        }
    </script>

    <style>
        /* Custom Renaissance Styles & Parchment Textures */
        body {
            background-color: #2b1718;
            color: #3c2415;
            font-family: 'Noto Serif SC', serif;
            overflow: hidden;
        }

        .parchment-bg {
            background: #fcf8ee;
            background-image: 
                radial-gradient(circle at 50% 50%, rgba(248, 239, 218, 0.95) 0%, rgba(230, 213, 178, 0.88) 100%),
                url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
        }

        .gold-border {
            border: 3px solid #d4af37;
            box-shadow: inset 0 0 15px rgba(212, 175, 55, 0.3), 0 0 25px rgba(0, 0, 0, 0.5);
        }

        .ornate-corner {
            position: absolute;
            width: 40px;
            height: 40px;
            border-color: #d4af37;
            pointer-events: none;
        }
        .corner-tl { top: 12px; left: 12px; border-top: 3px solid; border-left: 3px solid; }
        .corner-tr { top: 12px; right: 12px; border-top: 3px solid; border-right: 3px solid; }
        .corner-bl { bottom: 12px; left: 12px; border-bottom: 3px solid; border-left: 3px solid; }
        .corner-br { bottom: 12px; right: 12px; border-bottom: 3px solid; border-right: 3px solid; }

        /* Smooth Slide Animations */
        .slide-page {
            position: absolute;
            inset: 0;
            opacity: 0;
            pointer-events: none;
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            transform: scale(0.95) translateY(20px);
            overflow-y: auto;
        }

        .slide-page.active {
            opacity: 1;
            pointer-events: auto;
            transform: scale(1) translateY(0);
        }

        /* Custom Scrollbar inside frame */
        .slide-page::-webkit-scrollbar {
            width: 4px;
        }
        .slide-page::-webkit-scrollbar-thumb {
            background: #d4af37;
            border-radius: 4px;
        }

        /* Envelope Styles */
        .envelope-wrapper {
            perspective: 1000px;
        }
        .envelope {
            transform-style: preserve-3d;
            transition: transform 0.6s ease-in-out;
        }
        .wax-seal {
            background: radial-gradient(circle at 30% 30%, #a93226, #641e16);
            box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 0 8px rgba(255,255,255,0.3);
        }

        /* Glowing photo frame */
        .glow-frame {
            box-shadow: 0 0 20px rgba(212, 175, 55, 0.4), inset 0 0 10px rgba(212, 175, 55, 0.2);
        }

        /* Particle Canvas */
        #particles-canvas {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 5;
        }
    </style>
</head>
<body class="relative min-h-screen flex items-center justify-center p-2 sm:p-6 select-none">

    <!-- Background Particle Canvas (Petals & Olive Leaves) -->
    <canvas id="particles-canvas"></canvas>

    <!-- NetEase Cloud Music Audio Element -->
    <audio id="bgMusic" loop preload="auto">
        <source src="https://music.163.com/song/media/outer/url?id=185924.mp3" type="audio/mpeg">
        <source src="https://music.163.com/song/media/outer/url?id=28830384.mp3" type="audio/mpeg">
    </audio>

    <!-- Music Player Toggle Button with Disc Animation -->
    <button id="musicToggle" class="fixed top-4 right-4 z-50 bg-burgundy/90 text-gold hover:bg-burgundy border border-gold/60 px-3 py-2 sm:px-4 sm:py-2 rounded-full shadow-lg transition transform hover:scale-105 flex items-center gap-2">
        <div id="discIcon" class="w-5 h-5 rounded-full border-2 border-gold flex items-center justify-center text-xs">
            <i class="fas fa-music text-[10px]"></i>
        </div>
        <span id="musicText" class="text-xs font-cinzel tracking-wider hidden sm:inline">Musica d'Amore</span>
    </button>

    <!-- Main Container Frame -->
    <main class="relative w-full max-w-4xl h-[92vh] max-h-[820px] parchment-bg rounded-2xl gold-border shadow-2xl flex flex-col overflow-hidden z-10">
        
        <!-- Renaissance Inner Flourish Border -->
        <div class="absolute inset-2 border border-gold/40 rounded-xl pointer-events-none z-20"></div>
        <div class="ornate-corner corner-tl z-20"></div>
        <div class="ornate-corner corner-tr z-20"></div>
        <div class="ornate-corner corner-bl z-20"></div>
        <div class="ornate-corner corner-br z-20"></div>

        <!-- Header Banner -->
        <header class="pt-5 pb-2 text-center z-20 relative flex-shrink-0">
            <p class="font-cursive text-2xl sm:text-3xl text-terracotta">Un Amore Senza Tempo</p>
            <!-- Flirty & Intimate English Subtitle -->
            <h1 class="font-cinzel text-xs sm:text-sm tracking-[0.25em] text-burgundy/90 uppercase font-semibold">Tu sei il mio respiro, la mia poesia</h1>
            <div class="flex justify-center items-center gap-2 mt-1">
                <span class="h-[1px] w-12 bg-gold/60"></span>
                <span class="text-gold text-xs">❦</span>
                <span class="h-[1px] w-12 bg-gold/60"></span>
            </div>
        </header>

        <!-- Pages Content Area -->
        <div class="relative flex-1 overflow-hidden p-3 sm:p-8 flex items-center justify-center">

            <!-- ========================================== -->
            <!-- PAGE 1: COVER & ENVELOPE (封面与火漆信封) -->
            <!-- ========================================== -->
            <section id="page-1" class="slide-page active flex flex-col items-center justify-center text-center w-full h-full">
                <div class="envelope-wrapper my-auto cursor-pointer group" onclick="openEnvelope()">
                    <div id="envelopeCard" class="envelope relative w-64 h-44 sm:w-80 sm:h-52 bg-terracotta/90 rounded-lg border-2 border-gold/80 flex items-center justify-center shadow-2xl transition duration-500 group-hover:scale-105">
                        <!-- Decorative Frame on Envelope -->
                        <div class="absolute inset-3 border border-gold/50 rounded flex flex-col items-center justify-center p-2">
                            <span class="font-cursive text-gold-light text-2xl sm:text-3xl">Lettera Segreta</span>
                            <span class="text-[10px] text-gold/90 font-cinzel tracking-widest mt-1 uppercase">For your eyes & heart only</span>
                        </div>
                        
                        <!-- Wax Seal -->
                        <div id="waxSeal" class="wax-seal absolute w-16 h-16 rounded-full border-2 border-gold/60 flex items-center justify-center shadow-xl transition-all duration-700">
                            <i class="fas fa-heart text-gold text-xl animate-pulse"></i>
                        </div>
                    </div>
                </div>

                <!-- EASY EDITABLE PLACEHOLDER: PAGE 1 SUBTITLE -->
                <!-- 自定义文案修改位置:第一页 开启提示语(浪漫诗意风格) -->
                <div class="mt-4 sm:mt-6 z-10">
                    <p class="font-serifCN text-sm sm:text-base text-burgundy font-semibold animate-bounce">
                        支一竹-轻触火漆印章 · 
                    </p>
                    <p class="font-cinzel text-xs text-gold-dark mt-1 italic tracking-wide">
                        " Touch the seal when you are ready to fall deeper into my realm... "
                    </p>
                </div>
            </section>


            <!-- ========================================== -->
            <!-- PAGE 2: CHAPTER 1 - PRIMO INCONTRO (惊鸿初见) -->
            <!-- ========================================== -->
            <section id="page-2" class="slide-page flex flex-col items-center justify-center text-center max-w-2xl mx-auto px-4 my-auto">
                <div class="font-cursive text-3xl sm:text-4xl text-terracotta mb-1">Capitolo I</div>
                <h2 class="font-cinzel text-xl sm:text-2xl font-bold text-burgundy tracking-wider mb-4">Primo Incontro · 惊鸿一瞥</h2>
                
                <div class="w-16 h-16 rounded-full border-2 border-gold/60 flex items-center justify-center bg-burgundy/5 text-burgundy mb-4 shadow-inner">
                    <i class="fas fa-eye text-2xl text-terracotta"></i>
                </div>

                <!-- EASY EDITABLE PLACEHOLDER: PAGE 2 MEMORY COPY -->
                <!-- 自定义文案修改位置:第二页 初见故事 -->
                <div class="font-serifCN text-sm sm:text-base leading-relaxed text-slate-800 bg-white/50 p-5 sm:p-6 rounded-xl border border-gold/40 shadow-sm space-y-3">
                    <p class="italic text-terracotta font-serifCN font-semibold">
                        “世界上有千万种偶遇,而你是我生命里最惊心动魄的陷落。”
                    </p>
                    <p>
                        还记得我们第一次相遇的那天,风拂过空气,仿佛连时间都放慢了脚步。你眼里的星光与笑意,在一瞬间穿透了我所有的防御。
                    </p>
                    <p class="text-xs text-burgundy/80 font-cinzel tracking-wider pt-2 border-t border-gold/30">
                        Come la prima volta che ho visto la luce nei tuoi occhi.
                    </p>
                </div>
            </section>


            <!-- ========================================== -->
            <!-- PAGE 3: CHAPTER 2 - DOLCE FAR NIENTE (甜蜜岁月) -->
            <!-- ========================================== -->
            <section id="page-3" class="slide-page flex flex-col items-center justify-center text-center max-w-2xl mx-auto px-4 my-auto">
                <div class="font-cursive text-3xl sm:text-4xl text-terracotta mb-1">Capitolo II</div>
                <h2 class="font-cinzel text-xl sm:text-2xl font-bold text-burgundy tracking-wider mb-4">Dolce Far Niente · 无所事事的甜美</h2>
                
                <div class="grid grid-cols-2 gap-3 sm:gap-4 w-full mb-4">
                    <div class="bg-white/60 border-2 border-gold/50 rounded-lg p-3 flex flex-col items-center justify-center shadow-sm hover:border-gold transition">
                        <i class="fas fa-coffee text-terracotta text-2xl mb-1"></i>
                        <span class="text-xs sm:text-sm font-serifCN text-burgundy font-semibold">午后的温热咖啡</span>
                        <span class="text-[10px] text-slate-500 mt-1">和你闲聊的每一句废话</span>
                    </div>
                    <div class="bg-white/60 border-2 border-gold/50 rounded-lg p-3 flex flex-col items-center justify-center shadow-sm hover:border-gold transition">
                        <i class="fas fa-moon text-terracotta text-2xl mb-1"></i>
                        <span class="text-xs sm:text-sm font-serifCN text-burgundy font-semibold">深夜的迷离星光</span>
                        <span class="text-[10px] text-slate-500 mt-1">和你对视时的无声默契</span>
                    </div>
                </div>

                <!-- EASY EDITABLE PLACEHOLDER: PAGE 3 MEMORIES COPY -->
                <!-- 自定义文案修改位置:第三页 甜蜜回忆文案 -->
                <div class="font-serifCN text-sm sm:text-base leading-relaxed text-slate-800 bg-white/50 p-5 rounded-xl border border-gold/40 shadow-sm">
                    <p>
                        意大利人说 “Il dolce far niente” 指的是无所事事时的极致欢愉。
                    </p>
                    <p class="mt-2">
                        只要有你在身旁,即使我们只是安静地听着同一首歌、漫无目的地并肩走着,整个世界都变得无比温柔与甜美。
                    </p>
                </div>
            </section>


            <!-- ========================================== -->
            <!-- PAGE 4: CHAPTER 3 - PROMESSA D'AMORE (誓言信件) -->
            <!-- ========================================== -->
            <section id="page-4" class="slide-page flex flex-col items-center justify-center text-center max-w-2xl mx-auto px-4 my-auto">
                <div class="font-cursive text-3xl sm:text-4xl text-terracotta mb-1">Capitolo III</div>
                <h2 class="font-cinzel text-xl sm:text-2xl font-bold text-burgundy tracking-wider mb-3">Promessa d'Amore · 爱之誓言</h2>

                <!-- EASY EDITABLE PLACEHOLDER: PAGE 4 CONFESSION LETTER -->
                <!-- 自定义文案修改位置:第四页 核心表白信件 -->
                <div class="font-serifCN text-sm sm:text-base leading-relaxed text-slate-800 space-y-3 bg-white/60 p-5 sm:p-6 rounded-xl border-2 border-gold/60 shadow-md text-left max-h-[360px] overflow-y-auto">
                    <p class="font-bold text-burgundy text-center text-lg mb-2">致我最珍视的你:</p>
                    <p>
                        达芬奇勾勒过翡冷翠最浪漫的色彩,但再伟大的艺术,也描摹不出你侧脸的万分之一温柔。
                    </p>
                    <p>
                        你是我疲惫日常里的解药,是我灵魂深处念念不忘的归宿。我想把你写入我未来的每一场诗篇里,共享往后余生的清晨与黄昏。
                    </p>
                    <div class="pt-2 text-right">
                        <p class="font-cursive text-2xl text-terracotta">Tuo per sempre,</p>
                        <p class="font-serifCN text-xs text-burgundy/80 font-semibold">[你的名字/Your Name]</p>
                    </div>
                </div>
            </section>


            <!-- ========================================== -->
            <!-- PAGE 5: FINAL PAGE - IL FUTURO INSIEME (丰富艺术终页) -->
            <!-- ========================================== -->
            <section id="page-5" class="slide-page flex flex-col items-center justify-start text-center max-w-2xl mx-auto px-4 py-2 w-full my-auto">
                
                <div class="font-cursive text-3xl sm:text-4xl text-terracotta">Per Sempre Insieme</div>
                <h2 class="font-cinzel text-lg sm:text-xl font-bold text-burgundy tracking-wider mb-3">与你携手 · 余生浪漫</h2>

                <!-- Rich Romantic Memory Frame / Photo Container -->
                <div class="w-full max-w-sm mx-auto mb-4 p-2 bg-white/80 rounded-xl gold-border glow-frame flex flex-col items-center relative group">
                    <div class="relative w-full h-40 sm:h-48 rounded-lg overflow-hidden border border-gold/40 bg-burgundy/10 flex items-center justify-center">
                        <!-- EASY EDITABLE PLACEHOLDER: PHOTO URL -->
                        <!-- 自定义照片图片链接修改位置 (可替换为你的相片直链) -->
                        <img id="couplePhoto" 
                             src="https://images.unsplash.com/photo-1518199266791-5375a83190b7?auto=format&fit=crop&w=800&q=80" 
                             alt="Memory" 
                             class="w-full h-full object-cover transition duration-700 group-hover:scale-105"
                             onerror="this.src='https://placehold.co/600x400/5c1d24/d4af37?text=Mio+Amore';">
                        <div class="absolute inset-0 bg-gradient-to-t from-burgundy/60 via-transparent to-transparent"></div>
                        <span class="absolute bottom-2 left-3 font-cursive text-gold-light text-xl drop-shadow-md">Amor Vincit Omnia</span>
                    </div>
                    
                    <!-- EASY EDITABLE PLACEHOLDER: CAPTION -->
                    <!-- 照片下方浪漫诗意短句 -->
                    <p class="text-xs font-serifCN text-burgundy/90 italic mt-2 px-2">
                        “你是降落在冷冽世间的特洛伊晚霞,也是我唯一的救赎。”
                    </p>
                </div>

                <!-- Artistic Confession Prose -->
                <p class="font-serifCN text-xs sm:text-sm text-slate-800 leading-relaxed mb-4 max-w-lg bg-white/40 p-3 rounded-lg border border-gold/30">
                    托斯卡纳的风会吹过四季,而我对你的心动永远停留在当夏。你愿意与我一起开启这段未完待续的诗篇吗?
                </p>

                <!-- Interactive Proposal Action Buttons -->
                <div id="proposalButtons" class="flex flex-col sm:flex-row gap-3 w-full max-w-md justify-center items-center mb-2">
                    <button onclick="acceptLove()" class="w-full sm:w-auto px-6 py-2.5 bg-burgundy text-gold font-serifCN font-bold text-sm sm:text-base rounded-full border-2 border-gold shadow-lg hover:bg-terracotta transition transform hover:scale-105 active:scale-95 flex items-center justify-center gap-2">
                        <i class="fas fa-heart text-gold"></i> Sì, Con Tutto Il Mio Cuore (我愿意)
                    </button>
                    <button onclick="acceptLove()" class="w-full sm:w-auto px-6 py-2.5 bg-gold text-burgundy font-serifCN font-bold text-sm sm:text-base rounded-full border-2 border-burgundy shadow-lg hover:bg-gold-light transition transform hover:scale-105 active:scale-95 flex items-center justify-center gap-2">
                        <i class="fas fa-crown text-burgundy"></i> Per Sempre (余生皆是你)
                    </button>
                </div>

                <!-- Rich Success Celebration Card (Shown after clicking accept) -->
                <div id="successMessage" class="hidden w-full max-w-md p-5 bg-white/90 rounded-2xl border-2 border-gold shadow-2xl animate-fade-in my-2">
                    <div class="text-terracotta font-cursive text-3xl sm:text-4xl mb-1">Ti Amo Per Sempre!</div>
                    <p class="font-serifCN text-sm sm:text-base text-burgundy font-bold mb-2">
                        故事在此刻开始,爱在永恒中延伸 ❦
                    </p>
                    <p class="text-xs font-cinzel text-gold-dark tracking-widest uppercase">
                        Florence · Venice · Tuscany · Our Universe
                    </p>
                </div>

            </section>

        </div>

        <!-- Navigation Footer -->
        <footer class="pb-5 pt-2 px-6 flex items-center justify-between z-20 flex-shrink-0 border-t border-gold/20">
            <!-- Prev Button -->
            <button id="prevBtn" onclick="changePage(-1)" class="px-3 py-1.5 bg-burgundy/10 hover:bg-burgundy/20 text-burgundy font-cinzel text-xs font-bold rounded-lg border border-gold/40 transition flex items-center gap-1 disabled:opacity-30 disabled:cursor-not-allowed">
                <i class="fas fa-chevron-left"></i> Indietro
            </button>

            <!-- Slide Dots Indicator -->
            <div class="flex gap-2" id="dotContainer">
                <button onclick="goToPage(1)" class="dot w-2.5 h-2.5 rounded-full bg-gold/40 transition-all duration-300"></button>
                <button onclick="goToPage(2)" class="dot w-2.5 h-2.5 rounded-full bg-gold/40 transition-all duration-300"></button>
                <button onclick="goToPage(3)" class="dot w-2.5 h-2.5 rounded-full bg-gold/40 transition-all duration-300"></button>
                <button onclick="goToPage(4)" class="dot w-2.5 h-2.5 rounded-full bg-gold/40 transition-all duration-300"></button>
                <button onclick="goToPage(5)" class="dot w-2.5 h-2.5 rounded-full bg-gold/40 transition-all duration-300"></button>
            </div>

            <!-- Next Button -->
            <button id="nextBtn" onclick="changePage(1)" class="px-3 py-1.5 bg-burgundy/10 hover:bg-burgundy/20 text-burgundy font-cinzel text-xs font-bold rounded-lg border border-gold/40 transition flex items-center gap-1">
                Avanti <i class="fas fa-chevron-right"></i>
            </button>
        </footer>

    </main>

    <!-- JavaScript Interactivity -->
    <script>
        let currentPage = 1;
        const totalPages = 5;

        // Update Page display & indicators
        function updatePageDisplay() {
            document.querySelectorAll('.slide-page').forEach((page, index) => {
                if (index + 1 === currentPage) {
                    page.classList.add('active');
                } else {
                    page.classList.remove('active');
                }
            });

            // Update dots
            document.querySelectorAll('.dot').forEach((dot, index) => {
                if (index + 1 === currentPage) {
                    dot.classList.add('bg-burgundy', 'w-6');
                    dot.classList.remove('bg-gold/40');
                } else {
                    dot.classList.remove('bg-burgundy', 'w-6');
                    dot.classList.add('bg-gold/40');
                }
            });

            // Update Navigation Buttons
            document.getElementById('prevBtn').disabled = (currentPage === 1);
            if (currentPage === totalPages) {
                document.getElementById('nextBtn').classList.add('opacity-0', 'pointer-events-none');
            } else {
                document.getElementById('nextBtn').classList.remove('opacity-0', 'pointer-events-none');
            }
        }

        function changePage(direction) {
            currentPage = Math.max(1, Math.min(totalPages, currentPage + direction));
            updatePageDisplay();
        }

        function goToPage(pageNumber) {
            currentPage = pageNumber;
            updatePageDisplay();
        }

        // Proposal Acceptance Celebration Animation
        function acceptLove() {
            document.getElementById('proposalButtons').classList.add('hidden');
            document.getElementById('successMessage').classList.remove('hidden');
            createFireworks();
        }

        // NetEase Cloud Music Audio Player Logic
        const bgMusic = document.getElementById('bgMusic');
        const musicToggle = document.getElementById('musicToggle');
        const discIcon = document.getElementById('discIcon');
        const musicText = document.getElementById('musicText');
        let isPlaying = false;

        function toggleMusic() {
            if (isPlaying) {
                bgMusic.pause();
                discIcon.classList.remove('animate-spin');
                musicText.innerText = "Musica d'Amore";
                isPlaying = false;
            } else {
                bgMusic.play().then(() => {
                    discIcon.classList.add('animate-spin');
                    musicText.innerText = "Suonando...";
                    isPlaying = true;
                }).catch(err => {
                    console.log("Auto-play prevented by browser policy:", err);
                });
            }
        }

        musicToggle.addEventListener('click', toggleMusic);

        // Envelope opening action
        function openEnvelope() {
            if (!isPlaying) {
                toggleMusic();
            }

            const seal = document.getElementById('waxSeal');
            const envelope = document.getElementById('envelopeCard');
            
            seal.style.transform = 'scale(1.5) rotate(20deg)';
            seal.style.opacity = '0';
            
            setTimeout(() => {
                envelope.style.transform = 'scale(1.05) translateY(-10px)';
                setTimeout(() => {
                    goToPage(2);
                }, 400);
            }, 300);
        }

        // Floating Olive Leaf, Rose Petal & Shimmer Particles Canvas Simulation
        const canvas = document.getElementById('particles-canvas');
        const ctx = canvas.getContext('2d');

        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

        const particles = [];
        const colors = ['#c05a46', '#d4af37', '#556b2f', '#e6b0aa', '#f9e79f'];

        class Particle {
            constructor() {
                this.reset();
            }
            reset() {
                this.x = Math.random() * canvas.width;
                this.y = -20;
                this.size = Math.random() * 7 + 3;
                this.speedY = Math.random() * 1.5 + 0.5;
                this.speedX = Math.sin(this.y) * 0.5;
                this.color = colors[Math.floor(Math.random() * colors.length)];
                this.rotation = Math.random() * 360;
                this.rotationSpeed = (Math.random() - 0.5) * 2;
            }
            update() {
                this.y += this.speedY;
                this.x += Math.sin(this.y * 0.02);
                this.rotation += this.rotationSpeed;
                if (this.y > canvas.height + 20) {
                    this.reset();
                }
            }
            draw() {
                ctx.save();
                ctx.translate(this.x, this.y);
                ctx.rotate((this.rotation * Math.PI) / 180);
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.ellipse(0, 0, this.size, this.size / 2, 0, 0, Math.PI * 2);
                ctx.fill();
                ctx.restore();
            }
        }

        for (let i = 0; i < 40; i++) {
            particles.push(new Particle());
        }

        function createFireworks() {
            for (let i = 0; i < 90; i++) {
                const p = new Particle();
                p.y = canvas.height / 2;
                p.x = canvas.width / 2;
                p.speedY = (Math.random() - 0.5) * 10;
                p.speedX = (Math.random() - 0.5) * 10;
                p.size = Math.random() * 10 + 4;
                particles.push(p);
            }
        }

        function animateParticles() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            particles.forEach((p) => {
                p.update();
                p.draw();
            });
            requestAnimationFrame(animateParticles);
        }

        window.onload = function() {
            updatePageDisplay();
            animateParticles();
        };
    </script>
</body>
</html>