third
/
freeswitch


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683
							<!DOCTYPE html>
<html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Replace the clientid Here with your Client ID. -->
    <meta name="google-signin-clientid" content="675954646436-qs593t199b1nt7gj0v6p4njau8724oss.apps.googleusercontent.com">
    <meta name="google-signin-scope" content="https://www.googleapis.com/auth/plus.profile.emails.read"/>
    <meta name="google-signin-requestvisibleactions" content="http://schema.org/AddAction" />
    <meta name="google-signin-cookiepolicy" content="single_host_origin" />
    <!------>

  <link rel="stylesheet" href="css/jquery.mobile.min.css"/>
  <link rel="stylesheet" type="text/css" href="css/jsontable.css" />
  <link rel="shortcut icon" href="favicon.ico" />
    <meta charset="utf-8" />
    <title>FreeSWITCH Verto&trade; Video Transcoding Demo</title>

    <style type="text/css">
.pageheader {
	 font-size: 22px;
	 font-weight: normal;
	 height: 27px;
}

.ctlbtn {
	 border: 2px;
	 border-style:outset;
	 color: #ffffff;
	 min-width: 125px;
	 background-color: #666666;
	 font-face: arial;
	 height:18px;
	 font-size:7pt;
}

.ctlbtn:hover {
	 color: #ffffae;
	 cursor: pointer;
}

.vidbtn {
	font-face: arial;
        font-size:7pt;
}

#chatwin
{
	background-color: #eeeeee;
	width: 500px;
	height:150px;
	overflow-y: scroll;
	scrolling: auto;
	text-align: left;
	border-style:inset;
	font-size: 10pt;
	color: #3333ff;
	resize:both;
}

.chatuid
{
	font-size: 7pt;
	font-weight: bold;
	color: #ff3333;
}

.chatimg
{
	max-width:100px;
}

.l1
{
	border:1;
	background-color:#fefefe;
	height:1px;
	opacity:0.4;
}
#chatmsg
{
	width:400px;
	max-height:40px;
}

div#preload { display: none; }

    </style>

  </head>
  <body>
    <div data-role="page" id="page-login" align="center">
      <div data-role="header" class="page-header">
	FreeSWITCH Verto&trade; Video Transcoding Demo 
      </div>

    </div>


    <div data-role="page" id="page-enum" align="center">
      <div data-role="header" class="page-header">
	FreeSWITCH Verto&trade; Looking For Devices
      </div>
      <div id="search" hidden="true">
	<img src="images/search.gif"/>
	</div>

    </div>


    <div data-role="page" id="page-bwtest" align="center">
      <div data-role="header" class="page-header">
	FreeSWITCH Verto&trade; Testing Network Connection
      </div>

      <h1>Testing Network Connection</h1>
      	<img src="images/speed.gif"/>


    </div>


    <div data-role="page" id="page-incall" align="center">
      <div data-role="header" id="calltitle" class="pageheader">
	Verto&trade; IN CALL
      </div>


<div id="fs" xstyle="width:100%;height:100%">
<div id="rows" style="background-color:#f9f9f9">

<span id=usrinner style="margin:25px">
  <span id=usrctl><b>User Controls</b></span>
      <div id=usr2>


      <div id="canvasButtons" hidden="true">
          <button data-inline="true" id="hupbtn2">End Call</button>
	  <button data-inline="true" id="fullbtn2">Enter Full Screen</button>
      </div>

      <div id="mainButtons">

      <button data-inline="true" id="hold">HOLD</button>
      <button data-inline="true" id="hupbtn">End Call</button>
      <button data-inline="true" id="mutebtn">Toggle Audio Mute</button>
      <button data-inline="true" id="localmutebtn">Toggle Local Audio Mute</button>
      <button data-inline="true" id="localvidmutebtn">Toggle Local Video Mute</button>
