<img width="840" height="327" src="http://wisran.com/wp-content/uploads/2018/09/WISRAN-Logo-11-1024x399-1-1024x399.png" alt="" srcset="http://wisran.com/wp-content/uploads/2018/09/WISRAN-Logo-11-1024x399-1.png 1024w, http://wisran.com/wp-content/uploads/2018/09/WISRAN-Logo-11-1024x399-1-400x156.png 400w, http://wisran.com/wp-content/uploads/2018/09/WISRAN-Logo-11-1024x399-1-300x117.png 300w, http://wisran.com/wp-content/uploads/2018/09/WISRAN-Logo-11-1024x399-1-768x299.png 768w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px" />											
			<a href="#contact" role="button">
						Contact
					</a>
			   <head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
   <base href="https://cdn.rawgit.com/download/polymer-cdn/1.8.0/lib/">
  <link rel="import" href="paper-tabs/paper-tabs.html">
  <link rel="import" href="paper-tabs/paper-tab.html">
  <link rel="import" href="iron-pages/iron-pages.html">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
   </head>
  <style type="text/css">
    body{
      font-family: cursive;
      /* background-image: url('http://127.0.0.1:8887/image1.jpg');*/
      background-repeat: no-repeat;
      background-size: cover; 
      background-position: fixed;
    }
       h1{
    text-shadow: 2px 2px 2px black;
    display: block;
  /*  font-family: cursive;*/
    font-weight: bold;
    color: grey ;
    font-size: 50px;
    width: 100%;
    text-align: center;
}
paper-tabs {
    color: black;
    box-shadow: 2px 2px 5px black;
    background: grey;
    width: 100%;
    height: 15px;
    --paper-tabs-selection-bar-color: black; 
}
paper-tab {
    font-size: 25px;
    text-shadow: 2px 2px 5px black;
    color:white;
    border-right: 1px solid white;
    --paper-tab-ink: black;
}
paper-tab:last-child {
    border: none ;
}
.topnav {
  background-color: #333;
  overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  height: 20px;
  padding: 14px 10px;
  text-decoration: none;
}
table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: grey;
    background-color: white;
    font-family: arial, sans-serif;
    border-collapse: borde;
    width: 100%
}
#myInput {
  /*background-image: url('/css/searchicon.png'); /* Add a search icon to input */
  background-position: 10px 12px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 100%; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
}
   </style>
<header>
<h3>Text Analysis Demo</h1>
   <h2 style="text-align: center;">{Work In Progress}</h2>
</header>
<body> 
          <textarea id = "myText"
                  rows = "6"
                  cols = "80" style="box-shadow: 2px 2px 5px black">Your text here</textarea>
     	<button name="Call Api", id="api"> Analyze Text</button>
         <my-element>
         </my-element>
  <dom-module id="my-element">
    <template>
      <paper-tabs selected="{{selected}}">
       <paper-tab>Entities</paper-tab>
       <paper-tab>Sentiment</paper-tab>
       <paper-tab>Classification</paper-tab>
      </paper-tabs>
      <iron-pages selected="{{selected}}">
            <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search by Type..">
            <table id="t01"class="w3-table-all w3-card-4">
                  <tr>
                  <th>Entity</th>
                   <th>Type</th>
                   <th>Mentions</th>
                   <th>Salience</th>
                     </tr>
                     </table>
              <h3>Document Wide Sentiment</h3>
              <p id="doc_sent", style="font-size: 18px">
                  The overall sentiment of the document. 
              </p>
              <h3>Entity Wise Sentiment</h3>
              <p style="font-size: 18px">Green color indicates a positive sentiment. Red color indicates a negative sentiment</p>
               <table id="t02"class="w3-table-all w3-card-4">
                  <tr>
                  <th>Entity</th>
                   <th>Sentiment Strength</th>
                   <th>Sentiment Score</th>
                     </tr>
                     </table>
              <p id="entity_sent", style="font-size: 18px">
              </p>
           <p id="ent_cat", style="font-size: 18px"></p>
      </iron-pages>
    </template>
  </dom-module>
</body>
			<h2>YES!</h2>		
			<h2>I'm in</h2>		
			<h2>Subscribe to our newsletter for latest news</h2>		
											<a href="http://www.wisran.com/ai" data-elementor-open-lightbox="">
							<img width="250" height="103" src="http://wisran.com/wp-content/uploads/2018/09/wisran_logo-250x100.png" alt="Identifies operating inefficiency to boost profit" />								</a>
			<h2><a href="http://www.wisran.com/ai">Home</a></h2>		
			<h2><a href="#about">About us</a></h2>		
			<h2><a href="#services">Services</a></h2>		
			<h2><a href="#features">Features</a></h2>		
			<h2><a href="#team">Team</a></h2>		
			<h2>Press release</h2>		
			<h2>2019 - WISRAN Corporation. All rights reserved.</h2>