Upload 3 files

exocore-web/public/templates/chatheadai.html

@@ -0,0 +1,774 @@
+<style>
+  #gemini-fab {
+    position: fixed;
+    bottom: 25px;
+    right: 25px;
+    width: 60px;
+    height: 60px;
+    background-color: #4285f4;
+    border-radius: 50%;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    z-index: 1000;
+    transition:
+      transform 0.2s ease-in-out,
+      box-shadow 0.2s ease-in-out,
+      width 0.2s ease,
+      height 0.2s ease;
+  }
+
+  #gemini-fab:hover {
+    transform: scale(1.1);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+  }
+
+  #gemini-fab img {
+    width: 38px;
+    height: 38px;
+    transition:
+      width 0.2s ease,
+      height 0.2s ease;
+  }
+
+  #gemini-chat-container {
+    position: fixed;
+    background-color: #ffffff;
+    border: 1px solid #dadce0;
+    border-radius: 12px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+    display: none;
+    flex-direction: column;
+    overflow: hidden;
+    z-index: 999;
+    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
+    transition:
+      width 0.3s ease,
+      height 0.3s ease,
+      bottom 0.3s ease,
+      right 0.3s ease,
+      left 0.3s ease;
+    width: 400px;
+    max-height: 600px;
+    bottom: 95px;
+    right: 25px;
+  }
+
+  #gemini-chat-container.visible {
+    display: flex;
+    animation: slideUpFadeIn 0.3s ease-out;
+  }
+
+  @keyframes slideUpFadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .gemini-chat-header {
+    background-color: #f1f3f4;
+    padding: 12px 18px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #e0e0e0;
+    flex-shrink: 0;
+  }
+  .gemini-chat-header h3 {
+    margin: 0;
+    font-size: 1.05rem;
+    color: #202124;
+    font-weight: 500;
+  }
+  .gemini-chat-header .close-chat-btn {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    font-weight: 300;
+    line-height: 1;
+    cursor: pointer;
+    color: #5f6368;
+    padding: 0;
+  }
+  .gemini-chat-header .close-chat-btn:hover {
+    color: #202124;
+  }
+
+  #gemini-chat-log {
+    flex-grow: 1;
+    padding: 15px 18px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    background-color: #f8f9fa;
+  }
+
+  .chat-message {
+    padding: 10px 15px;
+    padding-bottom: 35px; /* Space for the bottom copy button */
+    border-radius: 18px;
+    max-width: 85%;
+    line-height: 1.45;
+    font-size: 0.92rem;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    position: relative;
+  }
+  .chat-message span {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+
+  .chat-message pre {
+    background: #1e1e1e;
+    padding: 0.8em 1em;
+    overflow: auto;
+    border-radius: 5px;
+    color: #ccc;
+    margin: 0.5em 0;
+    font-size: 0.85em;
+    line-height: 1.5;
+    position: relative;
+    white-space: pre;
+    word-wrap: normal;
+  }
+  .chat-message pre code,
+  .chat-message pre code.hljs {
+    font-family: 'monospace';
+    display: block;
+    padding: 0;
+  }
+
+  .chat-message.user {
+    background-color: #d1eaff;
+    color: #004085;
+    align-self: flex-end;
+    border-bottom-right-radius: 6px;
+  }
+  .chat-message.ai {
+    background-color: #e9ecef;
+    color: #383d41;
+    align-self: flex-start;
+    border-bottom-left-radius: 6px;
+  }
+
+  .copy-code-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background-color: rgba(80, 80, 80, 0.7);
+    color: white;
+    border: none;
+    padding: 4px 8px;
+    font-size: 0.75em;
+    border-radius: 4px;
+    cursor: pointer;
+    font-family: sans-serif;
+    z-index: 1;
+    opacity: 0.7;
+    visibility: visible;
+    transition:
+      opacity 0.2s,
+      background-color 0.2s;
+  }
+
+  .copy-msg-btn {
+    position: absolute;
+    bottom: 6px;
+    right: 8px;
+    background-color: rgba(100, 100, 100, 0.6); /* Slightly different base */
+    color: white;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    font-family: sans-serif;
+    z-index: 1;
+    opacity: 0.6;
+    visibility: visible;
+    transition:
+      opacity 0.2s,
+      background-color 0.2s;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    padding: 0;
+  }
+  .copy-msg-btn svg {
+    width: 14px;
+    height: 14px;
+    fill: currentColor;
+  }
+
+  .copy-code-btn:hover {
+    background-color: rgba(100, 100, 100, 0.9);
+    opacity: 1;
+  }
+  .copy-msg-btn:hover {
+    background-color: rgba(80, 80, 80, 0.9); /* Darker on hover */
+    opacity: 1;
+  }
+
+  .copy-code-btn.copied,
+  .copy-msg-btn.copied {
+    background-color: #28a745;
+    opacity: 1;
+  }
+
+  #gemini-typing-indicator {
+    display: flex;
+    align-items: center;
+    padding: 8px 18px 4px 18px;
+    background-color: #f8f9fa;
+    height: 20px;
+    flex-shrink: 0;
+  }
+  #gemini-typing-indicator span {
+    height: 8px;
+    width: 8px;
+    background-color: #909090;
+    border-radius: 50%;
+    display: inline-block;
+    margin: 0 2px;
+    animation: geminiDotsBounce 1.3s infinite ease-in-out;
+  }
+  #gemini-typing-indicator span:nth-child(2) {
+    animation-delay: -1.1s;
+  }
+  #gemini-typing-indicator span:nth-child(3) {
+    animation-delay: -0.9s;
+  }
+  @keyframes geminiDotsBounce {
+    0%,
+    60%,
+    100% {
+      transform: scale(0.4);
+    }
+    30% {
+      transform: scale(1);
+    }
+  }
+
+  #gemini-chat-input-form {
+    display: flex;
+    padding: 12px 15px;
+    border-top: 1px solid #e0e0e0;
+    background-color: #ffffff;
+    align-items: center;
+    flex-shrink: 0;
+  }
+  #gemini-chat-input-form input[type='text'] {
+    flex-grow: 1;
+    padding: 12px 18px;
+    border: 1px solid #dfe1e5;
+    border-radius: 24px;
+    margin-right: 10px;
+    font-size: 0.95rem;
+    outline: none;
+    transition:
+      border-color 0.2s,
+      box-shadow 0.2s;
+  }
+  #gemini-chat-input-form input[type='text']:focus {
+    border-color: #4285f4;
+    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
+  }
+  #gemini-chat-input-form input[type='text']:disabled {
+    background-color: #e9ecef;
+    cursor: not-allowed;
+  }
+  #gemini-chat-input-form button {
+    background-color: #4285f4;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    cursor: pointer;
+    font-size: 1.3rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+      background-color 0.2s ease,
+      width 0.2s ease,
+      height 0.2s ease;
+    flex-shrink: 0;
+  }
+  #gemini-chat-input-form button:hover {
+    background-color: #3367d6;
+  }
+  #gemini-chat-input-form button:disabled {
+    background-color: #a1c6ff;
+    cursor: not-allowed;
+  }
+  #gemini-chat-input-form button svg {
+    width: 22px;
+    height: 22px;
+    fill: white;
+    transition:
+      width 0.2s ease,
+      height 0.2s ease;
+  }
+
+  @media (max-width: 991.98px) {
+    #gemini-chat-container {
+      width: 380px;
+      max-height: 550px;
+    }
+  }
+  @media (max-width: 767.98px) {
+    #gemini-fab {
+      width: 55px;
+      height: 55px;
+      bottom: 20px;
+      right: 20px;
+    }
+    #gemini-fab img {
+      width: 32px;
+      height: 32px;
+    }
+    #gemini-chat-container {
+      width: 360px;
+      max-height: 75vh;
+      bottom: 85px;
+      right: 20px;
+    }
+  }
+  @media (max-width: 575.98px) {
+    #gemini-fab {
+      width: 50px;
+      height: 50px;
+      bottom: 15px;
+      right: 15px;
+    }
+    #gemini-fab img {
+      width: 28px;
+      height: 28px;
+    }
+    #gemini-chat-container {
+      left: 10px;
+      right: 10px;
+      width: auto;
+      bottom: 75px;
+      max-height: calc(100vh - 95px);
+    }
+    .chat-message pre {
+      font-size: 0.8em;
+      padding: 0.6em 0.8em;
+    }
+    .copy-code-btn {
+      font-size: 0.7em;
+      padding: 3px 6px;
+      top: 5px;
+      right: 5px;
+    }
+    .copy-msg-btn {
+      width: 24px;
+      height: 24px;
+      bottom: 5px;
+      right: 5px;
+    }
+    .copy-msg-btn svg {
+      width: 12px;
+      height: 12px;
+    }
+    .gemini-chat-header {
+      padding: 10px 12px;
+    }
+    .gemini-chat-header h3 {
+      font-size: 0.98rem;
+    }
+    .gemini-chat-header .close-chat-btn {
+      font-size: 1.3rem;
+    }
+    #gemini-chat-log {
+      padding: 10px 12px;
+      gap: 8px;
+    }
+    .chat-message {
+      font-size: 0.88rem;
+      padding: 8px 12px;
+      padding-bottom: 30px;
+      max-width: calc(100% - 10px);
+      border-radius: 15px;
+    }
+    .chat-message.user {
+      border-bottom-right-radius: 4px;
+    }
+    .chat-message.ai {
+      border-bottom-left-radius: 4px;
+    }
+    #gemini-chat-input-form {
+      padding: 8px 10px;
+    }
+    #gemini-chat-input-form input[type='text'] {
+      padding: 10px 15px;
+      font-size: 0.9rem;
+      margin-right: 8px;
+    }
+    #gemini-chat-input-form button {
+      width: 40px;
+      height: 40px;
+    }
+    #gemini-chat-input-form button svg {
+      width: 18px;
+      height: 18px;
+    }
+    #gemini-typing-indicator {
+      padding: 6px 12px 2px 12px;
+    }
+  }
+</style>
+
+<div id="gemini-fab" title="Chat with Gemini">
+  <img
+    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYnHRL-tMaj6h2CYK5Yy4ixuXfuohG8g8J4g&s"
+    alt="Gemini AI Logo"
+  />
+</div>
+
+<div id="gemini-chat-container">
+  <div class="gemini-chat-header">
+    <h3>Gemini Assistant</h3>
+    <button class="close-chat-btn" aria-label="Close chat">&times;</button>
+  </div>
+  <div id="gemini-chat-log">
+    <div class="chat-message ai">Hello! How can I assist you today?</div>
+  </div>
+  <div id="gemini-typing-indicator" class="gemini-typing-indicator" style="display: none">
+    <span></span><span></span><span></span>
+  </div>
+  <form id="gemini-chat-input-form">
+    <input type="text" id="gemini-user-input" placeholder="Type a message..." autocomplete="off" />
+    <button type="submit" title="Send message">
+      <svg viewBox="0 0 24 24">
+        <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path>
+      </svg>
+    </button>
+  </form>
+</div>
+
+<script>
+  (function () {
+    const fab = document.getElementById('gemini-fab');
+    const chatContainer = document.getElementById('gemini-chat-container');
+    const chatLog = document.getElementById('gemini-chat-log');
+    const inputForm = document.getElementById('gemini-chat-input-form');
+    const userInput = document.getElementById('gemini-user-input');
+    const sendButton = inputForm.querySelector('button[type="submit"]');
+    const closeChatBtn = chatContainer.querySelector('.close-chat-btn');
+    const typingIndicator = document.getElementById('gemini-typing-indicator');
+    const TYPEWRITER_SPEED = 0.3;
+    let currentConversationId = null;
+
+    const SVG_COPY_ICON = `
+      <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 24 24" width="1em" fill="currentColor">
+        <path d="M0 0h24v24H0z" fill="none"/>
+        <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
+      </svg>`;
+    const SVG_CHECK_ICON = `
+      <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 24 24" width="1em" fill="currentColor">
+        <path d="M0 0h24v24H0z" fill="none"/>
+        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+      </svg>`;
+
+    fab.addEventListener('click', () => {
+      chatContainer.classList.toggle('visible');
+      if (chatContainer.classList.contains('visible')) {
+        userInput.focus();
+      }
+    });
+
+    closeChatBtn.addEventListener('click', () => {
+      chatContainer.classList.remove('visible');
+    });
+
+    inputForm.addEventListener('submit', async function (event) {
+      event.preventDefault();
+      const messageText = userInput.value.trim();
+      if (messageText === '' || userInput.disabled) return;
+
+      userInput.disabled = true;
+      if (sendButton) sendButton.disabled = true;
+
+      await addMessageToLog(messageText, 'user');
+      userInput.value = '';
+      showTypingIndicator(true);
+      try {
+        let apiUrl;
+        const isFirstMessageInSession = currentConversationId === null;
+
+        if (isFirstMessageInSession) {
+          apiUrl = `https://api-improve-production.up.railway.app/gemini/chat?q=${encodeURIComponent(messageText)}`;
+        } else {
+          apiUrl = `https://api-improve-production.up.railway.app/gemini/chat?q=${encodeURIComponent(messageText)}&id=${currentConversationId}`;
+        }
+
+        const response = await fetch(apiUrl);
+        const data = await response.json();
+
+        if (!response.ok) {
+          const errorMessage = data?.error?.message || data?.message || `Error: ${response.status}`;
+          await addMessageToLog(`Sorry, I couldn't get a response. ${errorMessage}`, 'ai');
+          return;
+        }
+
+        const reply = data.reply;
+
+        if (isFirstMessageInSession && data.id) {
+          currentConversationId = data.id;
+        } else if (!isFirstMessageInSession && data.id && data.id !== currentConversationId) {
+          currentConversationId = data.id;
+        }
+
+        if (reply !== undefined && reply !== null) {
+          await addMessageToLog(reply, 'ai');
+        } else {
+          await addMessageToLog('Sorry, I received an empty or malformed reply.', 'ai');
+        }
+      } catch (error) {
+        console.error('API/Network Error:', error);
+        await addMessageToLog(
+          'Oops! Something went wrong. Please check connection and try again.',
+          'ai'
+        );
+      } finally {
+        showTypingIndicator(false);
+        userInput.disabled = false;
+        if (sendButton) sendButton.disabled = false;
+        userInput.focus();
+      }
+    });
+
+    function showTypingIndicator(show) {
+      typingIndicator.style.display = show ? 'flex' : 'none';
+    }
+
+    function escapeHTML(str) {
+      const p = document.createElement('p');
+      p.textContent = str;
+      return p.innerHTML;
+    }
+
+    function isScrolledToBottom(element) {
+      const threshold = 10;
+      return element.scrollHeight - element.scrollTop - element.clientHeight < threshold;
+    }
+
+    async function typeSegment(
+      targetElement,
+      textToType,
+      isCode,
+      codeElementForHighlight,
+      postTypeCallback
+    ) {
+      return new Promise((resolve) => {
+        let i = 0;
+        targetElement.textContent = '';
+        function typeChar() {
+          if (i < textToType.length) {
+            targetElement.textContent += textToType.charAt(i);
+            i++;
+            if (isScrolledToBottom(chatLog)) {
+              chatLog.scrollTop = chatLog.scrollHeight;
+            }
+            setTimeout(typeChar, TYPEWRITER_SPEED);
+          } else {
+            if (isCode && codeElementForHighlight && typeof hljs !== 'undefined') {
+              try {
+                hljs.highlightElement(codeElementForHighlight);
+              } catch (e) {
+                console.error('Highlight.js error:', e);
+              }
+            }
+            if (postTypeCallback) postTypeCallback();
+            resolve();
+          }
+        }
+        if (textToType.length === 0) {
+          if (postTypeCallback) postTypeCallback();
+          resolve();
+          return;
+        }
+        typeChar();
+      });
+    }
+
+    async function addMessageToLog(text, sender) {
+      const messageDiv = document.createElement('div');
+      messageDiv.classList.add('chat-message', sender);
+      if (sender === 'ai') {
+        messageDiv.style.opacity = 0;
+      }
+
+      const segmentsToProcess = [];
+      const codeBlockRegex = /```(\w*)\n([\s\S]*?)```/g;
+      let lastIndex = 0;
+      let match;
+
+      while ((match = codeBlockRegex.exec(text)) !== null) {
+        const textBefore = text.substring(lastIndex, match.index);
+        if (textBefore.trim()) {
+          segmentsToProcess.push({ type: 'text', content: textBefore });
+        }
+        const language = match[1].trim().toLowerCase();
+        const codeContent = match[2];
+        segmentsToProcess.push({ type: 'code', content: codeContent, lang: language });
+        lastIndex = codeBlockRegex.lastIndex;
+      }
+      const textAfter = text.substring(lastIndex);
+      if (textAfter.trim()) {
+        segmentsToProcess.push({ type: 'text', content: textAfter });
+      }
+
+      if (segmentsToProcess.length === 0 && text.trim()) {
+        segmentsToProcess.push({ type: 'text', content: text });
+      }
+
+      chatLog.appendChild(messageDiv);
+
+      if (sender === 'ai' && segmentsToProcess.length > 0) {
+        messageDiv.style.opacity = 1;
+        for (const segment of segmentsToProcess) {
+          const contentToProcess = segment.content.trim();
+          if (segment.type === 'text') {
+            const span = document.createElement('span');
+            messageDiv.appendChild(span);
+            await typeSegment(span, contentToProcess, false, null, () => {
+              span.innerHTML = escapeHTML(span.textContent);
+            });
+          } else if (segment.type === 'code') {
+            const preElement = document.createElement('pre');
+            const codeElement = document.createElement('code');
+            if (segment.lang) {
+              codeElement.className = `language-${segment.lang}`;
+            }
+            preElement.appendChild(codeElement);
+            const copyCodeBtn = document.createElement('button');
+            copyCodeBtn.className = 'copy-code-btn';
+            copyCodeBtn.textContent = 'Copy';
+            preElement.appendChild(copyCodeBtn);
+            copyCodeBtn.addEventListener('click', () => {
+              navigator.clipboard
+                .writeText(codeElement.textContent)
+                .then(() => {
+                  copyCodeBtn.textContent = 'Copied!';
+                  copyCodeBtn.classList.add('copied');
+                  setTimeout(() => {
+                    copyCodeBtn.textContent = 'Copy';
+                    copyCodeBtn.classList.remove('copied');
+                  }, 2000);
+                })
+                .catch((err) => {
+                  console.error('Copy code failed', err);
+                  copyCodeBtn.textContent = 'Error';
+                  setTimeout(() => {
+                    copyCodeBtn.textContent = 'Copy';
+                  }, 2000);
+                });
+            });
+            messageDiv.appendChild(preElement);
+            await typeSegment(codeElement, contentToProcess, true, codeElement, null);
+          }
+        }
+      } else {
+        segmentsToProcess.forEach((segment) => {
+          const contentToRender = segment.content.trim();
+          if (segment.type === 'text') {
+            const span = document.createElement('span');
+            span.innerHTML = escapeHTML(contentToRender);
+            messageDiv.appendChild(span);
+          } else if (segment.type === 'code') {
+            const preElement = document.createElement('pre');
+            const codeElement = document.createElement('code');
+            if (segment.lang) {
+              codeElement.className = `language-${segment.lang}`;
+            }
+            codeElement.textContent = contentToRender;
+            preElement.appendChild(codeElement);
+            const copyCodeBtn = document.createElement('button');
+            copyCodeBtn.className = 'copy-code-btn';
+            copyCodeBtn.textContent = 'Copy';
+            preElement.appendChild(copyCodeBtn);
+            copyCodeBtn.addEventListener('click', () => {
+              navigator.clipboard
+                .writeText(codeElement.textContent)
+                .then(() => {
+                  copyCodeBtn.textContent = 'Copied!';
+                  copyCodeBtn.classList.add('copied');
+                  setTimeout(() => {
+                    copyCodeBtn.textContent = 'Copy';
+                    copyCodeBtn.classList.remove('copied');
+                  }, 2000);
+                })
+                .catch((err) => {
+                  console.error('Copy code failed', err);
+                  copyCodeBtn.textContent = 'Error';
+                  setTimeout(() => {
+                    copyCodeBtn.textContent = 'Copy';
+                  }, 2000);
+                });
+            });
+            messageDiv.appendChild(preElement);
+            if (typeof hljs !== 'undefined') {
+              try {
+                hljs.highlightElement(codeElement);
+              } catch (e) {
+                console.error(e);
+              }
+            }
+          }
+        });
+        if (sender === 'ai') messageDiv.style.opacity = 1;
+      }
+
+      let canAddCopyMsgButton = true;
+      if (
+        messageDiv.childNodes.length === 1 &&
+        messageDiv.firstChild &&
+        messageDiv.firstChild.nodeName === 'PRE'
+      ) {
+        canAddCopyMsgButton = false;
+      }
+      if (text.trim() && canAddCopyMsgButton) {
+        const copyMsgButton = document.createElement('button');
+        copyMsgButton.className = 'copy-msg-btn';
+        copyMsgButton.title = 'Copy message';
+        copyMsgButton.innerHTML = SVG_COPY_ICON;
+        messageDiv.appendChild(copyMsgButton);
+        copyMsgButton.addEventListener('click', (e) => {
+          e.stopPropagation();
+          navigator.clipboard
+            .writeText(text)
+            .then(() => {
+              copyMsgButton.innerHTML = SVG_CHECK_ICON;
+              copyMsgButton.classList.add('copied');
+              setTimeout(() => {
+                copyMsgButton.innerHTML = SVG_COPY_ICON;
+                copyMsgButton.classList.remove('copied');
+              }, 2000);
+            })
+            .catch((err) => {
+              console.error('Copy msg failed', err);
+              copyMsgButton.innerHTML = SVG_COPY_ICON;
+              alert('Failed to copy message.');
+            });
+        });
+      }
+
+      if (isScrolledToBottom(chatLog) || sender === 'user') {
+        chatLog.scrollTop = chatLog.scrollHeight;
+      }
+    }
+  })();
+</script>

