Skip to content

Commit cb0445a

Browse files
PtechgithubPtechgithub
authored
Updated UI
1 parent 4e86390 commit cb0445a

File tree

1 file changed

+118
-21
lines changed

1 file changed

+118
-21
lines changed

‎index.html‎

Lines changed: 118 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,130 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" class="dark">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>WireGuard Config Manager</title>
7-
<link rel="stylesheet" href="css/style.css">
8-
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
9-
<meta name="description" content="Free WireGuard configuration generator for secure VPN connection">
6+
<title>Awesome Config Generator</title>
7+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
8+
<meta name="description" content="Generate secure VPN configurations for WireGuard, Amnezia-Wg, and V2Ray.">
9+
10+
<!-- Tailwind CSS CDN -->
11+
<script src="https://cdn.tailwindcss.com"></script>
12+
<!-- Font Awesome for Icons -->
13+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlroVzLz8T90W55s2x6e5B1g3w+a/96p/5p5X9G20p9r9m9z5y1D1z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2z2s.fa-solid {
14+
font-size: 1.2rem;
15+
margin-right: 0.5rem;
16+
width: 1.2rem; /* Ensure consistent width */
17+
text-align: center;
18+
}
19+
/* Message visibility controlled by JS */
20+
.message.invisible {
21+
visibility: hidden;
22+
opacity: 0;
23+
transition: opacity 0.3s ease-in-out;
24+
}
25+
.message.visible {
26+
visibility: visible;
27+
opacity: 1;
28+
}
29+
30+
/* Ensure tab panels transition smoothly */
31+
.tab-panel.hidden {
32+
display: none;
33+
}
34+
.tab-panel.active {
35+
display: block;
36+
animation: fadeIn 0.3s ease-out; /* Simple fade in for tab content */
37+
}
38+
@keyframes fadeIn {
39+
from { opacity: 0; }
40+
to { opacity: 1; }
41+
}
42+
43+
/* Specific height for V2Ray textarea */
44+
#v2rayBox {
45+
min-height: 96px; /* 24 * 4px = 96px for h-24 */
46+
}
47+
48+
/* Initial state for config-box opacity, will be set to opacity-100 by JS for transition */
49+
.config-box {
50+
opacity: 0;
51+
transition: opacity 0.5s ease-in-out;
52+
}
53+
.config-box.opacity-100 {
54+
opacity: 1;
55+
}
56+
57+
/* Custom scrollbar for webkit browsers (Dark Mode Default) */
58+
.tab-content-container::-webkit-scrollbar {
59+
width: 8px;
60+
height: 8px;
61+
}
62+
.tab-content-container::-webkit-scrollbar-track {
63+
background: #2d3748; /* Darker track for dark mode */
64+
border-radius: 10px;
65+
}
66+
.tab-content-container::-webkit-scrollbar-thumb {
67+
background: #4a5568; /* Slightly lighter thumb */
68+
border-radius: 10px;
69+
}
70+
.tab-content-container::-webkit-scrollbar-thumb:hover {
71+
background: #6b7280;
72+
}
73+
</style>
1074
</head>
11-
<body>
12-
<main class="container">
13-
<header>
14-
<h1>WireGuard Config Generator</h1>
15-
<button class="get-btn">Get Free Config</button>
75+
<body class="font-poppins flex items-center justify-center min-h-screen p-4 sm:p-2 transition-colors duration-500
76+
bg-gradient-to-br from-gray-950 to-purple-900 text-gray-200">
77+
<main class="container bg-zinc-800 p-8 rounded-2xl shadow-2xl w-full max-w-2xl mx-auto relative overflow-hidden ring-1 ring-inset ring-gray-700 md:p-6 sm:p-4 transition-colors duration-500">
78+
79+
<header class="mb-8 text-center relative">
80+
<h1 class="text-4xl font-extrabold text-blue-400 mb-4 sm:text-3xl transition-colors duration-500">Awesome Config Generator</h1>
81+
<p class="text-gray-400 text-lg sm:text-base transition-colors duration-500">Generate secure VPN configurations for free!</p>
82+
83+
<!-- Dark Mode Toggle Button REMOVED -->
84+
85+
<!-- Main action button -->
86+
<button class="get-btn mt-6 w-full py-3 px-6 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-bold rounded-lg shadow-lg hover:from-blue-700 hover:to-purple-700 focus:outline-none focus:ring-4 focus:ring-blue-300 transition-all duration-300 transform hover:scale-105">
87+
<i class="fas fa-wrench mr-2"></i> Get Free Config
88+
</button>
1689
</header>
1790

