Spaces:

Wavetype
/

carcards

Running

App Files Files Community

Wavetype commited on 13 days ago

Commit

584ea9d

verified ·

1 Parent(s): d2ac47d

Update index.html

Browse files

Files changed (1) hide show

index.html +255 -19

index.html CHANGED Viewed

@@ -1,19 +1,255 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fantasy Rally: Card Architect</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        .card-foil {
+            background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.4) 100%);
+            background-size: 200% 200%;
+            animation: shine 3s infinite linear;
+        }
+        @keyframes shine {
+            0% { background-position: -200% -200%; }
+            100% { background-position: 200% 200%; }
+        }
+        #three-container canvas {
+            border-radius: 1rem;
+            cursor: grab;
+        }
+        #three-container canvas:active {
+            cursor: grabbing;
+        }
+    </style>
+</head>
+<body class="bg-slate-900 text-white font-sans p-8">
+    <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-8">
+        <div class="space-y-6">
+            <header>
+                <h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">
+                    Fantasy Rally: Card Architect
+                </h1>
+                <p class="text-slate-400">Manage car customizer rewards and rarities.</p>
+            </header>
+            <div class="bg-slate-800 rounded-xl p-6 border border-slate-700">
+                <div class="flex justify-between mb-4">
+                    <h2 class="text-xl font-semibold">Reward Inventory</h2>
+                    <div class="space-x-2">
+                        <button onclick="selectAll()" class="text-xs bg-slate-700 px-3 py-1 rounded hover:bg-slate-600">Select All</button>
+                        <button onclick="exportSQL()" class="text-xs bg-green-600 px-3 py-1 rounded hover:bg-green-500 font-bold">Export SQL</button>
+                    </div>
+                </div>
+                <div class="overflow-x-auto max-h-96 overflow-y-auto">
+                    <table id="rewardTable" class="w-full text-left text-sm">
+                        <thead class="bg-slate-900 sticky top-0">
+                            <tr>
+                                <th class="p-2"><input type="checkbox" id="masterCheck" onclick="toggleAll(this)"></th>
+                                <th class="p-2">Title</th>
+                                <th class="p-2">Description</th>
+                                <th class="p-2">Rarity/Color</th>
+                                <th class="p-2">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody id="tableBody">
+                            </tbody>
+                    </table>
+                </div>
+                <button onclick="addRow()" class="mt-4 w-full py-2 bg-blue-600 rounded-lg hover:bg-blue-500 transition-colors">+ Add New Card</button>
+            </div>
+        </div>
+        <div class="sticky top-8 h-fit">
+            <div class="bg-slate-800 rounded-xl p-6 border border-slate-700 flex flex-col items-center">
+                <h2 class="text-xl font-semibold mb-4 w-full">3D Card Viewer</h2>
+                <div id="three-container" class="w-full aspect-[3/4] bg-black rounded-lg overflow-hidden shadow-2xl relative">
+                    <div id="loadingOverlay" class="absolute inset-0 flex items-center justify-center bg-slate-900 z-10 hidden">
+                        <span>Rendering HD Foil...</span>
+                    </div>
+                </div>
+                <div class="mt-4 text-center text-slate-400 text-sm italic">
+                    Drag to rotate on X-Axis | Click card to reset view
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        let rewards = [
+            { id: 1, title: "Neon Underglow", desc: "Cyberpunk aesthetic pulses.", color: "#3b82f6", rarity: "Rare", selected: false },
+            { id: 2, title: "Quantum Turbo", desc: "Breaks the sound barrier.", color: "#a855f7", rarity: "Legendary", selected: false }
+        ];
+        let scene, camera, renderer, cardMesh, foilMesh;
+        let isRotating = true;
+        function init3D() {
+            const container = document.getElementById('three-container');
+            scene = new THREE.Scene();
+            camera = new THREE.PerspectiveCamera(45, container.clientWidth / container.clientHeight, 0.1, 1000);
+            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+            renderer.setSize(container.clientWidth, container.clientHeight);
+            container.appendChild(renderer.domElement);
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
+            scene.add(ambientLight);
+            const pointLight = new THREE.PointLight(0xffffff, 1);
+            pointLight.position.set(5, 5, 5);
+            scene.add(pointLight);
+            createCard(rewards[0]);
+            camera.position.z = 5;
+            animate();
+        }
+        function createCard(data) {
+            if (cardMesh) scene.remove(cardMesh);
+            if (foilMesh) scene.remove(foilMesh);
+            const geometry = new THREE.BoxGeometry(2.5, 3.5, 0.1);
+            const material = new THREE.MeshStandardMaterial({ color: data.color });
+            cardMesh = new THREE.Mesh(geometry, material);
+            // Foil Layer for Legendary/Epic
+            if (data.rarity === "Legendary") {
+                const foilGeo = new THREE.PlaneGeometry(2.4, 3.4);
+                const foilMat = new THREE.MeshPhongMaterial({
+                    color: 0xffffff,
+                    specular: 0xffffff,
+                    shininess: 100,
+                    transparent: true,
+                    opacity: 0.3
+                });
+                foilMesh = new THREE.Mesh(foilGeo, foilMat);
+                foilMesh.position.z = 0.06;
+                cardMesh.add(foilMesh);
+            }
+            scene.add(cardMesh);
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            if (cardMesh && isRotating) {
+                cardMesh.rotation.y += 0.01;
+            }
+            renderer.render(scene, camera);
+        }
+        // Table Logic
+        function renderTable() {
+            const tbody = document.getElementById('tableBody');
+            tbody.innerHTML = '';
+            rewards.forEach((reward, index) => {
+                const tr = document.createElement('tr');
+                tr.className = "border-b border-slate-700 hover:bg-slate-700/50 transition-colors cursor-pointer";
+                tr.onclick = (e) => {
+                    if(e.target.tagName !== 'INPUT' && e.target.tagName !== 'BUTTON') previewCard(index);
+                };
+                tr.innerHTML = `
+                    <td class="p-2"><input type="checkbox" ${reward.selected ? 'checked' : ''} onchange="toggleSelect(${index})"></td>
+                    <td class="p-2"><input class="bg-transparent border-none focus:ring-1 ring-blue-500 rounded px-1" value="${reward.title}" onchange="updateReward(${index}, 'title', this.value)"></td>
+                    <td class="p-2"><input class="bg-transparent border-none focus:ring-1 ring-blue-500 rounded px-1" value="${reward.desc}" onchange="updateReward(${index}, 'desc', this.value)"></td>
+                    <td class="p-2">
+                        <select class="bg-slate-900 border-none text-xs rounded" onchange="updateReward(${index}, 'rarity', this.value)">
+                            <option value="Common" ${reward.rarity === 'Common' ? 'selected' : ''}>Common</option>
+                            <option value="Rare" ${reward.rarity === 'Rare' ? 'selected' : ''}>Rare</option>
+                            <option value="Legendary" ${reward.rarity === 'Legendary' ? 'selected' : ''}>Legendary</option>
+                        </select>
+                        <input type="color" value="${reward.color}" onchange="updateReward(${index}, 'color', this.value)" class="w-6 h-6 bg-transparent border-none">
+                    </td>
+                    <td class="p-2">
+                        <button onclick="deleteRow(${index})" class="text-red-400 hover:text-red-300">✕</button>
+                    </td>
+                `;
+                tbody.appendChild(tr);
+            });
+        }
+        function addRow() {
+            rewards.push({ id: Date.now(), title: "New Item", desc: "Add description...", color: "#64748b", rarity: "Common", selected: false });
+            renderTable();
+        }
+        function deleteRow(index) {
+            rewards.splice(index, 1);
+            renderTable();
+        }
+        function updateReward(index, field, value) {
+            rewards[index][field] = value;
+            if (field === 'color' || field === 'rarity') previewCard(index);
+        }
+        function toggleSelect(index) {
+            rewards[index].selected = !rewards[index].selected;
+        }
+        function toggleAll(master) {
+            rewards.forEach(r => r.selected = master.checked);
+            renderTable();
+        }
+        function selectAll() {
+            rewards.forEach(r => r.selected = true);
+            document.getElementById('masterCheck').checked = true;
+            renderTable();
+        }
+        function previewCard(index) {
+            const data = rewards[index];
+            createCard(data);
+        }
+        function exportSQL() {
+            const selected = rewards.filter(r => r.selected);
+            if (selected.length === 0) return alert("Select cards to export.");
+            let sql = "INSERT INTO fantasy_rally_cards (title, description, rarity, hex_color) VALUES \n";
+            const values = selected.map(r => `('${r.title}', '${r.desc}', '${r.rarity}', '${r.color}')`).join(",\n");
+            const blob = new Blob([sql + values + ";"], { type: 'text/sql' });
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = "cards_export.sql";
+            a.click();
+        }
+        // Mouse Rotation Logic
+        let isDragging = false;
+        let previousMouseX = 0;
+        const container = document.getElementById('three-container');
+        container.addEventListener('mousedown', (e) => {
+            isDragging = true;
+            isRotating = false;
+            previousMouseX = e.clientX;
+        });
+        window.addEventListener('mouseup', () => { isDragging = false; });
+        window.addEventListener('mousemove', (e) => {
+            if (isDragging && cardMesh) {
+                const deltaX = e.clientX - previousMouseX;
+                cardMesh.rotation.y += deltaX * 0.01;
+                previousMouseX = e.clientX;
+            }
+        });
+        container.addEventListener('click', () => { isRotating = !isRotating; });
+        // Initialize
+        window.onload = () => {
+            renderTable();
+            init3D();
+        };
+    </script>
+</body>
+</html>