First Commit

templates/features/new_feature_user_inventory.html

@@ -0,0 +1,145 @@
+{% extends 'layout.html' %}
+
+{% block content %}
+    <style>
+        .firework {
+            position: absolute;
+            pointer-events: none;
+        }
+        
+        .particle {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            animation: explode 1s ease-out forwards;
+            z-index: 1000;
+        }
+
+        @keyframes explode {
+            0% {
+                transform: translate(0, 0);
+                opacity: 1;
+            }
+            100% {
+                transform: translate(var(--tx), var(--ty));
+                opacity: 0;
+            }
+        }
+
+        .rocket {
+            position: absolute;
+            width: 4px;
+            height: 4px;
+            background: #fff;
+            border-radius: 50%;
+            pointer-events: none;
+            z-index: 1000;
+        }
+
+        .rocket::before {
+            content: '';
+            position: absolute;
+            width: 2px;
+            height: 20px;
+            background: linear-gradient(to top, transparent, #fff);
+            bottom: 2px;
+            left: 1px;
+        }
+
+        @keyframes rocketUp {
+            0% {
+                transform: translateY(0) scale(1);
+                opacity: 1;
+            }
+            90% {
+                transform: translateY(var(--targetY)) scale(1);
+                opacity: 1;
+            }
+            100% {
+                transform: translateY(var(--targetY)) scale(0);
+                opacity: 0;
+            }
+        }
+    </style>
+
+    <div class="fireworks-container"></div>
+    <div class="container">
+        <h2>Nouveauté !</h2>
+        <div style="float:right;margin:5px;"><img src="/static/img/retrobot.png" style="max-width: 200px;border-bottom:3px solid black;" alt="RetroBot"></div>
+        <p style="font-size: 1.2rem;">
+            Salut, c'est RetroBot ! J'ai une nouvelle fonctionnalité à te présenter : l'inventaire !<br>
+            Tu peux maintenant collectionner des objets et les utiliser pour personnaliser ton profil.<br>
+            Alors, qu'est-ce que tu attends ? Lance-toi dans l'aventure et découvre tous les objets que tu peux obtenir !
+        </p>
+        <p style="font-size:1.2rem">
+            Pour commencer, je te fais un cadeau ! Je t'offre <span class="money">100</span> pour te remercier de ta fidélité !<br>
+        </p>
+        <p style="font-size: 1.2rem;font-weight: 800;">
+            Votre  ami, Sir. RetroBot IV
+        </p>
+        <center><a href="/" class="btn btn-default btn-large">Retourner sur le site</a></center><br>
+    </div>
+
+    <script>
+        function createRocket() {
+            const rocket = document.createElement('div');
+            rocket.className = 'rocket';
+            
+            const startX = Math.random() * window.innerWidth;
+            const startY = window.innerHeight;
+            const targetY = -(Math.random() * 400 + 200);
+            
+            rocket.style.left = startX + 'px';
+            rocket.style.bottom = '0';
+            rocket.style.setProperty('--targetY', targetY + 'px');
+            
+            document.querySelector('.fireworks-container').appendChild(rocket);
+            
+            rocket.style.animation = 'rocketUp 1s ease-out forwards';
+            
+            rocket.addEventListener('animationend', () => {
+                createFirework(startX, window.innerHeight + targetY);
+                rocket.remove();
+            });
+        }
+
+        function createFirework(x, y) {
+            const firework = document.createElement('div');
+            firework.className = 'firework';
+            firework.style.left = x + 'px';
+            firework.style.top = y + 'px';
+
+            const colors = ['#ff00ff', '#00ffff', '#ffff00', '#ff0000', '#00ff00'];
+
+            for (let i = 0; i < 30; i++) {
+                const particle = document.createElement('div');
+                particle.className = 'particle';
+                const angle = (i / 30) * Math.PI * 2;
+                const velocity = 50 + Math.random() * 50;
+                const tx = Math.cos(angle) * velocity;
+                const ty = Math.sin(angle) * velocity;
+                
+                particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+                particle.style.setProperty('--tx', `${tx}px`);
+                particle.style.setProperty('--ty', `${ty}px`);
+                
+                firework.appendChild(particle);
+            }
+
+            document.querySelector('.fireworks-container').appendChild(firework);
+            setTimeout(() => firework.remove(), 500);
+        }
+
+        // Lancer des fusées et des feux d'artifice
+        setInterval(() => {
+            if (Math.random() < 0.5) {
+                createRocket();
+            } else {
+                const x = Math.random() * window.innerWidth;
+                const y = Math.random() * (window.innerHeight / 2);
+                createFirework(x, y);
+            }
+        }, 500);
+    </script>
+{% endblock %}