<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SmartLearn - Project Idea Generator</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> body { font-family: 'Arial', sans-serif; color: #333; margin: 0; padding: 0; position: relative; } #myVideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -2; } .container { max-width: 1200px; /* Adjusted for better layout */ margin: 40px auto; padding: 20px; background-color: rgba(255, 255, 255, 0.4); border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); position: relative; z-index: 1; display: flex; flex-wrap: wrap; /* Ensure responsiveness */ gap: 20px; /* Space between elements */ } h1 { color: #2c3e50; text-align: center; margin-bottom: 30px; width: 100%; /* Ensure full width for heading */ } .back-button { position: absolute; top: 20px; left: 20px; background-color: #3498db; color: white; border: none; padding: 10px 15px; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.2); display: flex; align-items: center; font-weight: bold; } .back-button:hover { background-color: #2980b9; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.3); } .back-button i { margin-right: 8px; transition: transform 0.3s ease; } .back-button:hover i { transform: rotate(-360deg); } .back-button span { opacity: 0; width: 0; overflow: hidden; transition: all 0.3s ease; } .back-button:hover span { opacity: 1; width: auto; margin-left: 5px; } .project-form, .chat-container { flex: 1; background-color: #ecf0f1; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .project-form { margin-bottom: 20px; /* Remove if not needed */ } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; color: #2c3e50; font-weight: bold; } .form-group input, .form-group textarea { width: calc(100% - 22px); padding: 10px; border: 1px solid #bdc3c7; border-radius: 4px; font-size: 16px; box-sizing: border-box; } .form-group textarea { height: 100px; resize: vertical; } button { background-color: #2ecc71; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; font-size: 16px; } button:hover { background-color: #27ae60; } .chat-container { background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .chat-messages { height: 300px; overflow-y: auto; padding: 20px; } .message { margin-bottom: 15px; padding: 10px; border-radius: 5px; max-width: 80%; } .user-message { background-color: #3498db; color: white; align-self: flex-end; margin-left: auto; } .ai-message { background-color: #ecf0f1; color: #333; } .chat-input { display: flex; padding: 10px; background-color: #ecf0f1; } .chat-input input { flex-grow: 1; padding: 10px; border: 1px solid #bdc3c7; border-radius: 4px; margin-right: 10px; } .fade-in { animation: fadeIn 0.5s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } </style> </head> <body> <video autoplay muted loop id="myVideo"> <source src="../static/AI_video.mp4" type="video/mp4"> Your browser does not support HTML5 video. </video> <div class="container"> <button class="back-button" onclick="goBack()"> <i class="fas fa-arrow-left"></i> <span>Back</span> </button> <h1><i class="fas fa-lightbulb"></i> Project Idea Generator</h1> <div class="project-form"> <div class="form-group"> <label for="subject"><i class="fas fa-book"></i> Subject:</label> <input type="text" id="subject" placeholder="e.g., Computer Science, Biology, Art"> </div> <div class="form-group"> <label for="topic"><i class="fas fa-tag"></i> Specific Topic:</label> <input type="text" id="topic" placeholder="e.g., Machine Learning, Genetics, Modern Art"> </div> <div class="form-group"> <label for="plan"><i class="fas fa-tasks"></i> Brief Project Plan:</label> <textarea id="plan" placeholder="Outline your initial thoughts or requirements for the project"></textarea> </div> <button onclick="generateProjectIdea()"><i class="fas fa-magic"></i> Generate Project Idea</button> </div> <div class="chat-container"> <div id="chat-messages" class="chat-messages"></div> <div class="chat-input"> <input type="text" id="user-input" placeholder="Ask follow-up questions about the project idea..."> <button onclick="sendMessage()"><i class="fas fa-paper-plane"></i> Send</button> </div> </div> </div> <script> const chatMessages = document.getElementById('chat-messages'); const userInput = document.getElementById('user-input'); let currentProjectIdea = ''; function addMessage(content, isUser) { const messageDiv = document.createElement('div'); messageDiv.className = `message ${isUser ? 'user-message' : 'ai-message'} fade-in`; messageDiv.innerHTML = content.replace(/\n/g, '<br>'); chatMessages.appendChild(messageDiv); chatMessages.scrollTop = chatMessages.scrollHeight; } function generateProjectIdea() { const subject = document.getElementById('subject').value; const topic = document.getElementById('topic').value; const plan = document.getElementById('plan').value; addMessage(`Generating project idea for ${subject} - ${topic}`, true); fetch('/generate_project_idea', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ subject, topic, plan }) }) .then(response => response.json()) .then(data => { currentProjectIdea = data.project_idea; addMessage(currentProjectIdea, false); }) .catch(error => { console.error('Error:', error); }); } function sendMessage() { const message = userInput.value.trim(); if (message) { addMessage(message, true); userInput.value = ''; fetch('/ask_followup', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ project_idea: currentProjectIdea, query: message }) }) .then(response => response.json()) .then(data => { addMessage(data.response, false); }) .catch(error => { console.error('Error:', error); }); } } userInput.addEventListener('keypress', function(e) { if ( e.key === 'Enter') { sendMessage(); } }); addMessage("Welcome! Use the form above to generate a project idea, then feel free to ask follow-up questions.", false); function goBack() { window.history.back(); } </script> </body> </html>