Hugging Face's logo

Spaces:
tts-api
/
Edge_TTS
Sleeping

App Files Community
7
tts-api commited on
Commit
3329aef
·
verified ·
1 Parent(s): 58240b7

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +15 -12
index.html CHANGED
@@ -1,9 +1,9 @@
1
  <!DOCTYPE html>
2
- <html lang="ar" dir="rtl">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Text to Speech</title>
7
  <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap" rel="stylesheet">
8
  <style>
9
  * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -12,7 +12,6 @@
12
  font-family: 'Tajawal', sans-serif;
13
  background: linear-gradient(135deg, #000000 0%, #0a0a2e 50%, #0d1b4b 100%);
14
  min-height: 100vh;
15
- min-height: 100vh;
16
  display: flex;
17
  align-items: center;
18
  justify-content: center;
@@ -30,7 +29,7 @@
30
  }
31
 
32
  h1 {
33
- color: #7c6bff;
34
  font-size: 28px;
35
  margin-bottom: 8px;
36
  text-align: center;
@@ -56,15 +55,18 @@
56
  resize: vertical;
57
  outline: none;
58
  transition: border-color 0.3s;
 
 
59
  }
60
 
61
- textarea:focus { border-color: #7c6bff; }
62
 
63
  .controls {
64
  display: grid;
65
  grid-template-columns: 1fr 1fr 1fr;
66
  gap: 16px;
67
  margin: 20px 0;
 
68
  }
69
 
70
  .control-group label {
@@ -72,6 +74,7 @@
72
  color: #888;
73
  font-size: 13px;
74
  margin-bottom: 8px;
 
75
  }
76
 
77
  select {
@@ -86,13 +89,15 @@
86
  outline: none;
87
  cursor: pointer;
88
  transition: border-color 0.3s;
 
 
89
  }
90
 
91
- select:focus { border-color: #7c6bff; }
92
 
93
  button {
94
  width: 100%;
95
- background: linear-gradient(135deg, #7c6bff, #5b4de8);
96
  color: white;
97
  border: none;
98
  border-radius: 12px;
@@ -105,7 +110,7 @@
105
  margin-top: 10px;
106
  }
107
 
108
- button:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(124,107,255,0.4); }
109
  button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
110
 
111
  .status {
@@ -117,7 +122,7 @@
117
  display: none;
118
  }
119
 
120
- .status.loading { background: #1e1e3a; color: #7c6bff; display: block; }
121
  .status.success { background: #0d2a1a; color: #4caf50; display: block; }
122
  .status.error { background: #2a0d0d; color: #f44336; display: block; }
123
 
@@ -127,13 +132,11 @@
127
  display: none;
128
  border-radius: 10px;
129
  }
130
-
131
- audio::-webkit-media-controls-panel { background: #1a1a2e; }
132
  </style>
133
  </head>
134
  <body>
135
  <div class="container">
136
- <h1> Text to Speech</h1>
137
 
138
  <textarea id="text" placeholder="Enter the text"></textarea>
139
 
 
1
  <!DOCTYPE html>
2
+ <html lang="en" dir="ltr">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Text To Speech</title>
7
  <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap" rel="stylesheet">
8
  <style>
9
  * { margin: 0; padding: 0; box-sizing: border-box; }
 
12
  font-family: 'Tajawal', sans-serif;
13
  background: linear-gradient(135deg, #000000 0%, #0a0a2e 50%, #0d1b4b 100%);
14
  min-height: 100vh;
 
15
  display: flex;
16
  align-items: center;
17
  justify-content: center;
 
29
  }
30
 
31
  h1 {
32
+ color: #4a9eff;
33
  font-size: 28px;
34
  margin-bottom: 8px;
35
  text-align: center;
 
55
  resize: vertical;
56
  outline: none;
57
  transition: border-color 0.3s;
58
+ direction: ltr;
59
+ text-align: left;
60
  }
61
 
62
+ textarea:focus { border-color: #4a9eff; }
63
 
64
  .controls {
65
  display: grid;
66
  grid-template-columns: 1fr 1fr 1fr;
67
  gap: 16px;
68
  margin: 20px 0;
69
+ direction: ltr;
70
  }
71
 
72
  .control-group label {
 
74
  color: #888;
75
  font-size: 13px;
76
  margin-bottom: 8px;
77
+ text-align: left;
78
  }
79
 
80
  select {
 
89
  outline: none;
90
  cursor: pointer;
91
  transition: border-color 0.3s;
92
+ direction: ltr;
93
+ text-align: left;
94
  }
95
 
96
+ select:focus { border-color: #4a9eff; }
97
 
98
  button {
99
  width: 100%;
100
+ background: linear-gradient(135deg, #1a4a8a, #0d2d6b);
101
  color: white;
102
  border: none;
103
  border-radius: 12px;
 
110
  margin-top: 10px;
111
  }
112
 
113
+ button:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(74,158,255,0.4); }
114
  button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
115
 
116
  .status {
 
122
  display: none;
123
  }
124
 
125
+ .status.loading { background: #1e1e3a; color: #4a9eff; display: block; }
126
  .status.success { background: #0d2a1a; color: #4caf50; display: block; }
127
  .status.error { background: #2a0d0d; color: #f44336; display: block; }
128
 
 
132
  display: none;
133
  border-radius: 10px;
134
  }
 
 
135
  </style>
136
  </head>
137
  <body>
138
  <div class="container">
139
+ <h1>Text To Speech</h1>
140
 
141
  <textarea id="text" placeholder="Enter the text"></textarea>
142