-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
169 lines (149 loc) · 4.82 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
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: "Space Grotesk", sans-serif;
}
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("https://www.transparenttextures.com/patterns/grid-noise.png");
opacity: 0.12;
}
.centered-text {
position: absolute;
font-size: 24px;
font-weight: bold;
text-align: center;
color: white;
}
.centered-text h1 {
margin-bottom: 0; /* Remove the default margin at the bottom of the h1 tag */
}
.centered-text h2 {
margin-top: 0.5rem; /* Reduce the default margin at the top of the h2 tag */
margin-bottom: 0;
}
.gradient-btn {
display: inline-block;
padding: 12px 24px;
font-weight: 600;
font-size: 18px;
background-color: rgba(31, 30, 38, 0.2); /* Change the background color to be semi-transparent */
color: white;
text-decoration: none;
transition: background 0.3s, color 0.3s;
backdrop-filter: blur(10px); /* Add the glass effect by blurring the background behind the element */
-webkit-backdrop-filter: blur(10px); /* For Safari browser compatibility */
/* border: 1px solid rgba(255, 255, 255, 0.2); Add a subtle border for a more defined edge */
margin-top: 0.5rem;
}
.gradient-btn:hover {
background-color: white;
color: black;
animation: change-color 1s steps;
}
@keyframes change-color {
0% {
background-color: #1f1e26;
}
50% {
background-color: white;
}
100% {
background-color: #1f1e26;
}
}
</style>
</head>
<body>
<div class="centered-text">
<h1>
<span style="background: -webkit-linear-gradient(
45deg,
hsl(240deg 39% 57%) 0%,
hsl(275deg 42% 58%) 5%,
hsl(309deg 49% 59%) 11%,
hsl(329deg 85% 67%) 19%,
hsl(341deg 100% 70%) 28%,
hsl(358deg 100% 73%) 40%,
hsl(18deg 100% 68%) 54%,
hsl(34deg 100% 62%) 70%,
hsl(46deg 100% 55%) 87%,
hsl(55deg 100% 50%) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;">ThirdEye</h1>
</h1>
<h2>The decentralised vision of your security</h2>
<a href="https://demo.thirdeyelabs.xyz" class="gradient-btn">Beta access</a>
<a href="https://docs.thirdeyelabs.xyz" class="gradient-btn">Documentation</a>
</div>
<script>
let currentDegree = 165;
let direction = 1;
let animationSpeed = 30; // Starting time interval in milliseconds
let animationStep = 5; // Amount to increase time interval on each iteration
let lastFrameTime = performance.now();
function updateBackground() {
document.body.style.backgroundImage = `
linear-gradient(
${currentDegree}deg,
hsl(228deg 9% 11%) 2%,
hsl(240deg 15% 15%) 38%,
hsl(258deg 23% 19%) 51%,
hsl(272deg 31% 24%) 61%,
hsl(288deg 38% 28%) 68%,
hsl(303deg 45% 32%) 73%,
hsl(318deg 52% 36%) 78%,
hsl(333deg 59% 40%) 82%,
hsl(348deg 67% 45%) 85%,
hsl(3deg 73% 49%) 88%,
hsl(18deg 81% 53%) 90%,
hsl(34deg 88% 57%) 92%,
hsl(32deg 88% 56%) 94%,
hsl(30deg 89% 55%) 96%,
hsl(27deg 89% 55%) 97%,
hsl(25deg 89% 54%) 98%,
hsl(23deg 89% 54%) 99%,
hsl(21deg 89% 53%) 99%,
hsl(19deg 89% 52%) 100%,
hsl(17deg 89% 52%) 100%,
hsl(14deg 90% 51%) 100%,
hsl(12deg 90% 50%) 100%,
hsl(10deg 90% 50%) 100%
)`;
}
function animateGradient(timestamp) {
const deltaTime = timestamp - lastFrameTime;
if (deltaTime >= animationSpeed) {
currentDegree += direction;
if (currentDegree >= 225) {
direction = -1;
} else if (currentDegree <= 125) {
direction = 1;
}
updateBackground();
lastFrameTime = timestamp;
}
requestAnimationFrame(animateGradient);
}
requestAnimationFrame(animateGradient); // Start the animation
</script>
</body>
</html>