-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
158 lines (151 loc) · 4.8 KB
/
index.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
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-FZ2GBVV4SW"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-FZ2GBVV4SW');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tohid Khan</title>
<style>
@property --rotate {
syntax: "<angle>";
initial-value: 132deg;
inherits: false;
}
:root {
--card-height: 65vh;
--card-width: calc(var(--card-height) / 1.5);
}
body {
min-height: 100vh;
background-color: #212534;
display: flex;
align-items: center;
flex-direction: column;
padding-top: 2rem;
box-sizing: border-box;
}
.card {
background: #191c29;
width: calc(var(--card-width) * 1.0); /* Increase width */
height: calc(var(--card-height) * 1.0); /* Increase height */
padding: 3px;
position: relative;
border-radius: 6px;
justify-content: center;
align-items: center;
text-align: center;
display: flex;
font-size: 2em; /* Increase font size of Tohid */
color: rgb(88 199 250 /0%);
cursor: pointer;
font-family: cursive;
}
.card:hover {
color: rgb(88 199 250 /100%);
transition: color 1s;
}
.card:hover:before, .card:hover:after {
animation: none;
opacity: 0;
}
.card::before {
content: "";
width: 104%;
height: 102%;
border-radius: 8px;
background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
position: absolute;
z-index: -1;
top: -1%;
left: -2%;
animation: spin 2.5s linear infinite;
}
.card::after {
position: absolute;
content: "";
top: calc(var(--card-height) /6);
left: 0;
right: 0;
z-index: -1;
height: 100%;
width: 100%;
margin: 0 auto;
transform: scale(0.8);
filter: blur(calc(var(--card-height) /6));
background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
opacity: 1;
transition: opacity .5s;
animation: spin 2.5s linear infinite;
}
@keyframes spin {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
.button-container {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.button {
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
font-size: 1.2em;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s;
}
.whatsapp {
background-color: #25D366;
}
.profile {
background-color: red;
}
.button:hover {
filter: brightness(1.2);
}
</style>
</head>
<body>
<div class="card">
Welcome To Tohid Khan
</div>
<div class="button-container">
<button class="button whatsapp" onclick="redirectToWhatsApp()">Contact Me</button>
<button class="button profile" onclick="redirectToProfile()">Main Menu</button>
</div>
<script>
// Define the message for WhatsApp
let whatsappMessage = "Tohid Khan 😊!<br>I have just installed your application and indeed it's good 😊.<br>Continue with that spirit Broh😊🤝.<br>My Name is: ";
// Encode the message for URL
let encodedWhatsAppMessage = encodeURIComponent(whatsappMessage);
// Construct the WhatsApp URL with the message
let whatsappURL = `https://wa.me/917849917350?text=${encodedWhatsAppMessage}`;
// Function to redirect to WhatsApp
function redirectToWhatsApp() {
window.location.href = whatsappURL;
}
// Function to redirect to Profile
function redirectToProfile() {
window.location.href = "main.html";
}
// Wait for 5 seconds before showing buttons
setTimeout(function() {
document.querySelector('.button-container').style.display = 'flex';
}, 5000); // 5000 milliseconds = 5 seconds
</script>
</body>
</html>