<!--      <button data-inline="true" class="startxferbtn">Transfer</button>-->
      <span class="sharediv">
	  <button data-inline="true" id="sharebtn">Share</button>
	  <button data-inline="true" id="nosharebtn">End Share</button>
      </span>


      	     <span class="sharediv">
	     	  <button data-inline="true" id="smallerbtn">Smaller - </button>
	     	  <button data-inline="true" id="biggerbtn">Bigger +</button>
  	     	  <button data-inline="true" id="fullbtn">Enter Full Screen</button>
                  <button data-inline="true" id="vmutebtn">Toggle Video Mute</button>
             </span>
    </div>

<br><br>
      <div id="conf" xstyle="width:100%;height:100%">
	<div style="color:black;font-family: verdana" align="center" id="conf_count"></div><br>
	<table width="1400" cellspacing="0" cellpadding="0" border="0" align="center" id="conf_list" class="jsDataTable">
	</table>

	<div id="canvasui" style="width:700px;" hidden="true">
	<br><br>
	<table border=0 cellspacing=0 cellpadding=0>
	<tr><td width=180><b>Additional Canvas</b>:</td><td><select style="width:200px;" id="canvasid"></select></td><td width=220 align=right><button id="canvasbut" style="width:200px;">Open Canvas</button></td></tr>
	</table>
	<br><br>
	</div>

	</div><!---conf-->


      <div id="message" hidden="true">
	<hr class="l1" width="500"/>
	<div id="chatwin"></div>
<!--	<textarea readonly id="chatwin"></textarea>-->
	<table><tr><td><textarea id="chatmsg"></textarea></td><td><button id="chatsend" style="width:100px;">Send</button></td></tr></table>
	<hr class="l1" width="500"/><br>
      </div>
      

      <div id="hctop" hidden="true">
	<br/><br/>
	<div id="hcmessage"></div> 
	<br><br>
      </div>
      
      <div class="ui-field-contain" id="xferdiv">
	<input data-mini="true" type="text" id="xferto"><br>
      <button data-inline="true" id="cancelxferbtn">Cancel Transfer</button>
      <button data-inline="true" class="startxferbtn">Complete Transfer</button>
      </div>


	<img src="img/verto_black_web.gif" width="300"><br><br>


      <div id=keypad>
	<button class="dtmf" data-inline="true">1</button>
	<button class="dtmf" data-inline="true">2</button>
	<button class="dtmf" data-inline="true">3</button>
	<br>
	<button class="dtmf" data-inline="true">4</button>
	<button class="dtmf" data-inline="true">5</button>
	<button class="dtmf" data-inline="true">6</button>
	<br>	
	<button class="dtmf" data-inline="true">7</button>
	<button class="dtmf" data-inline="true">8</button>
	<button class="dtmf" data-inline="true">9</button>
	<br>
	<button class="dtmf" data-inline="true">*</button>
	<button class="dtmf" data-inline="true">0</button>
	<button class="dtmf" data-inline="true">#</button>
      </div>
	<br><br>

      	<div id="conf_mod" style="width:450px"></div>
	<div style="color:blue" id="conf_display"></div>

</span>
</div>

</div><!-- fs -->


      <video id="webcam" autoplay="autoplay" style="width:100%;height:100%;object-fit:inherit;"></video>
      <!--<video id="local_webcam" autoplay="autoplay" style="width:100%;height:100%;object-fit:inherit;"></video>-->

</div><!-- rows -->


<br><br>

	</div>


	<div data-role="page" id="page-main" align="center">
	<div data-role="header" class="pageheader">
	  FreeSWITCH Verto&trade; Video Transcoding Demo (<span id="bwinfo">*checking*</span>)
	</div>
	<br>
<center>	<table width="1024" border="0">
<tr><td>      <center><a target="_CC2104" href="https://www.cluecon.com"><img border="0" width="300" src="img/cc_banner.gif"></a></center></td>
<td><center>	  <img src="img/verto_black_web.gif" width="300"></center>
	</td></tr>
	</table></center><br><br>
	
      <div id="offline">
        <div id="errordisplay" style="font-weight:bold;font-size:18px;color:#ae0000"></div>

      <div class="ui-field-contain">
	<label for="name">Login</label>
	<input type="text" size="20" id="login"/>
      </div>

      <div class="ui-field-contain">
	<label for="name">Password</label>
	<input type="password" size="20" id="passwd"/>
      </div>

