@OathOfCode/

Omni ~ A voice assistant

HTML, CSS, JS

Voice activated!

fork
loading
Files
  • index.html
  • other
  • script.js
  • style.css
index.html
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Omni - Ethans Assistant</title>
	<link rel="icon" href="other/chat.png" type="image/x-icon" />
	<link rel="stylesheet" href="style.css">
</head>

<body>
	<div class="md-modal md-effect-1" id="modal-1">
		<div class="md-content">
			<h3>Settings</h3>
			<button class="md-close button2">
        <img class="icon" src="other/close.svg"/>
      </button>
      <div>
          <p>Hey Omni: <img class="warning" src="other/warning.svg" title="Work in Progress"/></p>
          <label class="switch">
            <input type="checkbox" id="checkbox" onclick="checkbox()">
            <span class="slider round"></span>
          </label>
          <p>User Language: <img class="warning" src="other/warning.svg" title="Only English is Supported"/></p>
          <select id="select_language" onchange="updateCountry()"></select>
          <p>User Dialect:</p> 
          <select id="select_dialect"></select>
          <p>
          <hr>
          <p>Omni Voice: <img class="warning" src="other/warning.svg" title="Only English is Supported"/></p>
          <select id="voiceSelect"></select>
          <p>Omni Volume:</p>
          <input id="volume" type="range" min="0" max="1" value="1" step="0.1">
          <p>Omni Rate:</p>
          <input id="rate" type="range" min="0.1" max="10" value="1" step="0.1">
          <p>Omni Pitch:</p>
          <input id="pitch" type="range" min="0" max="2" value="1" step="0.1">
      </div>
    </div>
  </div>

  <div id="banner">
    <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
    <span id="notification"></span>
  </div>

  <button class="md-trigger button2" data-modal="modal-1">
    <img class="icon" src="other/setting.svg"/>
  </button>
  <h1 id="title">Omni</h1>
  <h1 id="subtitle">A Virtual Assistant</h1>

  <p id="alert"></p>

  <div id="recognition">
    <button class="button" onclick="keyboard()">
      <img class="icon" id="keyboard" src="other/keyboard.svg"/>
    </button>
    <button class="button" onclick="voice()">
      <img class="icon" id="voice" src="other/microphone.svg"/>
    </button>
  </div>

  <div class="card" id="card">
    <div class="card bubble" id="user" contenteditable="true"></div>
    <div class="card bubble" id="omni">
    </div>
      <iframe allowfullscreen id="soundcloud" scrolling="no" frameborder="0" allowtransparency="true" allow="encrypted-media" src=""></iframe> 
  </div>

  <div class="md-overlay"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://connect.soundcloud.com/sdk/sdk-3.3.1.js"></script>
  <script src="script.js"></script>
</body>
</html>
result
console