swanadiva
62 lines
3.3 KiB
HTML
62 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Terminal · Hostkeeper V2</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/static/css/output.css">
|
|
<link rel="stylesheet" href="/static/css/custom.css">
|
|
<link rel="stylesheet" href="/static/xterm/xterm.css">
|
|
<script src="/static/js/htmx.min.js"></script>
|
|
<script src="/static/js/alpine.min.js" defer></script>
|
|
</head>
|
|
<body class="bg-surface text-on-surface antialiased dot-grid min-h-screen">
|
|
<div class="flex min-h-screen">
|
|
{{template "nav" .}}
|
|
<div class="flex-1 flex flex-col overflow-hidden">
|
|
<header class="h-14 border-b border-outline-variant/30 flex items-center gap-2 px-6 bg-white/70 backdrop-blur-md">
|
|
<h1 class="text-lg font-semibold text-on-surface">{{.Title}}</h1>
|
|
<div class="flex-1"></div>
|
|
<button @click="addTab()"
|
|
class="p-1.5 rounded-lg hover:bg-surface-container-low text-on-surface-variant hover:text-on-surface transition-colors" title="New Tab">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
|
|
</button>
|
|
</header>
|
|
<main id="main-content" class="flex-1 flex flex-col overflow-hidden bg-[#0d1117]"
|
|
x-data="terminalManager()"
|
|
x-init="init()">
|
|
<!-- Tab bar -->
|
|
<div class="flex items-center bg-[#161b22] border-b border-[#30363d] overflow-x-auto no-scrollbar shrink-0" style="height: 36px;">
|
|
<template x-for="(tab, i) in tabs" :key="tab.id">
|
|
<div @click="switchTab(i)"
|
|
:class="activeTab === i ? 'bg-[#0d1117] text-white border-t-2 border-[#58a6ff]' : 'bg-[#161b22] text-[#8b949e] hover:text-[#c9d1d9]'"
|
|
class="flex items-center gap-1.5 px-3 text-xs cursor-pointer border-r border-[#30363d] shrink-0 select-none"
|
|
style="height: 34px; padding-top: 1px;">
|
|
<span class="w-2 h-2 rounded-full" :class="tab.connected ? 'bg-[#3fb950]' : 'bg-[#8b949e]'"></span>
|
|
<span x-text="tab.name"></span>
|
|
<button @click.stop="closeTab(i)" class="ml-0.5 p-0.5 rounded hover:bg-[#30363d] text-[#8b949e] hover:text-white transition-colors">
|
|
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Terminal containers -->
|
|
<div class="flex-1 relative">
|
|
<template x-for="(tab, i) in tabs" :key="tab.id">
|
|
<div :id="'terminal-container-' + tab.id"
|
|
x-show="activeTab === i"
|
|
class="absolute inset-0">
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<script src="/static/xterm/xterm.js"></script>
|
|
<script src="/static/js/terminal.js"></script>
|
|
</body>
|
|
</html>
|