UI wip

3 years ago · e65e4875e7
parent 5969005015
commit e65e4875e7
3 changed files with 30 additions and 7 deletions
--- a/speech/index.html
+++ b/speech/index.html
@ -10,6 +10,7 @@
 </head>
 <body>
    <div class="ui">
        <h1>Speech2Design</h1>
        <button id="save">Save</button>
        <button id="reset">Reset</button>
    </div>
--- a/speech/index.js
+++ b/speech/index.js
@ -116,11 +116,13 @@ function startConverting() {
 					"> ${interimTranscripts} </span> `;
 				}
 			}
 			process.innerHTML = allTheInterim;
 			let final =
 				finalTranscripts + '<span class="interim">' + interimTranscripts + "</span>";
 			speech.innerHTML = final;
 			window.scrollTo(0, document.body.scrollHeight);
 			textStorage = final;
 			cleanup = localStorage.setItem(
--- 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;
+	position: fixed;
-	text-align: right;
+	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 {