diff --git a/index.php b/index.php index 97d4bfe..c9e034f 100644 --- a/index.php +++ b/index.php @@ -585,6 +585,67 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; color: #333; padding: 10px; backdrop-filter: blur(4px); + cursor: pointer; + transition: all 0.3s ease; + animation: qr-pulse 2s infinite ease-in-out; + } + + .qr-placeholder:hover { + animation-play-state: paused; + transform: scale(1.05); + box-shadow: 0 0 20px var(--accent-color); + } + + @keyframes qr-pulse { + 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.4); } + 50% { transform: scale(1.03); box-shadow: 0 0 20px 10px rgba(0, 230, 118, 0); } + 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 230, 118, 0); } + } + + /* Modal Styles */ + .qr-modal { + display: none; + position: fixed; + z-index: 2000; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.9); + backdrop-filter: blur(10px); + justify-content: center; + align-items: center; + opacity: 0; + transition: opacity 0.3s ease; + } + + .qr-modal.show { + display: flex; + opacity: 1; + } + + .qr-modal-content { + max-width: 90%; + max-height: 90%; + background: white; + padding: 20px; + border-radius: 20px; + position: relative; + transform: scale(0.7); + transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); + } + + .qr-modal.show .qr-modal-content { + transform: scale(1); + } + + .qr-modal-close { + position: absolute; + top: -40px; + right: 0; + color: white; + font-size: 2rem; + cursor: pointer; } .qr-placeholder i { @@ -805,7 +866,7 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";