File size: 9,905 Bytes
b25c766
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
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
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Server Settings - CraftyHost</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body class="bg-gray-900 text-white">
    <custom-navbar></custom-navbar>
    
    <main class="container mx-auto px-4 py-8">
        <div class="flex items-center justify-between mb-8">
            <div>
                <h1 class="text-2xl md:text-3xl font-bold">Server Settings</h1>
                <p class="text-gray-400">My Minecraft Server</p>
            </div>
            <button class="bg-emerald-600 hover:bg-emerald-700 px-4 py-2 rounded-lg font-medium transition">
                <i data-feather="save" class="w-4 h-4 mr-2"></i> Save Changes
            </button>
        </div>
        
        <div class="grid md:grid-cols-4 gap-6">
            <!-- Navigation -->
            <div class="md:col-span-1">
                <div class="bg-gray-800 rounded-xl p-4 sticky top-4">
                    <h2 class="text-lg font-semibold mb-4">Configuration</h2>
                    <nav class="space-y-2">
                        <a href="#" class="block bg-gray-700 text-white px-4 py-2 rounded-lg">General</a>
                        <a href="#" class="block text-gray-400 hover:text-white px-4 py-2 rounded-lg transition">World</a>
                        <a href="#" class="block text-gray-400 hover:text-white px-4 py-2 rounded-lg transition">Networking</a>
                        <a href="#" class="block text-gray-400 hover:text-white px-4 py-2 rounded-lg transition">Performance</a>
                        <a href="#" class="block text-gray-400 hover:text-white px-4 py-2 rounded-lg transition">Whitelist</a>
                        <a href="#" class="block text-gray-400 hover:text-white px-4 py-2 rounded-lg transition">Operators</a>
                        <a href="#" class="block text-gray-400 hover:text-white px-4 py-2 rounded-lg transition">Backups</a>
                        <a href="#" class="block text-gray-400 hover:text-white px-4 py-2 rounded-lg transition">Scheduler</a>
                    </nav>
                </div>
            </div>
            
            <!-- Settings Form -->
            <div class="md:col-span-3">
                <div class="bg-gray-800 rounded-xl p-6">
                    <h2 class="text-xl font-semibold mb-6">General Settings</h2>
                    
                    <form class="space-y-6">
                        <div>
                            <label for="server-name" class="block text-sm font-medium mb-1">Server Name</label>
                            <input type="text" id="server-name" value="My Minecraft Server" 
                                   class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500">
                        </div>
                        
                        <div>
                            <label for="server-version" class="block text-sm font-medium mb-1">Minecraft Version</label>
                            <select id="server-version" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500">
                                <option>Paper 1.20.2</option>
                                <option>Paper 1.20.1</option>
                                <option>Paper 1.19.4</option>
                                <option>Spigot 1.20.2</option>
                                <option>Spigot 1.20.1</option>
                                <option>Vanilla 1.20.2</option>
                                <option>Bedrock Edition</option>
                            </select>
                        </div>
                        
                        <div>
                            <label for="server-type" class="block text-sm font-medium mb-1">Server Type</label>
                            <select id="server-type" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500">
                                <option>Survival</option>
                                <option>Creative</option>
                                <option>Adventure</option>
                                <option>Hardcore</option>
                                <option>Skyblock</option>
                                <option>Custom</option>
                            </select>
                        </div>
                        
                        <div>
                            <label for="max-players" class="block text-sm font-medium mb-1">Max Players</label>
                            <input type="number" id="max-players" value="25" min="1" max="100"
                                   class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500">
                        </div>
                        
                        <div>
                            <label for="motd" class="block text-sm font-medium mb-1">MOTD (Message of the Day)</label>
                            <textarea id="motd" rows="2" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500">Welcome to my Minecraft server!</textarea>
                        </div>
                        
                        <div class="grid md:grid-cols-2 gap-6">
                            <div>
                                <label class="flex items-center space-x-2">
                                    <input type="checkbox" checked class="h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-gray-600 rounded bg-gray-700">
                                    <span>Enable PVP</span>
                                </label>
                            </div>
                            <div>
                                <label class="flex items-center space-x-2">
                                    <input type="checkbox" checked class="h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-gray-600 rounded bg-gray-700">
                                    <span>Allow Nether</span>
                                </label>
                            </div>
                            <div>
                                <label class="flex items-center space-x-2">
                                    <input type="checkbox" class="h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-gray-600 rounded bg-gray-700">
                                    <span>Hardcore Mode</span>
                                </label>
                            </div>
                            <div>
                                <label class="flex items-center space-x-2">
                                    <input type="checkbox" checked class="h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-gray-600 rounded bg-gray-700">
                                    <span>Enable Command Blocks</span>
                                </label>
                            </div>
                        </div>
                        
                        <div>
                            <label for="spawn-protection" class="block text-sm font-medium mb-1">Spawn Protection Radius</label>
                            <input type="range" id="spawn-protection" min="0" max="50" value="16"
                                   class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
                            <div class="flex justify-between text-xs text-gray-400">
                                <span>0</span>
                                <span>25</span>
                                <span>50</span>
                            </div>
                        </div>
                        
                        <div class="pt-4 border-t border-gray-700">
                            <h3 class="text-lg font-semibold mb-4">Danger Zone</h3>
                            <div class="space-y-4">
                                <div class="flex justify-between items-center p-4 bg-gray-700/50 rounded-lg">
                                    <div>
                                        <h4 class="font-medium">Reset World</h4>
                                        <p class="text-sm text-gray-400">Delete all world data and start fresh</p>
                                    </div>
                                    <button class="bg-red-500 hover:bg-red-600 px-4 py-2 rounded text-sm transition">Reset</button>
                                </div>
                                
                                <div class="flex justify-between items-center p-4 bg-gray-700/50 rounded-lg">
                                    <div>
                                        <h4 class="font-medium">Delete Server</h4>
                                        <p class="text-sm text-gray-400">Permanently remove this server and all its data</p>
                                    </div>
                                    <button class="bg-red-500 hover:bg-red-600 px-4 py-2 rounded text-sm transition">Delete</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </main>

    <custom-footer></custom-footer>

    <script src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
    <script src="script.js"></script>
    <script>
        feather.replace();
    </script>
</body>
</html>