466 lines
16 KiB
Smarty
466 lines
16 KiB
Smarty
{**
|
|
* KeyHelp Manager - Modern Client Area Template
|
|
* @author Kevin Feiler / AVVGO
|
|
* @copyright 2024 Kevin Feiler / AVVGO
|
|
*}
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
.kh-container {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
max-width: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
.kh-card {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-radius: 16px;
|
|
padding: 32px;
|
|
color: white;
|
|
margin-bottom: 24px;
|
|
box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.kh-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 200px;
|
|
height: 200px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 50%;
|
|
transform: translate(50%, -50%);
|
|
}
|
|
|
|
.kh-card-title {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
margin: 0 0 8px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.kh-card-subtitle {
|
|
font-size: 14px;
|
|
opacity: 0.9;
|
|
margin: 0;
|
|
}
|
|
|
|
.kh-login-btn {
|
|
background: white;
|
|
color: #667eea;
|
|
border: none;
|
|
padding: 14px 28px;
|
|
border-radius: 12px;
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
margin-top: 20px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.kh-login-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
|
|
color: #667eea;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.kh-info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.kh-info-card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
border: 1px solid #e5e7eb;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.kh-info-card:hover {
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.kh-info-label {
|
|
font-size: 13px;
|
|
color: #6b7280;
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.kh-info-value {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.kh-info-input {
|
|
flex: 1;
|
|
border: 2px solid #e5e7eb;
|
|
padding: 10px 14px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-family: 'SF Mono', Monaco, monospace;
|
|
transition: all 0.2s ease;
|
|
background: #f9fafb;
|
|
}
|
|
|
|
.kh-info-input:focus {
|
|
outline: none;
|
|
border-color: #667eea;
|
|
background: white;
|
|
}
|
|
|
|
.kh-icon-btn {
|
|
background: #f3f4f6;
|
|
border: none;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.kh-icon-btn:hover {
|
|
background: #667eea;
|
|
color: white;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.kh-icon-btn.success {
|
|
background: #10b981;
|
|
color: white;
|
|
}
|
|
|
|
.kh-stats-section {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.kh-stats-title {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.kh-stat-card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
border: 1px solid #e5e7eb;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.kh-stat-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.kh-stat-label {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #374151;
|
|
}
|
|
|
|
.kh-stat-value {
|
|
font-size: 13px;
|
|
color: #6b7280;
|
|
font-family: 'SF Mono', Monaco, monospace;
|
|
}
|
|
|
|
.kh-progress-bar {
|
|
height: 8px;
|
|
background: #e5e7eb;
|
|
border-radius: 100px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.kh-progress-fill {
|
|
height: 100%;
|
|
border-radius: 100px;
|
|
transition: width 0.6s ease;
|
|
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.kh-progress-fill::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
|
animation: shimmer 2s infinite;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
.kh-progress-fill.warning {
|
|
background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
|
|
}
|
|
|
|
.kh-progress-fill.danger {
|
|
background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
|
|
}
|
|
|
|
.kh-metrics-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
|
gap: 16px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.kh-metric {
|
|
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
border: 1px solid #d1d5db;
|
|
}
|
|
|
|
.kh-metric-value {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
color: #667eea;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.kh-metric-label {
|
|
font-size: 13px;
|
|
color: #6b7280;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.kh-error {
|
|
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
|
|
border: 1px solid #fca5a5;
|
|
color: #991b1b;
|
|
padding: 16px 20px;
|
|
border-radius: 12px;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.kh-badge {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 100px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
margin-left: 8px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.kh-card {
|
|
padding: 24px;
|
|
}
|
|
|
|
.kh-info-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.kh-stat-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="kh-container">
|
|
{if $error}
|
|
<div class="kh-error">
|
|
<svg width="24" height="24" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
|
|
</svg>
|
|
<div>{$error}</div>
|
|
</div>
|
|
{else}
|
|
<div class="kh-card">
|
|
<div class="kh-card-title">
|
|
<svg width="32" height="32" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"/>
|
|
</svg>
|
|
KeyHelp Hosting
|
|
<span class="kh-badge">ACTIVE</span>
|
|
</div>
|
|
<p class="kh-card-subtitle">
|
|
{$domain}
|
|
{if $template_name}
|
|
<span class="kh-badge">📋 {$template_name}</span>
|
|
{/if}
|
|
</p>
|
|
<div style="display: flex; gap: 12px; flex-wrap: wrap;">
|
|
<a href="{$login_url}" target="_blank" class="kh-login-btn">
|
|
<svg width="18" height="18" fill="currentColor" viewBox="0 0 20 20" style="display: inline-block; vertical-align: middle; margin-right: 8px;">
|
|
<path fill-rule="evenodd" d="M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
|
</svg>
|
|
Open Control Panel
|
|
</a>
|
|
{if $panel_url}
|
|
<a href="{$panel_url}" target="_blank" class="kh-login-btn" style="background: rgba(255,255,255,0.2); color: white;">
|
|
<svg width="18" height="18" fill="currentColor" viewBox="0 0 20 20" style="display: inline-block; vertical-align: middle; margin-right: 8px;">
|
|
<path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
|
|
</svg>
|
|
Admin Panel
|
|
</a>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kh-info-grid">
|
|
<div class="kh-info-card">
|
|
<div class="kh-info-label">Username</div>
|
|
<div class="kh-info-value">
|
|
<input type="text" class="kh-info-input" value="{$username}" readonly id="kh-username">
|
|
<button class="kh-icon-btn" onclick="copyToClipboard('kh-username')" title="Copy">
|
|
<svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"/>
|
|
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kh-info-card">
|
|
<div class="kh-info-label">Password</div>
|
|
<div class="kh-info-value">
|
|
<input type="password" class="kh-info-input" value="{$password}" readonly id="kh-password">
|
|
<button class="kh-icon-btn" onclick="togglePassword()" title="Show/Hide">
|
|
<svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20" id="eye-icon">
|
|
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
|
|
<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</button>
|
|
<button class="kh-icon-btn" onclick="copyToClipboard('kh-password')" title="Copy">
|
|
<svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"/>
|
|
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{if $stats}
|
|
<div class="kh-stats-section">
|
|
<div class="kh-stats-title">
|
|
<svg width="24" height="24" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"/>
|
|
</svg>
|
|
Resource Usage
|
|
</div>
|
|
|
|
<div class="kh-stat-card">
|
|
<div class="kh-stat-header">
|
|
<span class="kh-stat-label">💾 Disk Space</span>
|
|
<span class="kh-stat-value">{$stats.disk_used_formatted} / {$stats.disk_limit_formatted}</span>
|
|
</div>
|
|
<div class="kh-progress-bar">
|
|
<div class="kh-progress-fill {if $stats.disk_percent >= 90}danger{elseif $stats.disk_percent >= 75}warning{/if}" style="width: {$stats.disk_percent}%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kh-stat-card">
|
|
<div class="kh-stat-header">
|
|
<span class="kh-stat-label">📊 Bandwidth</span>
|
|
<span class="kh-stat-value">{$stats.bandwidth_used_formatted} / {$stats.bandwidth_limit_formatted}</span>
|
|
</div>
|
|
<div class="kh-progress-bar">
|
|
<div class="kh-progress-fill {if $stats.bandwidth_percent >= 90}danger{elseif $stats.bandwidth_percent >= 75}warning{/if}" style="width: {$stats.bandwidth_percent}%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kh-metrics-grid">
|
|
<div class="kh-metric">
|
|
<div class="kh-metric-value">{$stats.domains}</div>
|
|
<div class="kh-metric-label">🌐 Domains</div>
|
|
</div>
|
|
<div class="kh-metric">
|
|
<div class="kh-metric-value">{$stats.databases}</div>
|
|
<div class="kh-metric-label">🗄️ Databases</div>
|
|
</div>
|
|
<div class="kh-metric">
|
|
<div class="kh-metric-value">{$stats.email_accounts}</div>
|
|
<div class="kh-metric-label">📧 Email Accounts</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
|
|
<script>
|
|
function togglePassword() {
|
|
const field = document.getElementById('kh-password');
|
|
const icon = document.getElementById('eye-icon');
|
|
|
|
if (field.type === 'password') {
|
|
field.type = 'text';
|
|
icon.innerHTML = '<path d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z"/><path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z"/>';
|
|
} else {
|
|
field.type = 'password';
|
|
icon.innerHTML = '<path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>';
|
|
}
|
|
}
|
|
|
|
function copyToClipboard(fieldId) {
|
|
const field = document.getElementById(fieldId);
|
|
const button = event.currentTarget;
|
|
|
|
field.select();
|
|
field.setSelectionRange(0, 99999);
|
|
|
|
try {
|
|
document.execCommand('copy');
|
|
|
|
button.classList.add('success');
|
|
button.innerHTML = '<svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>';
|
|
|
|
setTimeout(() => {
|
|
button.classList.remove('success');
|
|
button.innerHTML = '<svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20"><path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"/><path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"/></svg>';
|
|
}, 2000);
|
|
} catch (err) {
|
|
console.error('Copy failed:', err);
|
|
}
|
|
|
|
window.getSelection().removeAllRanges();
|
|
}
|
|
</script>
|