|
<!DOCTYPE html> |
|
<html lang="en"> |
|
|
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<link rel="icon" |
|
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🗣️</text></svg>"> |
|
<title>ChatTTS Forge Playground</title> |
|
<script type="importmap"> |
|
{ |
|
"imports": { |
|
"preact": "https://cdn.jsdelivr.net/npm/preact@10.22.0/+esm", |
|
"htm": "https://cdn.jsdelivr.net/npm/htm@3.1.1/+esm", |
|
"preact/hooks": "https://cdn.jsdelivr.net/npm/preact@10.22.0/hooks/dist/hooks.module.js", |
|
"axios": "https://cdn.jsdelivr.net/npm/axios@1.7.2/+esm", |
|
"@quik-fe/stand": "https://cdn.jsdelivr.net/npm/@quik-fe/stand@1.1.2/+esm", |
|
"goober": "https://cdn.jsdelivr.net/npm/goober@2.1.14/+esm" |
|
} |
|
} |
|
</script> |
|
<style> |
|
* { |
|
box-sizing: border-box; |
|
padding: 0; |
|
margin: 0; |
|
} |
|
|
|
html { |
|
background-color: #1f1f1f; |
|
color: white; |
|
} |
|
|
|
body { |
|
font-family: sans-serif; |
|
} |
|
|
|
#app { |
|
display: flex; |
|
flex-direction: column; |
|
height: 100vh; |
|
width: 100vw; |
|
position: absolute; |
|
} |
|
|
|
.scrollable { |
|
overflow: auto; |
|
} |
|
|
|
.pg-scrollbar::-webkit-scrollbar { |
|
width: 8px; |
|
} |
|
|
|
.pg-scrollbar::-webkit-scrollbar-track { |
|
background-color: transparent; |
|
} |
|
|
|
.pg-scrollbar::-webkit-scrollbar-thumb { |
|
background-color: rgb(177, 177, 177); |
|
border-radius: 4px; |
|
} |
|
|
|
.pg-scrollbar::-webkit-scrollbar-thumb:hover { |
|
background-color: rgb(220, 220, 220); |
|
} |
|
|
|
.pg-scrollbar::-webkit-scrollbar-thumb:active { |
|
background-color: rgb(160, 160, 160); |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<div id="app"></div> |
|
|
|
<script type="module" src="./index.mjs"> |
|
</script> |
|
</body> |
|
|
|
</html> |
