|
|
|
|
@ -6,6 +6,7 @@
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=0.5">
|
|
|
|
|
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
|
|
|
|
|
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
|
|
|
|
<!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
body{
|
|
|
|
|
font-family: mono;
|
|
|
|
|
@ -609,6 +610,49 @@ right: 223px;
|
|
|
|
|
top: 348px;
|
|
|
|
|
z-index: 101;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#black_hole{
|
|
|
|
|
left: 1275.5px;
|
|
|
|
|
top: 559.5px;
|
|
|
|
|
transform: scale(5,5) !important;}
|
|
|
|
|
.black_hole {
|
|
|
|
|
border-color: #00fc33 !important;
|
|
|
|
|
background-color: black;
|
|
|
|
|
}
|
|
|
|
|
#bh1{animation-delay: 0.33s;}
|
|
|
|
|
#bh2{animation-delay: 0.66s;}
|
|
|
|
|
|
|
|
|
|
.pulse{ width: 30px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 678px;
|
|
|
|
|
top: 717px;}
|
|
|
|
|
|
|
|
|
|
.pulsate {
|
|
|
|
|
position: absolute;
|
|
|
|
|
animation: pulsate 2s ease-out;
|
|
|
|
|
animation-iteration-count: infinite;
|
|
|
|
|
opacity: 0.0;
|
|
|
|
|
|
|
|
|
|
/* you dont need the stuff below, but its what I used to create the loading circle */
|
|
|
|
|
border: 3px solid red;
|
|
|
|
|
border-radius: 30px;
|
|
|
|
|
height: 18px;
|
|
|
|
|
width: 18px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#pulse1{animation-delay: 0.0s;}
|
|
|
|
|
#pulse2{animation-delay: 0.66s;}
|
|
|
|
|
#pulse3{animation-delay: 1.33s;}
|
|
|
|
|
@-webkit-keyframes pulsate {
|
|
|
|
|
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
|
|
|
|
|
50% {opacity: 1.0;}
|
|
|
|
|
100% {-webkit-transform: scale(3, 3); opacity: 0.0;}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
@ -662,13 +706,21 @@ z-index: 101;
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="col">
|
|
|
|
|
<img id="col1" src="../img/column3.gif" class="draggable">
|
|
|
|
|
<img id="col2" src="../img/column3.gif" class="draggable">
|
|
|
|
|
</div>
|
|
|
|
|
<div id="black_hole" class="pulse draggable">
|
|
|
|
|
<div id="pulse1" class="pulsate black_hole"></div>
|
|
|
|
|
<div id="bh1" class="pulsate black_hole"></div>
|
|
|
|
|
<div id="bh2" class="pulsate black_hole"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<script type="text/javascript" src="../scripts/drag.js"></script>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
var pane = $('#sea'),
|
|
|
|
|
box = $('#mBoat'),
|
|
|
|
|
w = pane.width() - box.width()+800,
|
|
|
|
|
col = $('#col'),
|
|
|
|
|
w = pane.width() - box.width()+2000,
|
|
|
|
|
d = {},
|
|
|
|
|
x = 10;
|
|
|
|
|
|
|
|
|
|
@ -686,7 +738,24 @@ z-index: 101;
|
|
|
|
|
top: function(i,v) { return newv(v, 38, 40); }
|
|
|
|
|
});
|
|
|
|
|
}, 20);
|
|
|
|
|
|
|
|
|
|
setInterval(function() {
|
|
|
|
|
col.css({
|
|
|
|
|
left: function(i,v) { return newa(v, 37, 39); },
|
|
|
|
|
top: function(i,v) { return newa(v, 38, 40); }
|
|
|
|
|
});
|
|
|
|
|
}, 20);
|
|
|
|
|
|
|
|
|
|
$(document).keydown(
|
|
|
|
|
|
|
|
|
|
function(e){
|
|
|
|
|
if (e.keyCode == 37) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
