masiv/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Transfer to git

Browse Source
This commit is contained in:
masiv
2026-02-03 19:37:38 -03:00
commit 9ffbd90a82
136 changed files with 5798 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
archive/ver_1-until2feb2026/ai.txt Normal file
View File

@@ -0,0 +1,3 @@
User-Agent: *
Disallow: /
Disallow: *

5
archive/ver_1-until2feb2026/css/global/articles.css Normal file
View File

@@ -0,0 +1,5 @@
.article {
display: flex;
flex-direction: column;
align-items: center;
}

50
archive/ver_1-until2feb2026/css/global/components.css Normal file
View File

@@ -0,0 +1,50 @@
body {
margin: 5em;
max-width: 1000px;
min-height: 800px;
justify-content: center;
display: flex;
flex-direction: column;
}
body, html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
}
/* TOP AND BOT BAR */
.bar {
width: 100%;
display: flex;
align-items: center;
height: fit-content;
}
.bar > div{
flex: 1;
}
.left > p {
text-align: left;
}
.mid > p {
text-align: center;
}
.right > p {
text-align: right;
}
.panel > .title {
font-style: italic;
}
.panel {margin-bottom: 1em;}
.bot {margin-top: 1em;}
.top {font-weight: bold;}
.last {
margin-bottom: 0em;
}

49
archive/ver_1-until2feb2026/css/global/styles.css Normal file
View File

@@ -0,0 +1,49 @@
html {
display: flex;
justify-content: center;
}
body {
font-size: 15px;
font-family: monospace;
text-align: center;
background-color:rgb(255, 244, 163);
color: rgb(47, 45, 31);
transition: background-color 0.3s ease, color 0.3s ease;
scrollbar-width: thin;
}
h1 {font-size: 24px;}
h2 {font-size: 20px;}
h3 {font-size: 18px;}
h4 {font-size: 14px;}
p {
margin: 10px;
}
a:link, a:visited {
color: rgb(47, 45, 31);
transition: color 0.3s ease;
}
a:hover {
color: rgb(144, 138, 93);
transition: color 0.3s ease;
}
.panel {
border: 5px ridge rgb(159, 143, 96);
background-color: rgb(255, 230, 153);
transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}
span.li{
display: list-item;
text-align: left;
margin-left: 2em
}
img {
image-rendering:pixelated;
}

3
archive/ver_1-until2feb2026/css/specific/about-host.css Normal file
View File

@@ -0,0 +1,3 @@
.specs {
width: fit-content;
}

122
archive/ver_1-until2feb2026/css/specific/calc.css Normal file
View File

@@ -0,0 +1,122 @@
body, html {
box-sizing: border-box;
}
* {
font-size: inherit;
font-family: inherit;
box-sizing: inherit;
}
body {
font-family: monospace;
display: flex;
align-items: center;
justify-content: center;
}
.panel {
display: flex;
align-items: center;
height: fit-content;
}
.panel > div {
text-align: center;
}
.calculator {
flex-shrink: 0;
flex-grow: 1;
width: auto;
height: auto;
justify-content: center;
}
.calculator > div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 10px;
}
.buttons {
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: right;
align-items: stretch;
max-width: calc((70px * 4) + ( 5 * (4px * 2) ) );
}
button {
border: 0;
margin: 5px;
height: 70px;
width: 70px;
background-color:rgb(253, 247, 203);
transition: 0.05s background-color ease-in;
}
button:active {
background-color:rgb(194, 186, 124);
}
#equal {
flex-grow: 1;
}
.viewing {
border-top: 0;
border-left: 0;
border-right: 0;
display: flex;
align-items: center;
background-color:rgb(253, 247, 203);
width: calc((70px * 4) + ( 2 * (15px) ));
height: 3em;
margin-bottom: 20px;
}
.viewing > #output {
padding: 0.5em;
font-size: 40px;
text-align: right;
text-overflow: clip;
overflow-y: auto;
width: 100%;
}
.calctitle {
color: rgb(43, 43, 43);
font-size: 40px;
margin-top: 1rem;
margin-bottom: 1rem;
}
.middle {
gap: 1em;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-grow: 1;
}
.info {
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: justify;
width: 100%;
flex-basis: 30%;
flex-shrink: 0;
flex-grow: 200;
}
.title {
text-align: center;
margin:1rem;
}

69
archive/ver_1-until2feb2026/css/specific/chat.css Normal file
View File

