| | <!DOCTYPE html> |
| | <html lang="es"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Para Grecia, con todo mi amor</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://unpkg.com/react@18/umd/react.development.js"></script> |
| | <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> |
| | <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> |
| | <style> |
| | @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Montserrat:wght@300;400;600&display=swap'); |
| | |
| | body { |
| | font-family: 'Montserrat', sans-serif; |
| | overflow-x: hidden; |
| | } |
| | |
| | .dancing-script { |
| | font-family: 'Dancing Script', cursive; |
| | } |
| | |
| | .animated-bg { |
| | position: fixed; |
| | top: 0; |
| | left: 0; |
| | width: 100%; |
| | height: 100%; |
| | z-index: -1; |
| | background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
| | overflow: hidden; |
| | } |
| | |
| | .heart { |
| | position: absolute; |
| | pointer-events: none; |
| | animation: float 6s ease-in-out infinite; |
| | } |
| | |
| | @keyframes float { |
| | 0%, 100% { |
| | transform: translateY(0) rotate(0deg); |
| | } |
| | 50% { |
| | transform: translateY(-20px) rotate(5deg); |
| | } |
| | } |
| | |
| | .photo-frame { |
| | border: 15px solid #fff; |
| | box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .photo-frame:hover { |
| | transform: scale(1.05); |
| | box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); |
| | } |
| | |
| | .message-box { |
| | background: rgba(255, 255, 255, 0.9); |
| | backdrop-filter: blur(10px); |
| | border-radius: 20px; |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .message-box:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); |
| | } |
| | |
| | .floral-border { |
| | position: relative; |
| | } |
| | |
| | .floral-border::before { |
| | content: ""; |
| | position: absolute; |
| | top: -10px; |
| | left: -10px; |
| | right: -10px; |
| | bottom: -10px; |
| | background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="%23f9a8d4"><path d="M50,0 C60,20 80,20 100,10 C90,30 90,50 100,70 C80,60 60,60 50,80 C40,60 20,60 0,70 C10,50 10,30 0,10 C20,20 40,20 50,0 Z"/></svg>'); |
| | background-size: 50px 50px; |
| | opacity: 0.3; |
| | z-index: -1; |
| | border-radius: 30px; |
| | } |
| | |
| | .btn-gift { |
| | background: linear-gradient(45deg, #f9a8d4, #f472b6); |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .btn-gift:hover { |
| | transform: translateY(-3px); |
| | box-shadow: 0 10px 20px rgba(244, 114, 182, 0.3); |
| | } |
| | |
| | .floating { |
| | animation: floating 3s ease-in-out infinite; |
| | } |
| | |
| | @keyframes floating { |
| | 0%, 100% { |
| | transform: translateY(0); |
| | } |
| | 50% { |
| | transform: translateY(-10px); |
| | } |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <div id="root"></div> |
| |
|
| | <script type="text/babel"> |
| | const { useState, useEffect } = React; |
| | |
| | const App = () => { |
| | const [hearts, setHearts] = useState([]); |
| | const [showSpecialMessage, setShowSpecialMessage] = useState(false); |
| | const [showPhoto, setShowPhoto] = useState(false); |
| | useEffect(() => { |
| | const handleClick = (e) => { |
| | const newHeart = { |
| | id: Date.now(), |
| | x: e.clientX, |
| | y: e.clientY, |
| | size: Math.random() * 20 + 10, |
| | color: `hsl(${Math.random() * 60 + 330}, 100%, ${Math.random() * 30 + 60}%)` |
| | }; |
| | setHearts(prev => [...prev, newHeart]); |
| | |
| | setTimeout(() => { |
| | setHearts(prev => prev.filter(h => h.id !== newHeart.id)); |
| | }, 3000); |
| | }; |
| | |
| | window.addEventListener('click', handleClick); |
| | return () => window.removeEventListener('click', handleClick); |
| | }, []); |
| | |
| | return ( |
| | <div className="min-h-screen relative overflow-hidden"> |
| | {/* Animated Background */} |
| | <div className="animated-bg"> |
| | {Array.from({ length: 20 }).map((_, i) => ( |
| | <div |
| | key={i} |
| | className="heart" |
| | style={{ |
| | left: `${Math.random() * 100}%`, |
| | top: `${Math.random() * 100}%`, |
| | width: `${Math.random() * 30 + 10}px`, |
| | height: `${Math.random() * 30 + 10}px`, |
| | background: `hsl(${Math.random() * 60 + 330}, 100%, ${Math.random() * 30 + 60}%)`, |
| | clipPath: 'path("M10,6 Q10,0 15,0 T20,6 Q25,0 30,0 T35,6 Q40,0 45,0 T50,6 L45,20 L40,15 L35,20 L30,15 L25,20 L20,15 L15,20 L10,15 Z")', |
| | transform: `rotate(${Math.random() * 360}deg)`, |
| | animationDuration: `${Math.random() * 5 + 3}s`, |
| | animationDelay: `${Math.random() * 2}s`, |
| | opacity: Math.random() * 0.5 + 0.3 |
| | }} |
| | /> |
| | ))} |
| | |
| | {hearts.map(heart => ( |
| | <div |
| | key={heart.id} |
| | className="heart" |
| | style={{ |
| | left: `${heart.x}px`, |
| | top: `${heart.y}px`, |
| | width: `${heart.size}px`, |
| | height: `${heart.size}px`, |
| | background: heart.color, |
| | clipPath: 'path("M10,6 Q10,0 15,0 T20,6 Q25,0 30,0 T35,6 Q40,0 45,0 T50,6 L45,20 L40,15 L35,20 L30,15 L25,20 L20,15 L15,20 L10,15 Z")', |
| | transform: `rotate(${Math.random() * 360}deg)`, |
| | opacity: 0.8 |
| | }} |
| | /> |
| | ))} |
| | </div> |
| | |
| | {/* Main Content */} |
| | <div className="container mx-auto px-4 py-12 relative z-10"> |
| | <header className="text-center mb-12"> |
| | <h1 className="dancing-script text-5xl md:text-6xl font-bold text-pink-600 mb-4 floating"> |
| | te amo mami |
| | </h1> |
| | <p className="text-xl text-gray-700">Con todo mi amor</p> |
| | </header> |
| | |
| | <main className="max-w-4xl mx-auto"> |
| | {/* Photo Section */} |
| | <section className="mb-16 flex justify-center"> |
| | <div |
| | className={`photo-frame w-64 h-64 bg-gray-200 rounded-lg flex items-center justify-center cursor-pointer transition-all duration-500 ${showPhoto ? 'opacity-100' : 'opacity-70 hover:opacity-100'}`} |
| | onClick={() => setShowPhoto(!showPhoto)} |
| | > |
| | {showPhoto ? ( |
| | <div className="text-center p-4"> |
| | <p className="dancing-script text-2xl text-pink-600 mb-2">Mi hermosa madre</p> |
| | <p className="text-gray-700">Eres mi mayor bendici贸n</p> |
| | </div> |
| | ) : ( |
| | <div className="text-center"> |
| | <svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16 mx-auto text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| | <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /> |
| | </svg> |
| | <p className="mt-2 text-pink-600">Haz clic para ver un mensaje especial</p> |
| | </div> |
| | )} |
| | </div> |
| | </section> |
| | |
| | {/* Special Message */} |
| | <section className="mb-16"> |
| | <div |
| | className="message-box p-6 md:p-8 cursor-pointer" |
| | onClick={() => setShowSpecialMessage(!showSpecialMessage)} |
| | > |
| | <h2 className="dancing-script text-3xl text-center text-pink-600 mb-4"> |
| | {showSpecialMessage ? 'Te amo con todo mi coraz贸n' : 'Un mensaje para ti'} |
| | </h2> |
| | |
| | {showSpecialMessage ? ( |
| | <div className="text-gray-700 text-lg leading-relaxed"> |
| | <p>No necesito decirte que eres la mejor, porque t煤 ya lo sabes. Solo quiero que sepas que te amo</p> |
| | </div> |
| | ) : ( |
| | <div className="text-center py-4"> |
| | <svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 mx-auto text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| | <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" /> |
| | </svg> |
| | <p className="mt-2 text-pink-600">Haz clic para leer un mensaje especial</p> |
| | </div> |
| | )} |
| | </div> |
| | </section> |
| | |
| | |
| | {/* Interactive Gift */} |
| | <section className="mb-16 text-center"> |
| | <h2 className="dancing-script text-3xl text-pink-600 mb-6">Tu regalo especial</h2> |
| | |
| | <div className="floral-border inline-block p-2 bg-white rounded-2xl"> |
| | <div className="bg-gradient-to-br from-pink-100 to-purple-100 p-8 rounded-xl"> |
| | <svg xmlns="http://www.w3.org/2000/svg" className="h-24 w-24 mx-auto text-pink-600 mb-4" viewBox="0 0 20 20" fill="currentColor"> |
| | <path fillRule="evenodd" d="M5 5a3 3 0 015-2.236A3 3 0 0114.83 6H16a2 2 0 010 4h-5V9a1 1 0 10-2 0v1H4a2 2 0 110-4h1.17C5.06 5.687 5 5.35 5 5zm4 1V5a1 1 0 10-1 1h1zm3 0a1 1 0 10-1-1v1h1z" clipRule="evenodd" /> |
| | <path d="M9 11H3v5a2 2 0 002 2h4v-7zM11 18h4a2 2 0 002-2v-5h-6v7z" /> |
| | </svg> |
| | <p className="text-xl text-gray-700 mb-4">Este es un regalo simb贸lico de todo mi amor</p> |
| | <p className="text-lg text-pink-600">Prometo siempre hacerte sentir orgullosa</p> |
| | </div> |
| | </div> |
| | </section> |
| | </main> |
| | |
| | <footer className="text-center mt-16"> |
| | <p className="text-gray-600">Hecho con 鉂わ笍 para la mejor mam谩 del mundo</p> |
| | <p className="dancing-script text-2xl text-pink-600 mt-2">Te amo mami</p> |
| | </footer> |
| | </div> |
| | </div> |
| | ); |
| | }; |
| | |
| | const root = ReactDOM.createRoot(document.getElementById('root')); |
| | root.render(<App />); |
| | </script> |
| | <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 馃К <a href="https://enzostvs-deepsite.hf.space?remix=hesiz/mami" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| | </html> |
