Please make this ui far more amazing , modern such that everyone should beleive that it is made by a web designer expert...thats  how amazing it should lookk like...add elemetns and more enhacements to make it phenomenal and cool...as i am a cse studemt na...this ui should reflect na ...based on it give me the code ..you have to completely redesign the ui
"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quantum Chat Interface</title>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #00ffff;
            --secondary-color: #ff00ff;
            --bg-color: #000033;
            --text-color: #ffffff;
            --chat-bg: rgba(255, 255, 255, 0.05);
            --user-message-bg: rgba(0, 255, 255, 0.2);
            --bot-message-bg: rgba(255, 0, 255, 0.2);
        }

        body {
            font-family: 'Roboto', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden;
        }

        .background-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            filter: blur(100px);
            opacity: 0.3;
            animation: backgroundShift 20s ease infinite;
        }

        @keyframes backgroundShift {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }

        .container {
            width: 90%;
            max-width: 1200px;
            height: 90vh;
            display: flex;
            background: var(--chat-bg);
            border-radius: 20px;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
            backdrop-filter: blur(10px);
            overflow: hidden;
        }

        .chat-container {
            flex: 2;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .summary-container {
            flex: 1;
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            overflow-y: auto;
            border-left: 1px solid var(--primary-color);
        }

        .chat-header {
            background: rgba(0, 0, 0, 0.3);
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .chat-header h1 {
            font-family: 'Orbitron', sans-serif;
            margin: 0;
            font-size: 1.8em;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--primary-color);
        }

        .theme-toggle {
            position: relative;
        }

        #theme-switch {
            display: none;
        }

        .switch-label {
            cursor: pointer;
            padding: 5px 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            display: flex;
            align-items: center;
        }

        .sun, .moon {
            font-size: 1.2em;
            transition: transform 0.3s ease;
        }

        #theme-switch:checked + .switch-label .sun {
            transform: translateX(20px);
        }

        #theme-switch:checked + .switch-label .moon {
            transform: translateX(-20px);
        }

        .chatbox {
            flex: 1;
            display: flex;
            flex-direction: column;
            height: calc(100% - 80px);
            overflow-y: auto;
            padding: 20px;
        }

        .message {
            max-width: 85%;
            padding: 15px 20px;
            margin-bottom: 15px;
            border-radius: 20px;
            font-size: 1em;
            line-height: 1.5;
            transition: all 0.3s ease;
            animation: messageAppear 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
            position: relative;
        }

        @keyframes messageAppear {
            from {
                opacity: 0;
                transform: translateY(20px) scale(0.8);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .message:hover {
            transform: scale(1.02);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .message.user {
            align-self: flex-end;
            background: var(--user-message-bg);
            border-bottom-right-radius: 0;
        }

        .message.user::after {
            content: '';
            position: absolute;
            right: -10px;
            bottom: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 10px 0 10px 10px;
            border-color: transparent transparent transparent var(--user-message-bg);
        }

        .message.bot {
            align-self: flex-start;
            background: var(--bot-message-bg);
            border-bottom-left-radius: 0;
        }

        .message.bot::after {
            content: '';
            position: absolute;
            left: -10px;
            bottom: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 10px 10px 10px 0;
            border-color: transparent var(--bot-message-bg) transparent transparent;
        }

        .input-container {
            display: flex;
            padding: 20px;
            background: var(--bg-color);
        }

        #user_input {
            flex: 1;
            padding: 15px 20px;
            border: none;
            border-radius: 30px;
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-color);
            font-size: 1em;
            outline: none;
            transition: all 0.3s ease;
        }

        #user_input:focus {
            box-shadow: 0 0 10px var(--primary-color);
        }

        #send_button {
            background: var(--primary-color);
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            margin-left: 15px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: transform 0.3s ease, background-color 0.3s ease;
        }

        #send_button:hover {
            transform: scale(1.1);
            background: var(--secondary-color);
        }

        #send_button svg {
            width: 24px;
            height: 24px;
            fill: var(--bg-color);
        }

        .summary-container h2 {
            font-family: 'Orbitron', sans-serif;
            color: var(--primary-color);
            margin-bottom: 20px;
        }

        .summary-list {
            list-style-type: none;
            padding: 0;
        }

        .summary-item {
            background: rgba(255, 255, 255, 0.05);
            margin-bottom: 10px;
            padding: 10px 15px;
            border-radius: 10px;
            font-size: 0.9em;
            transition: all 0.3s ease;
        }

        .summary-item:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateX(5px);
        }

        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }

            .summary-container {
                height: 30%;
                border-left: none;
                border-top: 1px solid var(--primary-color);
            }
        }
    </style>
