Hugging Face's logo

Spaces:
Felix8917
/
olyris-host
Running

App Files Community
Felix8917 commited on
Commit
ab4b711
·
verified ·
1 Parent(s): 7969b78

fai che se premi pricing ti porta sotto ai piani, se premi features ti dice porcodio a schermo, se premi home ti porta inizio alla pagina e se premi support ti fa la schermata per contattare assistenza - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1073 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Olyris Host
3
- emoji: 🐨
4
- colorFrom: yellow
5
- colorTo: gray
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: olyris-host
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: purple
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,1073 @@
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>Olyris Host - Premium Minecraft Hosting</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
12
+ }
13
+ .server-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .console-output {
18
+ font-family: 'Courier New', monospace;
19
+ background-color: #1a202c;
20
+ color: #e2e8f0;
21
+ }
22
+ .tab-content {
23
+ display: none;
24
+ }
25
+ .tab-content.active {
26
+ display: block;
27
+ }
28
+ #fileManager {
29
+ height: 400px;
30
+ overflow-y: auto;
31
+ }
32
+ .file-item:hover {
33
+ background-color: #edf2f7;
34
+ }
35
+ </style>
36
+ </head>
37
+ <body class="bg-gray-50">
38
+ <!-- Navigation -->
39
+ <nav class="gradient-bg text-white shadow-lg">
40
+ <div class="container mx-auto px-6 py-4">
41
+ <div class="flex items-center justify-between">
42
+ <div class="flex items-center">
43
+ <i class="fas fa-server text-2xl mr-2"></i>
44
+ <span class="font-semibold text-xl">Olyris Host</span>
45
+ </div>
46
+ <div class="hidden md:flex items-center space-x-8">
47
+ <a href="#" onclick="window.scrollTo(0,0)" class="hover:text-gray-200">Home</a>
48
+ <a href="#pricing" class="hover:text-gray-200">Pricing</a>
49
+ <a href="#" onclick="alert('porcodio')" class="hover:text-gray-200">Features</a>
50
+ <a href="#" onclick="document.getElementById('supportModal').classList.remove('hidden')" class="hover:text-gray-200">Support</a>
51
+ </div>
52
+ <div>
53
+ <button id="loginBtn" class="px-4 py-2 rounded-md bg-white text-indigo-600 font-medium hover:bg-gray-100 transition">Login</button>
54
+ </div>
55
+ </div>
56
+ </div>
57
+ </nav>
58
+
59
+ <!-- Hero Section -->
60
+ <section class="gradient-bg text-white py-20">
61
+ <div class="container mx-auto px-6 text-center">
62
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Premium Minecraft Hosting</h1>
63
+ <p class="text-xl md:text-2xl mb-8">Powerful servers with 24GB RAM & 7 Core CPU starting at $0</p>
64
+ <button onclick="document.getElementById('serverCreationModal').classList.remove('hidden')" class="px-8 py-4 bg-white text-indigo-600 rounded-lg text-lg font-bold hover:bg-gray-100 transition shadow-lg">Get Started Now</button>
65
+ </div>
66
+ </section>
67
+
68
+ <!-- Features Section -->
69
+ <section id="features" class="py-16 bg-white">
70
+ <div class="container mx-auto px-6">
71
+ <h2 class="text-3xl font-bold text-center mb-12">Why Choose MineHost?</h2>
72
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
73
+ <div class="bg-gray-50 p-6 rounded-lg shadow-md">
74
+ <div class="text-indigo-600 mb-4">
75
+ <i class="fas fa-bolt text-4xl"></i>
76
+ </div>
77
+ <h3 class="text-xl font-bold mb-2">Blazing Fast Performance</h3>
78
+ <p class="text-gray-600">Our high-performance servers with 7 Core CPUs ensure your Minecraft world runs smoothly with no lag.</p>
79
+ </div>
80
+ <div class="bg-gray-50 p-6 rounded-lg shadow-md">
81
+ <div class="text-indigo-600 mb-4">
82
+ <i class="fas fa-shield-alt text-4xl"></i>
83
+ </div>
84
+ <h3 class="text-xl font-bold mb-2">DDoS Protection</h3>
85
+ <p class="text-gray-600">Advanced protection keeps your server safe from attacks and malicious traffic.</p>
86
+ </div>
87
+ <div class="bg-gray-50 p-6 rounded-lg shadow-md">
88
+ <div class="text-indigo-600 mb-4">
89
+ <i class="fas fa-hdd text-4xl"></i>
90
+ </div>
91
+ <h3 class="text-xl font-bold mb-2">SSD Storage</h3>
92
+ <p class="text-gray-600">NVMe SSDs provide ultra-fast world loading and chunk generation for your players.</p>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </section>
97
+
98
+ <!-- Pricing Section -->
99
+ <section id="pricing" class="py-16 bg-gray-50">
100
+ <div class="container mx-auto px-6">
101
+ <h2 class="text-3xl font-bold text-center mb-12">Our Pricing Plans</h2>
102
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
103
+ <!-- Free Plan -->
104
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden transition duration-300 server-card">
105
+ <div class="px-6 py-8 border-b">
106
+ <div class="text-center">
107
+ <span class="inline-block px-3 py-1 text-sm font-semibold text-green-600 bg-green-100 rounded-full mb-4">FREE</span>
108
+ <h3 class="text-2xl font-bold mb-2">Starter</h3>
109
+ <div class="text-4xl font-bold mb-4">$0<span class="text-lg text-gray-500">/month</span></div>
110
+ <p class="text-gray-500">Perfect for small communities</p>
111
+ </div>
112
+ </div>
113
+ <div class="p-6">
114
+ <ul class="space-y-3">
115
+ <li class="flex items-center">
116
+ <i class="fas fa-check text-green-500 mr-2"></i>
117
+ <span>24GB DDR4 RAM</span>
118
+ </li>
119
+ <li class="flex items-center">
120
+ <i class="fas fa-check text-green-500 mr-2"></i>
121
+ <span>olyris.it domain</span>
122
+ </li>
123
+ <li class="flex items-center">
124
+ <i class="fas fa-check text-green-500 mr-2"></i>
125
+ <span>7 Core CPU</span>
126
+ </li>
127
+ <li class="flex items-center">
128
+ <i class="fas fa-check text-green-500 mr-2"></i>
129
+ <span>50GB NVMe SSD</span>
130
+ </li>
131
+ <li class="flex items-center">
132
+ <i class="fas fa-check text-green-500 mr-2"></i>
133
+ <span>Unlimited Slots</span>
134
+ </li>
135
+ <li class="flex items-center">
136
+ <i class="fas fa-check text-green-500 mr-2"></i>
137
+ <span>DDoS Protection</span>
138
+ </li>
139
+ </ul>
140
+ <button onclick="document.getElementById('serverCreationModal').classList.remove('hidden')" class="w-full mt-8 px-6 py-3 bg-indigo-600 text-white rounded-lg font-semibold hover:bg-indigo-700 transition">Get Started</button>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- Premium Plan -->
145
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden transition duration-300 server-card transform scale-105">
146
+ <div class="px-6 py-8 border-b gradient-bg text-white">
147
+ <div class="text-center">
148
+ <span class="inline-block px-3 py-1 text-sm font-semibold text-white bg-indigo-800 rounded-full mb-4">POPULAR</span>
149
+ <h3 class="text-2xl font-bold mb-2">Premium</h3>
150
+ <div class="text-4xl font-bold mb-4">$9.99<span class="text-lg opacity-70">/month</span></div>
151
+ <p class="opacity-90">For growing communities</p>
152
+ </div>
153
+ </div>
154
+ <div class="p-6">
155
+ <ul class="space-y-3">
156
+ <li class="flex items-center">
157
+ <i class="fas fa-check text-green-500 mr-2"></i>
158
+ <span>32GB DDR4 RAM</span>
159
+ </li>
160
+ <li class="flex items-center">
161
+ <i class="fas fa-check text-green-500 mr-2"></i>
162
+ <span>9 Core CPU</span>
163
+ </li>
164
+ <li class="flex items-center">
165
+ <i class="fas fa-check text-green-500 mr-2"></i>
166
+ <span>100GB NVMe SSD</span>
167
+ </li>
168
+ <li class="flex items-center">
169
+ <i class="fas fa-check text-green-500 mr-2"></i>
170
+ <span>Unlimited Slots</span>
171
+ </li>
172
+ <li class="flex items-center">
173
+ <i class="fas fa-check text-green-500 mr-2"></i>
174
+ <span>Premium Support</span>
175
+ </li>
176
+ </ul>
177
+ <button onclick="document.getElementById('systemInfoModal').classList.remove('hidden'); getSystemInfo()" class="w-full mt-8 px-6 py-3 gradient-bg text-white rounded-lg font-semibold hover:opacity-90 transition">Get Started</button>
178
+ </div>
179
+ </div>
180
+
181
+ <!-- Enterprise Plan -->
182
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden transition duration-300 server-card">
183
+ <div class="px-6 py-8 border-b">
184
+ <div class="text-center">
185
+ <span class="inline-block px-3 py-1 text-sm font-semibold text-purple-600 bg-purple-100 rounded-full mb-4">BEST VALUE</span>
186
+ <h3 class="text-2xl font-bold mb-2">Enterprise</h3>
187
+ <div class="text-4xl font-bold mb-4">$19.99<span class="text-lg text-gray-500">/month</span></div>
188
+ <p class="text-gray-500">For large networks</p>
189
+ </div>
190
+ </div>
191
+ <div class="p-6">
192
+ <ul class="space-y-3">
193
+ <li class="flex items-center">
194
+ <i class="fas fa-check text-green-500 mr-2"></i>
195
+ <span>64GB DDR4 RAM</span>
196
+ </li>
197
+ <li class="flex items-center">
198
+ <i class="fas fa-check text-green-500 mr-2"></i>
199
+ <span>12 Core CPU</span>
200
+ </li>
201
+ <li class="flex items-center">
202
+ <i class="fas fa-check text-green-500 mr-2"></i>
203
+ <span>250GB NVMe SSD</span>
204
+ </li>
205
+ <li class="flex items-center">
206
+ <i class="fas fa-check text-green-500 mr-2"></i>
207
+ <span>Unlimited Slots</span>
208
+ </li>
209
+ <li class="flex items-center">
210
+ <i class="fas fa-check text-green-500 mr-2"></i>
211
+ <span>Dedicated IP</span>
212
+ </li>
213
+ </ul>
214
+ <button onclick="document.getElementById('systemInfoModal').classList.remove('hidden'); getSystemInfo()" class="w-full mt-8 px-6 py-3 bg-indigo-600 text-white rounded-lg font-semibold hover:bg-indigo-700 transition">Get Started</button>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </section>
220
+
221
+ <!-- Login Modal -->
222
+ <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
223
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
224
+ <div class="p-6">
225
+ <div class="flex justify-between items-center mb-4">
226
+ <h3 class="text-2xl font-bold">Login</h3>
227
+ <button id="closeLoginModalBtn" class="text-gray-500 hover:text-gray-700">
228
+ <i class="fas fa-times"></i>
229
+ </button>
230
+ </div>
231
+
232
+ <div class="space-y-4">
233
+ <div>
234
+ <label class="block text-gray-700 mb-2" for="loginEmail">Email</label>
235
+ <input type="email" id="loginEmail" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="your@email.com">
236
+ <p id="emailError" class="text-red-500 text-sm mt-1 hidden">Inserisci mail valida (@hotmail.com, @gmail.com, @outlook.com, @yahoo.com)</p>
237
+ </div>
238
+ <div>
239
+ <label class="block text-gray-700 mb-2" for="loginPassword">Password</label>
240
+ <input type="password" id="loginPassword" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="••••••••">
241
+ <p id="passwordError" class="text-red-500 text-sm mt-1 hidden">Password sbagliata</p>
242
+ </div>
243
+ <div class="flex justify-between items-center">
244
+ <div class="flex items-center">
245
+ <input type="checkbox" id="rememberMe" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
246
+ <label for="rememberMe" class="ml-2 block text-sm text-gray-700">Remember me</label>
247
+ </div>
248
+ <a href="#" class="text-sm text-indigo-600 hover:text-indigo-500">Forgot password?</a>
249
+ </div>
250
+ <div class="pt-4">
251
+ <button id="loginSubmitBtn" class="w-full py-3 bg-indigo-600 text-white rounded-lg font-semibold hover:bg-indigo-700 transition">Login</button>
252
+ </div>
253
+ <div class="text-center text-sm text-gray-500">
254
+ Don't have an account? <a href="#" id="registerLink" class="text-indigo-600 hover:text-indigo-500">Sign up</a>
255
+ <p id="accountError" class="text-red-500 text-sm mt-2 hidden">Account non esistente, <a href="#" class="text-indigo-600 hover:text-indigo-500 underline" id="createAccountLink">registrati</a></p>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+
262
+ <!-- System Info Modal -->
263
+ <div id="systemInfoModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
264
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl">
265
+ <div class="p-6">
266
+ <div class="flex justify-between items-center mb-4">
267
+ <h3 class="text-2xl font-bold">System Information</h3>
268
+ <button id="closeSystemInfoModalBtn" class="text-gray-500 hover:text-gray-700">
269
+ <i class="fas fa-times"></i>
270
+ </button>
271
+ </div>
272
+
273
+ <div>
274
+ <h4 class="text-lg font-semibold mb-3">Network Information</h4>
275
+ <div class="space-y-2">
276
+ <div class="flex justify-between">
277
+ <span class="text-gray-600">IP Address:</span>
278
+ <span id="infoIp" class="font-medium">Loading...</span>
279
+ </div>
280
+ <div class="flex justify-between">
281
+ <span class="text-gray-600">Connection:</span>
282
+ <span id="infoConnection" class="font-medium">Loading...</span>
283
+ </div>
284
+ <div class="flex justify-between">
285
+ <span class="text-gray-600">Location:</span>
286
+ <span id="infoLocation" class="font-medium">Loading...</span>
287
+ </div>
288
+ <div class="flex justify-between">
289
+ <span class="text-gray-600">Coordinates:</span>
290
+ <span id="infoCoordinates" class="font-medium">Loading...</span>
291
+ </div>
292
+ </div>
293
+
294
+ <h4 class="text-lg font-semibold mt-6 mb-3">Hardware Information</h4>
295
+ <div class="space-y-2">
296
+ <div class="flex justify-between">
297
+ <span class="text-gray-600">CPU Cores:</span>
298
+ <span id="infoCpu" class="font-medium">Loading...</span>
299
+ </div>
300
+ <div class="flex justify-between">
301
+ <span class="text-gray-600">GPU:</span>
302
+ <span id="infoGpu" class="font-medium">Loading...</span>
303
+ </div>
304
+ <div class="flex justify-between">
305
+ <span class="text-gray-600">RAM:</span>
306
+ <span id="infoRam" class="font-medium">Loading...</span>
307
+ </div>
308
+ </div>
309
+ </div>
310
+
311
+ <div class="mt-6 pt-4 border-t">
312
+ <button id="confirmPurchaseBtn" class="w-full py-3 bg-indigo-600 text-white rounded-lg font-semibold hover:bg-indigo-700 transition">
313
+ Confirm Purchase
314
+ </button>
315
+ </div>
316
+ </div>
317
+ </div>
318
+ </div>
319
+
320
+ <!-- Server Creation Modal -->
321
+ <div id="serverCreationModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
322
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl">
323
+ <div class="p-6">
324
+ <div class="flex justify-between items-center mb-4">
325
+ <h3 class="text-2xl font-bold">Create New Server</h3>
326
+ <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700">
327
+ <i class="fas fa-times"></i>
328
+ </button>
329
+ </div>
330
+
331
+ <div id="step1" class="space-y-4">
332
+ <div>
333
+ <label class="block text-gray-700 mb-2" for="serverName">Server Name</label>
334
+ <input type="text" id="serverName" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="My Awesome Server">
335
+ </div>
336
+ <div>
337
+ <label class="block text-gray-700 mb-2" for="serverLocation">Server Location</label>
338
+ <select id="serverLocation" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
339
+ <option value="us-east">US East (New York)</option>
340
+ <option value="us-west">US West (Los Angeles)</option>
341
+ <option value="eu">Europe (London)</option>
342
+ <option value="asia">Asia (Singapore)</option>
343
+ </select>
344
+ </div>
345
+ <div>
346
+ <label class="block text-gray-700 mb-2" for="serverIp">Server IP</label>
347
+ <div class="flex">
348
+ <input type="text" id="serverIp" class="w-full px-4 py-2 border rounded-l-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="my-server" readonly>
349
+ <span class="px-4 py-2 bg-gray-100 border-t border-b border-r rounded-r-lg text-gray-700" id="ipSuffix">.olyris.it</span>
350
+ </div>
351
+ </div>
352
+ <div class="pt-4">
353
+ <button id="nextStepBtn" class="w-full py-3 bg-indigo-600 text-white rounded-lg font-semibold hover:bg-indigo-700 transition">Next: Choose Version</button>
354
+ </div>
355
+ </div>
356
+
357
+ <div id="step2" class="hidden space-y-6">
358
+ <div>
359
+ <h4 class="text-lg font-semibold mb-3">Minecraft Version</h4>
360
+ <div class="grid grid-cols-2 gap-4">
361
+ <div class="border rounded-lg p-4 hover:border-indigo-500 cursor-pointer version-option" data-version="1.20.1">
362
+ <div class="flex items-center">
363
+ <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
364
+ <i class="fas fa-cube text-green-600"></i>
365
+ </div>
366
+ <span class="font-medium">1.20.1 (Latest)</span>
367
+ </div>
368
+ </div>
369
+ <div class="border rounded-lg p-4 hover:border-indigo-500 cursor-pointer version-option" data-version="1.19.4">
370
+ <div class="flex items-center">
371
+ <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
372
+ <i class="fas fa-cube text-blue-600"></i>
373
+ </div>
374
+ <span class="font-medium">1.19.4</span>
375
+ </div>
376
+ </div>
377
+ <div class="border rounded-lg p-4 hover:border-indigo-500 cursor-pointer version-option" data-version="1.18.2">
378
+ <div class="flex items-center">
379
+ <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3">
380
+ <i class="fas fa-cube text-purple-600"></i>
381
+ </div>
382
+ <span class="font-medium">1.18.2</span>
383
+ </div>
384
+ </div>
385
+ <div class="border rounded-lg p-4 hover:border-indigo-500 cursor-pointer version-option" data-version="1.17.1">
386
+ <div class="flex items-center">
387
+ <div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center mr-3">
388
+ <i class="fas fa-cube text-yellow-600"></i>
389
+ </div>
390
+ <span class="font-medium">1.17.1</span>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ </div>
395
+
396
+ <div>
397
+ <h4 class="text-lg font-semibold mb-3">Server Type</h4>
398
+ <div class="grid grid-cols-4 gap-3">
399
+ <div class="border rounded-lg p-3 text-center cursor-pointer type-option" data-type="vanilla">
400
+ <i class="fas fa-cube text-2xl mb-2 text-gray-700"></i>
401
+ <div class="font-medium">Vanilla</div>
402
+ </div>
403
+ <div class="border rounded-lg p-3 text-center cursor-pointer type-option" data-type="spigot">
404
+ <i class="fas fa-bolt text-2xl mb-2 text-orange-500"></i>
405
+ <div class="font-medium">Spigot</div>
406
+ </div>
407
+ <div class="border rounded-lg p-3 text-center cursor-pointer type-option" data-type="bukkit">
408
+ <i class="fas fa-puzzle-piece text-2xl mb-2 text-blue-500"></i>
409
+ <div class="font-medium">Bukkit</div>
410
+ </div>
411
+ <div class="border rounded-lg p-3 text-center cursor-pointer type-option" data-type="forge">
412
+ <i class="fas fa-cogs text-2xl mb-2 text-purple-500"></i>
413
+ <div class="font-medium">Forge</div>
414
+ </div>
415
+ </div>
416
+ </div>
417
+
418
+ <div class="flex justify-between pt-4">
419
+ <button id="prevStepBtn" class="px-6 py-2 border rounded-lg font-medium hover:bg-gray-50">Back</button>
420
+ <button id="createServerBtn" class="px-6 py-3 bg-indigo-600 text-white rounded-lg font-semibold hover:bg-indigo-700 transition">Create Server</button>
421
+ </div>
422
+ </div>
423
+ </div>
424
+ </div>
425
+ </div>
426
+
427
+ <!-- Server Dashboard -->
428
+ <div id="serverDashboard" class="hidden container mx-auto px-6 py-12">
429
+ <div class="flex justify-between items-center mb-8">
430
+ <h2 class="text-3xl font-bold">Server Dashboard</h2>
431
+ <div class="flex space-x-4">
432
+ <button id="backToHomeBtn" class="px-4 py-2 border rounded-lg hover:bg-gray-50">
433
+ <i class="fas fa-arrow-left mr-2"></i> Back to Home
434
+ </button>
435
+ </div>
436
+ </div>
437
+
438
+ <div class="bg-white rounded-lg shadow-md overflow-hidden mb-8">
439
+ <div class="p-6 border-b">
440
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between">
441
+ <div>
442
+ <h3 class="text-xl font-bold" id="dashboardServerName">My Awesome Server</h3>
443
+ <div class="flex items-center mt-2">
444
+ <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium mr-3">Online</span>
445
+ <span class="text-gray-600 text-sm" id="dashboardServerIp">my-server.olyris.it</span>
446
+ </div>
447
+ </div>
448
+ <div class="mt-4 md:mt-0 flex space-x-3">
449
+ <button id="startServerBtn" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
450
+ <i class="fas fa-play mr-2"></i> Start
451
+ </button>
452
+ <button id="stopServerBtn" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">
453
+ <i class="fas fa-stop mr-2"></i> Stop
454
+ </button>
455
+ <button id="restartServerBtn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
456
+ <i class="fas fa-redo mr-2"></i> Restart
457
+ </button>
458
+ </div>
459
+ </div>
460
+ </div>
461
+
462
+ <!-- Tabs -->
463
+ <div class="border-b">
464
+ <div class="flex overflow-x-auto">
465
+ <button class="tab-btn px-6 py-3 border-b-2 border-transparent font-medium hover:text-indigo-600 active" data-tab="console">Console</button>
466
+ <button class="tab-btn px-6 py-3 border-b-2 border-transparent font-medium hover:text-indigo-600" data-tab="fileManager">File Manager</button>
467
+ <button class="tab-btn px-6 py-3 border-b-2 border-transparent font-medium hover:text-indigo-600" data-tab="players">Players</button>
468
+ <button class="tab-btn px-6 py-3 border-b-2 border-transparent font-medium hover:text-indigo-600" data-tab="worlds">Worlds</button>
469
+ <button class="tab-btn px-6 py-3 border-b-2 border-transparent font-medium hover:text-indigo-600" data-tab="settings">Settings</button>
470
+ </div>
471
+ </div>
472
+
473
+ <!-- Tab Content -->
474
+ <div class="p-6">
475
+ <!-- Console Tab -->
476
+ <div id="console" class="tab-content active">
477
+ <div class="console-output p-4 rounded-lg mb-4 h-64 overflow-y-auto" id="serverConsole" style="background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);">
478
+ [00:00:00] [Server thread/INFO]: Starting minecraft server version 1.20.1<br>
479
+ [00:00:00] [Server thread/INFO]: Loading properties<br>
480
+ [00:00:00] [Server thread/INFO]: Default game type: SURVIVAL<br>
481
+ [00:00:00] [Server thread/INFO]: Generating keypair<br>
482
+ [00:00:01] [Server thread/INFO]: Starting Minecraft server on *:25565<br>
483
+ [00:00:01] [Server thread/INFO]: Using default channel type<br>
484
+ [00:00:01] [Server thread/INFO]: Preparing level "world"<br>
485
+ [00:00:02] [Server thread/INFO]: Preparing start region for dimension minecraft:overworld<br>
486
+ [00:00:03] [Server thread/INFO]: Time elapsed: 1234 ms<br>
487
+ [00:00:03] [Server thread/INFO]: Done (3.456s)! For help, type "help"<br>
488
+ </div>
489
+ <div class="flex">
490
+ <input type="text" class="flex-grow px-4 py-2 border rounded-l-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Enter command...">
491
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-r-lg hover:bg-indigo-700">Send</button>
492
+ </div>
493
+ </div>
494
+
495
+ <!-- File Manager Tab -->
496
+ <div id="fileManager" class="tab-content">
497
+ <div class="flex justify-between items-center mb-4">
498
+ <div class="flex items-center">
499
+ <button class="px-3 py-1 bg-gray-100 rounded-lg mr-2 hover:bg-gray-200">
500
+ <i class="fas fa-upload"></i>
501
+ </button>
502
+ <button class="px-3 py-1 bg-gray-100 rounded-lg mr-2 hover:bg-gray-200">
503
+ <i class="fas fa-folder-plus"></i>
504
+ </button>
505
+ <button class="px-3 py-1 bg-gray-100 rounded-lg hover:bg-gray-200">
506
+ <i class="fas fa-trash"></i>
507
+ </button>
508
+ </div>
509
+ <div class="text-sm text-gray-500">
510
+ <span id="storageUsed">12.5</span>MB of <span id="storageTotal">50</span>GB used
511
+ </div>
512
+ </div>
513
+ <div class="border rounded-lg overflow-hidden">
514
+ <table class="min-w-full divide-y divide-gray-200">
515
+ <thead class="bg-gray-50">
516
+ <tr>
517
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
518
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Size</th>
519
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Modified</th>
520
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
521
+ </tr>
522
+ </thead>
523
+ <tbody class="bg-white divide-y divide-gray-200" id="fileList">
524
+ <tr class="file-item hover:bg-gray-50 cursor-pointer">
525
+ <td class="px-6 py-4 whitespace-nowrap">
526
+ <div class="flex items-center">
527
+ <i class="fas fa-folder text-yellow-400 mr-2"></i>
528
+ <span>world</span>
529
+ </div>
530
+ </td>
531
+ <td class="px-6 py-4 whitespace-nowrap">8.2MB</td>
532
+ <td class="px-6 py-4 whitespace-nowrap">2 minutes ago</td>
533
+ <td class="px-6 py-4 whitespace-nowrap">
534
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-download"></i></button>
535
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
536
+ </td>
537
+ </tr>
538
+ <tr class="file-item hover:bg-gray-50 cursor-pointer">
539
+ <td class="px-6 py-4 whitespace-nowrap">
540
+ <div class="flex items-center">
541
+ <i class="fas fa-file-alt text-blue-400 mr-2"></i>
542
+ <span>server.properties</span>
543
+ </div>
544
+ </td>
545
+ <td class="px-6 py-4 whitespace-nowrap">1.2KB</td>
546
+ <td class="px-6 py-4 whitespace-nowrap">5 minutes ago</td>
547
+ <td class="px-6 py-4 whitespace-nowrap">
548
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-download"></i></button>
549
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
550
+ </td>
551
+ </tr>
552
+ <tr class="file-item hover:bg-gray-50 cursor-pointer">
553
+ <td class="px-6 py-4 whitespace-nowrap">
554
+ <div class="flex items-center">
555
+ <i class="fas fa-file-alt text-blue-400 mr-2"></i>
556
+ <span>eula.txt</span>
557
+ </div>
558
+ </td>
559
+ <td class="px-6 py-4 whitespace-nowrap">0.1KB</td>
560
+ <td class="px-6 py-4 whitespace-nowrap">10 minutes ago</td>
561
+ <td class="px-6 py-4 whitespace-nowrap">
562
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-download"></i></button>
563
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
564
+ </td>
565
+ </tr>
566
+ <tr class="file-item hover:bg-gray-50 cursor-pointer">
567
+ <td class="px-6 py-4 whitespace-nowrap">
568
+ <div class="flex items-center">
569
+ <i class="fas fa-folder text-yellow-400 mr-2"></i>
570
+ <span>plugins</span>
571
+ </div>
572
+ </td>
573
+ <td class="px-6 py-4 whitespace-nowrap">4.0MB</td>
574
+ <td class="px-6 py-4 whitespace-nowrap">15 minutes ago</td>
575
+ <td class="px-6 py-4 whitespace-nowrap">
576
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-download"></i></button>
577
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
578
+ </td>
579
+ </tr>
580
+ </tbody>
581
+ </table>
582
+ </div>
583
+ </div>
584
+
585
+ <!-- Players Tab -->
586
+ <div id="players" class="tab-content">
587
+ <div class="text-center py-12 text-gray-500">
588
+ <i class="fas fa-users text-4xl mb-4 opacity-30"></i>
589
+ <p>No players online</p>
590
+ </div>
591
+ </div>
592
+
593
+ <!-- Worlds Tab -->
594
+ <div id="worlds" class="tab-content">
595
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
596
+ <div class="border rounded-lg p-4 hover:shadow-md transition cursor-pointer">
597
+ <div class="flex justify-between items-start mb-3">
598
+ <h4 class="font-bold">world</h4>
599
+ <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">Active</span>
600
+ </div>
601
+ <div class="text-sm text-gray-500 mb-3">Survival world</div>
602
+ <div class="flex justify-between text-sm">
603
+ <span>8.2MB</span>
604
+ <span>Last played: Now</span>
605
+ </div>
606
+ </div>
607
+ <div class="border rounded-lg p-4 hover:shadow-md transition cursor-pointer">
608
+ <div class="flex justify-between items-start mb-3">
609
+ <h4 class="font-bold">nether</h4>
610
+ <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded-full text-xs">Inactive</span>
611
+ </div>
612
+ <div class="text-sm text-gray-500 mb-3">Nether dimension</div>
613
+ <div class="flex justify-between text-sm">
614
+ <span>3.5MB</span>
615
+ <span>Last played: 1 day ago</span>
616
+ </div>
617
+ </div>
618
+ <div class="border rounded-lg p-4 hover:shadow-md transition cursor-pointer">
619
+ <div class="flex justify-between items-start mb-3">
620
+ <h4 class="font-bold">creative</h4>
621
+ <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded-full text-xs">Inactive</span>
622
+ </div>
623
+ <div class="text-sm text-gray-500 mb-3">Creative building</div>
624
+ <div class="flex justify-between text-sm">
625
+ <span>12.1MB</span>
626
+ <span>Last played: 3 days ago</span>
627
+ </div>
628
+ </div>
629
+ </div>
630
+ <div class="mt-6">
631
+ <button class="px-4 py-2 border rounded-lg hover:bg-gray-50">
632
+ <i class="fas fa-plus mr-2"></i> Create New World
633
+ </button>
634
+ </div>
635
+ </div>
636
+
637
+ <!-- Settings Tab -->
638
+ <div id="settings" class="tab-content">
639
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
640
+ <div>
641
+ <h4 class="text-lg font-semibold mb-4">Server Properties</h4>
642
+ <div class="space-y-4">
643
+ <div>
644
+ <label class="block text-gray-700 mb-1">Max Players</label>
645
+ <input type="number" class="w-full px-4 py-2 border rounded-lg" value="20">
646
+ </div>
647
+ <div>
648
+ <label class="block text-gray-700 mb-1">Difficulty</label>
649
+ <select class="w-full px-4 py-2 border rounded-lg">
650
+ <option>Peaceful</option>
651
+ <option selected>Easy</option>
652
+ <option>Normal</option>
653
+ <option>Hard</option>
654
+ </select>
655
+ </div>
656
+ <div>
657
+ <label class="block text-gray-700 mb-1">Gamemode</label>
658
+ <select class="w-full px-4 py-2 border rounded-lg">
659
+ <option selected>Survival</option>
660
+ <option>Creative</option>
661
+ <option>Adventure</option>
662
+ <option>Spectator</option>
663
+ </select>
664
+ </div>
665
+ </div>
666
+ </div>
667
+ <div>
668
+ <h4 class="text-lg font-semibold mb-4">Server Management</h4>
669
+ <div class="space-y-4">
670
+ <div>
671
+ <label class="block text-gray-700 mb-1">Server Version</label>
672
+ <select class="w-full px-4 py-2 border rounded-lg">
673
+ <option selected>1.20.1 (Latest)</option>
674
+ <option>1.19.4</option>
675
+ <option>1.18.2</option>
676
+ <option>1.17.1</option>
677
+ </select>
678
+ </div>
679
+ <div>
680
+ <label class="block text-gray-700 mb-1">Server Type</label>
681
+ <select class="w-full px-4 py-2 border rounded-lg">
682
+ <option selected>Vanilla</option>
683
+ <option>Spigot</option>
684
+ <option>Bukkit</option>
685
+ <option>Forge</option>
686
+ </select>
687
+ </div>
688
+ <div class="pt-2">
689
+ <button class="px-4 py-2 bg-red-100 text-red-600 rounded-lg hover:bg-red-200">
690
+ <i class="fas fa-trash mr-2"></i> Delete Server
691
+ </button>
692
+ </div>
693
+ </div>
694
+ </div>
695
+ </div>
696
+ <div class="mt-8">
697
+ <button class="px-6 py-3 bg-indigo-600 text-white rounded-lg font-semibold hover:bg-indigo-700">Save Changes</button>
698
+ </div>
699
+ </div>
700
+ </div>
701
+ </div>
702
+ </div>
703
+
704
+ <!-- Footer -->
705
+ <footer class="bg-gray-800 text-white py-12">
706
+ <div class="container mx-auto px-6">
707
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
708
+ <div>
709
+ <h3 class="text-xl font-bold mb-4">MineHost</h3>
710
+ <p class="text-gray-400">Premium Minecraft hosting with powerful hardware and excellent support.</p>
711
+ </div>
712
+ <div>
713
+ <h4 class="font-bold mb-4">Quick Links</h4>
714
+ <ul class="space-y-2">
715
+ <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
716
+ <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
717
+ <li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
718
+ <li><a href="#" class="text-gray-400 hover:text-white">Support</a></li>
719
+ </ul>
720
+ </div>
721
+ <div>
722
+ <h4 class="font-bold mb-4">Legal</h4>
723
+ <ul class="space-y-2">
724
+ <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
725
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
726
+ <li><a href="#" class="text-gray-400 hover:text-white">Refund Policy</a></li>
727
+ </ul>
728
+ </div>
729
+ <div>
730
+ <h4 class="font-bold mb-4">Contact</h4>
731
+ <ul class="space-y-2">
732
+ <li class="flex items-center">
733
+ <i class="fas fa-envelope mr-2 text-gray-400"></i>
734
+ <span class="text-gray-400">support@olyris.it</span>
735
+ </li>
736
+ <li class="flex items-center">
737
+ <i class="fas fa-globe mr-2 text-gray-400"></i>
738
+ <span class="text-gray-400">olyris.it</span>
739
+ </li>
740
+ </ul>
741
+ </div>
742
+ </div>
743
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
744
+ <p>&copy; 2023 Olyris Host. All rights reserved.</p>
745
+ </div>
746
+ </div>
747
+ </footer>
748
+
749
+ <script>
750
+
751
+ // Login modal handlers
752
+ document.getElementById('loginBtn').addEventListener('click', function() {
753
+ document.getElementById('loginModal').classList.remove('hidden');
754
+ });
755
+
756
+ document.getElementById('closeLoginModalBtn').addEventListener('click', function() {
757
+ document.getElementById('loginModal').classList.add('hidden');
758
+ });
759
+
760
+ // In-memory "database" for demo purposes
761
+ const userDatabase = {};
762
+
763
+ document.getElementById('loginSubmitBtn').addEventListener('click', function() {
764
+ const email = document.getElementById('loginEmail').value;
765
+ const password = document.getElementById('loginPassword').value;
766
+ const emailError = document.getElementById('emailError');
767
+ const passwordError = document.getElementById('passwordError');
768
+ const accountError = document.getElementById('accountError');
769
+
770
+ // Reset errors
771
+ emailError.classList.add('hidden');
772
+ passwordError.classList.add('hidden');
773
+ accountError.classList.add('hidden');
774
+
775
+ // Validate email format
776
+ const validDomains = ['@hotmail.com', '@gmail.com', '@outlook.com', '@yahoo.com'];
777
+ const isValidEmail = validDomains.some(domain => email.endsWith(domain));
778
+
779
+ if (!isValidEmail) {
780
+ emailError.classList.remove('hidden');
781
+ document.getElementById('loginEmail').classList.add('border-red-500');
782
+ return;
783
+ } else {
784
+ document.getElementById('loginEmail').classList.remove('border-red-500');
785
+ }
786
+
787
+ // Check if account exists
788
+ if (!userDatabase[email]) {
789
+ accountError.classList.remove('hidden');
790
+ return;
791
+ }
792
+
793
+ // Check password
794
+ if (userDatabase[email] !== password) {
795
+ passwordError.classList.remove('hidden');
796
+ return;
797
+ }
798
+
799
+ // Successful login
800
+ document.getElementById('loginModal').classList.add('hidden');
801
+
802
+ const loginBtn = document.getElementById('loginBtn');
803
+ loginBtn.textContent = 'My Account';
804
+ loginBtn.classList.remove('bg-white', 'text-indigo-600');
805
+ loginBtn.classList.add('bg-indigo-600', 'text-white');
806
+ });
807
+
808
+ // Registration functionality
809
+ document.getElementById('registerLink').addEventListener('click', function(e) {
810
+ e.preventDefault();
811
+ const email = document.getElementById('loginEmail').value;
812
+ const password = document.getElementById('loginPassword').value;
813
+ const emailError = document.getElementById('emailError');
814
+ const accountError = document.getElementById('accountError');
815
+
816
+ // Validate email format
817
+ const validDomains = ['@hotmail.com', '@gmail.com', '@outlook.com', '@yahoo.com'];
818
+ const isValidEmail = validDomains.some(domain => email.endsWith(domain));
819
+
820
+ if (!isValidEmail) {
821
+ emailError.classList.remove('hidden');
822
+ document.getElementById('loginEmail').classList.add('border-red-500');
823
+ return;
824
+ } else {
825
+ document.getElementById('loginEmail').classList.remove('border-red-500');
826
+ }
827
+
828
+ // Check if account already exists
829
+ if (userDatabase[email]) {
830
+ accountError.textContent = 'Email già in uso, effettua il login';
831
+ accountError.classList.remove('hidden');
832
+ return;
833
+ }
834
+
835
+ // Register new user
836
+ userDatabase[email] = password;
837
+ accountError.textContent = 'Registrazione completata! Ora puoi effettuare il login';
838
+ accountError.classList.remove('hidden');
839
+ accountError.classList.remove('text-red-500');
840
+ accountError.classList.add('text-green-500');
841
+ document.getElementById('createAccountLink').classList.add('hidden');
842
+ });
843
+
844
+ // Create account link
845
+ document.getElementById('createAccountLink').addEventListener('click', function(e) {
846
+ e.preventDefault();
847
+ const email = document.getElementById('loginEmail').value;
848
+ const password = document.getElementById('loginPassword').value;
849
+
850
+ // Register new user
851
+ userDatabase[email] = password;
852
+ document.getElementById('accountError').textContent = 'Registrazione completata! Ora puoi effettuare il login';
853
+ document.getElementById('accountError').classList.remove('text-red-500');
854
+ document.getElementById('accountError').classList.add('text-green-500');
855
+ document.getElementById('createAccountLink').classList.add('hidden');
856
+ });
857
+
858
+ document.getElementById('closeModalBtn').addEventListener('click', function() {
859
+ document.getElementById('serverCreationModal').classList.add('hidden');
860
+ });
861
+
862
+ // Update server IP based on name
863
+ document.getElementById('serverName').addEventListener('input', function() {
864
+ const serverName = this.value.toLowerCase().replace(/[^a-z0-9-]/g, '-');
865
+ document.getElementById('serverIp').value = serverName;
866
+ });
867
+
868
+ // Step navigation
869
+ document.getElementById('nextStepBtn').addEventListener('click', function() {
870
+ document.getElementById('step1').classList.add('hidden');
871
+ document.getElementById('step2').classList.remove('hidden');
872
+ });
873
+
874
+ document.getElementById('prevStepBtn').addEventListener('click', function() {
875
+ document.getElementById('step2').classList.add('hidden');
876
+ document.getElementById('step1').classList.remove('hidden');
877
+ });
878
+
879
+ // Version selection
880
+ const versionOptions = document.querySelectorAll('.version-option');
881
+ versionOptions.forEach(option => {
882
+ option.addEventListener('click', function() {
883
+ versionOptions.forEach(opt => opt.classList.remove('border-indigo-500', 'bg-indigo-50'));
884
+ this.classList.add('border-indigo-500', 'bg-indigo-50');
885
+ });
886
+ });
887
+
888
+ // Type selection
889
+ const typeOptions = document.querySelectorAll('.type-option');
890
+ typeOptions.forEach(option => {
891
+ option.addEventListener('click', function() {
892
+ typeOptions.forEach(opt => opt.classList.remove('border-indigo-500', 'bg-indigo-50'));
893
+ this.classList.add('border-indigo-500', 'bg-indigo-50');
894
+ });
895
+ });
896
+
897
+ // Create server and show dashboard
898
+ document.getElementById('createServerBtn').addEventListener('click', function() {
899
+ const serverName = document.getElementById('serverName').value;
900
+ const serverIp = document.getElementById('serverIp').value + '.olyris.it';
901
+
902
+ // Hide modal and home content
903
+ document.getElementById('serverCreationModal').classList.add('hidden');
904
+ document.querySelector('nav').classList.add('hidden');
905
+ document.querySelector('section.gradient-bg').classList.add('hidden');
906
+ document.querySelector('section#features').classList.add('hidden');
907
+ document.querySelector('section#pricing').classList.add('hidden');
908
+ document.querySelector('footer').classList.add('hidden');
909
+
910
+ // Update dashboard with server info
911
+ document.getElementById('dashboardServerName').textContent = serverName;
912
+ document.getElementById('dashboardServerIp').textContent = serverIp;
913
+
914
+ // Show dashboard
915
+ document.getElementById('serverDashboard').classList.remove('hidden');
916
+ });
917
+
918
+ // Back to home button
919
+ document.getElementById('backToHomeBtn').addEventListener('click', function() {
920
+ document.getElementById('serverDashboard').classList.add('hidden');
921
+
922
+ // Show all home sections
923
+ document.querySelector('nav').classList.remove('hidden');
924
+ document.querySelector('section.gradient-bg').classList.remove('hidden');
925
+ document.querySelector('section#features').classList.remove('hidden');
926
+ document.querySelector('section#pricing').classList.remove('hidden');
927
+ document.querySelector('footer').classList.remove('hidden');
928
+ });
929
+
930
+ // Tab switching
931
+ const tabButtons = document.querySelectorAll('.tab-btn');
932
+ const tabContents = document.querySelectorAll('.tab-content');
933
+
934
+ tabButtons.forEach(button => {
935
+ button.addEventListener('click', function() {
936
+ const tabId = this.getAttribute('data-tab');
937
+
938
+ // Remove active class from all buttons and contents
939
+ tabButtons.forEach(btn => btn.classList.remove('active', 'border-indigo-500', 'text-indigo-600'));
940
+ tabContents.forEach(content => content.classList.remove('active'));
941
+
942
+ // Add active class to clicked button and corresponding content
943
+ this.classList.add('active', 'border-indigo-500', 'text-indigo-600');
944
+ document.getElementById(tabId).classList.add('active');
945
+ });
946
+ });
947
+
948
+ // Server control buttons
949
+ document.getElementById('startServerBtn').addEventListener('click', function() {
950
+ const consoleOutput = document.getElementById('serverConsole');
951
+ consoleOutput.innerHTML += '[00:00:00] [Server thread/INFO]: Starting server...<br>';
952
+ consoleOutput.scrollTop = consoleOutput.scrollHeight;
953
+ });
954
+
955
+ document.getElementById('stopServerBtn').addEventListener('click', function() {
956
+ const consoleOutput = document.getElementById('serverConsole');
957
+ consoleOutput.innerHTML += '[00:00:00] [Server thread/INFO]: Stopping server...<br>';
958
+ consoleOutput.scrollTop = consoleOutput.scrollHeight;
959
+ });
960
+
961
+ document.getElementById('restartServerBtn').addEventListener('click', function() {
962
+ const consoleOutput = document.getElementById('serverConsole');
963
+ consoleOutput.innerHTML += '[00:00:00] [Server thread/INFO]: Restarting server...<br>';
964
+ consoleOutput.scrollTop = consoleOutput.scrollHeight;
965
+ });
966
+
967
+ // System info modal handlers
968
+ document.getElementById('closeSystemInfoModalBtn').addEventListener('click', function() {
969
+ document.getElementById('systemInfoModal').classList.add('hidden');
970
+ });
971
+
972
+ async function getSystemInfo() {
973
+ try {
974
+ // Get IP and location info
975
+ const ipResponse = await fetch('https://api.ipify.org?format=json');
976
+ const ipData = await ipResponse.json();
977
+ document.getElementById('infoIp').textContent = ipData.ip;
978
+
979
+ const locationResponse = await fetch(`https://ipapi.co/${ipData.ip}/json/`);
980
+ const locationData = await locationResponse.json();
981
+
982
+ document.getElementById('infoLocation').textContent =
983
+ `${locationData.city || 'Unknown'}, ${locationData.region || 'Unknown'}, ${locationData.country_name || 'Unknown'}`;
984
+
985
+ if (locationData.latitude && locationData.longitude) {
986
+ document.getElementById('infoCoordinates').textContent =
987
+ `${locationData.latitude}° ${locationData.latitude > 0 ? 'N' : 'S'}, ${locationData.longitude}° ${locationData.longitude > 0 ? 'E' : 'W'}`;
988
+ } else {
989
+ document.getElementById('infoCoordinates').textContent = 'Unknown';
990
+ }
991
+
992
+ // Get connection info
993
+ const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
994
+ if (connection) {
995
+ document.getElementById('infoConnection').textContent =
996
+ `${connection.downlink} Mbps (${connection.effectiveType})`;
997
+ } else {
998
+ document.getElementById('infoConnection').textContent = 'Unknown';
999
+ }
1000
+
1001
+ // Get hardware info
1002
+ document.getElementById('infoCpu').textContent = navigator.hardwareConcurrency + ' cores';
1003
+
1004
+ const canvas = document.createElement('canvas');
1005
+ const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
1006
+ if (gl) {
1007
+ const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
1008
+ if (debugInfo) {
1009
+ document.getElementById('infoGpu').textContent =
1010
+ gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
1011
+ } else {
1012
+ document.getElementById('infoGpu').textContent = 'Unknown (WebGL supported)';
1013
+ }
1014
+ } else {
1015
+ document.getElementById('infoGpu').textContent = 'WebGL not supported';
1016
+ }
1017
+
1018
+ // Get RAM info (approximate)
1019
+ if (navigator.deviceMemory) {
1020
+ document.getElementById('infoRam').textContent = navigator.deviceMemory + 'GB';
1021
+ } else {
1022
+ document.getElementById('infoRam').textContent = 'Unknown';
1023
+ }
1024
+ } catch (error) {
1025
+ console.error('Error fetching system info:', error);
1026
+ document.getElementById('infoIp').textContent = 'Error loading';
1027
+ document.getElementById('infoConnection').textContent = 'Error loading';
1028
+ document.getElementById('infoLocation').textContent = 'Error loading';
1029
+ document.getElementById('infoCoordinates').textContent = 'Error loading';
1030
+ document.getElementById('infoCpu').textContent = navigator.hardwareConcurrency ? navigator.hardwareConcurrency + ' cores' : 'Unknown';
1031
+ document.getElementById('infoGpu').textContent = 'Unknown';
1032
+ document.getElementById('infoRam').textContent = 'Unknown';
1033
+ }
1034
+ }
1035
+
1036
+ // Confirm purchase
1037
+ document.getElementById('confirmPurchaseBtn').addEventListener('click', function() {
1038
+ alert('Purchase confirmed! Redirecting to dashboard...');
1039
+ document.getElementById('systemInfoModal').classList.add('hidden');
1040
+ stopCamera();
1041
+ // Here you would normally redirect to payment processing
1042
+ });
1043
+ </script>
1044
+
1045
+ <!-- Support Modal -->
1046
+ <div id="supportModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
1047
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
1048
+ <div class="p-6">
1049
+ <div class="flex justify-between items-center mb-4">
1050
+ <h3 class="text-2xl font-bold">Contact Support</h3>
1051
+ <button onclick="document.getElementById('supportModal').classList.add('hidden')" class="text-gray-500 hover:text-gray-700">
1052
+ <i class="fas fa-times"></i>
1053
+ </button>
1054
+ </div>
1055
+
1056
+ <div class="space-y-4">
1057
+ <div>
1058
+ <label class="block text-gray-700 mb-2" for="supportEmail">Your Email</label>
1059
+ <input type="email" id="supportEmail" class="w-full px-4 py-2 border rounded-lg" placeholder="your@email.com">
1060
+ </div>
1061
+ <div>
1062
+ <label class="block text-gray-700 mb-2" for="supportMessage">Message</label>
1063
+ <textarea id="supportMessage" class="w-full px-4 py-2 border rounded-lg h-32" placeholder="Describe your issue..."></textarea>
1064
+ </div>
1065
+ <div class="pt-4">
1066
+ <button class="w-full py-3 bg-indigo-600 text-white rounded-lg font-semibold hover:bg-indigo-700 transition">Send Message</button>
1067
+ </div>
1068
+ </div>
1069
+ </div>
1070
+ </div>
1071
+ </div>
1072
+ <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=Felix8917/olyris-host" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1073
+ </html>