Spaces:
Running
Running
Update main.ts
Browse files
main.ts
CHANGED
|
@@ -132,7 +132,114 @@ async function handleDemoRequest(req: Request) {
|
|
| 132 |
<meta charset="UTF-8" />
|
| 133 |
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 134 |
<title>tts</title>
|
| 135 |
-
<style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 136 |
</head>
|
| 137 |
<body>
|
| 138 |
<div class="container">
|
|
|
|
| 132 |
<meta charset="UTF-8" />
|
| 133 |
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 134 |
<title>tts</title>
|
| 135 |
+
<style>
|
| 136 |
+
body {
|
| 137 |
+
background-color: #121212;
|
| 138 |
+
color: #e0e0e0;
|
| 139 |
+
font-family: Arial, sans-serif;
|
| 140 |
+
margin: 0;
|
| 141 |
+
padding: 20px;
|
| 142 |
+
}
|
| 143 |
+
|
| 144 |
+
.container {
|
| 145 |
+
max-width: 800px;
|
| 146 |
+
margin: 0 auto;
|
| 147 |
+
padding: 20px;
|
| 148 |
+
background-color: #1e1e1e;
|
| 149 |
+
border-radius: 8px;
|
| 150 |
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
| 151 |
+
}
|
| 152 |
+
|
| 153 |
+
.input-area, .output-area {
|
| 154 |
+
margin-bottom: 20px;
|
| 155 |
+
}
|
| 156 |
+
|
| 157 |
+
.slider-container, .textarea-container, .dropdown-container {
|
| 158 |
+
margin-bottom: 20px;
|
| 159 |
+
}
|
| 160 |
+
|
| 161 |
+
label {
|
| 162 |
+
display: block;
|
| 163 |
+
margin-bottom: 8px;
|
| 164 |
+
font-weight: bold;
|
| 165 |
+
}
|
| 166 |
+
|
| 167 |
+
input[type="range"] {
|
| 168 |
+
width: 100%;
|
| 169 |
+
}
|
| 170 |
+
|
| 171 |
+
.slider-value {
|
| 172 |
+
text-align: center;
|
| 173 |
+
margin-top: 8px;
|
| 174 |
+
}
|
| 175 |
+
|
| 176 |
+
textarea {
|
| 177 |
+
max-width: 780px;
|
| 178 |
+
width: calc(100% - 20px);
|
| 179 |
+
height: 100px;
|
| 180 |
+
padding: 10px;
|
| 181 |
+
border: 1px solid #333;
|
| 182 |
+
border-radius: 4px;
|
| 183 |
+
background-color: #2e2e2e;
|
| 184 |
+
color: #e0e0e0;
|
| 185 |
+
resize: none;
|
| 186 |
+
}
|
| 187 |
+
|
| 188 |
+
select {
|
| 189 |
+
width: 100%;
|
| 190 |
+
padding: 10px;
|
| 191 |
+
border: 1px solid #333;
|
| 192 |
+
border-radius: 4px;
|
| 193 |
+
background-color: #2e2e2e;
|
| 194 |
+
color: #e0e0e0;
|
| 195 |
+
}
|
| 196 |
+
|
| 197 |
+
button {
|
| 198 |
+
width: 100%;
|
| 199 |
+
padding: 10px;
|
| 200 |
+
border: none;
|
| 201 |
+
border-radius: 4px;
|
| 202 |
+
background-color: #6200ea;
|
| 203 |
+
color: #fff;
|
| 204 |
+
font-size: 16px;
|
| 205 |
+
cursor: pointer;
|
| 206 |
+
transition: background-color 0.3s;
|
| 207 |
+
}
|
| 208 |
+
|
| 209 |
+
button:hover {
|
| 210 |
+
background-color: #3700b3;
|
| 211 |
+
}
|
| 212 |
+
|
| 213 |
+
h1 {
|
| 214 |
+
font-size: 24px;
|
| 215 |
+
margin-bottom: 20px;
|
| 216 |
+
}
|
| 217 |
+
|
| 218 |
+
a {
|
| 219 |
+
color: #bb86fc;
|
| 220 |
+
text-decoration: none;
|
| 221 |
+
}
|
| 222 |
+
|
| 223 |
+
a:hover {
|
| 224 |
+
text-decoration: underline;
|
| 225 |
+
}
|
| 226 |
+
|
| 227 |
+
#audioPlayerContainer {
|
| 228 |
+
text-align: center; /* Центрируем содержимое контейнера */
|
| 229 |
+
}
|
| 230 |
+
|
| 231 |
+
audio {
|
| 232 |
+
width: 100%;
|
| 233 |
+
max-width: 600px; /* Ограничиваем максимальную ширину плеера */
|
| 234 |
+
margin: 10px 0;
|
| 235 |
+
}
|
| 236 |
+
|
| 237 |
+
a {
|
| 238 |
+
display: block;
|
| 239 |
+
margin: 10px 0;
|
| 240 |
+
}
|
| 241 |
+
</style>
|
| 242 |
+
|
| 243 |
</head>
|
| 244 |
<body>
|
| 245 |
<div class="container">
|