Tancre
/
ilinx
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'ab23419dbd'
${ noResults }
ilinx/main/world1/shore.html

909 lines
276 KiB
HTML
Raw Normal View History Unescape Escape

varie
5 years ago
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> @@@ilinχ </title>
<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>
<style type="text/css">
body{
overflow-y: hidden;
font-family: mono;
background-color: black !important;
background: radial-gradient(15px 5px at 25% 0, transparent 0%, transparent 80%, rgba(255, 255, 255, 0.06) 80%, rgba(255, 255, 255, 0.06) 99%, transparent 99%, transparent 100%),
radial-gradient(15px 5px at 75% 100%, transparent 0%, transparent 80%, rgba(255, 255, 255, 0.06) 80%, rgba(255, 255, 255, 0.06) 99%, transparent 99%, transparent 100%),
radial-gradient(10px 3px at 25% 0, transparent 0%, transparent 70%, rgba(255, 255, 255, 0.05) 70%, rgba(255, 255, 255, 0.05) 99%, transparent 99%, transparent 100%),
radial-gradient(10px 3px at 75% 100%, transparent 0%, transparent 70%, rgba(255, 255, 255, 0.05) 70%, rgba(255, 255, 255, 0.05) 99%, transparent 99%, transparent 100%),
radial-gradient(30px 8px at 25% 0, transparent 0%, transparent 55%, rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.02) 99%, transparent 99%, transparent 100%),
radial-gradient(30px 8px at 75% 100%, transparent 0%, transparent 55%, rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.02) 99%, transparent 99%, transparent 100%), #c4cbc3;
background-size: 60px 40px, 60px 40px, 40px 24px, 40px 24px, 120px 64px, 120px 64px;
/*background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;*/
-webkit-animation: wave 5s linear infinite;
animation: wave 5s linear infinite;
}
@-webkit-keyframes wave {
0% {
background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
}
}
@keyframes wave {
0% {
background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
}
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
.boat{
transform: scale(-0.3, 0.3);
top:461px;
left:900px;
margin-top:-150px;
position:absolute;
margin-left:-1000px;
}
.boat .wrap{
margin:auto;
width:860px;
height:150px;
overflow:hidden;
position:relative;
padding:50px 0 0 500px;
left: -180px;
}
.boat .main{
bottom:-3px;
position:relative;
-webkit-animation:boat-start 1s infinite;
animation:boat-start 1s infinite;
}
.boat .boat-top-layer .top:before,
.boat .boat-top-layer .top:after,
.boat .boat-top-layer .top .pole:before,
.boat .boat-top-layer .top .pole:after,
.boat .boat-top-layer .top .help:before,
.boat .boat-top-layer .top .help:after,
.boat .boat-top-layer .top .help span:before,
.boat .boat-top-layer .top .help span:after,
.boat .boat-top-layer .bottom:before,
.boat .boat-top-layer .bottom:after,
.boat .boat-mid-layer .top:before,
.boat .boat-mid-layer .top:after,
.boat .boat-mid-layer .bottom:before,
.boat .boat-mid-layer .bottom:after,
.boat .boat-bot-layer .top:before,
.boat .boat-bot-layer .top:after,
.boat .boat-bot-layer .bottom:before,
.boat .boat-bot-layer .bottom:after,
.boat .water .drop:before,
.boat .water .drop:after{
content:'';
position:absolute;
}
/* top - top */
.boat .boat-top-layer .top{
left:70px;
width:55px;
height:30px;
position:relative;
border:2px solid #fff;
}
.boat .boat-top-layer .top:before,
.boat .boat-top-layer .top:after{
background:#fff;
}
.boat .boat-top-layer .top:before{
top:50%;
left:-2px;
height:2px;
width:inherit;
margin-top:-1px;
}
.boat .boat-top-layer .top:after{
top:-30px;
width:2px;
right:-2px;
height:35px;
}
.boat .boat-top-layer .top .pole{
width:2px;
left:-2px;
z-index:1;
height:50px;
bottom:-8px;
background:#fff;
position:absolute;
}
.boat .boat-top-layer .top .pole:before,
.boat .boat-top-layer .top .pole:after{
position:absolute;
background:inherit
}
.boat .boat-top-layer .top .pole:before{
top:-5px;
left:50%;
width:15px;
height:8px;
border-radius:4px;
margin-left:-7.5px;
}
.boat .boat-top-layer .top .pole:after{
bottom:0;
left:30px;
width:2px;
height:35px;
}
.boat .boat-top-layer .top .help{
z-index:1;
width:30px;
height:30px;
margin-top:-2px;
margin-left:-1px;
position:relative;
border-radius:50%;
border:8px solid #f04850;
}
.boat .boat-top-layer .top .help:before,
.boat .boat-top-layer .top .help:after{
top:50%;
left:50%;
position:absolute;
background:rgba(0,0,0,.3);
}
.boat .boat-top-layer .top .help:before{
height:2px;
width:inherit;
margin-top:-1px;
margin-left:-15px;
}
.boat .boat-top-layer .top .help:after{
width:2px;
height:inherit;
margin-top:-15px;
margin-left:-1px;
}
.boat .boat-top-layer .top .help span{
top:-2px;
width:14px;
height:14px;
overflow:hidden;
border-radius:50%;
position:relative;
display:inline-block;
}
.boat .boat-top-layer .top .help span:before,
.boat .boat-top-layer .top .help span:after{
top:50%;
left:50%;
z-index:1;
background:#fff;
position:absolute;
}
.boat .boat-top-layer .top .help span:before{
width:2px;
height:inherit;
margin-top:-7px;
margin-left:-1px;
}
.boat .boat-top-layer .top .help span:after{
height:2px;
width:inherit;
margin-top:-1px;
margin-left:-7px;
}
/* top - bottom */
.boat .boat-top-layer .bottom{
left:55px;
height:5px;
width:75px;
position:relative;
background:#688b77;
border-radius:5px 3px 0 0;
}
.boat .boat-top-layer .bottom:before,
.boat .boat-top-layer .bottom:after{
background:#fff;
}
.boat .boat-top-layer .bottom:before{
left:8px;
top:-30px;
width:5px;
height:35px;
-webkit-transform:skewX(-25deg);
transform:skewX(-25deg);
}
.boat .boat-top-layer .bottom:after{
bottom:0;
left:30px;
width:2px;
height:85px;
}
/* middle - top */
.boat .boat-mid-layer .top{
left:60px;
width:70px;
height:20px;
position:relative;
background:#222e28;
border-top:5px solid #fff;
border-right:5px solid #fff;
}
.boat .boat-mid-layer .top:before{
top:-5px;
left:-10px;
width:18px;
height:inherit;
background:inherit;
border-top:inherit;
border-right:inherit;
border-left:5px solid #fff;
-webkit-transform:skewX(-25deg);
transform:skewX(-25deg);
}
.boat .boat-mid-layer .top:after{
top:-5px;
width:5px;
height:5px;
right:-10px;
background:#fff;
border-radius:0 3px 3px 0;
}
/* middle - bottom */
.boat .boat-mid-layer .bottom{
left:25px;
width:105px;
height:12px;
background:#fff;
position:relative;
}
.boat .boat-mid-layer .bottom:before{
left:-5px;
width:10px;
height:inherit;
background:inherit;
border-radius:3px 0 0 0;
-webkit-transform:skewX(-25deg);
transform:skewX(-25deg);
}
.boat .boat-mid-layer .bottom:after{
top:3px;
right:5px;
height:5px;
width:20px;
background:#d0e2d7;
}
/* bottom - top */
.boat .boat-bot-layer .top{
left:-10px;
height:5px;
width:180px;
position:relative;
background:#688b77;
border-radius:5px 5px 0 0;
}
.boat .boat-bot-layer .top:before,
.boat .boat-bot-layer .top:after{
width:5px;
height:5px;
bottom:100%;
background:#222e28;
border-radius:2px 2px 0 0;
}
.boat .boat-bot-layer .top:before{
left:10px;
}
.boat .boat-bot-layer .top:after{
right:25px;
}
/* bottom - bottom */
.boat .boat-bot-layer .bottom{
width:180px;
height:25px;
position:relative;
border-radius:2px;
background:#222e28;
}
.boat .boat-bot-layer .bottom:before{
left:-15px;
width:25px;
height:25px;
background:inherit;
border-radius:inherit;
-webkit-transform:skewX(25deg);
transform:skewX(25deg);
}
.boat .boat-bot-layer .bottom:after{
top:-13px;
left:28px;
width:5px;
height:5px;
border-radius:50%;
background:inherit;
}
.boat .water{
bottom:0;
left:150px;
position:absolute;
left: 450px;
}
.boat .water .drops{
width:300px;
height:22px;
position:relative;
}
.boat .water .drop{
left:0;
bottom:0;
background:#fff;
position:absolute;
}
.boat .water .drop:before,
.boat .water .drop:after{
background:inherit;
border-radius:inherit;
}
.boat .water .drop.drop-a,
.boat .water .drop.drop-b,
.boat .water .drop.drop-e,
.boat .water .drop.drop-f,
.boat .water .drop.drop-g{
height:5px;
border-radius:3px 3px 0 0;
}
.boat .water .drop.drop-a{
width:10px;
}
.boat .water .drop.drop-b,
.boat .water .drop.drop-e,
.boat .water .drop.drop-f,
.boat .water .drop.drop-g{
left:15px;
width:22px;
}
.boat .water .drop.drop-c{
left:37px;
width:32px;
height:7px;
border-radius:6px 6px 0 0;
}
.boat .water .drop.drop-c:before,
.boat .water .drop.drop-c:after,
.boat .water .drop.drop-d:before,
.boat .water .drop.drop-d:after,
.boat .water .drop.drop-g:before{
width:2px;
height:2px;
border-radius:50%;
}
.boat .water .drop.drop-c:before{
left:0;
top:-5px;
}
.boat .water .drop.drop-c:after{
top:-8px;
right:5px;
width:4px;
height:4px;
}
.boat .water .drop.drop-d{
left:68px;
width:25px;
height:10px;
border-radius:10px 10px 0 0;
}
.boat .water .drop.drop-d:before{
top:-8px;
left:8px;
}
.boat .water .drop.drop-d:after{
top:-2px;
right:-8px;
}
.boat .water .drop.drop-e{
left:93px;
}
.boat .water .drop.drop-f{
width:50px;
left:115px;
height:4px;
}
.boat .water .drop.drop-g{
left:auto;
right:75px;
width:40px;
height:2.5px;
}
.boat .water .drop.drop-g:before{
top:-5px;
left:-5px;
}
.boat .water .drop.drop-g:after{
left:100%;
width:12px;
height:inherit;
}
.boat .water .drop.drop-h{
left:auto;
right:25px;
height:2px;
width:25px;
}
.boat .water .drop.drop-h:before,
.boat .water .drop.drop-h:after{
height:inherit;
}
.boat .water .drop.drop-h:before{
left:30px;
width:10px;
}
.boat .water .drop.drop-h:after{
left:45px;
width:4px;
}
.boat .water .drops-2{
bottom:0;
left:30px;
position:absolute;
}
.boat .water .drops-2 .drop.drop-a{
width:15px;
border-radius:5px 5px 0 0;
}
.boat .water .drops-2 .drop.drop-b{
height:10px;
border-radius:10px 10px 0 0;
}
.boat .water .drops-2 .drop.drop-c:before{
left:10px;
top:-10px;
}
.boat .water .drops-2 .drop.drop-c:after{
top:-12px;
right:-25px;
}
.boat .water .drops-2 .drop.drop-d{
height:8px;
}
.boat .water .drops-2 .drop.drop-d:before{
top:-15px;
left:35px;
}
.boat .water .drops-2 .drop.drop-d:after{
top:-8px;
right:-55px;
}
.boat .water .drops-2 .drop.drop-g:before{
right:0;
top:-10px;
left:auto;
}
.boat .water .drops-2 .drop.drop-h{
bottom:0;
width:10px;
left:auto;
height:5px;
right:45px;
border-radius:5px 5px 0 0;
}
.boat .water .drops-2 .drop.drop-h:before,
.boat .water .drops-2 .drop.drop-h:after{
display:none;
}
.drops-1{
-webkit-animation:blink .8s linear infinite;
animation:blink .8s linear infinite;
}
.drops-2{
-webkit-animation:blink 1.6s linear infinite;
animation:blink 1.6s linear infinite;
}
@-webkit-keyframes boat-start{
0%{
-webkit-transform:none;
transform:none;
}
50%{
-webkit-transform:translateY(4px);
transform:translateY(4px);
}
100%{
-webkit-transform:none;
transform:none;
}
}
@keyframes boat-start{
0%{
transform:none;
}
50%{
transform:translateY(4px);
}
100%{
transform:none;
}
}
@-webkit-keyframes blink{
25%{
visibility:hidden;
}
50%{
visibility:hidden;
}
100%{
visibility:visible;
}
}
@keyframes blink{
25%{
visibility:hidden;
}
50%{
visibility:hidden;
}
100%{
visibility:visible;
}
}
#sea {position: relative; width: 100%, height:100vh;}
#black_hole{
left: 350px;
top: 300px;
transform: scale(5,5) !important;
z-index: -1;}
.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: 1px 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;}
}
.btn{ display: none;
position: absolute;
left: 2640px;
top: 220px;
width: 500px;
padding: 100px;
text-align: center;
color: white;}
/* ----------------------------- SVG ----------------------------- */
text {
font-family: "Lucida Console", Monaco, monospace;
color: black;
stroke: white;
stroke-width: 6;
stroke-linejoin: round;
paint-order: stroke;
}
text.region {
stroke-width:6;
font-variant: small-caps;
}
#lmr {display: none;}
svg {
transform: scale(4,4);
left: 4000px;
position:absolute;
float: right;
}
path {
/*fill: none;*/
stroke: white;
stroke-linecap: round;
}
line {
fill: none;
stroke: white;
stroke-linecap: round;
}
circle{
stroke-width: 2px !important;
stroke: red !important;
}
.field {
stroke: none;
fill-opacity: 1.0;
}
.slope {
stroke-width: 0.5;
}
.river {
stroke-width: 1;
}
.coast {
stroke-width: 1.4;
}
.border {
stroke-width: 1;
stroke-dasharray: 4,4;
stroke-linecap: butt;
}
.txt {color: white;
position: absolute;}
#t1{ top: 200px; left: 50px ; }
#t2{ top: 200px;
left: 2500px;
width: 1300px; display: none;}
#t3{ top: 628px;
left: 6091px;
display: none;
z-index: 101;
width: 104px;
font-size: 22px;
background: yellow;
text-align: center;
padding: 3px;}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="sea"></div>
<div id="mBoat" class="boat">
<!-- <div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
Arrows to move
</div> -->
<div class="wrap">
<div class="main">
<div class="boat-top-layer">
<div class="top">
<div class="pole"></div>
<div class="help"><span></span></div>
</div>
<div class="bottom"></div>
</div>
<div class="boat-mid-layer">
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="boat-bot-layer">
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
</div>
<div class="water">
<div class="drops clearfix drops-1">
<span class="drop drop-a"></span>
<span class="drop drop-b"></span>
<span class="drop drop-c"></span>
<span class="drop drop-d"></span>
<span class="drop drop-e"></span>
<span class="drop drop-f"></span>
<span class="drop drop-g"></span>
<span class="drop drop-h"></span>
</div>
<div class="drops clearfix drops-2">
<span class="drop drop-a"></span>
<span class="drop drop-b"></span>
<span class="drop drop-c"></span>
<span class="drop drop-d"></span>
<span class="drop drop-e"></span>
<span class="drop drop-f"></span>
<span class="drop drop-g"></span>
<span class="drop drop-h"></span>
</div>
</div>
</div>
<div id="black_hole" class="pulse">
<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>
<div id="t1" class="txt">A glimpse of truth, flashed out from an accidental chaos...</div>
<div id="t2" class="txt">..and certainly, if I live, I must knowingly supply a link in so impossible chain...</div>
<div id="t3" class="txt"><a href="main_l.html">port:80</a> </div>
<div id="lmr" >
<svg width="1000" height="1000" viewBox="-1050 -500 1000 1000">
<path class="coast" d="M14.485,412.00699999999995L32.919999999999995,418.30899999999997L46.18,402.505L64.926,406.509L82.85900000000001,409.03499999999997L95.79899999999999,408.73299999999995L106.239,411.95L116.341,401.69899999999996L139.876,412.43399999999997L154.98999999999998,405.285L168.38400000000001,395.148L176.87699999999998,378.683L186.298,380.992L185.98299999999998,368.19199999999995L203.29,362.029L213.195,341.07599999999996L206.706,325.98L216.349,308.33099999999996L228.862,303.993L237.022,300.154L239.04199999999997,295.162L245.782,286.835L244.84,273.626L238.676,256.47700000000003L238.084,235.542L229.905,223.408L211.02499999999998,229.921L193.29399999999998,225.28099999999998L179.22199999999998,221.403L161.79399999999998,228.96999999999997L156.055,244.28699999999998L132.823,249.76299999999998L116.713,267.645L108.142,277.72799999999995L101.14099999999999,288.073L108.624,306.171L119.047,317.324L113.006,330.02L113.078,339.54499999999996L109.83999999999999,354.16900000000004L97.82,369.25399999999996L81.704,376.54499999999996L68.01499999999999,372.76599999999996L72.035,359.08599999999996L60.993,351.281L52.88699999999999,347.50899999999996L47.55,344.36499999999995L45.864999999999995,337.41499999999996L36.93,330.798L29.595,324.43699999999995L30.455999999999996,314.332L41.768,307.606L42.939,290.226L57.315,288.09299999999996L65.37899999999999,283.662L53.141,269.855L54.211999999999996,247.381L63.248,233.983L76.583,224.05899999999997L87.006,202.41799999999998L101.756,182.954L101.764,159.189L97.506,137.75199999999998L77.649,124.57499999999999L78.564,114.49199999999999L95.991,106.46799999999999L108.63099999999999,97.844L120.505,84.759L129.238,67.441L132.08,44.101L137.331,22.444L148.40399999999997,5.078L144.007,-21.680999999999997L152.528,-29.869999999999997L160.498,-42.914L168.436,-63.19L181.69,-68.12L186.684,-84.328L191.189,-96.815L185.086,-107.89999999999999L184.893,-119.19399999999999L180.35099999999997,-135.429L171.117,-148.953L157.319,-160.439L132.53099999999998,-157.473L105.16,-166.278L95.021,-159.65699999999998L77.853,-167.00799999999998L80.608,-180.95L85.52799999999999,-197.428L98.073,-203.57699999999997L108.433,-214.50799999999998L105.379,-226.661L104.37199999999999,-232.99599999999998L96.14399999999999,-238.84699999999998L84.39099999999999,-244.51799999999997L70.35,-262.86199999999997L80.24,-290.274L68.47399999999999,-305.643L57.942,-319.659L47.787,-337.96999999999997L41.332,-347.252L34.789,-348.887L18.754,-345.31600000000003L6.279,-331.84L-6.601999999999999,-317.11899999999997L-30.233999999999998,-306.82899999999995L-32.33,-290.445L-45.307,-283.606L-53.858,-263.121L-67.38,-249.412L-77.364,-241.45999999999998L-79.827,-226.505L-71.381,-211.825L-92.041,-201.76L-115.953,-205.874L-127.34799999999998,-198.743L-139.885,-197.657L-147.82799999999997,-199.39399999999998L-151.918,-211.54199999999997L-163.91699999999997,-216.40499999999997L-158.683,-231.652L-175.795,-231.702L-176.35099999999997,-251.95000000000002L-196.748,-254.81599999999997L-216.90099999999998,-247.23399999999998L-235.022,-239.401L-244.257,-230.63799999999998L-251.15300000000002,-226.429L-255.04399999999998,-214.503L-250.674,-196.577L-235.207,-174.243L-223.736,-148.067L-210.918,-131.966L-215.297,-113.37499999999999L-211.42799999999997,-104.547L-213.023,-90.61099999999999L-219.92399999999998,-79.5L-224.399,-64.179L-218.411,-48.071999999999996L-225.87699999999998,-31.24L-224.84199999999998,-15.703999999999999L-204.35999999999999,-2.4979999999999998L-189.185,20.168L-173.507,34.98L-156.623,37.287L-143.278,52.031L-136.986,68.21L-135.368,96.41L-121.099,118.17499999999998L-102.435,128.81799999999998L-117.99799999999999,151.48999999999998L-92.871,156.162L-80.40799999999999,155.911L-71.99,163.12699999999998L-61.653,167.62099999999998L-44.119,158.664L-20.943,172.046L-14.133,192.844L-1.8529999999999998,204.63299999999998L1.3989999999999998,219.723L-10.421,233.559L-11.483,248.998L-3.489,258.395L2.568,279.592L12.008,299.33L9.06,319.393L18.459,334.23199999999997L8.764,350.317L-5.145,350.48199999999997L-13.316999999999998,362.474L-9.691999999999998,379.37L4.061,39
<path class="river" d="
M-45.64652641652284,-271.7205168361087L-47.412163783480985,-272.45754222663146">
</path><path class="river" d="M14.266485988429102,-200.50645674581318L19.111661955433938,-196.4914455209415L21.19034605305789,-192.5864552561551L20.30406758435605,-185.825177925533L21.38362914983147,-175.79475576829788L26.964634978844625,-170.7550236791831L33.164584608940295,-169.18205408197161L39.04202502386281,-166.1330369564511L44.8930036000617,-164.22212005567738L50.06233424741945,-161.9729783478942"></path><path class="river" d="M-79.88706899647939,-203.0485939361415L-81.30420747772234,-205.9574941867604"></path><path class="river" d="M50.06233424741945,-161.9729783478942L53.13825900641802,-161.8391020284658L55.74496748242852,-163.1485296951049L61.00723951465925,-165.2811314389413L67.90361134051463,-168.20199864381857L74.18442720355532,-172.3254026270346L81.54797394294692,-173.52105704254635"></path><path class="river" d="M20.793262797993254,-144.91928230400003L29.241124556391497,-152.98053240489557L36.22954459716381,-154.15405204525368L41.71018403911587,-155.25487738295175L50.06233424741945,-161.9729783478942"></path><path class="river" d="M-4.081258629599717,-149.70644628729846L2.4126162882845295,-148.79606615693007L8.314151718757842,-150.70984260892573L13.680723008358546,-150.23756615194932L20.793262797993254,-144.91928230400003"></path><path class="river" d="M89.21813763281104,-68.90544194626544L84.58722707909634,-80.24864133261491L84.39158219446954,-86.8620585745307L86.07578983957228,-92.57775961919384L83.99242225080783,-96.7749702282384L78.6648976995957,-100.58234768966472L74.11918951238872,-106.83922654302295L70.47603885654071,-112.1249962622301L67.17120365488125,-114.49283885259956L63.20550342155962,-116.68528802193693L58.14031546823612,-119.53129342769866L53.56136333448825,-124.64231629547767L48.71346620098895,-131.92337643824627L42.383604742043474,-137.23015907798577L34.274745401315755,-140.63748213507338L21.942459769249396,-141.71319296814775"></path><path class="river" d="M-16.272649644443778,-127.76701535892873L-9.696373982043424,-130.5521842052181L-3.183348363744905,-132.1519563105815L3.4199712661209527,-133.07103848775898L11.389657132535074,-133.92115118414998L18.50762400014946,-137.01848599930184L21.942459769249396,-141.71319296814775"></path><path class="river" d="M-36.73846085321499,-137.52641982479605L-27.5555669766498,-136.2465451315096L-16.272649644443778,-127.76701535892873"></path><path class="river" d="M21.942459769249396,-141.71319296814775L20.793262797993254,-144.91928230400003"></path><path class="river" d="M-190.79029415155995,-136.63274805932585L-194.45515896510784,-136.77675534895528L-201.4762757948214,-133.45848480430882L-208.28804383887464,-125.9887493667214L-212.70403988107455,-122.57546735728178"></path><path class="river" d="M-68.0946630579318,-80.26932601581541L-67.27601349895531,-90.19330036465618L-70.98855542640344,-102.41707268486297L-70.57630191521594,-111.95657265474385L-64.36060190232175,-118.39495987704723L-54.140591503359005,-121.40341053829543L-41.979544165313044,-118.68833012646249L-32.34531628323024,-116.6648525695027L-25.4162942237335,-117.07498795016947L-20.343784954514817,-120.036460567779L-16.272649644443778,-127.76701535892873"></path><path class="river" d="M-96.8206307976914,-34.94345500648941L-93.11969452413726,-43.20579057436851L-91.20671933995168,-49.9717163549108L-88.96277086590653,-54.447205527776205L-86.34612566978491,-58.311763456508515L-84.86613736500233,-64.16121749242915L-85.07429908326799,-71.69838995122312L-80.76981342707354,-77.90879310098572L-68.0946630579318,-80.26932601581541"></path><path class="river" d="M-58.200501707340344,-63.474424984904715L-63.96723389311253,-69.48767572502271L-68.0946630579318,-80.26932601581541"></path><path class="river" d="M-113.61669997269841,22.085303427709995L-118.68773157283195,28.5379058592206L-123.23537519835406,35.64961688064021L-127.47683209978817,39.11665021562174L-131.1788673022759,42.4563357334319L-137.57174375377048,46.35590826480619L-150.12697971049906,44.81873424692149"></path><path class="river" d="M-147.55205731462743,28.204357372465296L-147.51138560458818,35.15622734030082L-150.12697971049906,44
<path class="river" d="M43.20265962657084,97.05619367807287L53.75274944862377,107.92193352529178L62.72932466557638,110.79581414936496L68.17874922504011,106.27673293952043"></path><path class="river" d="M68.17874922504011,106.27673293952043L82.37624805394447,109.15430347103374L88.61776790755235,113.39087348266638"></path><path class="river" d="M0.06800806132953915,149.95252294177982L-5.035809743352283,156.25716738698117L-9.7579634212135,163.6295573507307L-10.742710864779426,171.14291356821593L-12.84258530420914,176.82987617276478L-18.498136095604472,181.51873920364997L-22.556707058918192,184.08830200361731"></path><path class="river" d="M206.6543303958897,314.4929143298524L210.70089428134335,316.7038620066289"></path>
<path class="coast" d="M-356.265,-51.443999999999996L-335.962,-61.623L-326.69499999999994,-85.646L-351.744,-106.148L-365.716,-117.192L-384.61899999999997,-113.158L-384.42699999999996,-92.594L-398.922,-91.10399999999998L-397.104,-70.684L-388.417,-60.775999999999996L-379.83099999999996,-56.829L-370.291,-53.946999999999996L-356.265,-51.443999999999996"></path><path class="coast" d="M-356.28499999999997,144.88199999999998L-340.538,147.40200000000002L-328.772,144.302L-308.561,126.463L-288.56699999999995,101.95599999999999L-295.591,72.077L-290.38199999999995,54.228L-277.024,45.398999999999994L-284.554,32.946L-293.351,31.194L-303.74,22.886L-325.478,11.033L-335.82099999999997,27.961999999999996L-349.75999999999993,33.332L-362.876,45.957L-361.467,64.22200000000001L-375.46299999999997,69.89399999999999L-378.755,85.80199999999999L-383.407,98.039L-383.21,116.382L-373.598,127.17899999999999L-368.747,136.154L-364.108,140.983L-356.28499999999997,144.88199999999998"></path><path class="coast" d="M259.72499999999997,99.66L286.63,98.83L293.83899999999994,85.634L272.921,74.14999999999999L288.80699999999996,54.347L269.54499999999996,45.138L253.67899999999997,32.158L238.23,31.651L227.945,31.341L218.254,28.070999999999998L206.316,34.355999999999995L204.981,48.664L201.32500000000002,64.25L211.314,77.57L227.339,93.901L245.423,105.344L259.72499999999997,99.66"></path><path class="coast" d="M385.81899999999996,113.559L402.038,114.988L407.877,99.744L421.662,80.00399999999999L405.283,64.779L415.39,44.193L389.546,33.38L367.06600000000003,33.339L360.195,38.604L355.573,49.117000000000004L358.67,66.47399999999999L369.11699999999996,80.673L377.19199999999995,94.719L381.45599999999996,104.046L385.81899999999996,113.559"></path><path class="coast" d="M-307.118,308.18899999999996L-287.455,307.487L-276.40999999999997,300.942L-270.70099999999996,308.91799999999995L-259.089,302.807L-248.577,291.162L-236.371,280.885L-215.501,283.448L-191.988,278.342L-177.73699999999997,271.89L-165.30499999999998,270.623L-155.727,264.69L-143.598,253.53199999999998L-142.486,236.846L-126.70699999999998,227.495L-139.926,217.384L-144.385,193.793L-155.418,183.41299999999998L-172.813,178.408L-181.93499999999997,162.443L-195.549,178.801L-212.371,180.13299999999998L-227.64499999999998,177.95999999999998L-240.356,186.682L-261.106,178.85799999999998L-282.028,176.44899999999998L-296.953,177.47199999999998L-311.909,191.131L-327.144,184.23199999999997L-334.63499999999993,188.30700000000002L-344.993,194.719L-346.027,205.99599999999998L-355.938,219.36799999999997L-350.618,229.777L-354.289,237.813L-352.21999999999997,249.07199999999997L-342.40299999999996,263.66200000000003L-337.053,279.125L-319.625,292.758L-307.118,308.18899999999996"></path><path class="coast" d="M443.26899999999995,212.017L436.311,199.45399999999998L426.731,187.851L410.647,179.95799999999997L402.082,200.673L392.96500000000003,222.72799999999998L406.557,232.874L406.66999999999996,241.643L401.30899999999997,255.51599999999996L407.43999999999994,274.926L430.21999999999997,288.176L441.22,309.138L456.873,296.508"></path><path class="coast" d="M299.938,340.907L317.714,339.289L310.863,329.57599999999996L296.114,327.193L282.284,328.758L287.279,343.952L299.938,340.907"></path><path class="coast" d="M-156.108,394.679L-132.28599999999997,403.866L-125.74199999999999,391.23199999999997L-108.126,381.157L-113.514,369.07199999999995L-111.73899999999999,355.12699999999995L-125.86999999999998,350.729L-139.213,348.537L-149.011,337.99199999999996L-165.603,344.12899999999996L-173.821,363.125L-182.066,367.395L-181.26799999999997,379.53L-177.75900000000001,398.388L-156.108,394.679"></path><line class="slope" x1="415.83917841314684" y1="245.01799447891761" x2="422.0803419883205" y2="241.99920029649755"></line><line class="slope" x1="-197.74818567991474" y1="234.5111237636928" x2="-191.1592972237665" y2="237.575575149239"></line><line class="slope" x1="-150.58678904791236" y1="240.0485298157304" x2="-147.2197174717669" y2="248.09055069285532"></line><line class="slope" x1="-151.49287512453495" y1="242.3088759067626" x2="-148.12580354838948
<line class="slope" x1="131.43493969783026" y1="-452.9040696637502" x2="140.16452452078298" y2="-445.8758205009088"></line><line class="slope" x1="141.59253957210564" y1="-446.7553522074132" x2="146.445094733851" y2="-435.718968031939"></line><line class="slope" x1="117.5028423641112" y1="-446.25872723916905" x2="122.52667437407347" y2="-450.04240067670634"></line><line class="slope" x1="114.31462720525917" y1="-431.4429723651809" x2="119.0721440512253" y2="-434.55737485248574"></line><line class="slope" x1="143.05698606379715" y1="-441.13732374505264" x2="147.905223434739" y2="-431.0998573287955"></line><line class="slope" x1="105.51380342136484" y1="-423.9041966520754" x2="112.87790422146583" y2="-432.84771840129685"></line><line class="slope" x1="135.25032175032717" y1="-426.06702864407197" x2="139.98746093770782" y2="-418.47762281944347"></line><line class="slope" x1="127.64988860182272" y1="-423.9307534132147" x2="134.0367723158007" y2="-419.55272507406744"></line><line class="slope" x1="-97.5073736462543" y1="-386.8690047882086" x2="-91.94491769500414" y2="-381.2089174794738"></line><line class="slope" x1="-95.08840003019398" y1="-383.68239125151536" x2="-89.52594407894382" y2="-378.0223039427806"></line><line class="slope" x1="-89.90910327885614" y1="-364.6952306100374" x2="-86.2472804232821" y2="-358.58847301810937"></line><line class="slope" x1="-96.35724515404772" y1="-371.2654142415833" x2="-92.69542229847367" y2="-365.1586566496553"></line><line class="slope" x1="-116.17339356241558" y1="-367.8204016900761" x2="-104.51183819266237" y2="-366.0299743589558"></line><line class="slope" x1="-119.0908951758781" y1="-360.4078624619079" x2="-112.89815078060862" y2="-365.51272816083474"></line><line class="slope" x1="-97.97636205590811" y1="-362.47655703221614" x2="-93.15845190524273" y2="-355.4356433428464"></line><line class="slope" x1="-92.221871562196" y1="-366.2227074561306" x2="-87.40396141153062" y2="-359.18179376676085"></line><line class="slope" x1="-93.64711683702976" y1="-371.68592040036543" x2="-90.5872759478305" y2="-366.10579236084936"></line><line class="slope" x1="-86.0982120955424" y1="-363.9056785558173" x2="-83.03837120634316" y2="-358.3255505163013"></line><line class="slope" x1="-95.44898684604986" y1="-363.8718747807441" x2="-92.38914595685061" y2="-358.2917467412281"></line><line class="slope" x1="-132.24823625457822" y1="-346.72297478579725" x2="-129.29987034927188" y2="-353.06963787703666"></line><line class="slope" x1="-126.58474690868476" y1="-351.92016689584614" x2="-123.63638100337842" y2="-358.2668299870856"></line><line class="slope" x1="-133.41265307889248" y1="-347.2081272426657" x2="-130.46428717358614" y2="-353.55479033390515"></line><line class="slope" x1="-83.16822394520031" y1="-359.6842928838554" x2="-80.5032346586538" y2="-353.0077933173749"></line><line class="slope" x1="-89.31728191688018" y1="-363.0108057999379" x2="-86.65229263033366" y2="-356.33430623345737"></line><line class="slope" x1="-84.25058217672883" y1="-365.80779569757607" x2="-81.58559289018231" y2="-359.1312961310955"></line><line class="slope" x1="-84.80263002375536" y1="-353.3287258011886" x2="-82.18976728526883" y2="-346.53902549121835"></line><line class="slope" x1="-80.73195862562457" y1="-353.8702254611266" x2="-78.11909588713806" y2="-347.08052515115634"></line><line class="slope" x1="-79.75270484346322" y1="-351.5105519699148" x2="-77.13984210497671" y2="-344.72085165994446"></line><line class="slope" x1="-96.37464987949133" y1="-351.42527247071047" x2="-92.46847895963812" y2="-344.51147532882817"></line><line class="slope" x1="-95.32874658832782" y1="-353.19893988391425" x2="-91.42257566847462" y2="-346.28514274203195"></line><line class="slope" x1="-122.54748574675403" y1="-354.10904525373746" x2="-111.32926439464353" y2="-364.84423064684904"></line><line class="slope" x1="30.68015102599314" y1="-339.05768885456285" x2="39.68510337392117" y2="-334.0477677439933"></line><line class="slope" x1="-90.04678687008918" y1="-351.8870381960502" x2="-87.1882651338502" y2="-344.6944695673264"></line><lin
<!-- <circle class="city" cx="73.01812150047887" cy="-175.20659308321478" r="10" style="fill: white; stroke-width: 5px; stroke-linecap: round; stroke: black;"></circle>
<circle class="city" cx="68.17874922504011" cy="106.27673293952043" r="10" style="fill: white; stroke-width: 5px; stroke-linecap: round; stroke: black;"></circle> -->
<circle class="city" cx="-150.12697971049906" cy="44.81873424692149" r="3" style="fill: white; stroke-width: 5px; stroke-linecap: round; stroke: black;"></circle>
<!-- <circle class="city" cx="206.6543303958897" cy="314.4929143298524" r="10" style="fill: white; stroke-width: 5px; stroke-linecap: round; stroke: black;"></circle>
<circle class="city" cx="-257.04538046242783" cy="294.0846680188028" r="10" style="fill: white; stroke-width: 5px; stroke-linecap: round; stroke: black;"></circle>
<circle class="city" cx="-135.07601455781887" cy="-326.87829871139644" r="4" style="fill: white; stroke-width: 5px; stroke-linecap: round; stroke: black;"></circle>
<circle class="city" cx="368.6556706671621" cy="70.06970417213589" r="4" style="fill: white; stroke-width: 5px; stroke-linecap: round; stroke: black;"></circle>
<circle class="city" cx="-381.8801921712643" cy="-102.9006751168604" r="4" style="fill: white; stroke-width: 5px; stroke-linecap: round; stroke: black;"></circle>
<circle class="city" cx="130.84333045881172" cy="-421.74173924364106" r="4" style="fill: white; stroke-width: 5px; stroke-linecap: round; stroke: black;"></circle>
<circle class="city" cx="2.0144137323067426" cy="381.7431091817825" r="4" style="fill: white; stroke-width: 5px; stroke-linecap: round; stroke: black;"></circle>
<circle class="city" cx="417.1968712609095" cy="284.35874888124386" r="4" style="fill: white; stroke-width: 5px; stroke-linecap: round; stroke: black;"></circle>
<circle class="city" cx="-374.70211858289514" cy="107.11806925589218" r="4" style="fill: white; stroke-width: 5px; stroke-linecap: round; stroke: black;"></circle>
<circle class="city" cx="-70.9317822211652" cy="-114.25222982605386" r="4" style="fill: white; stroke-width: 5px; stroke-linecap: round; stroke: black;"></circle>
<circle class="city" cx="-175.77213188834017" cy="388.2628253948555" r="4" style="fill: white; stroke-width: 5px; stroke-linecap: round; stroke: black;"></circle>
<circle class="city" cx="178.55335042851956" cy="-77.95983699160745" r="4" style="fill: white; stroke-width: 5px; stroke-linecap: round; stroke: black;"></circle>
<circle class="city" cx="-233.71001836167943" cy="-228.77063968619305" r="4" style="fill: white; stroke-width: 5px; stroke-linecap: round; stroke: black;"></circle>
<circle class="city" cx="308.67097081295077" cy="338.3947868794888" r="4" style="fill: white; stroke-width: 5px; stroke-linecap: round; stroke: black;"></circle>
<circle class="city" cx="35.53895072089697" cy="-336.33782120269234" r="4" style="fill: white; stroke-width: 5px; stroke-linecap: round; stroke: black;"></circle>
<circle class="city" cx="-340.8388013293666" cy="252.01179212819684" r="4" style="fill: white; stroke-width: 5px; stroke-linecap: round; stroke: black;"></circle> -->
<!-- <text class="city" x="93.01812150047887" y="-167.70659308321478" style="text-anchor: start;">Ulkiltarkalm</text>
<text class="city" x="68.17874922504011" y="136.27673293952043" style="text-anchor: middle;">Kalmurmtar</text>
<text class="city" x="-150.12697971049906" y="24.818734246921487" style="text-anchor: middle;">Malilnmal</text>
<text class="city" x="206.6543303958897" y="344.4929143298524" style="text-anchor: middle;">Tarurmul</text>
<text class="city" x="-257.04538046242783" y="274.08466801880274" style="text-anchor: middle;">Ululiln</text>
<text class="city" x="-151.0760145578189" y="-320.87829871139644" style="text-anchor: end;">Urkiln</text>
<text class="city" x="352.6556706671621" y="76.06970417213589" style="text-anchor: end;">Ulpiln</text>
<text class="city" x="-365.8801921712643" y="-96.90067511686038" style="text-anchor: start;">Ililnulmnarm</text>
<text class="city" x="146.8433304588117" y="-415.74173924364106" style="text-anchor: start;">nulm Tarul</text>
<text class="city" x="-13.985586267693257" y="387.7431091817825" style="text-anchor: end;">Tarnilk</text>
<text class="city" x="401.1968712609095" y="290.35874888124386" style="text-anchor: end;">Urmulpulmtar</text>
<text class="city" x="-374.70211858289514" y="131.11806925589218" style="text-anchor: middle;">Tarttarilk</text>
<text class="city" x="-70.9317822211652" y="-130.25222982605385" style="text-anchor: middle;">Mulkkalmsal</text>
<text class="city" x="-191.7721318883402" y="394.2628253948555" style="text-anchor: end;">Tarmal</text>
<text class="city" x="194.55335042851956" y="-71.95983699160743" style="text-anchor: start;">Ulpmulsalal</text>
<text class="city" x="-249.71001836167943" y="-222.77063968619305" style="text-anchor: end;">Nilkiln</text>
<text class="city" x="324.67097081295077" y="344.3947868794888" style="text-anchor: start;">Tururm</text>
<text class="city" x="51.53895072089698" y="-330.33782120269234" style="text-anchor: start;">Maltarnarm</text>
<text class="city" x="-340.8388013293666" y="236.01179212819684" style="text-anchor: middle;">Ulkirsal</text>
<text class="region" x="-2.475163477353666" y="-198.43120266023806" style="text-anchor: middle;">Ilkmuln</text>
<text class="region" x="55.457647901605164" y="85.61091247305917" style="text-anchor: middle;">Ulpilmal</text>
<text class="region" x="-151.15538909815874" y="-6.172305276951007" style="text-anchor: middle;">Mulnlulm</text>
<text class="region" x="225.73937281815884" y="260.0288995206095" style="text-anchor: middle;">nulm Mulnpur</text>
<text class="region" x="-257.5527808956305" y="210.45022946399706" style="text-anchor: middle;">Urkirilmulm</text> -->
</svg>
</div>
<script>
var pane = $('#sea'),
box = $('#mBoat'),
col = $('#col'),
w = pane.width() - box.width()+5550,
d = {},
x = 10;
function newv(v,a,b) {
var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
return n < 0 ? 0 : n > w ? w : n;
}
$(window).keydown(function(e) { d[e.which] = true; });
$(window).keyup(function(e) { d[e.which] = false; });
setInterval(function() {
box.css({
left: function(i,v) { return newv(v, 37, 39); },
top: function(i,v) { return newv(v, 38, 40); }
});
}, 20);
setInterval(function() {
box.css({
left: function(i,v) { return newv(v, 65, 68); },
top: function(i,v) { return newv(v, 87, 83); }
});
}, 20);
function scrollWin() {
window.scrollBy(100, 0);
}
function flipl(){
$('.boat').css('transform', 'scale(0.3, 0.3)');
}
function flipr(){
$('.boat').css('transform', 'scale(-0.3, 0.3)');
}
$(document).keydown(
function(e){
if (e.keyCode == 37) {
// e.preventDefault();
flipl();
}
if (e.keyCode == 39) {
// e.preventDefault();
// scrollWin();
flipr();
}
if (e.keyCode == 83) {
e.preventDefault();
}
if (e.keyCode == 40) {
e.preventDefault();
}
if (e.keyCode == 68) {
scrollWin();
}
});
// var l = box.css('left');
// if (l > 3000){
// $('#black_hole').css('display','inline');
// }
setInterval(function() {
$('#t2').css('display', 'inline');
x = 20;
}, 15000);
setInterval(function() {
$('#lmr').css('display', 'inline');
$('#t3').css('display', 'inline');
x = 20;
}, 23000);
</script>
</body>
</html>