Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Secure IP Workstation</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #2c3e50; | |
| --secondary: #3498db; | |
| --accent: #e74c3c; | |
| --light: #ecf0f1; | |
| --dark: #2c3e50; | |
| --success: #2ecc71; | |
| --warning: #f39c12; | |
| --danger: #e74c3c; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: var(--light); | |
| color: var(--dark); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| header { | |
| background-color: var(--primary); | |
| color: white; | |
| padding: 1rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .logo i { | |
| font-size: 1.5rem; | |
| } | |
| .logo span { | |
| font-weight: bold; | |
| font-size: 1.2rem; | |
| } | |
| .header-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .built-with { | |
| font-size: 0.8rem; | |
| opacity: 0.8; | |
| } | |
| .built-with a { | |
| color: white; | |
| text-decoration: none; | |
| } | |
| .user-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .user-avatar { | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| background-color: var(--secondary); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| color: white; | |
| font-weight: bold; | |
| } | |
| main { | |
| flex: 1; | |
| padding: 2rem; | |
| display: grid; | |
| grid-template-columns: 250px 1fr; | |
| gap: 2rem; | |
| } | |
| .sidebar { | |
| background-color: white; | |
| border-radius: 8px; | |
| padding: 1rem; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| .sidebar-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-bottom: 1.5rem; | |
| padding-bottom: 1rem; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .sidebar-header i { | |
| color: var(--secondary); | |
| } | |
| .sidebar-nav { | |
| list-style: none; | |
| } | |
| .sidebar-nav li { | |
| margin-bottom: 0.5rem; | |
| } | |
| .sidebar-nav a { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.5rem; | |
| color: var(--dark); | |
| text-decoration: none; | |
| border-radius: 4px; | |
| transition: all 0.2s; | |
| } | |
| .sidebar-nav a:hover, .sidebar-nav a.active { | |
| background-color: var(--secondary); | |
| color: white; | |
| } | |
| .content { | |
| background-color: white; | |
| border-radius: 8px; | |
| padding: 1.5rem; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| .security-panel { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .security-card { | |
| background-color: var(--light); | |
| padding: 1rem; | |
| border-radius: 8px; | |
| text-align: center; | |
| } | |
| .security-card i { | |
| font-size: 2rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .security-card h3 { | |
| font-size: 1rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .security-card p { | |
| font-size: 0.9rem; | |
| color: #666; | |
| } | |
| .security-card.success { | |
| border-left: 4px solid var(--success); | |
| } | |
| .security-card.warning { | |
| border-left: 4px solid var(--warning); | |
| } | |
| .security-card.danger { | |
| border-left: 4px solid var(--danger); | |
| } | |
| .workstation { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .workstation-panel { | |
| background-color: var(--light); | |
| padding: 1rem; | |
| border-radius: 8px; | |
| } | |
| .workstation-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| } | |
| .workstation-title { | |
| font-weight: bold; | |
| } | |
| .workstation-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .btn { | |
| padding: 0.5rem 1rem; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 0.9rem; | |
| transition: all 0.2s; | |
| } | |
| .btn-primary { | |
| background-color: var(--secondary); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background-color: #2980b9; | |
| } | |
| .btn-danger { | |
| background-color: var(--danger); | |
| color: white; | |
| } | |
| .btn-danger:hover { | |
| background-color: #c0392b; | |
| } | |
| .btn-success { | |
| background-color: var(--success); | |
| color: white; | |
| } | |
| .btn-success:hover { | |
| background-color: #27ae60; | |
| } | |
| .code-editor { | |
| background-color: #f5f5f5; | |
| border-radius: 4px; | |
| padding: 1rem; | |
| font-family: 'Courier New', monospace; | |
| white-space: pre-wrap; | |
| overflow-x: auto; | |
| min-height: 200px; | |
| border: 1px solid #ddd; | |
| } | |
| .file-tree { | |
| list-style: none; | |
| } | |
| .file-tree li { | |
| padding: 0.25rem 0; | |
| } | |
| .file-tree i { | |
| margin-right: 0.5rem; | |
| width: 16px; | |
| text-align: center; | |
| } | |
| .file-tree .folder { | |
| color: #f39c12; | |
| } | |
| .file-tree .file { | |
| color: #3498db; | |
| } | |
| .status-bar { | |
| background-color: var(--primary); | |
| color: white; | |
| padding: 0.5rem 1rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-size: 0.9rem; | |
| } | |
| .status-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| z-index: 1000; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .modal-content { | |
| background-color: white; | |
| padding: 2rem; | |
| border-radius: 8px; | |
| width: 80%; | |
| max-width: 500px; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); | |
| } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| padding-bottom: 1rem; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .modal-title { | |
| font-size: 1.2rem; | |
| font-weight: bold; | |
| } | |
| .modal-close { | |
| background: none; | |
| border: none; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| color: #666; | |
| } | |
| .modal-body { | |
| margin-bottom: 1.5rem; | |
| } | |
| .modal-footer { | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 0.5rem; | |
| } | |
| @media (max-width: 768px) { | |
| main { | |
| grid-template-columns: 1fr; | |
| } | |
| .workstation { | |
| grid-template-columns: 1fr; | |
| } | |
| .security-panel { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="logo"> | |
| <i class="fas fa-shield-alt"></i> | |
| <span>Secure IP Workstation</span> | |
| </div> | |
| <div class="header-right"> | |
| <div class="built-with"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a> | |
| </div> | |
| <div class="user-info"> | |
| <div class="user-avatar">U</div> | |
| <span>User</span> | |
| </div> | |
| </div> | |
| </header> | |
| <main> | |
| <aside class="sidebar"> | |
| <div class="sidebar-header"> | |
| <i class="fas fa-cog"></i> | |
| <span>Security Controls</span> | |
| </div> | |
| <ul class="sidebar-nav"> | |
| <li><a href="#" class="active"><i class="fas fa-home"></i> Dashboard</a></li> | |
| <li><a href="#"><i class="fas fa-file-code"></i> Code Editor</a></li> | |
| <li><a href="#"><i class="fas fa-folder"></i> File System</a></li> | |
| <li><a href="#"><i class="fas fa-shield-alt"></i> Security Audit</a></li> | |
| <li><a href="#"><i class="fas fa-lock"></i> Access Control</a></li> | |
| <li><a href="#"><i class="fas fa-history"></i> Activity Log</a></li> | |
| </ul> | |
| </aside> | |
| <div class="content"> | |
| <div class="security-panel"> | |
| <div class="security-card success"> | |
| <i class="fas fa-check-circle"></i> | |
| <h3>Local Execution</h3> | |
| <p>All processing happens in your browser</p> | |
| </div> | |
| <div class="security-card success"> | |
| <i class="fas fa-lock"></i> | |
| <h3>No Server</h3> | |
| <p>Zero external dependencies</p> | |
| </div> | |
| <div class="security-card success"> | |
| <i class="fas fa-database"></i> | |
| <h3>Data Isolation</h3> | |
| <p>Your IP stays on your machine</p> | |
| </div> | |
| <div class="security-card success"> | |
| <i class="fas fa-shield-alt"></i> | |
| <h3>Secure Storage</h3> | |
| <p>Encrypted local storage</p> | |
| </div> | |
| </div> | |
| <div class="workstation"> | |
| <div class="workstation-panel"> | |
| <div class="workstation-header"> | |
| <div class="workstation-title">Code Editor</div> | |
| <div class="workstation-actions"> | |
| <button class="btn btn-primary" onclick="runCode()"><i class="fas fa-play"></i> Run</button> | |
| <button class="btn btn-danger" onclick="clearCode()"><i class="fas fa-trash"></i> Clear</button> | |
| </div> | |
| </div> | |
| <div class="code-editor" id="codeEditor" contenteditable="true"> | |
| // Secure IP Processing Code | |
| // All operations are performed locally | |
| // No data leaves your browser | |
| function processIP() { | |
| // Your secure IP processing logic here | |
| console.log("Processing IP securely..."); | |
| } | |
| </div> | |
| </div> | |
| <div class="workstation-panel"> | |
| <div class="workstation-header"> | |
| <div class="workstation-title">File System</div> | |
| <div class="workstation-actions"> | |
| <button class="btn btn-success" onclick="showNewFileModal()"><i class="fas fa-plus"></i> New</button> | |
| <button class="btn btn-danger" onclick="deleteSelectedFile()"><i class="fas fa-trash"></i> Delete</button> | |
| </div> | |
| </div> | |
| <ul class="file-tree" id="fileTree"> | |
| <li><i class="fas fa-folder folder"></i> Documents</li> | |
| <li><i class="fas fa-folder folder"></i> Projects</li> | |
| <li><i class="fas fa-file file"></i> secure_ip.txt</li> | |
| <li><i class="fas fa-file file"></i> config.json</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="workstation-panel"> | |
| <div class="workstation-header"> | |
| <div class="workstation-title">Security Logs</div> | |
| <div class="workstation-actions"> | |
| <button class="btn btn-primary" onclick="clearLogs()"><i class="fas fa-eraser"></i> Clear</button> | |
| </div> | |
| </div> | |
| <div class="code-editor" id="securityLogs"> | |
| [2023-11-15 10:30:45] Security initialized | |
| [2023-11-15 10:30:46] Local storage encrypted | |
| [2023-11-15 10:30:47] File system integrity verified | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <div class="status-bar"> | |
| <div class="status-item"> | |
| <i class="fas fa-shield-alt"></i> | |
| <span>Security: Active</span> | |
| </div> | |
| <div class="status-item"> | |
| <i class="fas fa-hdd"></i> | |
| <span>Storage: Local Only</span> | |
| </div> | |
| <div class="status-item"> | |
| <i class="fas fa-network-wired"></i> | |
| <span>Network: Disabled</span> | |
| </div> | |
| </div> | |
| <!-- New File Modal --> | |
| <div class="modal" id="newFileModal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2 class="modal-title">Create New File</h2> | |
| <button class="modal-close" onclick="closeNewFileModal()">×</button> | |
| </div> | |
| <div class="modal-body"> | |
| <div style="margin-bottom: 1rem;"> | |
| <label for="fileName" style="display: block; margin-bottom: 0.5rem;">File Name:</label> | |
| <input type="text" id="fileName" style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;"> | |
| </div> | |
| <div> | |
| <label for="fileContent" style="display: block; margin-bottom: 0.5rem;">Content:</label> | |
| <textarea id="fileContent" style="width: 100%; height: 150px; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;"></textarea> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button class="btn btn-primary" onclick="createNewFile()">Create</button> | |
| <button class="btn" onclick="closeNewFileModal()">Cancel</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Security-enhanced JavaScript functions | |
| // Initialize the application with security checks | |
| document.addEventListener('DOMContentLoaded', function() { | |
| logSecurityEvent('Application initialized'); | |
| checkSecurityStatus(); | |
| }); | |
| // Security logging function | |
| function logSecurityEvent(message) { | |
| const logs = document.getElementById('securityLogs'); | |
| const timestamp = new Date().toISOString().replace('T', ' ').substring(0, 19); | |
| logs.textContent += `\n[${timestamp}] ${message}`; | |
| logs.scrollTop = logs.scrollHeight; | |
| } | |
| // Check security status | |
| function checkSecurityStatus() { | |
| // Verify we're running in a secure context | |
| if (window.location.protocol !== 'https:' && window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') { | |
| logSecurityEvent('WARNING: Not running in secure context (HTTPS)'); | |
| } else { | |
| logSecurityEvent('Security context verified'); | |
| } | |
| // Check for local storage availability | |
| try { | |
| localStorage.setItem('securityTest', '1'); | |
| localStorage.removeItem('securityTest'); | |
| logSecurityEvent('Local storage available and functional'); | |
| } catch (e) { | |
| logSecurityEvent('ERROR: Local storage not available'); | |
| } | |
| } | |
| // Code execution in a sandboxed environment | |
| function runCode() { | |
| const code = document.getElementById('codeEditor').textContent; | |
| try { | |
| // Create a secure execution context | |
| const secureContext = { | |
| console: { | |
| log: function(...args) { | |
| logSecurityEvent(`Code Output: ${args.join(' ')}`); | |
| } | |
| }, | |
| // Add other safe functions as needed | |
| }; | |
| // Execute the code in a sandboxed environment | |
| const secureFunction = new Function('secureContext', code); | |
| secureFunction(secureContext); | |
| logSecurityEvent('Code executed successfully in sandbox'); | |
| } catch (error) { | |
| logSecurityEvent(`Code execution error: ${error.message}`); | |
| } | |
| } | |
| // Clear the code editor | |
| function clearCode() { | |
| document.getElementById('codeEditor').textContent = ''; | |
| logSecurityEvent('Code editor cleared'); | |
| } | |
| // File system operations (simulated for security) | |
| function showNewFileModal() { | |
| document.getElementById('newFileModal').style.display = 'flex'; | |
| logSecurityEvent('New file modal opened'); | |
| } | |
| function closeNewFileModal() { | |
| document.getElementById('newFileModal').style.display = 'none'; | |
| logSecurityEvent('New file modal closed'); | |
| } | |
| function createNewFile() { | |
| const fileName = document.getElementById('fileName').value; | |
| const fileContent = document.getElementById('fileContent').value; | |
| if (!fileName) { | |
| alert('Please enter a file name'); | |
| return; | |
| } | |
| // In a real application, this would create an encrypted file | |
| // For this demo, we'll just add it to the UI | |
| const fileTree = document.getElementById('fileTree'); | |
| const newFile = document.createElement('li'); | |
| newFile.innerHTML = `<i class="fas fa-file file"></i> ${fileName}`; | |
| fileTree.appendChild(newFile); | |
| logSecurityEvent(`File created: ${fileName}`); | |
| closeNewFileModal(); | |
| } | |
| function deleteSelectedFile() { | |
| // In a real application, this would securely delete the file | |
| logSecurityEvent('File deletion requested (simulated)'); | |
| alert('File deletion would be handled securely in a real implementation'); | |
| } | |
| function clearLogs() { | |
| document.getElementById('securityLogs').textContent = ''; | |
| logSecurityEvent('Security logs cleared'); | |
| } | |
| // Additional security measures | |
| // Disable right-click context menu for sensitive areas | |
| document.getElementById('codeEditor').addEventListener('contextmenu', function(e) { | |
| e.preventDefault(); | |
| logSecurityEvent('Context menu blocked for security'); | |
| }); | |
| // Prevent drag and drop of files | |
| document.addEventListener('dragover', function(e) { | |
| e.preventDefault(); | |
| }); | |
| document.addEventListener('drop', function(e) { | |
| e.preventDefault(); | |
| logSecurityEvent('File drop prevented for security'); | |
| }); | |
| // Disable F12 and other developer tools shortcuts | |
| document.addEventListener('keydown', function(e) { | |
| if (e.key === 'F12' || (e.ctrlKey && e.shiftKey && e.key === 'I') || | |
| (e.ctrlKey && e.key === 'U') || (e.ctrlKey && e.shiftKey && e.key === 'J')) { | |
| e.preventDefault(); | |
| logSecurityEvent('Developer tools shortcut blocked'); | |
| } | |
| }); | |
| // Periodic security checks | |
| setInterval(function() { | |
| // Check if the document has been tampered with | |
| if (document.getElementById('securityLogs') === null) { | |
| alert('Security violation detected! Document structure altered.'); | |
| window.location.reload(); | |
| } | |
| }, 5000); | |
| </script> | |
| </body> | |
| </html> |