inital checkin

2026-01-20 05:22:38 -06:00
parent 9784e14c77
commit c43603bfb5
75 changed files with 4327 additions and 0 deletions
--- a/templates/store/open_pack.html
+++ b/templates/store/open_pack.html
@@ -0,0 +1,125 @@
+{% extends 'base/layout.html' %}
+{% load static %}
+
+{% block content %}
+<div style="max-width: 1000px; margin: 0 auto; text-align: center; min-height: 600px;">
+    <h1 id="pack-title">{{ pack.listing.name }}</h1>
+    
+    <div id="pack-container" style="margin: 4rem auto; perspective: 1000px; width: 300px; height: 420px; cursor: pointer;">
+        <div id="pack-wrapper" style="width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.6s;">
+            <div class="pack-face" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden; background: linear-gradient(135deg, #4f46e5, #0ea5e9); border-radius: 1rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);">
+                <div style="font-size: 5rem;">🎁</div>
+                <div style="position: absolute; bottom: 2rem; color: white; font-weight: bold;">Click to Open</div>
+            </div>
+        </div>
+    </div>
+
+    <div id="cards-container" style="display: none; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 2rem;">
+        <!-- Cards injected here -->
+    </div>
+    
+    <div id="actions" style="margin-top: 2rem; display: none;">
+        <a href="{% url 'store:my_packs' %}" class="btn">Back to My Packs</a>
+    </div>
+</div>
+
+<style>
+    @keyframes shake {
+        0% { transform: translate(1px, 1px) rotate(0deg); }
+        10% { transform: translate(-1px, -2px) rotate(-1deg); }
+        20% { transform: translate(-3px, 0px) rotate(1deg); }
+        30% { transform: translate(3px, 2px) rotate(0deg); }
+        40% { transform: translate(1px, -1px) rotate(1deg); }
+        50% { transform: translate(-1px, 2px) rotate(-1deg); }
+        60% { transform: translate(-3px, 1px) rotate(0deg); }
+        70% { transform: translate(3px, 1px) rotate(-1deg); }
+        80% { transform: translate(-1px, -1px) rotate(1deg); }
+        90% { transform: translate(1px, 2px) rotate(0deg); }
+        100% { transform: translate(1px, -2px) rotate(-1deg); }
+    }
+    .shaking {
+        animation: shake 0.5s;
+        animation-iteration-count: infinite;
+    }
+    .card-reveal {
+        opacity: 0;
+        transform: translateY(20px);
+        animation: fadeInUp 0.5s forwards;
+    }
+    @keyframes fadeInUp {
+        to { opacity: 1; transform: translateY(0); }
+    }
+</style>
+
+<script>
+    const packWrapper = document.getElementById('pack-wrapper');
+    const packContainer = document.getElementById('pack-container');
+    const cardsContainer = document.getElementById('cards-container');
+    const actions = document.getElementById('actions');
+    const packTitle = document.getElementById('pack-title');
+    
+    packContainer.addEventListener('click', function() {
+        if (packContainer.classList.contains('opened')) return;
+        
+        packWrapper.classList.add('shaking');
+        
+        // Use fetch with CSRF token
+        const csrftoken = document.cookie.split('; ').find(row => row.startsWith('csrftoken='))?.split('=')[1];
+        
+        fetch(window.location.href, {
+            method: 'POST',
+            headers: {
+                'X-CSRFToken': '{{ csrf_token }}',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({})
+        })
+        .then(response => response.json())
+        .then(data => {
+            setTimeout(() => {
+                packWrapper.classList.remove('shaking');
+                packWrapper.style.transform = 'scale(0) rotate(720deg)';
+                packWrapper.style.opacity = '0';
+                
+                setTimeout(() => {
+                    packContainer.style.display = 'none';
+                    cardsContainer.style.display = 'grid';
+                    actions.style.display = 'block';
+                    packTitle.textContent = "New Cards!";
+                    
+                    data.cards.forEach((card, index) => {
+                        const cardEl = document.createElement('div');
+                        cardEl.className = 'tcg-card card-reveal';
+                        cardEl.style.animationDelay = `${index * 0.2}s`;
+                        
+                        let imgHtml = '';
+                        if (card.image_url) {
+                            imgHtml = `<img src="${card.image_url}" style="width: 100%; height: auto;">`;
+                        } else {
+                            imgHtml = `<div style="aspect-ratio: 2.5/3.5; background: #000; display: flex; align-items: center; justify-content: center; color: white;">${card.name}</div>`;
+                        }
+                        
+                        cardEl.innerHTML = `
+                            <div style="aspect-ratio: 2.5/3.5; background: #000; position: relative;">
+                                ${imgHtml}
+                            </div>
+                            <div class="tcg-card-body">
+                                <h4>${card.name}</h4>
+                                <p>${card.set} - ${card.rarity}</p>
+                            </div>
+                        `;
+                        cardsContainer.appendChild(cardEl);
+                    });
+                }, 500);
+            }, 1000);
+        })
+        .catch(err => {
+            console.error(err);
+            packWrapper.classList.remove('shaking');
+            alert('Error opening pack');
+        });
+        
+        packContainer.classList.add('opened');
+    });
+</script>
+{% endblock %}