Compare commits
4 Commits
ae6cb85625
...
04c0f7596d
| Author | SHA1 | Date | |
|---|---|---|---|
| 04c0f7596d | |||
| d6d1d60b0e | |||
| f88db6a83b | |||
| 04dca92778 |
2
chat.php
2
chat.php
@@ -1 +1 @@
|
||||
<?php header("Location: main_en.php");
|
||||
<?php header("Location: main.php");
|
||||
@@ -1,44 +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>
|
||||
<img src="../../img/logo/logo_smth.png" alt="">
|
||||
<a href="../../main.php" class="logo-text">masiv's lair</a>
|
||||
</div>
|
||||
<div class="about panel">
|
||||
<b><a href="pages/articles/about_en.html">About me</a></b>
|
||||
<b><a href="../../pages/articles/about.php"><?php echo $tr[$lang]["navbar.about"]; ?></a></b>
|
||||
</div>
|
||||
<div class="links">
|
||||
<div class="social-media github">
|
||||
<img src="img/icons/github.png" alt="">
|
||||
<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="">
|
||||
<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="">
|
||||
<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="">
|
||||
<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="">
|
||||
<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="">
|
||||
<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="">
|
||||
<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="">
|
||||
<div class="social-media mail last">
|
||||
<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>
|
||||
<b><a href="?langchange"><?php echo $tr[$lang]["navbar.langPicker"]; ?></a></b>
|
||||
</div>
|
||||
@@ -1,9 +0,0 @@
|
||||
<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>
|
||||
@@ -1,30 +1,25 @@
|
||||
<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>
|
||||
<!-- Have to replace this logic, maybe by having another way to modify behaviour of marquee -->
|
||||
<?php for ($i = 0; $i <= 1; $i++) {
|
||||
if ($i === 0) {
|
||||
?><div class="scroll_one"><?php
|
||||
} else if ($i === 1) {
|
||||
?><div class="scroll_two"><?php
|
||||
}
|
||||
?>
|
||||
<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/html junkie.gif" alt="">
|
||||
<div class="spacer"></div>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,32 +0,0 @@
|
||||
<div class="header">
|
||||
services
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="services-hint">
|
||||
<img src="img/utilities/exclamation-mark.gif">
|
||||
<p>Some may require an account! Invitation only.</p>
|
||||
</div>
|
||||
<div class="services">
|
||||
<div>
|
||||
<b>masivana</b>
|
||||
<a class="button" href="https://movies.media.ethernal.win" target="_blank">Movies</a>
|
||||
<a class="button" href="https://request.media.ethernal.win" target="_blank">Requests</a>
|
||||
<a class="button" href="https://books.media.ethernal.win" target="_blank">Books</a>
|
||||
<a class="button" href="https://tube.media.ethernal.win" target="_blank">Videos</a>
|
||||
</div>
|
||||
<div>
|
||||
<b>cloud(s)</b>
|
||||
<a class="button" href="https://photos.ethernal.win" target="_blank">Photos</a>
|
||||
<a class="button" href="https://cloud2.ethernal.win" target="_blank">Cloud</a>
|
||||
</div>
|
||||
<div>
|
||||
<b>misc.</b>
|
||||
<a class="button" href="https://convert.ethernal.win" target="_blank">Converter</a>
|
||||
<a class="button" href="https://pdf.ethernal.win" target="_blank">Pdf tools</a>
|
||||
<a class="button" href="https://dl.ethernal.win" target="_blank">Vid. downloader</a>
|
||||
<a class="button" href="https://analysis.ethernal.win" target="_blank">Chat stats</a>
|
||||
<a class="button" href="https://draw.ethernal.win" target="_blank">Whiteboard</a>
|
||||
<a class="button" href="https://gspanel.ethernal.win" target="_blank">Game panel</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,37 +0,0 @@
|
||||
<hr>
|
||||
<div class="update">
|
||||
<div class="date">4 Feb 2026</div>
|
||||
<h3 class="title">Under the hood changes</h3>
|
||||
<p class="content">After some trial and error, I set-up
|
||||
this site using a selfhosted git server, implementing and
|
||||
pushing some changes I'm working on like php code to improve
|
||||
website structure and maintenance, you can test the chat right
|
||||
now, or you can visit
|
||||
<a href="https://git.ethernal.win/masiv/website">https://git.ethernal.win/masiv/website</a> to see
|
||||
the source code.
|
||||
<img src="img/minis/pompompurin-heart.gif"> This is my first
|
||||
time using git, php, and more, don't expect best practices
|
||||
on the first try, rest assured I will keep improving :p</p>
|
||||
</div>
|
||||
<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>
|
||||
@@ -1,6 +0,0 @@
|
||||
<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>
|
||||
@@ -1,64 +0,0 @@
|
||||
<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&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="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&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="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&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="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&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="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&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="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&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="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>
|
||||
@@ -31,30 +31,28 @@ body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
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;}
|
||||
padding: calc(var(--gap) / 2);}
|
||||
|
||||
.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);
|
||||
}
|
||||
height: calc(100% - 20px);
|
||||
--max-width: var(--max-percentage-width-navar);}
|
||||
|
||||
.navbar.blank {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
opacity: 0;
|
||||
height: calc(100% - (10px * 2) - 5px);}
|
||||
|
||||
.links {
|
||||
flex-grow: 1;
|
||||
@@ -102,6 +100,10 @@ body {
|
||||
|
||||
@media only all and (max-width:700px) {
|
||||
|
||||
/* -- Display -- */
|
||||
|
||||
.navbar.bot > .about, .navbar.bot > .logo, .navbar.bot > .lang-picker { display: none; }
|
||||
|
||||
/* -- Ordering -- */
|
||||
.about { order: 1; }
|
||||
.logo { order: 2; }
|
||||
@@ -123,13 +125,19 @@ body {
|
||||
overflow: auto;
|
||||
position: relative;}
|
||||
|
||||
.navbar.bot.blank, .navbar.top.blank { height: calc(var(--mobile-topnavbar-height) - 5px); } /* Adjustment, shrink divs for main navbar to overlay*/
|
||||
|
||||
.navbar.top, .navbar.bot {
|
||||
width: calc(100% - (10px * 2));
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;}
|
||||
|
||||
.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; }
|
||||
@@ -147,8 +155,7 @@ body {
|
||||
height: var(--mobile-botnavbar-height);
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 100%;}
|
||||
align-content: center;}
|
||||
|
||||
.navbar.bot > div { flex-direction: row; }
|
||||
|
||||
@@ -162,7 +169,7 @@ body {
|
||||
/* Ordering */
|
||||
justify-content: flex-start;
|
||||
clip-path: content-box;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;}
|
||||
|
||||
.links .last { margin-right: 20%; } /* Complementing visual trick by allow extra scrolling to hide previous visual trick, 100% - 80% */
|
||||
|
||||
@@ -15,7 +15,7 @@ html {
|
||||
--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-bg: white;
|
||||
--navbar-buttons-hover: var(--input-background-hover);
|
||||
--input-border-radius: var(--border-radius);
|
||||
--link-color: var(--accent-color-dark);
|
||||
@@ -76,7 +76,6 @@ img { image-rendering: pixelated;}
|
||||
body { font-family: 'special elite', honyaji, basiic, monospace, serif, sans-serif; }
|
||||
|
||||
/* ----------------- Color -------------------- */
|
||||
.navbar { background-color: var(--navvar-background); }
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
@@ -99,12 +98,19 @@ body { font-family: 'special elite', honyaji, basiic, monospace, serif, sans-ser
|
||||
/* ------------- Navbars stiling ------------------- */
|
||||
.about, .links > div, .lang-picker {
|
||||
border: 5px groove rgb(214, 236, 255);
|
||||
background: var(--navbar-buttons-bg);}
|
||||
background-color: var(--navbar-buttons-bg);}
|
||||
|
||||
.about:hover, .links > div:hover, .lang-picker:hover {
|
||||
background-color: var(--navbar-buttons-hover);
|
||||
transition: background-color 0.1s;}
|
||||
|
||||
.navbar {
|
||||
border-style: solid;
|
||||
border-width: 20px;
|
||||
border-image: url('../../../img/ui/border-1.png') 9 10 fill round;
|
||||
margin: 10px;
|
||||
image-rendering: pixelated;}
|
||||
|
||||
/* ------------- Inputs & links ----------------- */
|
||||
button, .button {
|
||||
font-family: 'special elite';
|
||||
@@ -172,3 +178,8 @@ a:hover {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media only all and (max-width:700px) {
|
||||
.navbar.bot { margin-top: 0px; }
|
||||
.navbar.top { margin-bottom: 0px; }
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
/* RESPONSIVE DESIGN, LAPTOP SLIM */
|
||||
|
||||
@media only all and (max-width:1175px){
|
||||
@media only all and (max-width:1225px){
|
||||
/* ------------- Order ------------- */
|
||||
.blinkies.one { order: 1; }
|
||||
.articles { order: 4; }
|
||||
|
||||
@@ -13,8 +13,6 @@
|
||||
.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; }
|
||||
@@ -41,7 +39,7 @@
|
||||
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);
|
||||
height: calc(100% - (var(--mobile-botnavbar-height) + 5px) - (var(--mobile-topnavbar-height) + 5px) - var(--gap) * 2);
|
||||
width: var(--scrolls-height);
|
||||
overflow: hidden;}
|
||||
|
||||
|
||||
BIN
img/ui/border-1.png
Normal file
BIN
img/ui/border-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 285 B |
@@ -2,12 +2,14 @@
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
require_once "var_loading.inc.php";
|
||||
|
||||
ini_set('session.use_only_cookies' , 1);
|
||||
ini_set('session.use_strict_mode' , 1);
|
||||
|
||||
session_set_cookie_params([
|
||||
'lifetime' => 1800,
|
||||
'domain' => 'ethernal.win',
|
||||
'domain' => $_ENV["COOKIES_SITE"],
|
||||
'path' => '/',
|
||||
'secure' => true,
|
||||
'httponly' => true
|
||||
@@ -29,3 +31,10 @@ function session_regen() {
|
||||
session_regenerate_id();
|
||||
$_SESSION["last_regen"] = time();
|
||||
}
|
||||
|
||||
# Default language
|
||||
if (!isset($_SESSION["lang"])) {
|
||||
$_SESSION["lang"] = "es";
|
||||
}
|
||||
|
||||
$lang = $_SESSION["lang"];
|
||||
383
includes/lang.inc.php
Normal file
383
includes/lang.inc.php
Normal file
@@ -0,0 +1,383 @@
|
||||
<?php
|
||||
// This file contains every text line, and translation across languages, search using || for different pages,
|
||||
// I'm considering doing all of this with a database, but I'm not sure yet.
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
function langChange() {
|
||||
if (isset($_GET['langchange'])){
|
||||
($_SESSION["lang"] == "es") ? $_SESSION["lang"] = "en" : $_SESSION["lang"] = "es";
|
||||
$redirect_url = strtok($_SERVER["REQUEST_URI"], '?');
|
||||
header("Location: " . $redirect_url);
|
||||
}
|
||||
}
|
||||
# System for changing langauges
|
||||
|
||||
|
||||
langChange();
|
||||
/* -------------------------------------------- Main -------------------------------------------- */
|
||||
|
||||
$tr["en"]["main.chatTitle"] = "chat";
|
||||
$tr["es"]["main.chatTitle"] = "chat";
|
||||
$tr["en"]["main.servicesTitle"] = "services";
|
||||
$tr["es"]["main.servicesTitle"] = "servicios";
|
||||
$tr["en"]["main.articlesTitle"] = "articles";
|
||||
$tr["es"]["main.articlesTitle"] = "artículos";
|
||||
$tr["en"]["main.updatesTitle"] = "updates!";
|
||||
$tr["es"]["main.updatesTitle"] = "actualizaciones!";
|
||||
|
||||
|
||||
$tr["en"]["main.invitationDisclaimer"] = "Some may require an account! Invitation only.";
|
||||
$tr["es"]["main.invitationDisclaimer"] = "Algunos requieren una cuenta, sólo por invitación!";
|
||||
$tr["en"]["main.services_Masivana"] = "masivana";
|
||||
$tr["es"]["main.services_Masivana"] = "masivana";
|
||||
$tr["en"]["main.servicesMovies"] = "Movies";
|
||||
$tr["es"]["main.servicesMovies"] = "Peliculas";
|
||||
$tr["en"]["main.servicesRequests"] = "Request";
|
||||
$tr["es"]["main.servicesRequests"] = "Peticiones";
|
||||
$tr["en"]["main.servicesBooks"] = "Books";
|
||||
$tr["es"]["main.servicesBooks"] = "Libros";
|
||||
$tr["en"]["main.servicesVideos"] = "Videos";
|
||||
$tr["es"]["main.servicesVideos"] = "Videos";
|
||||
$tr["en"]["main.services_Clouds"] = "cloud(s)";
|
||||
$tr["es"]["main.services_Clouds"] = "nube(s)";
|
||||
$tr["en"]["main.servicesCloud"] = "Cloud";
|
||||
$tr["es"]["main.servicesCloud"] = "Nube";
|
||||
$tr["en"]["main.servicesPhotos"] = "Photos";
|
||||
$tr["es"]["main.servicesPhotos"] = "Fotos";
|
||||
$tr["en"]["main.services_Misc"] = "misc.";
|
||||
$tr["es"]["main.services_Misc"] = "demás";
|
||||
$tr["en"]["main.servicesFileConverter"] = "File Converter";
|
||||
$tr["es"]["main.servicesFileConverter"] = "Conversor";
|
||||
$tr["en"]["main.servicesPdfTool"] = "Pdf. Tools";
|
||||
$tr["es"]["main.servicesPdfTool"] = "Herr. pdfs";
|
||||
$tr["en"]["main.servicesVidDown"] = "Vid. Downloader";
|
||||
$tr["es"]["main.servicesVidDown"] = "Desc. Videos";
|
||||
$tr["en"]["main.servicesChatStats"] = "Chat Stats";
|
||||
$tr["es"]["main.servicesChatStats"] = "Estad. Chats";
|
||||
$tr["en"]["main.servicesWhiteboard"] = "Whiteboard";
|
||||
$tr["es"]["main.servicesWhiteboard"] = "Pizarra";
|
||||
$tr["en"]["main.servicesGamePanel"] = "Game panel";
|
||||
$tr["es"]["main.servicesGamePanel"] = "Pan. Juegos";
|
||||
|
||||
|
||||
|
||||
|
||||
$tr["en"]["main.updatesOneTitle"] = "New website!";
|
||||
$tr["es"]["main.updatesOneTitle"] = "Nuevo sitio web!";
|
||||
$tr["en"]["main.updatesOne"] = "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)";
|
||||
$tr["es"]["main.updatesOne"] = "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. ";
|
||||
$tr["en"]["main.updatesOneDate"] = "17 Jan 2026";
|
||||
$tr["es"]["main.updatesOneDate"] = "17 Ene 2026";
|
||||
|
||||
$tr["en"]["main.updatesTwoTitle"] = "Website redesign!";
|
||||
$tr["es"]["main.updatesTwoTitle"] = "Rediseño del sitio!";
|
||||
$tr["en"]["main.updatesTwo"] = "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:";
|
||||
$tr["es"]["main.updatesTwo"] = "Después de un tiempo decidí darle una nueva cara al sitio ya que el diseño anterior dejaba bastante que desear, espero que sea de su agrado!(Optimizado para todo tipo de dispositivos) Para más información ";
|
||||
$tr["en"]["main.updatesTwo.1"] = "Website Redesign";
|
||||
$tr["es"]["main.updatesTwo.1"] = "Rediseño de la página";
|
||||
$tr["en"]["main.updatesTwo.2"] = "Archived version";
|
||||
$tr["es"]["main.updatesTwo.2"] = "Versión archivada";
|
||||
$tr["en"]["main.updatesTwoDate"] = "2 Feb 2026";
|
||||
$tr["es"]["main.updatesTwoDate"] = "2 Feb 2026";
|
||||
|
||||
$tr["en"]["main.updatesThreeTitle"] = "Under the hood changes";
|
||||
$tr["es"]["main.updatesThreeTitle"] = "Cambios técnicos";
|
||||
|
||||
$tr["en"]["main.updatesThree"] = "After some trial and error, I set-up this site using a selfhosted git server, implementing and pushing some changes I'm working on like php code to improve website structure and maintenance, you can test the chat right now, or you can visit";
|
||||
$tr["es"]["main.updatesThree"] = "Estuve probando, y tras configurar lo necesario, configuré mi propio servidor git, y de allí un workflow para que se publique automaticamente, también estoy empezando a implementar php, por el momento solo estoy probando pero se puede testear en el chat, o viendo el código fuente en ";
|
||||
$tr["en"]["main.updatesThree.1"] = "https://git.ethernal.win/masiv/website";
|
||||
$tr["es"]["main.updatesThree.1"] = "https://git.ethernal.win/masiv/website";
|
||||
$tr["en"]["main.updatesThree.2"] = " to see the source code.";
|
||||
$tr["es"]["main.updatesThree.2"] = "";
|
||||
$tr["en"]["main.updatesThree.3"] = "This is my first time using git, php, and more, don't expect best practices on the first try, rest assured I will keep improving :p";
|
||||
$tr["es"]["main.updatesThree.3"] = "Es mi primera vez usando git, php, y todo, así que probablemente no esté siguiendo todas las buenas prácticas, pero iré aprendiendo :p";
|
||||
$tr["en"]["main.updatesThreeDate"] = "4 Feb 2026";
|
||||
$tr["es"]["main.updatesThreeDate"] = "4 Feb 2026";
|
||||
|
||||
$tr["en"]["main.articlesOne"] = "About this hosting";
|
||||
$tr["es"]["main.articlesOne"] = "Acerca del host";
|
||||
$tr["en"]["main.articlesTwo"] = "DIY Calculator";
|
||||
$tr["es"]["main.articlesTwo"] = "Calculadora DIY";
|
||||
$tr["en"]["main.articlesThree"] = "Website redesign";
|
||||
$tr["es"]["main.articlesThree"] = "Rediseño de la página";
|
||||
$tr["en"]["main.articlesFour"] = "CSS Shenaningans";
|
||||
$tr["es"]["main.articlesFour"] = "Cositas del CSS";
|
||||
|
||||
|
||||
|
||||
$tr["en"]["main.chatLoginText"] = "Login";
|
||||
$tr["es"]["main.chatLoginText"] = "Ingreso";
|
||||
$tr["en"]["main.chatRegisterText"] = "Register";
|
||||
$tr["es"]["main.chatRegisterText"] = "Registro";
|
||||
|
||||
$tr["en"]["main.chatUserPlaceholder"] = "User";
|
||||
$tr["es"]["main.chatUserPlaceholder"] = "Usuarix";
|
||||
$tr["en"]["main.chatPasswordPlaceholder"] = "Password";
|
||||
$tr["es"]["main.chatPasswordPlaceholder"] = "Contraseña";
|
||||
$tr["en"]["main.chatSendPlaceholder"] = "Press enter to send!";
|
||||
$tr["es"]["main.chatSendPlaceholder"] = "Enter para enviar!";
|
||||
|
||||
|
||||
$tr["en"]["main.about"] = "About me";
|
||||
$tr["es"]["main.about"] = "Sobre mí";
|
||||
$tr["en"]["main.lang"] = "Español";
|
||||
$tr["es"]["main.lang"] = "English";
|
||||
|
||||
|
||||
$tr["en"]["main.verticalScroll"] = "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... ";
|
||||
$tr["es"]["main.verticalScroll"] = "hola terrícolas, esta transmisión es para todxs aquellxs que se preguntan si acaso existe la vida extraterrestre, o en caso contrario ustedes humanos están solxs. Supongo nunca lo sabrán... ";
|
||||
|
||||
|
||||
$tr["en"]["main.altWebring"] = "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";
|
||||
$tr["es"]["main.altWebring"] = "la ciima de una difusa bola negra con dos flechas saliendo de la missma, una hacia la derecha y la otra hacia la izquierda. Se puede leer en el cuerpo de la esfera NO AI / WEBRING con letras medio temblorosas, y al lado un signo de interrogación";
|
||||
|
||||
$tr["en"]["main.try_hoveringPath"] = "img/decorations/try_hovering_en.png";
|
||||
$tr["es"]["main.try_hoveringPath"] = "img/decorations/try_hovering_es.png";
|
||||
$tr["en"]["main.try_hoveringAlt"] = "try hovering!";
|
||||
$tr["es"]["main.try_hoveringAlt"] = "apoya el cursor!";
|
||||
|
||||
$tr["en"]["main.try_tappingPath"] = "img/decorations/try_tapping_en.png";
|
||||
$tr["es"]["main.try_tappingPath"] = "img/decorations/try_tapping_es.png";
|
||||
$tr["en"]["main.try_tappingAlt"] = "try tapping!";
|
||||
$tr["es"]["main.try_tappingAlt"] = "mantén presionado!";
|
||||
|
||||
$tr["en"]["main.try_SlidingPath"] = "img/decorations/try_sliding_down_en.png";
|
||||
$tr["es"]["main.try_SlidingPath"] = "img/decorations/try_sliding_down_es.png";
|
||||
|
||||
$tr["en"]["main.try_SlidingAlt"] = "try sliding down!";
|
||||
$tr["es"]["main.try_SlidingAlt"] = "prueba seguir deslizando!";
|
||||
|
||||
|
||||
/* -------------------------------------------- Navbar -------------------------------------------- */
|
||||
|
||||
$tr["en"]["navbar.about"] = "About me!";
|
||||
$tr["es"]["navbar.about"] = "Sobre mí!";
|
||||
$tr["en"]["navbar.langPicker"] = "Español";
|
||||
$tr["es"]["navbar.langPicker"] = "English";
|
||||
|
||||
/* -------------------------------------------- About -------------------------------------------- */
|
||||
|
||||
$tr["en"]["about.construction"] = "Still under construction, come back later!";
|
||||
$tr["es"]["about.construction"] = "Todavía en construcción, vuelve más tarde!";
|
||||
|
||||
/* -------------------------------------------- Calc -------------------------------------------- */
|
||||
|
||||
$tr["en"]["calc.title"] = "Calculator";
|
||||
$tr["es"]["calc.title"] = "Calculadora";
|
||||
|
||||
$tr["en"]["calc.h1"] = "About this project";
|
||||
$tr["es"]["calc.h1"] = "Sobre este projecto";
|
||||
|
||||
$tr["en"]["calc.p1"] = "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.";
|
||||
$tr["es"]["calc.p1"] = "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).";
|
||||
|
||||
$tr["en"]["calc.p2"] = "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.";
|
||||
$tr["es"]["calc.p2"] = "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.";
|
||||
|
||||
$tr["en"]["calc.p3"] = "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.";
|
||||
$tr["es"]["calc.p3"] = "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.";
|
||||
|
||||
$tr["en"]["calc.p4"] = "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:";
|
||||
$tr["es"]["calc.p4"] = "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:";
|
||||
|
||||
$tr["en"]["calc.p4l1"] = "Concatenate the digits, from [1,1,'+',2,3] to [11,'+',23].";
|
||||
$tr["es"]["calc.p4l1"] = "Unir los números, de [1,1,'+',2,3] a [11,'+',23]";
|
||||
|
||||
$tr["en"]["calc.p4l2"] = "Search for term separators, and create multidimensional arrays with
|
||||
each level representing one type of operation.";
|
||||
$tr["es"]["calc.p4l2"] = "Buscar dónde están los separa términos, e ir creando arrays
|
||||
multidimensionales, cada nivel tiene un tipo de operación (on orden).";
|
||||
|
||||
$tr["en"]["calc.p4l3"] = "Undo all this array but backwards, processing the output as it goes.";
|
||||
$tr["es"]["calc.p4l3"] = "Deshacer ese array multidimensional, e ir procesando
|
||||
todas las operaciones.";
|
||||
|
||||
$tr["en"]["calc.p5"] = "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).";
|
||||
$tr["es"]["calc.p5"] = "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).";
|
||||
|
||||
$tr["en"]["calc.p6"] = "Update 23/01/2026 ";
|
||||
$tr["es"]["calc.p6"] = "Actualización 23/01/2026 ";
|
||||
|
||||
$tr["en"]["calc.p7"] = "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.";
|
||||
$tr["es"]["calc.p7"] = "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.";
|
||||
|
||||
/* -------------------------------------------- About host -------------------------------------------- */
|
||||
|
||||
$tr["en"]["about-host.title"] = "About this hosting";
|
||||
$tr["es"]["about-host.title"] = "Acerca de este hosting";
|
||||
|
||||
$tr["en"]["about-host.content"] = "
|
||||
<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>
|
||||
<ul>x1 1TB SSD NVME Samsung 970 Plus</ul>
|
||||
<ul>x2 3TB HDD WD Green (RAID 1)</ul>
|
||||
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>";
|
||||
$tr["es"]["about-host.content"] = "
|
||||
<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>
|
||||
<ul>x1 1TB SSD NVME Samsung 970 Plus</ul>
|
||||
<ul>x2 3TB HDD WD Green (RAID 1)</ul>
|
||||
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>";
|
||||
193
main.php
Normal file
193
main.php
Normal file
@@ -0,0 +1,193 @@
|
||||
<?php
|
||||
require_once "includes/config_session.inc.php";
|
||||
require_once "includes/lang.inc.php";
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="<?php echo $lang?>">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
||||
<title>masiv's lair</title>
|
||||
<link rel="stylesheet" href="css/main/main.css">
|
||||
<link rel="icon" href="img/favicon/favicon-lair.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar top blank"></div>
|
||||
<div class="navbar top">
|
||||
<?php include "components/global/navbar.php"?>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="primary">
|
||||
<div class="blinkies one panel">
|
||||
<img id="try_hovering--blinkie" src="<?php echo $tr[$lang]["main.try_hoveringPath"]; ?>" alt="<?php echo $tr[$lang]["main.try_hoveringAlt"]; ?>">
|
||||
<img id="try_tapping--blinkie" src="<?php echo $tr[$lang]["main.try_tappingPath"]; ?>" alt="<?php echo $tr[$lang]["main.try_tappingAlt"]; ?>">
|
||||
<?php include "components/main/blinkies.php"?>
|
||||
</div>
|
||||
<div class="articles panel">
|
||||
<div class="header">
|
||||
<?php echo $tr[$lang]["main.articlesTitle"]; ?>
|
||||
</div>
|
||||
<div class="content">
|
||||
<a href="pages/articles/about-host.php"><?php echo $tr[$lang]["main.articlesOne"]; ?></a>
|
||||
<a href="pages/articles/diy-calculator.php"><?php echo $tr[$lang]["main.articlesTwo"]; ?></a>
|
||||
<a ><?php echo $tr[$lang]["main.articlesThree"]; ?></a> <!-- href="pages/articles/website-redesign.php" -->
|
||||
<a ><?php echo $tr[$lang]["main.articlesFour"]; ?></a> <!-- href="pages/articles/css-shenanigans.php" -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="provided panel">
|
||||
<div class="header">
|
||||
<?php echo $tr[$lang]["main.servicesTitle"]; ?>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="services-hint">
|
||||
<img src="img/utilities/exclamation-mark.gif">
|
||||
<p><?php echo $tr[$lang]["main.invitationDisclaimer"]; ?></p>
|
||||
</div>
|
||||
<div class="services">
|
||||
<div>
|
||||
<b><?php echo $tr[$lang]["main.services_Masivana"]; ?></b>
|
||||
<a class="button" href="https://movies.media.ethernal.win" target="_blank"><?php echo $tr[$lang]["main.servicesMovies"]; ?></a>
|
||||
<a class="button" href="https://request.media.ethernal.win" target="_blank"><?php echo $tr[$lang]["main.servicesRequests"]; ?></a>
|
||||
<a class="button" href="https://books.media.ethernal.win" target="_blank"><?php echo $tr[$lang]["main.servicesBooks"]; ?></a>
|
||||
<a class="button" href="https://tube.media.ethernal.win" target="_blank"><?php echo $tr[$lang]["main.servicesVideos"]; ?></a>
|
||||
</div>
|
||||
<div>
|
||||
<b><?php echo $tr[$lang]["main.services_Clouds"]; ?></b>
|
||||
<a class="button" href="https://photos.ethernal.win" target="_blank"><?php echo $tr[$lang]["main.servicesPhotos"]; ?></a>
|
||||
<a class="button" href="https://cloud2.ethernal.win" target="_blank"><?php echo $tr[$lang]["main.servicesCloud"]; ?></a>
|
||||
</div>
|
||||
<div>
|
||||
<b><?php echo $tr[$lang]["main.services_Misc"]; ?></b>
|
||||
<a class="button" href="https://convert.ethernal.win" target="_blank"><?php echo $tr[$lang]["main.servicesFileConverter"]; ?></a>
|
||||
<a class="button" href="https://pdf.ethernal.win" target="_blank"><?php echo $tr[$lang]["main.servicesPdfTool"]; ?></a>
|
||||
<a class="button" href="https://dl.ethernal.win" target="_blank"><?php echo $tr[$lang]["main.servicesVidDown"]; ?></a>
|
||||
<a class="button" href="https://analysis.ethernal.win" target="_blank"><?php echo $tr[$lang]["main.servicesChatStats"]; ?></a>
|
||||
<a class="button" href="https://draw.ethernal.win" target="_blank"><?php echo $tr[$lang]["main.servicesWhiteboard"]; ?></a>
|
||||
<a class="button" href="https://gspanel.ethernal.win" target="_blank"><?php echo $tr[$lang]["main.servicesGamePanel"]; ?></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="updates panel">
|
||||
<div class="header">
|
||||
<?php echo $tr[$lang]["main.updatesTitle"]; ?> <img src="img/minis/totoro-smile.gif">
|
||||
</div>
|
||||
<div class="content">
|
||||
<hr>
|
||||
<div class="update">
|
||||
<div class="date"><?php echo $tr[$lang]["main.updatesThreeDate"]; ?></div>
|
||||
<h3 class="title"><?php echo $tr[$lang]["main.updatesThreeTitle"]; ?></h3>
|
||||
<p class="content"><?php echo $tr[$lang]["main.updatesThree"]; ?>
|
||||
<a href="https://git.ethernal.win/masiv/website"><?php echo $tr[$lang]["main.updatesThree.1"]; ?></a>
|
||||
<?php echo $tr[$lang]["main.updatesThree.2"]; ?>
|
||||
<img src="img/minis/pompompurin-heart.gif"> <?php echo $tr[$lang]["main.updatesThree.3"]; ?></p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="update">
|
||||
<div class="date"><?php echo $tr[$lang]["main.updatesTwoDate"]; ?></div>
|
||||
<h3 class="title"><?php echo $tr[$lang]["main.updatesTwoTitle"]; ?></h3>
|
||||
<p class="content"><?php echo $tr[$lang]["main.updatesTwo"]; ?>
|
||||
<a href="pages/articles/en_website-redesign.html">
|
||||
<?php echo $tr[$lang]["main.updatesTwo.1"]; ?>
|
||||
</a> <img src="img/minis/cat-star.gif">
|
||||
<a href="archive/ver_1-until2feb2026/en_home.html"><?php echo $tr[$lang]["main.updatesTwo.2"]; ?></a>
|
||||
</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="update">
|
||||
<div class="date"><?php echo $tr[$lang]["main.updatesOneDate"]; ?></div>
|
||||
<h3 class="title"<?php echo $tr[$lang]["main.updatesOneTitle"]; ?>></h3>
|
||||
<p class="content"><?php echo $tr[$lang]["main.updatesOne"]; ?></p>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-webrings">
|
||||
<div class="chat panel">
|
||||
<div class="header">
|
||||
<?php echo $tr[$lang]["main.chatTitle"]; ?>
|
||||
</div>
|
||||
<div class="content">
|
||||
<?php if (!isset($_SESSION["username"])){ ?>
|
||||
<form class="chat-account" action="" method="post">
|
||||
<div class="chat-account-inputs">
|
||||
<input required type="text" id="username" name="username" placeholder="<?php echo $tr[$lang]["main.chatUserPlaceholder"]; ?>">
|
||||
<input required type="password" id="password" name="pwd" placeholder="<?php echo $tr[$lang]["main.chatPasswordPlaceholder"]; ?>">
|
||||
</div>
|
||||
<div class="chat-account-buttons">
|
||||
<button formaction="includes/login.inc.php" method="POST"><?php echo $tr[$lang]["main.chatLoginText"]; ?></button>
|
||||
<button formaction="includes/register.inc.php" method="POST"><?php echo $tr[$lang]["main.chatRegisterText"]; ?></button>
|
||||
</div>
|
||||
<div class="chat-account-errors">
|
||||
<?php include "includes/error_handling.inc.php"?>
|
||||
</div>
|
||||
</form>
|
||||
<?php } ?>
|
||||
<div class="chat-history">
|
||||
<?php include "includes/chat_reading.inc.php";?>
|
||||
</div>
|
||||
<?php if (isset($_SESSION["username"])){ ?>
|
||||
<form action="includes/chat_send.inc.php" method="POST">
|
||||
<input type="text" id="message_content" name="message_content" placeholder="<?php echo $tr[$lang]["main.chatSendPlaceholder"]; ?>">
|
||||
<form class="chat-input" action="" method="post">
|
||||
<?php } ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="webrings panel">
|
||||
<div class="clip-box">
|
||||
<div class="auto-scroll">
|
||||
<!-- Have to replace this logic, maybe by having another way to modify behaviour of marquee -->
|
||||
<?php for ($i = 0; $i <= 1; $i++) {
|
||||
if ($i === 0) {
|
||||
?><div class="scroll_one"><?php
|
||||
} else if ($i === 1) {
|
||||
?><div class="scroll_two"><?php
|
||||
}
|
||||
?>
|
||||
<?php for ($j = 0; $j <= 2; $j++) {?>
|
||||
<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="img/webrings/miniwidget5.gif" alt="<?php echo $tr[$lang]["main.altWebring"]; ?>">
|
||||
</div>
|
||||
<?php } ?>
|
||||
<div class="spacer"></div>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blinkies two panel">
|
||||
<?php include "components/main/blinkies.php"?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="verticalscroll panel blank"></div>
|
||||
<div class="verticalscroll panel">
|
||||
<div class="vertical-scroll-wrapper">
|
||||
<div class="clip-box">
|
||||
<div class="auto-scroll">
|
||||
<div class="scroll_one"><p><?php echo $tr[$lang]["main.verticalScroll"]; ?></p></div>
|
||||
<div class="scroll_two"><p><?php echo $tr[$lang]["main.chatPasswordPlaceholder"]; ?></p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll_below-clip-box">
|
||||
<div class="scroll_below">
|
||||
<img id="try_sliding_down" src="<?php echo $tr[$lang]["main.try_SlidingPath"]; ?>" alt="<?php echo $tr[$lang]["main.try_SlidingAlt"]; ?>">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar bot blank"></div>
|
||||
<div class="navbar bot">
|
||||
<?php include "components/global/navbar.php"?>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
10
main_en.html
10
main_en.html
@@ -1,10 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
||||
<title>masiv's lair</title>
|
||||
<link rel="icon" href="img/favicon/favicon-lair.png">
|
||||
<meta http-equiv="refresh" content="0; url=main_en.php">
|
||||
</head>
|
||||
</html>
|
||||
128
main_en.php
128
main_en.php
@@ -1,128 +0,0 @@
|
||||
<?php require_once "includes/config_session.inc.php"?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
||||
<title>masiv's lair</title>
|
||||
<link rel="stylesheet" href="css/main/main.css">
|
||||
<link rel="icon" href="img/favicon/favicon-lair.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar top blank"></div>
|
||||
<div class="navbar top">
|
||||
<?php include "components/main/navbar.php"?>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="primary">
|
||||
<div class="blinkies one panel">
|
||||
<img id="try_hovering--blinkie" src="img/decorations/try_hovering_en.png" alt="try hovering!">
|
||||
<img id="try_tapping--blinkie" src="img/decorations/try_tapping_en.png" alt="try tapping!">
|
||||
<?php include "components/main/blinkies.php"?>
|
||||
</div>
|
||||
<div class="articles panel">
|
||||
<?php include "components/main/articles.php"?>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="provided panel">
|
||||
<div class="header">
|
||||
services
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="services-hint">
|
||||
<img src="img/utilities/exclamation-mark.gif">
|
||||
<p>Some may require an account! Invitation only.</p>
|
||||
</div>
|
||||
<div class="services">
|
||||
<div>
|
||||
<b>masivana</b>
|
||||
<a class="button" href="https://movies.media.ethernal.win" target="_blank">Movies</a>
|
||||
<a class="button" href="https://request.media.ethernal.win" target="_blank">Requests</a>
|
||||
<a class="button" href="https://books.media.ethernal.win" target="_blank">Books</a>
|
||||
<a class="button" href="https://tube.media.ethernal.win" target="_blank">Videos</a>
|
||||
</div>
|
||||
<div>
|
||||
<b>cloud(s)</b>
|
||||
<a class="button" href="https://photos.ethernal.win" target="_blank">Photos</a>
|
||||
<a class="button" href="https://cloud2.ethernal.win" target="_blank">Cloud</a>
|
||||
</div>
|
||||
<div>
|
||||
<b>misc.</b>
|
||||
<a class="button" href="https://convert.ethernal.win" target="_blank">Converter</a>
|
||||
<a class="button" href="https://pdf.ethernal.win" target="_blank">Pdf tools</a>
|
||||
<a class="button" href="https://dl.ethernal.win" target="_blank">Vid. downloader</a>
|
||||
<a class="button" href="https://analysis.ethernal.win" target="_blank">Chat stats</a>
|
||||
<a class="button" href="https://draw.ethernal.win" target="_blank">Whiteboard</a>
|
||||
<a class="button" href="https://gspanel.ethernal.win" target="_blank">Game panel</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="updates panel">
|
||||
<div class="header">
|
||||
updates! <img src="img/minis/totoro-smile.gif">
|
||||
</div>
|
||||
<div class="content">
|
||||
<?php include "components/main/updates.php"?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-webrings">
|
||||
<div class="chat panel">
|
||||
<div class="header">
|
||||
chat
|
||||
</div>
|
||||
<div class="content">
|
||||
<?php if (!isset($_SESSION["username"])){ ?>
|
||||
<form class="chat-account" action="" method="post">
|
||||
<div class="chat-account-inputs">
|
||||
<input type="text" id="username" name="username" placeholder="User">
|
||||
<input type="password" id="password" name="pwd" placeholder="Password">
|
||||
</div>
|
||||
<div class="chat-account-buttons">
|
||||
<button formaction="includes/register.inc.php" method="POST">Register</button>
|
||||
<button formaction="includes/login.inc.php" method="POST">Login</button>
|
||||
</div>
|
||||
<div class="chat-account-errors">
|
||||
<?php include "includes/error_handling.inc.php"?>
|
||||
</div>
|
||||
</form>
|
||||
<?php } ?>
|
||||
<div class="chat-history">
|
||||
<?php include "includes/chat_reading.inc.php"; ?>
|
||||
</div>
|
||||
<?php if (isset($_SESSION["username"])){ ?>
|
||||
<form action="includes/chat_send.inc.php" method="POST">
|
||||
<input type="text" id="message_content" name="message_content" placeholder="Press enter to send!">
|
||||
<form class="chat-input" action="" method="post">
|
||||
<?php } ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="webrings panel">
|
||||
<?php include "components/main/webrings.php"?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blinkies two panel">
|
||||
<?php include "components/main/blinkies.php"?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="verticalscroll panel blank"></div>
|
||||
<div class="verticalscroll panel">
|
||||
<div class="vertical-scroll-wrapper">
|
||||
<?php include "components/main/verticalscroll.php"?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll_below-clip-box">
|
||||
<div class="scroll_below">
|
||||
<img id="try_sliding_down" src="img/decorations/try_sliding_down_en.png" alt="try sliding down!">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar bot blank"></div>
|
||||
<div class="navbar bot">
|
||||
<?php include "components/main/navbar.php"?>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
10
main_es.html
10
main_es.html
@@ -1,10 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
||||
<title>masiv's lair</title>
|
||||
<link rel="icon" href="img/favicon/favicon-lair.png">
|
||||
<meta http-equiv="refresh" content="0; url=main_es.php">
|
||||
</head>
|
||||
</html>
|
||||
380
main_es.php
380
main_es.php
@@ -1,380 +0,0 @@
|
||||
<?php require_once "includes/config_session.inc.php"?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
||||
<title>masiv's lair</title>
|
||||
<link rel="stylesheet" href="css/main/main.css">
|
||||
<link rel="icon" href="img/favicon/favicon-lair.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar top blank"></div>
|
||||
<div class="navbar top">
|
||||
<div class="logo">
|
||||
<img src="img/logo/logo_smth.png" alt="">
|
||||
<a href="main_es.html" class="logo-text">masiv's lair</a>
|
||||
</div>
|
||||
<div class="about panel">
|
||||
<b><a href="pages/articles/about_es.html">Sobre mí</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_en.php">English</a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="primary">
|
||||
<div class="blinkies one panel">
|
||||
<img id="try_hovering--blinkie" src="img/decorations/try_hovering_es.png" alt="apoya el cursor!">
|
||||
<img id="try_tapping--blinkie" src="img/decorations/try_tapping_es.png" alt="mantén presionado!">
|
||||
<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>
|
||||
</div>
|
||||
<div class="articles panel">
|
||||
<div class="header">
|
||||
artículos
|
||||
</div>
|
||||
<div class="content">
|
||||
<a href="pages/articles/about-host_es.html">Acerca del host</a>
|
||||
<a href="pages/articles/diy-calculator_es.html">Calculadora DIY</a>
|
||||
<a >Rediseño de la página</a> <!-- href="pages/articles/website-redesign_es.html" -->
|
||||
<a >Cositas del CSS</a> <!-- href="pages/articles/css-shenanigans_es.html" -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="provided panel">
|
||||
<div class="hint">
|
||||
</div>
|
||||
<div class="header">
|
||||
servicios
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="services-hint">
|
||||
<img src="img/utilities/exclamation-mark.gif">
|
||||
<p>Algunos requieren una cuenta, sólo por invitación!</p>
|
||||
</div>
|
||||
<div class="services">
|
||||
<div>
|
||||
<b>masivana</b>
|
||||
<a class="button" href="https://movies.media.ethernal.win" target="_blank">Peliculas</a>
|
||||
<a class="button" href="https://request.media.ethernal.win" target="_blank">Peticiones</a>
|
||||
<a class="button" href="https://books.media.ethernal.win" target="_blank">Libros</a>
|
||||
<a class="button" href="https://tube.media.ethernal.win" target="_blank">Videos</a>
|
||||
</div>
|
||||
<div>
|
||||
<b>nube(s)</b>
|
||||
<a class="button" href="https://photos.ethernal.win" target="_blank">Fotos</a>
|
||||
<a class="button" href="https://cloud2.ethernal.win" target="_blank">Nube</a>
|
||||
</div>
|
||||
<div>
|
||||
<b>misc.</b>
|
||||
<a class="button" href="https://convert.ethernal.win" target="_blank">Conversor</a>
|
||||
<a class="button" href="https://pdf.ethernal.win" target="_blank">Herr. pdfs</a>
|
||||
<a class="button" href="https://dl.ethernal.win" target="_blank">Desc. videos</a>
|
||||
<a class="button" href="https://analysis.ethernal.win" target="_blank">Estad. Chats</a>
|
||||
<a class="button" href="https://draw.ethernal.win" target="_blank">Pizarra</a>
|
||||
<a class="button" href="https://gspanel.ethernal.win" target="_blank">Pan. Juegos</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="updates panel">
|
||||
<div class="header">
|
||||
actualizaciones! <img src="img/minis/totoro-smile.gif">
|
||||
</div>
|
||||
<div class="content">
|
||||
<hr>
|
||||
<div class="update">
|
||||
<div class="date">4 Feb 2026</div>
|
||||
<h3 class="title">Cambios técnicos</h3>
|
||||
<p class="content">Estuve probando, y tras configurar
|
||||
lo necesario, configuré mi propio servidor git, y de
|
||||
allí un workflow para que se publique automaticamente,
|
||||
también estoy empezando a implementar php, por el momento
|
||||
solo estoy probando pero se puede testear en el chat, o
|
||||
viendo el código fuente en
|
||||
<a href="https://git.ethernal.win/masiv/website">https://git.ethernal.win/masiv/website</a>.
|
||||
<img src="img/minis/pompompurin-heart.gif"> Es mi primera
|
||||
vez usando git, php, y todo, así que probablemente no esté
|
||||
siguiendo todas las buenas prácticas, pero iré aprendiendo :p
|
||||
</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="update">
|
||||
<div class="date">2 Feb 2026</div>
|
||||
<h3 class="title">Rediseño del sitio!</h3>
|
||||
<p class="content">Después de un tiempo decidí darle una
|
||||
nueva cara al sitio ya que el diseño anterior dejaba
|
||||
bastante que desear, espero que sea de su agrado!
|
||||
(Optimizado para todo tipo de dispositivos) Para más
|
||||
información <a href="pages/articles/website-redesign_es.html">
|
||||
Rediseño de la página</a> <img src="img/minis/cat-star.gif">
|
||||
<a href="archive/ver_1-until2feb2026/es_home.html">Archived version</a>
|
||||
</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="update">
|
||||
<div class="date">17 Ene 2026</div>
|
||||
<h3 class="title">Nuevo sitio web!</h3>
|
||||
<p class="content">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>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-webrings">
|
||||
<div class="chat panel">
|
||||
<div class="header">
|
||||
chat
|
||||
</div>
|
||||
<div class="content">
|
||||
<?php if (!isset($_SESSION["username"])){ ?>
|
||||
<form class="chat-account" action="" method="post">
|
||||
<div class="chat-account-inputs">
|
||||
<input type="text" id="username" name="username" placeholder="Usuarix">
|
||||
<input type="password" id="password" name="pwd" placeholder="Contraseña">
|
||||
</div>
|
||||
<div class="chat-account-buttons">
|
||||
<button formaction="includes/register.inc.php" method="POST">Registrar</button>
|
||||
<button formaction="includes/login.inc.php" method="POST">Ingresar</button>
|
||||
</div>
|
||||
<div class="chat-account-errors">
|
||||
<?php include "includes/error_handling.inc.php"?>
|
||||
</div>
|
||||
</form>
|
||||
<?php } ?>
|
||||
<div class="chat-history">
|
||||
<?php include "includes/chat_reading.inc.php"; ?>
|
||||
</div>
|
||||
<?php if (isset($_SESSION["username"])){ ?>
|
||||
<form action="includes/chat_send.inc.php" method="POST">
|
||||
<input type="text" id="message_content" name="message_content" placeholder="Enter para enviar!">
|
||||
<form class="chat-input" action="" method="post">
|
||||
<?php } ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="webrings panel">
|
||||
<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&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="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&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="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&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="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&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="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&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="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&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="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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blinkies two panel">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="verticalscroll panel blank"></div>
|
||||
<div class="verticalscroll panel">
|
||||
<div class="vertical-scroll-wrapper">
|
||||
<div class="clip-box">
|
||||
<div class="auto-scroll">
|
||||
<div class="scroll_one"><p>hola terrícolas, este es un mensaje para todxs aquellxs que pasan el día preguntándose si existe la vida extra-terrestre, o si por el contrario ustedes están solxs. Supongo que nunca lo sabrán... </p></div>
|
||||
<div class="scroll_two"><p>hola terrícolas, este es un mensaje para todxs aquellxs que pasan el día preguntándose si existe la vida extra-terrestre, o si por el contrario ustedes están solxs. Supongo que nunca lo sabrán... </p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll_below-clip-box">
|
||||
<div class="scroll_below">
|
||||
<img id="try_sliding_down" src="img/decorations/try_sliding_down_es.png" alt="try sliding down!">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar bot blank"></div>
|
||||
<div class="navbar bot">
|
||||
<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 last">
|
||||
<img src="img/icons/mail.png" alt="">
|
||||
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
33
pages/articles/about-host.php
Normal file
33
pages/articles/about-host.php
Normal file
@@ -0,0 +1,33 @@
|
||||
<?php
|
||||
require_once "../../includes/config_session.inc.php";
|
||||
require_once "../../includes/lang.inc.php";
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
||||
<title>masiv's lair | <?php echo $tr[$lang]["about-host.title"]; ?></title>
|
||||
<link rel="stylesheet" href="../../css/articles/about-host/about-host.css">
|
||||
<link rel="icon" href="../../img/favicon/favicon-lair.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar top blank"></div>
|
||||
<div class="navbar top">
|
||||
<?php include "../../components/global/navbar.php"?>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="primary">
|
||||
<div class="panel">
|
||||
<?php echo $tr[$lang]["about-host.content"]; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar bot blank"></div>
|
||||
<div class="navbar bot">
|
||||
<?php include "../../components/global/navbar.php"?>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,168 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
||||
<title>masiv's lair | About this hosting</title>
|
||||
<link rel="stylesheet" href="../../css/articles/about-host/about-host.css">
|
||||
<link rel="icon" href="../../img/favicon/favicon-lair.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar top blank"></div>
|
||||
<div class="navbar top">
|
||||
<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="../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="../articles/about-host_es.html">Español</a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="primary">
|
||||
<div class="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>
|
||||
</div>
|
||||
<div class="navbar bot blank"></div>
|
||||
<div class="navbar bot">
|
||||
<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 last">
|
||||
<img src="../../img/icons/mail.png" alt="">
|
||||
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,172 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
||||
<title>masiv's lair | About this hosting</title>
|
||||
<link rel="stylesheet" href="../../css/articles/about-host/about-host.css">
|
||||
<link rel="icon" href="../../img/favicon/favicon-lair.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar top blank"></div>
|
||||
<div class="navbar top">
|
||||
<div class="logo">
|
||||
<img src="../../img/logo/logo_smth.png" alt="">
|
||||
<a href="../../main_es.html" class="logo-text">masiv's lair</a>
|
||||
</div>
|
||||
<div class="about panel">
|
||||
<b><a href="../articles/about_es.html">Sobre mí</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="../articles/about-host_en.html">English</a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="primary">
|
||||
<div class="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>
|
||||
</div>
|
||||
<div class="navbar bot blank"></div>
|
||||
<div class="navbar bot">
|
||||
<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 last">
|
||||
<img src="../../img/icons/mail.png" alt="">
|
||||
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
33
pages/articles/about.php
Normal file
33
pages/articles/about.php
Normal file
@@ -0,0 +1,33 @@
|
||||
<?php
|
||||
require_once "../../includes/config_session.inc.php";
|
||||
require_once "../../includes/lang.inc.php";
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
||||
<title>masiv's lair | About me</title>
|
||||
<link rel="stylesheet" href="../../css/articles/about/about.css">
|
||||
<link rel="icon" href="../../img/favicon/favicon-lair.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar top blank"></div>
|
||||
<div class="navbar top">
|
||||
<?php include "../../components/global/navbar.php"?>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="primary">
|
||||
<div class="panel">
|
||||
<?php echo $tr[$lang]["about.construction"]; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar bot blank"></div>
|
||||
<div class="navbar bot">
|
||||
<?php include "../../components/global/navbar.php"?>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,104 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
||||
<title>masiv's lair | About me</title>
|
||||
<link rel="stylesheet" href="../../css/articles/about/about.css">
|
||||
<link rel="icon" href="../../img/favicon/favicon-lair.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar top blank"></div>
|
||||
<div class="navbar top">
|
||||
<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="../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="../articles/about_es.html">Español</a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="primary">
|
||||
<div class="panel">
|
||||
Still under construction.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar bot blank"></div>
|
||||
<div class="navbar bot">
|
||||
<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 last">
|
||||
<img src="../../img/icons/mail.png" alt="">
|
||||
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,104 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
||||
<title>masiv's lair | Sobre mí</title>
|
||||
<link rel="stylesheet" href="../../css/articles/about/about.css">
|
||||
<link rel="icon" href="../../img/favicon/favicon-lair.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar top blank"></div>
|
||||
<div class="navbar top">
|
||||
<div class="logo">
|
||||
<img src="../../img/logo/logo_smth.png" alt="">
|
||||
<a href="../../main_es.html" class="logo-text">masiv's lair</a>
|
||||
</div>
|
||||
<div class="about panel">
|
||||
<b><a href="../articles/about_es.html">Sobre mí</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="../articles/about_en.html">English</a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="primary">
|
||||
<div class="panel">
|
||||
Todavía en progreso.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar bot blank"></div>
|
||||
<div class="navbar bot">
|
||||
<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 last">
|
||||
<img src="../../img/icons/mail.png" alt="">
|
||||
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
33
pages/articles/article-blank.php
Normal file
33
pages/articles/article-blank.php
Normal file
@@ -0,0 +1,33 @@
|
||||
<?php
|
||||
require_once "includes/config_session.inc.php";
|
||||
require_once "includes/lang.inc.php";
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
||||
<title>masiv's lair | [REPLACE]</title>
|
||||
<link rel="stylesheet" href="../../css/articles/[REPLACE]/[REPLACE].css">
|
||||
<link rel="icon" href="../../img/favicon/favicon-lair.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar top blank"></div>
|
||||
<div class="navbar top">
|
||||
<?php include "../../components/global/navbar.php"?>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="primary">
|
||||
<div class="panel">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar bot blank"></div>
|
||||
<div class="navbar bot">
|
||||
<?php include "../../components/global/navbar.php"?>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,169 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
||||
<title>masiv's lair | [REPLACE]</title>
|
||||
<link rel="stylesheet" href="../../css/articles/[REPLACE]/[REPLACE].css">
|
||||
<link rel="icon" href="../../img/favicon/favicon-lair.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar top blank"></div>
|
||||
<div class="navbar top">
|
||||
<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="../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="../articles/article-blank_es.html">Español</a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="primary">
|
||||
<div class="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>
|
||||
</div>
|
||||
<div class="navbar bot blank"></div>
|
||||
<div class="navbar bot">
|
||||
<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 last">
|
||||
<img src="../../img/icons/mail.png" alt="">
|
||||
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,104 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
||||
<title>masiv's lair | [REPLACE]</title>
|
||||
<link rel="stylesheet" href="../../css/articles/[REPLACE]/[REPLACE].css">
|
||||
<link rel="icon" href="../../img/favicon/favicon-lair.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar top blank"></div>
|
||||
<div class="navbar top">
|
||||
<div class="logo">
|
||||
<img src="../../img/logo/logo_smth.png" alt="">
|
||||
<a href="../../main_es.html" class="logo-text">masiv's lair</a>
|
||||
</div>
|
||||
<div class="about panel">
|
||||
<b><a href="../articles/about_es.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="../articles/article-blank_en.html">English</a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="primary">
|
||||
<div class="panel">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar bot blank"></div>
|
||||
<div class="navbar bot">
|
||||
<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 last">
|
||||
<img src="../../img/icons/mail.png" alt="">
|
||||
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
82
pages/articles/diy-calculator.php
Normal file
82
pages/articles/diy-calculator.php
Normal file
@@ -0,0 +1,82 @@
|
||||
<?php
|
||||
require_once "../../includes/config_session.inc.php";
|
||||
require_once "../../includes/lang.inc.php";
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
||||
<title>masiv's lair | Calculadora</title>
|
||||
<link rel="stylesheet" href="../../css/articles/diy-calculator/diy-calculator.css">
|
||||
<link rel="icon" href="../../img/favicon/favicon-lair.png">
|
||||
<script src="../../js/articles/diy-calculator/calc.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar top blank"></div>
|
||||
<div class="navbar top">
|
||||
<?php include "../../components/global/navbar.php"?>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="primary">
|
||||
<div>
|
||||
<div class="calc panel">
|
||||
<h1><?php echo $tr[$lang]["calc.title"]; ?></h1>
|
||||
<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')"><</button>
|
||||
<button onclick="q_manage('add','^')">^</button>
|
||||
<button onclick="q_execute('add','=')" id="equal">=</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info panel">
|
||||
<h1><?php echo $tr[$lang]["calc.h1"]; ?></h1>
|
||||
<p>
|
||||
<?php echo $tr[$lang]["calc.p1"]; ?>
|
||||
</p>
|
||||
<p>
|
||||
<?php echo $tr[$lang]["calc.p2"]; ?>
|
||||
</p>
|
||||
<p>
|
||||
<?php echo $tr[$lang]["calc.p3"]; ?>
|
||||
</p>
|
||||
<p>
|
||||
<?php echo $tr[$lang]["calc.p4"]; ?>
|
||||
<span class="li"><?php echo $tr[$lang]["calc.p4l1"]; ?></span>
|
||||
<span class="li"><?php echo $tr[$lang]["calc.p4l2"]; ?></span>
|
||||
<span class="li"><?php echo $tr[$lang]["calc.p4l3"]; ?></span>
|
||||
<?php echo $tr[$lang]["calc.p5"]; ?>
|
||||
</p>
|
||||
<p>
|
||||
<?php echo $tr[$lang]["calc.p6"]; ?><br>
|
||||
<?php echo $tr[$lang]["calc.p7"]; ?>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar bot blank"></div>
|
||||
<div class="navbar bot">
|
||||
<?php include "../../components/global/navbar.php"?>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,178 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
||||
<title>masiv's lair | Calculator</title>
|
||||
<link rel="stylesheet" href="../../css/articles/diy-calculator/diy-calculator.css">
|
||||
<link rel="icon" href="../../img/favicon/favicon-lair.png">
|
||||
<script src="../../js/articles/diy-calculator/calc.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar top blank"></div>
|
||||
<div class="navbar top">
|
||||
<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="../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="../articles/diy-calculator_es.html">Español</a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="primary">
|
||||
<div>
|
||||
<div class="calc panel">
|
||||
<h1>Calculator</h1>
|
||||
<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')"><</button>
|
||||
<button onclick="q_manage('add','^')">^</button>
|
||||
<button onclick="q_execute('add','=')" id="equal">=</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info panel">
|
||||
<h1>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>
|
||||
</div>
|
||||
<div class="navbar bot blank"></div>
|
||||
<div class="navbar bot">
|
||||
<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 last">
|
||||
<img src="../../img/icons/mail.png" alt="">
|
||||
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,175 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
||||
<title>masiv's lair | Calculadora</title>
|
||||
<link rel="stylesheet" href="../../css/articles/diy-calculator/diy-calculator.css">
|
||||
<link rel="icon" href="../../img/favicon/favicon-lair.png">
|
||||
<script src="../../js/articles/diy-calculator/calc.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar top blank"></div>
|
||||
<div class="navbar top">
|
||||
<div class="logo">
|
||||
<img src="../../img/logo/logo_smth.png" alt="">
|
||||
<a href="../../main_es.html" class="logo-text">masiv's lair</a>
|
||||
</div>
|
||||
<div class="about panel">
|
||||
<b><a href="../articles/about_es.html">Sobre mí</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="../articles/diy-calculator_en.html">English</a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="primary">
|
||||
<div>
|
||||
<div class="calc panel">
|
||||
<h1>Calculadora</h1>
|
||||
<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')"><</button>
|
||||
<button onclick="q_manage('add','^')">^</button>
|
||||
<button onclick="q_execute('add','=')" id="equal">=</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info panel">
|
||||
<h1>Sobre este projecto</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>
|
||||
</div>
|
||||
<div class="navbar bot blank"></div>
|
||||
<div class="navbar bot">
|
||||
<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 last">
|
||||
<img src="../../img/icons/mail.png" alt="">
|
||||
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user