Sahaj33 commited on
Commit
55a97ef
·
verified ·
1 Parent(s): 16df8d2

also create other pages. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +506 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mc Server By Sahaj33
3
- emoji: 👀
4
- colorFrom: gray
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: mc-server-by-sahaj33
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,506 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Sahaj33 Server Manager</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ 'dark-base': '#1e1e2e',
15
+ 'dark-surface': '#27293d',
16
+ 'dark-element': '#313348',
17
+ 'teal-accent': '#00b894',
18
+ },
19
+ borderRadius: {
20
+ '2xl': '1rem',
21
+ },
22
+ fontFamily: {
23
+ sans: ['Inter', 'sans-serif'],
24
+ mono: ['JetBrains Mono', 'monospace'],
25
+ },
26
+ }
27
+ }
28
+ }
29
+ </script>
30
+ <style>
31
+ body {
32
+ overflow: hidden;
33
+ background-color: #1e1e2e;
34
+ color: #e5e7eb;
35
+ }
36
+
37
+ .sidebar-link.active {
38
+ background-color: #27293d;
39
+ border-left: 4px solid #00b894;
40
+ }
41
+
42
+ .info-card {
43
+ transition: all 0.2s ease;
44
+ }
45
+
46
+ .info-card:hover {
47
+ transform: translateY(-2px);
48
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
49
+ }
50
+
51
+ .log-container {
52
+ scrollbar-width: thin;
53
+ scrollbar-color: rgba(0, 184, 148, 0.5) transparent;
54
+ }
55
+
56
+ .log-container::-webkit-scrollbar {
57
+ width: 6px;
58
+ }
59
+
60
+ .log-container::-webkit-scrollbar-track {
61
+ background: transparent;
62
+ }
63
+
64
+ .log-container::-webkit-scrollbar-thumb {
65
+ background-color: rgba(0, 184, 148, 0.5);
66
+ border-radius: 3px;
67
+ }
68
+
69
+ .skeleton-loader {
70
+ animation: skeleton 1.5s infinite ease-in-out;
71
+ }
72
+
73
+ @keyframes skeleton {
74
+ 0% { background-position: -200% 0; }
75
+ 100% { background-position: 200% 0; }
76
+ }
77
+
78
+ .btn-primary {
79
+ transition: all 0.2s ease;
80
+ }
81
+
82
+ .btn-primary:hover {
83
+ transform: translateY(-2px);
84
+ box-shadow: 0 6px 12px rgba(0, 184, 148, 0.3);
85
+ }
86
+
87
+ .btn-primary:active {
88
+ transform: translateY(0);
89
+ }
90
+
91
+ .toast {
92
+ animation: fadeIn 0.3s ease-in-out, fadeOut 0.3s 2s ease-in-out forwards;
93
+ z-index: 50;
94
+ }
95
+
96
+ @keyframes fadeIn {
97
+ from { opacity: 0; transform: translateY(-20px); }
98
+ to { opacity: 1; transform: translateY(0); }
99
+ }
100
+
101
+ @keyframes fadeOut {
102
+ from { opacity: 1; }
103
+ to { opacity: 0; visibility: hidden; }
104
+ }
105
+
106
+ .tab-indicator {
107
+ height: 3px;
108
+ transition: left 0.3s ease, width 0.3s ease;
109
+ }
110
+
111
+ .mod-card:hover .mod-buttons {
112
+ opacity: 1;
113
+ }
114
+
115
+ .chart {
116
+ min-height: 180px;
117
+ }
118
+ </style>
119
+ </head>
120
+ <body class="flex h-screen font-sans bg-dark-base">
121
+ <!-- Top Bar -->
122
+ <div class="absolute top-0 left-0 right-0 h-16 bg-dark-element flex items-center justify-between px-6 border-b border-dark-surface z-50">
123
+ <div class="flex items-center">
124
+ <div class="w-8 h-8 bg-teal-accent rounded-full mr-3 flex items-center justify-center">
125
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 text-dark-element">
126
+ <path d="M11.47 3.84a.75.75 0 011.06 0l8.69 8.69a.75.75 0 101.06-1.06l-8.689-8.69a2.25 2.25 0 00-3.182 0l-8.69 8.69a.75.75 0 001.061 1.06l8.69-8.69z" />
127
+ <path d="M12 5.432l8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 01-.75-.75v-4.5a.75.75 0 00-.75-.75h-3a.75.75 0 00-.75.75V21a.75.75 0 01-.75.75H5.625a1.875 1.875 0 01-1.875-1.875v-6.198a2.29 2.29 0 00.091-.086L12 5.43z" />
128
+ </svg>
129
+ </div>
130
+ <h1 class="text-xl font-bold">Sahaj33 Server Manager</h1>
131
+ </div>
132
+
133
+ <div class="flex items-center space-x-4">
134
+ <button id="theme-toggle" class="p-2 rounded-lg hover:bg-dark-surface transition-colors">
135
+ <div id="light-icon">
136
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
137
+ <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
138
+ </svg>
139
+ </div>
140
+ </button>
141
+ <div class="flex space-x-2">
142
+ <button class="w-8 h-8 flex items-center justify-center hover:bg-gray-600 rounded-full transition-colors">
143
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
144
+ <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
145
+ </svg>
146
+ </button>
147
+ <button class="w-8 h-8 flex items-center justify-center hover:bg-gray-600 rounded-full transition-colors">
148
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
149
+ <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
150
+ </svg>
151
+ </button>
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <!-- Sidebar -->
157
+ <div class="w-60 mt-16 flex-shrink-0 overflow-y-auto bg-dark-element h-full py-6">
158
+ <div class="px-6">
159
+ <div class="space-y-1">
160
+ <!-- Sidebar Links -->
161
+ <button class="sidebar-link active w-full flex items-center py-3 px-6 rounded-2xl font-medium text-left transition-colors">
162
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3">
163
+ <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
164
+ </svg>
165
+ Dashboard
166
+ </button>
167
+ <button class="sidebar-link w-full flex items-center py-3 px-6 rounded-2xl font-medium text-left hover:bg-dark-surface transition-colors">
168
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3">
169
+ <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
170
+ </svg>
171
+ Servers
172
+ </button>
173
+ <button class="sidebar-link w-full flex items-center py-3 px-6 rounded-2xl font-medium text-left hover:bg-dark-surface transition-colors">
174
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3">
175
+ <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
176
+ </svg>
177
+ Create Server
178
+ </button>
179
+ <button class="sidebar-link w-full flex items-center py-3 px-6 rounded-2xl font-medium text-left hover:bg-dark-surface transition-colors">
180
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3">
181
+ <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
182
+ </svg>
183
+ Console
184
+ </button>
185
+ <button class="sidebar-link w-full flex items-center py-3 px-6 rounded-2xl font-medium text-left hover:bg-dark-surface transition-colors">
186
+ <svg xmlns="http://www.w2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3">
187
+ <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
188
+ </svg>
189
+ Mods
190
+ </button>
191
+ <button class="sidebar-link w-full flex items-center py-3 px-6 rounded-2xl font-medium text-left hover:bg-dark-surface transition-colors">
192
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3">
193
+ <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75l3 3m0 0l3-3m-3 3v-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
194
+ </svg>
195
+ Backups
196
+ </button>
197
+ <button class="sidebar-link w-full flex items-center py-3 px-6 rounded-2xl font-medium text-left hover:bg-dark-surface transition-colors">
198
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3">
199
+ <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
200
+ </svg>
201
+ Performance
202
+ </button>
203
+ <button class="sidebar-link w-full flex items-center py-3 px-6 rounded-2xl font-medium text-left hover:bg-dark-surface transition-colors">
204
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3">
205
+ <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5V6.75a4.5 4.5 0 119 0v3.75M3.75 21.75h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H3.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
206
+ </svg>
207
+ Tunnel
208
+ </button>
209
+ <button class="sidebar-link w-full flex items-center py-3 px-6 rounded-2xl font-medium text-left hover:bg-dark-surface transition-colors">
210
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3">
211
+ <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
212
+ <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
213
+ </svg>
214
+ Settings
215
+ </button>
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- Main Content Area -->
221
+ <div class="flex-1 flex flex-col overflow-hidden mt-16">
222
+ <div class="flex-1 overflow-y-auto">
223
+ <!-- Dashboard Screen -->
224
+ <div id="dashboard-content" class="p-8">
225
+ <!-- Server Header -->
226
+ <div class="flex justify-between mb-8">
227
+ <div>
228
+ <h2 class="text-2xl font-bold flex items-center">
229
+ Survival Server
230
+ <span class="ml-4 bg-green-900/20 border border-green-600/30 text-green-400 text-xs font-medium px-3 py-1 rounded-full uppercase">🟢 Running</span>
231
+ </h2>
232
+ <p class="text-gray-400 mt-2">sm.sahaj33.com</p>
233
+ </div>
234
+
235
+ <div class="flex space-x-4">
236
+ <button class="btn-primary bg-teal-accent hover:bg-teal-600 text-white font-medium px-5 py-2.5 rounded-2xl transition-all">
237
+ Start Server
238
+ </button>
239
+ <button class="btn-primary bg-orange-600 hover:bg-orange-700 text-white font-medium px-5 py-2.5 rounded-2xl transition-all">
240
+ Stop Server
241
+ </button>
242
+ <button class="btn-primary bg-purple-600 hover:bg-purple-700 text-white font-medium px-5 py-2.5 rounded-2xl transition-all">
243
+ Restart Server
244
+ </button>
245
+ <button class="bg-dark-element hover:bg-gray-700 text-gray-300 font-medium px-4 py-2.5 rounded-2xl transition-colors">
246
+ Reload
247
+ </button>
248
+ </div>
249
+ </div>
250
+
251
+ <!-- Server Stats Grid -->
252
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
253
+ <div class="info-card bg-dark-element rounded-2xl p-6 hover:shadow-md focus:shadow-md transition-shadow">
254
+ <div class="flex justify-between">
255
+ <div>
256
+ <h3 class="text-md font-semibold text-gray-400">Public IP</h3>
257
+ <p class="text-xl mt-2 bg-gradient-to-r from-teal-400 to-teal-500 bg-clip-text text-transparent font-medium">
258
+ 123.ngrok.io
259
+ </p>
260
+ </div>
261
+ <button class="p-2 hover:bg-gray-700 rounded-md transition-colors" title="Copy to Clipboard">
262
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 text-gray-400">
263
+ <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
264
+ </svg>
265
+ </button>
266
+ </div>
267
+ </div>
268
+
269
+ <div class="info-card bg-dark-element rounded-2xl p-6 hover:shadow-md focus:shadow-md transition-shadow">
270
+ <div>
271
+ <h3 class="text-md font-semibold text-gray-400">LAN IP & Port</h3>
272
+ <p class="text-xl mt-2">
273
+ 192.168.1.42:25565
274
+ </p>
275
+ </div>
276
+ </div>
277
+
278
+ <div class="info-card bg-dark-element rounded-2xl p-6 hover:shadow-md focus:shadow-md transition-shadow">
279
+ <div class="flex justify-between">
280
+ <div>
281
+ <h3 class="text-md font-semibold text-gray-400">Edition</h3>
282
+ <p class="text-xl mt-2">Java Edition</p>
283
+ </div>
284
+ <div class="text-right">
285
+ <h3 class="text-md font-semibold text-gray-400">Version</h3>
286
+ <p class="text-xl mt-2">1.19.2</p>
287
+ </div>
288
+ </div>
289
+ </div>
290
+
291
+ <div class="info-card bg-dark-element rounded-2xl p-6 hover:shadow-md focus:shadow-md transition-shadow">
292
+ <div>
293
+ <h3 class="text-md font-semibold text-gray-400">Players Online</h3>
294
+ <div class="mt-2 flex items-center">
295
+ <span class="text-2xl font-bold">8</span>
296
+ <span class="text-sm text-gray-400 ml-2">/ 20 players</span>
297
+ </div>
298
+ </div>
299
+ </div>
300
+ </div>
301
+
302
+ <!-- Players -->
303
+ <div class="bg-dark-element rounded-2xl p-6 mb-8">
304
+ <div class="flex justify-between items-center mb-6">
305
+ <h2 class="text-xl font-bold">Online Players</h2>
306
+ <div class="text-gray-400">View full player list</div>
307
+ </div>
308
+
309
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-6">
310
+ <!-- Sample Player Cards -->
311
+ <div class="text-center">
312
+ <div class="bg-gray-700 rounded-2xl h-20 mb-3 mx-auto flex items-center justify-center" style="width: 20px;">
313
+ <!-- Player head placeholder -->
314
+ <div class="w-12 h-12 rounded-full overflow-hidden">
315
+ <!-- Minecraft head graphic -->
316
+ <div class="w-full h-full bg-gradient-to-b from-gray-500 to-gray-700"></div>
317
+ </div>
318
+ </div>
319
+ <p class="text-sm font-medium">Sahaj33</p>
320
+ <p class="text-xs text-gray-400">Playtime: 4h</p>
321
+ </div>
322
+
323
+ <!-- More players ... -->
324
+ <div class="text-center">
325
+ <div class="bg-gray-700 rounded-2xl h-20 mb-3 mx-auto flex items-center justify-center" style="width: 20px;">
326
+ <div class="w-12 h-12 rounded-full overflow-hidden">
327
+ <div class="w-full h-full bg-gradient-to-b from-yellow-400 to-yellow-600"></div>
328
+ </div>
329
+ </div>
330
+ <p class="text-sm font-medium">EnderCat</p>
331
+ <p class="text-xs text-gray-400">Playtime: 2h</p>
332
+ </div>
333
+
334
+ <div class="text-center">
335
+ <div class="bg-gray-700 rounded-2xl h-20 mb-3 mx-auto flex items-center justify-center" style="width: 20px;">
336
+ <div class="w-12 h-12 rounded-full overflow-hidden">
337
+ <div class="w-full h-full bg-gradient-to-b from-blue-400 to-blue-600"></div>
338
+ </div>
339
+ </div>
340
+ <p class="text-sm font-medium">BuilderBob</p>
341
+ <p class="text-xs text-gray-400">Playtime: 6h</p>
342
+ </div>
343
+ </div>
344
+ </div>
345
+
346
+ <!-- Active Server Settings -->
347
+ <div class="bg-dark-element rounded-2xl p-6">
348
+ <div class="flex justify-between items-center mb-6">
349
+ <h2 class="text-xl font-bold">Active Settings</h2>
350
+ <div class="text-sm text-gray-400">Changed: 2 days ago</div>
351
+ </div>
352
+
353
+ <div class="flex flex-wrap gap-4">
354
+ <div class="px-4 py-2 bg-dark-surface rounded-full text-sm">
355
+ Difficulty: Normal
356
+ </div>
357
+ <div class="px-4 py-2 bg-dark-surface rounded-full text-sm">
358
+ Gamemode: Survival
359
+ </div>
360
+ <div class="px-4 py-2 bg-dark-surface rounded-full text-sm">
361
+ PVP: Enabled
362
+ </div>
363
+ <div class="px-4 py-2 bg-dark-surface rounded-full text-sm">
364
+ Hardcore: Disabled
365
+ </div>
366
+ <div class="px-4 py-2 bg-dark-surface rounded-full text-sm">
367
+ Spawn Protection: Enabled
368
+ </div>
369
+ <div class="px-4 py-2 bg-dark-surface rounded-full text-sm">
370
+ Level Seed: MountainSurvival
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </div>
375
+
376
+ <!-- Servers Screen (Hidden) -->
377
+ <div id="servers-content" class="p-8 hidden">
378
+ <!-- Servers Screen Content -->
379
+ </div>
380
+
381
+ <!-- Create Server Screen (Hidden) -->
382
+ <div id="create-server-content" class="p-8 hidden">
383
+ <!-- Create Server Wizard -->
384
+ </div>
385
+
386
+ <!-- Console Screen (Hidden) -->
387
+ <div id="console-content" class="p-8 hidden">
388
+ <!-- Console Content -->
389
+ </div>
390
+
391
+ <!-- Mods Screen (Hidden) -->
392
+ <div id="mods-content" class="p-8 hidden">
393
+ <!-- Mods Content -->
394
+ </div>
395
+
396
+ <!-- Backups Screen (Hidden) -->
397
+ <div id="backups-content" class="p-8 hidden">
398
+ <!-- Backups Content -->
399
+ </div>
400
+
401
+ <!-- Performance Screen (Hidden) -->
402
+ <div id="performance-content" class="p-8 hidden">
403
+ <!-- Performance Content -->
404
+ </div>
405
+
406
+ <!-- Tunnel Screen (Hidden) -->
407
+ <div id="tunnel-content" class="p-8 hidden">
408
+ <!-- Tunnel Content -->
409
+ </div>
410
+
411
+ <!-- Settings Screen (Hidden) -->
412
+ <div id="settings-content" class="p-8 hidden">
413
+ <!-- Settings Content -->
414
+ </div>
415
+ </div>
416
+
417
+ <!-- Footer -->
418
+ <div class="bg-dark-element py-3 px-6 text-xs text-gray-500 flex justify-between">
419
+ <div>© 2023 Sahaj33 Server Manager | v3.4.2</div>
420
+ <div>Last Update: Today 14:37</div>
421
+ </div>
422
+ </div>
423
+
424
+ <!-- Toast Notification -->
425
+ <div id="toast-notification" class="fixed top-6 right-6 bg-dark-element rounded-lg px-4 py-3 shadow-lg border-l-4 border-teal-accent hidden">
426
+ <div class="flex items-center">
427
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2" viewBox="0 0 20 20" fill="currentColor">
428
+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
429
+ </svg>
430
+ <span>Server status updated successfully!</span>
431
+ <button class="ml-4 hover:text-gray-300" id="close-toast">
432
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
433
+ <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
434
+ </svg>
435
+ </button>
436
+ </div>
437
+ </div>
438
+
439
+ <script>
440
+ // Theme toggle functionality
441
+ const themeToggle = document.getElementById('theme-toggle');
442
+ const lightIcon = themeToggle.querySelector('#light-icon');
443
+
444
+ themeToggle.addEventListener('click', function() {
445
+ document.body.classList.toggle('bg-gray-100');
446
+ document.body.classList.toggle('text-gray-900');
447
+ document.body.classList.toggle('bg-dark-base');
448
+ document.body.classList.toggle('text-gray-200');
449
+
450
+ lightIcon.classList.toggle('hidden');
451
+ });
452
+
453
+ // Toast notification display
454
+ function showToast(message) {
455
+ const toast = document.getElementById('toast-notification');
456
+ toast.querySelector('span').textContent = message;
457
+ toast.classList.remove('hidden');
458
+
459
+ setTimeout(() => {
460
+ toast.classList.add('hidden');
461
+ }, 3000);
462
+ }
463
+
464
+ // Close toast when button clicked
465
+ document.getElementById('close-toast').addEventListener('click', function() {
466
+ document.getElementById('toast-notification').classList.add('hidden');
467
+ });
468
+
469
+ // Simulate button actions with toast notifications
470
+ document.querySelectorAll('.btn-primary').forEach(button => {
471
+ button.addEventListener('click', function() {
472
+ showToast("Command sent to server");
473
+ });
474
+ });
475
+
476
+ // Sidebar navigation
477
+ document.querySelectorAll('.sidebar-link').forEach(link => {
478
+ link.addEventListener('click', function() {
479
+ // Remove active class from all links
480
+ document.querySelectorAll('.sidebar-link').forEach(el => {
481
+ el.classList.remove('active');
482
+ el.classList.remove('bg-dark-surface');
483
+ el.classList.remove('border-l-4');
484
+ el.classList.remove('border-teal-accent');
485
+ });
486
+
487
+ // Add active class to clicked link
488
+ this.classList.add('active');
489
+
490
+ // Display notification
491
+ showToast("Navigation to: " + this.textContent.trim());
492
+ });
493
+ });
494
+
495
+ // Handle skeleton loader simulation
496
+ setTimeout(function() {
497
+ document.querySelectorAll('.skeleton-loader').forEach(el => {
498
+ el.classList.add('bg-gray-200/20');
499
+ el.classList.remove('bg-gradient-to-r');
500
+ el.classList.remove('from-gray-600');
501
+ el.classList.remove('to-gray-700');
502
+ });
503
+ }, 1500);
504
+ </script>
505
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Sahaj33/mc-server-by-sahaj33" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
506
+ </html>