|
|
<!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> |
