-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcredits.html
111 lines (103 loc) · 6.33 KB
/
credits.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stux - VTuber Credits</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
}
}
}
// Function to create credit cards
function createCreditCard(name, role, image, links) {
const card = document.createElement('div');
card.className = 'bg-white/10 backdrop-blur-md border-none text-white rounded-lg p-4 flex flex-col items-center space-y-4';
card.innerHTML = `
<div class="w-24 h-24 rounded-full overflow-hidden border-2 border-white/50">
<img src="${image}" alt="${name}'s Avatar" class="object-cover w-full h-full">
</div>
<div class="text-center">
<h2 class="text-xl font-bold">${name}</h2>
<p class="text-sm opacity-80">${role}</p>
</div>
<div class="flex space-x-2">
${links.map(link => `
<a href="${link.url}" class="text-white hover:text-blue-300 transition duration-300" title="${link.title}">
${link.icon}
</a>
`).join('')}
</div>
`;
return card;
}
// Add credit cards when the window loads
window.onload = function() {
const container = document.getElementById('credits-container');
const credits = [
{
name: "Artist 1",
role: "Character Designer",
image: "/placeholder.svg?height=200&width=200",
links: [
{
url: "https://twitter.com/artist1",
title: "Twitter",
icon: '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" /></svg>'
},
{
url: "https://instagram.com/artist1",
title: "Instagram",
icon: '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2c2.717 0 3.056.01 4.122.06 1.065.05 1.79.217 2.428.465.66.254 1.216.598 1.772 1.153.509.5.902 1.105 1.153 1.772.247.637.415 1.363.465 2.428.047 1.066.06 1.405.06 4.122 0 2.717-.01 3.056-.06 4.122-.05 1.065-.218 1.79-.465 2.428a4.883 4.883 0 0 1-1.153 1.772c-.5.509-1.105.902-1.772 1.153-.637.247-1.363.415-2.428.465-1.066.047-1.405.06-4.122.06-2.717 0-3.056-.01-4.122-.06-1.065-.05-1.79-.218-2.428-.465a4.89 4.89 0 0 1-1.772-1.153 4.904 4.904 0 0 1-1.153-1.772c-.247-.637-.415-1.363-.465-2.428C2.013 15.056 2 14.717 2 12c0-2.717.01-3.056.06-4.122.05-1.066.217-1.79.465-2.428a4.88 4.88 0 0 1 1.153-1.772A4.897 4.897 0 0 1 5.45 2.525c.638-.248 1.362-.415 2.428-.465C8.944 2.013 9.283 2 12 2z" /></svg>'
}
]
},
{
name: "Artist 2",
role: "Emote Artist",
image: "/placeholder.svg?height=200&width=200",
links: [
{
url: "https://twitter.com/artist2",
title: "Twitter",
icon: '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" /></svg>'
},
{
url: "https://artstation.com/artist2",
title: "ArtStation",
icon: '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 2l12 20H6l-4-6.5L6 2zm3.5 9L18 22 8 22l1.5-11zm8.5 0L9.5 2h8l4 6.5L18 11z"/></svg>'
}
]
},
// Add more artists as needed
];
credits.forEach(credit => {
container.appendChild(createCreditCard(credit.name, credit.role, credit.image, credit.links));
});
}
</script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body class="font-sans">
<div class="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-purple-600 to-blue-500 p-4 sm:p-6 md:p-8">
<div class="absolute inset-0 bg-cover bg-center" style="background-image: url('/placeholder.svg?height=1080&width=1920');">
<div class="absolute inset-0 backdrop-blur-md bg-black/40"></div>
</div>
<div class="relative w-full max-w-4xl bg-white/10 backdrop-blur-md border-none text-white rounded-lg p-6 sm:p-8">
<div class="flex flex-col items-center space-y-6">
<h1 class="text-3xl sm:text-4xl md:text-5xl font-bold mb-2 text-center">Stux's VTuber Credits</h1>
<p class="text-sm sm:text-base md:text-lg opacity-80 text-center mb-6">A huge thank you to all the amazing artists who brought my VTuber persona to life!</p>
<div id="credits-container" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 w-full">
<!-- Credit cards will be dynamically added here -->
</div>
</div>
</div>
</div>
</body>
</html>