make this webpage have advanced ui , advanced animations , visually beautiful , amazing and fantastic with awesome loading animations , interactive elements, backgrounds etc...
"
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta Tags -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PDF Summarizer</title>
    <!-- Fonts -->
    <link
        href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&family=Roboto:wght@300;400;500;700&family=Dancing+Script:wght@600&family=Kaushan+Script&display=swap"
        rel="stylesheet"
    />
    <!-- Tailwind CSS CDN -->
    <link
        href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
        rel="stylesheet"
    />
    <!-- Icons -->
    <link
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
        rel="stylesheet"
    />
    <!-- AOS for Animations -->
    <link
        href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css"
        rel="stylesheet"
    />
    <!-- GSAP for Animations -->
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"
        defer
    ></script>
    <!-- Particles.js -->
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <!-- Typewriter Effect -->
    <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
    <!-- Confetti Effect -->
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
    <!-- Custom Styles -->
    <style>
        body {
            font-family: 'Montserrat', sans-serif;
            background: linear-gradient(135deg, #ece9e6, #ffffff);
        }
        /* Glassmorphism Effect */
        .glass-effect {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
        }
        .animate-fade-in {
            opacity: 0;
            animation: fadeIn 0.5s ease-in forwards;
        }
        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }
        .loader {
            border-top-color: #3498db;
            animation: spinner 1s linear infinite;
        }
        @keyframes spinner {
            to {
                transform: rotate(360deg);
            }
        }
        /* Animated Gradient Background */
        .animated-bg {
            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
        }
        @keyframes gradientBG {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        /* Parallax Background */
        .parallax-bg {
            background-image: url('https://source.unsplash.com/random/1920x1080?abstract');
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        /* Hover Effect for Buttons */
        .hover-effect {
            transition: all 0.3s ease;
        }
        .hover-effect:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4 parallax-bg">
    <div id="particles-js" class="absolute inset-0"></div>
    <div class="bg-white bg-opacity-50 rounded-2xl shadow-2xl w-full max-w-6xl p-8 animate-fade-in flex glass-effect relative z-10">
        <!-- Quote of the Day -->
        <div class="w-1/3 p-6 rounded-2xl text-white flex flex-col items-center justify-center animated-bg" data-aos="fade-right">
            <h2 class="text-4xl font-bold mb-4" style="font-family: 'Kaushan Script', cursive;">Quote of the Day</h2>
            <p id="quote" class="text-2xl text-center"></p>
        </div>
        <!-- Main Content -->
        <div class="w-2/3 pl-8">
            <!-- Header -->
            <div class="text-center mb-8" data-aos="zoom-in">
                <h1 id="title" class="text-6xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-teal-400">
                    PDF Summarizer
                </h1>
                <p class="text-gray-700 mt-4 text-lg">
                    Quickly generate summaries of your PDF documents
                </p>
            </div>

            <!-- Upload Form -->
            <form id="upload-form" class="space-y-6" enctype="multipart/form-data">
                <!-- File Upload -->
                <div class="flex items-center justify-center w-full" data-aos="fade-up">
                    <label
                        for="file"
                        class="relative flex flex-col items-center justify-center w-full h-64 border-4 border-dashed rounded-2xl cursor-pointer bg-white hover:bg-gray-50 transition duration-500 ease-in-out transform hover:scale-105 glass-effect"
                    >
                        <div class="flex flex-col items-center justify-center">
                            <i class="fas fa-cloud-upload-alt text-7xl text-blue-500 mb-4 animate-bounce"></i>
                            <p class="mb-2 text-lg text-gray-700">
                                <span class="font-semibold">Click to upload</span>
                                or drag and drop
                            </p>
                            <p class="text-sm text-gray-500">
                                PDF files only (Max 10MB)
                            </p>
                        </div>
                        <input
                            id="file"
                            name="file"
                            type="file"
                            class="absolute inset-0 opacity-0 cursor-pointer"
                            accept=".pdf"
                        />
                    </label>
                </div>

                <!-- File Preview -->
                <div
                    id="file-preview"
                    class="hidden bg-gray-50 p-4 rounded-lg border border-gray-200 glass-effect"
                    data-aos="fade-up"
                >
                    <h3 class="font-semibold text-gray-700 mb-2">
                        Selected File:
                    </h3>
                    <div class="flex items-center">
                        <i class="far fa-file-pdf text-red-500 text-2xl mr-2"></i>
                        <span id="file-name" class="text-gray-800"></span>
                    </div>
                </div>

                <!-- Submit Button -->
                <button
                    type="submit"
                    class="w-full bg-gradient-to-r from-purple-500 to-pink-500 text-white py-4 px-6 rounded-xl font-bold shadow-lg hover:from-purple-600 hover:to-pink-600 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-purple-200 hover-effect"
                    data-aos="zoom-in-up"
                >
                    Summarize PDF
                </button>
            </form>

            <!-- Loading Indicator -->
            <div id="loading" class="hidden mt-8 flex flex-col items-center" data-aos="fade-up">
                <div
                    class="loader ease-linear rounded-full border-8 border-t-8 border-gray-200 h-16 w-16 mb-4"
                ></div>
                <p class="text-lg font-medium text-gray-700">
                    Processing your PDF, please wait...
                </p>
            </div>

            <!-- Result Section -->
            <div id="result" class="hidden mt-8 animate-fade-in" data-aos="fade-up">
                <h2 class="text-3xl font-semibold mb-4 text-gray-800">
                    Your Summary is Ready!
                </h2>
                <a
                    id="download-link"
                    href="#"
                    class="inline-flex items-center bg-green-500 text-white py-3 px-6 rounded-xl font-semibold shadow-lg hover:bg-green-600 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-green-200 hover-effect"
                >
                    <i class="fas fa-download mr-2"></i> Download Summary
                </a>
            </div>
        </div>
    </div>
    <!-- AOS JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
    <!-- Initialize AOS -->
    <script>
        AOS.init({
            duration: 1000,
            once: true,
        });
    </script>
    <script>
        const form = document.getElementById('upload-form');
        const fileUpload = document.getElementById('file');
        const filePreview = document.getElementById('file-preview');
        const fileName = document.getElementById('file-name');
        const loading = document.getElementById('loading');
        const result = document.getElementById('result');
        const downloadLink = document.getElementById('download-link');
        const quoteElement = document.getElementById('quote');

        // Random Fonts and Colors
        const fonts = [
            'Dancing Script',
            'Kaushan Script',
            'Montserrat',
            'Roboto',
            'Courier New',
            'Georgia',
            'Times New Roman',
        ];
        const colors = [
            '#ff6b6b',
            '#feca57',
            '#48dbfb',
            '#1dd1a1',
            '#5f27cd',
            '#222f3e',
            '#ee5253',
            '#0abde3',
            '#10ac84',
            '#341f97',
        ];

        // Apply Random Font and Color to Quote
        function styleQuote() {
            const randomFont =
                fonts[Math.floor(Math.random() * fonts.length)];
            const randomColor =
                colors[Math.floor(Math.random() * colors.length)];
            quoteElement.style.fontFamily = randomFont;
            quoteElement.style.color = randomColor;
            gsap.from(quoteElement, {
                opacity: 0,
                y: -20,
                duration: 1,
                ease: "bounce.out",
            });
        }

        // Fetch Quote from Server
        async function fetchQuote() {
            try {
                const response = await fetch('/quote');
                if (response.ok) {
                    const data = await response.json();
                    quoteElement.textContent = `"${data.quote}"`;
                    styleQuote();
                } else {
                    quoteElement.textContent =
                        'Error fetching quote. Please try again later.';
                }
            } catch (error) {
                quoteElement.textContent =
                    'Error fetching quote. Please try again later.';
            }
        }

        // Load Quote on Page Load
        window.addEventListener('load', fetchQuote);

        // File Upload Preview
        fileUpload.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) {
                fileName.textContent = file.name;
                filePreview.classList.remove('hidden');
                gsap.from(filePreview, {
                    opacity: 0,
                    y: -20,
                    duration: 0.5,
                });
            }
        });

        // Form Submission
        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            const formData = new FormData(form);

            // Hide Form and Show Loading
            gsap.to(form, {
                opacity: 0,
                y: -20,
                duration: 0.3,
                onComplete: () => {
                    form.classList.add('hidden');
                    loading.classList.remove('hidden');
                    gsap.from(loading, {
                        opacity: 0,
                        scale: 0.8,
                        duration: 0.5,
                    });
                },
            });

            try {
                const response = await fetch('/upload', {
                    method: 'POST',
                    body: formData,
                });

                if (response.ok) {
                    const blob = await response.blob();
                    const url = window.URL.createObjectURL(blob);
                    downloadLink.href = url;
                    downloadLink.download = 'summary.txt';

                    // Hide Loading and Show Result
                    gsap.to(loading, {
                        opacity: 0,
                        scale: 0.8,
                        duration: 0.3,
                        onComplete: () => {
                            loading.classList.add('hidden');
                            result.classList.remove('hidden');
                            gsap.from(result, {
                                opacity: 0,
                                y: 20,
                                duration: 0.5,
                            });
                        },
                    });
                } else {
                    throw new Error('Upload failed');
                }
            } catch (error) {
                console.error('Error:', error);
                alert('An error occurred. Please try again.');
                
                // Hide Loading and Show Form
                gsap.to(loading, {
                    opacity: 0,
                    scale: 0.8,
                    duration: 0.3,
                    onComplete: () => {
                        loading.classList.add('hidden');
                        form.classList.remove('hidden');
                        gsap.from(form, {
                            opacity: 0,
                            y: 20,
                            duration: 0.5,
                        });
                    },
                });
            }
        });

        // Particle effect
        particlesJS("particles-js", {
            particles: {
                number: { value: 80, density: { enable: true, value_area: 800 } },
                color: { value: "#ffffff" },
                shape: { type: "circle", stroke: { width: 0, color: "#000000" }, polygon: { nb_sides: 5 } },
                opacity: { value: 0.5, random: false, anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false } },
                size: { value: 3, random: true, anim: { enable: false, speed: 40, size_min: 0.1, sync: false } },
                line_linked: { enable: true, distance: 150, color: "#ffffff", opacity: 0.4, width: 1 },
                move: { enable: true, speed: 6, direction: "none", random: false, straight: false, out_mode: "out", bounce: false, attract: { enable: false, rotateX: 600, rotateY: 1200 } }
            },
            interactivity: {
                detect_on: "canvas",
                events: { onhover: { enable: true, mode: "repulse" }, onclick: { enable: true, mode: "push" }, resize: true },
                modes: { grab: { distance: 400, line_linked: { opacity: 1 } }, bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 }, repulse: { distance: 200, duration: 0.4 }, push: { particles_nb: 4 }, remove: { particles_nb: 2 } }
            },
            retina_detect: true
        });

        // Typewriter effect for the title
        const titleElement = document.getElementById('title');
        new Typewriter(titleElement, {
            strings: ['PDF Summarizer'],
            autoStart: true,
            loop: true,
            delay: 75,
            deleteSpeed: 50,
        });

        // Confetti effect on successful upload
        function triggerConfetti() {
            confetti({
                particleCount: 100,
                spread: 70,
                origin: { y: 0.6 }
            });
        }

        // Trigger confetti when the result is shown
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                    if (!result.classList.contains('hidden')) {
                        triggerConfetti();
                    }
                }
            });
        });

        observer.observe(result, { attributes: true });

        // Add smooth scrolling to all links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();

                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

        // Add parallax effect to the background
        window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            const parallaxBg = document.querySelector('.parallax-bg');
            parallaxBg.style.transform = `translateY(${scrolled * 0.5}px)`;
        });

        // Add hover effect to buttons
        const buttons = document.querySelectorAll('button, a');
        buttons.forEach(button => {
            button.addEventListener('mouseenter', () => {
                gsap.to(button, { scale: 1.05, duration: 0.3 });
            });
            button.addEventListener('mouseleave', () => {
                gsap.to(button, { scale: 1, duration: 0.3 });
            });
        });

        // Add a subtle animation to the quote section
        gsap.to('.animated-bg', {
            backgroundPosition: '100% 50%',
            duration: 10,
            repeat: -1,
            yoyo: true,
            ease: 'power1.inOut'
        });
    </script>
</body>
</html>
"