@@ -0,0 +1,69 @@
/* Styling */
[type="text"] {
background-color:rgb(253, 247, 203);
width: 100%;
}
.inputs, .history, [type="text"], [type="submit"] {
font-size: 8px;
font-family: monospace;
}
.history {
background-color: rgb(253, 247, 203);
}
/* Disposition */
.chat {
width: 20%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.chat > * {
width: 90%;
}
.inputs, .history {
display: flex;
}
.inputs {
flex-direction: row;
}
.history {
max-height: 60%;
flex-shrink: 1;
white-space: wrap;
}
.history > div {
flex-shrink: 2;
overflow-x: hidden;
overflow-y: auto;
display: flex;
flex-direction: column-reverse;
flex: 1;
margin: 1em;
scrollbar-width: thin;
}
.comment {
display: flex;
}
.user {
font-weight: bold;
margin-right: 0.5em;
}
.message {
word-wrap: break-word;
text-align: justify;
}

69
archive/ver_1-until2feb2026/css/specific/main.css Normal file
View File

@@ -0,0 +1,69 @@
.other {margin-left: 1em;}
.first {margin-right: 1em;}
.about {
align-content: center;
}
.middle {
display: flex;
flex: 1;
align-items: stretch;
flex-direction: row;
}
.first,.other {
flex-direction: column;
width: 20%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
}
.main {
flex-direction: column;
width: 60%;
align-content: flex-start;
}
.links > div {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.blinkies > img {
width: 80%;
margin-top: 0.2em;
}
.links > div > p {
display: flex;
flex-direction: column;
}
.other > div {
height: 100%;
width: 100%;
}
.chat {
max-height: 50%;
}
.more > div {
margin: 1em;
}
.webrings,.blinkies {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
align-items: center;
}
.webrings > div {
margin-bottom: 1em;
}

31
archive/ver_1-until2feb2026/css/specific/noaiwebring.css Normal file
View File

@@ -0,0 +1,31 @@
/* See comment on html directly */
.noaiwebring {
width: 80%;
position: relative;
}
.noaiwebring > img {
width: 100%;
height: 100%;
}
.noaiwebring > a > div {
position: absolute;
}
.noaiwebring > a > .nxt {
left: 76.1%; top: 6.5%; width: 20.5%; height: 48.4%;
}
.noaiwebring > a > .prv {
left: 2.3%; top: 6.5%; width: 20.5%; height: 48.4%;
}
.noaiwebring > a > .rnd {
left: 71.6%; top: 61.3%; width: 12.5%; height: 35.5%;
}
.noaiwebring > a > .home {
left: 26.1%; top: 48.4%; width: 44.3%; height: 48.4%;
}

102
archive/ver_1-until2feb2026/en/about-host.html Normal file
View File

@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<title>About this hosting</title>
<link rel='stylesheet' type='text/css' href='../css/specific/about-host.css'>
<link rel="stylesheet" type='text/css' href="../css/global/components.css">
<link rel="stylesheet" type='text/css' href="../css/global/styles.css">
<link rel="stylesheet" type='text/css' href="../css/global/articles.css">
</head>
<body>
<div class="top bar panel">
<div class="left">
<p><a href="../en/about-this-site.html">About this site</a></p>
</div>
<div id="middle">
<p><a href="../en_home.html">Main</a></p>
</div>
<div class="right">
<p>
<a href="../es/about-host.html">ES</a>
<a href="#top">EN</a>
</p>
</div>
</div>
<div class="article panel">
<p>
Hello, <br><br>
You clicking this article means you have an interest on how this
website is structured, and what infrastructure it runs in.
I've gotta say this will probably change over time, but there is one
aspect I will adhere to, mantaining custody over my own data, in practice
that means everything I host will be hosted on-site on my own infrastructure,
just below a little about the <i>homelab's</i> history and some details.<br>
</p>
<h3>Specs</h3>
<div class="specs panel">
<p>
CPU: AMD Ryzen 5 4600G <br>
RAM: 32GB DDR4 3200MHZ <br>
Motherboard: ASRock A320M-HDV 4.0 <br>
PSU: EVGA 450W 80plus <br>
Storage: <br>
<span class="li">x1 1TB SSD NVME Samsung 970 Plus</span>
<span class="li">x2 3TB HDD WD Green (RAID 1)</span>
Case: No-name brand,
quite square-ish.<br>
</p>
</div>
<h3>History</h3>
<p>
Each one of the components has a different origin, the case, psu and motherboard
have always been the same since the begining, part of the original PC I got as
a birthday present a while back, it was equiped with 8gb of ram, a modest HDD,
together with an AMD Ryzen 3 3200G, it was enough back then, but just as it came,
I got myself a brand new laptop, somewhat comparable (or even better) to the pc,
I ended up using it way more, thanks to it being portable.
</p>
<p>
After some time, can't quite remember the reason, I took the decision to move it to its
current location, a secure place with a good broadband connection, this was all the way
back at the start of 2022, when I installed Ubuntu Server 22.04 LTS.
</p>
<p>
I graudually updated it, I got the current proccesor over on amazon, then the ram
(attempted to purchase it from Aliexpress, but once it arrived I discovered it
wasn't compatible, had to re-sell it, and buy my current 2x16gb kit), and last but
not least, two 3tb disks which I thought was plenty for my usecase (foreshadowing).
</p>
<p>
I currently still have the same Ubuntu Server install on bare hardware, and almost
every single service I host is using a docker container, managed using Portainer.
</p>
<h3>Networking</h3>
<h4>Domain name</h4>
<p>
I've used several domain names over time, starting with No-IP to ssh remotely, rapidely migrating
to DuckDNS, that setup endured quite a while but after having some problems with DNS resolution, and
limitations on their DNS capabilities (they used AWS) thanks to my sub-domain repertoire I
decided to finally make the leap and purchase my own domain on some of the internet's registrars,
ended up with this domain on Porkbun, for a measly 5 dollars and a half, a lot /s.
</p>
<h4>Proxy & DDNS</h4>
<p>
I use NginxProxyManager to manage all my domains and redirects, I don't plan on migrating to
Traefik for now because NPM does the job, and increasing my infrastructure's complexity isn't my
number one priority, maybe in the future. For Dynamic DNS I use DDClient, my ISP (Antel) doesn't
provide static IPs to residential addresses, so I'm stuck having to update my registers once or
twice a day in-leiu of having a fixed one.
</p>
</div>
<div class="bot bar panel">
<div class="left"><p>Entirely handmade, css & html only :D</p></div>
<img src="../imgs/global/rainbowcable.png" alt="Rainbow cable."> <!-- Found on https://minx98.neocities.org/Assets/IDButtons/Ribbon/rainbowcable.png -->
<div class="right"><p>Version 1.0.1, 17.01.2026</p></div>
</div>
</body>
</html>

38
archive/ver_1-until2feb2026/en/about-this-site.html Normal file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<title>About this site</title>
<link rel='stylesheet' type='text/css' href='../css/specific/about-this-site.css'>
<link rel="stylesheet" type='text/css' href="../css/global/components.css">
<link rel="stylesheet" type='text/css' href="../css/global/styles.css">
<link rel="stylesheet" type='text/css' href="../css/global/articles.css">
</head>
<body>
<div class="top bar panel">
<div class="left">
<p><a href="#top">About this site</a></p>
</div>
<div id="middle">
<p><a href="../en_home.html">Main</a></p>
</div>
<div class="right">
<p>
<a href="../es/about-this-site.html">ES</a>
<a href="#top">EN</a>
</p>
</div>
</div>
<div class="article panel">
<p>
Still in construction, come back later :p
</p>
</div>
<div class="bot bar panel">
<div class="left"><p>Entirely handmade, css & html only :D</p></div>
<img src="../imgs/global/rainbowcable.png" alt="Rainbow cable."> <!-- Found on https://minx98.neocities.org/Assets/IDButtons/Ribbon/rainbowcable.png -->
<div class="right"><p>Version 1.0.1, 17.01.2026</p></div>
</div>
</body>
</html>

123
archive/ver_1-until2feb2026/en/calc.html Normal file
View File

@@ -0,0 +1,123 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<title>Calculadora</title>
<link rel="stylesheet" type='text/css' href="../css/global/components.css">
<link rel="stylesheet" type='text/css' href="../css/global/styles.css">
<link rel="stylesheet" type="text/css" href="../css/specific/calc.css">
<script src="../js/calc1.js"></script>
<script defer src="../js/calc2.js"></script>
</head>
<body>
<!--
<div class="panel">
<div>
<button onclick="calc()">CalcV1</button>
<p>Testing</p>
</div>
</div>
-->
<div class="top bar panel">
<div class="left">
<p><a href="../en/about-this-site.html">About this site</a></p>
</div>
<div id="middle">
<p><a href="../en_home.html">Main</a></p>
</div>
<div class="right">
<p>
<a href="../es/calc.html">ES</a>
<a href="#top">EN</a>
</p>
</div>
</div>
<div class="middle">
<div class="calculator panel">
<div>
<div class="calctitle">
Calculadora
</div>
<div class="viewing panel">
<span id="output"></span>
</div>
<div class="buttons">
<button onclick="q_manage('add',1)">1</button>
<button onclick="q_manage('add',2)">2</button>
<button onclick="q_manage('add',3)">3</button>
<button onclick="q_manage('add','+')">+</button>
<button onclick="q_manage('add',4)">4</button>
<button onclick="q_manage('add',5)">5</button>
<button onclick="q_manage('add',6)">6</button>
<button onclick="q_manage('add','-')">-</button>
<button onclick="q_manage('add',7)">7</button>
<button onclick="q_manage('add',8)">8</button>
<button onclick="q_manage('add',9)">9</button>
<button onclick="q_manage('add','*')">*</button>
<button onclick="">(</button>
<button onclick="q_manage('add',0)">0</button>
<button onclick="">)</button>
<button onclick="q_manage('add','/')">/</button>
<button onclick="q_manage('remove')">&lt;</button>
<button onclick="q_manage('add','^')">^</button>
<button onclick="q_execute('add','=')" id="equal">=</button>
</div>
</div>
</div>
<div class="info panel">
<h1 class="title">About this project</h1>
<p>
It has certainly been a while since I've touched Javascript,
and I wanted to regain some of the know-how I had about it,
that's why decided to code this calculator from scratch
without using any external libraries, nor chatbots, only
wikis like w3 school about the language itself even if
that required more time.
</p>
<p>
So it began my learning journey, coding this entire calculator
has been quite a joy I must say, and even if the final product
is lacking some funcionality like parenthesis parsing it still
works completely fine for most things, as it process inputs using
PEMDAS.
</p>
<p>
Were I to make it all over again, I would probably go about
things differently, researching about more efficient algorithms
and methods and not reinventing the wheel, but the thing is,
that's the entire point of this excersice, wasn't for that
self-impossed limitation, I could make use of tons of more
efficient libraries.
</p>
<p>
Now about the inner workings of the script, I implemented a
simple array that stores every character typed, and once the
equal key is pressed, it sends the array to be processed in
the following steps:
<span class="li">Concatenate the digits, from [1,1,'+',2,3] to [11,'+',23].</span>
<span class="li">Search for term separators, and create multidimensional arrays with
each level representing one type of operation.
</span>
<span class="li">Undo all this array but backwards, processing the output as it goes.
</span>
It looks easy on paper, but I spent an entire day and a half coding and dealing with
each aspect of programming, things I didn't quite remember, others I didn't know from
the get-go, etc. (I must add a personal rant about how difficult is dealing with
multidimensional arrays, it's not a trivial task for sure).
</p>
<p>
Update 23/01/2026 <br>
I showed my calculator to a friend of mine and they
pointed out I was lacking a 0 button, how could I miss
that, seriously XD.
</p>
</div>
</div>
<div class="bot bar panel">
<div class="left"><p>Entirely handmade, css & html only (and some js here) :D</p></div>
<img src="../imgs/global/rainbowcable.png" alt="Rainbow cable."> <!-- Found on https://minx98.neocities.org/Assets/IDButtons/Ribbon/rainbowcable.png -->
<div class="right"><p>Version 1.0.4, 23.01.2026</p></div>
</div>
</body>
</html>

164
archive/ver_1-until2feb2026/en_home.html Normal file
View File

@@ -0,0 +1,164 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Masivana</title>
<meta name='viewport' content='width=device-width, initial-scale=0.5'>
<meta name="robots" content="noai, noimageai">
<link rel="stylesheet" type='text/css' href="css/global/components.css">
<link rel="stylesheet" type='text/css' href="css/global/styles.css">
<link rel='stylesheet' type='text/css' href='css/specific/main.css'>
<link rel='stylesheet' type='text/css' href='css/specific/chat.css'>
<link rel='stylesheet' type='text/css' href='css/specific/noaiwebring.css'>
</head>
<body>
<div class="top bar panel">
<div class="left">
<p><a href="en/about-this-site.html">About this site</a></p>
</div>
<div class="mid">
<p><a href="en_home.html">Main</a></p>
</div>
<div class="right">
<p>
<a href="es_home.html">ES</a>
<a href="#top">EN</a>
</p>
</div>
</div>
<div class="middle">
<div class="first">
<div class="blinkies panel">
<h1 class="title">Blinkies :p</h1>
<img src="imgs/blinkies/firefox_user.gif" alt="Firefox user." title="Lost-source">
<img src="imgs/blinkies/firefoxget.gif" alt="Firefox, the trusted browser." title="Lost source">
<img src="imgs/blinkies/deletetiktok_pink_blinkie.webp" alt="Delete tiktok." title="Lost source">
<img src="imgs/blinkies/bantimetravel_stamp.jpeg" alt="Ban time travel now." title="Lost source">
<img src="imgs/blinkies/0206-nyancat.gif" alt="Nyan cat." title="Lost source">
<img src="imgs/blinkies/blinkiesCafe-nonbinary.gif" alt="Non-binary flag." title="Generated on blinkies.cafe">
<img src="imgs/blinkies/queso_cubano_masiv_.gif" alt="Queso Cubano." title="Made it myself :D">
<img src="imgs/blinkies/blinkiesCafe-cats.gif" alt="Cat love." title="Generated on blinkies.cafe">
<img src="imgs/blinkies/blinkiesCafe-sudormrf.gif" alt="sudo rm -rf /" title="Generated on blinkies.cafe">
<img src="imgs/blinkies/dontfeedtheai.gif" alt="Don't feed the AI." title="Found on https://kotatsu.me/blinkies/dontfeedtheai.gif">
<img src="imgs/blinkies/steins.png" alt="Steins Gate Timeline Divergence clock." title="Made it myself :D">
<img src="imgs/blinkies/htmljunkie.gif" alt="HTML Junkie." title="Found on https://minx98.neocities.org/Assets/IDButtons/Ribbon/htmljunkie.gif">
<img src="imgs/blinkies/ihatepopups.gif" alt="I hate popups." title="Found on https://minx98.neocities.org/Assets/IDButtons/Ribbon/ihatepopups.webp">
<img src="imgs/blinkies/poweredbydoctorpepper.gif" alt="Powered by Dr. Pepper" title="Found on https://quinnbozon.nekoweb.org/indexs.html, source https://files.catbox.moe/1ouoj9.gif">
<a>(Sources on hover)</a>
</div>
<div class="webrings panel last">
<h1 class="title">Webrings</h1>
<!-- Completely replaced how this webring was provided for better accesibility, original one used <area> to include links inside the image,
but scaling it messes up the coordinates of each link, dynamically changing dimensions can only be achieved by using transform: scale(),
but that too is limited, as it can't access the current div's dimensions, you can get pixel scaling on width and height using calc and
percentages, but that doesn't scale the map accordingly.
Found a solution elsewhere, making clickable divs, and sizing them absolutely with respect to the image itself using percentages instead of
pixel's coordinates, here https://stackoverflow.com/questions/7844399/responsive-image-map/53597608#53597608 I think this solution works on
any browser, on any version (at least with my testing)-->
<div class="noaiwebring">
<a href="https://baccyflap.com/noai" target="_blank" alt="no ai webring" title="no ai webring"><div class="home"></div></a>
<a href="https://baccyflap.com/noai/?prv&s=msv" target="_top" alt="previous" title="previous"><div class="prv"></div></a>
<a href="https://baccyflap.com/noai/?rnd" target="_top" alt="random" title="random"><div class="rnd"></div></a>
<a href="https://baccyflap.com/noai/?nxt&s=msv" target="_top" alt="next" title="next"><div class="nxt"></div></a>
<img src="imgs/webrings/miniwidget5.gif" alt="the top of a fuzzy,
black sphere with two arrows rising from it, one curving to the left, one to the right. across the bulk of the sphere it reads NO AI / WEBRING in squiggly,
uneven letters and next to those words is a small question mark">
</div>
</div>
</div>
<div class="main">
<div class="about panel">
<p>Welcome to my personal website, below you can find information about the services I host + other info :D </p>
</div>
<div class="invitation-info panel">
<h1 class="title">Registration</h1>
<p>You need to create <b>an account</b> to use some of the services listed below, for information please contact the admin.</p>
</div>
<div class="links panel">
<h1 class="title">Links</h1>
<div>
<div>
<h2>Masivana</h2>
<p>
<a href="https://movies.media.ethernal.win" target="_blank">Movies & Series</a><br>
<a href="https://request.media.ethernal.win" target="_blank">Content requests</a><br>
<a href="https://books.media.ethernal.win" target="_blank">Books</a><br>
<a href="https://tube.media.ethernal.win" target="_blank">Videos</a><br>
</p>
</div>
<div>
<h2>Storage</h2>
<p>
<a href="https://photos.ethernal.win" target="_blank">Photos cloud</a><br>
<a href="https://cloud2.ethernal.win" target="_blank">Cloud</a><br>
</p>
</div>
<div>
<h2>Tools</h2>
<p>
<a href="https://convert.ethernal.win" target="_blank">File converter</a><br>
<a href="https://pdf.ethernal.win" target="_blank">PDF converter</a><br>
<a href="https://dl.ethernal.win" target="_blank">Video downloader</a><br>
<a href="https://analysis.ethernal.win" target="_blank">Chat analyser</a><br>
<a href="https://draw.ethernal.win" target="_blank">Drawing board</a><br>
<a href="https://gspanel.ethernal.win" target="_blank">Game panel</a><br>
</p>
</div>
</div>
</div>
<div class="updates panel last">
<h1 class="title">Updates</h1>
<p>17/01/2026</p>
<hr>
<p>
New website!
I hope you find these new changes favorable, it's been a while since I wanted to make my own website from scratch, I spent some hours re-learning html css. I honestly prefer a bloat-less internet, therefore there won't be any javascript (unless specified)
</p>
</div>
</div>
<div class="other">
<div class="more panel">
<div>
<h1 class="title">More</h1>
<a href="en/about-host.html">About this hosting</a><br><br>
<a href="en/calc.html">Handmade calculator</a>
</div>
</div>
<div class="chat panel last">
<h1 class="title">Chat</h1>
<div class="inputs panel">
<input type="text" id="message" autocomplete="off" form="message" placeholder="Escriba su mensaje">
<input type="submit" value="Enviar">
</div>
<div class="history panel">
<div>
<div class="comment">
<div class="user">masiv_:</div>
<div class="message">Vitae incidunt doloremque nostrum doloribus saepe minus quasi. Commodi iste sit nemo vel ut in. Qui enim ut eius nihil et quibusdam consequuntur.</div>
</div>
<div class="comment">
<div class="user">masiv_:</div>
<div class="message">Reiciendis tenetur suscipit nostrum qui atque quos ea. Minima quibusdam et excepturi voluptatem qui ea voluptatibus sed. Ea sed sint aut unde. Qui molestiae illo voluptatum. Nihil excepturi quidem officia. Et vero saepe molestias.</div>
</div>
<div class="comment">
<div class="user">masiv_:</div>
<div class="message">Unde quas dolorem explicabo quis iste. Iusto tempore eligendi qui consequatur a. Odio quas quo modi eos odio nemo ut. Tempore possimus ut nesciunt aut. Culpa voluptatibus quisquam est maiores non accusamus facere. Et mollitia asperiores autem.</div>
</div>
<div class="comment">
<div class="user">masiv_:</div>
<div class="message">Prueba N4</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bot bar panel">
<div class="left"><p>Entirely handmade, css & html only :D</p></div>
<img src="imgs/global/rainbowcable.png" alt="Rainbow cable." title="Found on https://minx98.neocities.org/Assets/IDButtons/Ribbon/rainbowcable.png">
<div class="right"><p>Version 1.0.3, 21.01.2026</p></div>
</div>
</body>
</html>

103
archive/ver_1-until2feb2026/es/about-host.html Normal file
View File

@@ -0,0 +1,103 @@
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<title>Sobre el host</title>
<link rel='stylesheet' type='text/css' href='../css/specific/about-host.css'>
<link rel="stylesheet" type='text/css' href="../css/global/components.css">
<link rel="stylesheet" type='text/css' href="../css/global/styles.css">
<link rel="stylesheet" type='text/css' href="../css/global/articles.css">
</head>
<body>
<div class="top bar panel">
<div class="left">
<p><a href="../es/about-this-site.html">Sobre el sitio</a></p>
</div>
<div id="middle">
<p><a href="../es_home.html">Principal</a></p>
</div>
<div class="right">
<p>
<a href="#top">ES</a>
<a href="../en/about-host.html">EN</a>
</p>
</div>
</div>
<div class="article panel">
<p>
Buenas, <br><br>
Si estás leyendo esto es que te interesa saber un poco sobre la estructura
en la que están hosteados mis servicios, y esta página.
He de decir que esto irá cambiando, pero si hay algo que no creo cambie
será el hecho de que quiero mantener la custodia de mis datos, por lo que
todos lo que hostee será hosteado en mi propio <i>homelab</i>, debajo detalles e historia.<br>
</p>
<h3>Especificaciones</h3>
<div class="specs panel">
<p>
Procesador: AMD Ryzen 5 4600G <br>
RAM: 32GB DDR4 3200MHZ <br>
Placa: ASRock A320M-HDV 4.0 <br>
PSU: EVGA 450W 80plus <br>
Almacenamiento: <br>
<span class="li">x1 1TB SSD NVME Samsung 970 Plus</span>
<span class="li">x2 3TB HDD WD Green (RAID 1)</span>
Gabinete: Marca genérica, <br>
es bastante cuadrado.
</p>
</div>
<h3>Historia</h3>
<p>
Cada componente tiene una historia un poquito diferente, el gabinete,
fuente y placa madre han sido la misma, y fueron un regalo de cumpleaños
de hace tiempo, en su momento con 8gb de ram, un disco HDD modesto, y
un AMD Ryzen 3 3200G, en su momento era algo, mas justo coincidió que
en esa ocasión, había recibido una laptop, a la cual le terminé dando
muchísimo más uso que a la torre, sumado al hecho de poderla transportarla
que personalmente me fue un gran plus.
</p>
<p>
Tiempo después, ya no recuerdo bien en qué contexto, decido llevarla al
lugar dónde ahora se encuentra, dónde estaba segura y con una buena conexión
de fibra óptica, esto fue por 2022, cuándo le instalé Ubuntu Server 22.04 LTS.
</p>
<p>
Gradualmente la fui mejorando, le compré su procesador actual por internet, luego
la memoria ram (intenté comprarla por Aliexpress, pero resultaba era incompatible,
por lo que tuve que revenderla, y comprarme los dos sticks de 16gb que tengo ahora),
y por último la decisión de comprar dos discos de 3tb para tener almacenamiento de
sobra (que resulta no lo fue) para lo que quisiese.
</p>
<p>
Actualmente sigo teniendo instalado el Ubuntu directo sobre el hardware, y casi todo
lo que tengo instalado allí lo manejo usando Docker a través de Portainer.
</p>
<h3>Red</h3>
<h4>Dominio</h4>
<p>
He usado varios dominios, al principio llegué a usar No-IP para conectarme remotamente,
para luego rápidamente migrar a DuckDNS, que me supo proveer de dominios gratuitos por varios años,
sin embargo, luego de toparme con las limitaciones de su servicio (por la cantidad de sub-dominios,
y debido a su dependendencia en servidores de no tan buena calidad de AWS) decidí invertir y
comprarme el dominio que estoy usando actualmente, con el registrante de Porkbun, que
debo decir fue muy económico, actualmente pago unos 5 dólares y medios al año, básicamente nada.
</p>
<h4>Proxy y DDNS</h4>
<p>
Para manejar los dominios y redirecciones he usado y seguiré usando NginxProxyManager, por ahora
no tengo planeado migrar a Traefik puesto que no está dentro de mis prioridades añadir
esa complejidad a mi setup (aunque quizás en un futuro lo haga). Uso DDClient para el DNS dinámico
puesto que mi ISP (Antel) no provee IP fijas a planes residenciales, y necesito actualizar los
registros con mi IP cada vez que esta cambia.
</p>
</div>
<div class="bot bar panel">
<div class="left"><p>Hecho a mano, sólo html y css :D</p></div>
<img src="../imgs/global/rainbowcable.png" alt="Rainbow cable."> <!-- Found on https://minx98.neocities.org/Assets/IDButtons/Ribbon/rainbowcable.png -->
<div class="right"><p>Versión 1.0.1, 17.01.2026</p></div>
</div>
</body>
</html>

37
archive/ver_1-until2feb2026/es/about-this-site.html Normal file
View File

@@ -0,0 +1,37 @@
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<title>Sobre el sitio</title>
<link rel='stylesheet' type='text/css' href='../css/specific/about-this-site.css'>
<link rel="stylesheet" type='text/css' href="../css/global/components.css">
<link rel="stylesheet" type='text/css' href="../css/global/styles.css">
<link rel="stylesheet" type='text/css' href="../css/global/articles.css">
</head>
<body>
<div class="top bar panel">
<div class="left">
<p><a href="#top">Sobre el sitio</a></p>
</div>
<div id="middle">
<p><a href="../es_home.html">Principal</a></p>
</div>
<div class="right">
<p>
<a href="#top">ES</a>
<a href="../en/about-this-site.html">EN</a>
</p>
</div>
</div>
<div class="article panel">
<p>
No seas impaciente, vuelve más tarde :p
</p>
</div>
<div class="bot bar panel">
<div class="left"><p>Hecho a mano, sólo html y css :D</p></div>
<img src="../imgs/global/rainbowcable.png" alt="Rainbow cable."> <!-- Found on https://minx98.neocities.org/Assets/IDButtons/Ribbon/rainbowcable.png -->
<div class="right"><p>Versión 1.0.1, 17.01.2026</p></div>
</div>
</body>
</html>

120
archive/ver_1-until2feb2026/es/calc.html Normal file
View File

@@ -0,0 +1,120 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<title>Calculadora</title>
<link rel="stylesheet" type='text/css' href="../css/global/components.css">
<link rel="stylesheet" type='text/css' href="../css/global/styles.css">
<link rel="stylesheet" type="text/css" href="../css/specific/calc.css">
<script src="../js/calc1.js"></script>
<script defer src="../js/calc2.js"></script>
</head>
<body>
<!--
<div class="panel">
<div>
<button onclick="calc()">CalcV1</button>
<p>Testing</p>
</div>
</div>
-->
<div class="top bar panel">
<div class="left">
<p><a href="../es/about-this-site.html">Sobre el sitio</a></p>
</div>
<div id="middle">
<p><a href="../es_home.html">Principal</a></p>
</div>
<div class="right">
<p>
<a href="#top">ES</a>
<a href="../en/calc.html">EN</a>
</p>
</div>
</div>
<div class="middle">
<div class="calculator panel">
<div>
<div class="calctitle">
Calculadora
</div>
<div class="viewing panel">
<span id="output"></span>
</div>
<div class="buttons">
<button onclick="q_manage('add',1)">1</button>
<button onclick="q_manage('add',2)">2</button>
<button onclick="q_manage('add',3)">3</button>
<button onclick="q_manage('add','+')">+</button>
<button onclick="q_manage('add',4)">4</button>
<button onclick="q_manage('add',5)">5</button>
<button onclick="q_manage('add',6)">6</button>
<button onclick="q_manage('add','-')">-</button>
<button onclick="q_manage('add',7)">7</button>
<button onclick="q_manage('add',8)">8</button>
<button onclick="q_manage('add',9)">9</button>
<button onclick="q_manage('add','*')">*</button>
<button onclick="">(</button>
<button onclick="q_manage('add',0)">0</button>
<button onclick="">)</button>
<button onclick="q_manage('add','/')">/</button>
<button onclick="q_manage('remove')">&lt;</button>
<button onclick="q_manage('add','^')">^</button>
<button onclick="q_execute('add','=')" id="equal">=</button>
</div>
</div>
</div>
<div class="info panel">
<h1 class="title">Un poco de información</h1>
<p>
Hace tiempo que no programaba en Javascript, y quería
nuevamente agarrarle la mano, por lo que decidí hacer esta
calculadora sin hacer uso de absolutamente nada más que
w3 school y algunas búsquedas sobre javascript, nada de
preguntar mis dudas a ninguna IA (aunque sea más lento).
</p>
<p>
Así que me puse manos a la obra re-aprendiendo algunas cosas,
he de decir que fue un ejercicio divertido, y aunque el
resultado carece de algunas características (cómo el uso
de paréntesis), sigue el orden de las operaciones, y eso
es bastante.
</p>
<p>
En un futuro si la hiciese nuevamente, podría implementar
algoritmos más eficientes, puesto que realmente lo hice de
la manera que se me fue ocurriendo, y realmente debe ser muy
ineficiente, si quisiese eficiencia tendría mil maneras y
librerías, pero el objetivo de este ejercicio es aprender.
</p>
<p>
Yendo un poco más a lo técnico, mi idea principal fue almacenar
cada caracter escrito en un array, y luego procesarlo de la
siguiente manera:
<span class="li">Unir los números, de [1,1,'+',2,3] a [11,'+',23].</span>
<span class="li">Buscar dónde están los separa términos, e ir creando arrays
multidimensionales, cada nivel tiene un tipo de operación (on orden).
</span>
<span class="li">Deshacer ese array multidimensional, e ir procesando
todas las operaciones.
</span>
Dicho así parece sencillo, pero esutve un día y medio programando y lidiando
con cosas que, o no sabía, o no recordaba. (He de decir que trabajar con tanta iteración
en los arrays multidimensionales es un trabajo no trivial).
</p>
<p>
Actualización 23/01/2026 <br>
Le mostré la calcualdora a unx amigx, y me hizo darme
cuenta de que no había implementado el botón del 0,
la verdad no tengo ni idea cómo no me di cuenta XD.
</p>
</div>
</div>
<div class="bot bar panel">
<div class="left"><p>Hecho a mano, sólo html y css (y un poco de js aquí) :D</p></div>
<img src="../imgs/global/rainbowcable.png" alt="Rainbow cable."> <!-- Found on https://minx98.neocities.org/Assets/IDButtons/Ribbon/rainbowcable.png -->
<div class="right"><p>Versión 1.0.4, 23.01.2026</p></div>
</div>
</body>
</html>

166
archive/ver_1-until2feb2026/es_home.html Normal file
View File

@@ -0,0 +1,166 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Masivana</title>
<meta name='viewport' content='width=device-width, initial-scale=0.5'>
<meta name="robots" content="noai, noimageai">
<link rel="stylesheet" type='text/css' href="css/global/components.css">
<link rel="stylesheet" type='text/css' href="css/global/styles.css">
<link rel='stylesheet' type='text/css' href='css/specific/main.css'>
<link rel='stylesheet' type='text/css' href='css/specific/chat.css'>
<link rel='stylesheet' type='text/css' href='css/specific/noaiwebring.css'>
</head>
<body>
<div class="top bar panel">
<div class="left">
<p><a href="es/about-this-site.html">Sobre el sitio</a></p>
</div>
<div class="mid">
<p><a href="es_home.html">Principal</a></p>
</div>
<div class="right">
<p>
<a href="#top">ES</a>
<a href="en_home.html">EN</a>
</p>
</div>
</div>
<div class="middle">
<div class="first">
<div class="blinkies panel">
<h1 class="title">Blinkies :p</h1>
<img src="imgs/blinkies/firefox_user.gif" alt="Firefox user." title="Lost-source">
<img src="imgs/blinkies/firefoxget.gif" alt="Firefox, the trusted browser." title="Lost source">
<img src="imgs/blinkies/deletetiktok_pink_blinkie.webp" alt="Delete tiktok." title="Lost source">
<img src="imgs/blinkies/bantimetravel_stamp.jpeg" alt="Ban time travel now." title="Lost source">
<img src="imgs/blinkies/0206-nyancat.gif" alt="Nyan cat." title="Lost source">
<img src="imgs/blinkies/blinkiesCafe-nonbinary.gif" alt="Non-binary flag." title="Generated on blinkies.cafe">
<img src="imgs/blinkies/queso_cubano_masiv_.gif" alt="Queso Cubano." title="Made it myself :D">
<img src="imgs/blinkies/blinkiesCafe-cats.gif" alt="Cat love." title="Generated on blinkies.cafe">
<img src="imgs/blinkies/blinkiesCafe-sudormrf.gif" alt="sudo rm -rf /" title="Generated on blinkies.cafe">
<img src="imgs/blinkies/dontfeedtheai.gif" alt="Don't feed the AI." title="Found on https://kotatsu.me/blinkies/dontfeedtheai.gif">
<img src="imgs/blinkies/steins.png" alt="Steins Gate Timeline Divergence clock." title="Made it myself :D">
<img src="imgs/blinkies/htmljunkie.gif" alt="HTML Junkie." title="Found on https://minx98.neocities.org/Assets/IDButtons/Ribbon/htmljunkie.gif">
<img src="imgs/blinkies/ihatepopups.gif" alt="I hate popups." title="Found on https://minx98.neocities.org/Assets/IDButtons/Ribbon/ihatepopups.webp">
<img src="imgs/blinkies/poweredbydoctorpepper.gif" alt="Powered by Dr. Pepper" title="Found on https://quinnbozon.nekoweb.org/indexs.html, source https://files.catbox.moe/1ouoj9.gif">
(Fuentes haciendo <br> hover)
</div>
<div class="webrings panel last">
<h1 class="title">Webrings</h1>
<!-- Completely replaced how this webring was provided for better accesibility, original one used <area> to include links inside the image,
but scaling it messes up the coordinates of each link, dynamically changing dimensions can only be achieved by using transform: scale(),
but that too is limited, as it can't access the current div's dimensions, you can get pixel scaling on width and height using calc and
percentages, but that doesn't scale the map accordingly.
Found a solution elsewhere, making clickable divs, and sizing them absolutely with respect to the image itself using percentages instead of
pixel's coordinates, here https://stackoverflow.com/questions/7844399/responsive-image-map/53597608#53597608 I think this solution works on
any browser, on any version (at least with my testing)-->
<div class="noaiwebring">
<a href="https://baccyflap.com/noai" target="_blank" alt="no ai webring" title="no ai webring"><div class="home"></div></a>
<a href="https://baccyflap.com/noai/?prv&s=msv" target="_top" alt="previous" title="previous"><div class="prv"></div></a>
<a href="https://baccyflap.com/noai/?rnd" target="_top" alt="random" title="random"><div class="rnd"></div></a>
<a href="https://baccyflap.com/noai/?nxt&s=msv" target="_top" alt="next" title="next"><div class="nxt"></div></a>
<img src="imgs/webrings/miniwidget5.gif" alt="the top of a fuzzy,
black sphere with two arrows rising from it, one curving to the left, one to the right. across the bulk of the sphere it reads NO AI / WEBRING in squiggly,
uneven letters and next to those words is a small question mark">
</div>
</div>
</div>
<div class="main">
<div class="about panel">
<p>Bienvenidxs a mi página web, aquí podrán encontrar los servicios que proveeo, y otra información :D</p>
</div>
<div class="invitation-info panel">
<h1 class="title">Registro</h1>
<p>Para acceder a algunos de los servicios de abajo, es necesaria <b>una cuenta</b>, por información contactar a la administradora.</p>
</div>
<div class="links panel">
<h1 class="title">Links</h1>
<div>
<div>
<h2>Masivana</h2>
<p>
<a href="https://movies.media.ethernal.win" target="_blank">Películas y series</a><br>
<a href="https://request.media.ethernal.win" target="_blank">Peticiones de contenido</a><br>
<a href="https://books.media.ethernal.win" target="_blank">Libros</a><br>
<a href="https://tube.media.ethernal.win" target="_blank">Videos</a><br>
</p>
</div>
<div>
<h2>Almacenamiento</h2>
<p>
<a href="https://photos.ethernal.win" target="_blank">Nube de fotos</a><br>
<a href="https://cloud2.ethernal.win" target="_blank">Nube</a><br>
</p>
</div>
<div>
<h2>Herramientas</h2>
<p>
<a href="https://convert.ethernal.win" target="_blank">Conversor de archivos</a><br>
<a href="https://pdf.ethernal.win" target="_blank">Conversor de pdfs</a><br>
<a href="https://dl.ethernal.win" target="_blank">Descargador de videos</a><br>
<a href="https://analysis.ethernal.win" target="_blank">Analizador de chats</a><br>
<a href="https://draw.ethernal.win" target="_blank">Pizarra</a><br>
<a href="https://gspanel.ethernal.win" target="_blank">Panel de juegos</a><br>
</p>
</div>
</div>
</div>
<div class="updates panel last">
<h1 class="title">Actualizaciones</h1>
<p>17/01/2026</p>
<hr>
<p>
Nuevo sitio web!
Espero les guste, desde ya hacía tiempo que quería tener mi propio sitio web, pero programado desde cero, estuve unas horitas re-aprendiendo html y css, sinceramente prefiero un internet sin bloat, por lo que a-priori no habrá javascript en este sitio.
</p>
</div>
</div>
<div class="other">
<div class="more panel">
<div>
<h1 class="title">Más</h1>
<a href="es/about-host.html">Sobre el host</a><br><br>
<a href="es/calc.html">Calculadora DIY</a>
</div>
</div>
<div class="chat panel last">
<h1 class="title">Chat</h1>
<div class="history panel">
<div>
<div class="comment">
<div class="user">masiv_:</div>
<div class="message">Vitae incidunt doloremque nostrum doloribus saepe minus quasi. Commodi iste sit nemo vel ut in. Qui enim ut eius nihil et quibusdam consequuntur.</div>
</div>
<div class="comment">
<div class="user">masiv_:</div>
<div class="message">Reiciendis tenetur suscipit nostrum qui atque quos ea. Minima quibusdam et excepturi voluptatem qui ea voluptatibus sed. Ea sed sint aut unde. Qui molestiae illo voluptatum. Nihil excepturi quidem officia. Et vero saepe molestias.</div>
</div>
<div class="comment">
<div class="user">masiv_:</div>
<div class="message">Unde quas dolorem explicabo quis iste. Iusto tempore eligendi qui consequatur a. Odio quas quo modi eos odio nemo ut. Tempore possimus ut nesciunt aut. Culpa voluptatibus quisquam est maiores non accusamus facere. Et mollitia asperiores autem.</div>
</div>
<div class="comment">
<div class="user">masiv_:</div>
<div class="message">Prueba N4</div>
</div>
</div>
</div>
<div class="inputs panel">
<input type="text" id="message" autocomplete="off" form="message" placeholder="Testing, not working.">
<input type="submit" value="Send">
</div>
</div>
</div>
</div>
</div>
<div class="bot bar panel">
<div class="left"><p>Hecho a mano, sólo html y css :D</p></div>
<img src="imgs/global/rainbowcable.png" alt="Rainbow cable." title="Found on https://minx98.neocities.org/Assets/IDButtons/Ribbon/rainbowcable.png">
<div class="right"><p>Versión 1.0.3, 21.01.2026</p></div>
</div>
</body>
</html>

BIN
archive/ver_1-until2feb2026/imgs/blinkies/0206-nyancat.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
archive/ver_1-until2feb2026/imgs/blinkies/bantimetravel_stamp.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
archive/ver_1-until2feb2026/imgs/blinkies/blinkiesCafe-cats.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 851 B

BIN
archive/ver_1-until2feb2026/imgs/blinkies/blinkiesCafe-nonbinary.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
archive/ver_1-until2feb2026/imgs/blinkies/blinkiesCafe-sudormrf.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 821 B

BIN
archive/ver_1-until2feb2026/imgs/blinkies/deletetiktok_pink_blinkie.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 638 B

BIN
archive/ver_1-until2feb2026/imgs/blinkies/dontfeedtheai.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 904 B

BIN
archive/ver_1-until2feb2026/imgs/blinkies/firefox_user.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
archive/ver_1-until2feb2026/imgs/blinkies/firefoxget.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
archive/ver_1-until2feb2026/imgs/blinkies/htmljunkie.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
archive/ver_1-until2feb2026/imgs/blinkies/ihatepopups.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
archive/ver_1-until2feb2026/imgs/blinkies/poweredbydoctorpepper.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
archive/ver_1-until2feb2026/imgs/blinkies/queso_cubano_masiv_.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
archive/ver_1-until2feb2026/imgs/blinkies/steins.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
archive/ver_1-until2feb2026/imgs/global/rainbowcable.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
archive/ver_1-until2feb2026/imgs/webrings/miniwidget5.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 402 B

15
archive/ver_1-until2feb2026/js/calc1.js Normal file
View File

@@ -0,0 +1,15 @@
function calc() {
let resultado = 0;
const numeros = [];
const quantity = parseInt(prompt("Ingrese la cantidad de números a sumar."));
for (let i = 0; i < quantity; i++) {
numeros[i] = parseInt(prompt("Ingrese el "+(i+1)+"° número."));
while (isNaN(numeros[i]) == true) {
numeros[i] = parseInt(prompt("Repita el "+(i+1)+"° número."));
}
resultado += numeros[i];
}
alert("El resultado de la suma es "+resultado);
}

273
archive/ver_1-until2feb2026/js/calc2.js Normal file
View File

@@ -0,0 +1,273 @@
let queue = [];
let final_queue = [];
let resultado = 0;
let cantidad_nums = 0;
let operation_order = ['+','-','/','*','^'];
let tally = 0;
function q_print(){
for (k=0; k < queue.length; k++){
setTimeout(console.log("Índice N°"+k+" es "+queue[k]),500);
}
return;
}
function a_print(array){
for (k=0; k < array.length; k++){
console.log("Índice N°"+k+" es "+array[k]);
}
return;
}
function q_display(q_array) {
output.innerHTML = '';
for (i=0; i < q_array.length; i++) {
output.innerHTML += q_array[i];
}
return;
}
function q_manage(type, item){
if (type == 'add') {
queue.push(item);
q_display(queue);
} else if (type == 'remove') {
queue.splice(-1,1);
q_display(queue);
} else {
output.innerHTML = 'Entrada inválida';
}
return;
}
function a_concatnum(z_array) {
let a_length = z_array.length;
var a_concat = [];
var cont = 0;
var num = "";
let j = 0;
z_array.push(true); // push something other than number or string to trigger last exectuion
for (i=0; i < a_length; i++){
if (typeof(z_array[i]) == 'number'){
cont++;
} else {
for (j=0; j < cont; j++){
num = num + String(z_array[(j)]);
}
if (num != '') {
a_concat.push(parseInt(num))
}
num = "";
if (typeof(z_array[i] == 'string')) {
a_concat.push(z_array[i]);
}
z_array.splice(0,cont+1);
cont = 0;
i=-1;
a_length = z_array.length;
}
}
z_array = a_concat;
z_array.splice(-1,1); // remove that something i put in earlier
return z_array;
}
function a_split(l_array) {
function a_search_char(s_array,char, direction_from,excluded_points){
if (direction_from == 'right') {
s_array.reverse();
} else if (direction_from == 'left'){
} else {
output.innerHTML = 'Error en la dirección de búsqueda';
}
outerLoop: for (i=0; i < s_array.length; i++){
// Chequea si el punto encontrado está en la exclusión (para evitar repetidos)
innerLoop: for (j=0; j <= excluded_points.length; j++){
if (i == excluded_points[j]){
continue outerLoop;
}
}
if (s_array[i] == char) {
if (direction_from == 'right'){
return (s_array.length-i-1);
}
return i;
}
}
return -1; // No se ha encontrado
}
function array_divider(a_array, d_points){
let start = 0;
let divided_array = [];
for (i=0; i <= d_points.length; i++){
divided_array.push(a_array.slice(start,d_points[i]));
start =+ d_points[i] +1;
}
return divided_array;
}
/* Búsqueda de paréntesis
No lo voy a implementar esto, es un montón, intenté pensar
en un algoritmo pero no se me occurió, y busqué pero no quiero
usar un algoritmo tipo Shuning Yard, la idea de este código es
hacerlo sin ayudas, incluso si es ineficiente (este código tiene
O^n execution time, más recursión tiene esta cosa. */
// Buscar puntos dónde se encuentran caracteres en un array
function find_location_points(f_array,char) {
let location_points = [];
for (i=0; i < f_array.length; i++){
let search_result = a_search_char(f_array,char,'left',location_points);
// Break si ya no encuentra más
if ( search_result == -1 ){
break;
} else {
location_points.push(search_result);
}
}
return location_points;
}
function branch(b_array,char) {
b_array = array_divider(
b_array,
find_location_points(b_array,char));
return b_array;
}
function branching(b2_array){
// First
b2_array = branch(b2_array,'+');
// Second
for (l=0; l < b2_array.length; l++) {
b2_array[l] = branch(b2_array[l],operation_order[1]);
}
// Third
for (k=0; k < b2_array.length; k++) {
for (m=0; m < b2_array[k].length; m++){
b2_array[k][m] = branch(b2_array[k][m],operation_order[2]);
}
}
// Fourth
for (k=0; k < b2_array.length; k++) {
for (m=0; m < b2_array[k].length; m++){
for (n=0; n < b2_array[k][m].length; n++){
b2_array[k][m][n] = branch(b2_array[k][m][n],operation_order[3]);
}
}
}
// Fifth
for (k=0; k < b2_array.length; k++) {
for (m=0; m < b2_array[k].length; m++){
for (n=0; n < b2_array[k][m].length; n++){
for (o=0; o < b2_array[k][m][n].length; o++){
b2_array[k][m][n][o] = branch(b2_array[k][m][n][o],operation_order[4]);
}
}
}
}
return b2_array;
}
l_array = branching(l_array);
return l_array;
}
function a_calculate(array) {
// Exponenciation
for (k=0; k < array.length; k++) {
for (m=0; m < array[k].length; m++){
for (n=0; n < array[k][m].length; n++){
outerFor: for (o=0; o < array[k][m][n].length; o++){
innerFor: for (z = 0; z < array[k][m][n][o].length; z++){
// There is an extra [0] at the end of each exponenciation compensating extra nesting (?)
if (array[k][m][n][o].length == 1){
array[k][m][n][o] = array[k][m][n][o][0][0];
continue outerFor;
}
array[k][m][n][o][0] = array[k][m][n][o][0][0] ** array[k][m][n][o][1][0];
array[k][m][n][o].splice(1,1);
}
array[k][m][n][o] = array[k][m][n][o][0];
}
}
}
}
// Multiplication
for (k=0; k < array.length; k++) {
for (m=0; m < array[k].length; m++){
outerFor: for (n=0; n < array[k][m].length; n++){
innerFor: for (z = 0; z < array[k][m][n].length; z++){
if (array[k][m][n].length == 1){
array[k][m][n]= array[k][m][n][0];
continue outerFor;
}
array[k][m][n][0] = array[k][m][n][0] * array[k][m][n][1];
array[k][m][n].splice(1,1);
}
array[k][m][n] = array[k][m][n][0];
}
}
}
// Division
for (k=0; k < array.length; k++) {
outerFor: for (m=0; m < array[k].length; m++){
innerFor: for (z = 0; z < array[k][m].length; z++){
if (array[k][m].length == 1){
array[k][m]= array[k][m][0];
continue outerFor;
}
array[k][m][0] = array[k][m][0] / array[k][m][1];
array[k][m].splice(1,1);
}
array[k][m] = array[k][m][0];
}
}
// Subtraction
outerFor: for (k=0; k < array.length; k++) {
innerFor: for (z = 0; z < array[k].length; z++){
if (array[k].length == 1){
array[k]= array[k][0];
continue outerFor;
}
array[k][0] = array[k][0] - array[k][1];
array[k].splice(1,1);
}
array[k] = array[k][0];
}
// Addition
outerFor: for (k=0; k < array.length; k++) {
innerFor: for (z = 0; z < array.length; z++){
if (array.length == 1){
continue outerFor;
}
array[0] = array[0] + array[1];
array.splice(1,1);
}
}
return array;
}
function q_execute() {
//q_concatnum();
queue = a_concatnum(queue);
queue = a_split(queue);
queue = a_calculate(queue);
q_display(queue);
return;
}

315
archive/ver_1-until2feb2026/robots.txt Normal file
View File

@@ -0,0 +1,315 @@
User-agent: 2^32$
User-agent: AddSearchBot
User-agent: AdsBot-Google
User-agent: Agentic
User-agent: AhrefsBot
User-agent: .ai
User-agent: AI21 Labs
User-agent: AI2Bot
User-agent: Ai2Bot-Dolma
User-agent: AI2Bot-Dolma
User-agent: AI Article Writer
User-agent: AIBot
User-agent: AI Content Detector
User-agent: AI Dungeon
User-agent: aiHitBot
User-agent: AIMatrix
User-agent: AISearchBot
User-agent: AI Search Engine
User-agent: AI SEO Crawler
User-agent: AI Training
User-agent: AITraining
User-agent: AI Writer
User-agent: Alexa
User-agent: Alpha AI
User-agent: AlphaAI
User-agent: a[mazing]{42}(robot)
User-agent: Amazon Bedrock
User-agent: Amazonbot
User-agent: AmazonBot
User-agent: Amazon Comprehend
User-agent: Amazon-Kendra
User-agent: Amazon Lex
User-agent: Amazon Sagemaker
User-agent: Amazon Silk
User-agent: Amazon Textract
User-agent: Amelia
User-agent: AndersPinkBot
User-agent: Andibot
User-agent: Anthropic
User-agent: anthropic-ai
User-agent: AnyPicker
User-agent: Anyword
User-agent: Applebot
User-agent: Applebot-Extended
User-agent: Aria Browse
User-agent: Articoolo
User-agent: Automated Writer
User-agent: Awario
User-agent: AwarioBot
User-agent: AwarioRssBot
User-agent: AwarioSmartBot
User-agent: Azure
User-agent: BardBot
User-agent: bedrockbot
User-agent: bigsur.ai
User-agent: BLEXBot
User-agent: Brave Leo
User-agent: Brightbot 1.0
User-agent: ByteDance
User-agent: Bytespider
User-agent: CatBoost
User-agent: CCBot
User-agent: CC-Crawler
User-agent: ChatGLM
User-agent: ChatGPT Agent
User-agent: ChatGPT-User
User-agent: ChatGPT-User/2.0
User-agent: Chinchilla
User-agent: Claude
User-agent: ClaudeBot
User-agent: Claude-SearchBot
User-agent: Claude-User
User-agent: claude-web
User-agent: Claude-Web
User-agent: ClearScope
User-agent: CloudVertexBot
User-agent: Cohere
User-agent: cohere-ai
User-agent: cohere-training-data-crawler
User-agent: Common Crawl
User-agent: CommonCrawl
User-agent: ContentAtScale
User-agent: ContentBot
User-agent: Contentedge
User-agent: Content Harmony
User-agent: Content King
User-agent: Content Optimizer
User-agent: Content Samurai
User-agent: Conversion AI
User-agent: Copilot
User-agent: CopyAI
User-agent: Copymatic
User-agent: Copyscape
User-agent: Cotoyogi
User-agent: crawler.with.dots
User-agent: CrawlQ AI
User-agent: Crawlspace
User-agent: Crew AI
User-agent: CrewAI
User-agent: curl|sudo bash
User-agent: DALL-E
User-agent: DataForSeoBot
User-agent: DataProvider
User-agent: Datenbank Crawler
User-agent: DeepAI
User-agent: DeepL
User-agent: DeepMind
User-agent: DeepSeek
User-agent: Devin
User-agent: diffbot
User-agent: Diffbot
User-agent: Doubao AI
User-agent: DuckAssistBot
User-agent: Echobot Bot
User-agent: EchoboxBot
User-agent: Facebookbot
User-agent: FacebookBot
User-agent: facebookexternalhit
User-agent: FacebookExternalHit
User-agent: Factset_spyderbot
User-agent: Falcon
User-agent: Firecrawl
User-agent: FirecrawlAgent
User-agent: Flyriver
User-agent: Frase AI
User-agent: FriendlyCrawler
User-agent: Fuzz Faster U Fool
User-agent: Fuzz Faster U Fool v2.0.0
User-agent: Gemini
User-agent: Gemini-Deep-Research
User-agent: Gemma
User-agent: GenAI
User-agent: Genspark
User-agent: Gigabot
User-agent: GLM
User-agent: GoogleAgent-Mariner
User-agent: Google-CloudVertexBot
User-agent: Google-Extended
User-agent: Google-Firebase
User-agent: GoogleOther
User-agent: GoogleOther-Image
User-agent: GoogleOther-Video
User-agent: Goose
User-agent: GPT
User-agent: GPTBot
User-agent: Grammarly
User-agent: Grendizer
User-agent: Grok
User-agent: GT Bot
User-agent: GTBot
User-agent: Hemingway Editor
User-agent: Hugging Face
User-agent: Hypotenuse AI
User-agent: iaskspider
User-agent: iaskspider/2.0
User-agent: ICC-Crawler
User-agent: ImageGen
User-agent: ImagesiftBot
User-agent: img2dataset
User-agent: imgproxy
User-agent: Inferkit
User-agent: INK Editor
User-agent: INKforall
User-agent: IntelliSeek
User-agent: ISSCyberRiskCrawler
User-agent: Is this a crawler?
User-agent: JasperAI
User-agent: Kafkai
User-agent: Kangaroo
User-agent: Kangaroo Bot
User-agent: Keyword Density AI
User-agent: Knowledge
User-agent: KomoBot
User-agent: LinerBot
User-agent: LinkedInBot
User-agent: LLaMA
User-agent: LLMs
User-agent: magpie-crawler
User-agent: MarketMuse
User-agent: Meltwater
User-agent: Meta AI
User-agent: Meta-AI
User-agent: MetaAI
User-agent: Meta-External
User-agent: meta-externalagent
User-agent: Meta-ExternalAgent
User-agent: meta-externalfetcher
User-agent: Meta-ExternalFetcher
User-agent: MetaTagBot
User-agent: meta-webindexer
User-agent: Mistral
User-agent: MistralAI-User
User-agent: MistralAI-User/1.0
User-agent: MJ12bot
User-agent: MyCentralAIScraperBot
User-agent: Narrative
User-agent: NeevaBot
User-agent: netEstate Imprint Crawler
User-agent: NeuralSEO
User-agent: Neural Text
User-agent: Nova Act
User-agent: NovaAct
User-agent: Nutch
User-agent: OAI-SearchBot
User-agent: omgili
User-agent: Omgili
User-agent: omgilibot
User-agent: Omgilibot
User-agent: OmniExplorer_Bot
User-agent: Open AI
User-agent: OpenAI
User-agent: OpenBot
User-agent: OpenText AI
User-agent: Operator
User-agent: Outwrite
User-agent: Page Analyzer AI
User-agent: PanguBot
User-agent: Panscient
User-agent: panscient.com
User-agent: Paperlibot
User-agent: Paraphraser.io
User-agent: peer39_crawler
User-agent: Perplexity
User-agent: PerplexityBot
User-agent: Perplexity-User
User-agent: Petalbot
User-agent: PetalBot
User-agent: Phindbot
User-agent: PhindBot
User-agent: PiplBot
User-agent: Poseidon Research Crawler
User-agent: prefetch-proxy
User-agent: ProWritingAid
User-agent: psbot
User-agent: python-requests
User-agent: QualifiedBot
User-agent: QuillBot
User-agent: quillbot.com
User-agent: RobotSpider
User-agent: Robozilla
User-agent: Rytr
User-agent: SaplingAI
User-agent: SBIntuitionsBot
User-agent: Scalenut
User-agent: Scraper
User-agent: Scrapy
User-agent: ScriptBook
User-agent: Seekr
User-agent: SemrushBot-OCOB
User-agent: SemrushBot-SWA
User-agent: sentibot
User-agent: Sentibot
User-agent: SentiBot
User-agent: SEO Content Machine
User-agent: SEO Robot
User-agent: ShapBot
User-agent: Sidetrade
User-agent: Sidetrade indexer bot
User-agent: Simplified AI
User-agent: Sitefinity
User-agent: Skydancer
User-agent: SlickWrite
User-agent: Sonic
User-agent: Spinbot
User-agent: Spin Rewriter
User-agent: Stability
User-agent: StableDiffusionBot
User-agent: star***crawler
User-agent: Sudowrite
User-agent: SummalyBot
User-agent: Super Agent
User-agent: Surfer AI
User-agent: Teoma
User-agent: TerraCotta
User-agent: Text Blaze
User-agent: TextCortex
User-agent: The Knowledge AI
User-agent: Thinkbot
User-agent: ThinkChaos
User-agent: TikTokSpider
User-agent: Timpibot
User-agent: TimpiBot
User-agent: TurnitinBot
User-agent: VelenPublicWebCrawler
User-agent: Vidnami AI
User-agent: WARDBot
User-agent: Webzio
User-agent: webzio-extended
User-agent: Webzio-Extended
User-agent: Whisper
User-agent: WordAI
User-agent: Wordtune
User-agent: WormsGTP
User-agent: wpbot
User-agent: WPBot
User-agent: Writecream
User-agent: WriterZen
User-agent: Writescope
User-agent: Writesonic
User-agent: xAI
User-agent: xBot
User-agent: YaK
User-agent: YandexAdditional
User-agent: YandexAdditionalBot
User-agent: Youbot
User-agent: YouBot
User-agent: Zerochat
User-agent: Zero GTP
User-agent: Zhipu
User-agent: Zimm
Disallow: /
Disallow: *
DisallowAITraining: /
Content-Usage: ai=n

50
archive/ver_1-until2feb2026/testing/chat.html Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Masivana</title>
<meta name='viewport' content='width=device-width, initial-scale=0.5'>
<meta name="robots" content="noai, noimageai">
<link rel="stylesheet" type='text/css' href="/css/global/components.css">
<link rel="stylesheet" type='text/css' href="/css/global/styles.css">
<link rel='stylesheet' type='text/css' href='/css/specific/chat.css'>
<style>
.chat {
max-height: 300px;
}
</style>
</head>
<body>
<div class="top bar panel">
<div class="left">
<p><a href="/en/about-this-site.html">About this site</a></p>
</div>
<div class="mid">
<p><a href="/en_home.html">Main</a></p>
</div>
<div class="right">
<p>
<a href="/es_home.html">ES</a>
<a href="#top">EN</a>
</p>
</div>
</div>
<div class="chat panel last">
<h1 class="title">Chat</h1>
<div class="inputs panel">
<input type="text" id="message" autocomplete="off" form="message" placeholder="Escriba su mensaje">
<input type="submit" value="Enviar">
</div>
<div class="history panel">
<div>
AAAAAAAAAAAAA <br><br><br><br><br><br><br><br><br><br><br><br>AAAAAA <br>A <br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B
</div>
</div>
</div>
<div class="bot bar panel">
<div class="left"><p>Entirely handmade, css & html only :D</p></div>
<div class="right"><p>Version X, 18.01.2026</p></div>
</div>
</body>
</html>

1
chat.php Normal file
View File

@@ -0,0 +1 @@
<?php header("Location: main_en.php");

9
components/main/articles.php Normal file
View File

@@ -0,0 +1,9 @@
<div class="header">
articles
</div>
<div class="content">
<a href="pages/articles/about-host_en.html">About this hosting</a>
<a href="pages/articles/diy-calculator_en.html">DIY Calculator</a>
<a >Website redesign</a> <!-- href="pages/articles/website-redesign_en.html" -->
<a >CSS Shenanigans</a> <!-- href="pages/articles/css-shenanigans_en.html" -->
</div>

30
components/main/blinkies.php Normal file
View File

@@ -0,0 +1,30 @@
<div class="clip-box">
<div class="auto-scroll">
<div class="scroll_one">
<img src="../img/blinkies/0206-nyancat.gif" alt="">
<img src="../img/blinkies/bantimetravel_stamp.jpeg" alt="">
<img src="../img/blinkies/blinkiesCafe-cats.gif" alt="">
<img src="../img/blinkies/blinkiesCafe-nonbinary.gif" alt="">
<img src="../img/blinkies/blinkiesCafe-sudormrf.gif" alt="">
<img src="../img/blinkies/deletetiktok_pink_blinkie.webp" alt="">
<img src="../img/blinkies/dontfeedtheai.gif" alt="">
<img src="../img/blinkies/firefox_user.gif" alt="">
<img src="../img/blinkies/firefoxget.gif" alt="">
<img src="../img/blinkies/htmljunkie.gif" alt="">
<div class="spacer"></div>
</div>
<div class="scroll_two">
<img src="../img/blinkies/0206-nyancat.gif" alt="">
<img src="../img/blinkies/bantimetravel_stamp.jpeg" alt="">
<img src="../img/blinkies/blinkiesCafe-cats.gif" alt="">
<img src="../img/blinkies/blinkiesCafe-nonbinary.gif" alt="">
<img src="../img/blinkies/blinkiesCafe-sudormrf.gif" alt="">
<img src="../img/blinkies/deletetiktok_pink_blinkie.webp" alt="">
<img src="../img/blinkies/dontfeedtheai.gif" alt="">
<img src="../img/blinkies/firefox_user.gif" alt="">
<img src="../img/blinkies/firefoxget.gif" alt="">
<img src="../img/blinkies/htmljunkie.gif" alt="">
<div class="spacer"></div>
</div>
</div>
</div>

44
components/main/navbar.php Normal file
View File

@@ -0,0 +1,44 @@
<div class="logo">
<img src="img/logo/logo_smth.png" alt="">
<a href="main_en.html" class="logo-text">masiv's lair</a>
</div>
<div class="about panel">
<b><a href="pages/articles/about_en.html">About me</a></b>
</div>
<div class="links">
<div class="social-media github">
<img src="img/icons/github.png" alt="">
<a href="https://github.com/masiv1001" target="_blank">masiv1001</a>
</div>
<div class="social-media instagram">
<img src="img/icons/instagram.png" alt="">
<a href="https://instagram.com/sietezip/" target="_blank">sietezip</a>
</div>
<div class="social-media pixelfed">
<img src="img/icons/pixelfed.png" alt="">
<a href="https://pixelfed.social/masiv1001/" target="_blank">masiv1001</a>
</div>
<div class="social-media twitter">
<img src="img/icons/twitter.png" alt="">
<a href="https://twitter.com/_visam/" target="_blank">_visam</a>
</div>
<div class="social-media reddit">
<img src="img/icons/reddit.png" alt="">
<a href="https://www.reddit.com/user/masiv_o/" target="_blank">masiv_o</a>
</div>
<div class="social-media steam">
<img src="img/icons/steam.png" alt="">
<a href="https://steamcommunity.com/id/masiv1001/" target="_blank">masiv1001</a>
</div>
<div class="social-media osu">
<img src="img/icons/osu.png" alt="">
<a href="https://osu.ppy.sh/users/19273464/" target="_blank">masiv_</a>
</div>
<div class="social-media mail">
<img src="img/icons/mail.png" alt="">
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
</div>
</div>
<div class="lang-picker panel">
<b><a href="main_es.html">Español</a></b>
</div>

22
components/main/updates.php Normal file
View File

@@ -0,0 +1,22 @@
<hr>
<div class="update">
<div class="date">2 Feb 2026</div>
<h3 class="title">Website redesign!</h3>
<p class="content">I decided to give this website a whole new appeareance,
the previous design was pretty barebones so I hope y'all like it!
(Mobile optimized :D) If you wanna know more:
<a href="pages/articles/en_website-redesign.html">
Website Redesign</a> <img src="img/minis/cat-star.gif">
<a href="archive/ver_1-until2feb2026/en_home.html">Archived version</a>
</p>
</div>
<hr>
<div class="update">
<div class="date">17 Jan 2026</div>
<h3 class="title">New website!</h3>
<p class="content">New website! I hope you find these new changes favorable,
it's been a while since I wanted to make my own website from scratch,
I spent some hours re-learning html css. I honestly prefer a bloat-less
internet, therefore there won't be any javascript (unless specified) </p>
</div>
<hr>

6
components/main/verticalscroll.php Normal file
View File

@@ -0,0 +1,6 @@
<div class="clip-box">
<div class="auto-scroll">
<div class="scroll_one"><p>hello earthlings, this message if for you all that are wondering whether extra-terrestial life exists or you humans are alone. I guess you will never know... hello earthlings, this message if for you all that are wondering whether extra-terrestial life exists or you humans are alone. I guess you will never know...</p></div>
<div class="scroll_two"><p>hello earthlings, this message if for you all that are wondering whether extra-terrestial life exists or you humans are alone. I guess you will never know... hello earthlings, this message if for you all that are wondering whether extra-terrestial life exists or you humans are alone. I guess you will never know...</p></div>
</div>
</div>

64
components/main/webrings.php Normal file
View File

@@ -0,0 +1,64 @@
<div class="clip-box">
<div class="auto-scroll">
<div class="scroll_one">
<div class="noaiwebring">
<a href="https://baccyflap.com/noai" target="_blank" alt="no ai webring" title="no ai webring"><div class="home"></div></a>
<a href="https://baccyflap.com/noai/?prv&amp;s=msv" target="_top" alt="previous" title="previous"><div class="prv"></div></a>
<a href="https://baccyflap.com/noai/?rnd" target="_top" alt="random" title="random"><div class="rnd"></div></a>
<a href="https://baccyflap.com/noai/?nxt&amp;s=msv" target="_top" alt="next" title="next"><div class="nxt"></div></a>
<img src="img/webrings/miniwidget5.gif" alt="the top of a fuzzy,
black sphere with two arrows rising from it, one curving to the left, one to the right. across the bulk of the sphere it reads NO AI / WEBRING in squiggly,
uneven letters and next to those words is a small question mark">
</div>
<div class="noaiwebring">
<a href="https://baccyflap.com/noai" target="_blank" alt="no ai webring" title="no ai webring"><div class="home"></div></a>
<a href="https://baccyflap.com/noai/?prv&amp;s=msv" target="_top" alt="previous" title="previous"><div class="prv"></div></a>
<a href="https://baccyflap.com/noai/?rnd" target="_top" alt="random" title="random"><div class="rnd"></div></a>
<a href="https://baccyflap.com/noai/?nxt&amp;s=msv" target="_top" alt="next" title="next"><div class="nxt"></div></a>
<img src="img/webrings/miniwidget5.gif" alt="the top of a fuzzy,
black sphere with two arrows rising from it, one curving to the left, one to the right. across the bulk of the sphere it reads NO AI / WEBRING in squiggly,
uneven letters and next to those words is a small question mark">
</div>
<div class="noaiwebring">
<a href="https://baccyflap.com/noai" target="_blank" alt="no ai webring" title="no ai webring"><div class="home"></div></a>
<a href="https://baccyflap.com/noai/?prv&amp;s=msv" target="_top" alt="previous" title="previous"><div class="prv"></div></a>
<a href="https://baccyflap.com/noai/?rnd" target="_top" alt="random" title="random"><div class="rnd"></div></a>
<a href="https://baccyflap.com/noai/?nxt&amp;s=msv" target="_top" alt="next" title="next"><div class="nxt"></div></a>
<img src="img/webrings/miniwidget5.gif" alt="the top of a fuzzy,
black sphere with two arrows rising from it, one curving to the left, one to the right. across the bulk of the sphere it reads NO AI / WEBRING in squiggly,
uneven letters and next to those words is a small question mark">
</div>
<div class="spacer"></div>
</div>
<div class="scroll_two">
<div class="noaiwebring">
<a href="https://baccyflap.com/noai" target="_blank" alt="no ai webring" title="no ai webring"><div class="home"></div></a>
<a href="https://baccyflap.com/noai/?prv&amp;s=msv" target="_top" alt="previous" title="previous"><div class="prv"></div></a>
<a href="https://baccyflap.com/noai/?rnd" target="_top" alt="random" title="random"><div class="rnd"></div></a>
<a href="https://baccyflap.com/noai/?nxt&amp;s=msv" target="_top" alt="next" title="next"><div class="nxt"></div></a>
<img src="img/webrings/miniwidget5.gif" alt="the top of a fuzzy,
black sphere with two arrows rising from it, one curving to the left, one to the right. across the bulk of the sphere it reads NO AI / WEBRING in squiggly,
uneven letters and next to those words is a small question mark">
</div>
<div class="noaiwebring">
<a href="https://baccyflap.com/noai" target="_blank" alt="no ai webring" title="no ai webring"><div class="home"></div></a>
<a href="https://baccyflap.com/noai/?prv&amp;s=msv" target="_top" alt="previous" title="previous"><div class="prv"></div></a>
<a href="https://baccyflap.com/noai/?rnd" target="_top" alt="random" title="random"><div class="rnd"></div></a>
<a href="https://baccyflap.com/noai/?nxt&amp;s=msv" target="_top" alt="next" title="next"><div class="nxt"></div></a>
<img src="img/webrings/miniwidget5.gif" alt="the top of a fuzzy,
black sphere with two arrows rising from it, one curving to the left, one to the right. across the bulk of the sphere it reads NO AI / WEBRING in squiggly,
uneven letters and next to those words is a small question mark">
</div>
<div class="noaiwebring">
<a href="https://baccyflap.com/noai" target="_blank" alt="no ai webring" title="no ai webring"><div class="home"></div></a>
<a href="https://baccyflap.com/noai/?prv&amp;s=msv" target="_top" alt="previous" title="previous"><div class="prv"></div></a>
<a href="https://baccyflap.com/noai/?rnd" target="_top" alt="random" title="random"><div class="rnd"></div></a>
<a href="https://baccyflap.com/noai/?nxt&amp;s=msv" target="_top" alt="next" title="next"><div class="nxt"></div></a>
<img src="img/webrings/miniwidget5.gif" alt="the top of a fuzzy,
black sphere with two arrows rising from it, one curving to the left, one to the right. across the bulk of the sphere it reads NO AI / WEBRING in squiggly,
uneven letters and next to those words is a small question mark">
</div>
<div class="spacer"></div>
</div>
</div>
</div>

1
css/articles/about-host/about-host.css Normal file
View File

@@ -0,0 +1 @@
@import url('../../global/global-settings.css');

3
css/articles/about/about.css Normal file
View File

@@ -0,0 +1,3 @@
@import url('../../global/global-settings.css');
@import url('./layout/base.css');

4
css/articles/about/layout/base.css Normal file
View File

@@ -0,0 +1,4 @@
.primary {
height: 100%;
justify-content: center;
align-content: center;}

3
css/articles/diy-calculator/diy-calculator.css Normal file
View File

@@ -0,0 +1,3 @@
@import url('../../global/global-settings.css');
@import url('./layout/base.css');

65
css/articles/diy-calculator/layout/base.css Normal file
View File

@@ -0,0 +1,65 @@
.primary > div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--gap);}
.primary > div > div {
height: min(auto, 100%);
flex-basis: 45%;
flex-grow: 1;
display: flex;}
/* I could tecnically change all of this to use
display: grid, it would make a lot more sense
taking into account the mess this code is*/
.calc {
height: auto;
min-width: fit-content;
gap: var(--gap);
padding: var(--gap);
flex-direction: column;
justify-content: center;
align-items: center;}
.buttons {
width: fit-content;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: right;
align-items: stretch;
max-width: calc((70px * 4) + ( 5 * (4px * 2) ) );}
button {
border: 0;
margin: 5px;
height: 70px;
width: 70px;
transition: 0.05s background-color ease-in;}
#equal { flex-grow: 1; }
.viewing {
border-top: 0;
border-left: 0;
border-right: 0;
display: flex;
align-items: center;
width: calc((70px * 4) + ( 2 * (15px) ));
height: 3em;}
.viewing > #output {
padding: 0.5em;
font-size: 40px;
text-align: right;
text-overflow: clip;
overflow-y: auto;
width: 100%;}
.info {
min-width: 50%;
flex-shrink: 1;
flex-direction: column;}

102
css/chat.css Normal file
View File

@@ -0,0 +1,102 @@
* {
font-family: inherit;
box-sizing: inherit;
}
html, body {
height: 100%;
width: 100%;
}
body {
--text-color: rgb(215, 215, 215);
font-family: monospace;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(28, 28, 28);
box-sizing: border-box;
margin: 0;
}
h1, h2, h3, h4, p {
text-align: center;
color: var(--text-color);
}
.chatbox > div {
display: flex;
flex-direction: column;
align-items: center;
margin: 1em;
width: 400px;
}
.chatbox {
border-radius: 5px;
display: flex;
margin: 5em;
max-height: calc(100% - 5em * 2);
background-color: rgb(56, 56, 56);
}
.chatbox > div > div {
margin-bottom: 1em;
width: 100%;
}
.content {
background-color: rgb(28, 28, 28);
border-radius: 10px;
overflow-y: auto;
scrollbar-width: thin;
display: flex;
flex-direction: column-reverse;
}
.message {
margin: 0.5em;
border-bottom: 1px dashed gray;
}
input {
background-color: rgb(84, 84, 84);
border: 0;
color: var(--text-color);
}
button {
border: 0;
background-color: rgb(0, 0, 0);
color: var(--text-color);
flex-grow: 0;
}
.m_content {
text-align: right;
}
.username {
text-align: left;
}
.input > form {
display: flex;
gap: 1em;
}
.input > form > * {
flex-grow: 1;
}
.logout {
width: 100%;
}
.error {
font-weight: bold;
color: red;
}

BIN
css/global/fonts/HonyaJi-Re.ttf Normal file
View File

Binary file not shown.

BIN
css/global/fonts/basiic.ttf Normal file
View File

Binary file not shown.

BIN
css/global/fonts/beefont.ttf Normal file
View File

Binary file not shown.

BIN
css/global/fonts/lmmono10-regular.woff Normal file
View File

Binary file not shown.

BIN
css/global/fonts/specialelite.woff2 Normal file
View File

Binary file not shown.

3
css/global/global-settings.css Normal file
View File

@@ -0,0 +1,3 @@
@import url('styling/reset.css');
@import url('layout/global-layout.css');
@import url('styling/global-styling.css');

171
css/global/layout/global-layout.css Normal file
View File

@@ -0,0 +1,171 @@
/* -------- Variables --------- */
html {
--gap: 2em;
--mobile-topnavbar-height: 125px;
--mobile-botnavbar-height: var(--mobile-topnavbar-height);
--side-bar-width: 240px;
--max-percentage-width-navar: 70%;
}
/* ---- Hide mobile only ---- */
.navbar.bot { display: none; }
/* ---- Hierarchical layout ---- */
.panel { padding: calc(var(--gap) / 2); }
.panel .header {
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
height: calc(var(--title-height) + 0.5em );
transform: translateY(-15px);}
.blank { pointer-events: none; }
body {
display: flex;
flex-direction: row;
height: 100%;
overflow: hidden;
}
.navbar {
position: fixed;
z-index: 999;
display: flex;
gap: var(--gap);
padding: var(--gap);
}
.navbar.blank {
position: relative;
flex-shrink: 0;
opacity: 0;}
.navbar.top {
flex-direction: column;
justify-content: space-around;
align-items: center;
width: var(--side-bar-width);
height: 100%;
--max-width: var(--max-percentage-width-navar);
}
.links {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: calc(var(--gap) / 2);}
.links > div {
align-items: center;
height: 50px;
padding: 7px;}
.links a {
margin: 0px;
text-align: left;}
.links .mail { height: fit-content; }
.links > .social-media {
display: flex;
flex-direction: row;
gap: calc(var(--gap) / 4);}
.links img { height: 24px; }
.navbar.top > div { width: 100%; }
.wrapper {
flex-grow: 1;
width: 0%; /* Don't know why this works, forces div to always grow */
overflow-y: auto;
overflow-x: hidden;}
.primary {
display: flex;
flex-direction: row-reverse;
align-content: space-between;
flex-wrap: wrap;
padding: var(--gap);
gap: var(--gap);
height: fit-content;
width: 100%;}
@media only all and (max-width:700px) {
/* -- Ordering -- */
.about { order: 1; }
.logo { order: 2; }
.lang-picker { order: 3; }
/* -- Layout -- */
body {
flex-direction: column;
overflow: hidden;}
.wrapper {
width: 100%;
height: fit-content;
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 0;
overflow: auto;
position: relative;}
.navbar.top {
flex-direction: row;
justify-content: space-around;
align-items: center;
height: var(--mobile-topnavbar-height);
gap: var(--gap);
width: 100%;
--max-width: 80%;}
.navbar.top > .links { display: none; }
.navbar.bot { display: flex; }
.navbar.bot.blank {
position: relative;
flex-shrink: 0;
opacity: 0;}
.navbar.bot {
display: flex;
position: fixed;
bottom: 0px;
height: var(--mobile-botnavbar-height);
flex-direction: column;
justify-content: center;
align-content: center;
width: 100%;}
.navbar.bot > div { flex-direction: row; }
.links {
/* Scroll mechanics */
margin-bottom: -1em; /* Trick to hide visual scrollbar */
padding-bottom: 1em;
overflow-x: auto;
overflow-y: hidden;
mask-image: linear-gradient(to right, rgba(0,0,0,1) 80%, rgba(0,0,0,0));
/* Ordering */
justify-content: flex-start;
clip-path: content-box;
align-items: flex-start;
flex-direction: column;}
.links .last { margin-right: 20%; } /* Complementing visual trick by allow extra scrolling to hide previous visual trick, 100% - 80% */
.links > div{ align-items: center;}
}

174
css/global/styling/global-styling.css Normal file
View File

@@ -0,0 +1,174 @@
/* Colors */
/* ---------------- Variables ---------------- */
html {
--border-radius: 5px;
--accent-color-light: aliceblue;
--accent-color-middle: rgb(173, 189, 203);
--accent-color-dark: rgb(24, 47, 56);
--panel-border_one: var(--accent-color-dark);
--panel-border_two: var(--accent-color-dark);
--panel-header: var(--accent-color-dark);
--panel-background: var(--accent-color-light);
--body-background: rgb(255, 255, 255);
--input-background: white;
--input-background-hover: rgb(216, 222, 227);
--input-highlight: rgb(86, 176, 255);
--navvar-background: rgb(179, 200, 218);
--navbar-buttons-bg: var(--accent-color-light);
--navbar-buttons-hover: var(--input-background-hover);
--input-border-radius: var(--border-radius);
--link-color: var(--accent-color-dark);
--link-color-hover: var(--input-highlight);
--logo-outline-color: var(--input-highlight);}
/* Background texture */
body { background-image: url('graphgreen.gif'); }
/* ----------------- Others -------------------- */
* { scrollbar-width: thin;}
img { image-rendering: pixelated;}
.logo { position: relative; }
.logo > img {
position: absolute;
width: 80px;
top: 15px;
right: -40px;}
.links { overflow-y: auto; }
.links a { text-decoration: none;}
/* ----------------- Fonts -------------------- */
@font-face {
font-family: 'special elite';
src: url('../fonts/specialelite.woff2') format('woff');
font-weight: normal;
font-style: normal;}
@font-face {
font-family: 'honyaji';
src: url('../fonts/HonyaJi-Re.ttf') format('truetype');
font-weight: normal;
font-style: normal;}
@font-face {
font-family: 'basiic';
src: url('../fonts/basiic.ttf') format('truetype');
font-weight: normal;
font-style: normal;}
@font-face {
font-family: 'beefont';
src: url('../fonts/beefont.ttf') format('truetype');
font-weight: normal;
font-style: normal;}
* { text-align: center; }
body { font-family: 'special elite', honyaji, basiic, monospace, serif, sans-serif; }
/* ----------------- Color -------------------- */
.navbar { background-color: var(--navvar-background); }
.panel {
position: relative;
border-radius: 5px;
border: 2px solid var(--panel-border_one);
background-color: var(--panel-background);}
.chat-history {
border-radius: var(--chat-border-radius);
background-color: var(--chat-history-background);}
/* ------------- Decorations & dividers (D&D) -------------------- */
.panel .header { position: relative; }
.panel .header::after {
position: absolute;
bottom: -3px;
content: "- - --⛤-- - -";
font-size: 15px;}
/* ------------- Navbars stiling ------------------- */
.about, .links > div, .lang-picker {
border: 5px groove rgb(214, 236, 255);
background: var(--navbar-buttons-bg);}
.about:hover, .links > div:hover, .lang-picker:hover {
background-color: var(--navbar-buttons-hover);
transition: background-color 0.1s;}
/* ------------- Inputs & links ----------------- */
button, .button {
font-family: 'special elite';
background-color: var(--input-background);
border: 0;
border-radius: var(--input-border-radius);
border-bottom: 4px solid var(--input-highlight);
padding: 0.35em;}
button:hover, .button:hover {
background-color: var(--input-background-hover);
border-bottom: 2px solid var(--input-highlight);
padding-bottom: 0.1em;
padding-top: calc((0.35em + (0.25em - 0.1em)) + 2px);
transition: background-color 0.1s;
transition: border-bottom 0.1s;
transition: padding-bottom 0.15s;
transition: padding-top 0.15s;}
input[type=text] {
font-family: 'special elite';
border: 0;
border-radius: var(--input-border-radius);
border-bottom: 4px solid var(--input-highlight);
transition: background-color 0.1s;
transition: border-bottom 0.1s;}
input[type=text]:focus { outline: 0; }
input[type=text]:hover {
border-bottom: 2px solid var(--input-highlight);
background-color: var(--input-background-hover);
transition: background-color 0.1s;}
a, a:visited {
color: var(--link-color);
text-decoration-style: wavy;}
a:hover {
transform: translateY(-2px);
color: var(--link-color-hover);
transition: color 0.1s;
transition: transform 0.1s;}
.logo { position: relative; }
.logo-text {
/* position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%); */
font-size: 40px;
color: white;
text-shadow:
2px 0 var(--logo-outline-color),
-2px 0 var(--logo-outline-color),
0 2px var(--logo-outline-color),
0 -2px var(--logo-outline-color),
1px 1px var(--logo-outline-color),
-1px -1px var(--logo-outline-color),
1px -1px var(--logo-outline-color),
-1px 1px var(--logo-outline-color);}
.logo a {
color: white;
text-decoration: none;
}

BIN
css/global/styling/graphgreen.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 416 B

11
css/global/styling/reset.css Normal file
View File

@@ -0,0 +1,11 @@
/* Reset */
html, body {
box-sizing: border-box;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
* { box-sizing: inherit; }

279
css/main/layouts/base.css Normal file
View File

@@ -0,0 +1,279 @@
/* Base design */
/* ---------------- Variables ---------------- */
html {
--chat-gap: 1em;
--updates-gap: 1em;
--blinkies-gap: 1em;
--blinkies-height: 40px;
--scrolls-height: 50px;
--secondary-width: 200px;
--webrings-heigth: 200px;
--webrings-mobile-height: 100px;
--title-height: 3em;
}
/* --------- Display changes ---------------- */
.verticalscroll, .scroll_below-clip-box, #try_tapping--blinkie, #try_hovering--blinkie { display: none; }
/* --------- Hierarchical layout --------- */
.blinkies {
padding-top: 0;
padding-bottom: 0;
gap: var(--blinkies-gap);
width: 100%;
height: var(--blinkies-height);
flex-grow: 0;
align-content: center;}
.auto-scroll {
display: flex;
flex-direction: row;}
.scroll_one, .scroll_two {
display: flex;
gap: var(--blinkies-gap);}
.blinkies img { height: 30px; }
.content {
overflow-y: auto;
overflow-x: hidden;}
.articles, .chat-webrings { width: var(--secondary-width); }
.articles { flex-grow: 0; }
.articles .content {
display: flex;
flex-direction: column;
gap: calc(var(--gap) / 2);
}
.main {
display: flex;
flex-direction: column;
flex: 1;
gap: var(--gap);}
.updates {
flex-grow: 1;
overflow-y: auto;
flex-basis: 30%;
flex-shrink: 0;}
.updates .update {
display: grid;
grid-template-columns: fit-content 1fr;
grid-template-rows: fit-content 1fr;
gap: var(--updates-gap);}
.update .title {
/* Grid placement */
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
text-align: center;
margin-bottom: 0;}
.update .date {
/* Grid placement */
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3;
writing-mode: sideways-lr;}
.update .content {
/* Grid placement */
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
text-align: justify;}
.provided {
position: relative;
flex-grow: 1;
overflow-y: auto;
overflow-x: hidden;}
.provided .content {
display: flex;
flex-direction: column;
gap: calc(var(--gap) / 4);
overflow-y: auto;}
.services-hint {
/* Internal layout and positioning */
display: flex;
align-items: center;
justify-content: center;
gap: calc(var(--gap) / 3);
background-color: var(--hint-background);}
.services-hint p {
flex-grow: 0;
vertical-align: center;
padding-left: calc(var(--gap) / 3);
border-left: 2px solid red;
}
.services-hint img {
height: 32px;
flex-grow: 0;
flex-shrink: 0;
margin-right: calc(var(--gap) / 3);}
.services {
display: flex;
gap: var(--gap);
flex-wrap: wrap;
}
.services > div {
display: flex;
flex-direction: column;
flex-grow: 1;
gap: calc(var(--gap) / 2);
}
.chat-webrings {
display: flex;
flex-direction: column;
flex-grow: 0;
flex-shrink: 0;
gap: inherit;}
.chat {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;}
.chat > .content {
flex-grow: 1;
display: flex;
gap: var(--chat-gap);
flex-direction: column;
overflow: hidden;}
.chat-account {
width: 100%;
height: fit-content;
display: flex;
flex-direction: column;
flex-grow: 0;
gap: calc(var(--gap) / 4);}
.chat-account-inputs, .chat-account-buttons {
height: auto;
gap: calc(var(--gap) / 2);
display: flex;
flex-grow: 0;
width: 100%;}
.chat-account input, .chat-account button {
height: fit-content;
width: 50%;}
.chat-history {
display: flex;
flex-direction: column;
padding-top: calc(var(--gap) / 2);
padding-bottom: calc(var(--gap) / 2);
gap: calc(var(--gap) / 2);
width: 100%;
flex-grow: 1;
overflow-y: auto;}
.message > .date_sent { margin: 0;}
.chat-input {
width: 100%;
flex-grow: 0;}
.chat-input input { width: 100%; }
.webrings {
display: flex;
gap: var(--blinkies-gap);
height: var(--webrings-heigth);
flex-grow: 0;
justify-content: center;}
.webrings .auto-scroll {
width: 100%;
display: flex;
flex-direction: column;}
.webrings .scroll_one, .webrings .scroll_two {
display: flex;
flex-direction: column;
gap: var(--blinkies-gap);}
.webrings .auto-scroll > * img {
width: 100%;
}
/* ----------- Animation ------------- */
/* Personalized marquee, did my thing
because I didn't quite get what the owner
of https://minx98.neocities.org/ was doing,
got the idea to use two separate divs and
transform them, not sure how the original
owner clipped them though */
/* Global */
.auto-scroll { width: fit-content; }
.auto-scroll:hover { animation-play-state: paused !important; }
.clip-box { overflow: hidden; }
.auto-scroll {
animation-duration: 10s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
}
/* Blinkies */
.blinkies .clip-box { clip-path: content-box; }
.blinkies .auto-scroll {
animation-name: scroll_blinkies;
animation-duration: 20s;}
@keyframes scroll_blinkies {
from {transform: translateX(calc(-50%));}
to {transform: translateX(0%);}}
/* Second blinkie */
.blinkies.two .auto-scroll { animation-direction: reverse; }
/* Webrings */
.webrings .clip-box {
clip-path: content-box;
width: 100%; }
.webrings .auto-scroll { animation-name: scroll-webring; }
@keyframes scroll-webring {
from {transform: translateY(calc(-50%));}
to {transform: translateY(0%);}}

24
css/main/layouts/desktop-slim.css Normal file
View File

@@ -0,0 +1,24 @@
/* RESPONSIVE DESIGN, LAPTOP SLIM */
@media only all and (max-width:1175px){
/* ------------- Order ------------- */
.blinkies.one { order: 1; }
.articles { order: 4; }
.main { order: 2; }
.chat-webrings { order: 3; }
.blinkies.two { order: 5; }
/* ------------- Layout ------------ */
.articles { flex-grow: 1; }
.chat-webrings { flex-grow: 0; }
.main {
flex-grow: 999;
min-width: 50%}
.services { overflow-y: auto; }
/* --- Decoration --- */
}

21
css/main/layouts/desktop-slimmer.css Normal file
View File

@@ -0,0 +1,21 @@
/* RESPONSIVE DESIGN, LAPTOP SLIMMER */
@media only all and (max-width:750px){
/* ------------- Order ------------- */
/* ------------ Layout ------------ */
.main {
flex-basis: 100%;
flex-shrink: 0;}
.articles {
flex-grow: 1;
width: auto;}
.chat-webrings {
width: var(--secondary-width);
flex-grow: 1;}
.services { overflow-y: auto; }
}

16
css/main/layouts/desktop.css Normal file
View File

@@ -0,0 +1,16 @@
/* RESPONSIVE DESIGN, LAPTOP FULL */
@media only all and (min-width:1175px) {
/* ------------- Layout ------------- */
.primary {
padding-right: 150px;
padding-left: 150px;}
.chat-webrings, .main, .articles { height: calc(100vh - (var(--blinkies-height) * 2) - (var(--gap) * 4)); }
.services { overflow-y: auto; }
/* ---- Display changes ---- */
#try_hovering--blinkie { display: block; }
}

149
css/main/layouts/mobile.css Normal file
View File

@@ -0,0 +1,149 @@
/* RESPONSIVE DESIGN, MOBILE */
@media only all and (max-width:700px){
/* ------------- Order ------------- */
.blinkies.one { order: 0; }
.main { order: 1; }
.articles { order: 2; }
.chat-webrings { order: 3; }
.verticalscroll { order: 4; }
/* -------- Display changes ---------- */
.blinkies.two { display: none; }
.verticalscroll { display: flex; }
.scroll_below-clip-box { display: block; }
.navbar.bot > .about, .navbar.bot > .logo, .navbar.bot > .lang-picker { display: none; }
/* Decoration */
#try_hovering--blinkie { display: none; }
#try_tapping--blinkie { display: block; }
/* ------------- Layout ------------- */
.primary {
width: calc(100% - var(--scrolls-height) - var(--gap) * 2);
height: fit-content;
flex-direction: column;
padding-right: 0;}
.primary > * {
width: 100%;}
.main {
height: fit-content;
flex-grow: 1;
flex-basis: auto;}
.verticalscroll {
position: fixed;
right: 0; /* There is a slight inconsistency with this, as scrollbar width isn't considered with fixed, but the blank version does contemplate, creating a gap wider than expected */
margin: var(--gap);
justify-content: center;
height: calc(100% - var(--mobile-botnavbar-height) - var(--mobile-topnavbar-height) - var(--gap) * 2);
width: var(--scrolls-height);
overflow: hidden;}
.verticalscroll.blank {
height: 100%;
position: relative;
opacity: 0;}
.vertical-scroll-wrapper {
height: fit-content;}
.verticalscroll .clip-box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: fit-content;
display: flex;
justify-content: center;}
.verticalscroll .auto-scroll{
display: flex;
flex-direction: column;}
.verticalscroll p {
writing-mode: vertical-lr;
text-orientation: sideways;
text-wrap: nowrap;}
.webrings {
gap: var(--blinkies-gap);
height: var(--webrings-mobile-height);
flex-shrink: 0;
padding-top: 0;
padding-bottom: 0;}
.webrings .clip-box {
align-content: center;}
.webrings .auto-scroll {
flex-direction: row;
animation-name: scroll-webring-mobile;}
.webrings .scroll_one, .webrings .scroll_two {
flex-direction: row;}
.webrings .auto-scroll > * > div img {
height: 60px;
width: auto;}
.scroll_below-clip-box {
position: absolute;
bottom: 0;
top: 50px;
width: 100%;
height: 100%;
pointer-events: none;
clip-path: border-box;}
.scroll_below {
position: fixed;
left: 0px;
bottom: var(--mobile-botnavbar-height);
margin-bottom: 0px;
height: fit-content;
width: fit-content;
padding-left: 1em;
padding-right: 1em;
text-align: center;}
/* ----------- Animation ----------- */
/* Blinkies */
.blinkies.one .auto-scroll {
animation-duration: 20s;
animation-direction: reverse;}
/* Webrings */
.webrings .clip-box {
height: 100%;
width: 100%;}
@keyframes scroll-webring-mobile {
from {transform: translateX(calc(-50%));}
to {transform: translateX(0%);}}
/* Vertical scroll text */
.verticalscroll .auto-scroll {
animation-name: scroll-vertical;
animation-direction: reverse;
animation-duration: 20s;}
@keyframes scroll-vertical {
from {transform: translateY(calc(-50%));}
to {transform: translateY(0%);}}
/* Opacity enhancements */
.webrings .clip-box{
mask-image: linear-gradient(to right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,1) 5%,
rgba(0,0,0,1) 95%,
rgba(0,0,0,0) 100%);}
}

