| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>STAGE PRO | Advanced Performer Portal</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| 'stage-black': '#0A0A0A', |
| 'stage-white': '#FAFAFA', |
| 'stage-primary': '#FF2D55', |
| 'stage-secondary': '#1E90FF', |
| 'stage-accent': '#FFD700', |
| 'stage-gray': '#2D2D2D', |
| 'stage-light': '#1A1A1A', |
| 'stage-success': '#10B981', |
| 'stage-warning': '#F59E0B', |
| 'stage-danger': '#EF4444', |
| 'stage-info': '#3B82F6' |
| }, |
| fontFamily: { |
| 'sans': ['Inter', 'ui-sans-serif', 'system-ui'], |
| 'display': ['Bebas Neue', 'Impact', 'sans-serif'], |
| 'mono': ['Roboto Mono', 'monospace'] |
| }, |
| animation: { |
| 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
| 'float': 'float 6s ease-in-out infinite', |
| 'text-shine': 'textShine 3s linear infinite', |
| 'bounce-slow': 'bounce 2s infinite' |
| }, |
| keyframes: { |
| float: { |
| '0%, 100%': { transform: 'translateY(0)' }, |
| '50%': { transform: 'translateY(-10px)' } |
| }, |
| textShine: { |
| '0%': { 'background-position': '0% 50%' }, |
| '100%': { 'background-position': '100% 50%' } |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap"> |
| <style> |
| :root { |
| --stage-black: #0A0A0A; |
| --stage-white: #FAFAFA; |
| --stage-primary: #FF2D55; |
| --stage-secondary: #1E90FF; |
| --stage-accent: #FFD700; |
| --stage-success: #10B981; |
| --stage-warning: #F59E0B; |
| --stage-danger: #EF4444; |
| --stage-info: #3B82F6; |
| } |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: var(--stage-black); |
| color: var(--stage-white); |
| -webkit-font-smoothing: antialiased; |
| overflow-x: hidden; |
| } |
| |
| .stage-gradient-text { |
| background: linear-gradient(90deg, var(--stage-primary), var(--stage-accent), var(--stage-secondary)); |
| background-size: 200% auto; |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| animation: text-shine 3s linear infinite; |
| } |
| |
| .stage-card { |
| background: rgba(30, 30, 30, 0.7); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.05); |
| transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); |
| } |
| |
| .stage-card:hover { |
| transform: translateY(-4px); |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); |
| border-color: rgba(255, 255, 255, 0.1); |
| } |
| |
| .stage-button { |
| position: relative; |
| overflow: hidden; |
| transition: all 0.3s; |
| z-index: 1; |
| } |
| |
| .stage-button::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 0; |
| height: 100%; |
| background-color: rgba(255, 255, 255, 0.1); |
| transition: all 0.3s; |
| z-index: -1; |
| } |
| |
| .stage-button:hover::before { |
| width: 100%; |
| } |
| |
| .stage-div |
| </html> |