</head>
<body>
    <div class="background-animation"></div>
    <div class="container">
        <div class="chat-container">
            <div class="chat-header">
                <h1>Quantum Chat</h1>
                <div class="theme-toggle">
                    <input type="checkbox" id="theme-switch">
                    <label for="theme-switch" class="switch-label">
                        <span class="sun">☀️</span>
                        <span class="moon">🌙</span>
                    </label>
                </div>
            </div>
            <div class="chatbox" id="messages"></div>
            <div class="input-container">
                <input type="text" id="user_input" placeholder="Enter your message...">
                <button id="send_button">
                    <svg viewBox="0 0 24 24" width="24" height="24">
                        <path fill="currentColor" d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path>
                    </svg>
                </button>
            </div>
        </div>
        <div class="summary-container">
            <h2>Chat Summary</h2>
            <ul class="summary-list" id="summary-list"></ul>
        </div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const messagesContainer = document.getElementById("messages");
            const userInput = document.getElementById("user_input");
            const sendButton = document.getElementById("send_button");
            const themeSwitch = document.getElementById("theme-switch");
            const summaryList = document.getElementById("summary-list");

            function appendMessage(role, message) {
                const messageElement = document.createElement("div");
                messageElement.classList.add("message");
                messageElement.classList.add(role);
                messageElement.innerHTML = message;
                messagesContainer.appendChild(messageElement);
                smoothScrollToBottom();
            }

            function updateSummary(message) {
                const summaryItem = document.createElement("li");
                summaryItem.classList.add("summary-item");
                summaryItem.textContent = message.substring(0, 50) + "...";
                summaryList.appendChild(summaryItem);
            }

            function sendMessage() {
                const userMessage = userInput.value;
                if (userMessage.trim() !== "") {
                    appendMessage("user", userMessage);
                    updateSummary(userMessage);
                    userInput.value = "";
                    
                    // Make an API call to the Flask backend
                    fetch('/chat', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({ message: userMessage }),
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.error) {
                            appendMessage("bot", "Error: " + data.error);
                        } else {
                            appendMessage("bot", data.reply);
                            updateSummary(data.reply);
                        }
                    })
                    .catch((error) => {
                        console.error('Error:', error);
                        appendMessage("bot", "Sorry, there was an error processing your request.");
                    });
                }
            }

            function smoothScrollToBottom() {
                const scrollHeight = messagesContainer.scrollHeight;
                const currentScroll = messagesContainer.scrollTop;
                const targetScroll = scrollHeight - messagesContainer.clientHeight;
                
                if (targetScroll > currentScroll) {
                    anime({
                        targets: messagesContainer,
                        scrollTop: targetScroll,
                        duration: 500,
                        easing: 'easeInOutQuad'
                    });
                }
            }

            sendButton.addEventListener("click", sendMessage);
            userInput.addEventListener("keypress", function(event) {
                if (event.key === "Enter") {
                    sendMessage();
                }
            });

            // Theme toggling
            themeSwitch.addEventListener("change", function() {
                document.body.classList.toggle("dark-theme");
            });

            // Particle background effect
            function createParticle() {
                const particle = document.createElement("div");
                particle.classList.add("particle");
                particle.style.left = Math.random() * 100 + "vw";
                particle.style.animationDuration = Math.random() * 3 + 2 + "s";
                document.body.appendChild(particle);

                setTimeout(() => {
                    particle.remove();
                }, 5000);
            }

            setInterval(createParticle, 200);
        });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
</body>
</html>
"

"
here is my app.py code...based on it give me the proper html code also you are allowed to create own functions from flask import Flask, render_template, request, jsonify, session
import google.generativeai as genai
from dotenv import load_dotenv
import os
import logging
from google.generativeai.types import GenerationConfig, HarmCategory, HarmBlockThreshold

# Load environment variables
load_dotenv()
api_key = ""
app = Flask(name)
app.secret_key = os.getenv("SECRET_KEY", "fallback_secret_key")  # Set a secret key for session management

# Set up logging
logging.basicConfig(level=logging.INFO)

# Configure the Google Generative AI API
genai.configure(api_key=api_key)

# Generation configurations
generation_config = GenerationConfig(
    temperature=0.9,
    top_p=1,
    top_k=1,
    max_output_tokens=2048,
)

# Safety Settings
safety_settings = {
    HarmCategory.HARM_CATEGORY_HATE_SPEECH: HarmBlockThreshold.BLOCK_NONE,
    HarmCategory.HARM_CATEGORY_HARASSMENT: HarmBlockThreshold.BLOCK_NONE,
    HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT: HarmBlockThreshold.BLOCK_NONE,
    HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT: HarmBlockThreshold.BLOCK_NONE,
}

# System instructions
system_instructions = """
You are Krishna, a 25-year-old Computer Science student from Vizag, India, studying at GVP College of Engineering.
Your communication style:
1. Be friendly, approachable, and use a conversational tone.
2. Demonstrate deep knowledge of computer science, especially AI and machine learning.
3. Show enthusiasm for technology and its potential to solve problems.
4. Occasionally mention your interests in cricket, music, and travel.
5. Be helpful and offer insights, but also encourage the user to think critically.
6. Use simple analogies to explain complex concepts when appropriate.
7. If asked about topics outside your expertise, admit it and offer to learn together.
8. Maintain a positive and encouraging attitude throughout the conversation.
"""

# Create model instance
chat_model = genai.GenerativeModel("gemini-1.5-flash", generation_config=generation_config)

@app.route('/')
def index():
    return render_template('chat.html')

@app.route('/chat', methods=['POST'])
def chat():
    user_message = request.json['message']

    # Initialize chat history if it doesn't exist
    if 'chat_history' not in session:
        session['chat_history'] = [{"role": "system", "parts": [system_instructions]}]

    # Add the user message to the chat history
    session['chat_history'].append({"role": "user", "parts": [user_message]})

    try:
        # Create a chat session with the existing history
        chat = chat_model.start_chat(history=session['chat_history'])

        # Send user message and get response
        response = chat.send_message(user_message, stream=False)

        # Extract the response text
        bot_response = response.text.strip()

        # Add the bot response to the chat history
        session['chat_history'].append({"role": "model", "parts": [bot_response]})

        # Limit the chat history to the last 10 messages (adjust as needed)
        if len(session['chat_history']) > 11:  # 10 messages + 1 system instruction
            session['chat_history'] = [session['chat_history'][0]] + session['chat_history'][-10:]

        # Save the session
        session.modified = True

        return jsonify({"reply": bot_response, "chat_history": session['chat_history']})

    except Exception as e:
        logging.error(f"Error generating response: {str(e)}")
        return jsonify({"error": "An error occurred while processing your request."}), 500

if name == 'main':
    app.run(debug=True)
"