matthieu/deckerr
1
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add some css animation to make the project prettier #7

Merged
matthieu merged 7 commits from feature/issue-6-add-some-css-animation-to-make-the-project-prettie into master 2025-10-23 16:43:10 +02:00
Conversation 0 Commits 7 Files Changed 7 +934 -653
7 changed files with 934 additions and 653 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.tsx
View File

@@ -20,7 +20,7 @@ import React, { useState } from 'react';
if (loading) {
return (
<div className="min-h-screen bg-gray-900 flex items-center justify-center">
<div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
<div className="loading-spinner h-32 w-32"></div>
</div>
);
}
@@ -38,9 +38,9 @@ import React, { useState } from 'react';
switch (currentPage) {
case 'home':
return (
<div className="min-h-screen bg-gray-900 text-white p-6">
<div className="min-h-screen bg-gray-900 text-white p-6 animate-fade-in">
<div className="max-w-7xl mx-auto">
<h1 className="text-3xl font-bold mb-6">My Decks</h1>
<h1 className="text-3xl font-bold mb-6 animate-slide-in-left">My Decks</h1>
<DeckList onDeckEdit={handleDeckEdit} />
</div>
</div>

4
src/components/DeckCard.tsx
View File

@@ -22,7 +22,7 @@ export default function DeckCard({ deck, onEdit }: DeckCardProps) {
return (
<div
className="bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer"
className="bg-gray-800 rounded-xl overflow-hidden shadow-lg card-hover cursor-pointer animate-scale-in"
onClick={() => onEdit?.(deck.id)}
>
<div className="relative h-48 overflow-hidden">
@@ -66,7 +66,7 @@ export default function DeckCard({ deck, onEdit }: DeckCardProps) {
e.stopPropagation();
onEdit?.(deck.id);
}}
className="mt-4 w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center justify-center gap-2 text-white"
className="mt-4 w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center justify-center gap-2 text-white btn-ripple transition-smooth glow-on-hover"
>
<Edit size={20} />
Edit Deck

2
src/components/DeckList.tsx
View File

@@ -82,7 +82,7 @@ const DeckList = ({ onDeckEdit }: DeckListProps) => {
if (loading) {
return (
<div className="flex items-center justify-center h-64">
<div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
<div className="loading-spinner h-32 w-32"></div>
</div>
);
}

14
src/components/LoginForm.tsx
View File

@@ -80,13 +80,13 @@ import { useState, useEffect } from 'react';
</div>
{/* Login Form */}
<div className="relative z-10 bg-gray-900/80 p-8 rounded-lg shadow-xl backdrop-blur-sm w-full max-w-md">
<h2 className="text-3xl font-bold text-orange-500 mb-6 text-center">
<div className="relative z-10 bg-gray-900/80 p-8 rounded-lg shadow-xl backdrop-blur-sm w-full max-w-md glass-effect animate-scale-in">
<h2 className="text-3xl font-bold text-orange-500 mb-6 text-center animate-bounce-in">
Deckerr
</h2>
{error && (
<div className="mb-4 p-3 bg-red-500/10 border border-red-500 rounded text-red-500">
<div className="mb-4 p-3 bg-red-500/10 border border-red-500 rounded text-red-500 animate-fade-in">
{error}
</div>
)}
@@ -102,7 +102,7 @@ import { useState, useEffect } from 'react';
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full pl-10 pr-4 py-2 bg-gray-800/50 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white"
className="w-full pl-10 pr-4 py-2 bg-gray-800/50 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white transition-smooth"
placeholder="Enter your email"
required
/>
@@ -118,7 +118,7 @@ import { useState, useEffect } from 'react';
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full pl-10 pr-4 py-2 bg-gray-800/50 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white"
className="w-full pl-10 pr-4 py-2 bg-gray-800/50 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white transition-smooth"
placeholder="Enter your password"
required
/>
@@ -126,7 +126,7 @@ import { useState, useEffect } from 'react';
</div>
<button
type="submit"
className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition duration-200"
className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg btn-ripple glow-on-hover transition-smooth"
>
<LogIn size={20} />
{isSignUp ? 'Sign Up' : 'Sign In'}
@@ -136,7 +136,7 @@ import { useState, useEffect } from 'react';
<div className="mt-4 text-center">
<button
onClick={() => setIsSignUp(!isSignUp)}
className="text-blue-400 hover:text-blue-300"
className="text-blue-400 hover:text-blue-300 transition-smooth"
>
{isSignUp ? 'Already have an account? Sign In' : 'Need an account? Sign Up'}
</button>

8
src/components/MagicCard.tsx
View File

@@ -7,20 +7,20 @@ interface MagicCardProps {
const MagicCard = ({ card }: MagicCardProps) => {
return (
<div className="relative">
<div className="relative card-hover animate-fade-in">
{card.image_uris?.normal ? (
<img
src={card.image_uris.normal}
alt={card.name}
className="w-full h-auto rounded-lg"
className="w-full h-auto rounded-lg transition-smooth"
/>
) : (
<div className="w-full h-64 bg-gray-700 rounded-lg flex items-center justify-center text-gray-400">
<div className="w-full h-64 bg-gray-700 rounded-lg flex items-center justify-center text-gray-400 transition-smooth">
No Image Available
</div>
)}
{card.prices?.usd && (
<div className="absolute bottom-0 left-0 p-2 bg-gray-900 bg-opacity-50 text-white rounded-bl-lg rounded-tr-lg">
<div className="absolute bottom-0 left-0 p-2 bg-gray-900 bg-opacity-50 text-white rounded-bl-lg rounded-tr-lg transition-smooth">
${card.prices.usd}
</div>
)}

30
src/components/Navigation.tsx
View File

@@ -74,18 +74,18 @@ import React, { useState, useRef, useEffect } from 'react';
return (
<>
{/* Desktop Navigation - Top */}
<nav className="hidden md:block fixed top-0 left-0 right-0 bg-gray-800 border-b border-gray-700 z-50">
<nav className="hidden md:block fixed top-0 left-0 right-0 bg-gray-800 border-b border-gray-700 z-50 animate-slide-in-left">
<div className="max-w-7xl mx-auto px-4">
<div className="flex items-center justify-between h-16">
<div className="flex items-center space-x-8">
<span className="text-2xl font-bold text-orange-500">Deckerr</span>
<span className="text-2xl font-bold text-orange-500 animate-bounce-in">Deckerr</span>
{navItems.map((item) => (
<button
key={item.id}
onClick={() => setCurrentPage(item.id)}
className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium transition-colors
className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium transition-smooth
${currentPage === item.id
? 'text-white bg-gray-900'
? 'text-white bg-gray-900 animate-pulse-glow'
: 'text-gray-300 hover:text-white hover:bg-gray-700'
}`}
>
@@ -100,32 +100,32 @@ import React, { useState, useRef, useEffect } from 'react';
<div className="relative" ref={dropdownRef}>
<button
onClick={() => setShowDropdown(!showDropdown)}
className="flex items-center space-x-3 px-3 py-2 rounded-md hover:bg-gray-700"
className="flex items-center space-x-3 px-3 py-2 rounded-md hover:bg-gray-700 transition-smooth"
>
<img
src={getAvatarUrl(user.id)}
alt="User avatar"
className="w-8 h-8 rounded-full bg-gray-700"
className="w-8 h-8 rounded-full bg-gray-700 transition-smooth hover:scale-110"
/>
<span className="text-gray-300 text-sm">{username || user.email}</span>
<ChevronDown size={16} className="text-gray-400" />
</button>
{showDropdown && (
<div className="absolute right-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg py-1 border border-gray-700">
<div className="absolute right-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg py-1 border border-gray-700 animate-scale-in glass-effect">
<button
onClick={() => {
setCurrentPage('profile');
setShowDropdown(false);
}}
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700"
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
>
<Settings size={16} />
<span>Profile Settings</span>
</button>
<button
onClick={handleSignOut}
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700"
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
>
<LogOut size={16} />
<span>Sign Out</span>
@@ -140,9 +140,9 @@ import React, { useState, useRef, useEffect } from 'react';
</nav>
{/* Mobile Navigation - Bottom */}
<nav className="md:hidden fixed bottom-0 left-0 right-0 bg-gray-800 border-t border-gray-700 z-50">
<nav className="md:hidden fixed bottom-0 left-0 right-0 bg-gray-800 border-t border-gray-700 z-50 animate-slide-in-right">
<div className="flex justify-between items-center h-16 px-4">
<span className="text-2xl font-bold text-orange-500">Deckerr</span>
<span className="text-2xl font-bold text-orange-500 animate-bounce-in">Deckerr</span>
<div className="relative" ref={mobileMenuRef}>
<button
onClick={() => setShowMobileMenu(!showMobileMenu)}
@@ -151,7 +151,7 @@ import React, { useState, useRef, useEffect } from 'react';
<Menu size={24} />
</button>
{showMobileMenu && (
<div className="absolute right-0 bottom-16 w-48 bg-gray-800 rounded-md shadow-lg py-1 border border-gray-700">
<div className="absolute right-0 bottom-16 w-48 bg-gray-800 rounded-md shadow-lg py-1 border border-gray-700 animate-scale-in glass-effect">
{navItems.map((item) => (
<button
key={item.id}
@@ -159,7 +159,7 @@ import React, { useState, useRef, useEffect } from 'react';
setCurrentPage(item.id);
setShowMobileMenu(false);
}}
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700"
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
>
<item.icon size={16} />
<span>{item.label}</span>
@@ -172,14 +172,14 @@ import React, { useState, useRef, useEffect } from 'react';
setCurrentPage('profile');
setShowMobileMenu(false);
}}
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700"
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
>
<Settings size={16} />
<span>Profile Settings</span>
</button>
<button
onClick={handleSignOut}
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700"
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
>
<LogOut size={16} />
<span>Sign Out</span>

281
src/index.css
View File

@@ -2,6 +2,7 @@
@tailwind components;
@tailwind utilities;
/* Existing slide animation */
@keyframes slide {
0% {
transform: translateX(0);
@@ -14,3 +15,283 @@
.animate-slide {
animation: slide 60s linear infinite;
}
/* Fade In Animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fadeIn 0.6s ease-out forwards;
}
/* Fade In Delayed - for staggered animations */
.animate-fade-in-delay-1 {
animation: fadeIn 0.6s ease-out 0.1s forwards;
opacity: 0;
}
.animate-fade-in-delay-2 {
animation: fadeIn 0.6s ease-out 0.2s forwards;
opacity: 0;
}
.animate-fade-in-delay-3 {
animation: fadeIn 0.6s ease-out 0.3s forwards;
opacity: 0;
}
/* Slide In From Left */
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.animate-slide-in-left {
animation: slideInLeft 0.5s ease-out forwards;
}
/* Slide In From Right */
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.animate-slide-in-right {
animation: slideInRight 0.5s ease-out forwards;
}
/* Scale In Animation */
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.animate-scale-in {
animation: scaleIn 0.4s ease-out forwards;
}
/* Pulse Glow Animation */
@keyframes pulseGlow {
0%, 100% {
box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
}
50% {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 30px rgba(59, 130, 246, 0.4);
}
}
.animate-pulse-glow {
animation: pulseGlow 2s ease-in-out infinite;
}
/* Shimmer Effect */
@keyframes shimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
.animate-shimmer {
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0) 100%
);
background-size: 1000px 100%;
animation: shimmer 2s infinite;
}
/* Bounce In Animation */
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
.animate-bounce-in {
animation: bounceIn 0.6s ease-out forwards;
}
/* Float Animation */
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
/* Gradient Animation */
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.animate-gradient {
background: linear-gradient(
-45deg,
#ee7752,
#e73c7e,
#23a6d5,
#23d5ab
);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
}
/* Card Flip Animation */
@keyframes flipCard {
0% {
transform: perspective(1000px) rotateY(0);
}
100% {
transform: perspective(1000px) rotateY(180deg);
}
}
.animate-flip {
animation: flipCard 0.6s ease-in-out;
}
/* Rotate Animation */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.animate-rotate {
animation: rotate 2s linear infinite;
}
/* Enhanced Hover Effects */
.card-hover {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
0 0 20px rgba(59, 130, 246, 0.3);
}
/* Button Ripple Effect */
.btn-ripple {
position: relative;
overflow: hidden;
}
.btn-ripple::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.btn-ripple:active::after {
width: 300px;
height: 300px;
}
/* Smooth Transitions */
.transition-smooth {
transition: all 0.3s ease-in-out;
}
/* Glass Morphism Effect */
.glass-effect {
background: rgba(31, 41, 55, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Glow on Hover */
.glow-on-hover {
transition: all 0.3s ease;
}
.glow-on-hover:hover {
box-shadow: 0 0 15px rgba(59, 130, 246, 0.6),
0 0 30px rgba(59, 130, 246, 0.4),
0 0 45px rgba(59, 130, 246, 0.2);
transform: scale(1.05);
}
/* Loading Animation */
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-spinner {
border: 3px solid rgba(255, 255, 255, 0.3);
border-top-color: #3b82f6;
border-radius: 50%;
animation: loading 1s linear infinite;
}