57 lines
3.4 KiB
HTML
57 lines
3.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
|
|
<meta name="color-scheme" content="dark" />
|
|
<title>MrTerm</title>
|
|
<link rel="stylesheet" href="lib/xterm.css" />
|
|
<link rel="stylesheet" href="lib/app-themes.css" />
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<div id="boot"><img src="logo.png" alt="" /><div class="spinner"></div></div>
|
|
|
|
<!-- Hauptansicht: Inhalt + untere Navigation -->
|
|
<div id="main" hidden>
|
|
<main id="view"></main>
|
|
<nav id="tabs">
|
|
<button data-view="hosts"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="7" rx="2"/><rect x="3" y="13" width="18" height="7" rx="2"/><path d="M7 7.5h.01M7 16.5h.01"/></svg><span data-t>Hosts</span></button>
|
|
<button data-view="keys"><svg viewBox="0 0 24 24"><circle cx="8" cy="15" r="4"/><path d="M11 12l9-9M16 7l3 3M14 9l2 2"/></svg><span data-t>Keys</span></button>
|
|
<button data-view="snippets"><svg viewBox="0 0 24 24"><path d="M8 7l-5 5 5 5M16 7l5 5-5 5"/></svg><span data-t>Snippets</span></button>
|
|
<button data-view="settings"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.8-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 11-4 0v-.1a1.7 1.7 0 00-1.1-1.5 1.7 1.7 0 00-1.8.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.8 1.7 1.7 0 00-1.5-1H3a2 2 0 110-4h.1a1.7 1.7 0 001.5-1.1 1.7 1.7 0 00-.3-1.8l-.1-.1a2 2 0 112.8-2.8l.1.1a1.7 1.7 0 001.8.3H9a1.7 1.7 0 001-1.5V3a2 2 0 114 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.8V9a1.7 1.7 0 001.5 1H21a2 2 0 110 4h-.1a1.7 1.7 0 00-1.5 1z"/></svg><span data-t>Settings</span></button>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Terminal im Vollbild -->
|
|
<div id="termScreen" hidden>
|
|
<header class="term-head">
|
|
<button class="icon" id="termBack" aria-label="Back"><svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg></button>
|
|
<button class="term-title" id="termTitle"><span class="dot"></span><span class="name"></span><svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg></button>
|
|
<button class="icon" id="termKbd" aria-label="Keyboard"><svg viewBox="0 0 24 24"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 10h.01M10 10h.01M14 10h.01M18 10h.01M7 14h10"/></svg></button>
|
|
<button class="icon" id="termMenu" aria-label="Menu"><svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg></button>
|
|
</header>
|
|
<div id="terms"></div>
|
|
<div id="keybar"></div>
|
|
</div>
|
|
|
|
<div id="lockScreen" hidden></div>
|
|
<div id="layer"></div>
|
|
<div id="toasts"></div>
|
|
|
|
<script>
|
|
// Fehler beim Laden sichtbar machen statt endlos den Ladekreis zu zeigen
|
|
window.addEventListener('error', (e) => {
|
|
const b = document.getElementById('boot');
|
|
if (b && !b.hidden) b.innerHTML = '<div style="color:#ff5f6d;padding:24px;text-align:center;font:14px system-ui">' + String(e.message || e.error).replace(/</g, '<') + '</div>';
|
|
});
|
|
</script>
|
|
<script src="lib/capacitor.js"></script>
|
|
<script src="lib/i18n.js"></script>
|
|
<script src="lib/themes.js"></script>
|
|
<script src="lib/xterm.js"></script>
|
|
<script src="lib/addon-fit.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|