index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VISAR Agent 0.1</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#f04a29',
                        secondary: '#2F4F4F',
                        accent: '#d932bd',
                    },
                    fontFamily: {
                        sans: ['Space Grotesk', 'sans-serif'],
                    },
                    animation: {
                        'pulse-glow': 'pulse-glow 2s infinite',
                    },
                    keyframes: {
                        'pulse-glow': {
                            '0%, 100%': { 'box-shadow': '0 0 5px #f04a29' },
                            '50%': { 'box-shadow': '0 0 20px #f04a29' },
                        }
                    }
                }
            }
        }
    </script>
    <style>
        .glow-effect {
            transition: all 0.3s ease;
        }
        .glow-effect:hover {
            box-shadow: 0 0 15px #d932bd;
        }
        .neon-text {
            text-shadow: 0 0 5px #f04a29, 0 0 10px #f04a29;
        }
        .code-block {
            background-color: #1a2a2a;
            border-left: 3px solid #f04a29;
        }
        .language-selector {
            background-color: #2F4F4F;
            border: 1px solid #f04a29;
        }
        .language-selector:hover {
            background-color: #3a5f5f;
        }
        .loading-dots::after {
            content: '.';
            animation: dots 1.5s steps(5, end) infinite;
        }
        @keyframes dots {
            0%, 20% { content: '.'; }
            40% { content: '..'; }
            60% { content: '...'; }
            80%, 100% { content: ''; }
        }
    </style>
