fb35f989b8
Replaces all direct usage of browser globals and infrastructure service imports in UI components with dedicated application/state backend hooks. Introduces lint rules to prevent direct access to backend bridges and localStorage from components, promoting a cleaner separation of concerns and improved maintainability. Moves user preferences (e.g., port forwarding form mode) to persistent state hooks, updates port forwarding and SFTP logic to rely on backend hooks, and centralizes logging through a logger utility. Cleans up debug code and removes obsolete scripts from HTML. Improves testability, prepares for alternative backend implementations, and enforces architectural boundaries.
117 lines
3.5 KiB
HTML
Executable File
117 lines
3.5 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en" class="h-full">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta http-equiv="Content-Security-Policy"
|
|
content="default-src 'self'; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdn.jsdelivr.net; font-src 'self' https://fonts.gstatic.com; connect-src 'self' data: blob: ws: wss: https:; img-src 'self' data: https:;" />
|
|
<title>netcatty SSH</title>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
|
|
rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css" />
|
|
<style>
|
|
/* Load extended Unicode ranges for terminal box drawing characters */
|
|
@font-face {
|
|
font-family: 'JetBrains Mono Extended';
|
|
src: local('JetBrains Mono'), local('JetBrainsMono-Regular');
|
|
unicode-range: U+2500-257F, U+2580-259F, U+25A0-25FF, U+2700-27BF;
|
|
}
|
|
|
|
:root {
|
|
--background: 216 33% 96%;
|
|
--foreground: 222 47% 12%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 222 47% 12%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222 47% 12%;
|
|
--primary: 208 100% 50%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 220 16% 90%;
|
|
--secondary-foreground: 222 47% 12%;
|
|
--muted: 220 16% 90%;
|
|
--muted-foreground: 220 10% 45%;
|
|
--accent: var(--primary);
|
|
--accent-foreground: 222 47% 12%;
|
|
--destructive: 0 70% 50%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 220 16% 82%;
|
|
--input: 220 16% 82%;
|
|
--ring: 208 100% 50%;
|
|
--radius: 0.65rem;
|
|
}
|
|
|
|
.dark {
|
|
--background: 220 28% 8%;
|
|
--foreground: 210 40% 95%;
|
|
--card: 220 22% 12%;
|
|
--card-foreground: 210 40% 95%;
|
|
--popover: 220 22% 12%;
|
|
--popover-foreground: 210 40% 95%;
|
|
--primary: 200 100% 61%;
|
|
--primary-foreground: 220 40% 96%;
|
|
--secondary: 220 16% 16%;
|
|
--secondary-foreground: 210 40% 90%;
|
|
--muted: 220 16% 16%;
|
|
--muted-foreground: 220 10% 70%;
|
|
--accent: var(--primary);
|
|
--accent-foreground: 220 40% 96%;
|
|
--destructive: 0 70% 50%;
|
|
--destructive-foreground: 210 40% 96%;
|
|
--border: 220 22% 18%;
|
|
--input: 220 22% 18%;
|
|
--ring: 200 100% 61%;
|
|
--radius: 0.65rem;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Space Grotesk', 'Inter', sans-serif;
|
|
}
|
|
|
|
/* Global Modern Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: hsl(var(--muted-foreground) / 0.3);
|
|
border-radius: 99px;
|
|
border: 3px solid transparent;
|
|
background-clip: content-box;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: hsl(var(--muted-foreground) / 0.5);
|
|
background-clip: content-box;
|
|
}
|
|
|
|
::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|
|
|
|
/* Utility to hide scrollbar */
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="/index.css">
|
|
</head>
|
|
|
|
<body class="bg-background text-foreground overflow-hidden antialiased h-screen w-screen">
|
|
<div id="root" class="h-full w-full"></div>
|
|
<script type="module" src="/index.tsx"></script>
|
|
</body>
|
|
|
|
</html>
|