11
css/main/main.css Normal file
View File

@@ -0,0 +1,11 @@
@import url('../global/global-settings.css');
@import url('styling.css');
@import url('layouts/base.css');
@import url('layouts/desktop.css');
@import url('layouts/desktop-slim.css');
@import url('layouts/desktop-slimmer.css');
@import url('layouts/mobile.css');
@import url('others/noaiwebring.css');

21
css/main/others/noaiwebring.css Normal file
View File

@@ -0,0 +1,21 @@
/* See comment on html directly */
.noaiwebring { position: relative;}
.noaiwebring > img {
width: 100%;
height: 100%;}
.noaiwebring > a > div { position: absolute; }
.noaiwebring > a > .nxt {
left: 76.1%; top: 6.5%; width: 20.5%; height: 48.4%;}
.noaiwebring > a > .prv {
left: 2.3%; top: 6.5%; width: 20.5%; height: 48.4%;}
.noaiwebring > a > .rnd {
left: 71.6%; top: 61.3%; width: 12.5%; height: 35.5%;}
.noaiwebring > a > .home {
left: 26.1%; top: 48.4%; width: 44.3%; height: 48.4%;}

73
css/main/styling.css Normal file
View File

@@ -0,0 +1,73 @@
/* Colors */
/* ---------------- Variables ---------------- */
html {
--chat-history-background: white;
--chat-border-radius: var(--border-radius);
--login-error-color: rgb(231, 90, 90);
--hint-background: ;
--chat-user: var(--input-highlight);
--chat-message: rgb(147, 153, 158);}
/* ----------------- Others -------------------- */
.auto-scroll { transform: translateZ(0); } /* Force to use gpu */
.services img:hover {
scale: 1.1;
transition: scale 0.2s;}
/* --------------- Color filtering ------------- */
.blinkies > * img, .webrings .auto-scroll > * > div, .services img {
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(180deg);}
.blinkies > * img:hover, .webrings .auto-scroll > * > div:hover, .services img:hover { filter: none; }
/* ----------------- Color -------------------- */
.chat-history {
border-radius: var(--chat-border-radius);
background-color: var(--chat-history-background);}
.chat-account-errors { color: var(--login-error-color); }
.scroll_below-clip-box { mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 90%, rgba(0,0,0,0)); }
.message .user { color: var(--chat-user); }
.message .date_sent { color: var(--chat-message); }
/* ------------- Decorations & dividers (D&D) -------------------- */
/* ----- Helpers ----- */
#try_hovering--blinkie {
scale: 3;
position: absolute;
bottom: -27px;
left: -63px;
z-index: 999;}
#try_sliding_down { width: 150px; }
#try_tapping--blinkie {
scale: 3;
position: absolute;
right: -60px;
bottom: -28px;
z-index: 999;}
/* ------ Opacity tricks for marquee -------- */
.blinkies .clip-box{
mask-image: linear-gradient(to right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,1) 5%,
rgba(0,0,0,1) 95%,
rgba(0,0,0,0) 100%);}
.webrings .clip-box{
mask-image: linear-gradient(to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,1) 5%,
rgba(0,0,0,1) 95%,
rgba(0,0,0,0) 100%);}