</head>
<body class="bg-secondary font-sans text-white min-h-screen flex flex-col">
    <div class="container mx-auto p-4 max-w-md">
        <!-- Header -->
        <header class="mb-6 text-center">
            <h1 class="text-2xl font-bold neon-text mb-2">VISAR Agent 0.1</h1>
            <p class="text-accent text-sm">Your AI coding assistant</p>
        </header>

        <!-- Main Content -->
        <main class="flex-1">
            <!-- API Key Input -->
            <div class="mb-4 bg-gray-800 p-3 rounded-lg">
                <label for="apiKey" class="block text-sm font-medium mb-1">Gemini API Key</label>
                <div class="flex">
                    <input type="password" id="apiKey" placeholder="Enter your API key" 
                           class="flex-1 bg-gray-700 border border-gray-600 rounded-l px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-accent">
                    <button id="saveKeyBtn" class="bg-primary hover:bg-opacity-90 px-3 py-2 rounded-r text-sm glow-effect">
                        <i class="fas fa-save"></i>
                    </button>
                </div>
                <p class="text-xs mt-1 text-gray-400">Or pass via URL: ?key=YOUR_API_KEY</p>
            </div>

            <!-- Language Selector -->
            <div class="mb-4">
                <label for="language" class="block text-sm font-medium mb-1">Programming Language</label>
                <select id="language" class="w-full language-selector rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-accent">
                    <option value="python">Python</option>
                    <option value="javascript">JavaScript</option>
                    <option value="java">Java</option>
                    <option value="csharp">C#</option>
                    <option value="cpp">C++</option>
                    <option value="php">PHP</option>
                    <option value="ruby">Ruby</option>
                    <option value="swift">Swift</option>
                    <option value="go">Go</option>
                    <option value="rust">Rust</option>
                </select>
            </div>

            <!-- Query Input -->
            <div class="mb-4">
                <label for="query" class="block text-sm font-medium mb-1">What do you need?</label>
                <textarea id="query" rows="3" placeholder="Describe the code you want to generate..." 
                          class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-accent"></textarea>
            </div>

            <!-- Generate Button -->
            <button id="generateBtn" class="w-full bg-accent hover:bg-opacity-90 py-2 px-4 rounded font-medium mb-4 glow-effect animate-pulse-glow">
                <i class="fas fa-bolt mr-2"></i> Generate Code
            </button>

            <!-- Result Area -->
            <div class="mb-4">
                <div class="flex justify-between items-center mb-1">
                    <label class="text-sm font-medium">Generated Code</label>
                    <button id="copyBtn" class="text-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded glow-effect" disabled>
                        <i class="fas fa-copy mr-1"></i> Copy
                    </button>
                </div>
                <div id="result" class="code-block p-3 rounded text-sm overflow-auto max-h-60">
                    <p class="text-gray-400">Your generated code will appear here...</p>
                </div>
                <div id="loading" class="hidden text-center py-4 text-accent">
                    <p>Generating<span class="loading-dots"></span></p>
                </div>
            </div>
        </main>

        <!-- Footer -->
        <footer class="text-center text-xs text-gray-400 mt-6">
            <p>Powered by Gemini AI</p>
            <p class="mt-1">VISAR Agent 0.1</p>
        </footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Check for API key in URL
            const urlParams = new URLSearchParams(window.location.search);
            const apiKeyFromUrl = urlParams.get('key');
            
            if (apiKeyFromUrl) {
                document.getElementById('apiKey').value = apiKeyFromUrl;
                localStorage.setItem('geminiApiKey', apiKeyFromUrl);
            } else {
                // Load saved API key from localStorage
                const savedKey = localStorage.getItem('geminiApiKey');
                if (savedKey) {
                    document.getElementById('apiKey').value = savedKey;
                }
            }
            
            // Save API key button
            document.getElementById('saveKeyBtn').addEventListener('click', function() {
                const apiKey = document.getElementById('apiKey').value;
                if (apiKey) {
                    localStorage.setItem('geminiApiKey', apiKey);
                    alert('API key saved!');
                } else {
                    alert('Please enter an API key');
                }
            });
            
            // Generate button
            document.getElementById('generateBtn').addEventListener('click', function() {
                const apiKey = document.getElementById('apiKey').value;
                const language = document.getElementById('language').value;
                const query = document.getElementById('query').value;
                
                if (!apiKey) {
                    alert('Please enter your Gemini API key');
                    return;
                }
                
                if (!query) {
                    alert('Please describe what code you want to generate');
                    return;
                }
                
                generateCode(apiKey, language, query);
            });
            
            // Copy button
            document.getElementById('copyBtn').addEventListener('click', function() {
                const codeElement = document.getElementById('result').querySelector('code');
                if (codeElement) {
                    navigator.clipboard.writeText(codeElement.textContent)
                        .then(() => {
                            const copyBtn = document.getElementById('copyBtn');
                            copyBtn.innerHTML = '<i class="fas fa-check mr-1"></i> Copied!';
                            setTimeout(() => {
                                copyBtn.innerHTML = '<i class="fas fa-copy mr-1"></i> Copy';
                            }, 2000);
                        })
                        .catch(err => {
                            console.error('Failed to copy: ', err);
                        });
                }
            });
            
            // Function to generate code (mock implementation - in a real app, you'd call the Gemini API)
            function generateCode(apiKey, language, query) {
                const resultDiv = document.getElementById('result');
                const loadingDiv = document.getElementById('loading');
                const copyBtn = document.getElementById('copyBtn');
                
                // Show loading state
                resultDiv.classList.add('hidden');
                loadingDiv.classList.remove('hidden');
                copyBtn.disabled = true;
                
                // Simulate API call delay
                setTimeout(() => {
                    // Hide loading state
                    loadingDiv.classList.add('hidden');
                    resultDiv.classList.remove('hidden');
                    
                    // Mock response - in a real app, this would be the actual API response
                    const mockResponses = {
                        python: `# ${query}\ndef solution():\n    # Your code here\n    return "Hello, World!"`,
                        javascript: `// ${query}\nfunction solution() {\n  // Your code here\n  return "Hello, World!";\n}`,
                        java: `// ${query}\npublic class Solution {\n    public static void main(String[] args) {\n        // Your code here\n        System.out.println("Hello, World!");\n    }\n}`,
                        csharp: `// ${query}\nusing System;\n\nclass Program {\n    static void Main() {\n        // Your code here\n        Console.WriteLine("Hello, World!");\n    }\n}`,
                        cpp: `// ${query}\n#include <iostream>\n\nint main() {\n    // Your code here\n    std::cout << "Hello, World!";\n    return 0;\n}`,
                        php: `<?php\n// ${query}\nfunction solution() {\n    // Your code here\n    return "Hello, World!";\n}\n?>`,
                        ruby: `# ${query}\ndef solution\n  # Your code here\n  "Hello, World!"\nend`,
                        swift: `// ${query\nfunc solution() -> String {\n    // Your code here\n    return "Hello, World!"\n}`,
                        go: `// ${query}\npackage main\n\nimport "fmt"\n\nfunc main() {\n    // Your code here\n    fmt.Println("Hello, World!")\n}`,
                        rust: `// ${query}\nfn main() {\n    // Your code here\n    println!("Hello, World!");\n}`
                    };
                    
                    const code = mockResponses[language] || mockResponses['python'];
                    resultDiv.innerHTML = `<pre><code class="language-${language}">${code}</code></pre>`;
                    copyBtn.disabled = false;
                    
                    // Add syntax highlighting (in a real app, you might use a library like Prism.js)
                    resultDiv.querySelector('code').style.color = '#f8f8f2';
                }, 1500);
            }
            
            // In a real implementation, you would have a function to call the actual Gemini API
            // async function callGeminiAPI(apiKey, prompt) {
            //     const response = await fetch('https://api.gemini.ai/v1/generate', {
            //         method: 'POST',
            //         headers: {
            //             'Content-Type': 'application/json',
            //             'Authorization': `Bearer ${apiKey}`
            //         },
            //         body: JSON.stringify({
            //             prompt: prompt,
            //             max_tokens: 1000,
            //             temperature: 0.7
            //         })
            //     });
            //     
            //     if (!response.ok) {
            //         throw new Error('API request failed');
            //     }
            //     
            //     return await response.json();
            // }
        });
    </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=RootDeveloperDS/visar-agent-0-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>