Untitled
unknown
plain_text
2 months ago
8.6 kB
6
Indexable
import React, { useState, useEffect } from 'react'; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog"; const PrayerApp = () => { const [prayers, setPrayers] = useState([ { id: 1, request: "Por favor oren por mi familia", author: "Mar铆a", prayerCount: 0, category: "Familia" }, { id: 2, request: "Necesito oraci贸n por mi salud", author: "Juan", prayerCount: 0, category: "Salud" }, { id: 3, request: "Oren por mi trabajo", author: "Carlos", prayerCount: 0, category: "Trabajo" } ]); const [activePrayer, setActivePrayer] = useState(null); const [progress, setProgress] = useState(0); const [showAmen, setShowAmen] = useState(false); const [timer, setTimer] = useState(null); const [isHovering, setIsHovering] = useState(false); const startPrayer = (prayerId) => { setActivePrayer(prayerId); setProgress(0); setShowAmen(false); const startTime = Date.now(); const duration = 60000; // 1 minuto const interval = setInterval(() => { const elapsed = Date.now() - startTime; const newProgress = Math.min((elapsed / duration) * 100, 100); if (newProgress >= 100) { clearInterval(interval); setShowAmen(true); } setProgress(newProgress); }, 100); setTimer(interval); }; const finishPrayer = () => { setPrayers(prayers.map(prayer => prayer.id === activePrayer ? { ...prayer, prayerCount: prayer.prayerCount + 1 } : prayer )); setActivePrayer(null); setProgress(0); setShowAmen(false); if (timer) clearInterval(timer); }; useEffect(() => { return () => { if (timer) clearInterval(timer); }; }, [timer]); const getCategoryColor = (category) => { const colors = { Familia: 'bg-pink-100 text-pink-800', Salud: 'bg-green-100 text-green-800', Trabajo: 'bg-blue-100 text-blue-800' }; return colors[category] || 'bg-gray-100 text-gray-800'; }; return ( <div className="max-w-md mx-auto p-4 min-h-screen bg-gradient-to-b from-indigo-50 to-white"> <h1 className="text-3xl font-bold text-center mb-6 bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-600"> Peticiones de Oraci贸n </h1> <div className="space-y-4"> {prayers.map((prayer) => ( <Card key={prayer.id} className="transform transition-all duration-300 hover:scale-102 hover:shadow-lg"> <CardHeader> <div className="flex justify-between items-center"> <CardTitle className="text-lg">{prayer.author}</CardTitle> <span className={`px-3 py-1 rounded-full text-sm ${getCategoryColor(prayer.category)}`}> {prayer.category} </span> </div> </CardHeader> <CardContent> <p className="mb-4 text-gray-700">{prayer.request}</p> <div className="flex justify-between items-center"> <span className="text-sm text-gray-500 flex items-center"> <span className="mr-2">馃檹</span> {prayer.prayerCount} personas han orado </span> <Button onClick={() => startPrayer(prayer.id)} disabled={activePrayer !== null} className="bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 transition-all duration-300" > Orar </Button> </div> </CardContent> </Card> ))} </div> <AlertDialog open={activePrayer !== null}> <AlertDialogContent className="bg-gradient-to-b from-gray-900 to-gray-800 text-white"> <AlertDialogHeader> <AlertDialogTitle className="text-center text-2xl font-light"> Momento de Oraci贸n </AlertDialogTitle> </AlertDialogHeader> <div className="flex flex-col items-center justify-center my-8"> <div className="relative w-32 h-64" onMouseEnter={() => setIsHovering(true)} onMouseLeave={() => setIsHovering(false)} > {/* Base de la vela */} <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-16 h-40 bg-gradient-to-b from-white to-gray-200 rounded-lg shadow-lg" /> {/* Decoraci贸n de la vela */} <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 w-16 h-1 bg-gradient-to-r from-transparent via-gray-300 to-transparent" /> {/* Mecha */} <div className="absolute top-6 left-1/2 transform -translate-x-1/2 w-1 h-4 bg-gray-600" /> {/* Llama principal */} <div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-8 h-16" style={{ background: ` radial-gradient(ellipse at center, rgba(255,191,0,${progress/100}) 0%, rgba(255,147,0,${progress/200}) 50%, transparent 100% ) `, boxShadow: ` 0 0 ${progress}px ${progress/3}px rgba(255,191,0,${progress/200}), 0 0 ${progress*1.5}px ${progress/2}px rgba(255,147,0,${progress/300}), 0 0 ${progress*2}px ${progress}px rgba(255,191,0,${progress/400}) `, borderRadius: '50% 50% 50% 50% / 60% 60% 40% 40%', animation: `${isHovering ? 'flicker-fast' : 'flicker'} 0.5s ease-in-out infinite alternate` }} /> {/* Resplandor ambiental */} <div className="absolute top-16 left-1/2 transform -translate-x-1/2 w-48 h-48 rounded-full" style={{ background: `radial-gradient(circle at center, rgba(255,223,0,${progress/400}) 0%, rgba(255,191,0,${progress/600}) 30%, transparent 70% )` }} /> </div> {/* Texto inspiracional */} <p className="text-center mt-4 text-gray-300 italic font-light"> "La oraci贸n es la llave de la ma帽ana y el cerrojo de la noche" </p> {/* Barra de progreso */} <div className="w-full mt-6 bg-gray-700 h-2 rounded-full overflow-hidden"> <div className="h-full rounded-full transition-all duration-100" style={{ width: `${progress}%`, background: 'linear-gradient(to right, #FFA500, #FFD700)' }} /> </div> </div> <AlertDialogFooter> {showAmen && ( <AlertDialogAction onClick={finishPrayer} className="bg-gradient-to-r from-yellow-400 to-orange-500 hover:from-yellow-500 hover:to-orange-600 text-white font-bold transform hover:scale-105 transition-all duration-300" > AM脡N </AlertDialogAction> )} </AlertDialogFooter> </AlertDialogContent> </AlertDialog> <style jsx global>{` @keyframes flicker { 0% { transform: translateX(-50%) scale(0.95) rotate(-1deg); opacity: 0.9; } 100% { transform: translateX(-50%) scale(1.05) rotate(1deg); opacity: 1; } } @keyframes flicker-fast { 0% { transform: translateX(-50%) scale(0.9) rotate(-2deg); opacity: 0.85; } 100% { transform: translateX(-50%) scale(1.1) rotate(2deg); opacity: 1; } } `}</style> </div> ); }; export default PrayerApp;
Editor is loading...
Leave a Comment