index.html

<!doctype html>
<!--
 This page is shown when the extension button is clicked, because the
 "browser_action" field in manifest.json contains the "default_popup" key with
 value "popup.html".
 -->
<html>
  <head>
    <title>Stella by Launchpad</title>
    <link type="text/css" href="public/css/fonts.css" rel="stylesheet">
    <link type="text/css" href="public/css/index.css" rel="stylesheet">
    <link type="text/css" href="public/css/theme.css" rel="stylesheet">
    <link type="text/css" href="public/css/recording.css" rel="stylesheet">
    <link type="text/css" href="public/css/switch.css" rel="stylesheet">
    <link type="text/css" href="public/css/chat.css" rel="stylesheet">
    <link type="text/css" href="public/css/demo.css" rel="stylesheet">
    <link type="text/css" href="public/css/docs.css" rel="stylesheet">
  </head>
  <body>
    <div class="table-container">
      <table class="table" cellspacing="0">
        <colgroup>
          <col span="1" style="width: 40%;">
          <col span="1" style="width: 60%;">
        </colgroup>
        <tbody>
          <tr>
            <td class="command">"Hello Stella"</td>
            <td class="action">Returns to Stella's tab. Do not say "Stella" before this command</td>
          </tr>
          <tr>
            <td class="command">Open&nbsp;/&nbsp;Close help menu</td>
            <td class="action">Opens&nbsp;/&nbsp;closes the table of commands</td>
          </tr>
          <tr>
            <td class="command"><i>Question</i></td>
            <td class="action">Searches Google for the answer to your <i>question</i>. If the question or answer is simple, Stella may verbally respond.</td>
          </tr>
          <tr>
            <td class="command">Go to <i>url</i></td>
            <td class="action">Opens the website at <i>url</i> in a new tab</td>
          </tr>
          <tr>
            <td class="command">Look up <i>query</i></td>
            <td class="action">Searches google for the requested query</td>
          </tr>
          <tr>
            <td class="command">Play <i>song</i></td>
            <td class="action">Plays the first YouTube video that matches <i>song</i></td>
          </tr>
          <tr>
            <td class="command">Search YouTube for <i>query</i></td>
            <td class="action">Searches YouTube for the requested query</td>
          </tr>
          <tr>
            <td class="command">Click on the link that says <i>text</i></td>
            <td class="action">Clicks on the first visible link on screen that contains the specified <i>text</i></td>
          </tr>
          <tr>
            <td class="command">Type <i>phrase</i> in box <i>label</i></td>
            <td class="action">Types the phrase in a labeled text box.</td>
          </tr>
          <tr>
            <td class="command">Scroll up&nbsp;/&nbsp;down a little</td>
            <td class="action">Scrolls any webpage up&nbsp;/&nbsp;down 200 pixels</td>
          </tr>
          <tr>
            <td class="command">Scroll up&nbsp;/&nbsp;down (more)</td>
            <td class="action">Scrolls any webpage up&nbsp;/&nbsp;down 500 pixels</td>
          </tr>
          <tr>
            <td class="command">Scroll up&nbsp;/&nbsp;down alot</td>
            <td class="action">Scrolls any webpage up&nbsp;/&nbsp;down 1000 pixels</td>
          </tr>
          <tr>
            <td class="command">Go back&nbsp;/&nbsp;forward</td>
            <td class="action">Toggles the back&nbsp;/&nbsp;forward button of the browser on the active tab</td>
          </tr>
          <tr>
            <td class="command">Refresh the page</td>
            <td class="action">Refreshes the currently visible tab</td>
          </tr>
          <tr>
            <td class="command">Open a new tab</td>
            <td class="action">Creates a new empty tab in the current window</td>
          </tr>
          <tr>
            <td class="command">Close this tab</td>
            <td class="action">Closes the tab that is visible</td>
          </tr>
          <tr>
            <td class="command">Go to the <i>n</i>-th tab</td>
            <td class="action">Makes the <i>n</i>-th tab of the current window active</td>
          </tr>
          <tr>
            <td class="command">Close the previous tab</td>
            <td class="action">Closes the tab directly to the left of the currently visible one</td>
          </tr>
          <tr>
            <td class="command">Close the previous <i>n</i> tabs</td>
            <td class="action">Closes the <i>n</i> tabs directly to the left of the currently visible one from closest to farthest</td>
          </tr>
          <tr>
            <td class="command">Close the next tab</td>
            <td class="action">Closes the tab directly to the right of the currently visible one</td>
          </tr>
          <tr>
            <td class="command">Close the next <i>n</i> tabs</td>
            <td class="action">Closes the <i>n</i> tabs directly to the right of the currently visible one from closest to farthest</td>
          </tr>
          <tr>
            <td class="command">Close the first <i>n</i> tabs</td>
            <td class="action">Closes the first <i>n</i> tabs in the window from left to right (Skips Stella tab)</td>
          </tr>
          <tr>
            <td class="command">Close the last <i>n</i> tabs</td>
            <td class="action">Closes the last <i>n</i> tabs in the window from right to left (Skips Stella tab)</td>
          </tr>
          <tr>
            <td class="command">Close the first tab</td>
            <td class="action">Closes the first tab in the window</td>
          </tr>
          <tr>
            <td class="command">Close the last tab</td>
            <td class="action">Closes the last tab in the window</td>
          </tr>
          <tr>
            <td class="command">Close the <i>n</i>-th tab</td>
            <td class="action">Closes the <i>n</i>-th tab in the current window (1-indexed from left to right and skips Stella)</td>
          </tr>
          <tr>
            <td class="command">Close the <i>n</i>-th to <i>m</i>-th tabs</td>
            <td class="action">Closes the <i>n</i>-th tab to <i>m</i>-th tab in the current window (1-indexed from left to right and skips Stella)</td>
          </tr>
          <tr>
            <td class="command">Mute all audible tabs</td>
            <td class="action">Disables all tabs making sound (Click them to reload)</td>
          </tr>
          <tr>
            <td class="command">Enter memory save mode</td>
            <td class="action">Unloads all inactive tabs to save computer memory (Click tabs to reload them)</td>
          </tr>
          <tr>
            <td class="command">Reset</td>
            <td class="action">Resets Stella</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="chat-container">
      <div class="container">
        <div class="chat">
          <div class="chat-title">
            <h1>STELLA</h1>
            <h2>by Launchpad</h2>
            <figure class="avatar">
              <img src="public/img/stella.png" />
            </figure>
            <div class="right">
              <button id="start_button" class="rec-container">
                <div id="rec_dot" class="dot"></div>
                <div id="rec_pulse" class="pulse"></div>
              </button>
            </div>
          </div>
          <div class="messages">
            <div class="messages-content"></div>
          </div>
          <div class="message-box">
            <textarea type="text" id="message_input" class="message-input" placeholder="Begin speaking..."></textarea>
          </div>
        </div>
        <br>
        <div id="info">
          <p id="info_start">Click on the gray circle and begin speaking.</p>
          <p id="info_speak_now">Analyzing audio... Begin command with "Stella"</p>
          <p id="info_no_speech">No speech detected: You may need to adjust your
            <a href="//support.google.com/chrome/bin/answer.py?hl=en&amp;answer=1407892"> mic settings</a>.</p>
          <p id="info_no_microphone" style="display:none">
            No microphone was found. Ensure that a microphone is installed and that
            <a href="//support.google.com/chrome/bin/answer.py?hl=en&amp;answer=1407892"> microphone settings</a> are configured correctly.</p>
          <p id="info_allow">Click the "Allow" button above to enable your microphone.</p>
          <p id="info_denied">Permission to use microphone was denied.</p>
          <p id="info_blocked">Permission to use microphone is blocked. To change, go to chrome://settings/contentExceptions#media-stream</p>
          <p id="info_upgrade">Web Speech API is not supported by this browser. Upgrade to <a href="//www.google.com/chrome">Chrome</a> version 25 or later.</p>
        </div>
        <br>
        <div class="switch-container">
          <label class="switch">
            <input id="continuous_check" type="checkbox" checked="true">
            <div class="slider round"></div>
          </label>
          <p>Continuous Analysis: Accept commands until "Stella go to sleep" or "Stella turn off continuous analysis"</p>
        </div>
        <div class="center">
          <div id="div_language">
            <select id="select_language"></select>
            &nbsp;&nbsp;
            <select id="select_dialect"></select>
          </div>
        </div>
        <br>
        <p id="status"></p>
      </div>
    </div>
    <script src="scripts/jquery.min.js"></script>
    <script src="scripts/chat.js"></script>
    <script src="api/index.js"></script>
    <script src="background/tts.js"></script>
    <script src="background/notifications.js"></script>
    <script src="client/recognition.js"></script>
    <script src="api/debug.js"></script>
    <script src="api/tabs.js"></script>
    <script src="api/dom/window.js"></script>
    <script src="api/dom/interaction.js"></script>
    <script src="api/api.browser.js"></script>
    <script src="api/api.core.js"></script>
    <script src="api/api.interact.js"></script>
    <script src="api/api.search.js"></script>
    <script src="api/api.tabs.js"></script>
    <script src="npm/bundle.js"></script>
    <script src="api/analysis.js"></script>
    <script src="client/speech.js"></script>
  </body>
</html>