spiced up logo

app.rb

@@ -4,7 +4,7 @@ require 'yaml'
 
 # Configure Sinatra
 set :port, ENV['PORT'] || 4567
-set :bind, '::'
+set :bind, '0.0.0.0'
 
 # Load responses from YAML file
 RESPONSES = YAML.load_file('responses.yml')
@@ -274,38 +274,99 @@ __END__
             display: inline-block;
         }
 
+        .logo-container {
+            position: relative;
+            display: inline-block;
+            margin-bottom: 2rem;
+        }
+
+        .logo-container::before {
+            content: '';
+            position: absolute;
+            top: -20px;
+            left: -20px;
+            right: -20px;
+            bottom: -20px;
+            background: radial-gradient(
+                circle at 50% 50%,
+                transparent 60px,
+                rgba(255, 107, 107, 0.1) 80px,
+                transparent 120px
+            );
+            border-radius: 50%;
+            animation: pulseRing 3s ease-in-out infinite;
+            pointer-events: none;
+        }
+
         .logo {
-            width: 120px;
+            width: 140px;
-            height: 120px;
+            height: 140px;
-            margin: 0 auto 2rem auto;
             background: radial-gradient(circle at 30% 30%, #ff6b6b, #ee5a52, #dc3545);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 4rem;
+            font-size: 5rem;
-            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+            text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.6);
-            box-shadow: 0 8px 32px rgba(255, 107, 107, 0.4);
+            box-shadow:
-            border: 3px solid rgba(255, 255, 255, 0.3);
+                0 8px 32px rgba(255, 107, 107, 0.4),
+                inset 0 2px 10px rgba(255, 255, 255, 0.3),
+                inset 0 -2px 10px rgba(0, 0, 0, 0.2);
+            border: 3px solid rgba(255, 255, 255, 0.4);
             position: relative;
+            animation: logoFloat 4s ease-in-out infinite;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            overflow: hidden;
         }
 
         .logo::before {
             content: '';
             position: absolute;
-            top: -3px;
+            top: -5px;
-            left: -3px;
+            left: -5px;
-            right: -3px;
+            right: -5px;
-            bottom: -3px;
+            bottom: -5px;
-            background: conic-gradient(from 0deg, #ff6b6b, #ff8e8e, #ff6b6b);
+            background: conic-gradient(
+                from 0deg,
+                #ff6b6b,
+                #ff8e8e,
+                #ffb3b3,
+                #ff6b6b,
+                #ee5a52,
+                #ff6b6b
+            );
             border-radius: 50%;
             z-index: -1;
-            animation: rotate 3s linear infinite;
+            animation: rotate 4s linear infinite;
+            opacity: 0.8;
         }
 
-        @keyframes rotate {
+        .logo::after {
-            from { transform: rotate(0deg); }
+            content: '';
-            to { transform: rotate(360deg); }
+            position: absolute;
+            top: 15%;
+            left: 25%;
+            width: 30px;
+            height: 30px;
+            background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
+            border-radius: 50%;
+            filter: blur(8px);
+            animation: shimmer 3s ease-in-out infinite alternate;
+        }
+
+        .logo:hover {
+            transform: scale(1.1) rotate(5deg);
+            box-shadow:
+                0 12px 40px rgba(255, 107, 107, 0.6),
+                inset 0 2px 15px rgba(255, 255, 255, 0.4),
+                inset 0 -2px 15px rgba(0, 0, 0, 0.3);
+            animation-play-state: paused;
+        }
+
+        .logo:active {
+            transform: scale(0.95);
+            animation: logoShake 0.5s ease-in-out;
         }
 
         .no-response {
@@ -383,6 +444,95 @@ __END__
             font-size: 1.2em;
         }
 
+        /* Floating animation */
+        @keyframes logoFloat {
+            0%, 100% {
+                transform: translateY(0px) rotate(0deg);
+            }
+            25% {
+                transform: translateY(-8px) rotate(1deg);
+            }
+            50% {
+                transform: translateY(-12px) rotate(0deg);
+            }
+            75% {
+                transform: translateY(-6px) rotate(-1deg);
+            }
+        }
+
+        /* Enhanced rotation animation */
+        @keyframes rotate {
+            from {
+                transform: rotate(0deg) scale(1);
+            }
+            25% {
+                transform: rotate(90deg) scale(1.02);
+            }
+            50% {
+                transform: rotate(180deg) scale(1);
+            }
+            75% {
+                transform: rotate(270deg) scale(1.02);
+            }
+            to {
+                transform: rotate(360deg) scale(1);
+            }
+        }
+
+        /* Shimmer effect for the highlight */
+        @keyframes shimmer {
+            0% {
+                opacity: 0.3;
+                transform: scale(0.8);
+            }
+            100% {
+                opacity: 0.8;
+                transform: scale(1.2);
+            }
+        }
+
+        /* Shake animation on click */
+        @keyframes logoShake {
+            0%, 100% { transform: translateX(0); }
+            10% { transform: translateX(-5px) rotate(-2deg); }
+            20% { transform: translateX(5px) rotate(2deg); }
+            30% { transform: translateX(-5px) rotate(-1deg); }
+            40% { transform: translateX(5px) rotate(1deg); }
+            50% { transform: translateX(-3px); }
+            60% { transform: translateX(3px); }
+            70% { transform: translateX(-2px); }
+            80% { transform: translateX(2px); }
+            90% { transform: translateX(-1px); }
+        }
+
+        /* Pulsing ring animation */
+        @keyframes pulseRing {
+            0%, 100% {
+                transform: scale(0.8);
+                opacity: 0.3;
+            }
+            50% {
+                transform: scale(1.1);
+                opacity: 0.1;
+            }
+        }
+
+        /* Sparkle animation */
+        @keyframes sparkleFloat {
+            0% {
+                opacity: 1;
+                transform: translateY(0) scale(0);
+            }
+            50% {
+                opacity: 1;
+                transform: translateY(-30px) scale(1);
+            }
+            100% {
+                opacity: 0;
+                transform: translateY(-60px) scale(0) rotate(180deg);
+            }
+        }
+
         @media (max-width: 600px) {
             .container {
                 margin: 1rem;
@@ -393,6 +543,19 @@ __END__
                 font-size: 2rem;
             }
 
+            .logo {
+                width: 100px;
+                height: 100px;
+                font-size: 3.5rem;
+            }
+
+            .logo::after {
+                width: 20px;
+                height: 20px;
+                top: 20%;
+                left: 30%;
+            }
+
             .no-response {
                 font-size: 2.5rem;
             }
@@ -419,6 +582,12 @@ __END__
             <% if  language == 'fo' %><span class="nordic-flag">🇫🇴</span><% end %>
         </div>
 
+        <div class="logo-container">
+            <div class="logo" onclick="logoClick()">
+                ❌
+            </div>
+        </div>
+
         <div class="no-response">
             <%= no_response %>
         </div>
@@ -453,6 +622,46 @@ __END__
             url.searchParams.set('lang', lang);
             window.location.href = url.toString();
         }
+
+        // Enhanced logo interaction
+        function logoClick() {
+            // Add a fun interaction when logo is clicked
+            const logo = document.querySelector('.logo');
+            logo.style.animationPlayState = 'running';
+
+            // Get a new "no" response when logo is clicked
+            setTimeout(() => {
+                location.reload();
+            }, 500);
+        }
+
+        // Add some sparkle effects on hover
+        document.querySelector('.logo').addEventListener('mouseenter', function() {
+            createSparkles(this);
+        });
+
+        function createSparkles(element) {
+            const rect = element.getBoundingClientRect();
+            const sparkles = 5;
+
+            for (let i = 0; i < sparkles; i++) {
+                const sparkle = document.createElement('div');
+                sparkle.innerHTML = '✨';
+                sparkle.style.position = 'fixed';
+                sparkle.style.left = (rect.left + Math.random() * rect.width) + 'px';
+                sparkle.style.top = (rect.top + Math.random() * rect.height) + 'px';
+                sparkle.style.fontSize = (Math.random() * 20 + 10) + 'px';
+                sparkle.style.pointerEvents = 'none';
+                sparkle.style.zIndex = '1000';
+                sparkle.style.animation = 'sparkleFloat 2s ease-out forwards';
+
+                document.body.appendChild(sparkle);
+
+                setTimeout(() => {
+                    sparkle.remove();
+                }, 2000);
+            }
+        }
     </script>
 </body>
 </html>