Update static/styles.css

static/styles.css

@@ -1,150 +1,363 @@
-// Theme toggle
-const themeToggler = document.getElementById('themeToggler');
-themeToggler.addEventListener('click', () => {
-    document.body.classList.toggle('light_mode');
-    themeToggler.innerHTML = document.body.classList.contains('light_mode') ? "<i class='bx bx-moon'></i>" : "<i class='bx bx-sun'></i>";
-});
-
-// Chat bar functionality
-const chatBar = document.getElementById('chatBar');
-const suggests = document.querySelector('.suggests');
-const inputField = document.querySelector('.prompt__form-input');
-const processingDots = document.getElementById('processingDots');
-const welcomeText = document.getElementById('welcome-text');
-
-// Bubble customization
-const bubbleToggle = document.getElementById('bubbleToggle');
-let bubbleStyles = ['bubble-rounded', 'bubble-sharp', 'bubble-starry'];
-let currentBubbleIndex = 0;
-
-function applyBubbleStyle() {
-    const userMessages = document.querySelectorAll('.chat-message.user');
-    userMessages.forEach(msg => {
-        bubbleStyles.forEach(style => msg.classList.remove(style));
-        msg.classList.add(bubbleStyles[currentBubbleIndex]);
-    });
-}
-
-bubbleToggle.addEventListener('click', () => {
-    currentBubbleIndex = (currentBubbleIndex + 1) % bubbleStyles.length;
-    applyBubbleStyle();
-});
-
-function addMessage(content, isUser = false) {
-    const messageDiv = document.createElement('div');
-    messageDiv.classList.add('chat-message');
-    if (isUser) {
-        messageDiv.classList.add('user');
-        messageDiv.classList.add(bubbleStyles[currentBubbleIndex]); // Apply current bubble style
-    } else {
-        messageDiv.classList.add('bot');
-    }
-    messageDiv.textContent = content;
-    chatBar.appendChild(messageDiv);
-    if (chatBar.scrollTop + chatBar.clientHeight >= chatBar.scrollHeight - 100) {
-        chatBar.scrollTop = chatBar.scrollHeight;
-    }
-}
-
-// Hide suggestions and welcome text when typing starts
-inputField.addEventListener('input', () => {
-    const input = inputField.value.trim();
-    if (input.length > 0) {
-        suggests.classList.add('hidden');
-        welcomeText.classList.add('hidden');
-    } else {
-        suggests.classList.remove('hidden');
-    }
-});
-
-// Keyboard interaction: Enter to send
-inputField.addEventListener('keypress', (e) => {
-    if (e.key === 'Enter') {
-        e.preventDefault();
-        sendMessage();
-    }
-});
-
-// Send message function
-function sendMessage() {
-    const input = inputField.value.trim();
-    if (!input) return;
-
-    const sendButton = document.getElementById('sendButton');
-    sendButton.disabled = true;
-    processingDots.classList.add('active');
-
-    addMessage(input, true);
-    inputField.value = '';
-
-    fetch('/api/chat', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ query: input })
-    })
-    .then(res => res.json())
-    .then(data => {
-        if (data.response) {
-            addMessage(data.response);
-            suggests.classList.add('hidden');
-        } else {
-            alert(data.detail || 'Something went wrong!');
-        }
-    })
-    .catch(error => {
-        alert('Failed to process the query locally!');
-    })
-    .finally(() => {
-        sendButton.disabled = false;
-        processingDots.classList.remove('active');
-    });
-}
-
-// Send button click
-document.getElementById('sendButton').addEventListener('click', sendMessage);
-
-// Placeholder functionality for other buttons
-document.getElementById('deepSearchButton').addEventListener('click', () => {
-    alert('Initiating DeepSearch... (Functionality to be implemented)');
-});
-document.getElementById('thinkButton').addEventListener('click', () => {
-    alert('Activating Think mode... (Functionality to be implemented)');
-});
-document.getElementById('fileInput').addEventListener('change', (e) => {
-    const file = e.target.files[0];
-    if (file) alert(`File selected: ${file.name} (Processing to be implemented)`);
-});
-
-// Initialize stars
-function initializeStars() {
-    const starsContainer = document.getElementById('starsContainer');
-    for (let i = 0; i < 100; i++) {
-        const star = document.createElement('div');
-        star.className = 'star';
-        const x = Math.random() * 100;
-        const y = Math.random() * 100;
-        const size = Math.random() * 2 + 1;
-        const delay = Math.random() * 3;
-        star.style.left = `${x}%`;
-        star.style.top = `${y}%`;
-        star.style.width = `${size}px`;
-        star.style.height = `${size}px`;
-        star.style.animationDelay = `${delay}s`;
-        starsContainer.appendChild(star);
-    }
-}
-
-// Call initializeStars on page load
-document.addEventListener('DOMContentLoaded', initializeStars);
-
-// Starry background effects (optional, kept from your original)
-document.addEventListener('mousemove', (e) => {
-    let x = e.clientX / window.innerWidth;
-    let y = e.clientY / window.innerHeight;
-    document.querySelector('.stars').style.transform = `translate(${x * 50}px, ${y * 50}px)`;
-});
-window.addEventListener('scroll', () => {
-    const scrollPosition = window.scrollY;
-    const stars = document.querySelector('.stars');
-    stars.style.animationDuration = `${100 - scrollPosition / 10}s`;
-});
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    outline: none;
+    box-sizing: border-box;
+    font-family: "Open Sans", sans-serif;
+}
+
+:root {
+    --primary-color: #0A0A0B;
+    --secondary-color: #1A1B1E;
+    --secondary-hover-color: #2A2B2E;
+    --focus-color: #242528;
+    --focus-hover-color: #343538;
+    --button-hover-color: #252627;
+    --text-color: #FFFFFF;
+    --text-secondary-color: #A0A1A3;
+    --heading-secondary-color: #606162;
+    --placeholder-color: #78797A;
+    --accent-color: #00A3FF;
+    --star-color: #FFFFFF;
+    --background-color: #000;
+}
+
+.light_mode {
+    --primary-color: #D8D0E6; /* Dusty Lavender */
+    --secondary-color: #E8E2F2; /* Darker lavender */
+    --secondary-hover-color: #D0C8E0;
+    --focus-color: #ECEDEC;
+    --focus-hover-color: #E0E1E0;
+    --button-hover-color: #D5CCE8;
+    --text-color: #2A2A2A; /* Charcoal */
+    --text-secondary-color: #4A4B4C;
+    --heading-secondary-color: #BABBBB;
+    --placeholder-color: #868788;
+    --accent-color: #7A5CFA; /* Vibrant purple */
+    --star-color: #666;
+    --background-color: #D8D0E6;
+}
+
+body {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    background: var(--background-color);
+    position: relative;
+    overflow-y: hidden;
+}
+
+.stars {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background: url('https://www.transparenttextures.com/patterns/stardust.png');
+    animation: starsAnim 100s linear infinite;
+    z-index: -1;
+}
+
+.light_mode .stars {
+    background: url('https://www.transparenttextures.com/patterns/stardust.png') rgba(216, 208, 230, 0.4);
+    opacity: 0.2;
+}
+
+@keyframes starsAnim {
+    from { background-position: 0 0; }
+    to { background-position: 10000px 10000px; }
+}
+
+.sidebar {
+    width: 70px;
+    height: 100vh;
+    background: rgba(26, 27, 30, 0.95);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1rem 0;
+    position: fixed;
+    left: 0;
+    top: 0;
+    transition: width 0.3s ease;
+    z-index: 1001;
+}
+
+.sidebar:hover {
+    width: 200px;
+}
+
+.sidebar__item {
+    width: 100%;
+    padding: 1rem;
+    color: var(--text-secondary-color);
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    transition: all 0.3s ease;
+}
+
+.sidebar__item:hover {
+    background: var(--secondary-hover-color);
+    color: var(--accent-color);
+    padding-left: 1.5rem;
+}
+
+.sidebar__item i {
+    font-size: 1.5rem;
+}
+
+.sidebar__item span {
+    display: none;
+    font-size: 1rem;
+}
+
+.sidebar:hover .sidebar__item span {
+    display: inline;
+}
+
+.light_mode .sidebar {
+    background: rgba(232, 226, 242, 0.95);
+}
+
+.main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 80px;
+    padding-top: 2rem;
+    margin-left: 70px;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.header {
+    max-width: 900px;
+    text-align: center;
+    padding: 0 2rem;
+    margin: 0 auto;
+}
+
+.header__title h1 {
+    color: var(--text-color);
+    font-size: 3.5rem;
+    font-weight: 800;
+    margin-bottom: 1rem;
+    text-shadow: 0 0 10px rgba(0, 163, 255, 0.5);
+}
+
+.header__title h2 {
+    color: var(--text-secondary-color);
+    font-size: 1.5rem;
+    font-weight: 400;
+    max-width: 600px;
+    margin: 0 auto;
+    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    transition: opacity 0.3s ease;
+}
+
+.suggests {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    margin: 2rem auto;
+    max-width: 900px;
+    gap: 1rem;
+    padding: 0 2rem;
+    transition: opacity 0.3s ease;
+}
+
+.suggests.hidden,
+.header__title h2.hidden {
+    opacity: 0;
+    height: 0;
+    margin: 0;
+    overflow: hidden;
+}
+
+.suggests__item {
+    background: rgba(26, 27, 30, 0.9);
+    color: var(--text-secondary-color);
+    padding: 1.5rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border: 1px solid var(--focus-color);
+}
+
+.light_mode .suggests__item {
+    background: rgba(232, 226, 242, 0.9);
+}
+
+.suggests__item:hover {
+    background: var(--secondary-hover-color);
+    border-color: var(--accent-color);
+    color: var(--text-color);
+}
+
+.suggests__item-icon {
+    margin-top: 1rem;
+    color: var(--accent-color);
+}
+
+.prompt {
+    position: fixed;
+    background: rgba(10, 10, 11, 0.9);
+    z-index: 1000;
+    width: calc(100% - 70px);
+    left: 70px;
+    bottom: 0;
+    padding: 1rem;
+    border-top: 1px solid var(--secondary-color);
+}
+
+.light_mode .prompt {
+    background: rgba(232, 226, 242, 0.9);
+    border-top: 1px solid var(--focus-color);
+}
+
+.prompt__input-wrapper {
+    max-width: 900px;
+    margin: 0 auto;
+    position: relative;
+    display: flex;
+    align-items: center;
+    background: var(--secondary-color);
+    border: 1px solid var(--focus-color);
+    border-radius: 0.5rem;
+    padding: 0.2rem;
+    transition: all 0.3s ease;
+}
+
+.prompt__input-wrapper:focus-within {
+    border-color: var(--accent-color);
+    background: var(--focus-color);
+}
+
+.prompt__form-input {
+    flex-grow: 1;
+    border: none;
+    resize: none;
+    font-size: 1.1rem;
+    color: var(--text-color);
+    padding: 0.3rem 0.5rem;
+    background: transparent;
+    outline: none;
+}
+
+.prompt__form-input::placeholder {
+    color: var(--placeholder-color);
+}
+
+.prompt__action-buttons {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding-right: 0.3rem;
+    position: relative;
+}
+
+.prompt__form-button {
+    background: none;
+    border: none;
+    color: var(--text-secondary-color);
+    font-size: 1.1rem;
+    cursor: pointer;
+    padding: 0.2rem;
+    transition: color 0.3s ease;
+}
+
+.prompt__form-button:hover {
+    color: var(--accent-color);
+}
+
+.prompt__disclaim {
+    text-align: center;
+    color: var(--placeholder-color);
+    font-size: 0.8rem;
+    margin-top: 1rem;
+    max-width: 900px;
+    margin-left: auto;
+    margin-right: auto;
+    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+}
+
+.chat-bar {
+    max-width: 900px;
+    margin: 2rem auto;
+    padding: 0 2rem;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    max-height: calc(100vh - 160px);
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+.chat-bar::-webkit-scrollbar {
+    display: none;
+}
+
+.chat-message {
+    margin-bottom: 1rem;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    background: rgba(26, 27, 30, 0.9);
+    color: var(--text-color);
+    word-wrap: break-word;
+}
+
+.light_mode .chat-message {
+    background: rgba(232, 226, 242, 0.9);
+}
+
+.chat-message.user {
+    background: rgba(122, 92, 250, 0.2);
+    border: 1px solid var(--accent-color);
+    border-radius: 0.5rem;
+}
+
+.chat-message.bot {
+    background: rgba(36, 37, 40, 0.9);
+}
+
+/* Bubble styles */
+.chat-message.user.bubble-rounded {
+    border-radius: 1rem;
+}
+
+.chat-message.user.bubble-sharp {
+    border-radius: 0;
+    border: 2px solid var(--accent-color);
+}
+
+.chat-message.user.bubble-starry {
+    border-radius: 0.5rem;
+    border: 1px dashed var(--accent-color);
+    background: rgba(122, 92, 250, 0.2) url('https://www.transparenttextures.com/patterns/stardust.png') repeat;
+    background-size: 100px 100px;
+}
+
+.processing-dots {
+    display: none;
+    position: absolute;
+    right: 60px;
+    color: var(--accent-color);
+    font-size: 1.2rem;
+}
+
+.processing-dots.active {
+    display: inline;
+}
+
+@keyframes blink {
+    0% { opacity: 1; }
+    50% { opacity: 0.3; }
+    100% { opacity: 1; }
+}
+
+.processing-dots span {
+    animation: blink 1s infinite;
+    animation-delay: calc(0.2s * var(--i));
+}