Spaces:
Sleeping
Sleeping
TheM1N9
Refactor authentication handling and enhance UI components. Removed authentication check from segment regeneration function. Updated login form to include tabbed interface for login and signup, improved styling with transitions and animations, and added new elements for better user experience.
6f51f68
| body { | |
| font-family: "Inter", -apple-system, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); | |
| min-height: 100vh; | |
| color: #ffffff; | |
| } | |
| .hero { | |
| text-align: center; | |
| padding: 60px 20px; | |
| background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), | |
| url("/static/hero-bg.jpg"); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .hero h1 { | |
| font-size: 3em; | |
| margin-bottom: 20px; | |
| background: linear-gradient(45deg, #4caf50, #45a049); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .hero p { | |
| font-size: 1.2em; | |
| max-width: 600px; | |
| margin: 0 auto 30px; | |
| color: #cccccc; | |
| } | |
| .container { | |
| max-width: 1000px; | |
| margin: -50px auto 0; | |
| padding: 20px; | |
| position: relative; | |
| } | |
| .card { | |
| background: rgba(36, 36, 36, 0.95); | |
| border-radius: 15px; | |
| padding: 30px; | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); | |
| backdrop-filter: blur(10px); | |
| } | |
| .features { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| margin: 40px 0; | |
| } | |
| .feature { | |
| text-align: center; | |
| padding: 20px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 10px; | |
| } | |
| .feature i { | |
| font-size: 2em; | |
| color: #4caf50; | |
| margin-bottom: 15px; | |
| } | |
| .upload-section { | |
| text-align: center; | |
| padding: 40px 20px; | |
| border: 2px dashed #444; | |
| border-radius: 15px; | |
| margin: 20px 0; | |
| transition: all 0.3s ease; | |
| } | |
| .upload-section:hover { | |
| border-color: #4caf50; | |
| } | |
| .voice-inputs { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 20px; | |
| margin: 20px 0; | |
| } | |
| .input-group { | |
| background: rgba(255, 255, 255, 0.05); | |
| padding: 15px; | |
| border-radius: 10px; | |
| } | |
| .input-group input { | |
| width: 90%; | |
| padding: 12px; | |
| border-radius: 8px; | |
| border: 1px solid #444; | |
| background: #333; | |
| color: white; | |
| transition: all 0.3s ease; | |
| } | |
| .input-group input:focus { | |
| border-color: #4caf50; | |
| outline: none; | |
| } | |
| button { | |
| background: linear-gradient(45deg, #4caf50, #45a049); | |
| color: white; | |
| padding: 15px 30px; | |
| border: none; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| font-size: 1.1em; | |
| transition: transform 0.2s ease; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| button:disabled { | |
| opacity: 0.7; | |
| cursor: wait; | |
| } | |
| button:hover { | |
| transform: translateY(-2px); | |
| } | |
| .audio-container { | |
| background: rgba(51, 51, 51, 0.8); | |
| border-radius: 15px; | |
| padding: 20px; | |
| margin-top: 30px; | |
| } | |
| .audio-container h3 { | |
| margin: 0; | |
| display: inline-block; | |
| margin-right: 20px; | |
| vertical-align: middle; | |
| } | |
| .audio-container audio { | |
| vertical-align: middle; | |
| flex: 1; | |
| } | |
| .audio-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| } | |
| .progress-steps { | |
| display: flex; | |
| justify-content: space-between; | |
| margin: 40px 0; | |
| position: relative; | |
| } | |
| .step { | |
| text-align: center; | |
| flex: 1; | |
| position: relative; | |
| } | |
| .step-number { | |
| width: 30px; | |
| height: 30px; | |
| background: #333; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto 10px; | |
| } | |
| .step.active .step-number { | |
| background: #4caf50; | |
| } | |
| @media (max-width: 768px) { | |
| .hero h1 { | |
| font-size: 2em; | |
| } | |
| .container { | |
| margin-top: -30px; | |
| } | |
| .features { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .loader { | |
| display: none; | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| .spinner { | |
| width: 50px; | |
| height: 50px; | |
| border: 5px solid #f3f3f3; | |
| border-top: 5px solid #4caf50; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto 15px; | |
| } | |
| @keyframes spin { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .audio-container { | |
| display: none; | |
| } | |
| .segments-container { | |
| margin-top: 30px; | |
| padding: 20px; | |
| background: rgba(51, 51, 51, 0.8); | |
| border-radius: 15px; | |
| } | |
| .segment { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| padding: 20px; | |
| margin: 10px 0; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 8px; | |
| } | |
| .segment-info { | |
| width: 100%; | |
| } | |
| .segment-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 8px; | |
| } | |
| .segment-speaker { | |
| font-weight: bold; | |
| color: #4caf50; | |
| } | |
| .segment-text { | |
| color: #ccc; | |
| line-height: 1.5; | |
| position: relative; | |
| /* white-space: pre-wrap; */ | |
| } | |
| .segment-text-content { | |
| white-space: pre-wrap; | |
| } | |
| .segment-text textarea { | |
| width: 97.5%; | |
| min-height: 100px; | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid #444; | |
| border-radius: 4px; | |
| color: #fff; | |
| padding: 10px; | |
| font-family: inherit; | |
| font-size: inherit; | |
| line-height: inherit; | |
| resize: vertical; | |
| } | |
| .edit-controls { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .edit-btn, | |
| .save-btn, | |
| .cancel-btn { | |
| padding: 5px 10px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 0.9em; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .edit-btn { | |
| background: transparent; | |
| border: 1px solid #4caf50; | |
| color: #4caf50; | |
| padding: 5px 10px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 0.9em; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .edit-btn:hover { | |
| background: rgba(76, 175, 80, 0.1); | |
| } | |
| .save-btn { | |
| background: #4caf50; | |
| border: none; | |
| color: white; | |
| } | |
| .cancel-btn { | |
| background: #666; | |
| border: none; | |
| color: white; | |
| } | |
| .segment audio { | |
| flex-grow: 1; | |
| min-width: 200px; | |
| } | |
| .regenerate-btn { | |
| padding: 8px 15px; | |
| background: #4caf50; | |
| border: none; | |
| border-radius: 4px; | |
| color: white; | |
| cursor: pointer; | |
| } | |
| .regenerate-btn:hover { | |
| background: #45a049; | |
| } | |
| .segments-summary { | |
| font-size: 1.2em; | |
| font-weight: bold; | |
| cursor: pointer; | |
| padding: 10px 0; | |
| user-select: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .segments-summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| .segments-summary i { | |
| transition: transform 0.3s ease; | |
| } | |
| details[open] .segments-summary i { | |
| transform: rotate(90deg); | |
| } | |
| .segment-count { | |
| font-size: 0.8em; | |
| color: #888; | |
| margin-left: auto; | |
| } | |
| #segments-list { | |
| margin-top: 20px; | |
| } | |
| .regenerate-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| min-width: 120px; | |
| justify-content: center; | |
| } | |
| .regenerate-btn:disabled { | |
| opacity: 0.7; | |
| cursor: not-allowed; | |
| } | |
| .regenerate-btn i { | |
| font-size: 14px; | |
| } | |
| @keyframes spin { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .fa-spin { | |
| animation: spin 1s linear infinite; | |
| } | |
| .segment-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .segment-controls audio { | |
| flex: 1; | |
| } | |
| .segment-controls .regenerate-btn { | |
| flex-shrink: 0; | |
| } | |
| form button[type="submit"] { | |
| width: 100%; | |
| margin-top: 20px; | |
| } | |
| .upload-section button { | |
| margin: 0 auto; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: auto; | |
| } | |
| .login-container { | |
| height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); | |
| } | |
| .login-card { | |
| background: rgba(36, 36, 36, 0.95); | |
| padding: 30px; | |
| border-radius: 15px; | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); | |
| backdrop-filter: blur(10px); | |
| width: 100%; | |
| max-width: 400px; | |
| transition: all 0.3s ease; | |
| } | |
| .login-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); | |
| } | |
| .auth-tabs { | |
| display: flex; | |
| margin-bottom: 30px; | |
| gap: 10px; | |
| } | |
| .tab-btn { | |
| flex: 1; | |
| padding: 15px; | |
| background: transparent; | |
| border: none; | |
| color: #cccccc; | |
| cursor: pointer; | |
| font-size: 1.1em; | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| } | |
| .tab-btn:hover { | |
| color: #4caf50; | |
| background: rgba(76, 175, 80, 0.1); | |
| } | |
| .tab-btn.active { | |
| color: #4caf50; | |
| border-bottom: 2px solid #4caf50; | |
| } | |
| .tab-content { | |
| display: none; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .login-card h2 { | |
| text-align: center; | |
| color: #4caf50; | |
| margin-bottom: 30px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| .login-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .input-group { | |
| position: relative; | |
| } | |
| .input-group label { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-bottom: 8px; | |
| color: #cccccc; | |
| } | |
| .input-group input { | |
| width: 100%; | |
| padding: 12px; | |
| padding-left: 15px; | |
| border-radius: 8px; | |
| border: 1px solid #444; | |
| background: #333; | |
| color: white; | |
| transition: all 0.3s ease; | |
| font-size: 1em; | |
| box-sizing: border-box; | |
| } | |
| .input-group input:focus { | |
| border-color: #4caf50; | |
| outline: none; | |
| box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2); | |
| } | |
| .input-group input::placeholder { | |
| color: #666; | |
| } | |
| .signup-section { | |
| text-align: center; | |
| padding: 30px 0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 20px; | |
| } | |
| .signup-section i.fa-3x { | |
| color: #4caf50; | |
| margin-bottom: 10px; | |
| } | |
| .signup-section p { | |
| margin: 0; | |
| color: #cccccc; | |
| font-size: 1.1em; | |
| } | |
| .contact-text span { | |
| color: #4caf50; | |
| text-decoration: none; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| transition: all 0.3s ease; | |
| } | |
| .contact-text a:hover { | |
| color: #45a049; | |
| text-decoration: none; | |
| transform: translateY(-2px); | |
| } | |