68
disclaimers.txt Normal file
View File

@@ -0,0 +1,68 @@
------ Directory structure:
root/
|
---> archive/
|---> old_version
|--> includes/
|--> js/
|--> css/
|---> articles/
|---> global/
|---> fonts/
|---> layout/
|---> styling/
|---> global-settings.css
|---> main/
|--> img/
|--> pages/
|--> disclaimers.txt
|--> main_es.html
|--> main_en.html
Example page styling:
page/
|
---> layouts/
|---> base (desktop optimized)
|---> desktop
|---> desktop-slim
|---> desktop-slimmer
|---> mobile
|---> misc (other responsive layout changes)
|--> page
|--> styling (colors, borders, etc.)
|--> others
------ CSS file structure:
[VARIABLES] //
[ORDERING] //
[LAYOUT] // Order by ~rendering order, indentation demarks nesting, separated by sections.
[ANIMATIONS] //
------ CSS Syntax structure:
One property:
selector { property: value; }
Multiple properties:
selector {
property1: value;
property2: value2;}
------ CSS Imports:
1. global settings
3. page settings
3. layouts
4. misc
------ Inspirations for design
1. Background tiling https://lazybones.neocities.org/
2. Sidebar https://minx98.neocities.org/
3. Marquee https://minx98.neocities.org/
3. Font https://weirdfashionhub.carrd.co/
4. Buttons https://aegi.neocities.org/

