Hugging Face's logo

Spaces:
vikktree44
/
netorganizer-pro
Running

App Files Community
netorganizer-pro
File size: 10,125 Bytes
ba72e9a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
cf76990
 
 
 
 
 
ba72e9a
cf76990
ba72e9a
 
 
 
 
 
 
 
 
 
 
 
 
99a84af
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ba72e9a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NetOrganizer Pro</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
</head>
<body class="bg-gray-100">
    <custom-navbar></custom-navbar>
    
    <main class="container mx-auto px-4 py-8">
        <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
            <h1 class="text-3xl font-bold text-gray-800 mb-6">Network Service Organizer</h1>
            
            <div class="mb-8">
                <label class="block text-gray-700 font-medium mb-2">Service Type</label>
                <div class="flex space-x-4">
                    <button id="internetBtn" class="service-type-btn bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition duration-200">Internet</button>
                    <button id="l2lBtn" class="service-type-btn bg-gray-200 text-gray-800 px-6 py-3 rounded-lg font-medium hover:bg-gray-300 transition duration-200">LAN to LAN</button>
                </div>
            </div>

            <!-- Internet Service Form -->
            <div id="internetForm" class="space-y-6">
                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <label for="client" class="block text-gray-700 font-medium mb-2">Client</label>
                        <input type="text" id="client" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label for="serviceNumber" class="block text-gray-700 font-medium mb-2">Service Number</label>
                        <input type="text" id="serviceNumber" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                </div>

                <div>
                    <label for="address" class="block text-gray-700 font-medium mb-2">Address</label>
                    <input type="text" id="address" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>

                <div>
                    <label for="bandwidth" class="block text-gray-700 font-medium mb-2">Bandwidth</label>
                    <input type="text" id="bandwidth" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>

                <div>
                    <label for="ipRange" class="block text-gray-700 font-medium mb-2">IP Range (e.g., 190.220.1.216/29)</label>
                    <input type="text" id="ipRange" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <button id="calculateBtn" class="mt-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition duration-200">Calculate IPs</button>
                </div>

                <div id="ipTableContainer" class="hidden mt-6 overflow-x-auto">
                    <table class="min-w-full bg-white border border-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IP Address</th>
                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subnet Mask</th>
                            </tr>
                        </thead>
                        <tbody id="ipTableBody" class="divide-y divide-gray-200">
                            <!-- IP Table rows will be generated here -->
                        </tbody>
                    </table>

                    <div class="mt-4 flex space-x-4">
                        <button id="copyTableBtn" class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition duration-200">
                            <i data-feather="copy" class="mr-2"></i> Copy Table
                        </button>
                    </div>

                    <div class="mt-4 grid md:grid-cols-2 gap-4">
<div>
                            <label class="block text-gray-700 font-medium mb-1">Primary DNS</label>
                            <p class="text-gray-800">186.12.238.16</p>
                        </div>
                        <div>
                            <label class="block text-gray-700 font-medium mb-1">Secondary DNS</label>
                            <p class="text-gray-800">186.12.238.15</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- L2L Service Form -->
            <div id="l2lForm" class="hidden space-y-6">
                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <label for="l2lClient" class="block text-gray-700 font-medium mb-2">Client</label>
                        <input type="text" id="l2lClient" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label for="l2lServiceNumber" class="block text-gray-700 font-medium mb-2">Service Number</label>
                        <input type="text" id="l2lServiceNumber" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                </div>

                <div>
                    <label for="l2lBandwidth" class="block text-gray-700 font-medium mb-2">Bandwidth</label>
                    <input type="text" id="l2lBandwidth" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>

                <div class="grid md:grid-cols-2 gap-6">
<div class="border border-gray-200 p-4 rounded-lg">
                        <h3 class="text-lg font-medium text-gray-800 mb-3">Site A</h3>
                        <div class="space-y-4">
                            <div>
                                <label for="siteAAddress" class="block text-gray-700 font-medium mb-1">Address</label>
                                <input type="text" id="siteAAddress" class="w-full px-3 py-2 border border-gray-300 rounded-md">
                            </div>
                            <div>
                                <label for="siteADevice" class="block text-gray-700 font-medium mb-1">Device Info</label>
                                <textarea id="siteADevice" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md"></textarea>
                            </div>
                            <div>
                                <label for="siteAPort" class="block text-gray-700 font-medium mb-1">Service Port</label>
                                <input type="text" id="siteAPort" class="w-full px-3 py-2 border border-gray-300 rounded-md">
                            </div>
                        </div>
                    </div>

                    <div class="border border-gray-200 p-4 rounded-lg">
                        <h3 class="text-lg font-medium text-gray-800 mb-3">Site B</h3>
                        <div class="space-y-4">
                            <div>
                                <label for="siteBAddress" class="block text-gray-700 font-medium mb-1">Address</label>
                                <input type="text" id="siteBAddress" class="w-full px-3 py-2 border border-gray-300 rounded-md">
                            </div>
                            <div>
                                <label for="siteBDevice" class="block text-gray-700 font-medium mb-1">Device Info</label>
                                <textarea id="siteBDevice" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md"></textarea>
                            </div>
                            <div>
                                <label for="siteBPort" class="block text-gray-700 font-medium mb-1">Service Port</label>
                                <input type="text" id="siteBPort" class="w-full px-3 py-2 border border-gray-300 rounded-md">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-8">
                <button id="generateBtn" class="bg-green-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-green-700 transition duration-200 flex items-center">
                    <i data-feather="mail" class="mr-2"></i> Generate Email Template
                </button>
            </div>

            <div id="outputContainer" class="hidden mt-8 p-6 bg-gray-50 rounded-lg border border-gray-200">
                <h2 class="text-xl font-bold text-gray-800 mb-4">Email Template</h2>
                <div id="emailOutput" class="whitespace-pre-wrap text-gray-700"></div>
                <button id="copyBtn" class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition duration-200">
                    <i data-feather="copy" class="mr-2"></i> Copy to Clipboard
                </button>
            </div>
        </div>
    </main>

    <custom-footer></custom-footer>

    <script src="script.js"></script>
    <script>
        feather.replace();
    </script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>