From ea46990de17f628638341e6d78ffec1dec8e6e01 Mon Sep 17 00:00:00 2001 From: Ole-Morten Duesund Date: Fri, 6 Jun 2025 23:10:57 +0200 Subject: [PATCH] spiced up logo --- app.rb | 243 +++++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 226 insertions(+), 17 deletions(-) diff --git a/app.rb b/app.rb index a73725e..3152253 100644 --- a/app.rb +++ b/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; - height: 120px; - margin: 0 auto 2rem auto; + width: 140px; + height: 140px; background: radial-gradient(circle at 30% 30%, #ff6b6b, #ee5a52, #dc3545); border-radius: 50%; display: flex; align-items: center; justify-content: center; - font-size: 4rem; - text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); - box-shadow: 0 8px 32px rgba(255, 107, 107, 0.4); - border: 3px solid rgba(255, 255, 255, 0.3); + font-size: 5rem; + text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.6); + box-shadow: + 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; - left: -3px; - right: -3px; - bottom: -3px; - background: conic-gradient(from 0deg, #ff6b6b, #ff8e8e, #ff6b6b); + top: -5px; + left: -5px; + right: -5px; + bottom: -5px; + 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 { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } + .logo::after { + content: ''; + 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' %>🇫🇴<% end %> +
+ +
+
<%= no_response %>
@@ -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); + } + }