voice test

view/chat.js

@@ -0,0 +1,63 @@
+const input = document.getElementById('input');
+const header = document.getElementById('chat-header');
+
+function send(text){
+
+}
+
+header.onclick = ()=>{
+    document.getElementById("chat").classList.toggle("chat--active");
+}
+input.onkeydown = function (e) {
+    if (e.keyCode == 13) {
+        send(input.value);
+    }
+};
+
+//SPEECH RECOGNITION
+window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;
+const recognition = new window.SpeechRecognition();
+
+recognition.continuous = true;
+recognition.lang = "cs-CZ";
+recognition.interimResults = true;
+recognition.maxAlternatives = 1;
+
+var finalTranscripts = '';
+
+recognition.onresult = function (event) {
+    var interimTranscripts = '';
+    for (var i = event.resultIndex; i < event.results.length; i++) {
+        var transcript = event.results[i][0].transcript;
+        
+        if (event.results[i].isFinal) {
+            finalTranscripts += transcript;
+        } else {
+            interimTranscripts += transcript;
+        }
+    }
+    if (finalTranscripts.includes('Hej Ester')) {
+        console.log("Keyword");
+    }
+};
+
+recognition.onerror = function (event) {
+    console.warn(event);
+};
+
+recognition.start();
+
+//SPEECH SYNTCH DONE USING RESPONSIVE VOICE
+//SPEECH SYNTH
+// var synth = window.speechSynthesis;
+
+// voices = synth.getVoices();
+
+// console.log(voices);
+// function speek(text){
+//     var utterThis = new SpeechSynthesisUtterance(text);
+//     utterThis.voice = voices[0];
+//     utterThis.pitch = pitch.value;
+//     utterThis.rate = rate.value;
+//     synth.speak(utterThis);
+// }

view/index.html

@@ -22,30 +22,36 @@
             <div class="avatar">
                 <img class="avatar--img" id="avatar" src="assets/images/esterMain.png">
                 <h1 class="avatar--text" id="username">USERNAME</h1>
+                <small id="type">VERSION</small>
             </div>
             <div class="grid-stack">
                 <!-- Movable widgets, generated at runtime -->
             </div>
         </div>
-        <div class="chat content-item">
+        <div class="chat" id="chat">
-            <div class="chat--content">
+            <div class="frame">
-                <div class="chat--divider">
+                <div class="frame--header ripple" id="chat-header">
-                    Dnes
+                    Ester
                 </div>
-                <div class="chat--sent">
+                <div class="chat--content">
-                    <div class="chat--sent-content">
+                    <div class="chat--divider">
-                        Ahoj!
+                        Dnes
+                    </div>
+                    <div class="chat--sent">
+                        <div class="chat--sent-content">
+                            Ahoj!
+                        </div>
+                    </div>
+                    <div class="chat--response">
+                        <div class="chat--response-content">
+                            Ahoj!
+                        </div>
                     </div>
                 </div>
-                <div class="chat--response">
+                <div class="chat--form">
-                    <div class="chat--response-content">
+                    <input id="input" placeholder="Pošli zprávu" type="text" class="chat--input">
-                        Ahoj!
-                    </div>
                 </div>
             </div>
-            <div class="chat--form">
-                <input id="input" type="text" class="chat--input">
-            </div>
         </div>
     </div>
     
@@ -58,6 +64,8 @@
         grid.enableResize(true, true);
     </script>
     <script src="./user.js"></script>
+    <script src="./chat.js"></script>
     <script src="./calendar.js"></script>
+    <script src="https://code.responsivevoice.org/responsivevoice.js?key=y7Vtl7ep"></script>
 </body>
 </html>

view/main.css

@@ -3,13 +3,14 @@ html {
     background-size: cover;
     margin: 0;
     padding: 0;
+    overflow: hidden;
 }
 body {
     margin: 0;
     padding: 0;
+    overflow: hidden;
 }
 .contents {
-    display: flex;
     width: 100%;
     height: 100%;
 }
@@ -43,11 +44,34 @@ body {
     left: 145px;
     vertical-align: middle;
     margin-top: 56px;
+    margin-bottom: 0;
 }
 
-.chat--content {
+.chat {
-    height: calc(100% - 20px);
+    z-index: 1000;
+    position: fixed;
+    bottom: -412px;
+    transition: bottom 0.8s ease-in-out;
+    right: 12px;
+    width: 300px;
+    height: 450px;
+}
+.chat--active {
+    bottom: 0;
+}
+.frame {
+    border-radius: 15px 15px 0 0;
     backdrop-filter: blur(5px);
+}
+.frame--header {
+    background: rgb(77, 143, 241);
+    padding: 10px;
+    padding-left: 15px;
+    color: white;
+    border-radius: 15px 15px 0 0;
+}
+.chat--content {
+    height: calc(100% - 80px);
     overflow-y: auto;
     overflow-x: hidden;
 }
@@ -71,6 +95,7 @@ body {
     display: inline-block;
     width: auto;
     float: right;
+    margin-right: 5px;
     padding: 10px;
     background: rgb(255, 255, 255);
     border-radius: 15px 15px 0 15px;
@@ -83,6 +108,7 @@ body {
     display: inline-block;
     width: auto;
     float: left;
+    margin-left: 5px;
     padding: 10px;
     background: rgb(0, 204, 255);
     border-radius: 15px 15px 15px 0;
@@ -90,10 +116,10 @@ body {
 
 
 .chat--input {
-    backdrop-filter: blur(5px);
     width: 100%;
-    height: 20px;
+    height: 40px;
     color: white;
+    font-size: 1.5rem;
     background-color: transparent;
     position: relative;
     bottom: 0;
@@ -102,8 +128,9 @@ body {
     border-bottom: 2px solid white;
 }
 
-.chat--input::focus {
+.chat--input:focus {
     outline: none;
+    border-bottom: 3px solid white;
 }
 
 @font-face {
@@ -123,3 +150,13 @@ h1, h2, h3 {
   border-radius: 15px;
   outline: none;
 }
+
+.ripple {
+  background-position: center;
+  transition: background 0.8s;
+  background-color: rgb(77, 143, 241);
+  background-size: 100%;
+}
+.ripple.active {
+  background: #d8230b radial-gradient(circle, transparent 1%, rgb(77, 143, 241) 1%) center/15000%;
+}

view/user.js

@@ -1,4 +1,18 @@
 const username = "Daniel Bulant";
+const type = 3;
+const typeString = (function () {
+    switch (type) {
+        case 1:
+            return "Uživatel";
+        case 2:
+            return "Sponzor";
+        case 3:
+            return "Administrátor";
+    }
+})();
 
 var accountElement = document.getElementById("username");
 accountElement.innerText = username;
+
+var typeElement = document.getElementById("type");
+typeElement.innerText = typeString;