-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwidget.html
137 lines (117 loc) · 4.25 KB
/
widget.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>You Shouldn't Be Here!</title>
<style>
body {
margin: 10px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
/* Use viewport width to fill the entire screen */
}
.moving-container {
display: flex;
justify-content: center;
align-items: center;
/* Center items vertically */
gap: 10px;
/* Adjust the spacing between avatars */
flex-wrap: nowrap;
/* Prevent wrapping to the next line */
overflow-x: auto;
/* Enable horizontal scrolling */
width: 100%;
max-width: auto;
/* Adjust the maximum width of the container */
margin: 0 auto;
/* Center the container horizontally */
position: fixed;
/* Use fixed positioning */
top: 0;
/* Position the container at the top of the page */
}
.moving-image-container {
border: 3px solid #ffffff;
/* Add a 3px wide white border around the container */
background-color: #36393f;
width: 100px;
/* Adjust the size of the avatars as needed */
height: 100px;
/* Preserve the 1:1 aspect ratio */
overflow: hidden;
position: relative;
border-radius: 50%;
}
.moving-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
</style>
</head>
<body>
<script>
async function getValidGifURLs() {
try {
const response = await fetch('https://userpfp.github.io/UserPFP/source/data.json');
const data = await response.json();
const avatars = data.avatars || {};
const gifURLs = Object.values(avatars).filter(url => !isBadgeOrServerIcon(url));
return gifURLs;
} catch (error) {
console.error('Error fetching data:', error);
return [];
}
}
function isBadgeOrServerIcon(url) {
return (
url.includes("profileBadges") ||
url.includes("profileBadge") ||
url.includes("badges") ||
url.includes("cdn.discordapp.com/icons/")
);
}
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
function addMovingImagesToContainer(imageUrls, containerElement) {
for (const imageUrl of imageUrls) {
const imageContainer = document.createElement('div');
imageContainer.classList.add('moving-image-container');
const imageElement = document.createElement('img');
imageElement.classList.add('moving-image');
imageElement.src = imageUrl;
imageElement.addEventListener('error', () => {
containerElement.removeChild(imageContainer);
});
imageContainer.appendChild(imageElement);
containerElement.appendChild(imageContainer);
}
}
async function createDynamicBackground() {
const containerElement = document.createElement('div');
containerElement.classList.add('moving-container');
document.body.appendChild(containerElement);
const gifURLs = await getValidGifURLs();
shuffleArray(gifURLs);
const numGifsToShow = 5;
const gifURLsToShow = gifURLs.slice(0, numGifsToShow);
addMovingImagesToContainer(gifURLsToShow, containerElement);
}
createDynamicBackground();
</script>
</body>
</html>