<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5+CSS3 园区物业管理3D视图</title>
<style>
html {
min-height: 100vh;
}
body {
font-family: 'Roboto Condensed', sans-serif;
margin: 0;
background-color: #ff9;
height: 100vh;
overflow: hidden;
}
#board {
-webkit-transform: rotateX(40deg) rotate(45deg);
transform: rotateX(40deg) rotate(45deg);
height: 100%;
background-color: #68c285;
-webkit-transition: 0.6s -webkit-transform;
transition: 0.6s transform;
}
.container {
-webkit-perspective: 200vh;
perspective: 200vh;
margin: 0 auto;
height: 80vmin;
width: 80vmin;
position: relative;
}
.container,
.container div {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.piece {
position: absolute;
height: 10%;
width: 10%;
z-index: 2;
}
.wall {
background-color: #343454;
}
.wall .box-roof {
background-color: #908797;
}
.wall .box-wall {
background-color: #343454;
}
.wall.us .box-wall-1,
.wall.ds .box-wall-2 {
background-color: transparent;
}
.wall.ls .box-wall-3,
.wall.rs .box-wall-4 {
display: none;
}
.wall.ls .box-roof:after,
.wall.ds .box-roof:before {
content: "";
display: block;
position: absolute;
height: 100%;
width: 100%;
background-color: #908797;
}
.wall.ls .box-roof:after {
-webkit-transform: translateX(-10%);
-ms-transform: translateX(-10%);
transform: translateX(-10%);
}
.wall.ds .box-roof:before {
-webkit-transform: translateY(10%);
-ms-transform: translateY(10%);
transform: translateY(10%);
}
.box {
background-color: #cbcac8;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.box .box-roof {
background-color: #fffaf4;
}
.box .box-wall {
background-color: #cbcac8;
}
.dropzone {
background-color: #169979;
z-index: 1;
}
.player {
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.player .box-roof {
box-sizing: border-box;
background-color: #e92830;
padding: 20%;
}
.player .box-wall {
background-color: #922124;
}
.box-wall {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: fuchsia;
}
.box-roof {
top: 0;
left: 0;
height: 100%;
width: 100%;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
.box-wall-1 {
top: auto;
bottom: 100%;
-webkit-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
.box-wall-2 {
-webkit-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: rotateX(270deg);
transform: rotateX(270deg);
}
.box-wall-3 {
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.box-wall-4 {
background-color: aqua;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
}
#success-message {
color: #fff;
position: fixed;
top: calc(50% - 1.5em);
left: calc(50% - 5em);
background-color: #272930;
line-height: 3em;
font-size: 1.4em;
width: 10em;
text-align: center;
border-radius: 0.2em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.4s -webkit-transform;
transition: 0.4s transform;
}
#success-message.hidden {
opacity: 0;
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.controls {
background-color: #272930;
color: #fff;
position: fixed;
bottom: 30px;
left: calc(50% - 14em);
width: 28em;
z-index: 2;
text-align: center;
color: #989aa4;
border-radius: 0.2em 0.2em 0 0;
}
.controls h2:after {
content: ":";
}
.controls a {
cursor: pointer;
}
.controls h2,
.controls a {
padding: 0.6em 0.6em;
margin: 0;
display: inline-block;
font-size: 1em;
}
.controls a:hover,
.controls a:active {
background-color: #1e2025;
color: #fff;
}
.controls h2 {
color: #fff;
}
.head {
-webkit-animation: float 2s alternate infinite;
animation: float 2s alternate infinite;
height: 90%;
width: 90%;
margin: 5% auto 0;
background-color: #922124;
}
.eyes {
height: 20%;
padding: 25% 10% 15%;
}
.eyes .eye {
height: 100%;
width: 20%;
margin: 0 15%;
background-color: #112f2a;
float: left;
border-radius: 50%;
}
.mouth {
width: 60%;
height: 20%;
background-color: #112f2a;
margin: 0 auto;
border-radius: 10% 10% 50% 50% / 40% 40% 80% 80%;
}
.hat {
box-sizing: border-box;
background-color: #403c3d;
border-radius: 50%;
height: 100%;
padding: 20%;
}
.hat__top {
border-radius: 50%;
background-color: #231f20;
height: 100%;
}
.hat__top div {
border-radius: 50%;
background-color: #231f20;
height: 100%;
-webkit-transform: translateZ(0.4vmin);
transform: translateZ(0.4vmin);
}
.hat__top .hat__roof {
background-color: #403c3d;
}
.low-quality .box-wall-1,
.low-quality .box-wall-3,
.low-quality .box-wall-4 {
display: none;
}
.low-quality .box-wall-2 {
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.low-quality .head {
margin: 0;
width: 100%;
height: 100%;
}
.low-quality--forced .not-low-quality {
display: none;
}
</style>
</head>
<body>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Roboto+Condensed:700'>
<div class="container">
<div id="board"></div>
</div>
<div class="controls"><a onclick="sokoban.restart()" class="view-top">Restart</a>
<h2>Rotate board</h2><a onclick="sokoban.rotate(false)">Left</a><a onclick="sokoban.rotate(true)">Right</a>
<h2 class="not-low-quality">Quality</h2><a onclick="sokoban.toggleQuality()" class="not-low-quality">Toggle</a>
</div>
<div id="success-message" class="hidden">Well done!</div>
<div id="player-markup" style="display:none">
<div class="head">
<div class="box-wall box-wall-1">
<div class="box-roof">
<div class="hat">
<div class="hat__top">
<div class="hat__band">
<div>
<div>
<div>
<div class="hat__roof"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-wall box-wall-2">
<div class="eyes">
<div class="eye"></div>
<div class="eye"></div>
</div>
<div class="mouth"></div>
</div>
<div class="box-wall box-wall-3"></div>
<div class="box-wall box-wall-4"></div>
</div>
</div>
<div id="box-markup" style="display:none">
<div class="box-wall box-wall-1">
<div class="box-roof"></div>
</div>
<div class="box-wall box-wall-2"></div>
<div class="box-wall box-wall
