Spaces:
Running
Running
| <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> |