duplicate.html

{% extends "base.html" %}
{% block title %}Translated{% endblock %}
{% block head %}
{{ super() }}
 
<style>
  	.try{
  		background-color: rgba(48,48,48,0.7);
   		border: 2px solid rgb(80,80,80);
  		width: 420px;
  		height: 440px;
  		padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
  		text-align: center;
        align-content: center;
        align-items: center;
        align-self: center;
	}
	.a{
  		padding: 10px;
  		margin-top: 20px;
  		margin-left: 20px;
  		margin-bottom:  20px;
  		margin-right:  20px;
  		background: rgba(44,62,80,0.7);
  		border: none;
        padding: 20px;
	}
	select{
  		background: transparent;
  		border:none;
  		font-size: 22px;
	}
	::placeholder{
  		color: white;
	}
	textarea{
  		background: transparent;
  		border:none;
  		font-size: 22px;
  		color: white;
	}
	#select{
  		color:white;
	}
	#select option{
  		color:black;
	}
    td{
      color:white;
    }
    .jumbotron{
    	height: 180px;
    }
    #feedback{
    	color: white;
    }
  </style>

{% endblock %}

{% block content %}

      <form class="" action="/" method="POST">
        <div class="container">
          <center>
            <div class="try">
            <center>
              <div class="a">
              <center>
              <table cols=2 cellpadding=6 cellspacing=4>
                <tr>
                  <td align="left"><label>Source: </label></td>
                  <td>{{di.SourceLang}}</td>
                </tr>
                <tr>
                  <td align="left"><label>Destination: </label></td>
                  <td>{{di.DestinationLang}}</td>
                </tr>
                <tr>
                  <td align="left"><label>Text: </label></td>
                  <td>{{di.Text}}<button id="clicksource" class="btn btn-dark"><i class="fas fa-play-circle" style="padding-left: 5px;"></i></button></td>
                </tr>
                <tr>
                  <td align="left"><label>Translated Text: </label></td>
                  <td>{{di.TranslatedText}}<button id="clickdest" class="btn btn-dark"><i class="fas fa-play-circle" style="padding-left: 3px;"></i></button></td>
                </tr>
                <tr>
                  <td align="left"><label>Confidence </label></td>
                  <td>{{di.Confidence}}</td>
                </tr>
                <tr>
                   <td colspan="2" align="center"><center><button class="btn btn-dark backBtn btn-lg pull-left " type="button" onclick="back()"><i class="fa fa-arrow-circle-left" style="font-size:36px"></i>Back</button></center></td>
                </tr>
              </table>
              </center>
              </div>
              </center>
            </div>  
          </center>
        </div>
      </form>

    <script type="text/javascript">
    	function back(){
    		document.location.href=('/');
    	}
    	$(function() { $("#clicksource").click(function (event) { $.getJSON('/srcaudio', { },
    		function(data) { }); return false; }); });
    	$(function() { $("#clickdest").click(function (event) { $.getJSON('/destaudio', { },
    		function(data) { }); return false; }); });

 	</script>

{% endblock %}