incipit
parent
99367d848f
commit
0dd33e414a
@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>0 @ ilinx</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles/0.css">
|
||||
<script type="text/javascript" src="./scripts/popup.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Index of /ilinx</h1>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr><th colspan="5"><hr></th></tr><tr><td valign="top"><img src="#" alt="[.]"></td><td><a href="#">ilinx</a></td><td align="right">-</td><td align="right"> 00 </td><td> </td></tr><tr><th colspan="5"><hr></th></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p id="i0">
|
||||
The most merciful thing in the world, I think, is the ability (<a href="real.html" target="real" onclick="openIframe('real')">real</a> or <a href="imaginary.html" target="imaginary" onclick="ppp('imaginary.html','imaginary','420', '60', '954', '450')">imaginary</a>) of the human mind to correlate all its contents.
|
||||
</p>
|
||||
<iframe id="real" style="visibility: hidden;" src="" name="real"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Ilinx-0</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles/0.css">
|
||||
<script type="text/javascript" src="./scripts/popup.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Index of /ilinx</h1>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr><th colspan="5"><hr></th></tr><tr><td valign="top"><img src="Index%20of%20_ilinx_files/unknown.html" alt="[.]"></td><td><a href="#">ilinx</a></td><td align="right">-</td><td align="right"> 000 </td><td> </td></tr><tr><th colspan="5"><hr></th></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p id="i0">We live on a placid island of ignorance in the midst of the <a href="black_sea.html" target="black_sea" onclick="openIframe('black_sea')">black seas of infinity</a>, and it was not meant that we should voyage so far. </p>
|
||||
<iframe style="visibility: hidden;" id="black_sea" src="" name = "black_sea"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>af</title>
|
||||
<script type="text/javascript" src="../scripts/popup.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="../styles/terminal.css">
|
||||
</head>
|
||||
<body>
|
||||
<p><b>Professor Fassrol</b> was widely known as a pioneer in the application of cybernetics methodologies to anthropology and mythology. His visionary approach made possible the maturation of what now we call cyber- or <a href="death.html" onclick="ppp(this, 've', '1000', '200')" target="ve" >virtual ethnology</a>. In the early times of this discipline, however, the research was pursued following a direction opposite to the actual one, the technological value of this method was meant to enlight the rituals of proto-historical cultures as linguistic engines meant to produce meaning over generations.</p><br>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>death</title>
|
||||
<link rel="stylesheet" type="text/css" href="../styles/terminal.css">
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p><span id="xnili">@ilinx</span>:<span id="tilde">~</span>$ <b>Death</b> <br> The professor had been striken whilst returning from Java, in Indonesia; falling suddenly, as witnesses said, after his ship reached the territorial water of U.S. Doctors were unable to find any visible disorder, but concluded after perplexed debate that some obscure lesion of the heart, possibly induced by the overload of radio <a href="http://people.math.harvard.edu/~ctm/home/text/others/shannon/entropy/entropy.pdf" target="_blank">communications</a> received by the ship in the moment of crossing the free waters, has been responsible for the end of a so elderly man. <br><br>
|
||||
<i>At the time I saw no reason to dissent from this dictum but latterly I am inclined to wonder <br><br>- and more than wonder.</i></p><br>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>p80</title>
|
||||
<script type="text/javascript" src="../scripts/popup.js"></script>
|
||||
<style type="text/css">
|
||||
body{
|
||||
font-family: mono;
|
||||
color: red;
|
||||
background: black;
|
||||
/*text-shadow: 2px 2px white;*/
|
||||
font-size: 30px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
/* p {padding: 0;
|
||||
margin: 0;}*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The sky above the <b>port</b> was the color of television, tuned on a <a href="death.html" onclick="ppp(this, 'death', '600', '430','250','520')" target="death">dead</a> channel</p><br>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ve</title>
|
||||
<link rel="stylesheet" type="text/css" href="../styles/terminal.css">
|
||||
</head>
|
||||
<body>
|
||||
<h2>Virtual Ethnology</h2>
|
||||
<p> In the early times of this discipline, however, the research was pursued following a direction opposite to the actual one, the technological value of this method was meant to enlight the rituals of proto-historical cultures as linguistic engines meant to produce meaning over generations.
|
||||
</p>
|
||||
<p><a href="wc.html" onclick="return popup(this, 'wc', '1000', '200')" target="wc" >Walter Cannon</p>
|
||||
<p><a href="es.html" onclick="return popup(this, 'es', '1000', '200')" target="es" >Echidna Stillwell</p>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title> @@@ilinχ </title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles/black_sea.css">
|
||||
<script type="text/javascript" src="./scripts/jquery/jquery-1.12.4.js"></script>
|
||||
<!-- <script type="text/javascript" src="./scripts/jquery/jquery-ui.js"></script> -->
|
||||
<!-- <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';">×</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>
|
||||
<img id="col1" class="col" src="./media/imgs/column3.gif">
|
||||
<img id="col2" class="col" src="./media/imgs/column3.gif">
|
||||
</div>
|
||||
<div id="black_hole" class="pulse bh">
|
||||
<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 class="btn">Some day the piecing together of dissociated knowledge will open up a <a href="shore.html" onclick="next()" target="_parent">new reality</a></div>
|
||||
<script type="text/javascript" src="./scripts/black_sea.js"></script>
|
||||
<script type="text/javascript">
|
||||
moveSprite('#mBoat','2980');
|
||||
keyBinding_1();
|
||||
|
||||
setInterval(function() { $('.btn, #black_hole').css('display', 'inline'); }, 15000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>0 @ ilinx</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles/0.css">
|
||||
<script type="text/javascript" src="./scripts/popup.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Think of it as a ship taking of a <a href="#" onclick="nextC('000')">voyage</a></p>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Ilinx-0</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles/0.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Index of /ilinx</h1>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr><th colspan="5"><hr></th></tr><tr><td valign="top"><img src="#" alt="[.]"></td><td><a href="./00.html">ilinx</a></td><td align="right">-</td><td align="right"> 0 </td><td> </td></tr><tr><th colspan="5"><hr></th></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>p80</title>
|
||||
<style type="text/css">
|
||||
body{
|
||||
font-family: mono;
|
||||
color: red;
|
||||
background: black;
|
||||
text-shadow: 2px 2px white;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
/* p {padding: 0;
|
||||
margin: 0;}*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The sky above the port was the color of television, tuned on a dead channel</p><br>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Ilinx-0</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles/0.css">
|
||||
</head>
|
||||
<body>
|
||||
<p>Think of it as you reading this text</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -0,0 +1,159 @@
|
||||
// MOVEMENT ANIMATION
|
||||
function moveSprite(name, size){
|
||||
var pane = $('#sea'),
|
||||
box = $(name),
|
||||
col = $('#col'),
|
||||
w = pane.width() - box.width() + size,
|
||||
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); }, // ARROWs L/R
|
||||
top: function(i,v) { return newv(v, 38, 40); } // ARROWs U/D
|
||||
});
|
||||
}, 20);
|
||||
|
||||
setInterval(function() {
|
||||
box.css({
|
||||
left: function(i,v) { return newv(v, 65, 68); }, // KEYS A/D
|
||||
top: function(i,v) { return newv(v, 87, 83); } // KEYS w/S
|
||||
});
|
||||
}, 20);
|
||||
}
|
||||
|
||||
// KEYS BINDING
|
||||
|
||||
function keyBinding_1(){
|
||||
|
||||
// FLIP ON KEY L/R - A/D
|
||||
function flipl(name){ $(name).css('transform', 'scale(0.3, 0.3)'); }
|
||||
function flipr(name){ $(name).css('transform', 'scale(-0.3, 0.3)'); }
|
||||
|
||||
// SCROLL WINDOW ON KEY D
|
||||
function scrollWin() { window.scrollBy(10, 0); }
|
||||
|
||||
$(document).keydown(
|
||||
function(e){
|
||||
if (e.keyCode == 37) { // ARROW LEFT
|
||||
e.preventDefault();
|
||||
flipl('.boat');
|
||||
}
|
||||
if (e.keyCode == 39) { // ARROW RIGHT
|
||||
// e.preventDefault();
|
||||
// scrollWin();
|
||||
flipr('.boat');
|
||||
}
|
||||
|
||||
if (e.keyCode == 40) { // ARROW DOWN
|
||||
e.preventDefault();
|
||||
}
|
||||
if (e.keyCode == 65) { // A LEFT
|
||||
e.preventDefault();
|
||||
flipl('.boat');
|
||||
}
|
||||
if (e.keyCode == 68) { // D RIGHT
|
||||
scrollWin();
|
||||
flipr('.boat');
|
||||
}
|
||||
if (e.keyCode == 83) { // S DOWN
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function keyBinding_2(){
|
||||
|
||||
function flipl(){ $('.sprite').css('transform', 'scale(-0.5, 0.5)'); }
|
||||
function flipr(){ $('.sprite').css('transform', 'scale(0.5, 0.5)'); }
|
||||
|
||||
$(document).keydown(
|
||||
function(e){
|
||||
if (e.keyCode == 37) { // ARROW LEFT
|
||||
e.preventDefault();
|
||||
flipl();
|
||||
}
|
||||
if (e.keyCode == 39) { // ARROW RIGHT
|
||||
e.preventDefault();
|
||||
flipr();
|
||||
}
|
||||
if (e.keyCode == 38) { // ARROW UP
|
||||
e.preventDefault();
|
||||
}
|
||||
if (e.keyCode == 40) { // ARROW DOWN
|
||||
e.preventDefault();
|
||||
}
|
||||
if (e.keyCode == 65) { // A LEFT
|
||||
e.preventDefault();
|
||||
flipl();
|
||||
}
|
||||
if (e.keyCode == 68) { // D RIGHT
|
||||
e.preventDefault();
|
||||
flipr();
|
||||
}
|
||||
if (e.keyCode == 87) { // W UP
|
||||
e.preventDefault();
|
||||
}
|
||||
if (e.keyCode == 83) { // S DOWN
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
$(document).ready(function(){
|
||||
$(document).keydown(function(){ $(".sprite").addClass("walk-right"); });
|
||||
$(document).keyup(function(){ $(".sprite").removeClass("walk-right"); });
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function keyBinding_3(){
|
||||
|
||||
function flipl(){ $('.sprite-d').css('transform', 'scale(-0.5, 0.5)'); }
|
||||
function flipr(){ $('.sprite-d').css('transform', 'scale(0.5, 0.5)'); }
|
||||
|
||||
$(document).keydown(
|
||||
function(e){
|
||||
if (e.keyCode == 37) { // ARROW LEFT
|
||||
e.preventDefault();
|
||||
flipl();
|
||||
}
|
||||
if (e.keyCode == 39) { // ARROW RIGHT
|
||||
e.preventDefault();
|
||||
flipr();
|
||||
}
|
||||
if (e.keyCode == 38) { // ARROW UP
|
||||
e.preventDefault();
|
||||
}
|
||||
if (e.keyCode == 40) { // ARROW DOWN
|
||||
e.preventDefault();
|
||||
}
|
||||
if (e.keyCode == 65) { // A LEFT
|
||||
e.preventDefault();
|
||||
flipl();
|
||||
}
|
||||
if (e.keyCode == 68) { // D RIGHT
|
||||
e.preventDefault();
|
||||
flipr();
|
||||
}
|
||||
if (e.keyCode == 87) { // W UP
|
||||
e.preventDefault();
|
||||
}
|
||||
if (e.keyCode == 83) { // S DOWN
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
$(document).ready(function(){
|
||||
$(document).keydown(function(){ $(".sprite-d").addClass("walk-right-d"); });
|
||||
$(document).keyup(function(){ $(".sprite-d").removeClass("walk-right-d"); });
|
||||
});
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,74 @@
|
||||
|
||||
// -------------------------- POPUP (set position)
|
||||
|
||||
function ppp(mylink, windowname, width, height, x, y) {
|
||||
if (! window.focus)return true;
|
||||
var href;
|
||||
if (typeof(mylink) == 'string') href=mylink;
|
||||
else href=mylink.href;
|
||||
var open = window.open(href, windowname, 'width=' + width + ',height='+ height + ',left=' + x + ',top=' + y + ', resizable=no, location=no, menubar=no');
|
||||
open.focus();
|
||||
// setTimeout(function(){ open.close(); }, 15000);
|
||||
return false;
|
||||
}
|
||||
|
||||
// -------------------------- POPUP RANDOM POSITION TIMEOUT SHORT
|
||||
var w = window.innerWidth;
|
||||
var h = window.innerHeight;
|
||||
|
||||
function posX(){ return Math.ceil(Math.random() * w)-200 }
|
||||
function posY(){ return Math.ceil(Math.random() * h) }
|
||||
|
||||
function pppR(mylink, windowname, width, height) {
|
||||
if (! window.focus)return true;
|
||||
var href;
|
||||
if (typeof(mylink) == 'string') href=mylink;
|
||||
else href=mylink.href;
|
||||
var open = window.open(href, windowname, 'width=' + width + ',height='+ height + ',left=' + posX() + ',top=' + posY() + ', resizable=no, location=no, menubar=no');
|
||||
open.focus();
|
||||
setTimeout(function(){ open.close(); }, 15000);
|
||||
return false;
|
||||
}
|
||||
|
||||
// -------------------------- POPUP RANDOM POSITION TIMEOUT LONG
|
||||
function pppRL(mylink, windowname, width, height) {
|
||||
if (! window.focus)return true;
|
||||
var href;
|
||||
if (typeof(mylink) == 'string') href=mylink;
|
||||
else href=mylink.href;
|
||||
var open = window.open(mylink, windowname, 'width=' + width + ',height='+ height + ',left=' + posX() + ',top=' + posY() + ', resizable=no, location=no, menubar=no');
|
||||
open.focus();
|
||||
setTimeout(function(){ open.close(); }, 180000);
|
||||
return false;
|
||||
}
|
||||
|
||||
// -------------------------- POPUP RANDOM POSITION NO!TIMEOUT
|
||||
|
||||
function pppRNT(mylink, windowname, width, height) {
|
||||
if (! window.focus)return true;
|
||||
var href;
|
||||
if (typeof(mylink) == 'string') href=mylink;
|
||||
else href=mylink.href;
|
||||
var open = window.open(href, windowname, 'width=' + width + ',height='+ height + ',left=' + posX() + ',top=' + posY() + ', resizable=no, location=no, menubar=no');
|
||||
open.focus();
|
||||
//setTimeout(function(){ open.close(); }, 15000);
|
||||
return false;
|
||||
}
|
||||
|
||||
// -------------------------- REDIRECT OPENER (from popup)
|
||||
function next(mylink){
|
||||
var mhref = mylink +'.html';
|
||||
window.opener.location.href = mhref;
|
||||
}
|
||||
|
||||
function nextC(mylink){
|
||||
var mhref = mylink +'.html';
|
||||
window.opener.location.href = mhref;
|
||||
window.close();
|
||||
}
|
||||
|
||||
// ------------------------ OPEN HIDDEN IFRAME
|
||||
|
||||
function openIframe(name) {
|
||||
document.getElementById(name).style.visibility = "visible";
|
||||
}
|
||||
@ -0,0 +1,70 @@
|
||||
function setupTypewriter(t) {
|
||||
var HTML = t.innerHTML;
|
||||
|
||||
t.innerHTML = "";
|
||||
|
||||
var cursorPosition = 0,
|
||||
tag = "",
|
||||
writingTag = false,
|
||||
tagOpen = false,
|
||||
typeSpeed = 100,
|
||||
tempTypeSpeed = 0;
|
||||
|
||||
var type = function() {
|
||||
|
||||
if (writingTag === true) {
|
||||
tag += HTML[cursorPosition];
|
||||
}
|
||||
|
||||
if (HTML[cursorPosition] === "<") {
|
||||
tempTypeSpeed = 0;
|
||||
if (tagOpen) {
|
||||
tagOpen = false;
|
||||
writingTag = true;
|
||||
} else {
|
||||
tag = "";
|
||||
tagOpen = true;
|
||||
writingTag = true;
|
||||
tag += HTML[cursorPosition];
|
||||
}
|
||||
}
|
||||
if (!writingTag && tagOpen) {
|
||||
tag.innerHTML += HTML[cursorPosition];
|
||||
}
|
||||
if (!writingTag && !tagOpen) {
|
||||
if (HTML[cursorPosition] === " ") {
|
||||
tempTypeSpeed = 0;
|
||||
}
|
||||
else {
|
||||
tempTypeSpeed = (Math.random() * typeSpeed) + 50;
|
||||
}
|
||||
t.innerHTML += HTML[cursorPosition];
|
||||
}
|
||||
if (writingTag === true && HTML[cursorPosition] === ">") {
|
||||
tempTypeSpeed = (Math.random() * typeSpeed) + 50;
|
||||
writingTag = false;
|
||||
if (tagOpen) {
|
||||
var newSpan = document.createElement("span");
|
||||
t.appendChild(newSpan);
|
||||
newSpan.innerHTML = tag;
|
||||
tag = newSpan.firstChild;
|
||||
}
|
||||
}
|
||||
|
||||
cursorPosition += 1;
|
||||
if (cursorPosition < HTML.length - 1) {
|
||||
setTimeout(type, tempTypeSpeed);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return {
|
||||
type: type
|
||||
};
|
||||
}
|
||||
|
||||
var typer = document.getElementById('typewriter');
|
||||
|
||||
typewriter = setupTypewriter(typewriter);
|
||||
|
||||
typewriter.type();
|
||||
@ -0,0 +1,20 @@
|
||||
$(document).ready(function(){
|
||||
|
||||
// ------------ DRAG ------------
|
||||
$( function() {
|
||||
$( ".draggable" ).draggable(
|
||||
//{ containment: [-1300,-750,1800,1250] }
|
||||
);
|
||||
});
|
||||
|
||||
// ------------ ZOOM -------------
|
||||
function zoom(event) {
|
||||
event.preventDefault();
|
||||
scale += event.deltaY * -0.01;
|
||||
scale = Math.min(Math.max(.125, scale), 4);
|
||||
el.style.transform = `scale(${scale})`;
|
||||
}
|
||||
let scale = 1;
|
||||
const el = document.querySelector('body');
|
||||
el.onwheel = zoom;
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,16 @@
|
||||
body { font-family: "Lucida Console", Monaco, monospace; }
|
||||
|
||||
table { float: left; }
|
||||
|
||||
#real{
|
||||
position: absolute;
|
||||
width: 390px;
|
||||
height: 60px;
|
||||
left: 454px;
|
||||
top: 360px;
|
||||
}
|
||||
|
||||
#i0 { float: left; margin: 25px 180px;}
|
||||
|
||||
#black_sea { width:100%; height: 80vh; }
|
||||
|
||||
@ -0,0 +1,700 @@
|
||||
body{
|
||||
overflow-y: hidden;
|
||||
font-family: "Lucida Console", Monaco, monospace;
|
||||
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}
|
||||
|
||||
#sea { position: relative; width: 100%, height:100vh; }
|
||||
|
||||
.btn{ display: none;
|
||||
position: absolute;
|
||||
left: 3140px;
|
||||
top: 220px;
|
||||
width: 500px;
|
||||
padding: 100px;
|
||||
text-align: center;
|
||||
color: white;}
|
||||
|
||||
#black_hole{
|
||||
left: 3403.5px;
|
||||
top: 269.5px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
#black_hole_2{
|
||||
left: 350px;
|
||||
top: 300px;
|
||||
}
|
||||
|
||||
#lmr {display: none;}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ----------- COLUMNS ----------- */
|
||||
|
||||
.col {
|
||||
width: 150px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#col1{
|
||||
right: 308px;
|
||||
top: 163px;
|
||||
z-index: -101;
|
||||
}
|
||||
|
||||
#col2 {
|
||||
right: 223px;
|
||||
top: 348px;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
/* ----------- ALERT MOVE ARROWS ----------- */
|
||||
.alert {
|
||||
left: 335px;
|
||||
top: -20px;
|
||||
position: absolute;
|
||||
width: 236px;
|
||||
padding: 20px 30px 80px 20px;
|
||||
background-color: #01b8ff24;
|
||||
color: white;
|
||||
margin-bottom: 15px;
|
||||
transform: scale(-4,4);
|
||||
}
|
||||
|
||||
.closebtn {
|
||||
margin-left: 15px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
float: right;
|
||||
font-size: 22px;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.closebtn:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* ----------- BOAT ANIMATION ----------- */
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ----------- BLACK HOLE ----------- */
|
||||
|
||||
.bh{
|
||||
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;
|
||||
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;}
|
||||
}
|
||||
@ -0,0 +1,173 @@
|
||||
body{
|
||||
font-family: "Lucida Console", Monaco, monospace;
|
||||
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%;
|
||||
}
|
||||
20% {
|
||||
background-position: 51% 48%, 51% 48%, 53% 52%, 53% 52%, 48% 47%, 48% 47%;
|
||||
}
|
||||
40% {
|
||||
background-position: 49% 51%, 49% 51%, 48% 51%, 48% 51%, 54% 50%, 54% 50%;
|
||||
}
|
||||
60% {
|
||||
background-position: 53% 54%, 53% 54%, 46% 54%, 46% 54%, 53% 46%, 53% 46%;
|
||||
}
|
||||
80% {
|
||||
background-position: 51% 52%, 51% 52%, 49% 49%, 49% 49%, 49% 48%, 49% 48%;
|
||||
}
|
||||
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%;
|
||||
}
|
||||
20% {
|
||||
background-position: 51% 48%, 51% 48%, 53% 52%, 53% 52%, 48% 47%, 48% 47%;
|
||||
}
|
||||
40% {
|
||||
background-position: 49% 51%, 49% 51%, 48% 51%, 48% 51%, 54% 50%, 54% 50%;
|
||||
}
|
||||
60% {
|
||||
background-position: 53% 54%, 53% 54%, 46% 54%, 46% 54%, 53% 46%, 53% 46%;
|
||||
}
|
||||
80% {
|
||||
background-position: 51% 52%, 51% 52%, 49% 49%, 49% 49%, 49% 48%, 49% 48%;
|
||||
}
|
||||
0% {
|
||||
background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.sprite {
|
||||
transform: scale(0.5);
|
||||
position: absolute;
|
||||
left: 1045px;
|
||||
top: 417px;
|
||||
width: 102px;
|
||||
height: 148px;
|
||||
margin-top: 40px;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.sprite-d {
|
||||
transform: scale(1.5);
|
||||
position: absolute;
|
||||
left: 1045px;
|
||||
top: 417px;
|
||||
width: 53px;
|
||||
height: 33px;
|
||||
margin-top: 40px;
|
||||
z-index: 101;
|
||||
|
||||
}
|
||||
|
||||
.right {
|
||||
background-image: url(../media/imgs/standing-right.png);
|
||||
}
|
||||
|
||||
.walk-right {
|
||||
background-image: url(../media/imgs/walk-right.png);
|
||||
-webkit-animation: walk .7s steps(6) infinite;
|
||||
-moz-animation: walk .7s steps(6) infinite;
|
||||
-ms-animation: walk .7s steps(6) infinite;
|
||||
-o-animation: walk .7s steps(6) infinite;
|
||||
animation: walk .7s steps(6) infinite;
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes walk {
|
||||
from { background-position: 0px; }
|
||||
to { background-position: -612px; }
|
||||
}
|
||||
@-moz-keyframes walk {
|
||||
from { background-position: 0px; }
|
||||
to { background-position: -612px; }
|
||||
}
|
||||
@-ms-keyframes walk {
|
||||
from { background-position: 0px; }
|
||||
to { background-position: -612px; }
|
||||
}
|
||||
@-o-keyframes walk {
|
||||
from { background-position: 0px; }
|
||||
to { background-position: -612px; }
|
||||
}
|
||||
|
||||
@-keyframes walk {
|
||||
from { background-position: 0px; }
|
||||
to { background-position: -612px; }
|
||||
}
|
||||
|
||||
.right-d {
|
||||
background-image: url(../img/dw.png) !important;
|
||||
}
|
||||
|
||||
.walk-right-d {
|
||||
background-image: url(../img/dw.png) !important;
|
||||
-webkit-animation: walkd .9s steps(10) infinite !important;
|
||||
-moz-animation: walkd .9s steps(10) infinite !important;
|
||||
-ms-animation: walkd .9s steps(10) infinite !important;
|
||||
-o-animation: walkd .9s steps(10) infinite !important;
|
||||
animation: walkd .9s steps(10) infinite !important;
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes walkd {
|
||||
from { background-position-y: 0px; }
|
||||
to { background-position-y: -340px; }
|
||||
}
|
||||
@-moz-keyframes walkd {
|
||||
from { background-position-y: 0px; }
|
||||
to { background-position-y: -340px; }
|
||||
}
|
||||
@-ms-keyframes walkd {
|
||||
from { background-position-y: 0px; }
|
||||
to { background-position-y: -340px; }
|
||||
}
|
||||
@-o-keyframes walkd {
|
||||
from { background-position-y: 0px; }
|
||||
to { background-position-y: -340px; }
|
||||
}
|
||||
|
||||
@-keyframes walkd {
|
||||
from { background-position-y: 0px; }
|
||||
to { background-position-y: -340px; }
|
||||
}
|
||||
|
||||
#sea {position: relative; width: 100%, height:100vh;}
|
||||
|
||||
.txt {color: white;
|
||||
position: absolute;}
|
||||
|
||||
#t1{ top: 287px;
|
||||
left: 70px;
|
||||
width: 690px;
|
||||
color: #00db00;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
#t2{ left: 1009px;
|
||||
top: 453px;
|
||||
z-index: 101;
|
||||
width: 80px;
|
||||
font-size: 17px;
|
||||
background: yellow;
|
||||
text-align: center;
|
||||
padding: 3px;
|
||||
}
|
||||
@ -0,0 +1,61 @@
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
@ -0,0 +1,60 @@
|
||||
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;
|
||||
}
|
||||
|
||||
svg {
|
||||
transform: scale(3,3);
|
||||
left: 1270px;
|
||||
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;
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
body{
|
||||
font-family: courier new, monospace;
|
||||
color: white;
|
||||
background: black;
|
||||
}
|
||||
p{
|
||||
padding: 25px;
|
||||
}
|
||||
#xnili{ color: #00db00;; }
|
||||
#tilde{ color: blue; }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 286 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 348 KiB |
Loading…
Reference in New Issue