clear
This commit is contained in:
in the moon
parent
33cbd1f2df
commit
5fdbcc0ef9
Binary file not shown.
|
Before Width: | Height: | Size: 107 KiB |
Binary file not shown.
59
css/main.css
59
css/main.css
|
|
@ -1,59 +0,0 @@
|
|||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: black;
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input {
|
||||
display: block;
|
||||
background: black;
|
||||
color: white;
|
||||
width: 250px;
|
||||
padding: 5px 4px;
|
||||
margin: 2px 0 6px 0;
|
||||
border: 1px solid #ff5252;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
input::-ms-reveal,
|
||||
input::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type='submit'] {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #ff5252;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.content-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
174
css/rain.css
174
css/rain.css
|
|
@ -1,174 +0,0 @@
|
|||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(to bottom, #202020, #111119);
|
||||
}
|
||||
|
||||
.rain {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.rain.back-row {
|
||||
display: none;
|
||||
z-index: 1;
|
||||
bottom: 60px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
body.back-row-toggle .rain.back-row {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.drop {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
width: 15px;
|
||||
height: 120px;
|
||||
pointer-events: none;
|
||||
animation: drop 0.5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes drop {
|
||||
0% {
|
||||
transform: translateY(0vh);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translateY(90vh);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(90vh);
|
||||
}
|
||||
}
|
||||
|
||||
.stem {
|
||||
width: 1px;
|
||||
height: 60%;
|
||||
margin-left: 7px;
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
|
||||
animation: stem 0.5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes stem {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
65% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.splat {
|
||||
width: 15px;
|
||||
height: 10px;
|
||||
border-top: 2px dotted rgba(255, 255, 255, 0.5);
|
||||
border-radius: 50%;
|
||||
opacity: 1;
|
||||
transform: scale(0);
|
||||
animation: splat 0.5s linear infinite;
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.splat-toggle .splat {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes splat {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 1;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
90% {
|
||||
opacity: 0.5;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
.toggles {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 51px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
font-family: sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.toggle:hover {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.toggle:active {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.toggle.active {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.splat-toggle {
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.back-row-toggle {
|
||||
top: 90px;
|
||||
line-height: 12px;
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.single-toggle {
|
||||
top: 160px;
|
||||
}
|
||||
|
||||
body.single-toggle .drop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.single-toggle .drop:nth-child(10) {
|
||||
display: block;
|
||||
}
|
||||
32
index.html
32
index.html
|
|
@ -1,32 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta property="og:title" content="igna.rocks">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" href="assets/favicon.png">
|
||||
<meta property="og:description" content="igna > you.">
|
||||
<meta property="og:url" content="https://igna.rocks">
|
||||
<meta name="theme-color" content="#bbaaee">
|
||||
<link rel="icon" type="image/png" href="assets/favicon.png">
|
||||
<link rel="stylesheet" href="css/rain.css">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<audio autoplay>
|
||||
<source src="assets/only_one.mp3" type="audio/mpeg">
|
||||
</audio>
|
||||
</head>
|
||||
|
||||
<div class="content-main">
|
||||
<h1>root@igna.rocks</h1><br />
|
||||
<p> Hi, I'm Ignacio, a 13-year-old developer who likes anime and code stuff</p><br />
|
||||
<p> igna#9864 | <a href="https://discord.com/users/886994695648051270">discord</a> | <a
|
||||
href="https://bio.igna.rocks">bio</a> | <a href="https://steamcommunity.com/id/nulIed">steam</a> | <a
|
||||
href="instances.html">instances</a>
|
||||
<p>
|
||||
</div>
|
||||
<script src="js/AnimatedTitle.js"></script>
|
||||
<script src="js/rain.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
|
||||
<div class="content-main">
|
||||
<h1>instances@igna.rocks</h1><br />
|
||||
<p> Instances list:</p><br />
|
||||
<p> <a href="https://ko-fi.com/ignah">Donations</a> | <a href="https://libreddit.igna.rocks">Libreddit</a> | <a
|
||||
href="https://translate.igna.rocks">Lingva</a>
|
||||
<p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
var rev = "a";
|
||||
|
||||
function titlebar(val) {
|
||||
var msg = "i g n a . r o c k s";
|
||||
var res = " ";
|
||||
var speed = 300;
|
||||
var pos = val;
|
||||
msg = msg;
|
||||
var le = msg.length;
|
||||
if (rev == "a") {
|
||||
if (pos < le) {
|
||||
pos = pos + 1;
|
||||
scroll = msg.substr(0, pos);
|
||||
document.title = scroll;
|
||||
timer = window.setTimeout("titlebar(" + pos + ")", speed);
|
||||
} else {
|
||||
rev = "b";
|
||||
timer = window.setTimeout("titlebar(" + pos + ")", speed);
|
||||
}
|
||||
} else {
|
||||
if (pos > 0) {
|
||||
pos = pos - 1;
|
||||
var ale = le - pos;
|
||||
scrol = msg.substr(ale, le);
|
||||
document.title = scrol;
|
||||
timer = window.setTimeout("titlebar(" + pos + ")", speed);
|
||||
} else {
|
||||
rev = "fwd";
|
||||
timer = window.setTimeout("titlebar(" + pos + ")", speed);
|
||||
}
|
||||
}
|
||||
}
|
||||
titlebar(0);
|
||||
document.addEventListener('contextmenu', event => event.preventDefault());
|
||||
44
js/rain.js
44
js/rain.js
|
|
@ -1,44 +0,0 @@
|
|||
var makeItRain = function () {
|
||||
//clear out everything
|
||||
$('.rain').empty();
|
||||
|
||||
var increment = 0;
|
||||
var drops = "";
|
||||
var backDrops = "";
|
||||
|
||||
while (increment < 100) {
|
||||
//couple random numbers to use for various randomizations
|
||||
//random number between 98 and 1
|
||||
var randoHundo = (Math.floor(Math.random() * (98 - 1 + 1) + 1));
|
||||
//random number between 5 and 2
|
||||
var randoFiver = (Math.floor(Math.random() * (5 - 2 + 1) + 2));
|
||||
//increment
|
||||
increment += randoFiver;
|
||||
//add in a new raindrop with various randomizations to certain CSS properties
|
||||
drops += '<div class="drop" style="left: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>';
|
||||
backDrops += '<div class="drop" style="right: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>';
|
||||
}
|
||||
|
||||
$('.rain.front-row').append(drops);
|
||||
$('.rain.back-row').append(backDrops);
|
||||
}
|
||||
|
||||
$('.splat-toggle.toggle').on('click', function () {
|
||||
$('body').toggleClass('splat-toggle');
|
||||
$('.splat-toggle.toggle').toggleClass('active');
|
||||
makeItRain();
|
||||
});
|
||||
|
||||
$('.back-row-toggle.toggle').on('click', function () {
|
||||
$('body').toggleClass('back-row-toggle');
|
||||
$('.back-row-toggle.toggle').toggleClass('active');
|
||||
makeItRain();
|
||||
});
|
||||
|
||||
$('.single-toggle.toggle').on('click', function () {
|
||||
$('body').toggleClass('single-toggle');
|
||||
$('.single-toggle.toggle').toggleClass('active');
|
||||
makeItRain();
|
||||
});
|
||||
|
||||
makeItRain();
|
||||
Loading…
Reference in New Issue