Joseph.Rawlings
16cd5f05de
- Updated serverplaceholder.blade.php to enhance loading skeletons for server details. - Added navigation breadcrumbs to statistics, subdomain, and system views for better user experience. - Improved loading indicators for CPU, network, memory, and disk charts in statistics.blade.php. - Refined storage.blade.php layout with section dividers and improved drive display, including bus type indicators and quota usage. - Enhanced VNC and Xterm popups with a new header design, loading animations, and reconnect functionality. - Added error handling for VNC and Xterm connections to inform users when unable to connect.
149 lines
4.8 KiB
PHP
149 lines
4.8 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<title>Xterm.js Console - {{ $server->hostname }}</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: #0a0a0a;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
color: #e5e5e5;
|
|
}
|
|
.console-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 36px;
|
|
padding: 0 12px;
|
|
background: #1a1a2e;
|
|
border-bottom: 1px solid #2a2a3e;
|
|
user-select: none;
|
|
-webkit-app-region: drag;
|
|
}
|
|
.console-header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
color: #a0a0b0;
|
|
}
|
|
.console-header-left .dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #6366f1;
|
|
box-shadow: 0 0 6px rgba(99, 102, 241, 0.4);
|
|
}
|
|
.console-header-left strong {
|
|
color: #e5e5e5;
|
|
font-weight: 600;
|
|
}
|
|
.console-header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
.console-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 4px 10px;
|
|
border: 1px solid #3a3a4e;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
color: #c0c0d0;
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
.console-btn:hover {
|
|
background: #2a2a3e;
|
|
border-color: #4a4a5e;
|
|
color: #ffffff;
|
|
}
|
|
.console-btn svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
.console-btn.close-btn:hover {
|
|
background: #7f1d1d;
|
|
border-color: #991b1b;
|
|
}
|
|
iframe {
|
|
width: 100%;
|
|
height: calc(100% - 36px);
|
|
border: none;
|
|
display: block;
|
|
}
|
|
.console-loading {
|
|
position: absolute;
|
|
top: 36px;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #0a0a0a;
|
|
z-index: 10;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
.console-loading.hidden {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
.console-spinner {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: 3px solid #2a2a3e;
|
|
border-top-color: #6366f1;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
.console-loading-text {
|
|
margin-top: 12px;
|
|
font-size: 13px;
|
|
color: #707080;
|
|
}
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="console-header">
|
|
<div class="console-header-left">
|
|
<span class="dot"></span>
|
|
<span>Xterm.js — <strong>{{ $server->hostname }}</strong></span>
|
|
</div>
|
|
<div class="console-header-right">
|
|
<button class="console-btn" onclick="document.getElementById('xterm-frame').src = document.getElementById('xterm-frame').src" title="Reconnect">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h5M20 20v-5h-5M4 9a9 9 0 0115.3-5.3M20 15a9 9 0 01-15.3 5.3"/></svg>
|
|
Reconnect
|
|
</button>
|
|
<button class="console-btn close-btn" onclick="window.close()" title="Close">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="console-loading" id="xterm-loading">
|
|
<div class="console-spinner"></div>
|
|
<div class="console-loading-text">Connecting to console…</div>
|
|
</div>
|
|
<iframe id="xterm-frame" src="{{ $xterm }}" allowfullscreen onload="document.getElementById('xterm-loading').classList.add('hidden')"></iframe>
|
|
</body>
|
|
</html>
|