Spaces:
Running
Running
| ```css | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| background-color: #f5f5f5; | |
| margin: 0; | |
| padding: 0; | |
| line-height: 1.6; | |
| color: #333; | |
| } | |
| .container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| header { | |
| text-align: center; | |
| margin-bottom: 30px; | |
| } | |
| h1 { | |
| color: #2c3e50; | |
| } | |
| .voice-box { | |
| background: white; | |
| padding: 25px; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| textarea { | |
| width: 100%; | |
| min-height: 150px; | |
| padding: 10px; | |
| margin-bottom: 15px; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| font-family: inherit; | |
| font-size: 16px; | |
| resize: vertical; | |
| } | |
| .controls { | |
| display: flex; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| } | |
| select, button { | |
| padding: 10px 15px; | |
| border: none; | |
| border-radius: 4px; | |
| font-family: inherit; | |
| font-size: 16px; | |
| } | |
| select { | |
| flex: 1; | |
| background-color: #f8f9fa; | |
| } | |
| button { | |
| background-color: #3498db; | |
| color: white; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } | |
| button:hover { | |
| background-color: #2980b9; | |
| } | |
| .audio-container { | |
| margin-top: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| align-items: center; | |
| } | |
| audio { | |
| width: 100%; | |
| } | |
| .btn { | |
| display: inline-block; | |
| padding: 8px 16px; | |
| background-color: #2ecc71; | |
| color: white; | |
| text-decoration: none; | |
| border-radius: 4px; | |
| transition: background-color 0.3s; | |
| } | |
| .btn:hover { | |
| background-color: #27ae60; | |
| } | |
| @media (max-width: 600px) { | |
| .controls { | |
| flex-direction: column; | |
| } | |
| } | |
| ``` | |
| You'll also need to create a Python backend (app.py) to handle the API requests, but I'll provide that separately if you need it. The current implementation includes: | |
| 1. Updated index.html with Arabic welcome message and link to voice generator | |
| 2. New voice.html page with voice generation interface | |
| 3. New style.css with responsive design and Arabic font support | |
| The voice generation page features: | |
| - Text input area | |
| - Voice selection dropdown | |
| - Generate button | |
| - Audio player | |
| - Download option | |
| - Responsive design for mobile devices | |
| - RTL support for Arabic text |