Spaces:
Paused
Paused
File size: 1,594 Bytes
8d1819a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<html>
<head>
<script type="module">
import { store as speechStore } from "/components/chat/speech/speech-store.js";
</script>
</head>
<body>
<div id="progress-bar-box">
<h4 id="progress-bar-h">
<span id="progress-bar-i">|></span><span id="progress-bar"></span>
</h4>
<h4 id="progress-bar-stop-speech" x-data x-cloak x-show="$store.speech.isSpeaking">
<span id="stop-speech" @click="$store.speech.stop()" style="cursor: pointer">Stop Speech</span>
</h4>
</div>
<style>
#progress-bar-box { background-color: var(--color-panel); padding: var(--spacing-sm) var(--spacing-md); padding-bottom: 0; display: flex; justify-content: space-between; z-index: 1001; }
#progress-bar-box h4 { margin: 0 1.2em 0 0; }
#progress-bar-h { color: var(--color-primary); display: flex; align-items: left; justify-content: flex-start; height: 1.2em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-weight: normal; }
#progress-bar-i { font-weight: bold; padding-right: 0.5em; color: var(--color-secondary); }
.shiny-text { background: linear-gradient(to right, var(--color-primary-dark) 20%, var(--color-text) 40%, var(--color-text) 60%, var(--color-primary-dark) 60%); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: shine 1s linear infinite; }
@keyframes shine { to { background-position: -200% center; } }
.light-mode #progress-bar-i { color: var(--color-border-dark); opacity: 0.5; }
</style>
</body>
</html>
|