add generated credits page template

StuxVT · Nov 12, 2024 · 2e7bb9e · 2e7bb9e
1 parent 70f12b8
commit 2e7bb9e
Showing 1 changed file with 111 additions and 0 deletions.
diff --git a/credits.html b/credits.html
@@ -0,0 +1,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>