Spaces:
Running
Running
-
1.52 kB
initial commit
-
225 Bytes
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>RaznetSolutionsAI - Smart AI Assistant</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> .gradient-bg { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); } .ai-message { background-color: #e6f7ff; border-radius: 18px 18px 18px 4px; } .user-message { background-color: #ffffff; border-radius: 18px 18px 4px 18px; } .modal { display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); animation: fadeIn 0.3s; } .modal-content { background-color: white; margin: 10% auto; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); width: 90%; max-width: 500px; animation: slideDown 0.3s; } .chat-bubble:hover { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); } .fade-in { animation: fadeIn 0.5s ease-in; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .typing-indicator { display: flex; padding: 0.5rem 1rem; } .typing-indicator span { height: 8px; width: 8px; background-color: #9ca3af; border-radius: 50%; display: inline-block; margin: 0 2px; animation: bounce 1.2s infinite ease-in-out; } .typing-indicator span:nth-child(2) { animation-delay: 0.2s; } .typing-indicator span:nth-child(3) { animation-delay: 0.4s; } @keyframes bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } } .menu { display: none; position: absolute; right: 0; background-color: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); width: 200px; margin-top: 0.5rem; z-index: 10; } .menu li { transition: background-color 0.2s; } .menu.show { display: block; } #chatArea::-webkit-scrollbar { width: 6px; } #chatArea::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } #chatArea::-webkit-scrollbar-thumb { background: #888; border-radius: 10px; } #chatArea::-webkit-scrollbar-thumb:hover { background: #555; } .file-input-label { display: inline-block; padding: 6px 12px; background-color: #f0f0f0; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; } .file-input-label:hover { background-color: #e0e0e0; } </style> </head> <body class="gradient-bg text-gray-800 min-h-screen flex flex-col transition-colors duration-300"> <header class="bg-white shadow-md p-4 flex justify-between items-center sticky top-0 z-50"> <div class="flex items-center space-x-4"> <img src="https://via.placeholder.com/40" alt="Logo" class="h-10 w-10 rounded-full"> <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">RaznetSolutionsAI</h1> </div> <div class="flex items-center space-x-4"> <button id="profileButton" class="text-gray-600 hover:text-blue-600 transition-colors"> <i class="fas fa-user-circle text-2xl"></i> </button> <button id="weatherButton" class="text-gray-600 hover:text-blue-600 transition-colors"> <i class="fas fa-cloud-sun text-2xl"></i> </button> <button id="settingsButton" class="text-gray-600 hover:text-blue-600 transition-colors"> <i class="fas fa-cog text-2xl"></i> </button> <button id="menuButton" class="text-gray-600 hover:text-gray-800 md:hidden"> <i class="fas fa-bars text-2xl"></i> </button> </div> </header> <main class="flex-grow p-4 pt-6 md:pt-8"> <section class="max-w-4xl mx-auto"> <div class="text-center mb-8"> <h2 class="text-3xl md:text-4xl font-bold mb-2 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">How can I help you today?</h2> <p class="text-gray-600 max-w-lg mx-auto">Ask me anything from technical questions to creative ideas, I'm your intelligent AI assistant.</p> </div> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8"> <button class="chat-bubble fade-in bg-white p-4 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 border border-gray-100 flex flex-col items-start" data-question="Explain quantum computing"> <i class="fas fa-atom mb-2 text-blue-500 text-xl"></i> <span class="font-medium">Explain quantum computing</span> <span class="text-sm text-gray-500 mt-1">in simple terms</span> </button> <button class="chat-bubble fade-in bg-white p-4 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 border border-gray-100 flex flex-col items-start" data-question="Creative dinner recipe"> <i class="fas fa-utensils mb-2 text-red-500 text-xl"></i> <span class="font-medium">Creative dinner recipe</span> <span class="text-sm text-gray-500 mt-1">for tonight</span> </button> <button class="chat-bubble fade-in bg-white p-4 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 border border-gray-100 flex flex-col items-start" data-question="Productivity tips"> <i class="fas fa-tasks mb-2 text-green-500 text-xl"></i> <span class="font-medium">Productivity tips</span> <span class="text-sm text-gray-500 mt-1">to work smarter</span> </button> <button class="chat-bubble fade-in bg-white p-4 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 border border-gray-100 flex flex-col items-start" data-question="Teach photosynthesis"> <i class="fas fa-leaf mb-2 text-yellow-500 text-xl"></i> <span class="font-medium">Teach photosynthesis</span> <span class="text-sm text-gray-500 mt-1">like I'm 5</span> </button> </div> <div class="bg-white rounded-xl shadow-md overflow-hidden"> <div id="chatArea" class="h-96 overflow-y-auto p-4 space-y-4 bg-gray-50"> <div class="ai-message flex items-start space-x-2 p-3 max-w-[85%]"> <img src="https://via.placeholder.com/40" alt="AI" class="h-8 w-8 rounded-full mt-1"> <div> <span class="font-semibold text-blue-600">RaznetSolutionsAI</span> <p class="text-gray-700">Hello! I'm RaznetSolutionsAI, your intelligent assistant. How can I help you today?</p> </div> </div> </div> <div class="p-4 border-t border-gray-100"> <form id="chatForm" class="space-y-3"> <div class="flex space-x-2"> <input id="userInput" type="text" class="flex-grow p-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" placeholder="Type your message..." autocomplete="off"> <button id="sendButton" type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-lg transition flex items-center justify-center"> <i class="fas fa-paper-plane"></i> <span class="ml-2 hidden sm:inline">Send</span> </button> <button type="button" id="voiceButton" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-2 rounded-lg transition"> <i class="fas fa-microphone"></i> </button> </div> <div class="flex items-center space-x-3"> <label for="fileUpload" class="file-input-label text-sm cursor-pointer"> <i class="fas fa-paperclip mr-1"></i> Attach file </label> <select id="toneSelect" class="p-2 text-sm border rounded-lg bg-white"> <option value="professional"><i class="fas fa-user-tie mr-2"></i>Professional</option> <option value="friendly"><i class="fas fa-smile mr-2"></i>Friendly</option> <option value="formal"><i class="fas fa-handshake mr-2"></i>Formal</option> <option value="casual"><i class="fas fa-tshirt mr-2"></i>Casual</option> </select> <input type="file" id="fileUpload" class="hidden" accept=".csv,.json,.txt,.pdf"> </div> <div class="flex items-center text-xs text-gray-500"> <span class="relative flex items-center mr-2"> <input id="agreeCheck" type="checkbox" class="w-4 h-4"> <i class="fas fa-check absolute text-white text-xs hidden"></i> </span> <label for="agreeCheck">By messaging, you agree to our <a href="#" class="text-blue-500 hover:underline">Terms</a> and <a href="#" class="text-blue-500 hover:underline">Privacy Policy</a></label> </div> </form> </div> </div> </section> </main> <footer class="bg-white p-4 text-center text-sm text-gray-600 border-t border-gray-100"> <div class="max-w-4xl mx-auto"> <p class="flex items-center justify-center"> <i class="fas fa-copyright mr-2"></i> 2025 RaznetSolutionsAI. All rights reserved. </p> <div class="flex justify-center space-x-4 mt-2"> <a href="#" class="hover:text-blue-600 transition flex items-center"> <i class="fas fa-shield-alt mr-1"></i> Privacy </a> <a href="#" class="hover:text-blue-600 transition flex items-center"> <i class="fas fa-file-contract mr-1"></i> Terms </a> <a href="#" class="hover:text-blue-600 transition flex items-center"> <i class="fas fa-envelope mr-1"></i> Contact </a> <a href="#" class="hover:text-blue-600 transition flex items-center"> <i class="fas fa-info-circle mr-1"></i> About </a> </div> </div> </footer> <div id="settingsModal" class="modal"> <div class="modal-content"> <h2 class="text-2xl font-bold mb-4 text-gray-800">Settings</h2> <div class="space-y-4"> <div class="flex items-center"> <input id="darkMode" type="checkbox" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500"> <label for="darkMode" class="ml-2 flex items-center"> <i class="fas fa-moon mr-2"></i> Dark Mode </label> </div> <div class="flex items-center"> <input id="notifications" type="checkbox" class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500" checked> <label for="notifications" class="ml-2 flex items-center"> <i class="fas fa-bell mr-2"></i> Enable Notifications </label> </div> <div class="pt-4"> <button id="closeSettings" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition"> Save Settings </button> </div> </div> </div> </div> <div id="profileModal" class="modal"> <div class="modal-content"> <div class="flex justify-between items-center mb-4"> <h2 class="text-2xl font-bold text-gray-800">My Profile</h2> <div class="h-16 w-16 rounded-full bg-gray-200 flex items-center justify-center overflow-hidden"> <img src="https://via.placeholder.com/64" alt="Profile" class="h-full w-full object-cover"> </div> </div> <div class="space-y-3"> <div class="bg-gray-50 p-3 rounded-lg"> <p class="text-sm text-gray-500">Full Name</p> <p class="font-medium">John Doe</p> </div> <div class="bg-gray-50 p-3 rounded-lg"> <p class="text-sm text-gray-500">Email</p> <p class="font-medium">[email protected]</p> </div> <div class="bg-gray-50 p-3 rounded-lg"> <p class="text-sm text-gray-500">Member Since</p> <p class="font-medium">August 15, 2025</p> </div> <div class="pt-4"> <button id="closeProfile" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition"> Close </button> </div> </div> </div> </div> <div id="weatherModal" class="modal"> <div class="modal-content"> <h2 class="text-2xl font-bold mb-4 text-gray-800">Weather Forecast</h2> <div id="weatherInfo" class="text-center py-4"> <div class="flex justify-center mb-4"> <div class="text-blue-500"> <i class="fas fa-cloud-sun text-6xl"></i> </div> </div> <p class="text-gray-500 mb-1">New York, NY</p> <p class="text-5xl font-bold mb-2">72°F</p> <p class="text-gray-600 mb-4">Partly Cloudy</p> <div class="grid grid-cols-3 gap-2 text-sm"> <div class="bg-gray-50 p-2 rounded"> <p class="text-gray-500">Humidity</p> <p>65%</p> </div> <div class="bg-gray-50 p-2 rounded"> <p class="text-gray-500">Wind</p> <p>8 mph</p> </div> <div class="bg-gray-50 p-2 rounded"> <p class="text-gray-500">Precip</p> <p>10%</p> </div> </div> </div> <div class="pt-4"> <button id="closeWeather" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition"> Close </button> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // DOM Elements const chatArea = document.getElementById('chatArea'); const userInput = document.getElementById('userInput'); const sendButton = document.getElementById('sendButton'); const chatForm = document.getElementById('chatForm'); const quickBtns = document.querySelectorAll('.chat-bubble'); const fileUpload = document.getElementById('fileUpload'); const settingsModal = document.getElementById('settingsModal'); const profileModal = document.getElementById('profileModal'); const weatherModal = document.getElementById('weatherModal'); const closeSettings = document.getElementById('closeSettings'); const closeProfile = document.getElementById('closeProfile'); const closeWeather = document.getElementById('closeWeather'); const settingsButton = document.getElementById('settingsButton'); const profileButton = document.getElementById('profileButton'); const weatherButton = document.getElementById('weatherButton'); const menuButton = document.getElementById('menuButton'); const menu = document.createElement('div'); menu.className = 'menu'; menu.innerHTML = ` <div class="py-1"> <div class="px-4 py-3 border-b border-gray-100"> <p class="text-sm font-medium">Quick Actions</p> </div> <button class="w-full text-left px-4 py-3 hover:bg-gray-100 flex items-center"> <i class="fas fa-home mr-3 text-gray-500"></i> Home </button> <button class="w-full text-left px-4 py-3 hover:bg-gray-100 flex items-center"> <i class="fas fa-chart-line mr-3 text-gray-500"></i> Analytics </button> <button class="w-full text-left px-4 py-3 hover:bg-gray-100 flex items-center"> <i class="fas fa-history mr-3 text-gray-500"></i> History </button> <button class="w-full text-left px-4 py-3 hover:bg-gray-100 flex items-center text-red-500"> <i class="fas fa-sign-out-alt mr-3"></i> Logout </button> </div> `; document.body.appendChild(menu); // Event Listeners sendButton.addEventListener('click', sendMessage); chatForm.addEventListener('submit', function(e) { e.preventDefault(); sendMessage(); }); quickBtns.forEach(btn => { btn.addEventListener('click', function() { const question = this.getAttribute('data-question'); userInput.value = question; sendMessage(); }); }); settingsButton.addEventListener('click', () => { settingsModal.style.display = 'block'; menu.classList.remove('show'); }); profileButton.addEventListener('click', () => { profileModal.style.display = 'block'; menu.classList.remove('show'); }); weatherButton.addEventListener('click', () => { weatherModal.style.display = 'block'; menu.classList.remove('show'); }); closeSettings.addEventListener('click', () => { settingsModal.style.display = 'none'; }); closeProfile.addEventListener('click', () => { profileModal.style.display = 'none'; }); closeWeather.addEventListener('click', () => { weatherModal.style.display = 'none'; }); menuButton.addEventListener('click', () => { menu.classList.toggle('show'); }); // Close modals when clicking outside window.addEventListener('click', (e) => { if (e.target === settingsModal) { settingsModal.style.display = 'none'; } if (e.target === profileModal) { profileModal.style.display = 'none'; } if (e.target === weatherModal) { weatherModal.style.display = 'none'; } if (e.target !== menuButton && e.target.closest('.menu') !== menu && !e.target.closest('.menu-button')) { menu.classList.remove('show'); } }); // Dark Mode Toggle const darkModeToggle = document.getElementById('darkMode'); darkModeToggle.addEventListener('change', toggleDarkMode); function toggleDarkMode() { document.body.classList.toggle('bg-gray-900'); document.body.classList.toggle('text-white'); // Toggle specific elements as needed for dark mode const header = document.querySelector('header'); const footer = document.querySelector('footer'); const chatContainer = document.querySelector('.bg-white'); if (header) header.classList.toggle('bg-gray-800'); if (footer) footer.classList.toggle('bg-gray-800'); if (chatContainer) chatContainer.classList.toggle('bg-gray-700'); // Save preference to localStorage localStorage.setItem('darkMode', darkModeToggle.checked); } // Check for saved dark mode preference if (localStorage.getItem('darkMode') === 'true') { darkModeToggle.checked = true; toggleDarkMode(); } // File Upload Handler fileUpload.addEventListener('change', function(e) { if (this.files.length > 0) { const fileName = this.files[0].name; showMessage('You', `Uploaded file: ${fileName}`, true); // Here you would normally process the file setTimeout(() => { showAIResponse(`I've received your file (${fileName}). How would you like me to process it?`); }, 1000); } }); // Send Message Function function sendMessage() { const message = userInput.value.trim(); if (message === '') return; showMessage('You', message, true); userInput.value = ''; // Show typing indicator const typingIndicator = document.createElement('div'); typingIndicator.className = 'typing-indicator ai-message p-3 max-w-[85%]'; typingIndicator.innerHTML = ` <img src="https://via.placeholder.com/40" alt="AI" class="h-8 w-8 rounded-full"> <div class="ml-2"> <span class="font-semibold text-blue-600">RaznetSolutionsAI</span> <div class="flex space-x-1 mt-1 ml-1"> <span></span> <span></span> <span></span> </div> </div> `; chatArea.appendChild(typingIndicator); chatArea.scrollTop = chatArea.scrollHeight; // Simulate AI response after a delay setTimeout(() => { typingIndicator.remove(); showAIResponse(generateResponse(message)); }, 1500); } // Display user message function showMessage(sender, message, isUser) { const messageDiv = document.createElement('div'); messageDiv.className = `flex items-start space-x-2 p-3 max-w-[85%] ${isUser ? 'user-message ml-auto' : 'ai-message'}`; if (!isUser) { messageDiv.innerHTML = ` <img src="https://via.placeholder.com/40" alt="AI" class="h-8 w-8 rounded-full mt-1"> <div> <span class="font-semibold text-blue-600">${sender}</span> <p class="text-gray-700">${message}</p> </div> `; } else { messageDiv.innerHTML = ` <div class="ml-auto text-right"> <span class="font-semibold text-gray-700">${sender}</span> <p class="text-gray-700 bg-blue-50 rounded-lg p-2 inline-block">${message}</p> </div> `; } chatArea.appendChild(messageDiv); chatArea.scrollTop = chatArea.scrollHeight; } // Display AI response function showAIResponse(response) { showMessage('RaznetSolutionsAI', response, false); } // Simple response generator for demo function generateResponse(userMessage) { const responses = { 'explain quantum computing': 'Quantum computing uses qubits that can exist in multiple states at once (superposition) and be entangled, allowing for parallel processing of complex calculations that would take conventional computers much longer. Think of it like being able to try all possible answers at once!', 'creative dinner recipe': 'How about a Mediterranean stuffed chicken? Butterfly chicken breasts, stuff with spinach, feta, and sun-dried tomatoes, then bake at 375°F for 25 minutes. Serve with roasted potatoes and a cucumber yoghurt sauce. Quick, healthy, and delicious!', 'productivity tips': '1. Use the Pomodoro technique (25 mins work + 5 min break)\n2. Prioritize tasks with the Eisenhower Matrix\n3. Limit distractions with focus apps\n4. Batch similar tasks together\n5. Take regular movement breaks to stay fresh.', 'teach photosynthesis': 'Plants are like little chefs! They take sunlight (like a kitchen light), water (like from the sink), and air (from the windows) to make their food (sugar). The green parts (leaves) are their kitchens where this magic happens. They even make extra air for us to breathe while cooking!' }; const defaultResponses = [ "Interesting question! The answer depends on several factors. Could you provide more details?", "I'd be happy to help with that. Let me think through the best approach...", "Great question! This is an area with ongoing research. Based on current knowledge...", "I understand you're asking about this topic. Here's what I can share..." ]; const lowerMsg = userMessage.toLowerCase(); for (const key in responses) { if (lowerMsg.includes(key)) { return responses[key]; } } return defaultResponses[Math.floor(Math.random() * defaultResponses.length)]; } }); </script> </body> </html> - Initial Deployment
-
28 kB
Update index.html
-
388 Bytes
initial commit