【4K画面】 gmindex3.html

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>CSS 3D Flipping Cards/Tiles</title>


        <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      html, body {
  background: #2c3e50;
}

.container {
  width: 90%;
}
.container h1, .container h2,.container h4 {
  text-align: center;
  color: white;
}
.container a {
  color: inherit;
}

.tiles {
  width: 100%;
  height: 100%;
}

li {
  width: 100px;
  height: 100px;
  display: inline-block;
  position: relative;
  -webkit-perspective: 800;
  margin: 1px 2px;
}

.tile {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.6s;
}
.tile .tile-front, .tile .tile-back {
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-backface-visibility: hidden;
}
.tile .tile-front {
  background: #8e44ad;
  -webkit-transition: -webkit-transform 0.3s;
}
.tile .tile-front:hover {
  background: #9b59b6;
  -webkit-transform: scale(1.0);
}
.tile .tile-back {
  background-color: orange;
  -webkit-transform: rotateY(180deg);
}
.tile .tile-back:hover {
  background: #ffb733;
}
.tile .tile-back img {
  width: 100%;
  height: 100%;
}

.tile.flipped {
  -webkit-transform: rotateY(180deg);
}

.disabled {
  pointer-events: none;
  opacity: 0.5;
}

    </style>


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

input {
  width:80%;
  font-size:1em;
  border:1px solid #225588;
  padding:10px 10px 10px 10px;
  border-radius:5px;
  margin-bottom:10px;
}

#buttonx {
  width:20%;
  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:10px;
}

-->


</style>


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

  </head>

  <body>

    <div class="container">
		<h1>４Ｋ衰弱</h1>
<h4>きつい！苦しい！厳しい！気が重い！　４枚一致でＯＫ！</h4>
		<ul class="tiles"></ul>
	</div>

<div>
<a id="buttonx" onmouseover="this.style.background='#43cd80'" onmouseout="this.style.background='#337fcc'" onclick="this.style.background='#43cd80';doDataLink('//x//')">やめる</a>
</div>

    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

        <script src="gmindex3.js"></script>


  </body>
</html>