make this webpage a lot more cooler , amazing and modern and cool with advanced animations , advnaced fonts 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=Poppins:wght@300;400;500;600;700&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"
    />
    <!-- GSAP for Animations -->
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"
        defer
    ></script>
    <!-- Custom Styles -->
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f0f4f8;
        }
        .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);
            }
        }
        /* Custom Fonts */
        @import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Lobster&family=Pacifico&display=swap');
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-xl w-full max-w-6xl p-8 animate-fade-in flex">
        <!-- Quote of the Day -->
        <div class="w-1/3 p-6 bg-gradient-to-tr from-purple-500 to-indigo-600 rounded-2xl text-white flex flex-col items-center justify-center">
            <h2 class="text-3xl font-bold mb-4">Quote of the Day</h2>
            <p id="quote" class="text-xl text-center"></p>
        </div>
        <!-- Main Content -->
        <div class="w-2/3 pl-8">
            <!-- Header -->
            <div class="text-center mb-8">
                <h1 class="text-5xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-teal-400">
                    PDF Summarizer
                </h1>
                <p class="text-gray-600 mt-4">
                    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">
                    <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-300"
                    >
                        <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"
                >
                    <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-blue-500 to-teal-400 text-white py-3 px-6 rounded-xl font-semibold shadow-md hover:from-blue-600 hover:to-teal-500 transition duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-4 focus:ring-blue-200"
                >
                    Summarize PDF
                </button>
            </form>

            <!-- Loading Indicator -->
            <div id="loading" class="hidden mt-8 flex flex-col items-center">
                <div
                    class="loader ease-linear rounded-full border-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">
                <h2 class="text-2xl 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-md hover:bg-green-600 transition duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-4 focus:ring-green-200"
                >
                    <i class="fas fa-download mr-2"></i> Download Summary
                </a>
            </div>
        </div>
    </div>
    <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 = [
            'Indie Flower',
            'Lobster',
            'Pacifico',
            'Poppins',
            'Courier New',
            'Georgia',
            'Comic Sans MS',
            '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;
        }

        // 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();
                    gsap.from(quoteElement, {
                        opacity: 0,
                        y: -20,
                        duration: 0.5,
                    });
                } 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.docx';

                    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 {
                    const error = await response.json();
                    throw new Error(error.error || 'An error occurred');
                }
            } catch (error) {
                alert(error.message);
                gsap.to(loading, {
                    opacity: 0,
                    scale: 0.8,
                    duration: 0.3,
                    onComplete: () => {
                        loading.classList.add('hidden');
                        form.classList.remove('hidden');
                        gsap.to(form, { opacity: 1, y: 0, duration: 0.5 });
                    },
                });
            }
        });
    </script>
</body>
</html>
"

make it really amazing and give me the complete code