<!--
      <div class="ui-field-contain">
	<label for="name">CID Name</label>  
	<input type="text" size="30" class="name"/>
      </div>

      <div class="ui-field-contain">
	<label for="name">CID Number</label>  
	<input type="text" size="20" class="cid"/>
      </div>
-->
      <div class="ui-field-contain">
	<label for="name">Hostname</label>
	<input type="text" size="20" id="hostName"/>
      </div>

      <div class="ui-field-contain">
	<label for="name">Websocket URL</label>
	<input type="text" size="20" id="wsURL"/>
      </div>

      <br><br>
      <img src="img/verto_black_web.gif" width="300">
      <br><br>
      <button data-inline="true" id="loginbtn">Log In</button>      

<script>
function playvid(file)
{
	$("#ext").val("vid_" + file);
	$("#callbtn").click();
}

function dial(ext)
{
	$("#ext").val(ext);
	$("#callbtn").click();
}

</script>


      <br><br><br>
      
	</div>

      <div id="online" align="center" style="width:75%">
	<div class="ui-field-contain">

<script>
function toggle_demo() {

if ($('#demos').is(':visible')) {
    $('#demos').hide();
    $('#showdemo').text("Show Demo Extensions");
} else {
    $('#devices').hide();$('#showdevices').show();$('#demos').show();
    $('#showdemo').text("Hide Demo Extensions");
}

}

function toggle_device() {

if ($('#devices').is(':visible')) {
    $('#devices').hide();
    $('#showdevices').text("View Device Settings");
} else {
    $('#devices').show();$('#demos').hide();
    $('#showdevices').text("Hide Device Settings");
}

}

</script>
<!--<button data-inline="true" id="showdemo" onclick="toggle_demo();">View Demo Extensions</button>-->
<button data-inline="true" id="showdevices" onclick="toggle_device();">View Device Settings</button>
<button data-inline="true"id="speedbtn">Check Speed</button>
<button data-inline="true"id="logoutbtn">Log Out</button>

<div id="devices" style="border-style:outset;border-width:2px">

<div id="camdiv">

  <legend><b>Camera</b>:</legend><select data-theme="a" data-overlay-theme="a" data-native-menu="false" id="usecamera"></select>
<br>
  <legend><b>Share Device</b>:</legend><select data-theme="a" data-overlay-theme="a" data-native-menu="false" id="useshare"></select>

<br><br></div>

<legend><b>Microphone</b>:</legend><select data-theme="a" data-overlay-theme="a" data-native-menu="false" id="usemic"></select>
<br>
<legend><b>Speaker</b>:</legend><select data-theme="a" data-overlay-theme="a" data-native-menu="false" id="usespeak"></select>

<Br clear="all"><Br>

<div style="xvisibility:hidden">
	<label><input id="use_vid" type="checkbox" value="foo" > Use Video</label>
	<label><input id="use_stereo" type="checkbox" value="foo" > Stereo Audio</label>
	<label><input id="use_stun" type="checkbox" value="foo" > Use STUN</label>
<!--	<label><input id="local_video" type="checkbox" value="foo" > Local Video</label>-->
</div>


<Br clear="all">
<br><br>
<div >
  <fieldset data-role="controlgroup" data-type="horizontal">
    <legend><b>Video Quality</b>:</legend>

    <input type="radio" name="vqual" id="vqual_qqvga" value="qqvga">
    <label for="vqual_qqvga">QQVGA 160x120</label>

    <input type="radio" name="vqual" id="vqual_qvga" value="qvga">
    <label for="vqual_qvga">QVGA 320x240</label>
 
    <input type="radio" name="vqual" id="vqual_vga" value="vga">
    <label for="vqual_vga">VGA 640x480</label>

    <input type="radio" name="vqual" id="vqual_qvga_wide" value="qvga_wide">
    <label for="vqual_qvga_wide">QVGA WIDE 320x180</label>
 
    <input type="radio" name="vqual" id="vqual_vga_wide" value="vga_wide">
    <label for="vqual_vga_wide">VGA WIDE 640x360</label>

    <input type="radio" name="vqual" id="vqual_hd" value="hd">
    <label for="vqual_hd">HD 1280x720</label>

    <input type="radio" name="vqual" id="vqual_hhd" value="hhd">
    <label for="vqual_hhd">HHD 1920x1080</label>

  </fieldset>
