感情判定結果画面表示用雛形（HTMLファイル）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
    <title>JSSample</title>

<style type="text/css">
<!--
input,textarea,select {
  font-size: 1.4em;
  width:90%;
  height:55%;
}
body {
  font-size: 1em;
  background:azure;
}
-->
</style>

<style type="text/css">
<!--

.buttonx {
  width:160px;
  color:#ffffff;
  background:#337fcc;
  font-family: fantasy,sans-serif;
  font-size:24px;
  font-weight:bold;
  text-shadow:0 1px 0px #143352,0 2px 0px #143352;
  text-align:center;
  display:inline-block;
  text-decoration:none;
  border:1px solid #225588;
  padding:15px 0 12px 0;
  border-radius:5px;
  margin-bottom:20px;
  margin-left: 10px;
}

-->

</style>

<style>

#tmpa{float: left; width: 40%; height 80%;margin-right: 10px;  padding:20px;border: 3px solid #666;}
#info{float: left; width: 40%; height 80%; padding:20px ;border: 3px solid #666;}button{float:right;padding: 10px 30px;}
hr{border: 2px solid #888;}


@media only screen and (max-width: 900px) {

#tmpa{float: left; width: 80%; margin-right: 10px;  padding:20px;border: 3px solid #666;}
#info{width: 80%; height: 470px;padding:20px ;border: 3px solid #666;}button{float:right;padding: 10px 30px;}
hr{border: 2px solid #888;}

}

</style>

<script type="text/javascript">
    function doDataLink(data) {
        //  alert('dodatalink=>'+data);
        Android.dataLink(data);
    }
</script>

</head>
<body>


<div id="tmpa"><img id="tmp" src="https://i.embed.ly/1/display/resize?key=5230dd43a2a24dbfa00e59ddfab27c63&width=400&height=400&url=@@@1@@@"></div>
<div id="info">
この写真の感情判定結果<br><br>@@@2@@@<br>
<button class="buttonx" onmouseover="this.style.background='#43cd80'" onmouseout="this.style.background='#337fcc'" onclick="this.style.background='#43cd80';doDataLink('//x//')">終了</button>
<button class="buttonx" onmouseover="this.style.background='#43cd80'" onmouseout="this.style.background='#337fcc'" onclick="this.style.background='#43cd80';doDataLink('//y//')">次の検索</button>

<div>
</body>
</html>