-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwelcome.html
151 lines (139 loc) · 7.51 KB
/
welcome.html
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
<!DOCTYPE html>
<html>
<head>
<title>Welcome to IP Manager</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<div class="max-w-3xl mx-auto p-6">
<!-- Header -->
<div class="text-center mb-8">
<h1 class="text-4xl font-bold text-blue-600 mb-4">Welcome to IP Manager</h1>
<p class="text-xl text-gray-600">A powerful tool to manage and monitor your IP address</p>
</div>
<!-- Pin Instructions -->
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-8">
<div class="flex items-center">
<div class="flex-shrink-0">
<i class="fas fa-thumbtack text-yellow-400 text-xl"></i>
</div>
<div class="ml-3">
<h3 class="text-lg font-medium text-yellow-800">First Step: Pin the Extension</h3>
<p class="text-yellow-700">
1. Click the Extensions icon <i class="fas fa-puzzle-piece"></i> in your Chrome toolbar<br>
2. Click the pin icon <i class="fas fa-thumbtack"></i> next to IP Manager<br>
3. Now you can easily access IP Manager from your toolbar
</p>
</div>
</div>
</div>
<!-- Features -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<!-- IP Address Feature -->
<div class="bg-white rounded-lg shadow-sm p-6">
<div class="flex items-center mb-4">
<i class="fas fa-network-wired text-blue-500 text-2xl mr-3"></i>
<h3 class="text-lg font-semibold">IP Address Display</h3>
</div>
<p class="text-gray-600">View your public IP address with its type (IPv4/IPv6). The address is automatically updated every 5 minutes to ensure accuracy.</p>
</div>
<!-- Port Checker Feature -->
<div class="bg-white rounded-lg shadow-sm p-6">
<div class="flex items-center mb-4">
<i class="fas fa-plug text-green-500 text-2xl mr-3"></i>
<h3 class="text-lg font-semibold">Port Checker</h3>
</div>
<p class="text-gray-600">Check port status on local and public networks. Supports custom host checking, with easy-to-read results and one-click URL copying.</p>
</div>
<!-- Network Test Feature -->
<div class="bg-white rounded-lg shadow-sm p-6">
<div class="flex items-center mb-4">
<i class="fas fa-wifi text-purple-500 text-2xl mr-3"></i>
<h3 class="text-lg font-semibold">Network Test</h3>
</div>
<p class="text-gray-600">Verify your internet connection status with one click. Tests multiple servers to ensure accurate results.</p>
</div>
<!-- History Feature -->
<div class="bg-white rounded-lg shadow-sm p-6">
<div class="flex items-center mb-4">
<i class="fas fa-history text-orange-500 text-2xl mr-3"></i>
<h3 class="text-lg font-semibold">IP History Management</h3>
</div>
<p class="text-gray-600">Track IP changes with advanced filtering, sorting, and export capabilities. Includes timestamps and IP types for comprehensive tracking.</p>
</div>
</div>
<!-- Quick Tips -->
<div class="bg-blue-50 rounded-lg p-6 mb-8">
<h3 class="text-xl font-semibold text-blue-800 mb-4">Quick Tips</h3>
<ul class="space-y-3 text-blue-700">
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-blue-500"></i>
Click the copy icon to copy any IP address or port URL to your clipboard
</li>
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-blue-500"></i>
Use the search bar in history to filter specific IP addresses
</li>
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-blue-500"></i>
Sort history by time to track changes chronologically
</li>
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-blue-500"></i>
Export your IP history as a log file for record keeping
</li>
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-blue-500"></i>
Use custom host checking to test specific domains or IPs
</li>
</ul>
</div>
<!-- How to Enable Notifications -->
<div class="bg-red-50 rounded-lg p-6 border-l-4 border-red-400">
<h3 class="text-xl font-semibold text-red-800 mb-4">How to Enable Notifications</h3>
<p class="text-gray-700 mb-3">If you are not receiving notifications, follow these steps to enable them:</p>
<!-- Chrome Settings -->
<div class="flex items-center mb-4">
<i class="fas fa-bell text-yellow-500 text-2xl mr-3"></i>
<h4 class="text-lg font-semibold text-gray-800">Enable Notifications in Chrome</h4>
</div>
<ul class="list-disc list-inside text-gray-700 mb-6">
<li>Go to <b>chrome://settings/content/notifications</b> and allow notifications for Chrome.</li>
</ul>
<!-- Windows Settings -->
<div class="flex items-center mb-4">
<i class="fab fa-windows text-blue-500 text-2xl mr-3"></i>
<h4 class="text-lg font-semibold text-gray-800">Enable Notifications on Windows</h4>
</div>
<ul class="list-disc list-inside text-gray-700 mb-6">
<li>Go to <b>Settings > System > Notifications & actions</b>.</li>
<li>Ensure that notifications are enabled for Google Chrome.</li>
</ul>
<!-- macOS Settings -->
<div class="flex items-center mb-4">
<i class="fab fa-apple text-gray-800 text-2xl mr-3"></i>
<h4 class="text-lg font-semibold text-gray-800">Enable Notifications on macOS</h4>
</div>
<ul class="list-disc list-inside text-gray-700 mb-6">
<li>Go to <b>System Preferences > Notifications</b>.</li>
<li>Find Google Chrome and enable notifications.</li>
</ul>
<!-- Disable Do Not Disturb on macOS -->
<div class="flex items-center mb-4">
<i class="fas fa-moon text-purple-500 text-2xl mr-3"></i>
<h4 class="text-lg font-semibold text-gray-800">Disable "Do Not Disturb" on macOS</h4>
</div>
<ul class="list-disc list-inside text-gray-700">
<li>Open <b>Control Center</b> from the top-right corner.</li>
<li>Click on "Focus" and ensure "Do Not Disturb" is off.</li>
</ul>
</div>
</div>
</body>
</html>