Spaces:
Runtime error
Runtime error
| <html lang="ko"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>{% block title %}한국어 TTS Arena{% endblock %}</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" /> | |
| {% block extra_head %}{% endblock %} | |
| <style> | |
| :root { | |
| --primary-color: #6366f1; | |
| --primary-hover: #4f46e5; | |
| --primary-light: #eef2ff; | |
| --secondary-color: #f8fafc; | |
| --text-color: #1e293b; | |
| --text-secondary: #64748b; | |
| --light-gray: #f8fafc; | |
| --border-color: #e2e8f0; | |
| --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); | |
| --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); | |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); | |
| --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); | |
| --radius: 12px; | |
| --radius-lg: 16px; | |
| --success-color: #10b981; | |
| --info-color: #3b82f6; | |
| --warning-color: #f59e0b; | |
| --error-color: #ef4444; | |
| --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); | |
| --gradient-primary-hover: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Pretendard Variable', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; | |
| } | |
| body { | |
| color: var(--text-color); | |
| background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%); | |
| display: flex; | |
| min-height: 100vh; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| a { | |
| color: var(--primary-color); | |
| } | |
| .sidebar { | |
| width: 260px; | |
| background: rgba(255, 255, 255, 0.8); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| padding: 28px 20px; | |
| border-right: 1px solid rgba(255, 255, 255, 0.5); | |
| display: flex; | |
| flex-direction: column; | |
| height: 100vh; | |
| z-index: 1000; | |
| transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| flex-shrink: 0; | |
| box-shadow: 4px 0 24px rgba(0, 0, 0, 0.03); | |
| } | |
| .logo-container { | |
| margin-bottom: 36px; | |
| padding: 0 4px; | |
| } | |
| .logo { | |
| font-size: 24px; | |
| font-weight: 800; | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin-bottom: 10px; | |
| letter-spacing: -0.5px; | |
| } | |
| .supported-by { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 11px; | |
| color: #888; | |
| } | |
| .supported-by span { | |
| opacity: 0.8; | |
| } | |
| .channel-link { | |
| display: flex; | |
| align-items: center; | |
| text-decoration: none; | |
| } | |
| .channel-logo-img { | |
| height: 20px; | |
| width: auto; | |
| transition: opacity 0.2s; | |
| } | |
| .channel-link:hover .channel-logo-img { | |
| opacity: 0.8; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| padding: 14px 16px; | |
| margin-bottom: 6px; | |
| border-radius: var(--radius); | |
| cursor: pointer; | |
| transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| font-weight: 500; | |
| font-size: 15px; | |
| } | |
| .nav-item.active { | |
| background: var(--gradient-primary); | |
| color: white; | |
| font-weight: 600; | |
| box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); | |
| } | |
| .nav-item:hover:not(.active) { | |
| background-color: var(--primary-light); | |
| color: var(--primary-color); | |
| transform: translateX(4px); | |
| } | |
| .nav-item svg { | |
| margin-right: 14px; | |
| flex-shrink: 0; | |
| } | |
| .nav-item.active svg { | |
| color: white; | |
| } | |
| .main-content { | |
| flex: 1; | |
| padding: 40px; | |
| width: 100%; | |
| margin: 0 auto; | |
| overflow-y: auto; | |
| height: 100vh; | |
| background: transparent; | |
| } | |
| .main-content-inner { | |
| max-width: 1100px; | |
| width: 100%; | |
| margin: 0 auto; | |
| background: rgba(255, 255, 255, 0.7); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border-radius: var(--radius-lg); | |
| padding: 32px; | |
| box-shadow: var(--shadow-lg); | |
| border: 1px solid rgba(255, 255, 255, 0.8); | |
| } | |
| .tabs { | |
| display: flex; | |
| border-bottom: 1px solid var(--border-color); | |
| margin-bottom: 24px; | |
| } | |
| .tab { | |
| padding: 12px 24px; | |
| cursor: pointer; | |
| position: relative; | |
| font-weight: 500; | |
| } | |
| .tab.active { | |
| color: var(--primary-color); | |
| } | |
| .tab.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -1px; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background-color: var(--primary-color); | |
| } | |
| .input-container { | |
| display: flex; | |
| margin-bottom: 24px; | |
| align-items: center; | |
| } | |
| .text-input { | |
| flex: 1; | |
| padding: 12px 16px; | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius); | |
| font-family: 'Inter', sans-serif; | |
| font-size: 1em; | |
| outline: none; | |
| transition: border-color 0.2s; | |
| } | |
| .text-input:focus { | |
| border-color: var(--primary-color); | |
| } | |
| .btn { | |
| background: var(--gradient-primary); | |
| color: white; | |
| border: none; | |
| border-radius: var(--radius); | |
| padding: 14px 28px; | |
| margin-left: 12px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); | |
| box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25); | |
| } | |
| .btn:hover { | |
| background: var(--gradient-primary-hover); | |
| transform: translateY(-1px); | |
| box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35); | |
| } | |
| .btn:active { | |
| transform: translateY(0); | |
| } | |
| .icon-btn { | |
| background-color: white; | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius); | |
| width: 42px; | |
| height: 42px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-left: 12px; | |
| cursor: pointer; | |
| transition: background-color 0.2s; | |
| } | |
| .icon-btn:hover { | |
| background-color: var(--light-gray); | |
| } | |
| .players-container { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .players-row { | |
| display: flex; | |
| gap: 24px; | |
| margin-bottom: 24px; | |
| } | |
| .player { | |
| flex: 1; | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-lg); | |
| padding: 24px; | |
| background: white; | |
| box-shadow: var(--shadow); | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .player:hover { | |
| box-shadow: var(--shadow-lg); | |
| border-color: rgba(99, 102, 241, 0.2); | |
| } | |
| .player-label { | |
| font-weight: 700; | |
| margin-bottom: 16px; | |
| font-size: 16px; | |
| color: var(--text-color); | |
| } | |
| .audio-player { | |
| width: 100%; | |
| margin-bottom: 16px; | |
| } | |
| .vote-btn { | |
| width: 100%; | |
| padding: 16px; | |
| background-color: white; | |
| border: 2px solid var(--border-color); | |
| border-radius: var(--radius); | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| font-size: 15px; | |
| } | |
| .vote-btn:hover { | |
| background-color: var(--primary-light); | |
| border-color: var(--primary-color); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15); | |
| } | |
| .vote-btn.selected { | |
| background: var(--gradient-primary); | |
| color: white; | |
| border-color: transparent; | |
| box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35); | |
| } | |
| .shortcut-key { | |
| position: absolute; | |
| right: 12px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| background-color: var(--light-gray); | |
| color: var(--text-color); | |
| border: 1px solid var(--border-color); | |
| border-radius: 4px; | |
| padding: 2px 6px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| } | |
| .vote-btn.selected .shortcut-key { | |
| background-color: rgba(255, 255, 255, 0.2); | |
| color: white; | |
| border-color: transparent; | |
| } | |
| .user-auth { | |
| margin-top: auto; | |
| display: flex; | |
| align-items: center; | |
| padding: 12px 16px; | |
| border-top: 1px solid var(--border-color); | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .user-avatar { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| background-color: var(--primary-color); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-weight: 600; | |
| margin-right: 12px; | |
| } | |
| .user-name { | |
| font-weight: 500; | |
| flex: 1; | |
| } | |
| .user-dropdown { | |
| position: absolute; | |
| bottom: 100%; | |
| left: 0; | |
| right: 0; | |
| margin: 0 16px; | |
| background-color: white; | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| z-index: 1000; | |
| display: none; | |
| overflow: hidden; | |
| margin-bottom: 8px; | |
| } | |
| .user-dropdown.active { | |
| display: block; | |
| } | |
| .dropdown-item { | |
| padding: 12px 16px; | |
| display: flex; | |
| align-items: center; | |
| transition: background-color 0.2s; | |
| text-decoration: none; | |
| color: var(--text-color); | |
| } | |
| .dropdown-item:hover { | |
| background-color: var(--light-gray); | |
| } | |
| .dropdown-item svg { | |
| margin-right: 12px; | |
| } | |
| .dropdown-divider { | |
| height: 1px; | |
| background-color: var(--border-color); | |
| margin: 4px 0; | |
| } | |
| .user-auth-arrow { | |
| transition: transform 0.2s; | |
| } | |
| .user-auth.active .user-auth-arrow { | |
| transform: rotate(180deg); | |
| } | |
| /* Login link removed */ | |
| .sidebar-footer { | |
| margin-top: auto; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .mobile-header { | |
| display: none; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 16px; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .hamburger-menu { | |
| width: 24px; | |
| height: 24px; | |
| cursor: pointer; | |
| } | |
| .current-page { | |
| font-weight: 600; | |
| font-size: 18px; | |
| } | |
| .backdrop { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| -webkit-backdrop-filter: blur(3px); | |
| backdrop-filter: blur(3px); | |
| z-index: 999; | |
| opacity: 0; | |
| transition: opacity 0.3s ease-in-out; | |
| } | |
| .backdrop.active { | |
| display: block; | |
| opacity: 1; | |
| } | |
| .close-sidebar { | |
| position: absolute; | |
| top: 16px; | |
| right: 16px; | |
| width: 24px; | |
| height: 24px; | |
| cursor: pointer; | |
| display: none; | |
| } | |
| /* Toast styles */ | |
| .toast-container { | |
| position: fixed; | |
| bottom: 24px; | |
| right: 24px; | |
| z-index: 9999; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| max-width: 350px; | |
| } | |
| .toast { | |
| display: flex; | |
| align-items: center; | |
| padding: 16px 20px; | |
| border-radius: var(--radius); | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| box-shadow: var(--shadow-xl); | |
| animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; | |
| position: relative; | |
| overflow: hidden; | |
| border: 1px solid rgba(255, 255, 255, 0.8); | |
| } | |
| .toast.slide-out { | |
| animation: slideOut 0.3s ease-in forwards; | |
| } | |
| .toast-icon { | |
| margin-right: 10px; | |
| flex-shrink: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .toast-content { | |
| flex: 1; | |
| font-size: 14px; | |
| font-weight: 500; | |
| line-height: 1.4; | |
| } | |
| .toast-close { | |
| margin-left: 10px; | |
| cursor: pointer; | |
| opacity: 0.5; | |
| transition: opacity 0.2s; | |
| flex-shrink: 0; | |
| border-radius: 50%; | |
| width: 20px; | |
| height: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .toast-close:hover { | |
| opacity: 1; | |
| background-color: rgba(0, 0, 0, 0.05); | |
| } | |
| .toast-progress { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| height: 2px; | |
| width: 100%; | |
| transform-origin: left; | |
| } | |
| .toast.info { | |
| border-left-color: var(--info-color); | |
| } | |
| .toast.info .toast-icon { | |
| color: var(--info-color); | |
| } | |
| .toast.info .toast-progress { | |
| background-color: var(--info-color); | |
| } | |
| .toast.success .toast-icon { | |
| color: var(--success-color); | |
| } | |
| .toast.success .toast-progress { | |
| background-color: var(--success-color); | |
| } | |
| .toast.warning .toast-icon { | |
| color: var(--warning-color); | |
| } | |
| .toast.warning .toast-progress { | |
| background-color: var(--warning-color); | |
| } | |
| .toast.error .toast-icon { | |
| color: var(--error-color); | |
| } | |
| .toast.error .toast-progress { | |
| background-color: var(--error-color); | |
| } | |
| @keyframes slideIn { | |
| from { | |
| transform: translateX(100%); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes slideOut { | |
| from { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| to { | |
| transform: translateX(100%); | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes shrink { | |
| from { | |
| transform: scaleX(1); | |
| } | |
| to { | |
| transform: scaleX(0); | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| body { | |
| flex-direction: column; | |
| } | |
| .mobile-header { | |
| display: flex; | |
| flex-shrink: 0; | |
| } | |
| .sidebar { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 280px; | |
| border-right: 1px solid var(--border-color); | |
| padding: 24px 16px; | |
| height: 100vh; | |
| transform: translateX(-100%); | |
| } | |
| .sidebar.active { | |
| transform: translateX(0); | |
| } | |
| .close-sidebar { | |
| display: block; | |
| } | |
| .logo { | |
| display: block; | |
| } | |
| .players-container { | |
| flex-direction: column; | |
| } | |
| .main-content { | |
| height: calc(100vh - 57px); | |
| overflow-y: auto; | |
| } | |
| .toast-container { | |
| bottom: auto; | |
| top: 16px; | |
| right: 16px; | |
| left: 16px; | |
| max-width: none; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| transform: translateY(-100%); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes slideOut { | |
| from { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| to { | |
| transform: translateY(-100%); | |
| opacity: 0; | |
| } | |
| } | |
| } | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--light-gray); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(120, 120, 120, 0.5); | |
| border-radius: 4px; | |
| transition: background 0.2s ease; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: rgba(100, 100, 100, 0.7); | |
| } | |
| /* Firefox scrollbar */ | |
| * { | |
| scrollbar-width: thin; | |
| scrollbar-color: rgba(120, 120, 120, 0.5) var(--light-gray); | |
| } | |
| /* For Edge and other browsers */ | |
| ::-webkit-scrollbar-corner { | |
| background: var(--light-gray); | |
| } | |
| /* Ensure smooth scrolling */ | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| /* Dark mode styles */ | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --primary-color: #818cf8; | |
| --primary-hover: #6366f1; | |
| --primary-light: rgba(129, 140, 248, 0.15); | |
| --secondary-color: #1e1b2e; | |
| --text-color: #f1f5f9; | |
| --text-secondary: #94a3b8; | |
| --light-gray: #1e1b2e; | |
| --border-color: #334155; | |
| --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); | |
| --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4); | |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4); | |
| --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5); | |
| --gradient-primary: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%); | |
| --gradient-primary-hover: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); | |
| --success-color: #34d399; | |
| --info-color: #60a5fa; | |
| --warning-color: #fbbf24; | |
| --error-color: #f87171; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #0f0d1a 0%, #1a1625 100%); | |
| color: var(--text-color); | |
| } | |
| .sidebar { | |
| background: rgba(30, 27, 46, 0.8); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border-right-color: rgba(255, 255, 255, 0.05); | |
| } | |
| .main-content-inner { | |
| background: rgba(30, 27, 46, 0.6); | |
| border-color: rgba(255, 255, 255, 0.05); | |
| } | |
| .player { | |
| background: rgba(30, 27, 46, 0.8); | |
| border-color: var(--border-color); | |
| } | |
| .nav-item.active { | |
| background-color: rgba(108, 99, 255, 0.2); | |
| } | |
| .nav-item:hover:not(.active) { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| } | |
| .text-input, | |
| .select-input, | |
| .textarea { | |
| background-color: var(--light-gray); | |
| color: var(--text-color); | |
| border-color: var(--border-color); | |
| } | |
| .card { | |
| background-color: var(--light-gray); | |
| border-color: var(--border-color); | |
| } | |
| .tab.active::after { | |
| background-color: var(--primary-color); | |
| } | |
| /* Fix vote buttons in dark mode */ | |
| .vote-btn { | |
| background-color: var(--light-gray); | |
| color: var(--text-color); | |
| border-color: var(--border-color); | |
| border-radius: var(--radius); | |
| } | |
| .vote-btn:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| border-color: var(--border-color); | |
| } | |
| .vote-btn.selected { | |
| background-color: var(--primary-color); | |
| color: white; | |
| border-color: var(--primary-color); | |
| } | |
| .shortcut-key { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| color: var(--text-color); | |
| border-color: var(--border-color); | |
| } | |
| .vote-btn.selected .shortcut-key { | |
| background-color: rgba(255, 255, 255, 0.2); | |
| color: white; | |
| border-color: transparent; | |
| } | |
| /* Fix loading state in dark mode */ | |
| .vote-btn:disabled, | |
| .vote-btn.loading { | |
| background-color: var(--light-gray); | |
| border-radius: var(--radius); | |
| } | |
| .vote-loader { | |
| background-color: var(--light-gray); | |
| border-radius: var(--radius); | |
| } | |
| .vote-spinner { | |
| border-color: rgba(108, 99, 255, 0.3); | |
| border-top-color: var(--primary-color); | |
| } | |
| .toast { | |
| background-color: var(--light-gray); | |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); | |
| } | |
| .toast-close:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--secondary-color); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(180, 180, 180, 0.5); | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: rgba(200, 200, 200, 0.7); | |
| } | |
| * { | |
| scrollbar-color: rgba(180, 180, 180, 0.5) var(--secondary-color); | |
| } | |
| ::-webkit-scrollbar-corner { | |
| background: var(--secondary-color); | |
| } | |
| /* Dark mode loading overlay */ | |
| .loading-overlay { | |
| background-color: rgba(18, 18, 24, 0.8); | |
| } | |
| /* Dark mode spinner */ | |
| .loader-spinner { | |
| border-color: rgba(108, 99, 255, 0.2); | |
| border-top-color: var(--primary-color); | |
| } | |
| /* Dark mode user dropdown */ | |
| .user-dropdown { | |
| background-color: var(--light-gray); | |
| border-color: var(--border-color); | |
| } | |
| .dropdown-item { | |
| color: var(--text-color); | |
| } | |
| .dropdown-item:hover { | |
| background-color: rgba(108, 99, 255, 0.1); | |
| } | |
| .dropdown-divider { | |
| background-color: var(--border-color); | |
| } | |
| .user-avatar { | |
| background-color: var(--primary-color); | |
| } | |
| } | |
| /* Loading Overlay */ | |
| .loading-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(255, 255, 255, 0.8); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 9999; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: opacity 0.3s ease, visibility 0.3s ease; | |
| } | |
| .loading-overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .loader-spinner { | |
| width: 50px; | |
| height: 50px; | |
| border: 3px solid rgba(80, 70, 229, 0.3); | |
| border-radius: 50%; | |
| border-top-color: var(--primary-color); | |
| animation: spin 1s ease-in-out infinite; | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* Login tip and banner removed */ | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Loading Overlay --> | |
| <div id="loading-overlay" class="loading-overlay"> | |
| <div class="loader-spinner"></div> | |
| </div> | |
| <div class="mobile-header"> | |
| <div class="hamburger-menu" onclick="toggleSidebar()"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
| </svg> | |
| </div> | |
| <div class="current-page">{% block current_page %}Arena{% endblock %}</div> | |
| </div> | |
| <div class="backdrop" onclick="toggleSidebar()"></div> | |
| <div class="sidebar"> | |
| <div class="close-sidebar" onclick="toggleSidebar()"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
| </svg> | |
| </div> | |
| <div class="logo-container"> | |
| <div class="logo">한국어 TTS 아레나</div> | |
| <div class="supported-by"> | |
| <span>supported by</span> | |
| <a href="https://channel.io/ko" target="_blank" rel="noopener noreferrer" class="channel-link"> | |
| <img src="{{ url_for('static', filename='channeltalk-logo-kr.svg') }}" alt="채널톡" class="channel-logo-img"> | |
| </a> | |
| </div> | |
| </div> | |
| <nav> | |
| <a href="{{ url_for('arena') }}" class="nav-item {% if request.path == '/' %}active{% endif %}"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-dices"><rect width="12" height="12" x="2" y="10" rx="2" ry="2"/><path d="m17.92 14 3.5-3.5a2.24 2.24 0 0 0 0-3l-5-4.92a2.24 2.24 0 0 0-3 0L10 6"/><path d="M6 18h.01"/><path d="M10 14h.01"/><path d="M15 6h.01"/><path d="M18 9h.01"/></svg> | |
| Arena | |
| </a> | |
| <a href="{{ url_for('leaderboard') }}" class="nav-item {% if request.path == '/leaderboard' %}active{% endif %}"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trophy"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></svg> | |
| Leaderboard | |
| </a> | |
| <a href="{{ url_for('about') }}" class="nav-item {% if request.path == '/about' %}active{% endif %}"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg> | |
| About | |
| </a> | |
| <!-- Admin Panel Link - Only visible to admin users --> | |
| {% if g.is_admin %} | |
| <a href="{{ url_for('admin.index') }}" class="nav-item {% if '/admin' in request.path %}active{% endif %}"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/></svg> | |
| Admin Panel | |
| </a> | |
| {% endif %} | |
| </nav> | |
| <div class="sidebar-footer"> | |
| {% if current_user.is_authenticated %} | |
| <div class="user-auth" onclick="toggleUserDropdown(event)"> | |
| <div class="user-name">{{ current_user.username }}</div> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="user-auth-arrow"> | |
| <polyline points="6 9 12 15 18 9"></polyline> | |
| </svg> | |
| <div class="user-dropdown"> | |
| <a href="{{ url_for('auth.logout') }}" class="dropdown-item"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path> | |
| <polyline points="16 17 21 12 16 7"></polyline> | |
| <line x1="21" y1="12" x2="9" y2="12"></line> | |
| </svg> | |
| Logout | |
| </a> | |
| </div> | |
| </div> | |
| {% else %} | |
| <!-- Login removed --> | |
| {% endif %} | |
| </div> | |
| </div> | |
| <div class="main-content"> | |
| <!-- Flash messages --> | |
| {% with messages = get_flashed_messages(with_categories=true) %} | |
| {% if messages %} | |
| <div class="flash-messages"> | |
| {% for category, message in messages %} | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function () { | |
| openToast('{{ message }}', '{{ category }}'); | |
| }); | |
| </script> | |
| {% endfor %} | |
| </div> | |
| {% endif %} | |
| {% endwith %} | |
| <div class="main-content-inner"> | |
| {% block content %}{% endblock %} | |
| </div> | |
| </div> | |
| <!-- Toast container --> | |
| <div class="toast-container" id="toast-container"></div> | |
| <!-- Mobile login banner removed --> | |
| {% block extra_scripts %}{% endblock %} | |
| <script src="https://unpkg.com/@popperjs/core@2"></script> | |
| <script> | |
| function toggleSidebar() { | |
| const sidebar = document.querySelector('.sidebar'); | |
| const backdrop = document.querySelector('.backdrop'); | |
| sidebar.classList.toggle('active'); | |
| backdrop.classList.toggle('active'); | |
| } | |
| function toggleUserDropdown(event) { | |
| event.stopPropagation(); | |
| const userAuth = document.querySelector('.user-auth'); | |
| const userDropdown = document.querySelector('.user-dropdown'); | |
| userAuth.classList.toggle('active'); | |
| userDropdown.classList.toggle('active'); | |
| } | |
| // Login tip functions removed | |
| // Loading overlay functionality | |
| document.addEventListener('DOMContentLoaded', function () { | |
| // Hide the loading overlay when page has loaded | |
| const loadingOverlay = document.getElementById('loading-overlay'); | |
| loadingOverlay.classList.remove('active'); | |
| // Override fetch to handle Turnstile verification errors | |
| const originalFetch = window.fetch; | |
| window.fetch = async function (url, options) { | |
| try { | |
| const response = await originalFetch(url, options); | |
| // If we get a 403 error with a specific error message, handle verification | |
| if (response.status === 403) { | |
| const data = await response.clone().json(); | |
| if (data && (data.error === "Turnstile verification required" || data.error === "Turnstile verification expired")) { | |
| // Redirect to Turnstile verification page with the current URL as the redirect target | |
| window.location.href = "/turnstile?redirect_url=" + encodeURIComponent(window.location.href); | |
| return new Response(JSON.stringify({ redirecting: true }), { | |
| status: 200, | |
| headers: { 'Content-Type': 'application/json' } | |
| }); | |
| } | |
| } | |
| return response; | |
| } catch (error) { | |
| return Promise.reject(error); | |
| } | |
| }; | |
| }); | |
| // Close dropdown when clicking outside | |
| document.addEventListener('click', function (event) { | |
| const userDropdown = document.querySelector('.user-dropdown'); | |
| const userAuth = document.querySelector('.user-auth'); | |
| if (userDropdown && userAuth && userDropdown.classList.contains('active') && !userAuth.contains(event.target)) { | |
| userAuth.classList.remove('active'); | |
| userDropdown.classList.remove('active'); | |
| } | |
| }); | |
| // Toast functionality | |
| function openToast(message, type = 'info', duration = 5000) { | |
| const toastContainer = document.getElementById('toast-container'); | |
| const toast = document.createElement('div'); | |
| toast.className = `toast ${type}`; | |
| // Generate icon based on type | |
| let iconSvg = ''; | |
| if (type === 'info') { | |
| iconSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>'; | |
| } else if (type === 'success') { | |
| iconSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>'; | |
| } else if (type === 'warning') { | |
| iconSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12" y2="17"/></svg>'; | |
| } else if (type === 'error') { | |
| iconSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>'; | |
| } | |
| toast.innerHTML = ` | |
| <div class="toast-icon">${iconSvg}</div> | |
| <div class="toast-content">${message}</div> | |
| <div class="toast-close" onclick="closeToast(this.parentNode)"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <line x1="18" y1="6" x2="6" y2="18"></line> | |
| <line x1="6" y1="6" x2="18" y2="18"></line> | |
| </svg> | |
| </div> | |
| <div class="toast-progress"></div> | |
| `; | |
| toastContainer.appendChild(toast); | |
| // Animate progress bar | |
| const progressBar = toast.querySelector('.toast-progress'); | |
| progressBar.style.animation = `shrink ${duration / 1000}s linear forwards`; | |
| progressBar.style.transformOrigin = 'left'; | |
| progressBar.style.transform = 'scaleX(1)'; | |
| // Auto-remove toast after duration | |
| const timeoutId = setTimeout(() => { | |
| closeToast(toast); | |
| }, duration); | |
| // Store timeout ID on the toast element | |
| toast.dataset.timeoutId = timeoutId; | |
| return toast; | |
| } | |
| function closeToast(toast) { | |
| // Clear the timeout to prevent duplicate removal attempts | |
| if (toast.dataset.timeoutId) { | |
| clearTimeout(parseInt(toast.dataset.timeoutId)); | |
| } | |
| // Add slide-out animation | |
| toast.classList.add('slide-out'); | |
| // Remove toast after animation completes | |
| setTimeout(() => { | |
| if (toast.parentNode) { | |
| toast.parentNode.removeChild(toast); | |
| } | |
| }, 300); | |
| } | |
| </script> | |
| </body> | |
| </html> |