|
|
<!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> |
