1 box multiple splitters(who will win?)
This commit is contained in:
parent
835e5fdbac
commit
4048905896
9 changed files with 74 additions and 77 deletions
3
404.html
3
404.html
|
@ -11,8 +11,7 @@
|
||||||
<br>
|
<br>
|
||||||
You may click the page title to go to the root page.
|
You may click the page title to go to the root page.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
<hr>
|
||||||
<div>
|
|
||||||
<a href = "https://qoto.org/@RustyStriker/108131661345490091">
|
<a href = "https://qoto.org/@RustyStriker/108131661345490091">
|
||||||
Also, here is a video of Molly and Louise playing with their toy
|
Also, here is a video of Molly and Louise playing with their toy
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -4,8 +4,7 @@
|
||||||
About
|
About
|
||||||
</h1>
|
</h1>
|
||||||
<p>
|
<p>
|
||||||
<a href="#website">Website</a>
|
<INJECT>grep 'h[1-3] id="' $CURRENT/$FILE | awk -F \" '{ print $2 }' | python $HOME/bscripts/internal_links.py</INJECT>
|
||||||
<a href="#me">Me</a>
|
|
||||||
</p>
|
</p>
|
||||||
<div>
|
<div>
|
||||||
<h2 id="website">Website</h2>
|
<h2 id="website">Website</h2>
|
||||||
|
@ -26,11 +25,10 @@
|
||||||
of said page in the gitea repository.
|
of said page in the gitea repository.
|
||||||
</i>
|
</i>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
<hr>
|
||||||
<div>
|
|
||||||
<h2 id="me">Me</h2>
|
<h2 id="me">Me</h2>
|
||||||
<p>
|
<p>
|
||||||
My name is Aviv, but I got by the name Rusty(Striker(TheFirst)) online,
|
My name is Aviv, but I go by the name Rusty(Striker(TheFirst)) online,
|
||||||
I like the Rust programming language, have shitty takes,
|
I like the Rust programming language, have shitty takes,
|
||||||
and know the world I was given is broken and immoral(hopefully we could change it one day)
|
and know the world I was given is broken and immoral(hopefully we could change it one day)
|
||||||
</p>
|
</p>
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
Oh good, the last page got really crowded,
|
Oh good, the last page got really crowded,
|
||||||
ok, back to the nonsense!
|
ok, back to the nonsense!
|
||||||
</p>
|
</p>
|
||||||
<div style="width: 98%;">
|
<div>
|
||||||
<h1>
|
<h1>
|
||||||
Links are stupid
|
Links are stupid
|
||||||
</h1>
|
</h1>
|
||||||
|
@ -26,7 +26,7 @@
|
||||||
<div class="borderless" style="width:80%; background-color: rgb(112, 26, 26); color:rgb(133, 255, 255); margin:auto;">
|
<div class="borderless" style="width:80%; background-color: rgb(112, 26, 26); color:rgb(133, 255, 255); margin:auto;">
|
||||||
<p>
|
<p>
|
||||||
Boy this page looks blend only with text,
|
Boy this page looks blend only with text,
|
||||||
and KDE keeps crashing on my laptop...
|
and KDE keeps crashing on my laptop(used the )...
|
||||||
<br>
|
<br>
|
||||||
(in case you were wondering this div is "width:60%; margin:auto"
|
(in case you were wondering this div is "width:60%; margin:auto"
|
||||||
with some color values)
|
with some color values)
|
||||||
|
@ -44,31 +44,32 @@
|
||||||
<br>
|
<br>
|
||||||
I will try it tho
|
I will try it tho
|
||||||
</p>
|
</p>
|
||||||
</div>
|
<hr>
|
||||||
<div style="margin:auto;height: 360px;">
|
<div class="borderless" style="margin:auto;height: 360px;">
|
||||||
<img src="molly.jpg" width="350px" height="350px" style="float:left;">
|
<img src="molly.jpg" width="350px" height="350px" style="float:left;">
|
||||||
<img id="animatedImage" src="louise.jpg" width="350px" height="350px" style="float:right; visibility: hidden;">
|
<img id="animatedImage" src="louise.jpg" width="350px" height="350px" style="float:right; visibility: hidden;">
|
||||||
<div class="borderless" style="width: 40%; margin:auto; height: 300px;">
|
<div class="borderless" style="width: 40%; margin:auto; height: 300px;">
|
||||||
<p>
|
|
||||||
Please enjoy Molly's picture as I figure how to get the scroll data...
|
|
||||||
</p>
|
|
||||||
<div class="borderless" id="cat_par2" style="visibility: hidden;">
|
|
||||||
<p>
|
<p>
|
||||||
Taadaaa!
|
Please enjoy Molly's picture as I figure how to get the scroll data...
|
||||||
<br>
|
|
||||||
That wasn't hard enough.
|
|
||||||
<br>
|
|
||||||
But things to note here, both cats are using `style="float:right;"`
|
|
||||||
(with the sliding one also being invisible until the animation appears)
|
|
||||||
and the animation used is with the `animate` method(and a lot of trial and error)
|
|
||||||
<br><br>
|
|
||||||
Also, this is Louise on the right, and she purrs as soon as someone gets close to her.
|
|
||||||
</p>
|
</p>
|
||||||
|
<div class="borderless" id="cat_par2" style="visibility: hidden;">
|
||||||
|
<p>
|
||||||
|
Taadaaa!
|
||||||
|
<br>
|
||||||
|
That wasn't hard enough.
|
||||||
|
<br>
|
||||||
|
But things to note here, both cats are using `style="float:right;"`
|
||||||
|
(with the sliding one also being invisible until the animation appears)
|
||||||
|
and the animation used is with the `animate` method(and a lot of trial and error)
|
||||||
|
<br><br>
|
||||||
|
Also, this is Louise on the right, and she purrs as soon as someone gets close to her.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<br>
|
||||||
<br>
|
<hr/>
|
||||||
<div>
|
<br>
|
||||||
<p>
|
<p>
|
||||||
Anyway, some questions arise while im doing this, like
|
Anyway, some questions arise while im doing this, like
|
||||||
<br><br>
|
<br><br>
|
||||||
|
@ -98,6 +99,7 @@
|
||||||
Because Like,
|
Because Like,
|
||||||
with html(and css) only, you are getting something that is ONLY drawing instrctions(and animations?),
|
with html(and css) only, you are getting something that is ONLY drawing instrctions(and animations?),
|
||||||
but it is all visuals(or should be), instructions on how to paint,
|
but it is all visuals(or should be), instructions on how to paint,
|
||||||
|
<br>
|
||||||
so if i decide to make a css-less browser(like <a href="https://metamuffin.org">metamuffin</a> did),
|
so if i decide to make a css-less browser(like <a href="https://metamuffin.org">metamuffin</a> did),
|
||||||
then everything should still work(but look like shit), which is awesome.
|
then everything should still work(but look like shit), which is awesome.
|
||||||
<br>
|
<br>
|
||||||
|
@ -108,21 +110,20 @@
|
||||||
<br>
|
<br>
|
||||||
Also JavaScript is a script running locally, so if the browser did a bad job sandboxing it from the system,
|
Also JavaScript is a script running locally, so if the browser did a bad job sandboxing it from the system,
|
||||||
some bad things may happen
|
some bad things may happen
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var needToAnimateImage = true;
|
var needToAnimateImage = true;
|
||||||
document.body.onscroll = onBodyScroll;
|
document.body.onscroll = onBodyScroll;
|
||||||
function onBodyScroll() {
|
function onBodyScroll() {
|
||||||
let scrollPercent = document.body.scrollTop / document.body.scrollTopMax;
|
let scrollPercent = document.body.scrollTop / document.body.scrollTopMax;
|
||||||
if (needToAnimateImage) {
|
if (needToAnimateImage) {
|
||||||
needToAnimateImage = false;
|
needToAnimateImage = false;
|
||||||
let img = document.getElementById("animatedImage");
|
let img = document.getElementById("animatedImage");
|
||||||
img.style.visibility = "inherit";
|
img.style.visibility = "inherit";
|
||||||
img.animate([
|
img.animate([
|
||||||
{ transform: "translateX(400px)" },
|
{ transform: "translateX(400px)" },
|
||||||
{ transform: "translateX(0px)"},
|
{ transform: "translateX(0px)"},
|
||||||
], {
|
], {
|
||||||
duration: 2000,
|
duration: 2000,
|
||||||
|
|
6
bscripts/internal_links.py
Normal file
6
bscripts/internal_links.py
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
while True:
|
||||||
|
try:
|
||||||
|
a = input()
|
||||||
|
except:
|
||||||
|
break
|
||||||
|
print('<a href=\'#' + a + '\'>' + a.capitalize() + '</a> ')
|
|
@ -24,6 +24,11 @@ div {
|
||||||
a {
|
a {
|
||||||
color:rgb(150, 150, 255);
|
color:rgb(150, 150, 255);
|
||||||
}
|
}
|
||||||
|
hr {
|
||||||
|
width: 90%;
|
||||||
|
color: rgb(60, 0, 90);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.borderless {
|
.borderless {
|
||||||
border-width: 0px;
|
border-width: 0px;
|
||||||
|
|
|
@ -11,8 +11,7 @@
|
||||||
<br><br>
|
<br><br>
|
||||||
<i>(if you are looking for the old index it is now <a href = "old_index.html">here</a>)</i>
|
<i>(if you are looking for the old index it is now <a href = "old_index.html">here</a>)</i>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
<hr />
|
||||||
<div>
|
|
||||||
<p>
|
<p>
|
||||||
While you are here, feel free to navigate the site using the
|
While you are here, feel free to navigate the site using the
|
||||||
<code>Folders</code> and <code>Files</code> listings above
|
<code>Folders</code> and <code>Files</code> listings above
|
||||||
|
|
|
@ -34,20 +34,17 @@
|
||||||
A button
|
A button
|
||||||
</p>
|
</p>
|
||||||
<button onclick="onCoolButtonClick()">This is a cool button, click me</button>
|
<button onclick="onCoolButtonClick()">This is a cool button, click me</button>
|
||||||
</div>
|
<hr/>
|
||||||
<div id="appearing-div" style="visibility: hidden;">
|
<p id="appearing-div" style="visibility: hidden;">
|
||||||
<p>
|
|
||||||
As you can see, clicking that button changes the background.
|
As you can see, clicking that button changes the background.
|
||||||
<br>
|
<br>
|
||||||
But something to note here, while you set colors usually using "#012345"
|
But something to note here, while you set colors usually using "#012345"
|
||||||
when you retrieve those colors using js, it gives you a string
|
when you retrieve those colors using js, it gives you a string
|
||||||
like "rgb(1, 35, 69)" instead, which i find dumb and annoying...
|
like "rgb(1, 35, 69)" instead, which i find dumb and annoying...
|
||||||
</p>
|
<br><br>
|
||||||
<p>
|
|
||||||
Also, i made this part appear only after you clicked the button,
|
Also, i made this part appear only after you clicked the button,
|
||||||
because i can!
|
because i can!
|
||||||
</p>
|
<br><br>
|
||||||
<p>
|
|
||||||
Another thing to note here, is that even tho some stuff
|
Another thing to note here, is that even tho some stuff
|
||||||
might have 2 options(technically) and could be used as a bool,
|
might have 2 options(technically) and could be used as a bool,
|
||||||
since CSS and everything, you have multiple values for them,
|
since CSS and everything, you have multiple values for them,
|
||||||
|
@ -56,29 +53,26 @@
|
||||||
(i use inherit because you might never know if the parent is visible
|
(i use inherit because you might never know if the parent is visible
|
||||||
or not and we are trying to not cause weird bugs on our first day)
|
or not and we are trying to not cause weird bugs on our first day)
|
||||||
</p>
|
</p>
|
||||||
</div>
|
<hr/>
|
||||||
<div id="rangeDiv">
|
<p id="rangeDiv">
|
||||||
<p>
|
|
||||||
Now imma make a slider, which may or may not do something extre
|
Now imma make a slider, which may or may not do something extre
|
||||||
<br>
|
<br>
|
||||||
Only one way to find out!
|
Only one way to find out!
|
||||||
</p>
|
</p>
|
||||||
<input type="range" min="0" max="100" value="100" id="alphaSlider" oninput="onSliderInput()">
|
<input type="range" min="0" max="100" value="100" id="alphaSlider" oninput="onSliderInput()">
|
||||||
</div>
|
<hr/>
|
||||||
<div id="animated">
|
<p id="animated">
|
||||||
<p>
|
And now, I will attempt to animate this paragraph
|
||||||
And now, I will attempt to animate this div
|
|
||||||
</p>
|
</p>
|
||||||
<button onclick="animateDiv()">Start the show please</button>
|
<button onclick="animateP()">Start the show please</button>
|
||||||
</div>
|
<hr/>
|
||||||
<div id="keyframeAnimated">
|
<p id="keyframeAnimated">
|
||||||
<p>
|
|
||||||
The last animation was made using the `setInterval` and `clearInterval`
|
The last animation was made using the `setInterval` and `clearInterval`
|
||||||
built in function,
|
built in function,
|
||||||
but this one will use the `animate` built in function
|
but this one will use the `animate` built in function
|
||||||
(I really hope it works well)
|
(I really hope it works well)
|
||||||
</p>
|
</p>
|
||||||
<button onclick="animateDivAgain()">I hope this is better</button>
|
<button onclick="animatePAgain()">I hope this is better</button>
|
||||||
<p>
|
<p>
|
||||||
This is indeed MUCH MUCH better. BUT, it is experimental
|
This is indeed MUCH MUCH better. BUT, it is experimental
|
||||||
and not supported on everything or something
|
and not supported on everything or something
|
||||||
|
@ -119,7 +113,7 @@
|
||||||
div.style.color = "rgba(255, 150, 150, " + value + ")";
|
div.style.color = "rgba(255, 150, 150, " + value + ")";
|
||||||
}
|
}
|
||||||
var divAnimationId = null;
|
var divAnimationId = null;
|
||||||
function animateDiv() {
|
function animateP() {
|
||||||
clearInterval(divAnimationId);
|
clearInterval(divAnimationId);
|
||||||
let div = document.getElementById("animated");
|
let div = document.getElementById("animated");
|
||||||
let dir = -0.1;
|
let dir = -0.1;
|
||||||
|
@ -138,7 +132,7 @@
|
||||||
}
|
}
|
||||||
divAnimationId = setInterval(frame, 25);
|
divAnimationId = setInterval(frame, 25);
|
||||||
}
|
}
|
||||||
function animateDivAgain() {
|
function animatePAgain() {
|
||||||
let div = document.getElementById("keyframeAnimated");
|
let div = document.getElementById("keyframeAnimated");
|
||||||
div.animate([
|
div.animate([
|
||||||
{ color: "rgba(255,150,150, 1.0"},
|
{ color: "rgba(255,150,150, 1.0"},
|
||||||
|
|
|
@ -46,8 +46,7 @@
|
||||||
and a call to python3
|
and a call to python3
|
||||||
(the actual commands are in the top of the source code of this page for example)
|
(the actual commands are in the top of the source code of this page for example)
|
||||||
</p>
|
</p>
|
||||||
</div>
|
<hr>
|
||||||
<div>
|
|
||||||
<h3>But, can't it leak critical information to the outside world?</h3>
|
<h3>But, can't it leak critical information to the outside world?</h3>
|
||||||
<p>
|
<p>
|
||||||
I am not a security expert, but you have full control over the commands,
|
I am not a security expert, but you have full control over the commands,
|
||||||
|
@ -63,8 +62,7 @@
|
||||||
you can just use commands that are in the same directory as the compiling websites
|
you can just use commands that are in the same directory as the compiling websites
|
||||||
(like i keep the build scripts in the <i>bscripts</i> folder).
|
(like i keep the build scripts in the <i>bscripts</i> folder).
|
||||||
</p>
|
</p>
|
||||||
</div>
|
<hr>
|
||||||
<div>
|
|
||||||
<h3>Interesting notes from making it using Rust</h3>
|
<h3>Interesting notes from making it using Rust</h3>
|
||||||
<p>
|
<p>
|
||||||
Overall, it is a 188 lines main file, using 0 dependencies(apart from std),
|
Overall, it is a 188 lines main file, using 0 dependencies(apart from std),
|
||||||
|
@ -88,8 +86,7 @@
|
||||||
I also have 3 <code>unsafe</code> blocks, 2 for using a static variable,
|
I also have 3 <code>unsafe</code> blocks, 2 for using a static variable,
|
||||||
and another 1 for lossly converting a <code>[u8]</code> to <code>&str</code>.
|
and another 1 for lossly converting a <code>[u8]</code> to <code>&str</code>.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
<hr>
|
||||||
<div>
|
|
||||||
<h3>The original plan</h3>
|
<h3>The original plan</h3>
|
||||||
<p>
|
<p>
|
||||||
The original plan was different, I initially wanted a fully real time thingy,
|
The original plan was different, I initially wanted a fully real time thingy,
|
||||||
|
@ -101,8 +98,7 @@
|
||||||
<br>
|
<br>
|
||||||
I decided to make into a bash commands, to better have what I aimed for
|
I decided to make into a bash commands, to better have what I aimed for
|
||||||
</p>
|
</p>
|
||||||
</div>
|
<hr>
|
||||||
<div>
|
|
||||||
<h3>Rust can be annoing sometimes</h3>
|
<h3>Rust can be annoing sometimes</h3>
|
||||||
<p>
|
<p>
|
||||||
Rust can be a bitch when it comes to handling strings,
|
Rust can be a bitch when it comes to handling strings,
|
||||||
|
@ -118,8 +114,7 @@
|
||||||
<br>
|
<br>
|
||||||
without any extra functions or allocations or anything really...
|
without any extra functions or allocations or anything really...
|
||||||
</p>
|
</p>
|
||||||
</div>
|
<hr>
|
||||||
<div>
|
|
||||||
<h3>Still glad I used Rust</h3>
|
<h3>Still glad I used Rust</h3>
|
||||||
<p>
|
<p>
|
||||||
I'm kind of a Rust fanboy(<i>catgirl</i>),
|
I'm kind of a Rust fanboy(<i>catgirl</i>),
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
| Except where otherwise noted.
|
| Except where otherwise noted.
|
||||||
<br>
|
<br>
|
||||||
Website is compiled using my custom
|
Website is compiled using my custom
|
||||||
<a href = "https://gitea.rustystriker.dev/RustyStriker/command_injector">injector</a>
|
<a href = "https://gitea.rustystriker.dev/RustyStriker/command_injector">bash command injector</a>
|
||||||
</p>
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|
Loading…
Reference in a new issue