BIN
img/blinkies/0206-nyancat.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
img/blinkies/bantimetravel_stamp.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
img/blinkies/blinkiesCafe-cats.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 851 B

BIN
img/blinkies/blinkiesCafe-nonbinary.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
img/blinkies/blinkiesCafe-sudormrf.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 821 B

BIN
img/blinkies/deletetiktok_pink_blinkie.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 638 B

BIN
img/blinkies/dontfeedtheai.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 904 B

BIN
img/blinkies/firefox_user.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
img/blinkies/firefoxget.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
img/blinkies/htmljunkie.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
img/blinkies/ihatepopups.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
img/blinkies/poweredbydoctorpepper.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
img/blinkies/queso_cubano_masiv_.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
img/blinkies/steins.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
img/decorations/try_hovering_en.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
img/decorations/try_hovering_es.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
img/decorations/try_sliding_down_en.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
img/decorations/try_sliding_down_es.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
img/decorations/try_tapping_en.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
img/decorations/try_tapping_es.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
img/favicon/favicon-lair.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 788 B

BIN
img/icons/github.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 938 B

BIN
img/icons/instagram.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 760 B

BIN
img/icons/mail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 975 B

BIN
img/icons/osu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
img/icons/pixelfed.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
img/icons/reddit.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 698 B

BIN
img/icons/spotify.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 706 B

BIN
img/icons/steam.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 687 B

BIN
img/icons/twitter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 640 B

BIN
img/logo/logo_smth.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

Some files were not shown because too many files have changed in this diff Show More