| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>PrivFingaa - Enhanced Interface</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"> |
| <style> |
| .window { |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| transition: all 0.3s ease; |
| } |
| .window-header { |
| cursor: move; |
| } |
| .window.minimized { |
| height: 40px; |
| overflow: hidden; |
| } |
| .window.minimized .window-body { |
| display: none; |
| } |
| .draggable { |
| position: absolute; |
| z-index: 1000; |
| } |
| .resizable { |
| resize: both; |
| overflow: auto; |
| } |
| .input-line { |
| transition: background-color 0.2s; |
| } |
| .input-line:hover { |
| background-color: rgba(59, 130, 246, 0.1); |
| } |
| .tab-active { |
| border-bottom: 2px solid #3b82f6; |
| color: #3b82f6; |
| } |
| .json-viewer { |
| font-family: monospace; |
| white-space: pre; |
| } |
| .status-indicator { |
| width: 10px; |
| height: 10px; |
| border-radius: 50%; |
| display: inline-block; |
| margin-right: 5px; |
| } |
| .status-connected { |
| background-color: #10B981; |
| } |
| .status-disconnected { |
| background-color: #EF4444; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 font-sans p-4"> |
| <div class="container mx-auto"> |
| <header class="mb-6"> |
| <h1 class="text-3xl font-bold text-gray-800 flex items-center"> |
| <i class="fas fa-lock mr-3 text-blue-500"></i> |
| PrivFingaa <span class="text-sm ml-2 bg-blue-100 text-blue-800 px-2 py-1 rounded">Enhanced</span> |
| </h1> |
| <div class="flex items-center mt-2"> |
| <span id="connection-status" class="status-indicator status-connected"></span> |
| <span id="connection-text" class="text-sm text-gray-600">Connected to PrivFingaa API</span> |
| <button id="refresh-btn" class="ml-4 text-blue-500 hover:text-blue-700"> |
| <i class="fas fa-sync-alt"></i> Refresh |
| </button> |
| </div> |
| </header> |
|
|
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-4"> |
| |
| <div id="main-window" class="window draggable resizable bg-white rounded-lg overflow-hidden" style="width: 600px; height: 500px; left: 20px; top: 100px;"> |
| <div class="window-header bg-blue-600 text-white px-4 py-2 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fas fa-database mr-2"></i> |
| <span>PrivFingaa Data Manager</span> |
| </div> |
| <div class="window-controls"> |
| <button class="minimize-btn px-2 hover:bg-blue-700 rounded"> |
| <i class="fas fa-minus"></i> |
| </button> |
| <button class="close-btn px-2 hover:bg-blue-700 rounded ml-1"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| </div> |
| <div class="window-body p-4 h-full overflow-auto"> |
| <div class="tabs flex border-b mb-4"> |
| <button class="tab-btn py-2 px-4 font-medium tab-active" data-tab="data-tab">Data Records</button> |
| <button class="tab-btn py-2 px-4 font-medium text-gray-600" data-tab="api-tab">API Integration</button> |
| <button class="tab-btn py-2 px-4 font-medium text-gray-600" data-tab="settings-tab">Settings</button> |
| </div> |
| |
| <div id="data-tab" class="tab-content"> |
| <div class="mb-4 flex justify-between items-center"> |
| <h3 class="text-lg font-semibold">PrivFingaa Data Records</h3> |
| <div class="flex space-x-2"> |
| <button class="import-btn bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded text-sm flex items-center"> |
| <i class="fas fa-file-import mr-1"></i> Import |
| </button> |
| <button class="export-btn bg-purple-500 hover:bg-purple-600 text-white px-3 py-1 rounded text-sm flex items-center"> |
| <i class="fas fa-file-export mr-1"></i> Export |
| </button> |
| <button class="add-line-btn bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-sm flex items-center"> |
| <i class="fas fa-plus mr-1"></i> Add Record |
| </button> |
| </div> |
| </div> |
| |
| <div class="data-lines space-y-2"> |
| |
| </div> |
| </div> |
| |
| <div id="api-tab" class="tab-content hidden"> |
| <h3 class="text-lg font-semibold mb-4">PrivFingaa API Integration</h3> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">API Endpoint</label> |
| <input type="text" id="api-endpoint" class="w-full p-2 border rounded" value="https://api.privfingaa.com/v1/data" placeholder="Enter API endpoint"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">API Key</label> |
| <div class="flex"> |
| <input type="password" id="api-key" class="w-full p-2 border rounded-l" placeholder="Enter your API key"> |
| <button id="toggle-key" class="bg-gray-200 px-3 rounded-r border border-l-0"> |
| <i class="fas fa-eye"></i> |
| </button> |
| </div> |
| </div> |
| <div class="grid grid-cols-2 gap-4"> |
| <button id="test-connection" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded flex items-center justify-center"> |
| <i class="fas fa-plug mr-2"></i> Test Connection |
| </button> |
| <button id="sync-data" class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded flex items-center justify-center"> |
| <i class="fas fa-sync-alt mr-2"></i> Sync Data |
| </button> |
| </div> |
| <div id="api-response" class="bg-gray-50 p-3 rounded text-sm font-mono h-32 overflow-auto hidden"> |
| <div class="text-gray-500">API response will appear here...</div> |
| </div> |
| </div> |
| </div> |
| |
| <div id="settings-tab" class="tab-content hidden"> |
| <h3 class="text-lg font-semibold mb-4">PrivFingaa Settings</h3> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Data Storage</label> |
| <select id="storage-type" class="w-full p-2 border rounded"> |
| <option value="local">Local Storage</option> |
| <option value="indexeddb">IndexedDB</option> |
| <option value="api">PrivFingaa Cloud</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Auto-save Interval (minutes)</label> |
| <input type="number" id="autosave-interval" class="w-full p-2 border rounded" value="5" min="1" max="60"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Data Encryption</label> |
| <div class="flex items-center"> |
| <input type="checkbox" id="enable-encryption" class="mr-2" checked> |
| <span>Enable AES-256 encryption</span> |
| </div> |
| </div> |
| <div id="encryption-key-container" class="hidden"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Encryption Key</label> |
| <input type="password" id="encryption-key" class="w-full p-2 border rounded" placeholder="Enter encryption key"> |
| </div> |
| <button id="save-settings" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded w-full"> |
| Save Settings |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="tools-window" class="window draggable bg-white rounded-lg overflow-hidden" style="width: 350px; height: 300px; left: 650px; top: 100px;"> |
| <div class="window-header bg-green-600 text-white px-4 py-2 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fas fa-tools mr-2"></i> |
| <span>PrivFingaa Tools</span> |
| </div> |
| <div class="window-controls"> |
| <button class="minimize-btn px-2 hover:bg-green-700 rounded"> |
| <i class="fas fa-minus"></i> |
| </button> |
| <button class="close-btn px-2 hover:bg-green-700 rounded ml-1"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| </div> |
| <div class="window-body p-4"> |
| <div class="space-y-3"> |
| <button id="validate-data" class="w-full bg-blue-100 hover:bg-blue-200 text-blue-800 py-2 px-4 rounded flex items-center justify-between"> |
| <span>Validate Data</span> |
| <i class="fas fa-check-circle"></i> |
| </button> |
| <button id="export-json" class="w-full bg-purple-100 hover:bg-purple-200 text-purple-800 py-2 px-4 rounded flex items-center justify-between"> |
| <span>Export as JSON</span> |
| <i class="fas fa-file-code"></i> |
| </button> |
| <button id="export-csv" class="w-full bg-green-100 hover:bg-green-200 text-green-800 py-2 px-4 rounded flex items-center justify-between"> |
| <span>Export as CSV</span> |
| <i class="fas fa-file-csv"></i> |
| </button> |
| <button id="clear-all" class="w-full bg-red-100 hover:bg-red-200 text-red-800 py-2 px-4 rounded flex items-center justify-between"> |
| <span>Clear All Data</span> |
| <i class="fas fa-trash-alt"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="preview-window" class="window draggable bg-white rounded-lg overflow-hidden" style="width: 350px; height: 300px; left: 650px; top: 420px;"> |
| <div class="window-header bg-purple-600 text-white px-4 py-2 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fas fa-eye mr-2"></i> |
| <span>PrivFingaa Preview</span> |
| </div> |
| <div class="window-controls"> |
| <button class="minimize-btn px-2 hover:bg-purple-700 rounded"> |
| <i class="fas fa-minus"></i> |
| </button> |
| <button class="close-btn px-2 hover:bg-purple-700 rounded ml-1"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| </div> |
| <div class="window-body p-4 overflow-auto"> |
| <div class="tabs flex border-b mb-2"> |
| <button class="preview-tab-btn py-1 px-3 text-sm font-medium tab-active" data-preview="table">Table View</button> |
| <button class="preview-tab-btn py-1 px-3 text-sm font-medium text-gray-600" data-preview="json">JSON View</button> |
| </div> |
| <div id="table-preview" class="preview-content"> |
| <p class="text-gray-500 text-sm">No data to preview. Add some records in the main window.</p> |
| </div> |
| <div id="json-preview" class="preview-content json-viewer hidden"> |
| <p class="text-gray-500 text-sm">No data to preview. Add some records in the main window.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const windows = document.querySelectorAll('.window'); |
| windows.forEach(window => { |
| const header = window.querySelector('.window-header'); |
| let isDragging = false; |
| let offsetX, offsetY; |
| |
| header.addEventListener('mousedown', (e) => { |
| isDragging = true; |
| offsetX = e.clientX - window.getBoundingClientRect().left; |
| offsetY = e.clientY - window.getBoundingClientRect().top; |
| window.style.zIndex = 1000; |
| }); |
| |
| document.addEventListener('mousemove', (e) => { |
| if (!isDragging) return; |
| window.style.left = (e.clientX - offsetX) + 'px'; |
| window.style.top = (e.clientY - offsetY) + 'px'; |
| }); |
| |
| document.addEventListener('mouseup', () => { |
| isDragging = false; |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.minimize-btn').forEach(btn => { |
| btn.addEventListener('click', function() { |
| const window = this.closest('.window'); |
| window.classList.toggle('minimized'); |
| const icon = this.querySelector('i'); |
| if (window.classList.contains('minimized')) { |
| icon.classList.replace('fa-minus', 'fa-plus'); |
| } else { |
| icon.classList.replace('fa-plus', 'fa-minus'); |
| } |
| }); |
| }); |
| |
| document.querySelectorAll('.close-btn').forEach(btn => { |
| btn.addEventListener('click', function() { |
| const window = this.closest('.window'); |
| window.style.display = 'none'; |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.tab-btn').forEach(tab => { |
| tab.addEventListener('click', function() { |
| |
| document.querySelectorAll('.tab-btn').forEach(t => { |
| t.classList.remove('tab-active'); |
| t.classList.add('text-gray-600'); |
| }); |
| |
| |
| this.classList.add('tab-active'); |
| this.classList.remove('text-gray-600'); |
| |
| |
| document.querySelectorAll('.tab-content').forEach(content => { |
| content.classList.add('hidden'); |
| }); |
| |
| |
| const tabId = this.getAttribute('data-tab'); |
| document.getElementById(tabId).classList.remove('hidden'); |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.preview-tab-btn').forEach(tab => { |
| tab.addEventListener('click', function() { |
| |
| document.querySelectorAll('.preview-tab-btn').forEach(t => { |
| t.classList.remove('tab-active'); |
| t.classList.add('text-gray-600'); |
| }); |
| |
| |
| this.classList.add('tab-active'); |
| this.classList.remove('text-gray-600'); |
| |
| |
| document.querySelectorAll('.preview-content').forEach(content => { |
| content.classList.add('hidden'); |
| }); |
| |
| |
| const previewType = this.getAttribute('data-preview'); |
| document.getElementById(`${previewType}-preview`).classList.remove('hidden'); |
| }); |
| }); |
| |
| |
| const addLineBtn = document.querySelector('.add-line-btn'); |
| const dataLinesContainer = document.querySelector('.data-lines'); |
| let lineCounter = 1; |
| |
| addLineBtn.addEventListener('click', function() { |
| const lineId = `line-${lineCounter++}`; |
| const lineHtml = ` |
| <div class="input-line bg-white border rounded p-3 flex items-center" id="${lineId}"> |
| <div class="flex-grow grid grid-cols-3 gap-2"> |
| <input type="text" class="p-2 border rounded focus:ring-2 focus:ring-blue-300 focus:border-blue-500" placeholder="ID" data-field="id"> |
| <input type="text" class="p-2 border rounded focus:ring-2 focus:ring-blue-300 focus:border-blue-500" placeholder="Name" data-field="name"> |
| <input type="text" class="p-2 border rounded focus:ring-2 focus:ring-blue-300 focus:border-blue-500" placeholder="Value" data-field="value"> |
| </div> |
| <button class="delete-line-btn ml-3 text-red-500 hover:text-red-700 p-2" data-line="${lineId}"> |
| <i class="fas fa-trash-alt"></i> |
| </button> |
| </div> |
| `; |
| dataLinesContainer.insertAdjacentHTML('beforeend', lineHtml); |
| |
| |
| updatePreview(); |
| }); |
| |
| |
| dataLinesContainer.addEventListener('click', function(e) { |
| if (e.target.closest('.delete-line-btn')) { |
| const btn = e.target.closest('.delete-line-btn'); |
| const lineId = btn.getAttribute('data-line'); |
| document.getElementById(lineId).remove(); |
| |
| |
| updatePreview(); |
| } |
| }); |
| |
| |
| function updatePreview() { |
| const tablePreview = document.getElementById('table-preview'); |
| const jsonPreview = document.getElementById('json-preview'); |
| const lines = document.querySelectorAll('.input-line'); |
| |
| if (lines.length === 0) { |
| tablePreview.innerHTML = '<p class="text-gray-500 text-sm">No data to preview. Add some records in the main window.</p>'; |
| jsonPreview.innerHTML = '<p class="text-gray-500 text-sm">No data to preview. Add some records in the main window.</p>'; |
| return; |
| } |
| |
| |
| let tableHtml = ` |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200 text-sm"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th> |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th> |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| `; |
| |
| |
| let jsonData = []; |
| |
| lines.forEach(line => { |
| const inputs = line.querySelectorAll('input'); |
| const id = inputs[0].value || 'empty'; |
| const name = inputs[1].value || 'empty'; |
| const value = inputs[2].value || 'empty'; |
| |
| |
| tableHtml += ` |
| <tr> |
| <td class="px-4 py-2 whitespace-nowrap">${id}</td> |
| <td class="px-4 py-2 whitespace-nowrap">${name}</td> |
| <td class="px-4 py-2 whitespace-nowrap">${value}</td> |
| </tr> |
| `; |
| |
| |
| jsonData.push({ |
| id: id, |
| name: name, |
| value: value |
| }); |
| }); |
| |
| tableHtml += ` |
| </tbody> |
| </table> |
| </div> |
| `; |
| |
| tablePreview.innerHTML = tableHtml; |
| jsonPreview.textContent = JSON.stringify(jsonData, null, 2); |
| } |
| |
| |
| dataLinesContainer.addEventListener('input', function(e) { |
| if (e.target.tagName === 'INPUT') { |
| updatePreview(); |
| } |
| }); |
| |
| |
| document.getElementById('toggle-key').addEventListener('click', function() { |
| const keyInput = document.getElementById('api-key'); |
| const icon = this.querySelector('i'); |
| if (keyInput.type === 'password') { |
| keyInput.type = 'text'; |
| icon.classList.replace('fa-eye', 'fa-eye-slash'); |
| } else { |
| keyInput.type = 'password'; |
| icon.classList.replace('fa-eye-slash', 'fa-eye'); |
| } |
| }); |
| |
| |
| document.getElementById('test-connection').addEventListener('click', function() { |
| const endpoint = document.getElementById('api-endpoint').value; |
| const apiKey = document.getElementById('api-key').value; |
| const responseContainer = document.getElementById('api-response'); |
| |
| responseContainer.classList.remove('hidden'); |
| responseContainer.innerHTML = '<div class="text-blue-500">Testing connection to PrivFingaa API...</div>'; |
| |
| |
| setTimeout(() => { |
| if (endpoint && apiKey) { |
| responseContainer.innerHTML = ` |
| <div class="text-green-500">✓ Successfully connected to PrivFingaa API</div> |
| <div class="text-gray-500 mt-2">Endpoint: ${endpoint}</div> |
| <div class="text-gray-500">API Key: ${'*'.repeat(apiKey.length)}</div> |
| `; |
| } else { |
| responseContainer.innerHTML = '<div class="text-red-500">✗ Connection failed. Please check your endpoint and API key.</div>'; |
| } |
| }, 1500); |
| }); |
| |
| |
| document.getElementById('sync-data').addEventListener('click', function() { |
| const responseContainer = document.getElementById('api-response'); |
| responseContainer.classList.remove('hidden'); |
| responseContainer.innerHTML = '<div class="text-blue-500">Syncing data with PrivFingaa API...</div>'; |
| |
| |
| setTimeout(() => { |
| responseContainer.innerHTML = ` |
| <div class="text-green-500">✓ Data sync completed successfully</div> |
| <div class="text-gray-500 mt-2">Last sync: ${new Date().toLocaleString()}</div> |
| `; |
| }, 2000); |
| }); |
| |
| |
| document.getElementById('export-json').addEventListener('click', function() { |
| const lines = document.querySelectorAll('.input-line'); |
| if (lines.length === 0) { |
| alert('No data to export'); |
| return; |
| } |
| |
| let jsonData = []; |
| lines.forEach(line => { |
| const inputs = line.querySelectorAll('input'); |
| jsonData.push({ |
| id: inputs[0].value || '', |
| name: inputs[1].value || '', |
| value: inputs[2].value || '' |
| }); |
| }); |
| |
| const blob = new Blob([JSON.stringify(jsonData, null, 2)], { type: 'application/json' }); |
| const url = URL.createObjectURL(blob); |
| const a = document.createElement('a'); |
| a.href = url; |
| a.download = 'privfingaa-data.json'; |
| document.body.appendChild(a); |
| a.click(); |
| document.body.removeChild(a); |
| URL.revokeObjectURL(url); |
| }); |
| |
| |
| document.getElementById('export-csv').addEventListener('click', function() { |
| const lines = document.querySelectorAll('.input-line'); |
| if (lines.length === 0) { |
| alert('No data to export'); |
| return; |
| } |
| |
| let csvContent = "ID,Name,Value\n"; |
| lines.forEach(line => { |
| const inputs = line.querySelectorAll('input'); |
| csvContent += `"${inputs[0].value || ''}","${inputs[1].value || ''}","${inputs[2].value || ''}"\n`; |
| }); |
| |
| const blob = new Blob([csvContent], { type: 'text/csv' }); |
| const url = URL.createObjectURL(blob); |
| const a = document.createElement('a'); |
| a.href = url; |
| a.download = 'privfingaa-data.csv'; |
| document.body.appendChild(a); |
| a.click(); |
| document.body.removeChild(a); |
| URL.revokeObjectURL(url); |
| }); |
| |
| |
| document.getElementById('clear-all').addEventListener('click', function() { |
| if (confirm('Are you sure you want to clear all data?')) { |
| document.querySelector('.data-lines').innerHTML = ''; |
| updatePreview(); |
| } |
| }); |
| |
| |
| document.getElementById('validate-data').addEventListener('click', function() { |
| const lines = document.querySelectorAll('.input-line'); |
| let valid = true; |
| |
| lines.forEach(line => { |
| const inputs = line.querySelectorAll('input'); |
| if (!inputs[0].value || !inputs[1].value || !inputs[2].value) { |
| line.style.backgroundColor = 'rgba(239, 68, 68, 0.1)'; |
| valid = false; |
| } else { |
| line.style.backgroundColor = 'rgba(16, 185, 129, 0.1)'; |
| } |
| }); |
| |
| if (lines.length === 0) { |
| alert('No data to validate'); |
| } else if (valid) { |
| alert('All records are valid!'); |
| } else { |
| alert('Some records are incomplete. Invalid records are highlighted in red.'); |
| } |
| }); |
| |
| |
| document.getElementById('enable-encryption').addEventListener('change', function() { |
| const container = document.getElementById('encryption-key-container'); |
| if (this.checked) { |
| container.classList.remove('hidden'); |
| } else { |
| container.classList.add('hidden'); |
| } |
| }); |
| |
| |
| document.getElementById('save-settings').addEventListener('click', function() { |
| alert('Settings saved successfully!'); |
| }); |
| |
| |
| document.getElementById('refresh-btn').addEventListener('click', function() { |
| const statusIndicator = document.getElementById('connection-status'); |
| const statusText = document.getElementById('connection-text'); |
| |
| statusText.textContent = 'Refreshing connection...'; |
| |
| |
| setTimeout(() => { |
| statusIndicator.className = 'status-indicator status-connected'; |
| statusText.textContent = 'Connected to PrivFingaa API'; |
| }, 1000); |
| }); |
| |
| |
| setTimeout(() => { |
| addLineBtn.click(); |
| addLineBtn.click(); |
| addLineBtn.click(); |
| |
| |
| const inputs = document.querySelectorAll('.input-line input'); |
| if (inputs.length >= 3) { |
| inputs[0].value = 'user_001'; |
| inputs[1].value = 'John Doe'; |
| inputs[2].value = 'admin'; |
| |
| inputs[3].value = 'user_002'; |
| inputs[4].value = 'Jane Smith'; |
| inputs[5].value = 'editor'; |
| |
| inputs[6].value = 'user_003'; |
| inputs[7].value = 'Bob Johnson'; |
| inputs[8].value = 'viewer'; |
| |
| updatePreview(); |
| } |
| }, 300); |
| }); |
| </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=privateuserh/privfingaa-data-vbeta1-01" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
