704 lines
23 KiB
HTML
704 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Admin Dashboard - Audio Transcription Editor</title>
|
|
|
|
<!-- External CSS Libraries -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
|
|
|
|
<!-- Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@500;700&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
--accent-primary: #667eea;
|
|
--accent-secondary: #764ba2;
|
|
--bg-gradient-start: #f0f4f8;
|
|
--bg-gradient-end: #e2e8f0;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
color: #1e293b;
|
|
}
|
|
|
|
.main-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.admin-header {
|
|
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
|
|
color: white;
|
|
padding: 24px 32px;
|
|
border-radius: 20px;
|
|
box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
|
|
margin-bottom: 32px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.admin-header h1 {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 1.5rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.btn-header {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border: none;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.btn-header:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
color: white;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
text-align: center;
|
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 2.5rem;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.85rem;
|
|
color: #64748b;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
font-weight: 600;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.content-card {
|
|
background: white;
|
|
border-radius: 20px;
|
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-header {
|
|
background: #f8fafc;
|
|
padding: 20px 24px;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.card-header h2 {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 1.2rem;
|
|
margin: 0;
|
|
color: #1e293b;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 24px;
|
|
}
|
|
|
|
.btn-create {
|
|
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
|
|
border: none;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.btn-create:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
|
|
color: white;
|
|
}
|
|
|
|
.user-table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
.user-table th {
|
|
background: #f8fafc;
|
|
padding: 14px 16px;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
color: #64748b;
|
|
font-size: 0.85rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
border-bottom: 2px solid #e2e8f0;
|
|
}
|
|
|
|
.user-table td {
|
|
padding: 16px;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.user-table tr:hover td {
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: 700;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.badge-admin {
|
|
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
|
color: white;
|
|
padding: 4px 10px;
|
|
border-radius: 20px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.badge-user {
|
|
background: #e2e8f0;
|
|
color: #64748b;
|
|
padding: 4px 10px;
|
|
border-radius: 20px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.btn-action {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 8px;
|
|
border: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.btn-action-edit {
|
|
background: #e0e7ff;
|
|
color: #4f46e5;
|
|
}
|
|
|
|
.btn-action-edit:hover {
|
|
background: #c7d2fe;
|
|
}
|
|
|
|
.btn-action-delete {
|
|
background: #fee2e2;
|
|
color: #dc2626;
|
|
}
|
|
|
|
.btn-action-delete:hover {
|
|
background: #fecaca;
|
|
}
|
|
|
|
.modal-content {
|
|
border-radius: 20px;
|
|
border: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.modal-header {
|
|
background: #f8fafc;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
padding: 20px 24px;
|
|
}
|
|
|
|
.modal-title {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 24px;
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: 16px 24px;
|
|
border-top: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.form-label {
|
|
font-weight: 600;
|
|
color: #374151;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.form-control, .form-select {
|
|
border: 2px solid #e5e7eb;
|
|
border-radius: 10px;
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.form-control:focus, .form-select:focus {
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
|
|
}
|
|
|
|
.form-check-input:checked {
|
|
background-color: var(--accent-primary);
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
.text-muted-custom {
|
|
color: #94a3b8;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.empty-state i {
|
|
font-size: 4rem;
|
|
margin-bottom: 20px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.loading-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.alert {
|
|
border-radius: 12px;
|
|
border: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Loading Overlay -->
|
|
<div class="loading-overlay" id="loader">
|
|
<div class="spinner-border text-primary mb-3" role="status"></div>
|
|
<h5 class="text-muted">Loading...</h5>
|
|
</div>
|
|
|
|
<!-- Create/Edit User Modal -->
|
|
<div class="modal fade" id="userModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="userModalTitle">Create User</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="userForm">
|
|
<input type="hidden" id="userId">
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Username</label>
|
|
<input type="text" class="form-control" id="userUsername" required minlength="3">
|
|
<div class="text-muted-custom mt-1">At least 3 characters</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Password</label>
|
|
<input type="password" class="form-control" id="userPassword">
|
|
<div class="text-muted-custom mt-1" id="passwordHint">At least 4 characters</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="userIsAdmin">
|
|
<label class="form-check-label fw-bold" for="userIsAdmin">Administrator</label>
|
|
</div>
|
|
<div class="text-muted-custom mt-1">Admins can manage users</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-create" id="saveUserBtn" onclick="saveUser()">Save User</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confirm Delete Modal -->
|
|
<div class="modal fade" id="deleteModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered modal-sm">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Confirm Delete</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Are you sure you want to delete user <strong id="deleteUsername"></strong>?</p>
|
|
<p class="text-danger small"><i class="bi bi-exclamation-triangle me-1"></i>This will also delete all their projects and data.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-danger btn-sm" id="confirmDeleteBtn">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-container">
|
|
<!-- Admin Header -->
|
|
<div class="admin-header">
|
|
<div>
|
|
<h1><i class="bi bi-shield-lock me-2"></i>Admin Dashboard</h1>
|
|
</div>
|
|
<div class="header-actions">
|
|
<a href="/" class="btn btn-header">
|
|
<i class="bi bi-arrow-left me-2"></i>Back to Editor
|
|
</a>
|
|
<button class="btn btn-header" onclick="logout()">
|
|
<i class="bi bi-box-arrow-right me-2"></i>Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Grid -->
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="statUsers">0</div>
|
|
<div class="stat-label">Users</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="statProjects">0</div>
|
|
<div class="stat-label">Projects</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="statSections">0</div>
|
|
<div class="stat-label">Sections</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="statUploads">0</div>
|
|
<div class="stat-label">Uploads</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="statGenerations">0</div>
|
|
<div class="stat-label">Generations</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="statDbSize">0</div>
|
|
<div class="stat-label">Database (MB)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Users Table -->
|
|
<div class="content-card">
|
|
<div class="card-header">
|
|
<h2><i class="bi bi-people me-2"></i>User Management</h2>
|
|
<button class="btn btn-create" onclick="openCreateUserModal()">
|
|
<i class="bi bi-plus-lg me-2"></i>Create User
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="alertContainer"></div>
|
|
<div id="usersContainer">
|
|
<div class="empty-state">
|
|
<i class="bi bi-person-circle"></i>
|
|
<p>Loading users...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
let userModal = null;
|
|
let deleteModal = null;
|
|
let currentDeleteUserId = null;
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
userModal = new bootstrap.Modal(document.getElementById('userModal'));
|
|
deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
|
|
|
|
loadStats();
|
|
loadUsers();
|
|
});
|
|
|
|
function showLoader(show) {
|
|
document.getElementById('loader').style.display = show ? 'flex' : 'none';
|
|
}
|
|
|
|
function showAlert(message, type = 'success') {
|
|
const container = document.getElementById('alertContainer');
|
|
container.innerHTML = `
|
|
<div class="alert alert-${type} alert-dismissible fade show" role="alert">
|
|
<i class="bi bi-${type === 'success' ? 'check-circle' : 'exclamation-circle'} me-2"></i>
|
|
${message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
`;
|
|
setTimeout(() => container.innerHTML = '', 5000);
|
|
}
|
|
|
|
async function loadStats() {
|
|
try {
|
|
const res = await fetch('/api/admin/stats');
|
|
const data = await res.json();
|
|
|
|
document.getElementById('statUsers').textContent = data.users;
|
|
document.getElementById('statProjects').textContent = data.projects;
|
|
document.getElementById('statSections').textContent = data.sections;
|
|
document.getElementById('statUploads').textContent = data.uploads;
|
|
document.getElementById('statGenerations').textContent = data.generations;
|
|
document.getElementById('statDbSize').textContent = data.database_size_mb;
|
|
} catch (e) {
|
|
console.error('Failed to load stats:', e);
|
|
}
|
|
}
|
|
|
|
async function loadUsers() {
|
|
try {
|
|
const res = await fetch('/api/admin/users');
|
|
const data = await res.json();
|
|
|
|
const container = document.getElementById('usersContainer');
|
|
|
|
if (data.users.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<i class="bi bi-person-circle"></i>
|
|
<p>No users found</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = `
|
|
<table class="user-table">
|
|
<thead>
|
|
<tr>
|
|
<th>User</th>
|
|
<th>Role</th>
|
|
<th>Projects</th>
|
|
<th>Created</th>
|
|
<th>Last Login</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${data.users.map(user => `
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center gap-3">
|
|
<div class="user-avatar">${user.username.charAt(0).toUpperCase()}</div>
|
|
<div>
|
|
<div class="fw-bold">${escapeHtml(user.username)}</div>
|
|
<div class="text-muted-custom">ID: ${user.id}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="${user.is_admin ? 'badge-admin' : 'badge-user'}">
|
|
${user.is_admin ? 'Admin' : 'User'}
|
|
</span>
|
|
</td>
|
|
<td>${user.project_count}</td>
|
|
<td class="text-muted-custom">${formatDate(user.created_at)}</td>
|
|
<td class="text-muted-custom">${user.last_login ? formatDate(user.last_login) : 'Never'}</td>
|
|
<td>
|
|
<button class="btn-action btn-action-edit" title="Edit" onclick="openEditUserModal(${user.id}, '${escapeHtml(user.username)}', ${user.is_admin})">
|
|
<i class="bi bi-pencil"></i>
|
|
</button>
|
|
<button class="btn-action btn-action-delete" title="Delete" onclick="confirmDelete(${user.id}, '${escapeHtml(user.username)}')">
|
|
<i class="bi bi-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
`).join('')}
|
|
</tbody>
|
|
</table>
|
|
`;
|
|
} catch (e) {
|
|
console.error('Failed to load users:', e);
|
|
document.getElementById('usersContainer').innerHTML = `
|
|
<div class="alert alert-danger">Failed to load users. Please refresh the page.</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
function openCreateUserModal() {
|
|
document.getElementById('userModalTitle').textContent = 'Create User';
|
|
document.getElementById('userId').value = '';
|
|
document.getElementById('userUsername').value = '';
|
|
document.getElementById('userPassword').value = '';
|
|
document.getElementById('userPassword').required = true;
|
|
document.getElementById('passwordHint').textContent = 'At least 4 characters';
|
|
document.getElementById('userIsAdmin').checked = false;
|
|
document.getElementById('saveUserBtn').textContent = 'Create User';
|
|
userModal.show();
|
|
}
|
|
|
|
function openEditUserModal(id, username, isAdmin) {
|
|
document.getElementById('userModalTitle').textContent = 'Edit User';
|
|
document.getElementById('userId').value = id;
|
|
document.getElementById('userUsername').value = username;
|
|
document.getElementById('userPassword').value = '';
|
|
document.getElementById('userPassword').required = false;
|
|
document.getElementById('passwordHint').textContent = 'Leave blank to keep current password';
|
|
document.getElementById('userIsAdmin').checked = isAdmin;
|
|
document.getElementById('saveUserBtn').textContent = 'Save Changes';
|
|
userModal.show();
|
|
}
|
|
|
|
async function saveUser() {
|
|
const userId = document.getElementById('userId').value;
|
|
const username = document.getElementById('userUsername').value.trim();
|
|
const password = document.getElementById('userPassword').value;
|
|
const isAdmin = document.getElementById('userIsAdmin').checked;
|
|
|
|
if (!username || username.length < 3) {
|
|
showAlert('Username must be at least 3 characters', 'danger');
|
|
return;
|
|
}
|
|
|
|
if (!userId && (!password || password.length < 4)) {
|
|
showAlert('Password must be at least 4 characters', 'danger');
|
|
return;
|
|
}
|
|
|
|
showLoader(true);
|
|
|
|
try {
|
|
const url = userId ? `/api/admin/users/${userId}` : '/api/admin/users';
|
|
const method = userId ? 'PUT' : 'POST';
|
|
|
|
const body = { username, is_admin: isAdmin };
|
|
if (password) body.password = password;
|
|
|
|
const res = await fetch(url, {
|
|
method,
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(body)
|
|
});
|
|
|
|
const data = await res.json();
|
|
|
|
if (res.ok) {
|
|
userModal.hide();
|
|
showAlert(userId ? 'User updated successfully' : 'User created successfully');
|
|
loadUsers();
|
|
loadStats();
|
|
} else {
|
|
showAlert(data.error || 'Operation failed', 'danger');
|
|
}
|
|
} catch (e) {
|
|
showAlert('Connection error. Please try again.', 'danger');
|
|
} finally {
|
|
showLoader(false);
|
|
}
|
|
}
|
|
|
|
function confirmDelete(userId, username) {
|
|
currentDeleteUserId = userId;
|
|
document.getElementById('deleteUsername').textContent = username;
|
|
document.getElementById('confirmDeleteBtn').onclick = () => deleteUser(userId);
|
|
deleteModal.show();
|
|
}
|
|
|
|
async function deleteUser(userId) {
|
|
showLoader(true);
|
|
deleteModal.hide();
|
|
|
|
try {
|
|
const res = await fetch(`/api/admin/users/${userId}`, { method: 'DELETE' });
|
|
const data = await res.json();
|
|
|
|
if (res.ok) {
|
|
showAlert('User deleted successfully');
|
|
loadUsers();
|
|
loadStats();
|
|
} else {
|
|
showAlert(data.error || 'Delete failed', 'danger');
|
|
}
|
|
} catch (e) {
|
|
showAlert('Connection error. Please try again.', 'danger');
|
|
} finally {
|
|
showLoader(false);
|
|
}
|
|
}
|
|
|
|
async function logout() {
|
|
try {
|
|
await fetch('/api/logout', { method: 'POST' });
|
|
window.location.href = '/login';
|
|
} catch (e) {
|
|
window.location.href = '/login';
|
|
}
|
|
}
|
|
|
|
function formatDate(dateStr) {
|
|
if (!dateStr) return '';
|
|
const d = new Date(dateStr);
|
|
return d.toLocaleDateString() + ' ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|