Spaces:
Running
Running
Ejecuta la implementaci贸n de la siguiente aplicaci贸n tanto de escritorio, como app m贸vil hiper responsive, que ambas aplicaciones se integren de manera nativa en una sola aplicaci贸n, que se adapta perfectamente seg煤n el tipo de dispositivo en el que la usa el usuario, quiero que implementes las funciones descritas a continuaci贸n implementando una pagina distinta para cada funci贸n concreta de la aplicaci贸n descrita a continuaci贸n, a帽ade el m谩ximo de funcionalidad real en cada herramienta y cada elemento de la aplicaci贸n, a帽ade el m谩ximo realismo posible para que se parezca el m谩ximo posible a como se deber铆a ver la aplicaci贸n final para cumplir con todos los requisitos de desarrollo detallados a continuaci贸n:
0406816
verified
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Quantum Portfolio - TradeFlow Pro Infinity</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'quantum': { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| 950: '#082f49' | |
| }, | |
| 'neon': { | |
| 50: '#f0fdf4', | |
| 100: '#dcfce7', | |
| 200: '#bbf7d0', | |
| 300: '#86efac', | |
| 400: '#4ade80', | |
| 500: '#22c55e', | |
| 600: '#16a34a', | |
| 700: '#15803d', | |
| 800: '#166534', | |
| 900: '#14532d', | |
| 950: '#052e16' | |
| } | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'glow': 'glow 2s ease-in-out infinite alternate', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0px)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| }, | |
| glow: { | |
| 'from': { boxShadow: '0 0 10px #0ea5e9, 0 0 20px #0ea5e9, 0 0 30px #0ea5e9' }, | |
| 'to': { boxShadow: '0 0 20px #0ea5e9, 0 0 30px #0ea5e9, 0 0 40px #0ea5e9' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .quantum-gradient { | |
| background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 50%, #0ea5e9 100%); | |
| } | |
| .glass-effect { | |
| backdrop-filter: blur(10px); | |
| background: rgba(8, 47, 73, 0.3); | |
| border: 1px solid rgba(14, 165, 233, 0.2); | |
| } | |
| .quantum-card { | |
| background: linear-gradient(145deg, rgba(8, 47, 73, 0.6), rgba(14, 165, 233, 0.1)); | |
| border: 1px solid rgba(14, 165, 233, 0.3); | |
| box-shadow: 0 8px 32px rgba(14, 165, 233, 0.1); | |
| } | |
| .neon-glow { | |
| box-shadow: 0 0 5px #22c55e, 0 0 10px #22c55e, 0 0 15px #22c55e; | |
| } | |
| .holographic-text { | |
| background: linear-gradient(45deg, #0ea5e9, #22c55e, #0ea5e9); | |
| background-size: 200% 200%; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| animation: shimmer 3s ease-in-out infinite; | |
| } | |
| @keyframes shimmer { | |
| 0%, 100% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| } | |
| .portfolio-item { | |
| transition: all 0.3s ease; | |
| } | |
| .portfolio-item:hover { | |
| transform: translateX(5px); | |
| background: rgba(14, 165, 233, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="dark bg-gray-950 text-white min-h-screen overflow-x-hidden"> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 left-0 right-0 z-50 glass-effect border-b border-quantum-700/30"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center space-x-4"> | |
| <a href="index.html" class="text-gray-300 hover:text-white transition-colors"> | |
| <i data-feather="arrow-left" class="w-5 h-5"></i> | |
| </a> | |
| <h1 class="text-xl font-bold holographic-text">Quantum Portfolio</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="glass-effect px-4 py-2 rounded-lg text-sm hover:bg-quantum-600/30 transition-colors"> | |
| <i data-feather="plus" class="w-4 h-4 inline mr-2"></i> | |
| Add Asset | |
| </button> | |
| <button class="quantum-gradient px-4 py-2 rounded-lg text-sm hover:opacity-80 transition-opacity"> | |
| Rebalance | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="pt-16 pb-20 md:pb-8"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> | |
| <!-- Portfolio Overview --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> | |
| <!-- Total Value --> | |
| <div class="quantum-card rounded-xl p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <p class="text-sm text-gray-400">Total Portfolio Value</p> | |
| <i data-feather="dollar-sign" class="w-5 h-5 text-neon-500"></i> | |
| </div> | |
| <p class="text-3xl font-bold mb-2">$623,450</p> | |
| <p class="text-sm text-neon-500">+$47,250 (+8.2%) <span class="text-xs">24h</span></p> | |
| <div class="mt-4 flex space-x-4 text-xs"> | |
| <div> | |
| <p class="text-gray-400">Invested</p> | |
| <p class="text-white">$550,000</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-400">Unrealized P&L</p> | |
| <p class="text-neon-500">+$73,450</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Asset Allocation --> | |
| <div class="quantum-card rounded-xl p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <p class="text-sm text-gray-400">Asset Allocation</p> | |
| <i data-feather="pie-chart" class="w-5 h-5 text-quantum-400"></i> | |
| </div> | |
| <div class="h-32 mb-4"> | |
| <canvas id="allocationChart"></canvas> | |
| </div> | |
| <div class="space-y-2 text-sm"> | |
| <div class="flex justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 bg-neon-500 rounded-full"></div> | |
| <span>Forex</span> | |
| </div> | |
| <span>45%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 bg-quantum-500 rounded-full"></div> | |
| <span>Cryptocurrency</span> | |
| </div> | |
| <span>25%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 bg-yellow-500 rounded-full"></div> | |
| <span>Commodities</span> | |
| </div> | |
| <span>20%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 bg-purple-500 rounded-full"></div> | |
| <span>Indices</span> | |
| </div> | |
| <span>10%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Performance Metrics --> | |
| <div class="quantum-card rounded-xl p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <p class="text-sm text-gray-400">Performance</p> | |
| <i data-feather="trending-up" class="w-5 h-5 text-neon-500"></i> | |
| </div> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-400">Total Return</span> | |
| <span class="text-neon-500">+24.7%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-neon-500 h-2 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-400">Sharpe Ratio</span> | |
| <span class="text-quantum-400">1.84</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-quantum-500 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-400">Max Drawdown</span> | |
| <span class="text-red-500">-8.2%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-red-500 h-2 rounded-full" style="width: 35%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Holdings --> | |
| <div class="quantum-card rounded-xl p-6 mb-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold">Holdings</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-quantum-600/30 rounded-lg text-sm hover:bg-quantum-600/50 transition-colors">All</button> | |
| <button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700 transition-colors">Profitable</button> | |
| <button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700 transition-colors">Losing</button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="text-left text-gray-400 text-sm border-b border-gray-800"> | |
| <th class="pb-3">Asset</th> | |
| <th class="pb-3">Quantity</th> | |
| <th class="pb-3">Value</th> | |
| <th class="pb-3">P&L</th> | |
| <th class="pb-3">Allocation</th> | |
| <th class="pb-3">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="portfolio-item border-b border-gray-800"> | |
| <td class="py-4"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 bg-neon-500/20 rounded-lg flex items-center justify-center"> | |
| <i data-feather="dollar-sign" class="w-5 h-5 text-neon-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-semibold">EUR/USD</p> | |
| <p class="text-xs text-gray-400">Forex</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="py-4">2.5 lots</td> | |
| <td class="py-4">$280,550</td> | |
| <td class="py-4 text-neon-500">+$34,750</td> | |
| <td class="py-4"> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-neon-500 h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </td> | |
| <td class="py-4"> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 glass-effect rounded hover:bg-quantum-600/30 transition-colors"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 glass-effect rounded hover:bg-red-600/30 transition-colors"> | |
| <i data-feather="x" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="portfolio-item border-b border-gray-800"> | |
| <td class="py-4"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 bg-quantum-500/20 rounded-lg flex items-center justify-center"> | |
| <i data-feather="bitcoin" class="w-5 h-5 text-quantum-400"></i> | |
| </div> | |
| <div> | |
| <p class="font-semibold">BTC/USD</p> | |
| <p class="text-xs text-gray-400">Cryptocurrency</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="py-4">0.85 lots</td> | |
| <td class="py-4">$155,875</td> | |
| <td class="py-4 text-neon-500">+$18,425</td> | |
| <td class="py-4"> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-quantum-500 h-2 rounded-full" style="width: 25%"></div> | |
| </div> | |
| </td> | |
| <td class="py-4"> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 glass-effect rounded hover:bg-quantum-600/30 transition-colors"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 glass-effect rounded hover:bg-red-600/30 transition-colors"> | |
| <i data-feather="x" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="portfolio-item border-b border-gray-800"> | |
| <td class="py-4"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 bg-yellow-500/20 rounded-lg flex items-center justify-center"> | |
| <i data-feather="award" class="w-5 h-5 text-yellow-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-semibold">GOLD</p> | |
| <p class="text-xs text-gray-400">Commodity</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="py-4">1.2 lots</td> | |
| <td class="py-4">$124,700</td> | |
| <td class="py-4 text-neon-500">+$12,300</td> | |
| <td class="py-4"> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 20%"></div> | |
| </div> | |
| </td> | |
| <td class="py-4"> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 glass-effect rounded hover:bg-quantum-600/30 transition-colors"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 glass-effect rounded hover:bg-red-600/30 transition-colors"> | |
| <i data-feather="x" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="portfolio-item"> | |
| <td class="py-4"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 bg-purple-500/20 rounded-lg flex items-center justify-center"> | |
| <i data-feather="bar-chart" class="w-5 h-5 text-purple-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-semibold">S&P 500</p> | |
| <p class="text-xs text-gray-400">Index</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="py-4">0.5 lots</td> | |
| <td class="py-4">$62,325</td> | |
| <td class="py-4 text-red-500">-$2,025</td> | |
| <td class="py-4"> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 10%"></div> | |
| </div> | |
| </td> | |
| <td class="py-4"> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 glass-effect rounded hover:bg-quantum-600/30 transition-colors"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 glass-effect rounded hover:bg-red-600/30 transition-colors"> | |
| <i data-feather="x" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Multi-Chain Assets --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <!-- DeFi Positions --> | |
| <div class="quantum-card rounded-xl p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold">DeFi Positions</h3> | |
| <i data-feather="zap" class="w-5 h-5 text-purple-500"></i> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="glass-effect rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div> | |
| <p class="font-semibold">Uniswap ETH/USDT</p> | |
| <p class="text-xs text-gray-400">Yield Farming</p> | |
| </div> | |
| <span class="text-sm text-neon-500">APY 24.7%</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-400">Value: $45,200</span> | |
| <span class="text-neon-500">+$3,850</span> | |
| </div> | |
| </div> | |
| <div class="glass-effect rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div> | |
| <p class="font-semibold">Aave Lending</p> | |
| <p class="text-xs text-gray-400">USDC Supply</p> | |
| </div> | |
| <span class="text-sm text-quantum-400">APY 8.5%</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-400">Value: $28,750</span> | |
| <span class="text-neon-500">+$1,240</span> | |
| </div> | |
| </div> | |
| <div class="glass-effect rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div> | |
| <p class="font-semibold">Curve stETH</p> | |
| <p class="text-xs text-gray-400">Liquid Staking</p> | |
| </div> | |
| <span class="text-sm text-yellow-500">APY 12.3%</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-400">Value: $32,100</span> | |
| <span class="text-neon-500">+$2,670</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- NFT Collection --> | |
| <div class="quantum-card rounded-xl p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold">Digital Assets</h3> | |
| <i data-feather="image" class="w-5 h-5 text-pink-500"></i> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="glass-effect rounded-lg p-4"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg"></div> | |
| <div class="flex-1"> | |
| <p class="font-semibold">CryptoPunk #7854</p> | |
| <p class="text-xs text-gray-400">Ethereum NFT</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm text-neon-500">$125,000</p> | |
| <p class="text-xs text-gray-400">Floor: 95螢</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-effect rounded-lg p-4"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-lg"></div> | |
| <div class="flex-1"> | |
| <p class="font-semibold">Bored Ape #3421</p> | |
| <p class="text-xs text-gray-400">Ethereum NFT</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm text-neon-500">$85,000</p> | |
| <p class="text-xs text-gray-400">Floor: 68螢</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-effect rounded-lg p-4"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-teal-500 rounded-lg"></div> | |
| <div class="flex-1"> | |
| <p class="font-semibold">Art Blocks #1567</p> | |
| <p class="text-xs text-gray-400">Generative Art</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm text-neon-500">$42,500</p> | |
| <p class="text-xs text-gray-400">Floor: 15螢</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Bottom Navigation for Mobile --> | |
| <nav class="fixed bottom-0 left-0 right-0 z-50 glass-effect border-t border-quantum-700/30 md:hidden"> | |
| <div class="grid grid-cols-5 py-2"> | |
| <button class="flex flex-col items-center justify-center space-y-1 text-gray-400"> | |
| <i data-feather="home" class="w-5 h-5"></i> | |
| <span class="text-xs">Home</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center space-y-1 text-gray-400"> | |
| <i data-feather="bar-chart-2" class="w-5 h-5"></i> | |
| <span class="text-xs">Trade</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center space-y-1 text-gray-400"> | |
| <i data-feather="activity" class="w-5 h-5"></i> | |
| <span class="text-xs">Analytics</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center space-y-1 text-quantum-400"> | |
| <i data-feather="pie-chart" class="w-5 h-5"></i> | |
| <span class="text-xs">Portfolio</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center space-y-1 text-gray-400"> | |
| <i data-feather="cpu" class="w-5 h-5"></i> | |
| <span class="text-xs">AI</span> | |
| </button> | |
| </div> | |
| </nav> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Allocation Chart | |
| const allocationCtx = document.getElementById('allocationChart').getContext('2d'); | |
| new Chart(allocationCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Forex', 'Crypto', 'Commodities', 'Indices'], | |
| datasets: [{ | |
| data: [45, 25, 20, 10], | |
| backgroundColor: ['#22c55e', '#0ea5e9', '#eab308', '#a855f7'], | |
| borderWidth: 0 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { display: false }, | |
| tooltip: { | |
| backgroundColor: 'rgba(8, 47, 73, 0.9)', | |
| titleColor: '#fff', | |
| bodyColor: '#fff', | |
| borderColor: '#0ea5e9', | |
| borderWidth: 1, | |
| cornerRadius: 8, | |
| callbacks: { | |
| label: function(context) { | |
| return context.label + ': ' + context.parsed + '%'; | |
| } | |
| } | |
| } | |
| }, | |
| cutout: '60%' | |
| } | |
| }); | |
| // Animate elements | |
| anime({ | |
| targets: '.quantum-card', | |
| translateY: [30, 0], | |
| opacity: [0, 1], | |
| delay: anime.stagger(100), | |
| duration: 800, | |
| easing: 'easeOutQuad' | |
| }); | |
| // Animate portfolio items | |
| anime({ | |
| targets: '.portfolio-item', | |
| translateX: [-20, 0], | |
| opacity: [0, 1], | |
| delay: anime.stagger(100, {start: 300}), | |
| duration: 600, | |
| easing: 'easeOutQuad' | |
| }); | |
| </script> | |
| </body> | |
| </html> | |