18-
<section class="wire-guard-config"></section>
19-
20-
<button class="download-btn">Download Config</button>
21-
22-
<section class="v2ray-config"></section>
23-
24-
<button class="telegram">
25-
<a href="https://t.me/P_Tech2024" target="_blank" rel="noopener noreferrer">Telegram: @P_Tech2024</a>
26-
</button>
91+
<!-- Tabs Container -->
92+
<div class="tabs-container mt-8">
93+
<!-- Tab Buttons -->
94+
<div class="tabs-header flex justify-center border-b border-gray-700 transition-colors duration-500">
95+
<button class="tab-button flex-1 py-3 text-lg font-semibold text-gray-400 border-b-4 border-transparent hover:border-blue-500 hover:text-blue-300 transition-all duration-200 cursor-pointer sm:text-base" data-tab="wireguard" id="wireguardTab">WireGuard</button>
96+
<button class="tab-button flex-1 py-3 text-lg font-semibold text-gray-400 border-b-4 border-transparent hover:border-blue-500 hover:text-blue-300 transition-all duration-200 cursor-pointer sm:text-base" data-tab="amnezia" id="amneziaTab">Amnezia-Wg</button>
97+
<button class="tab-button flex-1 py-3 text-lg font-semibold text-gray-400 border-b-4 border-transparent hover:border-blue-500 hover:text-blue-300 transition-all duration-200 cursor-pointer sm:text-base" data-tab="v2ray" id="v2rayTab">V2Ray</button>
98+
</div>
99+
100+
<!-- Tab Content Panels -->
101+
<div class="tab-content-container mt-6 p-6 rounded-lg shadow-inner bg-zinc-900 overflow-y-auto max-h-[400px] sm:p-4 transition-colors duration-500">
102+
<div id="wireguard-panel" class="tab-panel active">
103+
<section class="wire-guard-config"></section>
104+
</div>
105+
<div id="amnezia-panel" class="tab-panel hidden">
106+
<section class="amnezia-wg-config"></section>
107+
</div>
108+
<div id="v2ray-panel" class="tab-panel hidden">
109+
<section class="v2ray-config"></section>
110+
</div>
111+
</div>
112+
</div>
113+
114+
<div class="mt-10 text-center">
115+
<!-- Telegram button -->
116+
<button class="telegram py-3 px-8 bg-blue-500 text-white font-semibold rounded-lg shadow-lg hover:bg-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-300 transition-colors duration-300 flex items-center justify-center space-x-2 mx-auto">
117+
<a href="https://t.me/P_Tech2024" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center text-white no-underline">
118+
<i class="fab fa-telegram-plane text-xl mr-2"></i>
119+
<span>Telegram: @P_Tech2024</span>
120+
</a>
121+
</button>
122+
</div>
27123
</main>
28124

29-
<div class="spinner" style="display: none;"></div>
125+
<!-- Spinner overlay -->
126+
<div class="spinner fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 border-4 border-gray-600 border-t-blue-400 rounded-full w-10 h-10 z-50" style="display: none;"></div>
30127

31128
<script src="js/app.js"></script>
32-
</body>
129+
</body>
33130
</html>

0 commit comments

Comments
 (0)