</div><br clear="all"><br>


<div >
  <fieldset data-role="controlgroup" data-type="horizontal">
    <legend><b>Max Outgoing Bandwidth</b>:</legend>

    <input type="radio" name="outgoingBandwidth" id="outgoingBandwidth_250kb" value="250">
    <label for="outgoingBandwidth_250kb">250kb</label>

    <input type="radio" name="outgoingBandwidth" id="outgoingBandwidth_500kb" value="500">
    <label for="outgoingBandwidth_500kb">500kb</label>

    <input type="radio" name="outgoingBandwidth" id="outgoingBandwidth_1024kb" value="1024">
    <label for="outgoingBandwidth_1024kb">1mb</label>

    <input type="radio" name="outgoingBandwidth" id="outgoingBandwidth_1536kb" value="1536">
    <label for="outgoingBandwidth_1536kb">1.5mb</label>

    <input type="radio" name="outgoingBandwidth" id="outgoingBandwidth_2048kb" value="2048">
    <label for="outgoingBandwidth_2048kb">2mb</label>

    <input type="radio" name="outgoingBandwidth" id="outgoingBandwidth_5120kb" value="5120">
    <label for="outgoingBandwidth_5120kb">5mb</label>

    <input type="radio" name="outgoingBandwidth" id="outgoingBandwidth_0kb" value="0">
    <label for="outgoingBandwidth_0kb">No Limit</label>

    <input type="radio" name="outgoingBandwidth" id="outgoingBandwidth_default" value="default">
    <label for="outgoingBandwidth_default">Server Default</label>

 
  </fieldset>
</div><br clear="all"><br>


<div >
  <fieldset data-role="controlgroup" data-type="horizontal">
    <legend><b>Max Incoming Bandwidth</b>:</legend>

    <input type="radio" name="incomingBandwidth" id="incomingBandwidth_250kb" value="250">
    <label for="incomingBandwidth_250kb">250kb</label>

    <input type="radio" name="incomingBandwidth" id="incomingBandwidth_500kb" value="500">
    <label for="incomingBandwidth_500kb">500kb</label>

    <input type="radio" name="incomingBandwidth" id="incomingBandwidth_1024kb" value="1024">
    <label for="incomingBandwidth_1024kb">1mb</label>

    <input type="radio" name="incomingBandwidth" id="incomingBandwidth_1536kb" value="1536">
    <label for="incomingBandwidth_1536kb">1.5mb</label>

    <input type="radio" name="incomingBandwidth" id="incomingBandwidth_2048kb" value="2048">
    <label for="incomingBandwidth_2048kb">2mb</label>

    <input type="radio" name="incomingBandwidth" id="incomingBandwidth_5120kb" value="5120">
    <label for="incomingBandwidth_5120kb">5mb</label>

    <input type="radio" name="incomingBandwidth" id="incomingBandwidth_0kb" value="0">
    <label for="incomingBandwidth_0kb">No Limit</label>

    <input type="radio" name="incomingBandwidth" id="incomingBandwidth_default" value="default">
    <label for="incomingBandwidth_default">Server Default</label>
 
  </fieldset>
</div><br clear="all"><br>
	<label><input id="use_dedenc" type="checkbox" value="foo" > Use Dedicated Remote Encoder</label>
	<label><input id="mirror_input" type="checkbox" value="foo" >Scale Remote Video To Match Camera</label>
