Valorant theme - v0 by Vercel

<!DOCTYPE html><html lang="it"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Una Sorpresa per Te!</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;700&family=Russo+One&family=Dancing+Script:wght@700&family=Playfair+Display:wght@400;700&display=swap'); :root { /* Valorant Theme */ --sage: #7fffd4; --neon: #00f7ff; --valorant-red: #ff4655; --valorant-dark: #0f1923; /* Garden Light Palette */ --garden-cream: #f7f5f0; --garden-mint: #d4e8e0; --garden-sage: #b5c8bc; --garden-blush: #e8c8c8; --garden-sand: #e0d8c0; --garden-text: #4a4a4a; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Playfair Display', serif; background-color: var(--garden-cream); color: var(--garden-text); overflow-x: hidden; height: 100vh; transition: background-color 1s ease; } /* Intro Page - Valorant Theme */ .intro-page { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--valorant-dark) 0%, #1a2a3a 100%); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1000; transition: opacity 1s ease-out; } .intro-content { max-width: 600px; padding: 2rem; text-align: center; background-color: rgba(15, 25, 35, 0.8); border-radius: 10px; border: 1px solid var(--sage); box-shadow: 0 0 20px rgba(127, 255, 212, 0.3); animation: fadeIn 1.5s ease-out; } .intro-title { font-family: 'Russo One', sans-serif; color: var(--sage); font-size: 2.5rem; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 2px; } .intro-message { font-size: 1.2rem; line-height: 1.8; margin-bottom: 2rem; color: var(--sage); } .enter-btn { background-color: var(--valorant-red); color: white; border: none; padding: 0.8rem 2rem; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 1px; border-radius: 5px; cursor: pointer; transition: all 0.3s; position: relative; overflow: hidden; } .enter-btn:hover { background-color: #e63a49; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(255, 70, 85, 0.4); } /* Main Page - Garden Theme */ .main-page { display: none; opacity: 0; transition: opacity 1s ease-in; } .header { background: linear-gradient(to right, var(--garden-mint), var(--garden-sage)); padding: 3rem 2rem; text-align: center; position: relative; overflow: hidden; border-bottom: 3px solid var(--garden-blush); } .title { font-family: 'Dancing Script', cursive; color: var(--garden-text); font-size: 3.5rem; margin-bottom: 0.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } .subtitle { color: var(--garden-text); font-size: 1.3rem; margin-bottom: 1rem; font-weight: 400; } .agents-container { display: flex; justify-content: center; align-items: center; gap: 2rem; margin: 2rem 0; } .agent { text-align: center; animation: float 3s ease-in-out infinite; } .agent:nth-child(2) { animation-delay: 0.5s; } .agent-icon { width: 100px; height: 100px; background-color: var(--garden-cream); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto 1rem; border: 2px solid; font-size: 3rem; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .sage-icon { border-color: var(--garden-sage); color: var(--garden-sage); } .neon-icon { border-color: var(--garden-blush); color: var(--garden-blush); } .agent-name { font-family: 'Playfair Display', serif; font-weight: 700; letter-spacing: 1px; font-size: 1.3rem; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); margin-top: 0.5rem; } .sage-name { color: var(--garden-sage); background: linear-gradient(to right, var(--garden-mint), white); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 0 0.5rem; } .neon-name { color: var(--garden-blush); background: linear-gradient(to right, var(--garden-blush), #ff9eb5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 0 0.5rem; } .heart { color: var(--valorant-red); font-size: 2rem; animation: pulse 1.5s infinite; margin: 0 1rem; } .gift-section { padding: 3rem 2rem; background-color: var(--garden-cream); } .section-title { font-family: 'Playfair Display', serif; color: var(--garden-text); font-size: 2rem; text-align: center; margin-bottom: 2rem; position: relative; } .section-title::after { content: ''; display: block; width: 100px; height: 2px; background: var(--garden-sage); margin: 0.5rem auto 0; } .gift-container { max-width: 600px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 1.5rem; } .gift-card { background-color: white; border-radius: 15px; padding: 1.5rem; border: 1px solid var(--garden-mint); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; position: relative; overflow: hidden; text-align: center; min-height: 180px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .gift-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(212,232,224,0.3) 0%, rgba(181,200,188,0.2) 100%); z-index: 0; } .gift-card.closed { transform: scale(0.95); } .gift-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } .gift-card.closed .gift-content { display: none; } .gift-card.closed .gift-icon { display: block; } .gift-card:not(.closed) .gift-icon { display: none; } .gift-icon { font-size: 2.5rem; margin-bottom: 1rem; color: var(--garden-blush); transition: all 0.3s; } .gift-card:hover .gift-icon { transform: scale(1.2); color: var(--valorant-red); } .gift-title { font-family: 'Playfair Display', serif; color: var(--garden-text); font-size: 1.5rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; z-index: 1; } .gift-description { color: var(--garden-text); margin-bottom: 1rem; font-size: 1rem; opacity: 0.8; z-index: 1; } .code-container { display: flex; align-items: center; justify-content: space-between; background-color: var(--garden-cream); padding: 0.8rem 1rem; border-radius: 5px; border: 1px dashed var(--garden-sage); margin-top: 1rem; width: 100%; z-index: 1; } .code { font-family: 'Courier New', monospace; font-size: 1rem; letter-spacing: 1px; color: var(--garden-text); } .copy-btn { background-color: var(--garden-sage); color: white; border: none; padding: 0.3rem 0.8rem; border-radius: 3px; cursor: pointer; transition: background-color 0.3s; font-family: 'Rajdhani', sans-serif; font-weight: 500; } .copy-btn:hover { background-color: var(--garden-blush); } .message-section { padding: 3rem 2rem; background-color: var(--garden-mint); text-align: center; margin: 2rem 0; position: relative; } .message-box { max-width: 700px; margin: 0 auto; padding: 2.5rem; background-color: white; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); position: relative; border: 1px solid var(--garden-blush); } .message-box::before { content: ''; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border: 1px dashed var(--garden-sage); border-radius: 5px; pointer-events: none; } .message-title { font-family: 'Dancing Script', cursive; color: var(--garden-text); font-size: 2.5rem; margin-bottom: 1.5rem; position: relative; } .message-text { font-size: 1.2rem; line-height: 1.8; margin-bottom: 1.5rem; position: relative; } .message-text::before { content: '“'; font-family: 'Playfair Display', serif; font-size: 4rem; color: var(--garden-blush); position: absolute; top: -20px; left: -20px; line-height: 1; opacity: 0.3; } .message-text::after { content: '”'; font-family: 'Playfair Display', serif; font-size: 4rem; color: var(--garden-blush); position: absolute; bottom: -40px; right: -20px; line-height: 1; opacity: 0.3; } .photo-surprise { margin-top: 2rem; display: none; animation: fadeIn 1s ease-out; } .photo-frame { max-width: 400px; margin: 0 auto; padding: 15px; background-color: white; border: 15px solid var(--garden-blush); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); position: relative; transform: rotate(-2deg); } .photo-frame::before { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border: 2px dashed var(--garden-sage); pointer-events: none; } .photo-frame::after { content: '✧'; position: absolute; top: -25px; right: -25px; width: 50px; height: 50px; background-color: var(--garden-blush); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; z-index: 2; box-shadow: 0 3px 10px rgba(0,0,0,0.1); } .reveal-btn { background-color: var(--garden-blush); color: white; border: none; padding: 0.8rem 2rem; font-family: 'Playfair Display', serif; font-size: 1.1rem; border-radius: 30px; cursor: pointer; transition: all 0.3s; margin-top: 1.5rem; position: relative; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .reveal-btn:hover { background-color: var(--garden-sage); transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); } .paper-plane { position: absolute; font-size: 1.5rem; opacity: 0; transition: all 1s ease; } .footer { text-align: center; padding: 2rem; background-color: var(--garden-sage); color: white; position: relative; } .signature { font-family: 'Dancing Script', cursive; font-size: 2rem; margin-top: 1rem; color: white; position: relative; display: inline-block; } .signature::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background: white; transform: scaleX(0); transform-origin: right; transition: transform 0.5s ease; } .signature:hover::after { transform: scaleX(1); transform-origin: left; } /* Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes paperPlane { 0% { transform: translate(0, 0) rotate(0deg); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(200px, -100px) rotate(30deg); opacity: 0; } } /* Responsive */ @media (max-width: 768px) { .title { font-size: 2.5rem; } .subtitle { font-size: 1.1rem; } .agents-container { flex-direction: column; gap: 1rem; } .agent-icon { width: 80px; height: 80px; font-size: 2rem; } .message-title { font-size: 2rem; } } </style></head><body>  <div class="intro-page" id="introPage"> <div class="intro-content"> <h1 class="intro-title">Dalla tua Sage</h1> <p class="intro-message"> Ciao Neon!<br><br> Tutte quelle partite insieme non sono state solo un gioco...<br> Volevo ringraziarti con qualcosa di speciale!<br><br> Pronta a scoprire la tua sorpresa? </p> <button class="enter-btn" id="enterBtn">Entra nel Giardino</button> </div> </div>  <div class="main-page" id="mainPage"> <header class="header"> <h1 class="title">Una Sorpresa per Te</h1> <p class="subtitle">Dalla tua Sage alla sua Neon preferita</p> <div class="agents-container"> <div class="agent"> <div class="agent-icon sage-icon"> <i class="fas fa-heart"></i> </div> <h3 class="agent-name sage-name">Sage</h3> </div> <div class="heart"> <i class="fas fa-heart"></i> </div> <div class="agent"> <div class="agent-icon neon-icon"> <i class="fas fa-bolt"></i> </div> <h3 class="agent-name neon-name">Neon</h3> </div> </div> </header> <section class="gift-section"> <h2 class="section-title">I Tuoi Regali</h2> <div class="gift-container"> <div class="gift-card closed" id="gift1"> <div class="gift-icon"> <i class="fas fa-gift"></i> </div> <div class="gift-content"> <h3 class="gift-title"><i class="fas fa-gamepad"></i> Codice Valorant</h3> <p class="gift-description">Per nuovi skin, battle pass o quello che preferisci!</p> <div class="code-container"> <span class="code" id="valorantCode1">VALO-XXXX-YYYY-ZZZZ</span> <button class="copy-btn" onclick="copyCode('valorantCode1')">Copia</button> </div> </div> </div> <div class="gift-card closed" id="gift2"> <div class="gift-icon"> <i class="fas fa-gift"></i> </div> <div class="gift-content"> <h3 class="gift-title"><i class="fas fa-gamepad"></i> Codice Valorant</h3> <p class="gift-description">Un altro codice per te!</p> <div class="code-container"> <span class="code" id="valorantCode2">VALO-AAAA-BBBB-CCCC</span> <button class="copy-btn" onclick="copyCode('valorantCode2')">Copia</button> </div> </div> </div> </div> </section> <section class="message-section"> <div class="message-box"> <h2 class="message-title">Un Pensiero Speciale</h2> <p class="message-text"> Ogni partita con te è stata un'avventura indimenticabile...<br> Dalle clutch impossibili alle risate quando qualcosa andava storto!<br><br> Questi piccoli regali sono un modo per dirti grazie per tutti i bei momenti passati insieme.<br> Spero ti piacciano! </p> <button class="reveal-btn" id="revealBtn"> Scopri un'altra sorpresa! <i class="fas fa-paper-plane paper-plane" id="paperPlane"></i> </button> <div class="photo-surprise" id="photoSurprise"> <div class="photo-frame">  <img src="https://via.placeholder.com/400x300?text=La+nostra+foto+insieme" alt="La nostra foto insieme" style="width:100%; display:block;"> </div> </div> </div> </section> <footer class="footer"> <p>Con tutto il mio affetto</p> <p class="signature">La tua Sage</p> </footer> </div> <script> // Intro page transition const introPage = document.getElementById('introPage'); const enterBtn = document.getElementById('enterBtn'); const mainPage = document.getElementById('mainPage'); enterBtn.addEventListener('click', function() { // Fade out intro page introPage.style.opacity = '0'; // After fade out completes setTimeout(() => { introPage.style.display = 'none'; // Show main page with fade in mainPage.style.display = 'block'; setTimeout(() => { mainPage.style.opacity = '1'; }, 50); }, 1000); }); // Gift card opening functionality const giftCards = document.querySelectorAll('.gift-card.closed'); giftCards.forEach(card => { card.addEventListener('click', function() { if(this.classList.contains('closed')) { this.classList.remove('closed'); this.style.transform = 'translateY(-5px) scale(1.02)'; // Add confetti effect createMiniConfetti(this); } }); }); // Photo reveal functionality const revealBtn = document.getElementById('revealBtn'); const photoSurprise = document.getElementById('photoSurprise'); const paperPlane = document.getElementById('paperPlane'); revealBtn.addEventListener('click', function() { // Animate paper plane paperPlane.style.opacity = '1'; paperPlane.style.animation = 'paperPlane 1.5s forwards'; // Show photo after delay setTimeout(() => { photoSurprise.style.display = 'block'; this.style.display = 'none'; // Scroll to photo setTimeout(() => { photoSurprise.scrollIntoView({ behavior: 'smooth' }); }, 100); }, 800); }); // Copy code function (FUNZIONANTE) function copyCode(elementId) { const element = document.getElementById(elementId); const text = element.innerText; // Create temporary textarea element const textarea = document.createElement('textarea'); textarea.value = text; textarea.style.position = 'fixed'; // Prevent scrolling to bottom document.body.appendChild(textarea); textarea.select(); try { // Execute copy command const successful = document.execCommand('copy'); const msg = successful ? 'successful' : 'unsuccessful'; console.log('Copying text was ' + msg); // Visual feedback const originalText = element.innerText; element.innerText = 'Copiato!'; element.style.color = 'var(--garden-blush)'; setTimeout(() => { element.innerText = originalText; element.style.color = 'var(--garden-text)'; }, 1500); } catch (err) { console.error('Fallback: Oops, unable to copy', err); } // Remove temporary textarea document.body.removeChild(textarea); } // Mini confetti effect for gift cards function createMiniConfetti(element) { const colors = ['#ffb7c5', '#b5c8bc', '#ffde7d', '#d4e8e0']; const rect = element.getBoundingClientRect(); for (let i = 0; i < 20; i++) { const confetti = document.createElement('div'); confetti.innerHTML = '✧'; confetti.style.position = 'absolute'; confetti.style.color = colors[Math.floor(Math.random() * colors.length)]; confetti.style.fontSize = (Math.random() * 10 + 10) + 'px'; confetti.style.left = (Math.random() * rect.width) + 'px'; confetti.style.top = (Math.random() * rect.height) + 'px'; confetti.style.zIndex = '100'; confetti.style.pointerEvents = 'none'; confetti.style.animation = `float ${Math.random() * 2 + 1}s ease-in forwards`; element.appendChild(confetti); // Remove after animation setTimeout(() => { confetti.remove(); }, 1000); } } </script></body></html> volevo far una sopresa ad una amica ocnosciuta da poco su valorant ma gli voglio gia un mondo di bene , voglio ricreare qulcosa di carino per fargli scoprire una gift dei punti per valorant , puoi sistemare il tasto copia e togliere un regalo perche è solo un codice , inoltre sistema il tutto e rendi piu carino , a tema sage e neon se possibile che sono i due nostri pg che usiamo , inltre aggiungi queste foto , la prima devi metterla nel regalino allegato , mentre queste 2 come contorno nel sito

Show full message