Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>File Portal 2025</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #4a6bff; | |
| --primary-dark: #3a5bef; | |
| --secondary: #f8f9fa; | |
| --text: #212529; | |
| --text-light: #6c757d; | |
| --success: #28a745; | |
| --danger: #dc3545; | |
| --warning: #ffc107; | |
| --border-radius: 12px; | |
| --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: #f5f7ff; | |
| color: var(--text); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* Header */ | |
| header { | |
| background-color: white; | |
| box-shadow: var(--box-shadow); | |
| padding: 1rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--primary); | |
| text-decoration: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .anycoder-link { | |
| font-size: 0.8rem; | |
| color: var(--text-light); | |
| text-decoration: none; | |
| margin-left: 1rem; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 1.5rem; | |
| } | |
| .nav-link { | |
| text-decoration: none; | |
| color: var(--text-light); | |
| font-weight: 500; | |
| transition: var(--transition); | |
| padding: 0.5rem 0; | |
| position: relative; | |
| } | |
| .nav-link:hover { | |
| color: var(--primary); | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background-color: var(--primary); | |
| transition: var(--transition); | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .auth-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .btn { | |
| padding: 0.5rem 1rem; | |
| border-radius: var(--border-radius); | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| border: none; | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .btn-primary { | |
| background-color: var(--primary); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--primary-dark); | |
| } | |
| .btn-secondary { | |
| background-color: transparent; | |
| color: var(--text); | |
| border: 1px solid var(--text-light); | |
| } | |
| .btn-secondary:hover { | |
| background-color: var(--secondary); | |
| } | |
| /* Main Content */ | |
| main { | |
| flex: 1; | |
| padding: 2rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| width: 100%; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| text-align: center; | |
| padding: 3rem 0; | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| color: white; | |
| border-radius: var(--border-radius); | |
| margin-bottom: 2rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></svg>'); | |
| opacity: 0.3; | |
| } | |
| .hero-content { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .hero p { | |
| font-size: 1.2rem; | |
| margin-bottom: 2rem; | |
| max-width: 700px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| /* File Grid */ | |
| .file-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| margin-top: 2rem; | |
| } | |
| .file-card { | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| padding: 1.5rem; | |
| box-shadow: var(--box-shadow); | |
| transition: var(--transition); | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .file-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .file-icon { | |
| font-size: 3rem; | |
| color: var(--primary); | |
| margin-bottom: 1rem; | |
| text-align: center; | |
| } | |
| .file-info h3 { | |
| margin-bottom: 0.5rem; | |
| color: var(--text); | |
| } | |
| .file-info p { | |
| color: var(--text-light); | |
| font-size: 0.9rem; | |
| margin-bottom: 1rem; | |
| } | |
| .file-actions { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-top: auto; | |
| } | |
| .btn-download { | |
| background-color: var(--success); | |
| color: white; | |
| width: 100%; | |
| } | |
| .btn-download:hover { | |
| background-color: #218838; | |
| } | |
| /* Admin Panel */ | |
| .admin-panel { | |
| display: none; | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| padding: 2rem; | |
| box-shadow: var(--box-shadow); | |
| margin-top: 2rem; | |
| } | |
| .admin-panel h2 { | |
| margin-bottom: 1.5rem; | |
| color: var(--primary); | |
| } | |
| .upload-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .form-group label { | |
| font-weight: 500; | |
| color: var(--text); | |
| } | |
| .form-control { | |
| padding: 0.75rem; | |
| border: 1px solid #ced4da; | |
| border-radius: var(--border-radius); | |
| font-size: 1rem; | |
| transition: var(--transition); | |
| } | |
| .form-control:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(74, 107, 255, 0.25); | |
| } | |
| .file-list { | |
| margin-top: 2rem; | |
| } | |
| .file-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .file-item:last-child { | |
| border-bottom: none; | |
| } | |
| .file-actions-admin { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .btn-danger { | |
| background-color: var(--danger); | |
| color: white; | |
| } | |
| .btn-danger:hover { | |
| background-color: #c82333; | |
| } | |
| .btn-warning { | |
| background-color: var(--warning); | |
| color: white; | |
| } | |
| .btn-warning:hover { | |
| background-color: #e0a800; | |
| } | |
| /* Login Modal */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| z-index: 200; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .modal.active { | |
| display: flex; | |
| } | |
| .modal-content { | |
| background-color: white; | |
| padding: 2rem; | |
| border-radius: var(--border-radius); | |
| width: 100%; | |
| max-width: 400px; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); | |
| position: relative; | |
| } | |
| .modal-close { | |
| position: absolute; | |
| top: 1rem; | |
| right: 1rem; | |
| background: none; | |
| border: none; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| color: var(--text-light); | |
| } | |
| .modal h2 { | |
| margin-bottom: 1.5rem; | |
| color: var(--primary); | |
| text-align: center; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| header { | |
| padding: 1rem; | |
| } | |
| .nav-links { | |
| display: none; | |
| } | |
| .hero h1 { | |
| font-size: 2rem; | |
| } | |
| .hero p { | |
| font-size: 1rem; | |
| } | |
| .file-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* 2025 UI Enhancements */ | |
| /* Glassmorphism effect */ | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| /* Neon glow for interactive elements */ | |
| .neon-glow { | |
| box-shadow: 0 0 10px rgba(74, 107, 255, 0.5); | |
| } | |
| /* Micro-interactions */ | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| /* Dark mode support */ | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --primary: #6a7bff; | |
| --primary-dark: #5a6bef; | |
| --secondary: #212529; | |
| --text: #f8f9fa; | |
| --text-light: #adb5bd; | |
| --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); | |
| } | |
| body { | |
| background-color: #121212; | |
| } | |
| header { | |
| background-color: #1e1e1e; | |
| } | |
| .file-card, .modal-content, .admin-panel { | |
| background-color: #2d2d2d; | |
| } | |
| .form-control { | |
| background-color: #3d3d3d; | |
| border-color: #4d4d4d; | |
| color: white; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <a href="#" class="logo"> | |
| <i class="fas fa-cloud-download-alt"></i> | |
| FilePortal | |
| </a> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">Built with anycoder</a> | |
| <div class="auth-buttons"> | |
| <button id="loginBtn" class="btn btn-secondary"> | |
| <i class="fas fa-sign-in-alt"></i> Login | |
| </button> | |
| <button id="adminBtn" class="btn btn-primary"> | |
| <i class="fas fa-user-shield"></i> Admin | |
| </button> | |
| </div> | |
| </header> | |
| <main> | |
| <section class="hero"> | |
| <div class="hero-content"> | |
| <h1>Welcome to FilePortal 2025</h1> | |
| <p>Download files securely with your credentials. Admins can manage content with our advanced dashboard.</p> | |
| <div class="auth-buttons"> | |
| <button id="loginBtnHero" class="btn btn-secondary glass-effect"> | |
| <i class="fas fa-sign-in-alt"></i> User Login | |
| </button> | |
| <button id="adminBtnHero" class="btn btn-primary glass-effect neon-glow"> | |
| <i class="fas fa-user-shield"></i> Admin Panel | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="file-section"> | |
| <h2>Available Files</h2> | |
| <div class="file-grid" id="fileGrid"> | |
| <!-- Files will be loaded here --> | |
| <div class="file-card"> | |
| <div class="file-icon"> | |
| <i class="fas fa-file-pdf"></i> | |
| </div> | |
| <div class="file-info"> | |
| <h3>Documentation.pdf</h3> | |
| <p>Updated: 2025-01-15 | Size: 2.4MB</p> | |
| </div> | |
| <div class="file-actions"> | |
| <button class="btn btn-download"> | |
| <i class="fas fa-download"></i> Download | |
| </button> | |
| </div> | |
| </div> | |
| <div class="file-card"> | |
| <div class="file-icon"> | |
| <i class="fas fa-file-code"></i> | |
| </div> | |
| <div class="file-info"> | |
| <h3>SourceCode.zip</h3> | |
| <p>Updated: 2025-01-10 | Size: 15.6MB</p> | |
| </div> | |
| <div class="file-actions"> | |
| <button class="btn btn-download"> | |
| <i class="fas fa-download"></i> Download | |
| </button> | |
| </div> | |
| </div> | |
| <div class="file-card"> | |
| <div class="file-icon"> | |
| <i class="fas fa-file-excel"></i> | |
| </div> | |
| <div class="file-info"> | |
| <h3>DataSheet.xlsx</h3> | |
| <p>Updated: 2025-01-12 | Size: 1.8MB</p> | |
| </div> | |
| <div class="file-actions"> | |
| <button class="btn btn-download"> | |
| <i class="fas fa-download"></i> Download | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="admin-panel" id="adminPanel"> | |
| <h2>Admin Dashboard</h2> | |
| <div class="upload-form"> | |
| <div class="form-group"> | |
| <label for="fileName">File Name</label> | |
| <input type="text" id="fileName" class="form-control" placeholder="Enter file name"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="fileUpload">Upload File</label> | |
| <input type="file" id="fileUpload" class="form-control"> | |
| </div> | |
| <button id="uploadBtn" class="btn btn-primary"> | |
| <i class="fas fa-upload"></i> Upload File | |
| </button> | |
| </div> | |
| <div class="file-list"> | |
| <h3>Managed Files</h3> | |
| <div id="adminFileList"> | |
| <!-- Admin file list will be loaded here --> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Login Modal --> | |
| <div class="modal" id="loginModal"> | |
| <div class="modal-content"> | |
| <button class="modal-close" id="closeModal">×</button> | |
| <h2>Login</h2> | |
| <form id="loginForm"> | |
| <div class="form-group"> | |
| <label for="username">Username</label> | |
| <input type="text" id="username" class="form-control" placeholder="Enter username" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="password">Password</label> | |
| <input type="password" id="password" class="form-control" placeholder="Enter password" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="userType">Login As</label> | |
| <select id="userType" class="form-control"> | |
| <option value="user">Regular User</option> | |
| <option value="admin">Administrator</option> | |
| </select> | |
| </div> | |
| <button type="submit" class="btn btn-primary" style="width: 100%;"> | |
| <i class="fas fa-sign-in-alt"></i> Login | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const loginBtn = document.getElementById('loginBtn'); | |
| const loginBtnHero = document.getElementById('loginBtnHero'); | |
| const adminBtn = document.getElementById('adminBtn'); | |
| const adminBtnHero = document.getElementById('adminBtnHero'); | |
| const adminPanel = document.getElementById('adminPanel'); | |
| const loginModal = document.getElementById('loginModal'); | |
| const closeModal = document.getElementById('closeModal'); | |
| const loginForm = document.getElementById('loginForm'); | |
| const uploadBtn = document.getElementById('uploadBtn'); | |
| const fileGrid = document.getElementById('fileGrid'); | |
| const adminFileList = document.getElementById('adminFileList'); | |
| // State | |
| let isAdmin = false; | |
| let currentUser = null; | |
| // Sample data | |
| let files = [ | |
| { id: 1, name: 'Documentation.pdf', type: 'pdf', size: '2.4MB', date: '2025-01-15' }, | |
| { id: 2, name: 'SourceCode.zip', type: 'zip', size: '15.6MB', date: '2025-01-10' }, | |
| { id: 3, name: 'DataSheet.xlsx', type: 'xlsx', size: '1.8MB', date: '2025-01-12' } | |
| ]; | |
| // Event Listeners | |
| loginBtn.addEventListener('click', openLoginModal); | |
| loginBtnHero.addEventListener('click', openLoginModal); | |
| adminBtn.addEventListener('click', toggleAdminPanel); | |
| adminBtnHero.addEventListener('click', openLoginModal); | |
| closeModal.addEventListener('click', closeLoginModal); | |
| uploadBtn.addEventListener('click', handleUpload); | |
| loginForm.addEventListener('submit', handleLogin); | |
| // Functions | |
| function openLoginModal() { | |
| loginModal.classList.add('active'); | |
| } | |
| function closeLoginModal() { | |
| loginModal.classList.remove('active'); | |
| } | |
| function toggleAdminPanel() { | |
| if (isAdmin) { | |
| adminPanel.style.display = adminPanel.style.display === 'block' ? 'none' : 'block'; | |
| adminBtn.textContent = adminPanel.style.display === 'block' ? 'Hide Admin' : 'Admin'; | |
| } else { | |
| openLoginModal(); | |
| } | |
| } | |
| function handleLogin(e) { | |
| e.preventDefault(); | |
| const username = document.getElementById('username').value; | |
| const password = document.getElementById('password').value; | |
| const userType = document.getElementById('userType').value; | |
| // Simple authentication (in a real app, this would be server-side) | |
| if (username && password) { | |
| currentUser = username; | |
| isAdmin = userType === 'admin'; | |
| if (isAdmin) { | |
| adminBtn.textContent = 'Admin Panel'; | |
| adminPanel.style.display = 'block'; | |
| } | |
| closeLoginModal(); | |
| loginForm.reset(); | |
| showNotification(`Logged in as ${isAdmin ? 'Admin' : 'User'}`, 'success'); | |
| } else { | |
| showNotification('Please enter username and password', 'danger'); | |
| } | |
| } | |
| function handleUpload() { | |
| if (!isAdmin) { | |
| showNotification('You need admin privileges to upload files', 'danger'); | |
| return; | |
| } | |
| const fileName = document.getElementById('fileName').value; | |
| const fileInput = document.getElementById('fileUpload'); | |
| if (fileName && fileInput.files.length > 0) { | |
| const file = fileInput.files[0]; | |
| const newFile = { | |
| id: files.length + 1, | |
| name: fileName, | |
| type: fileName.split('.').pop(), | |
| size: formatFileSize(file.size), | |
| date: new Date().toISOString().split('T')[0] | |
| }; | |
| files.push(newFile); | |
| renderFiles(); | |
| renderAdminFiles(); | |
| showNotification('File uploaded successfully!', 'success'); | |
| // Reset form | |
| document.getElementById('fileName').value = ''; | |
| fileInput.value = ''; | |
| } else { | |
| showNotification('Please fill all fields', 'danger'); | |
| } | |
| } | |
| function deleteFile(id) { | |
| files = files.filter(file => file.id !== id); | |
| renderFiles(); | |
| renderAdminFiles(); | |
| showNotification('File deleted successfully', 'success'); | |
| } | |
| function formatFileSize(bytes) { | |
| if (bytes < 1024) return bytes + ' bytes'; | |
| else if (bytes < 1048576) return (bytes / 1024).toFixed(2) + ' KB'; | |
| else return (bytes / 1048576).toFixed(2) + ' MB'; | |
| } | |
| function renderFiles() { | |
| fileGrid.innerHTML = files.map(file => ` | |
| <div class="file-card"> | |
| <div class="file-icon"> | |
| ${getFileIcon(file.type)} | |
| </div> | |
| <div class="file-info"> | |
| <h3>${file.name}</h3> | |
| <p>Updated: ${file.date} | Size: ${file.size}</p> | |
| </div> | |
| <div class="file-actions"> | |
| <button class="btn btn-download" onclick="downloadFile(${file.id})"> | |
| <i class="fas fa-download"></i> Download | |
| </button> | |
| </div> | |
| </div> | |
| `).join(''); | |
| } | |
| function renderAdminFiles() { | |
| adminFileList.innerHTML = files.map(file => ` | |
| <div class="file-item"> | |
| <div> | |
| <strong>${file.name}</strong> | |
| <span style="color: var(--text-light); margin-left: 1rem;">${file.date}</span> | |
| </div> | |
| <div class="file-actions-admin"> | |
| <button class="btn btn-warning" onclick="editFile(${file.id})"> | |
| <i class="fas fa-edit"></i> Edit | |
| </button> | |
| <button class="btn btn-danger" onclick="deleteFile(${file.id})"> | |
| <i class="fas fa-trash"></i> Delete | |
| </button> | |
| </div> | |
| </div> | |
| `).join(''); | |
| } | |
| function getFileIcon(type) { | |
| const icons = { | |
| pdf: '<i class="fas fa-file-pdf"></i>', | |
| zip: '<i class="fas fa-file-archive"></i>', | |
| xlsx: '<i class="fas fa-file-excel"></i>', | |
| docx: '<i class="fas fa-file-word"></i>', | |
| txt: '<i class="fas fa-file-alt"></i>', | |
| jpg: '<i class="fas fa-file-image"></i>', | |
| png: '<i class="fas fa-file-image"></i>' | |
| }; | |
| return icons[type.toLowerCase()] || '<i class="fas fa-file"></i>'; | |
| } | |
| function downloadFile(id) { | |
| const file = files.find(f => f.id === id); | |
| if (file) { | |
| showNotification(`Downloading ${file.name}...`, 'success'); | |
| // In a real app, this would trigger a file download | |
| console.log(`Downloading file: ${file.name}`); | |
| } | |
| } | |
| function editFile(id) { | |
| const file = files.find(f => f.id === id); | |
| if (file) { | |
| const newName = prompt('Edit file name:', file.name); | |
| if (newName) { | |
| file.name = newName; | |
| file.date = new Date().toISOString().split('T')[0]; | |
| renderFiles(); | |
| renderAdminFiles(); | |
| showNotification('File updated successfully', 'success'); | |
| } | |
| } | |
| } | |
| function showNotification(message, type) { | |
| const notification = document.createElement('div'); | |
| notification.textContent = message; | |
| notification.style.position = 'fixed'; | |
| notification.style.bottom = '20px'; | |
| notification.style.right = '20px'; | |
| notification.style.padding = '1rem 1.5rem'; | |
| notification.style.borderRadius = 'var(--border-radius)'; | |
| notification.style.backgroundColor = type === 'success' ? 'var(--success)' : | |
| type === 'danger' ? 'var(--danger)' : 'var(--warning)'; | |
| notification.style.color = 'white'; | |
| notification.style.boxShadow = 'var(--box-shadow)'; | |
| notification.style.zIndex = '300'; | |
| notification.style.animation = 'fadeIn 0.3s ease-in-out'; | |
| document.body.appendChild(notification); | |
| setTimeout(() => { | |
| notification.style.animation = 'fadeOut 0.3s ease-in-out'; | |
| setTimeout(() => { | |
| notification.remove(); | |
| }, 300); | |
| }, 3000); | |
| } | |
| // Initialize | |
| renderFiles(); | |
| renderAdminFiles(); | |
| // Add fade animations to CSS | |
| const style = document.createElement('style'); | |
| style.textContent = ` | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes fadeOut { | |
| from { opacity: 1; transform: translateY(0); } | |
| to { opacity: 0; transform: translateY(20px); } | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| </script> | |
| </body> | |
| </html> |