<br><br>
<center><button data-inline="true" id="refreshbtn">Refresh Device List</button>
<button data-inline="true" id="hidedevices" onclick="toggle_device()">Save Device Settings</button>

</center>
<Br clear="all"><br>


</div>

<br><br>
<div id="demos" style="border-style:outset">

<h2>Video Streaming (USE STEREO HEADPHONES IF POSSIBLE)</h2>
<div style="border-style:inset;border-width:1px;background-color:#eeeeee">
	<button class="vidbtn" data-inline="true" onclick="playvid('vuc.mp4')">FreeSWITCH Team on VUC (Summer 2014)</button>
	<button class="vidbtn" data-inline="true" onclick="playvid('briancc.mp4')">Brian West ClueCon Spot (Summer 2010)</button>
	<button class="vidbtn" data-inline="true" onclick="playvid('bin1.mp4')">Binaural Audio Demo</button>
	<button class="vidbtn" data-inline="true" onclick="playvid('binrafting.mp4')">Binaural River Rafting</button>
	<button class="vidbtn" data-inline="true" onclick="playvid('splash.mp4')">Binaural Splash Mountian</button>
<br>
	<button class="vidbtn" data-inline="true" onclick="playvid('3d_demo.mp4')">Binaural Spatial Demo</button>
	<button class="vidbtn" data-inline="true" onclick="playvid('gravity.mp4')">Gravity Movie Trailer(2k)</button>
	<button class="vidbtn" data-inline="true" onclick="playvid('awesome1.mp4')">Everything is Awesome</button>
	<button class="vidbtn" data-inline="true" onclick="playvid('awesome2.mp4')">Everything is Awesome 2</button>
	<button class="vidbtn" data-inline="true" onclick="playvid('sirius.mp4')">Sirius Live</button>
<br>
	<button class="vidbtn" data-inline="true" onclick="playvid('swimp.mp4')">Imperial March Live</button>
	<button class="vidbtn" data-inline="true" onclick="playvid('imphd.mp4')">Imperial March on Floppy Drives</button>
	<button class="vidbtn" data-inline="true" onclick="playvid('notime.mp4')">Ain't Nobody Got Time</button>
	<button class="vidbtn" data-inline="true" onclick="playvid('hdtest.mp4')">Video HD Demo</button>
</div>
<br>
<h2>Codec Test and Conference</h2>

<div style="border-style:inset;border-width:1px;background-color:#eeeeee">
	<button class="vidbtn" data-inline="true" onclick="dial('decode')">Video from your Webcam decoded then re-encoded w/ MOH</button>
	<button class="vidbtn" data-inline="true" onclick="dial('3500')">Video Transcoded Conference</button>

</div>
</div>


<br><br><br><hr><br>
      <div class="ui-field-contain" style="text-align:right;">
	<label for="name">Name</label>  
	<input type="text" size="30" id="cidname"/>
      </div>
      <div class="ui-field-contain" style="text-align:right;">
	<label for="name">CID Number</label>  
	<input type="text" size="20" id="cid"/>
      </div>
      <div class="ui-field-contain" style="text-align:right;">
	<label for="name">Email</label>  
	<input type="text" size="20" id="email"/>
      </div>

      <div class="ui-field-contain" style="text-align:right;">
	<label for="name">Avatar</label>  
       	<input type="text" size="20" id="avatar" />
      </div>

      <div class="ui-field-contain" style="text-align:right;">
	<label for="name">Extension</label>  
	  <input type="text" id="ext""/>
      </div>

      <img width="200" id="avatar_img"/><br>

       <!--Comment out to "EOC" comment to disable Googleb Login -->
       <button data-inline="true" id="signinButton">Import Google Credentials</button>
       <!--<button data-inline="true" id="signoutButton">Sign out with Google</button>-->

	  <button data-inline="true" id="callbtn">Call Extension</button>
<br>
<hr>
<br><br>
	  <div style="color:blue" id="main_info">&nbsp;</div><br><br>

	</div>


	<br>
	<br>
