Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Performer Portal | Next-Gen Talent Platform</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'portal-primary': '#6366F1', | |
| 'portal-secondary': '#8B5CF6', | |
| 'portal-accent': '#EC4899', | |
| 'portal-dark': '#1E1B4B', | |
| 'portal-light': '#F5F3FF', | |
| }, | |
| fontFamily: { | |
| 'sans': ['Inter', 'ui-sans-serif', 'system-ui'], | |
| 'display': ['Poppins', 'ui-sans-serif'], | |
| }, | |
| animation: { | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'pulse-slow': 'pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'wave': 'wave 2s linear infinite', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-10px)' }, | |
| }, | |
| wave: { | |
| '0%': { transform: 'rotate(0deg)' }, | |
| '10%': { transform: 'rotate(14deg)' }, | |
| '20%': { transform: 'rotate(-8deg)' }, | |
| '30%': { transform: 'rotate(14deg)' }, | |
| '40%': { transform: 'rotate(-4deg)' }, | |
| '50%': { transform: 'rotate(10deg)' }, | |
| '60%': { transform: 'rotate(0deg)' }, | |
| '100%': { transform: 'rotate(0deg)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </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=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap"> | |
| <style> | |
| /* Custom CSS for advanced interactions */ | |
| :root { | |
| --portal-primary: #6366F1; | |
| --portal-secondary: #8B5CF6; | |
| --portal-accent: #EC4899; | |
| --portal-dark: #1E1B4B; | |
| --portal-light: #F5F3FF; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #F9FAFB; | |
| color: #1F2937; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #e0e7ff 100%); | |
| } | |
| .portal-gradient { | |
| background: linear-gradient(135deg, var(--portal-primary) 0%, var(--portal-secondary) 100%); | |
| } | |
| .portal-gradient-text { | |
| background: linear-gradient(135deg, var(--portal-primary) 0%, var(--portal-secondary) 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .video-upload-container { | |
| border: 2px dashed #9CA3AF; | |
| transition: all 0.3s ease; | |
| background-color: rgba(255, 255, 255, 0.7); | |
| backdrop-filter: blur(10px); | |
| } | |
| .video-upload-container:hover { | |
| border-color: var(--portal-primary); | |
| background-color: rgba(99, 102, 241, 0.05); | |
| } | |
| .video-upload-container.dragover { | |
| border-color: var(--portal-primary); | |
| background-color: rgba(99, 102, 241, 0.1); | |
| transform: scale(1.02); | |
| } | |
| .theme-checkbox:checked + .theme-label { | |
| border-color: var(--portal-primary); | |
| background-color: rgba(99, 102, 241, 0.1); | |
| box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.1), 0 2px 4px -1px rgba(99, 102, 241, 0.06); | |
| } | |
| .calendar-day { | |
| transition: all 0.2s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .calendar-day:hover:not(.disabled) { | |
| background-color: #E0E7FF; | |
| } | |
| .calendar-day.selected { | |
| background-color: var(--portal-primary); | |
| color: white; | |
| font-weight: 600; | |
| } | |
| .calendar-day.selected::after { | |
| content: ''; | |
| position: absolute; | |
| top: -10px; | |
| right: -10px; | |
| width: 20px; | |
| height: 20px; | |
| background-color: var(--portal-accent); | |
| border-radius: 50%; | |
| filter: blur(8px); | |
| opacity: 0.7; | |
| } | |
| .step-complete .step-icon { | |
| background-color: #10B981; | |
| color: white; | |
| box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3), 0 2px 4px -1px rgba(16, 185, 129, 0.1); | |
| } | |
| .step-current .step-icon { | |
| background-color: var(--portal-primary); | |
| color: white; | |
| box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.3), 0 2px 4px -1px rgba(99, 102, 241, 0.1); | |
| animation: pulse-slow 2.5s infinite; | |
| } | |
| .step-pending .step-icon { | |
| background-color: #E5E7EB; | |
| color: #6B7280; | |
| } | |
| .time-slot { | |
| transition: all 0.2s ease; | |
| } | |
| .time-slot.selected { | |
| background-color: var(--portal-primary) ; | |
| color: white ; | |
| transform: translateY(-2px); | |
| } | |
| .talent-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| } | |
| .talent-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .talent-card .talent-badge { | |
| position: absolute; | |
| top: -10px; | |
| right: -10px; | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| background-color: var(--portal-accent); | |
| color: white; | |
| font-weight: bold; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .notification-dot { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background-color: var(--portal-accent); | |
| border: 2px solid white; | |
| } | |
| .progress-ring { | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .progress-ring-circle { | |
| transition: stroke-dashoffset 0.5s ease; | |
| stroke-linecap: round; | |
| } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.8); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .wave-animation { | |
| animation: wave 2s linear infinite; | |
| transform-origin: 70% 70%; | |
| } | |
| @keyframes float-bubble { | |
| 0%, 100% { | |
| transform: translateY(0) translateX(0); | |
| } | |
| 50% { | |
| transform: translateY(-20px) translateX(10px); | |
| } | |
| } | |
| .bubble-1 { | |
| animation: float-bubble 8s ease-in-out infinite; | |
| } | |
| .bubble-2 { | |
| animation: float-bubble 7s ease-in-out infinite 1s; | |
| } | |
| .bubble-3 { | |
| animation: float-bubble 9s ease-in-out infinite 2s; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--portal-primary); | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--portal-secondary); | |
| } | |
| /* Custom checkbox */ | |
| .custom-checkbox { | |
| position: relative; | |
| width: 20px; | |
| height: 20px; | |
| border: 2px solid #D1D5DB; | |
| border-radius: 4px; | |
| transition: all 0.2s ease; | |
| } | |
| .custom-checkbox.checked { | |
| background-color: var(--portal-primary); | |
| border-color: var(--portal-primary); | |
| } | |
| .custom-checkbox.checked::after { | |
| content: ''; | |
| position: absolute; | |
| left: 6px; | |
| top: 2px; | |
| width: 5px; | |
| height: 10px; | |
| border: solid white; | |
| border-width: 0 2px 2px 0; | |
| transform: rotate(45deg); | |
| } | |
| /* Custom toggle switch */ | |
| .toggle-switch { | |
| position: relative; | |
| display: inline-block; | |
| width: 48px; | |
| height: 24px; | |
| } | |
| .toggle-switch input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .toggle-slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: #E5E7EB; | |
| transition: .4s; | |
| border-radius: 24px; | |
| } | |
| .toggle-slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: 18px; | |
| width: 18px; | |
| left: 3px; | |
| bottom: 3px; | |
| background-color: white; | |
| transition: .4s; | |
| border-radius: 50%; | |
| } | |
| input:checked + .toggle-slider { | |
| background-color: var(--portal-primary); | |
| } | |
| input:checked + .toggle-slider:before { | |
| transform: translateX(24px); | |
| } | |
| /* Custom radio buttons */ | |
| .custom-radio { | |
| position: relative; | |
| width: 20px; | |
| height: 20px; | |
| border: 2px solid #D1D5DB; | |
| border-radius: 50%; | |
| transition: all 0.2s ease; | |
| } | |
| .custom-radio.checked { | |
| border-color: var(--portal-primary); | |
| } | |
| .custom-radio.checked::after { | |
| content: ''; | |
| position: absolute; | |
| top: 3px; | |
| left: 3px; | |
| width: 10px; | |
| height: 10px; | |
| background-color: var(--portal-primary); | |
| border-radius: 50%; | |
| } | |
| /* Floating action button */ | |
| .fab { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| width: 56px; | |
| height: 56px; | |
| border-radius: 50%; | |
| background-color: var(--portal-primary); | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); | |
| transition: all 0.3s ease; | |
| z-index: 50; | |
| } | |
| .fab:hover { | |
| transform: translateY(-3px) scale(1.05); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); | |
| } | |
| /* Tooltip */ | |
| .tooltip { | |
| position: relative; | |
| } | |
| .tooltip .tooltip-text { | |
| visibility: hidden; | |
| width: 120px; | |
| background-color: var(--portal-dark); | |
| color: white; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 5px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| font-size: 12px; | |
| } | |
| .tooltip:hover .tooltip-text { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| /* Custom dropdown */ | |
| .custom-dropdown { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .custom-dropdown-select { | |
| appearance: none; | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); | |
| background-repeat: no-repeat; | |
| background-position: right 0.75rem center; | |
| background-size: 1em; | |
| } | |
| /* Custom tab system */ | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.5s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .tab-button.active { | |
| color: var(--portal-primary); | |
| border-bottom: 2px solid var(--portal-primary); | |
| } | |
| /* Custom modal */ | |
| .modal { | |
| transition: opacity 0.3s ease, visibility 0.3s ease; | |
| } | |
| .modal-content { | |
| transition: transform 0.3s ease; | |
| transform: translateY(20px); | |
| } | |
| .modal.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .modal.active .modal-content { | |
| transform: translateY(0); | |
| } | |
| /* Custom toast notification */ | |
| .toast { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| padding: 12px 24px; | |
| background-color: var(--portal-dark); | |
| color: white; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); | |
| transform: translateY(100px); | |
| opacity: 0; | |
| transition: all 0.3s ease; | |
| z-index: 1000; | |
| } | |
| .toast.show { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| /* Custom progress bar */ | |
| .progress-container { | |
| position: relative; | |
| height: 8px; | |
| background-color: #E5E7EB; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .progress-bar { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| height: 100%; | |
| background-color: var(--portal-primary); | |
| border-radius: 4px; | |
| transition: width 0.6s ease; | |
| } | |
| /* Custom badge */ | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 2px 8px; | |
| border-radius: 9999px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .badge-primary { | |
| background-color: var(--portal-primary); | |
| color: white; | |
| } | |
| .badge-secondary { | |
| background-color: var(--portal-secondary); | |
| color: white; | |
| } | |
| .badge-accent { | |
| background-color: var(--portal-accent); | |
| color: white; | |
| } | |
| /* Custom avatar */ | |
| .avatar { | |
| position: relative; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| overflow: hidden; | |
| } | |
| .avatar-online::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| right: 0; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background-color: #10B981; | |
| border: 2px solid white; | |
| } | |
| /* Custom card */ | |
| .card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| } | |
| .card:hover { | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| /* Custom form elements */ | |
| .form-input { | |
| transition: all 0.3s ease; | |
| } | |
| .form-input:focus { | |
| border-color: var(--portal-primary); | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); | |
| } | |
| /* Custom pagination */ | |
| .pagination-item { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 6px; | |
| transition: all 0.3s ease; | |
| } | |
| .pagination-item:hover:not(.active) { | |
| background-color: #E5E7EB; | |
| } | |
| .pagination-item.active { | |
| background-color: var(--portal-primary); | |
| color: white; | |
| } | |
| /* Custom skeleton loader */ | |
| .skeleton { | |
| background-color: #E5E7EB; | |
| border-radius: 4px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .skeleton::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); | |
| animation: shimmer 1.5s infinite; | |
| } | |
| @keyframes shimmer { | |
| 0% { transform: translateX(-100%); } | |
| 100% { transform: translateX(100%); } | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen"> | |
| <!-- Age Verification Modal --> | |
| <div id="ageVerificationModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 transition-opacity duration-300"> | |
| <div class="modal-content bg-white rounded-2xl p-8 max-w-md w-full mx-4 shadow-2xl"> | |
| <div class="text-center mb-6"> | |
| <div class="wave-animation text-5xl text-portal-primary mb-4"> | |
| <i class="fas fa-exclamation-circle"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-gray-800 font-display">Age Verification</h2> | |
| <p class="text-gray-600 mt-2">This platform is exclusively for performers aged 18 and above. By entering, you confirm you meet this requirement.</p> | |
| </div> | |
| <div class="flex flex-col space-y-4"> | |
| <button id="confirmAge" class="portal-gradient hover:opacity-90 text-white font-medium py-3 px-4 rounded-lg transition-all transform hover:scale-[1.01] active:scale-[0.99]"> | |
| <i class="fas fa-check-circle mr-2"></i> I am 18 or older - Enter | |
| </button> | |
| <button id="exitSite" class="border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-3 px-4 rounded-lg transition"> | |
| <i class="fas fa-times-circle mr-2"></i> Exit Site | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating Action Button --> | |
| <div class="fab tooltip" id="helpFab"> | |
| <i class="fas fa-question text-xl"></i> | |
| <span class="tooltip-text">Need Help?</span> | |
| </div> | |
| <!-- Main Content (hidden until age verification) --> | |
| <div id="mainContent" class="hidden"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm sticky top-0 z-40"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="relative"> | |
| <i class="fas fa-star text-portal-primary text-2xl mr-2"></i> | |
| <div class="bubble-1 absolute -top-2 -left-2 w-4 h-4 rounded-full bg-portal-accent opacity-20"></div> | |
| </div> | |
| <h1 class="text-xl font-bold text-gray-800 font-display">Performer Portal</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-portal-primary font-medium flex items-center"> | |
| <i class="fas fa-home mr-2"></i> Dashboard | |
| </a> | |
| <a href="#" class="text-gray-600 hover:text-portal-primary transition flex items-center"> | |
| <i class="fas fa-user mr-2"></i> Profile | |
| </a> | |
| <a href="#" class="text-gray-600 hover:text-portal-primary transition flex items-center"> | |
| <i class="fas fa-video mr-2"></i> Auditions | |
| </a> | |
| <a href="#" class="text-gray-600 hover:text-portal-primary transition flex items-center"> | |
| <i class="fas fa-calendar-alt mr-2"></i> Schedule | |
| </a> | |
| <a href="#" class="text-gray-600 hover:text-portal-primary transition flex items-center"> | |
| <i class="fas fa-book mr-2"></i> Resources | |
| </a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button class="md:hidden text-gray-600"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <div class="relative"> | |
| <button class="w-10 h-10 rounded-full bg-portal-light text-portal-primary flex items-center justify-center hover:bg-portal-primary hover:text-white transition"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <span class="notification-dot"></span> | |
| </div> | |
| <div class="relative"> | |
| <button class="w-10 h-10 rounded-full bg-portal-light text-portal-primary flex items-center justify-center hover:bg-portal-primary hover:text-white transition"> | |
| <i class="fas fa-envelope"></i> | |
| </button> | |
| <span class="notification-dot bg-portal-accent"></span> | |
| </div> | |
| <div class="relative"> | |
| <button id="userMenuButton" class="w-10 h-10 rounded-full bg-portal-light text-portal-primary flex items-center justify-center hover:bg-portal-primary hover:text-white transition"> | |
| <i class="fas fa-user"></i> | |
| </button> | |
| <span class="absolute top-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span> | |
| <!-- User Dropdown Menu (hidden by default) --> | |
| <div id="userDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-user-circle mr-2"></i> My Profile | |
| </a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-cog mr-2"></i> Settings | |
| </a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-question-circle mr-2"></i> Help | |
| </a> | |
| <div class="border-t border-gray-200"></div> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-sign-out-alt mr-2"></i> Sign out | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Mobile Navigation (hidden by default) --> | |
| <div id="mobileNav" class="hidden md:hidden bg-white shadow-md"> | |
| <div class="container mx-auto px-4 py-2"> | |
| <div class="flex flex-col space-y-3"> | |
| <a href="#" class="text-portal-primary font-medium py-2 flex items-center"> | |
| <i class="fas fa-home mr-3"></i> Dashboard | |
| </a> | |
| <a href="#" class="text-gray-600 py-2 flex items-center"> | |
| <i class="fas fa-user mr-3"></i> Profile | |
| </a> | |
| <a href="#" class="text-gray-600 py-2 flex items-center"> | |
| <i class="fas fa-video mr-3"></i> Auditions | |
| </a> | |
| <a href="#" class="text-gray-600 py-2 flex items-center"> | |
| <i class="fas fa-calendar-alt mr-3"></i> Schedule | |
| </a> | |
| <a href="#" class="text-gray-600 py-2 flex items-center"> | |
| <i class="fas fa-book mr-3"></i> Resources | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Dashboard --> | |
| <main class="container mx-auto px-4 py-6"> | |
| <!-- Welcome Section --> | |
| <section class="mb-8"> | |
| <div class="bg-white rounded-xl shadow-sm p-6 glass-effect"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between"> | |
| <div> | |
| <h2 class="text-2xl font-bold text-gray-800 font-display">Welcome back, <span class="portal-gradient-text">Jessica</span></h2> | |
| <p class="text-gray-600 mt-1">Complete your profile to unlock more audition opportunities</p> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <div class="flex items-center"> | |
| <div class="relative w-12 h-12 mr-3"> | |
| <svg class="w-full h-full" viewBox="0 0 36 36"> | |
| <circle cx="18" cy="18" r="16" fill="none" stroke="#E5E7EB" stroke-width="3"></circle> | |
| <path class="progress-ring-circle" | |
| stroke-dasharray="100 100" | |
| stroke-dashoffset="35" | |
| stroke-linecap="round" | |
| stroke="url(#progressGradient)" | |
| stroke-width="3" | |
| fill="none" | |
| d="M18 2 a 16 16 0 0 1 0 32 a 16 16 0 0 1 0 -32"/> | |
| <defs> | |
| <linearGradient id="progressGradient" x1="0%" y1="0%" x2="100%" y2="0%"> | |
| <stop offset="0%" stop-color="#6366F1" /> | |
| <stop offset="100%" stop-color="#8B5CF6" /> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| <span class="absolute inset-0 flex items-center justify-center text-sm font-medium">65%</span> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Profile completion</p> | |
| <button class="text-sm font-medium text-portal-primary hover:text-portal-secondary mt-1"> | |
| Complete now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-6"> | |
| <!-- Auditions Card --> | |
| <div class="bg-portal-light rounded-lg p-4 border border-portal-light"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">Upcoming Auditions</p> | |
| <h3 class="text-2xl font-bold text-portal-dark mt-1">3</h3> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-portal-primary bg-opacity-10 flex items-center justify-center text-portal-primary"> | |
| <i class="fas fa-video text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <a href="#" class="text-sm font-medium text-portal-primary hover:text-portal-secondary flex items-center"> | |
| View schedule <i class="fas fa-chevron-right ml-1 text-xs"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Messages Card --> | |
| <div class="bg-portal-light rounded-lg p-4 border border-portal-light"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">New Messages</p> | |
| <h3 class="text-2xl font-bold text-portal-dark mt-1">5</h3> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-portal-accent bg-opacity-10 flex items-center justify-center text-portal-accent"> | |
| <i class="fas fa-envelope text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <a href="#" class="text-sm font-medium text-portal-primary hover:text-portal-secondary flex items-center"> | |
| Check inbox <i class="fas fa-chevron-right ml-1 text-xs"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Applications Card --> | |
| <div class="bg-portal-light rounded-lg p-4 border border-portal-light"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">Applications</p> | |
| <h3 class="text-2xl font-bold text-portal-dark mt-1">12</h3> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-portal-secondary bg-opacity-10 flex items-center justify-center text-portal-secondary"> | |
| <i class="fas fa-file-alt text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <a href="#" class="text-sm font-medium text-portal-primary hover:text-portal-secondary flex items-center"> | |
| View status <i class="fas fa-chevron-right ml-1 text-xs"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Earnings Card --> | |
| <div class="bg-portal-light rounded-lg p-4 border border-portal-light"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">Estimated Earnings</p> | |
| <h3 class="text-2xl font-bold text-portal-dark mt-1">$2,450</h3> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-green-500 bg-opacity-10 flex items-center justify-center text-green-500"> | |
| <i class="fas fa-dollar-sign text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <a href="#" class="text-sm font-medium text-portal-primary hover:text-portal-secondary flex items-center"> | |
| View details <i class="fas fa-chevron-right ml-1 text-xs"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Onboarding Steps --> | |
| <section class="mb-8"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 font-display">Your Onboarding Journey</h2> | |
| <button class="text-sm font-medium text-portal-primary hover:text-portal-secondary flex items-center"> | |
| View all steps <i class="fas fa-chevron-right ml-1 text-xs"></i> | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <div class="grid grid-cols-1 md:grid-cols-5 divide-y md:divide-y-0 md:divide-x divide-gray-200"> | |
| <!-- Step 1 --> | |
| <div class="step-complete p-6 hover:bg-gray-50 transition cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="step-icon w-8 h-8 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Account Setup</h3> | |
| <p class="text-sm text-gray-500 mt-1">Basic information completed</p> | |
| <div class="mt-2"> | |
| <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">Completed</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="step-complete p-6 hover:bg-gray-50 transition cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="step-icon w-8 h-8 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Profile Details</h3> | |
| <p class="text-sm text-gray-500 mt-1">Physical attributes added</p> | |
| <div class="mt-2"> | |
| <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">Completed</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="step-current p-6 hover:bg-gray-50 transition cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="step-icon w-8 h-8 rounded-full flex items-center justify-center mr-4"> | |
| <span>3</span> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Content Preferences</h3> | |
| <p class="text-sm text-gray-500 mt-1">Select your comfort themes</p> | |
| <div class="mt-2"> | |
| <span class="text-xs px-2 py-1 bg-blue-100 text-blue-800 rounded-full">In Progress</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="step-pending p-6 hover:bg-gray-50 transition cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="step-icon w-8 h-8 rounded-full flex items-center justify-center mr-4"> | |
| <span>4</span> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Casting Video</h3> | |
| <p class="text-sm text-gray-500 mt-1">Upload your audition tape</p> | |
| <div class="mt-2"> | |
| <span class="text-xs px-2 py-1 bg-gray-100 text-gray-800 rounded-full">Pending</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 5 --> | |
| <div class="step-pending p-6 hover:bg-gray-50 transition cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="step-icon w-8 h-8 rounded-full flex items-center justify-center mr-4"> | |
| <span>5</span> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Live Audition</h3> | |
| <p class="text-sm text-gray-500 mt-1">Schedule your call</p> | |
| <div class="mt-2"> | |
| <span class="text-xs px-2 py-1 bg-gray-100 text-gray-800 rounded-full">Pending</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Content Preferences Section --> | |
| <section class="mb-8"> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div> | |
| <h2 class="text-xl font-semibold text-gray-800 font-display">Content Preferences</h2> | |
| <p class="text-gray-600 mt-1">Customize your audition opportunities</p> | |
| </div> | |
| <span class="text-sm text-portal-primary font-medium badge badge-primary">Step 3 of 5</span> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <label class="block text-sm font-medium text-gray-700">Show me audition opportunities</label> | |
| <div class="toggle-switch"> | |
| <input type="checkbox" id="auditionToggle" checked> | |
| <span class="toggle-slider"></span> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-500">Turning this off will pause all new audition invitations</p> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="font-medium text-gray-800 mb-3">Comfort Level with Themes</h3> | |
| <p class="text-gray-600 mb-4">Select the themes you're comfortable performing. You can update these preferences anytime.</p> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"> | |
| <!-- Theme Option 1 --> | |
| <div> | |
| <input type="checkbox" id="theme-schoolgirl" class="hidden theme-checkbox"> | |
| <label for="theme-schoolgirl" class="theme-label block border-2 border-gray-200 rounded-lg p-4 cursor-pointer transition hover:shadow-md"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-graduation-cap"></i> | |
| </div> | |
| <span class="font-medium">Schoolgirl</span> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2 pl-13">Academic settings, uniforms</p> | |
| </label> | |
| </div> | |
| <!-- Theme Option 2 --> | |
| <div> | |
| <input type="checkbox" id="theme-cheerleader" class="hidden theme-checkbox" checked> | |
| <label for="theme-cheerleader" class="theme-label block border-2 border-gray-200 rounded-lg p-4 cursor-pointer transition hover:shadow-md"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-pomfret"></i> | |
| </div> | |
| <span class="font-medium">Cheerleader</span> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2 pl-13">Sports spirit, pom-poms</p> | |
| </label> | |
| </div> | |
| <!-- Theme Option 3 --> | |
| <div> | |
| <input type="checkbox" id="theme-college" class="hidden theme-checkbox" checked> | |
| <label for="theme-college" class="theme-label block border-2 border-gray-200 rounded-lg p-4 cursor-pointer transition hover:shadow-md"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-university"></i> | |
| </div> | |
| <span class="font-medium">College</span> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2 pl-13">University life, dorm settings</p> | |
| </label> | |
| </div> | |
| <!-- Theme Option 4 --> | |
| <div> | |
| <input type="checkbox" id="theme-office" class="hidden theme-checkbox"> | |
| <label for="theme-office" class="theme-label block border-2 border-gray-200 rounded-lg p-4 cursor-pointer transition hover:shadow-md"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-briefcase"></i> | |
| </div> | |
| <span class="font-medium">Office Professional</span> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2 pl-13">Corporate settings, business attire</p> | |
| </label> | |
| </div> | |
| <!-- Theme Option 5 --> | |
| <div> | |
| <input type="checkbox" id="theme-fantasy" class="hidden theme-checkbox"> | |
| <label for="theme-fantasy" class="theme-label block border-2 border-gray-200 rounded-lg p-4 cursor-pointer transition hover:shadow-md"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-hat-wizard"></i> | |
| </div> | |
| <span class="font-medium">Fantasy</span> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2 pl-13">Costumes, mythical settings</p> | |
| </label> | |
| </div> | |
| <!-- Theme Option 6 --> | |
| <div> | |
| <input type="checkbox" id="theme-athlete" class="hidden theme-checkbox"> | |
| <label for="theme-athlete" class="theme-label block border-2 border-gray-200 rounded-lg p-4 cursor-pointer transition hover:shadow-md"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-running"></i> | |
| </div> | |
| <span class="font-medium">Athlete</span> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2 pl-13">Sports settings, athletic wear</p> | |
| </label> | |
| </div> | |
| <!-- Theme Option 7 --> | |
| <div> | |
| <input type="checkbox" id="theme-military" class="hidden theme-checkbox"> | |
| <label for="theme-military" class="theme-label block border-2 border-gray-200 rounded-lg p-4 cursor-pointer transition hover:shadow-md"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-flag"></i> | |
| </div> | |
| <span class="font-medium">Military</span> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2 pl-13">Uniforms, authority figures</p> | |
| </label> | |
| </div> | |
| <!-- Theme Option 8 --> | |
| <div> | |
| <input type="checkbox" id="theme-medical" class="hidden theme-checkbox"> | |
| <label for="theme-medical" class="theme-label block border-2 border-gray-200 rounded-lg p-4 cursor-pointer transition hover:shadow-md"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-briefcase-medical"></i> | |
| </div> | |
| <span class="font-medium">Medical</span> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2 pl-13">Hospital settings, uniforms</p> | |
| </label> | |
| </div> | |
| <!-- Theme Option 9 --> | |
| <div> | |
| <input type="checkbox" id="theme-casual" class="hidden theme-checkbox" checked> | |
| <label for="theme-casual" class="theme-label block border-2 border-gray-200 rounded-lg p-4 cursor-pointer transition hover:shadow-md"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-tshirt"></i> | |
| </div> | |
| <span class="font-medium">Casual</span> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2 pl-13">Everyday wear, relaxed settings</p> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="font-medium text-gray-800 mb-3">Role Preferences</h3> | |
| <p class="text-gray-600 mb-4">Select the types of roles you're interested in</p> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"> | |
| <div class="flex items-center"> | |
| <div class="custom-radio mr-3" id="role-lead"></div> | |
| <label for="role-lead" class="cursor-pointer">Lead Roles</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="custom-radio checked mr-3" id="role-supporting"></div> | |
| <label for="role-supporting" class="cursor-pointer">Supporting Roles</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="custom-radio checked mr-3" id="role-extra"></div> | |
| <label for="role-extra" class="cursor-pointer">Background Extra</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 pt-6 flex justify-between items-center"> | |
| <button class="text-portal-primary hover:text-portal-secondary font-medium flex items-center"> | |
| <i class="fas fa-arrow-left mr-2"></i> Back to Profile Details | |
| </button> | |
| <button class="portal-gradient hover:opacity-90 text-white font-medium py-2 px-6 rounded-lg transition flex items-center"> | |
| Save Preferences <i class="fas fa-check ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Video Upload Section --> | |
| <section class="mb-8"> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div> | |
| <h2 class="text-xl font-semibold text-gray-800 font-display">Casting Video</h2> | |
| <p class="text-gray-600 mt-1">Showcase your talent with a professional audition tape</p> | |
| </div> | |
| <span class="text-sm text-gray-500 font-medium badge">Step 4 of 5</span> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <div class="lg:col-span-2"> | |
| <div id="videoUploadContainer" class="video-upload-container rounded-lg p-8 text-center"> | |
| <div class="max-w-md mx-auto"> | |
| <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-video text-indigo-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-800 mb-2">Upload your casting video</h3> | |
| <p class="text-gray-500 mb-4">Drag and drop your video file here, or click to browse</p> | |
| <p class="text-xs text-gray-400">MP4, MOV, or AVI. Max 5 minutes. Max 500MB.</p> | |
| <input type="file" id="videoFileInput" class="hidden" accept="video/mp4,video/quicktime,video/x-msvideo"> | |
| <button id="uploadButton" class="mt-6 bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-lg transition flex items-center mx-auto"> | |
| <i class="fas fa-cloud-upload-alt mr-2"></i> Select File | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Uploaded Video Preview (hidden by default) --> | |
| <div id="uploadedVideoPreview" class="hidden mt-6"> | |
| <div class="flex flex-col md:flex-row md:items-center border border-gray-200 rounded-lg p-4"> | |
| <div class="w-full md:w-1/3 mb-4 md:mb-0"> | |
| <div class="relative pt-[56.25%] bg-gray-100 rounded overflow-hidden"> | |
| <video class="absolute inset-0 w-full h-full object-cover" controls> | |
| <source src="#" type="video/mp4"> | |
| </video> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-play text-white text-3xl bg-black bg-opacity-50 rounded-full w-12 h-12 flex items-center justify-center"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-2/3 md:pl-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">My_Casting_Tape.mp4</h4> | |
| <p class="text-sm text-gray-500 mt-1">Uploaded: Just now • 2:45 duration • 128MB</p> | |
| </div> | |
| <button class="text-red-500 hover:text-red-700"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| <div class="mt-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Video Title</label> | |
| <input type="text" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="E.g., Jessica's Audition Tape"> | |
| </div> | |
| <div class="mt-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Description</label> | |
| <textarea class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-indigo-500 focus:border-indigo-500" rows="2" placeholder="Brief description of your video"></textarea> | |
| </div> | |
| <div class="mt-6 flex justify-end"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-lg transition"> | |
| Save Video | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-portal-light rounded-lg p-6 border border-portal-light"> | |
| <h3 class="font-medium text-gray-800 mb-3">Video Guidelines</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <div class="w-5 h-5 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <span class="text-sm text-gray-600">Keep it under 5 minutes</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="w-5 h-5 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <span class="text-sm text-gray-600">Well-lit with clear audio</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="w-5 h-5 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <span class="text-sm text-gray-600">Show full body and close-ups</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="w-5 h-5 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <span class="text-sm text-gray-600">Include slate with your name</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="w-5 h-5 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <span class="text-sm text-gray-600">Show range of expressions</span> | |
| </li> | |
| </ul> | |
| <div class="mt-6"> | |
| <h4 class="font-medium text-gray-800 mb-2">Need help?</h4> | |
| <p class="text-sm text-gray-600 mb-3">We can connect you with professional videographers in your area.</p> | |
| <button class="text-sm font-medium text-portal-primary hover:text-portal-secondary flex items-center"> | |
| <i class="fas fa-camera mr-2"></i> Find a videographer | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Schedule Audition Section --> | |
| <section class="mb-8"> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div> | |
| <h2 class="text-xl font-semibold text-gray-800 font-display">Schedule Live Audition</h2> | |
| <p class="text-gray-600 mt-1">Book a time to meet with our casting team</p> | |
| </div> | |
| <span class="text-sm text-gray-500 font-medium badge">Step 5 of 5</span> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Calendar --> | |
| <div class="lg:col-span-2"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-medium text-gray-800">Select a Date</h3> | |
| <div class="flex items-center space-x-4"> | |
| <div class="custom-dropdown"> | |
| <select class="custom-dropdown-select text-sm border border-gray-300 rounded-lg px-3 py-1 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option>June 2023</option> | |
| <option>July 2023</option> | |
| <option>August 2023</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-100"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-100"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-7 gap-1 mb-2"> | |
| <div class="text-center text-xs font-medium text-gray-500 py-1">Sun</div> | |
| <div class="text-center text-xs font-medium text-gray-500 py-1">Mon</div> | |
| <div class="text-center text-xs font-medium text-gray-500 py-1">Tue</div> | |
| <div class="text-center text-xs font-medium text-gray-500 py-1">Wed</div> | |
| <div class="text-center text-xs font-medium text-gray-500 py-1">Thu</div> | |
| <div class="text-center text-xs font-medium text-gray-500 py-1">Fri</div> | |
| <div class="text-center text-xs font-medium text-gray-500 py-1">Sat</div> | |
| </div> | |
| <div class="grid grid-cols-7 gap-1"> | |
| <!-- Previous month days (disabled) --> | |
| <div class="calendar-day disabled h-10 rounded flex items-center justify-center text-gray-300">28</div> | |
| <div class="calendar-day disabled h-10 rounded flex items-center justify-center text-gray-300">29</div> | |
| <div class="calendar-day disabled h-10 rounded flex items-center justify-center text-gray-300">30</div> | |
| <div class="calendar-day disabled h-10 rounded flex items-center justify-center text-gray-300">31</div> | |
| <!-- Current month days --> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">1</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">2</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">3</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">4</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">5</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">6</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">7</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">8</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">9</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">10</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">11</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">12</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">13</div> | |
| <div class="calendar-day selected h-10 rounded flex items-center justify-center text-white">14</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">15</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">16</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">17</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">18</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">19</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">20</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">21</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">22</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">23</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">24</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">25</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">26</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">27</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">28</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">29</div> | |
| <div class="calendar-day h-10 rounded flex items-center justify-center">30</div> | |
| </div> | |
| </div> | |
| <!-- Time Selection --> | |
| <div> | |
| <h3 class="font-medium text-gray-800 mb-4">Available Time Slots</h3> | |
| <div class="space-y-3"> | |
| <div class="border border-gray-200 rounded-lg p-3 hover:border-indigo-300 cursor-pointer transition"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium">Morning</span> | |
| <span class="text-sm text-gray-500">9:00 AM - 12:00 PM</span> | |
| </div> | |
| <div class="mt-2 flex flex-wrap gap-2"> | |
| <button class="time-slot bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full text-sm font-medium">9:00 AM</button> | |
| <button class="time-slot bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm font-medium">10:00 AM</button> | |
| <button class="time-slot bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm font-medium">11:00 AM</button> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-3 hover:border-indigo-300 cursor-pointer transition"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium">Afternoon</span> | |
| <span class="text-sm text-gray-500">1:00 PM - 5:00 PM</span> | |
| </div> | |
| <div class="mt-2 flex flex-wrap gap-2"> | |
| <button class="time-slot bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm font-medium">1:00 PM</button> | |
| <button class="time-slot bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full text-sm font-medium selected">2:00 PM</button> | |
| <button class="time-slot bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm font-medium">3:00 PM</button> | |
| <button class="time-slot bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm font-medium">4:00 PM</button> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-3 hover:border-indigo-300 cursor-pointer transition"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium">Evening</span> | |
| <span class="text-sm text-gray-500">6:00 PM - 9:00 PM</span> | |
| </div> | |
| <div class="mt-2 flex flex-wrap gap-2"> | |
| <button class="time-slot bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm font-medium">6:00 PM</button> | |
| <button class="time-slot bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm font-medium">7:00 PM</button> | |
| <button class="time-slot bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm font-medium">8:00 PM</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Audition Type</label> | |
| <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option>Video Call (Zoom)</option> | |
| <option>In-Person (Los Angeles)</option> | |
| <option>In-Person (New York)</option> | |
| </select> | |
| </div> | |
| <div class="mt-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Notes for Casting Director</label> | |
| <textarea class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-indigo-500 focus:border-indigo-500" rows="3" placeholder="Any special requests or information"></textarea> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="w-full portal-gradient hover:opacity-90 text-white font-medium py-3 px-6 rounded-lg transition flex items-center justify-center"> | |
| <i class="fas fa-calendar-check mr-2"></i> Schedule Audition | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Next Steps Section --> | |
| <section> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 font-display mb-6">Next Steps After Submission</h2> | |
| <div class="space-y-6"> | |
| <!-- Step 1 --> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-4 flex-shrink-0"> | |
| <span class="font-medium">1</span> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Review Process</h3> | |
| <p class="text-gray-600 mt-1">Our casting team will review your profile and materials within 3-5 business days. You'll receive an email notification once reviewed.</p> | |
| <div class="mt-3"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-clock mr-2"></i> | |
| <span>Typically takes 2-3 days</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-4 flex-shrink-0"> | |
| <span class="font-medium">2</span> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Possible Callback</h3> | |
| <p class="text-gray-600 mt-1">If we'd like to see more, we may schedule a callback audition or request additional materials.</p> | |
| <div class="mt-3"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-user-tie mr-2"></i> | |
| <span>You'll meet with our lead casting director</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-4 flex-shrink-0"> | |
| <span class="font-medium">3</span> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Onboarding</h3> | |
| <p class="text-gray-600 mt-1">If selected, you'll complete our performer onboarding process which includes contract signing, payment setup, and orientation.</p> | |
| <div class="mt-3"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-file-signature mr-2"></i> | |
| <span>Digital paperwork completed online</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-4 flex-shrink-0"> | |
| <span class="font-medium">4</span> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Booking Opportunities</h3> | |
| <p class="text-gray-600 mt-1">Once onboarded, you'll start receiving booking opportunities based on your preferences and availability.</p> | |
| <div class="mt-3"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-calendar-alt mr-2"></i> | |
| <span>You control your availability</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-6 border-t border-gray-200"> | |
| <h3 class="font-medium text-gray-800 mb-3">Have questions about the process?</h3> | |
| <div class="grid grid-cols-1 sm:grid-cols-3 gap-4"> | |
| <button class="flex items-center text-portal-primary hover:text-portal-secondary p-3 rounded-lg border border-gray-200 hover:border-portal-primary transition"> | |
| <div class="w-10 h-10 rounded-full bg-portal-primary bg-opacity-10 flex items-center justify-center text-portal-primary mr-3"> | |
| <i class="fas fa-envelope"></i> | |
| </html> |