Напиши для меня главную страницу типа perplexity, где вводишь запрос и получаешь ответ от ии с указанием источника, процесса поиска по сайтам, постепенным как бы печатанием текста. Пока что с mock данными

README.md

@@ -1,10 +1,13 @@
 ---
-title: Mindmeld Explorer
-emoji: 📚
+title: MindMeld Explorer 🔍
 colorFrom: yellow
-colorTo: yellow
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,60 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background-color: rgba(0, 0, 0, 0.8);
+          backdrop-filter: blur(10px);
+        }
+        .footer-link:hover {
+          color: #ffffff;
+        }
+      </style>
+      <footer class="border-t border-gray-800 py-8 mt-12">
+        <div class="container mx-auto px-4">
+          <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+            <div>
+              <h3 class="text-lg font-semibold mb-4">MindMeld Explorer</h3>
+              <p class="text-gray-400">AI-powered search that understands your questions and provides reliable answers.</p>
+            </div>
+            <div>
+              <h4 class="font-medium mb-4">Product</h4>
+              <ul class="space-y-2">
+                <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">Features</a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">Pricing</a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">API</a></li>
+              </ul>
+            </div>
+            <div>
+              <h4 class="font-medium mb-4">Company</h4>
+              <ul class="space-y-2">
+                <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">About</a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">Blog</a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">Careers</a></li>
+              </ul>
+            </div>
+            <div>
+              <h4 class="font-medium mb-4">Connect</h4>
+              <div class="flex space-x-4">
+                <a href="#" class="text-gray-400 hover:text-white transition">
+                  <i data-feather="twitter"></i>
+                </a>
+                <a href="#" class="text-gray-400 hover:text-white transition">
+                  <i data-feather="linkedin"></i>
+                </a>
+                <a href="#" class="text-gray-400 hover:text-white transition">
+                  <i data-feather="github"></i>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
+            © 2023 MindMeld Explorer. All rights reserved.
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,44 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background-color: rgba(0, 0, 0, 0.8);
+          backdrop-filter: blur(10px);
+        }
+        .nav-link:hover {
+          color: #ffffff;
+        }
+        .nav-link:hover i {
+          stroke: #ffffff;
+        }
+      </style>
+      <nav class="border-b border-gray-800 py-4">
+        <div class="container mx-auto px-4 flex justify-between items-center">
+          <a href="/" class="flex items-center">
+            <div class="text-2xl font-bold bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">MindMeld</div>
+          </a>
+          <div class="flex items-center space-x-6">
+            <a href="#" class="nav-link text-gray-400 hover:text-white transition flex items-center">
+              <i data-feather="home" class="mr-1" width="18"></i>
+              Home
+            </a>
+            <a href="#" class="nav-link text-gray-400 hover:text-white transition flex items-center">
+              <i data-feather="bookmark" class="mr-1" width="18"></i>
+              Saved
+            </a>
+            <a href="#" class="nav-link text-gray-400 hover:text-white transition flex items-center">
+              <i data-feather="settings" class="mr-1" width="18"></i>
+              Settings
+            </a>
+            <button class="bg-white text-black px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-200 transition">
+              Upgrade
+            </button>
+          </div>
+        </div>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,68 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MindMeld Explorer - AI-Powered Search</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+</head>
+<body class="bg-black text-white min-h-screen flex flex-col">
+    <custom-navbar></custom-navbar>
+
+    <main class="flex-grow container mx-auto px-4 py-8 max-w-4xl">
+        <div class="text-center mb-12">
+            <h1 class="text-5xl font-bold mb-4 bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">MindMeld Explorer</h1>
+            <p class="text-xl text-gray-300">Ask anything. Get AI-powered answers with sources.</p>
+        </div>
+
+        <div class="relative mb-16">
+            <div class="flex items-center border-2 border-gray-700 rounded-full px-6 py-4 bg-gray-900 focus-within:border-gray-500 transition-all">
+                <input type="text" id="search-input" placeholder="Ask anything..." 
+                    class="flex-grow bg-transparent outline-none text-lg text-white placeholder-gray-500">
+                <button id="search-btn" class="ml-2 p-2 rounded-full bg-white text-black hover:bg-gray-200 transition">
+                    <i data-feather="search"></i>
+                </button>
+            </div>
+            <div class="absolute -bottom-8 left-0 right-0 text-center text-gray-500 text-sm">
+                Try "What's the capital of France?" or "Explain quantum computing"
+            </div>
+        </div>
+
+        <div id="search-results" class="space-y-8 hidden">
+            <!-- Results will be inserted here -->
+        </div>
+
+        <div id="example-queries" class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="p-6 border border-gray-800 rounded-xl hover:bg-gray-900 cursor-pointer transition">
+                <h3 class="text-lg font-medium mb-2">"Explain blockchain technology"</h3>
+                <p class="text-gray-400">Get a simple explanation with key concepts</p>
+            </div>
+            <div class="p-6 border border-gray-800 rounded-xl hover:bg-gray-900 cursor-pointer transition">
+                <h3 class="text-lg font-medium mb-2">"Latest SpaceX launch details"</h3>
+                <p class="text-gray-400">Find up-to-date information with sources</p>
+            </div>
+            <div class="p-6 border border-gray-800 rounded-xl hover:bg-gray-900 cursor-pointer transition">
+                <h3 class="text-lg font-medium mb-2">"How to make sourdough bread"</h3>
+                <p class="text-gray-400">Step-by-step guide with expert tips</p>
+            </div>
+            <div class="p-6 border border-gray-800 rounded-xl hover:bg-gray-900 cursor-pointer transition">
+                <h3 class="text-lg font-medium mb-2">"Best productivity techniques"</h3>
+                <p class="text-gray-400">Research-backed methods to boost efficiency</p>
+            </div>
+        </div>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,145 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const searchInput = document.getElementById('search-input');
+    const searchBtn = document.getElementById('search-btn');
+    const searchResults = document.getElementById('search-results');
+    const exampleQueries = document.getElementById('example-queries');
+    
+    // Mock data for demonstration
+    const mockResponses = {
+        "what's the capital of france": {
+            answer: "The capital of France is Paris. Paris is located in the northern part of France on the Seine River and has been an important city for over 2,000 years.",
+            sources: [
+                { name: "Wikipedia", url: "https://en.wikipedia.org/wiki/Paris" },
+                { name: "Britannica", url: "https://www.britannica.com/place/Paris" }
+            ],
+            process: [
+                "Searching for 'capital of France' across verified sources",
+                "Analyzing geographical data from multiple references",
+                "Cross-referencing historical records",
+                "Verifying with official government sources"
+            ]
+        },
+        "explain quantum computing": {
+            answer: "Quantum computing is an area of computing focused on developing computer technology based on the principles of quantum theory, which explains the behavior of energy and material on the atomic and subatomic levels. Unlike classical computers that use bits (0s and 1s), quantum computers use quantum bits or qubits which can exist in multiple states simultaneously (superposition) and be entangled with each other, enabling them to solve certain complex problems much faster than classical computers.",
+            sources: [
+                { name: "IBM Research", url: "https://research.ibm.com/quantum-computing" },
+                { name: "Nature Journal", url: "https://www.nature.com/articles/s41534-019-0187-2" }
+            ],
+            process: [
+                "Compiling definitions from leading research institutions",
+                "Analyzing recent scientific papers on quantum mechanics",
+                "Comparing explanations from multiple experts",
+                "Simplifying complex concepts for general understanding"
+            ]
+        }
+    };
+
+    searchBtn.addEventListener('click', performSearch);
+    searchInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') performSearch();
+    });
+
+    // Add click handlers to example queries
+    document.querySelectorAll('#example-queries > div').forEach(example => {
+        example.addEventListener('click', () => {
+            const query = example.querySelector('h3').textContent.replace(/"/g, '');
+            searchInput.value = query;
+            performSearch();
+        });
+    });
+
+    function performSearch() {
+        const query = searchInput.value.trim().toLowerCase();
+        if (!query) return;
+
+        exampleQueries.classList.add('hidden');
+        searchResults.classList.remove('hidden');
+        searchResults.innerHTML = '';
+
+        // Show loading state
+        const loadingHTML = `
+            <div class="p-6 rounded-xl bg-gray-900 border border-gray-800">
+                <div class="flex items-center mb-4">
+                    <div class="h-4 w-4 rounded-full bg-white mr-2 animate-pulse"></div>
+                    <div class="text-sm text-gray-400">Processing your query...</div>
+                </div>
+                <div class="space-y-2">
+                    ${mockResponses[query]?.process.map(step => `
+                        <div class="flex items-center">
+                            <div class="h-2 w-2 rounded-full bg-gray-500 mr-2"></div>
+                            <div class="search-process h-3 rounded-full" style="width: ${Math.random() * 50 + 30}%"></div>
+                        </div>
+                    `).join('')}
+                </div>
+            </div>
+        `;
+        searchResults.innerHTML = loadingHTML;
+
+        // Simulate API delay
+        setTimeout(() => {
+            showResults(query);
+        }, 2000);
+    }
+
+    function showResults(query) {
+        const response = mockResponses[query] || {
+            answer: "I couldn't find a specific answer to that question. Try rephrasing or asking something else.",
+            sources: [],
+            process: []
+        };
+
+        const resultHTML = `
+            <div class="p-6 rounded-xl bg-gray-900 border border-gray-800">
+                <div class="flex items-start mb-6">
+                    <div class="bg-white text-black rounded-full p-2 mr-4">
+                        <i data-feather="check-circle"></i>
+                    </div>
+                    <div class="flex-grow">
+                        <h2 class="text-xl font-semibold mb-2">Answer</h2>
+                        <div class="typing-effect text-gray-200">${response.answer}</div>
+                    </div>
+                </div>
+
+                ${response.sources.length > 0 ? `
+                <div class="mt-6">
+                    <h3 class="text-lg font-medium mb-3">Sources</h3>
+                    <div class="flex flex-wrap gap-2">
+                        ${response.sources.map(source => `
+                            <a href="${source.url}" target="_blank" class="source-badge px-3 py-1 bg-gray-800 rounded-full text-sm flex items-center">
+                                <i data-feather="external-link" class="mr-1" width="14"></i>
+                                ${source.name}
+                            </a>
+                        `).join('')}
+                    </div>
+                </div>
+                ` : ''}
+
+                ${response.process.length > 0 ? `
+                <div class="mt-6 pt-6 border-t border-gray-800">
+                    <h3 class="text-lg font-medium mb-3">Search Process</h3>
+                    <div class="space-y-3">
+                        ${response.process.map((step, i) => `
+                            <div class="flex items-start">
+                                <div class="text-gray-500 mr-3">${i + 1}.</div>
+                                <div class="text-gray-300">${step}</div>
+                            </div>
+                        `).join('')}
+                    </div>
+                </div>
+                ` : ''}
+            </div>
+
+            <div class="p-6 rounded-xl bg-gray-900 border border-gray-800">
+                <h3 class="text-lg font-medium mb-4">Related Questions</h3>
+                <div class="space-y-3">
+                    <div class="p-3 hover:bg-gray-800 rounded-lg cursor-pointer">What are some interesting facts about ${query.includes('france') ? 'Paris' : 'quantum computing'}?</div>
+                    <div class="p-3 hover:bg-gray-800 rounded-lg cursor-pointer">How does ${query.includes('france') ? 'Paris compare to other European capitals' : 'quantum computing differ from classical computing'}?</div>
+                    <div class="p-3 hover:bg-gray-800 rounded-lg cursor-pointer">What is the history of ${query.includes('france') ? 'Paris as the capital of France' : 'quantum computing development'}?</div>
+                </div>
+            </div>
+        `;
+
+        searchResults.innerHTML = resultHTML;
+        feather.replace();
+    }
+});

style.css

@@ -1,28 +1,38 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+@keyframes typing {
+    from { width: 0 }
+    to { width: 100% }
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+@keyframes blink-caret {
+    from, to { border-color: transparent }
+    50% { border-color: white }
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.typing-effect {
+    overflow: hidden;
+    white-space: nowrap;
+    border-right: 2px solid;
+    animation: 
+        typing 3.5s steps(40, end),
+        blink-caret .75s step-end infinite;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.source-badge {
+    transition: all 0.3s ease;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.source-badge:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
 }
+
+.search-process {
+    background: linear-gradient(90deg, #333333, #555555, #333333);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite linear;
+}
+
+@keyframes shimmer {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}