exocore-web/public/templates/footer.html

@@ -0,0 +1,62 @@
+<style>
+  @keyframes drawLine {
+    0% {
+      width: 0%;
+    }
+    100% {
+      width: 100%;
+    }
+  }
+
+  @keyframes fadeInText {
+    0% {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .exocore-footer {
+    background-color: #1a1a1a;
+    color: #9e9e9e;
+    padding: 1.5rem 1rem;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    border-top: 1px solid #282828;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  }
+
+  .exocore-footer::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0%;
+    height: 2px;
+    background-color: #00bcd4;
+    animation: drawLine 1s cubic-bezier(0.23, 1, 0.32, 1) 0.5s forwards;
+    box-shadow: 0 0 8px rgba(0, 188, 212, 0.5);
+  }
+
+  .footer-content {
+    font-size: 0.85rem;
+    opacity: 0;
+    animation: fadeInText 0.8s ease-out 1s forwards;
+  }
+
+  .footer-content .exocore-name {
+    color: #00bcd4;
+    font-weight: 500;
+  }
+</style>
+
+<footer class="exocore-footer">
+  <div class="footer-content">
+    <small>&copy; 2025 <span class="exocore-name">Exocore</span>. All rights reserved.</small>
+  </div>
+</footer>

exocore-web/public/templates/header.html

@@ -0,0 +1,373 @@
+<style>
+  @keyframes sweepIn {
+    0% {
+      clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
+    }
+    100% {
+      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+    }
+  }
+
+  @keyframes sweepOut {
+    0% {
+      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+    }
+    100% {
+      clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
+    }
+  }
+
+  @keyframes linkFadeIn {
+    from {
+      opacity: 0;
+      transform: translateX(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #121212;
+    margin: 0;
+    color: #e0e0e0;
+  }
+
+  header {
+    background: #1a1a1a;
+    color: #e0e0e0;
+    padding: 0.8rem 1.25rem;
+    display: flex;
+    align-items: center;
+    z-index: 1001;
+    position: relative;
+    border-bottom: 1px solid #282828;
+  }
+
+  .menu-btn-wrapper {
+    background: transparent;
+    border: none;
+    color: #00bcd4;
+    cursor: pointer;
+    padding: 0.5rem;
+    margin-right: 1.2rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    z-index: 1003;
+    position: relative;
+    transition: transform 0.3s ease;
+  }
+  .menu-btn-wrapper:hover {
+    transform: rotate(15deg);
+  }
+
+  .menu-btn-bar {
+    display: block;
+    width: 24px;
+    height: 2.5px;
+    background-color: #00bcd4;
+    border-radius: 1px;
+    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+    margin: 2.5px 0;
+  }
+
+  .menu-btn-wrapper.open .menu-btn-bar:nth-child(1) {
+    transform: rotate(45deg) translate(4.5px, 4.5px) scaleX(1.2);
+  }
+  .menu-btn-wrapper.open .menu-btn-bar:nth-child(2) {
+    opacity: 0;
+    transform: scaleX(0);
+  }
+  .menu-btn-wrapper.open .menu-btn-bar:nth-child(3) {
+    transform: rotate(-45deg) translate(4.5px, -4.5px) scaleX(1.2);
+  }
+
+  nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 270px;
+    height: 100vh;
+    background-color: #1e1e1e;
+    z-index: 1002;
+    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.3);
+    display: flex;
+    flex-direction: column;
+    clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
+    visibility: hidden;
+  }
+
+  nav.open {
+    animation: sweepIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+    visibility: visible;
+    transition: visibility 0s;
+  }
+  nav.closing {
+    animation: sweepOut 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
+    visibility: visible;
+  }
+
+  .sidebar-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.7);
+    z-index: 1000;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.4s ease;
+  }
+
+  .sidebar-backdrop.open {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .nav-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.8rem 1rem 0.8rem 1.5rem;
+    background-color: #161616;
+    border-bottom: 1px solid #2a2a2a;
+  }
+
+  .nav-header-title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: #00bcd4;
+    letter-spacing: 0.5px;
+  }
+
+  .close-btn-nav {
+    background: transparent;
+    border: none;
+    color: #888;
+    font-size: 1.6rem;
+    font-weight: bold;
+    cursor: pointer;
+    padding: 0.5rem;
+    transition:
+      color 0.2s ease-in-out,
+      transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  }
+
+  .close-btn-nav:hover {
+    color: #00bcd4;
+    transform: rotate(180deg) scale(1.1);
+  }
+
+  .nav-links {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 0.75rem 0;
+    overflow-y: auto;
+  }
+
+  .nav-links a {
+    color: #b0b0b0;
+    text-decoration: none;
+    padding: 0.95rem 1.75rem;
+    display: flex;
+    align-items: center;
+    position: relative;
+    font-size: 0.95rem;
+    letter-spacing: 0.3px;
+    transition:
+      color 0.25s ease,
+      background-color 0.25s ease;
+    opacity: 0;
+  }
+
+  nav.open .nav-links a {
+    animation: linkFadeIn 0.3s ease-out forwards;
+  }
+  nav.open .nav-links a:nth-child(1) {
+    animation-delay: 0.15s;
+  }
+  nav.open .nav-links a:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+  nav.open .nav-links a:nth-child(3) {
+    animation-delay: 0.25s;
+  }
+  nav.open .nav-links a:nth-child(4) {
+    animation-delay: 0.3s;
+  }
+  nav.open .nav-links a:nth-child(5) {
+    animation-delay: 0.35s;
+  }
+  nav.open .nav-links a:nth-child(6) {
+    animation-delay: 0.4s;
+  }
+
+
+  .nav-links a::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 0px;
+    background-color: #00bcd4;
+    transition: width 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  }
+
+  .nav-links a:hover {
+    color: #ffffff;
+    background-color: rgba(0, 188, 212, 0.1);
+  }
+  .nav-links a:hover::before,
+  .nav-links a.active::before {
+    width: 4px;
+  }
+
+  .nav-links a.active {
+    color: #ffffff;
+    font-weight: 500;
+    background-color: rgba(0, 188, 212, 0.15);
+  }
+  .nav-links a.active::before {
+    width: 4px;
+  }
+
+  h1.header-title {
+    margin: 0;
+    flex-grow: 1;
+    font-weight: 700;
+    font-size: 1.5rem;
+    color: #f0f0f0;
+    letter-spacing: 0.5px;
+    text-shadow: 0 0 5px rgba(0, 188, 212, 0.3);
+  }
+</style>
+
+<header>
+  <button class="menu-btn-wrapper" id="menuBtnWrapper" aria-label="Open menu" aria-expanded="false">
+    <span class="menu-btn-bar"></span>
+    <span class="menu-btn-bar"></span>
+    <span class="menu-btn-bar"></span>
+  </button>
+  <h1 class="header-title">Exocore Dashboard</h1>
+</header>
+
+<div class="sidebar-backdrop" id="sidebarBackdrop"></div>
+
+<nav id="sideNav">
+  <div class="nav-header">
+    <span class="nav-header-title">EXOCORE</span>
+    <button class="close-btn-nav" id="closeBtnNav" aria-label="Close menu">×</button>
+  </div>
+  <div class="nav-links">
+    <a href="/private/server/exocore/web/public/dashboard">Dashboard</a>
+    <a href="/private/server/exocore/web/public/profile">Profile</a>
+    <a href="/private/server/exocore/web/public/manager">File Manager</a>
+    <a href="/private/server/exocore/web/public/console">Console</a>
+    <a href="/private/server/exocore/web/public/shell">Shell</a>
+    <a href="#" id="logoutLink">Logout</a>
+  </div>
+</nav>
+
+<script>
+  const menuBtnWrapper = document.getElementById('menuBtnWrapper');
+  const sideNav = document.getElementById('sideNav');
+  const closeBtnNav = document.getElementById('closeBtnNav');
+  const backdrop = document.getElementById('sidebarBackdrop');
+  const navLinks = document.querySelectorAll('.nav-links a');
+  const logoutLink = document.getElementById('logoutLink');
+  let isNavAnimating = false;
+
+  function openSidebar() {
+    if (isNavAnimating || sideNav.classList.contains('open')) return;
+    isNavAnimating = true;
+
+    sideNav.classList.remove('closing');
+    sideNav.classList.add('open');
+    backdrop.classList.add('open');
+    menuBtnWrapper.classList.add('open');
+    menuBtnWrapper.setAttribute('aria-expanded', 'true');
+
+    sideNav.addEventListener(
+      'animationend',
+      () => {
+        isNavAnimating = false;
+      },
+      { once: true }
+    );
+  }
+
+  function closeSidebar() {
+    if (isNavAnimating || !sideNav.classList.contains('open')) return;
+    isNavAnimating = true;
+
+    sideNav.classList.remove('open');
+    sideNav.classList.add('closing');
+    backdrop.classList.remove('open');
+    menuBtnWrapper.classList.remove('open');
+    menuBtnWrapper.setAttribute('aria-expanded', 'false');
+
+    sideNav.addEventListener(
+      'animationend',
+      () => {
+        sideNav.classList.remove('closing');
+        isNavAnimating = false;
+      },
+      { once: true }
+    );
+  }
+
+  function toggleSidebar() {
+    if (sideNav.classList.contains('open')) {
+      closeSidebar();
+    } else {
+      openSidebar();
+    }
+  }
+
+  menuBtnWrapper.addEventListener('click', toggleSidebar);
+  closeBtnNav.addEventListener('click', closeSidebar);
+  backdrop.addEventListener('click', closeSidebar);
+
+  const currentPath = window.location.pathname;
+  const currentPathSpan = document.getElementById('currentPathSpan');
+  if (currentPathSpan) {
+    currentPathSpan.textContent = currentPath;
+  }
+
+  navLinks.forEach((link) => {
+    if (link.id !== 'logoutLink' && link.getAttribute('href') === currentPath) {
+      link.classList.add('active');
+    }
+  });
+
+  if (logoutLink) {
+    logoutLink.addEventListener('click', async function(event) {
+      event.preventDefault(); 
+
+      try {
+        await fetch('/private/server/exocore/web/logout', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        });
+      } catch (error) {
+        console.error('Logout fetch error:', error);
+      } finally {
+        localStorage.removeItem('exocore-token');
+        localStorage.removeItem('exocore-cookies');
+        window.location.href = '/private/server/exocore/web/public/login';
+        
+      }
+    });
+  }
+</script>