Spaces:

Ultronprime
/

ibgapp

Running

File size: 15,205 Bytes

1bc959a

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ContractIntellect AI | Ibn Battuta Gate</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <script src="https://unpkg.com/phosphor-icons"></script>
  <style>
    :root {
      --background: 0 0% 98%;
      --foreground: 20 14.3% 4.1%;
      --primary: 217 91% 60%;
      --primary-foreground: 210 40% 98%;
      --secondary: 270 80% 60%;
      --border: 214.3 31.8% 91.4%;
    }
    
    .dark {
      --background: 222.2 84% 5%;
      --foreground: 210 40% 98%;
      --primary: 217 91% 70%;
      --primary-foreground: 222.2 47% 11%;
      --secondary: 270 80% 70%;
      --border: 217.2 33% 17%;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      background-color: hsl(var(--background));
      color: hsl(var(--foreground));
      transition: background-color 0.3s ease;
    }
    
    .gradient-bg {
      background: linear-gradient(135deg, hsl(var(--primary) / 0.15) 0%, hsl(var(--secondary) / 0.15) 100%);
    }
    
    .shine-on-hover:hover {
      position: relative;
      overflow: hidden;
    }
    
    .shine-on-hover:hover::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -60%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.13) 0%,
        rgba(255, 255, 255, 0.13) 77%,
        rgba(255, 255, 255, 0.5) 92%,
        rgba(255, 255, 255, 0.0) 100%
      );
      transform: rotate(30deg);
      transition: left 0.7s ease;
      animation: shine 0.7s forwards;
    }
    
    @keyframes shine {
      100% {
        left: 100%;
      }
    }
    
    .chat-message {
      max-width: 80%;
      border-radius: 1rem;
      padding: 1rem;
      margin-bottom: 1rem;
      position: relative;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
    
    .user-message {
      background-color: hsl(var(--primary) / 0.1);
      border: 1px solid hsl(var(--primary) / 0.2);
      border-bottom-right-radius: 0.25rem;
    }
    
    .bot-message {
      background-color: hsl(var(--background));
      border: 1px solid hsl(var(--border));
      border-bottom-left-radius: 0.25rem;
    }
    
    .typing-indicator {
      display: flex;
      padding: 1rem;
    }
    
    .typing-dot {
      width: 8px;
      height: 8px;
      background-color: hsl(var(--muted-foreground));
      border-radius: 50%;
      margin-right: 4px;
      animation: typing 1s infinite ease-in-out;
    }
    
    .typing-dot:nth-child(1) { animation-delay: 0s; }
    .typing-dot:nth-child(2) { animation-delay: 0.2s; }
    .typing-dot:nth-child(3) { animation-delay: 0.4s; }
    
    @keyframes typing {
      0%, 100% {
        transform: translateY(0);
        opacity: 0.6;
      }
      50% {
        transform: translateY(-5px);
        opacity: 1;
      }
    }
  </style>
</head>
<body class="min-h-screen dark:bg-gray-900 dark:text-gray-100">
  <div class="flex flex-col min-h-screen">
    <!-- Header -->
    <header class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
      <div class="container mx-auto px-4 py-4 flex items-center justify-between">
        <div class="flex items-center space-x-3">
          <div class="p-2 rounded-lg gradient-bg">
            <i class="ph ph-file-text text-xl text-primary-500 dark:text-primary-400"></i>
          </div>
          <div>
            <h1 class="text-xl font-bold">ContractIntellect AI</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400">Ibn Battuta Gate Project</p>
          </div>
        </div>
        <button id="themeToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
          <i class="ph ph-sun-dim dark:ph-sun dark:hidden text-xl"></i>
          <i class="ph ph-moon hidden dark:block text-xl"></i>
        </button>
      </div>
    </header>

    <!-- Main Content -->
    <main class="flex-1 container mx-auto px-4 py-6">
      <div class="max-w-5xl mx-auto">
        <!-- Welcome Card -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6 shine-on-hover">
          <div class="flex items-start space-x-4">
            <div class="bg-primary-50 dark:bg-primary-900/20 p-3 rounded-lg flex-shrink-0">
              <i class="ph ph-buildings text-xl text-primary-600 dark:text-primary-400"></i>
            </div>
            <div>
              <h2 class="text-xl font-semibold mb-2">Contract Intelligence Assistant</h2>
              <p class="text-gray-600 dark:text-gray-300">
                Query specific contractual details about the Ibn Battuta Gate project instantly.
                This AI specializes in analyzing contracts, AMCs, LPOs and related documents.
              </p>
            </div>
          </div>
        </div>

        <!-- Chat Interface -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
          <!-- Chat Header -->
          <div class="border-b border-gray-200 dark:border-gray-700 px-4 py-3 flex items-center space-x-3">
            <div class="bg-primary-100 dark:bg-primary-900/30 p-2 rounded-lg">
              <i class="ph ph-chat-centered-text text-primary-600 dark:text-primary-400"></i>
            </div>
            <h3 class="font-semibold">Contract Query Assistant</h3>
          </div>
          
          <!-- Chat Messages -->
          <div id="chatContainer" class="h-96 overflow-y-auto p-4 space-y-3">
            <div class="flex justify-start">
              <div class="chat-message bot-message">
                <div class="flex items-start space-x-3">
                  <div class="bg-primary-100 dark:bg-primary-900/20 p-2 rounded-full flex-shrink-0">
                    <i class="ph ph-bot text-primary-600 dark:text-primary-400 text-sm"></i>
                  </div>
                  <div>
                    <p class="text-sm">Hello, I'm your ContractIntellect AI for the Ibn Battuta Gate project. Ask me anything about contracts, AMCs, LPOs, or other project documents.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- Chat Input -->
          <div class="border-t border-gray-200 dark:border-gray-700 p-4 bg-gray-50 dark:bg-gray-700/30">
            <div class="flex items-center space-x-2">
              <input 
                type="text" 
                id="chatInput"
                placeholder="Ask about contractual details..." 
                class="flex-1 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-600"
              >
              <button id="sendButton" class="p-2 rounded-lg bg-primary-600 hover:bg-primary-700 text-white transition-colors">
                <i class="ph ph-paper-plane-right"></i>
              </button>
            </div>
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
              All responses are based exclusively on project contractual documents.
            </p>
          </div>
        </div>

        <!-- Features Grid -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
            <div class="flex items-center space-x-3 mb-3">
              <div class="bg-primary-100 dark:bg-primary-900/20 p-2 rounded-lg">
                <i class="ph ph-file-text text-primary-600 dark:text-primary-400"></i>
              </div>
              <h4 class="font-medium">Contract Clauses</h4>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300">
              Query specific contract terms, obligations, or requirements instantly.
            </p>
          </div>
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
            <div class="flex items-center space-x-3 mb-3">
              <div class="bg-primary-100 dark:bg-primary-900/20 p-2 rounded-lg">
                <i class="ph ph-calendar-check text-primary-600 dark:text-primary-400"></i>
              </div>
              <h4 class="font-medium">Schedules & Deadlines</h4>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300">
              Get precise details about timelines, milestones and delivery dates.
            </p>
          </div>
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
            <div class="flex items-center space-x-3 mb-3">
              <div class="bg-primary-100 dark:bg-primary-900/20 p-2 rounded-lg">
                <i class="ph ph-handshake text-primary-600 dark:text-primary-400"></i>
              </div>
              <h4 class="font-medium">Payment Terms</h4>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300">
              Clarify payment schedules, amounts, and conditions.
            </p>
          </div>
        </div>
      </div>
    </main>

    <!-- Footer -->
    <footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 py-4">
      <div class="container mx-auto px-4 text-center text-sm text-gray-500 dark:text-gray-400">
        <p>© 2024 ContractIntellect AI | Ibn Battuta Gate Project</p>
      </div>
    </footer>
  </div>

  <script>
    // Theme toggle
    document.addEventListener('DOMContentLoaded', () => {
      const themeToggle = document.getElementById('themeToggle');
      const html = document.documentElement;
      
      // Check for saved theme preference or use preferred color scheme
      const savedTheme = localStorage.getItem('theme');
      const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      
      if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
        html.classList.add('dark');
      }
      
      themeToggle.addEventListener('click', () => {
        html.classList.toggle('dark');
        localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
      });

      // Chat functionality
      const chatContainer = document.getElementById('chatContainer');
      const chatInput = document.getElementById('chatInput');
      const sendButton = document.getElementById('sendButton');
      
      function addMessage(content, isBot = false) {
        const messageDiv = document.createElement('div');
        messageDiv.className = `flex justify-${isBot ? 'start' : 'end'}`;
        
        const messageContent = document.createElement('div');
        messageContent.className = `chat-message ${isBot ? 'bot-message' : 'user-message'}`;
        
        messageContent.innerHTML = `
          <div class="flex items-start space-x-3">
            <div class="${isBot ? 'bg-primary-100 dark:bg-primary-900/20' : 'bg-gray-100 dark:bg-gray-700'} p-2 rounded-full flex-shrink-0">
              <i class="ph ph-${isBot ? 'bot' : 'user'} ${isBot ? 'text-primary-600 dark:text-primary-400' : 'text-gray-600 dark:text-gray-400'} text-sm"></i>
            </div>
            <div>
              <p class="text-sm">${content}</p>
            </div>
          </div>
        `;
        
        messageDiv.appendChild(messageContent);
        chatContainer.appendChild(messageDiv);
        chatContainer.scrollTop = chatContainer.scrollHeight;
      }
      
      function showTypingIndicator() {
        const typingDiv = document.createElement('div');
        typingDiv.className = 'flex justify-start';
        typingDiv.id = 'typingIndicator';
        
        const typingContent = document.createElement('div');
        typingContent.className = 'typing-indicator';
        
        typingContent.innerHTML = `
          <div class="flex items-center space-x-2">
            <div class="bg-primary-100 dark:bg-primary-900/20 p-2 rounded-full">
              <i class="ph ph-bot text-primary-600 dark:text-primary-400 text-sm"></i>
            </div>
            <div class="flex">
              <div class="typing-dot"></div>
              <div class="typing-dot"></div>
              <div class="typing-dot"></div>
            </div>
          </div>
        `;
        
        typingDiv.appendChild(typingContent);
        chatContainer.appendChild(typingDiv);
        chatContainer.scrollTop = chatContainer.scrollHeight;
      }
      
      function hideTypingIndicator() {
        const indicator = document.getElementById('typingIndicator');
        if (indicator) {
          indicator.remove();
        }
      }
      
      function handleSendMessage() {
        const message = chatInput.value.trim();
        if (!message) return;
        
        addMessage(message, false);
        chatInput.value = '';
        
        // Mock API response
        showTypingIndicator();
        
        setTimeout(() => {
          hideTypingIndicator();
          const mockResponses = [
            "According to Clause 15.1(b) of the Main Construction Contract (Doc ID: MCC_IbnBattutaGate_Final_2023), the main contractor is required to maintain Public Liability insurance with a minimum coverage of $5M per occurrence.",
            "The payment schedule for Phase 1 is outlined in Schedule B of the Master Agreement (Doc ID: MA_IBG_2023), specifying 30% payable upon completion of foundation work.",
            "Section 8.3 of the AMC (Doc ID: AMC_IBG_2024) states that equipment warranties are valid for 24 months from the date of commissioning."
          ];
          const randomResponse = mockResponses[Math.floor(Math.random() * mockResponses.length)];
          addMessage(randomResponse, true);
        }, 1500);
      }
      
      sendButton.addEventListener('click', handleSendMessage);
      chatInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
          handleSendMessage();
        }
      });
      
      // Initialize empty chat
      addMessage("For example, you could ask: 'What are the insurance requirements for the main contractor?'", true);
    });
  </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 <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Ultronprime/ibgapp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>