Hugging Face's logo

Spaces:
vortexa64
/
vps
Paused

App Files Community
vortexa64 commited on
Commit
086a349
·
verified ·
1 Parent(s): 8f2baa3

Create templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +194 -0
templates/index.html ADDED
@@ -0,0 +1,194 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>VPS KW Panel</title>
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
8
+ <style>
9
+ :root {
10
+ --bg: #f7f8fa;
11
+ --card: #ffffff;
12
+ --accent: #3b82f6;
13
+ --text: #1e293b;
14
+ --muted: #94a3b8;
15
+ --border: #e2e8f0;
16
+ }
17
+ body {
18
+ font-family: 'Inter', sans-serif;
19
+ background-color: var(--bg);
20
+ color: var(--text);
21
+ margin: 0;
22
+ padding: 0;
23
+ }
24
+ header {
25
+ text-align: center;
26
+ padding: 1.2rem;
27
+ font-size: 1.4rem;
28
+ font-weight: 600;
29
+ background-color: #ffffff;
30
+ box-shadow: 0 2px 4px rgba(0,0,0,0.05);
31
+ }
32
+ nav {
33
+ display: flex;
34
+ justify-content: center;
35
+ gap: 1rem;
36
+ background-color: #ffffff;
37
+ padding: 0.8rem;
38
+ border-bottom: 1px solid var(--border);
39
+ }
40
+ nav button {
41
+ background: none;
42
+ border: none;
43
+ font-weight: 600;
44
+ color: var(--muted);
45
+ padding: 0.5rem 1rem;
46
+ border-radius: 0.5rem;
47
+ transition: all 0.2s ease;
48
+ cursor: pointer;
49
+ }
50
+ nav button.active,
51
+ nav button:hover {
52
+ background-color: var(--accent);
53
+ color: white;
54
+ }
55
+ .tab {
56
+ display: none;
57
+ max-width: 600px;
58
+ margin: 2rem auto;
59
+ padding: 1rem;
60
+ background: var(--card);
61
+ border-radius: 12px;
62
+ box-shadow: 0 4px 10px rgba(0,0,0,0.03);
63
+ }
64
+ .tab.active {
65
+ display: block;
66
+ }
67
+ input, textarea, button {
68
+ width: 100%;
69
+ padding: 0.75rem;
70
+ margin: 0.5rem 0;
71
+ font-size: 1rem;
72
+ border: 1px solid var(--border);
73
+ border-radius: 8px;
74
+ transition: 0.2s;
75
+ }
76
+ input:focus, textarea:focus {
77
+ outline: none;
78
+ border-color: var(--accent);
79
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
80
+ }
81
+ button {
82
+ background-color: var(--accent);
83
+ color: white;
84
+ font-weight: 600;
85
+ border: none;
86
+ cursor: pointer;
87
+ }
88
+ button:hover {
89
+ background-color: #2563eb;
90
+ }
91
+ .console-box {
92
+ background: #0f172a;
93
+ color: #38bdf8;
94
+ font-family: monospace;
95
+ padding: 1rem;
96
+ border-radius: 8px;
97
+ height: 200px;
98
+ overflow-y: auto;
99
+ white-space: pre-wrap;
100
+ }
101
+ .file-entry {
102
+ display: flex;
103
+ justify-content: space-between;
104
+ background: #f1f5f9;
105
+ border: 1px solid #e2e8f0;
106
+ padding: 0.5rem;
107
+ margin: 0.25rem 0;
108
+ border-radius: 6px;
109
+ }
110
+ </style>
111
+ </head>
112
+ <body>
113
+
114
+ <header>VPS KW Panel</header>
115
+
116
+ <nav>
117
+ <button onclick="showTab('setup')" id="tab-setup" class="active">Setup</button>
118
+ <button onclick="showTab('console')" id="tab-console">Console</button>
119
+ <button onclick="showTab('filemanager')" id="tab-filemanager">File Manager</button>
120
+ </nav>
121
+
122
+ <div id="setup" class="tab active">
123
+ <h2>Setup</h2>
124
+ <input id="username" placeholder="Username">
125
+ <input id="password" type="password" placeholder="Password">
126
+ <input id="startcmd" placeholder="Start command (e.g. python main.py)">
127
+ <button onclick="saveSetup()">Save</button>
128
+ </div>
129
+
130
+ <div id="console" class="tab">
131
+ <h2>Console</h2>
132
+ <div class="console-box" id="output">Output will appear here...</div>
133
+ <input id="consoleInput" placeholder="Your input here...">
134
+ <button onclick="sendInput()">Send</button>
135
+ <button onclick="startConsole()">Start</button>
136
+ <button onclick="stopConsole()">Stop</button>
137
+ </div>
138
+
139
+ <div id="filemanager" class="tab">
140
+ <h2>File Manager</h2>
141
+ <input type="file" id="uploadFile" />
142
+ <button onclick="uploadFile()">Upload</button>
143
+ <input id="newName" placeholder="New file or folder name">
144
+ <button onclick="createFile()">Create File</button>
145
+ <button onclick="createFolder()">Create Folder</button>
146
+ <div id="fileList">
147
+ <!-- List of files will appear here -->
148
+ </div>
149
+ </div>
150
+
151
+ <script>
152
+ function showTab(tab) {
153
+ document.querySelectorAll(".tab").forEach(el => el.classList.remove("active"));
154
+ document.querySelectorAll("nav button").forEach(el => el.classList.remove("active"));
155
+ document.getElementById(tab).classList.add("active");
156
+ document.getElementById("tab-" + tab).classList.add("active");
157
+ }
158
+
159
+ function saveSetup() {
160
+ alert("Saved (dummy)!");
161
+ }
162
+
163
+ function startConsole() {
164
+ alert("Starting script (dummy)!");
165
+ }
166
+
167
+ function stopConsole() {
168
+ alert("Script stopped (dummy)!");
169
+ }
170
+
171
+ function sendInput() {
172
+ const val = document.getElementById("consoleInput").value;
173
+ const outputBox = document.getElementById("output");
174
+ outputBox.textContent += "\n> " + val;
175
+ document.getElementById("consoleInput").value = "";
176
+ }
177
+
178
+ function uploadFile() {
179
+ alert("Uploading file... (dummy)");
180
+ }
181
+
182
+ function createFile() {
183
+ const name = document.getElementById("newName").value;
184
+ document.getElementById("fileList").innerHTML += `<div class="file-entry">${name} <span>[📝 ✏️ ❌]</span></div>`;
185
+ }
186
+
187
+ function createFolder() {
188
+ const name = document.getElementById("newName").value;
189
+ document.getElementById("fileList").innerHTML += `<div class="file-entry"><b>${name}/</b> <span>[📁 ✏️ ❌]</span></div>`;
190
+ }
191
+ </script>
192
+
193
+ </body>
194
+ </html>