diff --git a/speech/index.html b/speech/index.html
index e28df1e..bc83635 100644
--- a/speech/index.html
+++ b/speech/index.html
@@ -10,6 +10,7 @@
+
Speech2Design
diff --git a/speech/index.js b/speech/index.js
index 139a070..344b28c 100644
--- a/speech/index.js
+++ b/speech/index.js
@@ -116,11 +116,13 @@ function startConverting() {
"> ${interimTranscripts} `;
}
}
+
process.innerHTML = allTheInterim;
let final =
finalTranscripts + '' + interimTranscripts + "";
speech.innerHTML = final;
+ window.scrollTo(0, document.body.scrollHeight);
textStorage = final;
cleanup = localStorage.setItem(
diff --git a/speech/style.css b/speech/style.css
index 7dc1782..8a602b2 100644
--- a/speech/style.css
+++ b/speech/style.css
@@ -1,6 +1,7 @@
html,
body {
margin: 0;
+ scroll-behavior: smooth;
}
.interim {
@@ -9,31 +10,50 @@ body {
#result {
font-size: 2rem;
+ padding-right: 1em;
+ align-self: flex-end;
}
.speech {
- display: flex;
margin: 0 auto;
- padding: 16px;
+ margin-top: 64px;
+ padding: 32px;
+ display: flex;
+ transition: height 0.3s ease-out;
}
.speech > * {
- flex: 1 0 50%;
+ flex: 1 0 45%;
}
.ui {
- padding: 16px;
- text-align: right;
+ position: fixed;
+ background-color: white;
+ top: 0;
+ z-index: 100;
+ width: calc(100% - 64px);
+ display: flex;
+
+ padding: 8px 0;
+ margin: 0 32px;
+}
+
+.ui h1 {
+ margin: 0;
+ font-size: 2rem;
+ font-weight: normal;
+ margin-right: auto;
}
#save {
border: 1px solid currentColor;
- border-radius: 1rem;
+ border-radius: 2rem;
font-size: 1rem;
- padding: 0.25em 0.5em;
+ padding: 0.5em;
font-family: Arial, Helvetica, sans-serif;
background-color: transparent;
cursor: pointer;
+ margin-right: 1rem;
}
#save:hover {