diff options
| author | yum <yum.food.vr@gmail.com> | 2023-09-09 23:18:32 -0700 |
|---|---|---|
| committer | yum <yum.food.vr@gmail.com> | 2023-09-09 23:18:32 -0700 |
| commit | 9924a141b0b1266671915be12e21df6c8f4c5366 (patch) | |
| tree | 4b29e5e06e2183ab2fe4707ec84786f245f96004 /BrowserSource | |
| parent | ae866f553d3db67030e37ce315707d72982f4063 (diff) | |
Browser source now shows preview text as slightly transparent
Improves viewer experience.
Diffstat (limited to 'BrowserSource')
| -rw-r--r-- | BrowserSource/index.html | 49 |
1 files changed, 39 insertions, 10 deletions
diff --git a/BrowserSource/index.html b/BrowserSource/index.html index 96692cf..28053e3 100644 --- a/BrowserSource/index.html +++ b/BrowserSource/index.html @@ -11,11 +11,33 @@ font-family: 'Noto Sans Mono', monospace; font-size: 96px; font-weight: 3200; - color: #000; + /* xdd */ + /* https://stackoverflow.com/a/55097644 */ + text-shadow: 0.0px 10.0px 0.02px #000, 9.8px 2.1px 0.02px #000, 4.2px + -9.1px 0.02px #000, -8.0px -6.0px 0.02px #000, -7.6px 6.5px 0.02px + #000, 4.8px 8.8px 0.02px #000, 9.6px -2.8px 0.02px #000, -0.7px -10.0px + 0.02px #000, -9.9px -1.5px 0.02px #000, -3.5px 9.4px 0.02px #000, 8.4px + 5.4px 0.02px #000, 7.1px -7.0px 0.02px #000, -5.4px -8.4px 0.02px #000, + -9.4px 3.5px 0.02px #000, 1.4px 9.9px 0.02px #000, 10.0px 0.8px 0.02px + #000, 2.9px -9.6px 0.02px #000, -8.7px -4.8px 0.02px #000, -6.6px 7.5px + 0.02px #000, 5.9px 8.0px 0.02px #000, 9.1px -4.1px 0.02px #000, -2.1px + -9.8px 0.02px #000, -10.0px -0.1px 0.02px #000, -2.2px 9.8px 0.02px #000, + 9.1px 4.2px 0.02px #000, 6.1px -8.0px 0.02px #000, -6.5px -7.6px 0.02px + #000, -8.8px 4.7px 0.02px #000, 2.7px 9.6px 0.02px #000, 10.0px -0.6px + 0.02px #000, 1.5px -9.9px 0.02px #000, -9.3px -3.6px 0.02px #000, -5.5px + 8.4px 0.02px #000, 7.0px 7.2px 0.02px #000, 8.5px -5.3px 0.02px #000, + -3.4px -9.4px 0.02px #000, -9.9px 1.3px 0.02px #000, -0.8px 10.0px 0.02px + #000, 9.6px 2.9px 0.02px #000, 4.9px -8.7px 0.02px #000, -7.5px -6.7px + 0.02px #000, -8.1px 5.9px 0.02px #000, 4.0px 9.2px 0.02px #000, 9.8px + -2.0px 0.02px #000, 0.2px -10.0px 0.02px #000, -9.7px -2.3px 0.02px #000, + -4.3px 9.0px 0.02px #000, 7.9px 6.1px 0.02px #000; } - #transcript { - color: #89CFF0; - -webkit-text-stroke: 3.0px #000; + .transcript { + color: white; + } + .preview { + color: white; + opacity: 0.65; } .red_circle { height: 50px; @@ -37,7 +59,7 @@ } </style> <body> - <div id="transcript"></div> + <div id="content"></div> <script> function scrollToBottom() { window.scrollTo(0,document.body.scrollHeight); @@ -49,16 +71,23 @@ dataType: 'json', success: function(data) { var transcript = data.transcript; + var preview = data.preview; var red_circle = '<span class="red_circle"></span>'; var grey_circle = '<span class="grey_circle"></span>'; - var transcript_w_circle = transcript; + + var contentHtml = ''; + contentHtml += '<span class="transcript">' + + transcript + '</span>'; + contentHtml += '<span class="preview">' + + preview + '</span>'; if (data.is_final == 1) { - transcript_w_circle += grey_circle; + contentHtml += grey_circle; } else { - transcript_w_circle += red_circle; + contentHtml += red_circle; } - $('#transcript').html(transcript_w_circle); - $('#transcript').css("background-color", "#00000080"); + + $('#content').html(contentHtml); + $('#content').css("background-color", "#22222280"); }, error: function(jqXHR, textStatus, errorThrown) { console.error('Error getting transcript: ', textStatus, errorThrown); |