make this webpage look more professional and modern so that the elements shouold be interactive and the ui has to be fantastic (as i am a computer science student...so i have to make an amazing ui na for showcasing to all)
"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF Summarizer</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        }
        .animate-fade-in {
            opacity: 0;
            animation: fadeIn 0.5s ease-in forwards;
        }
        @keyframes fadeIn {
            to { opacity: 1; }
        }
        .animate-scale {
            transform: scale(0.95);
            transition: transform 0.3s ease;
        }
        .animate-scale:hover {
            transform: scale(1);
        }
        .loader {
            border-top-color: #3498db;
            -webkit-animation: spinner 1.5s linear infinite;
            animation: spinner 1.5s linear infinite;
        }
        @-webkit-keyframes spinner {
            0% { -webkit-transform: rotate(0deg); }
            100% { -webkit-transform: rotate(360deg); }
        }
        @keyframes spinner {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-2xl w-full max-w-4xl p-8 animate-fade-in">
        <h1 class="text-4xl font-bold mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-teal-400">PDF Summarizer</h1>
        
        <form id="upload-form" class="space-y-6" enctype="multipart/form-data">
            <div class="flex items-center justify-center w-full">
                <label for="file" class="flex flex-col items-center justify-center w-full h-64 border-2 border-blue-300 border-dashed rounded-xl cursor-pointer bg-gray-50 hover:bg-gray-100 transition duration-300 animate-scale">
                    <div class="flex flex-col items-center justify-center pt-5 pb-6">
                        <svg class="w-10 h-10 mb-3 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                        </svg>
                        <p class="mb-2 text-sm text-gray-500"><span class="font-semibold">Click to upload</span> or drag and drop</p>
                        <p class="text-xs text-gray-500">PDF files only</p>
                    </div>
                    <input id="file" name="file" type="file" class="hidden" accept=".pdf" />
                </label>
            </div>
            
            <div id="file-preview" class="hidden bg-gray-100 p-4 rounded-lg">
                <h3 class="font-semibold mb-2">Selected File:</h3>
                <div class="flex items-center">
                    <svg class="w-8 h-8 mr-2 text-red-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path>
                    </svg>
                    <span id="file-name" class="text-sm"></span>
                </div>
            </div>
            
            <button type="submit" class="w-full bg-gradient-to-r from-blue-500 to-teal-400 text-white py-3 px-6 rounded-lg font-semibold hover:from-blue-600 hover:to-teal-500 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50">
                Summarize
            </button>
        </form>
        
        <div id="loading" class="hidden mt-8 flex flex-col items-center">
            <div class="loader ease-linear rounded-full border-8 border-t-8 border-gray-200 h-24 w-24"></div>
            <p class="mt-4 text-xl font-semibold text-gray-700">Summarizing your PDF...</p>
        </div>
        
        <div id="result" class="hidden mt-8 animate-fade-in">
            <h2 class="text-2xl font-semibold mb-4 text-gray-800">Summary Ready!</h2>
            <a id="download-link" href="#" class="inline-block bg-green-500 text-white py-3 px-6 rounded-lg font-semibold hover:bg-green-600 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-50">
                Download Full Summary
            </a>
        </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');

        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.addEventListener('submit', async (e) => {
            e.preventDefault();
            const formData = new FormData(form);
            
            gsap.to(form, {opacity: 0, y: -20, duration: 0.3});
            loading.classList.remove('hidden');
            gsap.from(loading, {opacity: 0, scale: 0.8, duration: 0.5});
            result.classList.add('hidden');

            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');
                    gsap.to(form, {opacity: 1, y: 0, duration: 0.5});
                }});
            }
        });
    </script>
</body>
</html>
"