main.html
156 lines1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{block "title" .}}Congo Dev{{end}}</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/htmx-ext-sse@2.3.0/sse.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/go.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/bash.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/javascript.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/typescript.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/json.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/xml.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/css.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/yaml.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/dockerfile.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/makefile.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/markdown.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/sql.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/python.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/ruby.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/rust.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/ini.min.js"></script>
{{frontend_script}}
<style>
body { background: #f1f5f9; }
.ring-gauge { transition: stroke-dasharray 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
body.has-drawer #agent-drawer { translate: 0 !important; }
body.has-drawer #drawer-overlay { opacity: 1 !important; pointer-events: auto !important; }
@keyframes soft-pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
.status-pulse { animation: soft-pulse 2s ease-in-out infinite; }
.bar-fill { transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.source-lines {
display: grid;
grid-template-columns: auto 1fr;
}
.source-lines .line-nums {
text-align: right;
padding: 1rem 0.75rem 1rem 1rem;
user-select: none;
white-space: pre;
color: rgba(148, 163, 184, 0.5);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 0.75rem;
line-height: 1.7;
border-right: 1px solid #f1f5f9;
}
.source-lines pre {
margin: 0;
padding: 1rem;
font-size: 0.75rem;
line-height: 1.7;
overflow-x: auto;
}
.source-lines pre code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
@media (max-width: 639px) {
body.has-drawer { overflow: hidden; }
}
</style>
</head>
<body class="min-h-screen">
<!-- Navbar -->
<nav class="bg-white border-b border-slate-200/80 sticky top-0 z-50 px-5 h-12 flex items-center">
<div class="flex-1">
<a href="/" class="flex items-center gap-2 text-sm font-bold text-slate-800 hover:text-indigo-600 transition-colors">
<div class="w-6 h-6 rounded-md bg-indigo-600 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /></svg>
</div>
{{app_name}}
</a>
</div>
{{if auth.CurrentUser}}
<div class="flex items-center gap-0.5">
{{if dashboard.HasDomain}}
<span class="text-[10px] text-slate-300 font-mono hidden lg:inline mr-2">{{dashboard.Domain}}</span>
{{end}}
<a href="/coder/" target="_blank" class="inline-flex items-center gap-1.5 px-2.5 h-7 rounded-md text-[11px] font-medium text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 transition-colors" title="Open Code Editor">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
<span class="hidden sm:inline">Code</span>
</a>
<button class="inline-flex items-center gap-1.5 px-2.5 h-7 rounded-md text-[11px] font-medium text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 transition-colors" onclick="document.body.classList.toggle('has-drawer')">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456z" /></svg>
<span class="hidden sm:inline">Agent</span>
</button>
<div class="dropdown dropdown-end ml-1">
<div tabindex="0" role="button" class="inline-flex items-center gap-1.5 px-1.5 h-7 rounded-md text-slate-400 hover:bg-slate-100 transition-colors cursor-pointer">
<div class="w-5 h-5 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center text-[9px] font-bold uppercase">
{{slice auth.CurrentUser.Username 0 1}}
</div>
<span class="hidden md:inline text-[11px] text-slate-500">{{auth.CurrentUser.Username}}</span>
</div>
<ul tabindex="0" class="dropdown-content menu bg-white rounded-lg z-[1] w-32 p-1 shadow-lg border border-slate-200 mt-1">
<li><form method="POST" action="/logout"><button type="submit" class="text-red-500 text-[11px]">Logout</button></form></li>
</ul>
</div>
</div>
{{end}}
</nav>
<!-- Content -->
<main class="max-w-[1100px] mx-auto px-4 py-4">
{{block "content" .}}{{end}}
</main>
<!-- Agent Drawer Overlay -->
<div id="drawer-overlay" class="fixed inset-0 bg-black/15 z-[55] opacity-0 pointer-events-none transition-opacity duration-200"
onclick="document.body.classList.remove('has-drawer')"></div>
<!-- Agent Drawer -->
{{template "agent-drawer.html" .}}
<script>
hljs.configure({ ignoreUnescapedHTML: true });
function highlightCode() {
document.querySelectorAll('pre code[class*="language-"]').forEach(function(el) {
if (!el.dataset.highlighted) hljs.highlightElement(el);
});
}
highlightCode();
document.body.addEventListener('htmx:afterSettle', function() { highlightCode(); });
</script>
<script>
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') document.body.classList.remove('has-drawer');
if (e.key === '/' && !e.ctrlKey && !e.metaKey &&
document.activeElement.tagName !== 'INPUT' &&
document.activeElement.tagName !== 'TEXTAREA' &&
document.activeElement.tagName !== 'SELECT') {
e.preventDefault();
document.body.classList.add('has-drawer');
setTimeout(function() {
var input = document.getElementById('agent-input');
if (input) input.focus();
}, 250);
}
});
</script>
</body>
</html>