<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}转化医学 AI 应用平台{% endblock %}</title>
    <link rel="icon" href="{{ url_for('static', filename='kelunbotai-logo-en_2.png') }}" type="image/x-icon">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
    {% block styles %}{% endblock %}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body class="bg-white text-gray-800 flex flex-col min-h-screen">
    <header class="bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500 py-2">
        <nav class="container mx-2 flex flex-wrap items-center justify-start">
            <div class="flex items-center flex-shrink-0">
                <a href="{{ url_for('main.index') }}">
                    <img src="{{ url_for('static', filename='kelunbotai-logo-en_2.png') }}" alt="Logo"
                        class="h-12 m-2 cursor-pointer">
                </a>
                <a href="{{ url_for('main.index') }}"
                    class="text-xl sm:text-2xl text-black font-sans drop-shadow-md cursor-pointer">转化医学AI应用平台</a>
            </div>
            <ul class="flex flex-wrap space-x-3 sm:space-x-3 ml-6 items-center">
                <li>
                    <a href="{{ url_for('binding_prediction.binding_prediction') }}" class="text-white text-sm sm:text-lg hover:text-gray-700 
                        transition-colors transition-transform transform hover:scale-105 inline-block">Binding
                        Site
                        Prediction</a>
                </li>
                <li class="text-gray-300 hidden sm:inline">|</li>
                <li>
                    <a href="{{ url_for('sequence_design.sequence_design') }}" class="text-white text-sm sm:text-lg hover:text-gray-700 
                        transition-transform transform hover:scale-105 inline-block">Sequence
                        Generation</a>
                </li>
                <li class="text-gray-300 hidden sm:inline">|</li>
                <li>
                    <a href="{{ url_for('immunogenicity_prediction.immunogenicity_prediction') }}"
                        class="text-white text-sm sm:text-lg hover:text-gray-700  transition-colors transition-transform transform hover:scale-105 inline-block">Immunogenicity
                        Prediction</a>
                </li>
                <li class="text-gray-300 hidden sm:inline">|</li>
                <li>
                    <a href="{{ url_for('electrostatic_potential.electrostatic_potential') }}" class="text-white text-sm sm:text-lg hover:text-gray-700  transition-colors 
                        transition-transform transform hover:scale-105 inline-block">Electrostatic
                        Potential Prediction</a>
                </li>
                <li class="text-gray-300 hidden sm:inline">|</li>
                <li>
                    <a href="{{ url_for('alphafold.alphafold') }}" class="text-white text-sm sm:text-lg hover:text-gray-700  transition-colors 
                        transition-transform transform hover:scale-105 inline-block">Alphafold2</a>
                </li>
            </ul>
        </nav>
    </header>
    <div class="container mx-auto mt-4 flex-grow">
        {% block content %}{% endblock %}
    </div>

    <!-- Footer Section -->
    <footer class="bg-white py-4 text-center border-t border-gray-200 mt-4">
        <div class="max-w-4xl mx-auto text-gray-800 text-xs">
            <p>© 2024 转化科学部 生物信息组开发</p>
            <p>Contact: <a href="mailto:<PRESIDIO_ANONYMIZED_EMAIL_ADDRESS>" class="text-blue-500 hover:underline"><PRESIDIO_ANONYMIZED_EMAIL_ADDRESS></a>
            </p>
        </div>
    </footer>
</body>

</html> 这个代码还能优化吗？