<!--
	<b>TEXT</b><br>To: <input type="text" size="20" id="textto"/> MSG: <input type="text" size="40" id="textmsg"/>
	<button id="vtxtbtn">Send</button>
-->
      </div>


<table id="directory" width=500 style="font-size:11pt;font-face:arial">
<tr><td align=center colspan=2><b>FreeSWITCH VERTO&trade; WebRTC Demo Directory<Br><br></td></tr>
<tr><td width=100><b>Dial</b></td><td><b>Desc</b></td></tr>
<tr><td align=left colspan=2><hr></td></tr>

<tr><td>3d1</td><td> 3D sound demo #1</td></tr>
<tr><td>3d2</td><td> 3D sound demo #2</td></tr>

<tr><td>stereo1</td><td> Stereo sound demo #1</td></tr>
<tr><td>stereo2</td><td> Stereo sound demo #2</td></tr>
<tr><td>stereo3</td><td> Stereo sound demo #3</td></tr>
<tr><td>3500</td><td>Local 48k Stereo Conference</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>cluecon</td><td> ClueCon Hotline</td></tr>
<tr><td>&lt;number&gt;</td><td>Call a US/Canda Number</td></tr>

<tr><td>vuc</td><td>VoIP Users Conference</td></tr>
<tr><td>888</td><td>FreeSWITCH Community Conference</td></tr>

<tr><td>3300</td><td>Local 48k Conference</td></tr>
<tr><td>5000</td><td>Try the Demo IVR</td></tr>
<tr><td>9664</td><td>Listen to Hold Music</td></tr>
<tr><td>9386</td><td>Funny Prompts</td></tr>
<tr><td>9198</td><td>Tetris (tone generator)</td></tr>
<tr><td colspan=2><Br>
<center>
<br><br><br>
</td></tr>
</td></tr>
</table>


    </div><!-- /page -->

    <div data-role="page" id="dialog-logout" data-close-btn="none">
      <div data-role="header">
        <h2>Logged Out</h2>
      </div>
      <div data-role="content">
        <p>You have been logged out or disconnected from the server.</p>

	<button onclick="$('#dialog-logout').dialog('close')">OK</button>
      </div>
    </div>

    <div data-role="page" id="dialog-login-error" data-close-btn="none">
      <div data-role="header">
        <h2>Login Error</h2>
      </div>
      <div data-role="content">
        <p>Error logging in</p>

	<button onclick="$('#dialog-login-error').dialog('close')">OK</button>
      </div>
    </div>

    <div data-role="page" id="dialog-hold" data-close-btn="none">
      <div data-role="header">
        <h2>Call On hold</h2>
      </div>
      <div data-role="content">
        <p>The call is on hold</p>

	<button onclick="$('#dialog-hold').dialog('close');cur_call.toggleHold();">Resume Call</button>
      </div>      
    </div>

    <div data-role="page" id="dialog-incoming-call" data-close-btn="none">
      <div data-role="header">
        <h2>Incoming Call</h2>
      </div>
      <div data-role="content">
        <div id="dialog-incoming-call-txt"><p>Incoming Call</p></div>
	<button id="ansbtn">Answer</button> 
	<div id="vansdiv"><button id="vansbtn">Answer Video</button></div>
	<button id="declinebtn">Decline</button>
      </div>
      
    </div>


    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> 
    <script type="text/javascript" src="js/jquery.mobile.min.js"></script> 
    <script type="text/javascript" src="js/jquery.json-2.4.min.js"></script>  
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="js/verto-min.js"></script>
    <script type="text/javascript" src="js/getScreenId.js"></script>
    <script type="text/javascript" src="js/md5.min.js"></script>
    <script type="text/javascript" src="js/jquery.hipchat.js"></script>	
    <script type="text/javascript" src="verto.js"></script>
    <script src="https://apis.google.com/js/client:platform.js?onload=render" async defer></script>

<div id="preload" hidden=true>
	<img src="images/search.gif"/>
</div>

  </body>
</html>