Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Scire AI Assistant</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #5D3FD3; | |
| --secondary-color: #5D3FD320; | |
| --dark-color: #333; | |
| --light-color: #f8f9fa; | |
| --gray-color: #e9ecef; | |
| --border-radius: 8px; | |
| --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| --transition: all 0.3s ease; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: var(--light-color); | |
| color: var(--dark-color); | |
| line-height: 1.6; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| } | |
| header { | |
| background-color: white; | |
| padding: 15px 20px; | |
| box-shadow: var(--box-shadow); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-weight: bold; | |
| font-size: 22px; | |
| color: var(--primary-color); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .logo i { | |
| font-size: 24px; | |
| } | |
| nav ul { | |
| display: flex; | |
| list-style: none; | |
| gap: 20px; | |
| } | |
| nav a { | |
| text-decoration: none; | |
| color: var(--dark-color); | |
| font-weight: 500; | |
| transition: var(--transition); | |
| } | |
| nav a:hover { | |
| color: var(--primary-color); | |
| } | |
| .user-menu { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .avatar { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 50%; | |
| background-color: var(--gray-color); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| overflow: hidden; | |
| } | |
| .avatar img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| main { | |
| flex: 1; | |
| display: flex; | |
| padding: 20px; | |
| gap: 20px; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| width: 100%; | |
| height: calc(100vh - 120px); | |
| } | |
| .top-container { | |
| display: flex; | |
| width: 100%; | |
| gap: 20px; | |
| height: 100%; | |
| } | |
| .left-section { | |
| width: 240px; /* Reduced from 280px to 240px */ | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| padding: 20px; | |
| box-shadow: var(--box-shadow); | |
| height: 100%; | |
| overflow-y: auto; | |
| } | |
| .right-section { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| height: 100%; | |
| } | |
| .sidebar { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .sidebar-section { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .sidebar-title { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: #666; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| margin-bottom: 5px; | |
| } | |
| .sidebar-item { | |
| padding: 10px 12px; | |
| border-radius: var(--border-radius); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| transition: var(--transition); | |
| font-size: 14px; | |
| } | |
| .sidebar-item:hover { | |
| background-color: var(--secondary-color); | |
| color: var(--primary-color); | |
| } | |
| .sidebar-item.active { | |
| background-color var(--secondary-color); | |
| color: var(--primary-color); | |
| font-weight: 500; | |
| } | |
| .sidebar-item i { | |
| width: 18px; | |
| text-align: center; | |
| } | |
| .content { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| height: calc(100% - 180px); | |
| } | |
| .chat-container { | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--box-shadow); | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| } | |
| .chat-header { | |
| padding: 15px 20px; | |
| border-bottom: 1px solid var(--gray-color); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .chat-title { | |
| font-weight: 600; | |
| font-size: 18px; | |
| } | |
| .chat-actions { | |
| display: flex; | |
| gap: 12px; | |
| } | |
| .chat-actions button { | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| color: #666; | |
| transition: var(--transition); | |
| font-size: 16px; | |
| width: 30px; | |
| height: 30px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| } | |
| .chat-actions button:hover { | |
| color: var(--primary-color); | |
| background-color: var(--secondary-color); | |
| } | |
| .messages { | |
| flex: 1; | |
| padding: 20px; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .message { | |
| max-width: 80%; | |
| padding: 12px 16px; | |
| border-radius: var(--border-radius); | |
| position: relative; | |
| line-height: 1.5; | |
| } | |
| .user-message { | |
| align-self: flex-end; | |
| background-color: var(--primary-color); | |
| color: white; | |
| border-bottom-right-radius: 0; | |
| } | |
| .ai-message { | |
| align-self: flex-start; | |
| background-color: var(--gray-color); | |
| border-bottom-left-radius: 0; | |
| } | |
| .message-time { | |
| font-size: 11px; | |
| color: rgba(255, 255, 255, 0.8); | |
| margin-top: 6px; | |
| text-align: right; | |
| opacity: 0.8; | |
| } | |
| .ai-message .message-time { | |
| color: #666; | |
| } | |
| .input-area { | |
| padding: 16px 20px; | |
| border-top: 1px solid var(--gray-color); | |
| display: flex; | |
| gap: 12px; | |
| align-items: center; | |
| } | |
| .message-input { | |
| flex: 1; | |
| padding: 12px 16px; | |
| border: 1px solid var(--gray-color); | |
| border-radius: var(--border-radius); | |
| outline: none; | |
| transition: var(--transition); | |
| resize: none; | |
| max-height: 120px; | |
| font-size: 14px; | |
| min-height: 48px; | |
| } | |
| .message-input:focus { | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 2px var(--secondary-color); | |
| } | |
| .send-button { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: var(--border-radius); | |
| background-color: var(--primary-color); | |
| color: white; | |
| border: none; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .send-button:hover { | |
| opacity: 0.9; | |
| transform: scale(1.05); | |
| } | |
| .send-button:disabled { | |
| background-color: #ccc; | |
| cursor: not-allowed; | |
| } | |
| .cards-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); | |
| gap: 16px; | |
| padding: 5px; | |
| } | |
| .card { | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| padding: 18px; | |
| box-shadow: var(--box-shadow); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .card-title { | |
| font-size: 15px; | |
| font-weight: 600; | |
| margin-bottom: 8px; | |
| color: var(--primary-color); | |
| } | |
| .card-description { | |
| font-size: 13px; | |
| color: #666; | |
| margin-bottom: 12px; | |
| line-height: 1.4; | |
| } | |
| .card-footer { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-size: 11px; | |
| color: #999; | |
| } | |
| /* Loading indicator container */ | |
| .loading-indicator { | |
| display: none; | |
| align-self: flex-start; | |
| margin-bottom: 16px; | |
| } | |
| .typing-indicator { | |
| display: flex; | |
| align-items: center; | |
| padding: 12px 16px; | |
| background-color: var(--gray-color); | |
| border-radius: var(--border-radius); | |
| gap: 8px; | |
| margin-bottom: 2px; | |
| } | |
| .typing-dot { | |
| width: 8px; | |
| height: 8px; | |
| background-color: #666; | |
| border-radius: 50%; | |
| animation: typingAnimation 1.5s infinite ease-in-out; | |
| } | |
| .typing-dot:nth-child(1) { | |
| animation-delay: 0s; | |
| } | |
| .typing-dot:nth-child(2) { | |
| animation-delay: 0.3s; | |
| } | |
| .typing-dot:nth-child(3) { | |
| animation-delay: 0.6s; | |
| } | |
| @keyframes typingAnimation { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-5px); | |
| } | |
| } | |
| .footer { | |
| text-align: center; | |
| padding: 15px; | |
| color: #666; | |
| font-size: 12px; | |
| border-top: 1px solid var(--gray-color); | |
| background-color: white; | |
| } | |
| /* Bell notification icon */ | |
| /* From Uiverse.io by 3bdel3ziz-T */ | |
| .bell { | |
| border: 2.17px solid #333; | |
| border-radius: 10px 10px 0 0; | |
| width: 15px; | |
| height: 17px; | |
| background: transparent; | |
| display: block; | |
| position: relative; | |
| top: -3px; | |
| } | |
| .bell::before, .bell::after { | |
| content: ""; | |
| background: #333; | |
| display: block; | |
| position: absolute; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| height: 2.17px; | |
| } | |
| .bell::before { | |
| top: 100%; | |
| width: 20px; | |
| } | |
| .bell::after { | |
| top: calc(100% + 4px); | |
| width: 7px; | |
| } | |
| /*container main styling*/ | |
| .notification { | |
| background: transparent; | |
| border: none; | |
| padding: 15px 15px; | |
| border-radius: 50px; | |
| cursor: pointer; | |
| transition: 300ms; | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| /*notifications number with before*/ | |
| .notification::before { | |
| content: "1"; | |
| color: white; | |
| font-size: 10px; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background-color: red; | |
| position: absolute; | |
| right: 8px; | |
| top: 8px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 1000; | |
| } | |
| /*container background hover effect*/ | |
| .notification:hover { | |
| background: rgba(170, 170, 170, 0.062); | |
| } | |
| /*container animations*/ | |
| .notification:hover > .bell { | |
| animation: bell-animation 650ms ease-out 0s 1 normal both; | |
| } | |
| /*bell ring and scale animation*/ | |
| @keyframes bell-animation { | |
| 20% { | |
| transform: rotate(15deg); | |
| } | |
| 40% { | |
| transform: rotate(-15deg); | |
| scale: 1.1; | |
| } | |
| 60% { | |
| transform: rotate(10deg); | |
| scale: 1.1; | |
| } | |
| 80% { | |
| transform: rotate(-10deg); | |
| } | |
| 0%, 100% { | |
| transform: rotate(0deg); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="logo"> | |
| <i class="fas fa-robot"></i> | |
| <span>Scire AI Assistant</span> | |
| </div> | |
| <nav> | |
| <ul> | |
| <li><a href="#"><i class="fas fa-home"></i> Home</a></li> | |
| <li><a href="#"><i class="fas fa-bolt"></i> Features</a></li> | |
| <li><a href="#"><i class="fas fa-cog"></i> Settings</a></li> | |
| </ul> | |
| </nav> | |
| <div class="user-menu"> | |
| <button class="notification" title="Notifications"> | |
| <div class="bell"></div> | |
| </button> | |
| <div class="avatar"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User avatar"> | |
| </div> | |
| </div> | |
| </header> | |
| <main> | |
| <div class="top-container"> | |
| <div class="left-section"> | |
| <div class="sidebar"> | |
| <div class="sidebar-section"> | |
| <div class="sidebar-title">Chat</div> | |
| <div class="sidebar-item active"> | |
| <i class="fas fa-comment-dots"></i> | |
| <span>General Discussion</span> | |
| </div> | |
| <div class="sidebar-item"> | |
| <i class="fas fa-code"></i> | |
| <span>Programming Help</span> | |
| </div> | |
| <div class="sidebar-item"> | |
| <i class="fas fa-book"></i> | |
| <span>Research Assistant</span> | |
| </div> | |
| </div> | |
| <div class="sidebar-section"> | |
| <div class="sidebar-title">Tools</div> | |
| <div class="sidebar-item"> | |
| <i class="fas fa-wand-magic-sparkles"></i> | |
| <span>Content Generator</span> | |
| </div> | |
| <div class="sidebar-item"> | |
| <i class="fas fa-chart-line"></i> | |
| <span>Data Analysis</span> | |
| </div> | |
| <div class="sidebar-item"> | |
| <i class="fas fa-image"></i> | |
| <span>Image Creator</span> | |
| </div> | |
| </div> | |
| <div class="sidebar-section"> | |
| <div class="sidebar-title">History</div> | |
| <div class="sidebar-item"> | |
| <i class="fas fa-history"></i> | |
| <span>Today</span> | |
| </div> | |
| <div class="sidebar-item"> | |
| <i class="fas fa-calendar-week"></i> | |
| <span>Last Week</span> | |
| </div> | |
| <div class="sidebar-item"> | |
| <i class="fas fa-archive"></i> | |
| <span>Archived</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="right-section"> | |
| <div class="content"> | |
| <div class="chat-container"> | |
| <div class="chat-header"> | |
| <div class="chat-title">General Assistant</div> | |
| <div class="chat-actions"> | |
| <button title="Clear chat"><i class="fas fa-trash"></i></button> | |
| <button title="Export chat"><i class="fas fa-download"></i></button> | |
| <button title="Share chat"><i class="fas fa-share-nodes"></i></button> | |
| </div> | |
| </div> | |
| <div class="messages" id="messages"> | |
| <div class="message ai-message"> | |
| Hello! I'm your AI assistant. How can I help you today? | |
| <div class="message-time">Just now</div> | |
| </div> | |
| <!-- Loading indicator will appear here --> | |
| <div class="loading-indicator" id="loadingIndicator"> | |
| <div class="typing-indicator"> | |
| <div class="typing-dot"></div> | |
| <div class="typing-dot"></div> | |
| <div class="typing-dot"></div> | |
| <span>AI is thinking...</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="input-area"> | |
| <textarea class="message-input" id="messageInput" placeholder="Type your message here..." rows="1"></textarea> | |
| <button class="send-button" id="sendButton"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="cards-container"> | |
| <div class="card"> | |
| <div class="card-title"><i class="fas fa-lightbulb"></i> Quick Ideas</div> | |
| <div class="card-description">Get creative suggestions for your projects, writing, or problem-solving.</div> | |
| <div class=" card-footer"> | |
| <span>Try now</span> | |
| <i class="fas fa-arrow-right"></i> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-title"><i class="fas fa-terminal"></i> Code Help</div> | |
| <div class="card-description">Debug, explain, or generate code snippets in multiple programming languages.</div> | |
| <div class="card-footer"> | |
| <span>Try now</span> | |
| <i class="fas fa-arrow-right"></i> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-title"><i class="fas fa-language"></i> Translation</div> | |
| <div class="card-description">Translate text between languages with context-aware accuracy.</div> | |
| <div class="card-footer"> | |
| <span>Try now</span> | |
| <i class="fas fa-arrow-right"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="footer"> | |
| © 2023 Scire AI Assistant | Powered by AI Technology | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const messagesContainer = document.getElementById('messages'); | |
| const messageInput = document.getElementById('messageInput'); | |
| const sendButton = document.getElementById('sendButton'); | |
| const loadingIndicator = document.getElementById('loadingIndicator'); | |
| // Auto-resize textarea | |
| messageInput.addEventListener('input', function() { | |
| this.style.height = 'auto'; | |
| this.style.height = (this.scrollHeight) + 'px'; | |
| }); | |
| // Send message function | |
| function sendMessage() { | |
| const text = messageInput.value.trim(); | |
| if (!text) return; | |
| // Add user message | |
| const userMessage = document.createElement('div'); | |
| userMessage.className = 'message user-message'; | |
| userMessage.innerHTML = `${text}<div class="message-time">${getCurrentTime()}</div>`; | |
| messagesContainer.appendChild(userMessage); | |
| // Clear input | |
| messageInput.value = ''; | |
| messageInput.style.height = '48px'; | |
| // Show loading indicator | |
| loadingIndicator.style.display = 'flex'; | |
| // Scroll to bottom | |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; | |
| // Simulate AI response after delay | |
| setTimeout(() => { | |
| // Hide loading indicator | |
| loadingIndicator.style.display = 'none'; | |
| // Add AI response | |
| const aiResponse = generateAIResponse(text); | |
| const aiMessage = document.createElement('div'); | |
| aiMessage.className = 'message ai-message'; | |
| aiMessage.innerHTML = `${aiResponse}<div class="message-time">${getCurrentTime()}</div>`; | |
| messagesContainer.appendChild(aiMessage); | |
| // Scroll to bottom | |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; | |
| }, 1500 + Math.random() * 2000); // Random delay between 1.5-3.5 seconds | |
| } | |
| // Generate simple AI responses | |
| function generateAIResponse(userMessage) { | |
| const responses = [ | |
| "I understand. Could you tell me more about that?", | |
| "That's an interesting point. Here's what I think about it...", | |
| "Based on your question, I'd recommend considering the following approach.", | |
| "Thank you for sharing that. Let me help you with some information.", | |
| "I've analyzed your query and here's my response." | |
| ]; | |
| return responses[Math.floor(Math.random() * responses.length)]; | |
| } | |
| // Get current time in HH:MM format | |
| function getCurrentTime() { | |
| const now = new Date(); | |
| return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`; | |
| } | |
| // Send message on button click | |
| sendButton.addEventListener('click', sendMessage); | |
| // Send message on Enter key (but allow Shift+Enter for new lines) | |
| messageInput.addEventListener('keydown', function(e) { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| sendMessage(); | |
| } | |
| }); | |
| // Demo chat history | |
| const demoMessages = [ | |
| { text: "What's the weather like today?", type: "user" }, | |
| { text: "I can check local weather data if you enable location services. Would you like me to do that?", type: "ai" }, | |
| { text: "No, just a general forecast is fine.", type: "user" }, | |
| { text: "Currently, most areas are experiencing mild temperatures with occasional showers. Would you like more specific details for your location?", type: "ai" } | |
| ]; | |
| // Add demo messages to chat (for illustration) | |
| setTimeout(() => { | |
| demoMessages.forEach(msg => { | |
| const message = document.createElement('div'); | |
| message.className = `message ${msg.type}-message`; | |
| message.innerHTML = `${msg.text}<div class="message-time">Earlier</div>`; | |
| messagesContainer.insertBefore(message, messagesContainer.firstChild.nextSibling); | |
| }); | |
| }, 500); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> | |
| </html> |