1 box multiple splitters(who will win?)

This commit is contained in:
RustyStriker 2022-07-25 15:06:05 +03:00
parent 835e5fdbac
commit 4048905896
9 changed files with 74 additions and 77 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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,

View File

@ -0,0 +1,6 @@
while True:
try:
a = input()
except:
break
print('<a href=\'#' + a + '\'>' + a.capitalize() + '</a> ')

View File

@ -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;

View File

@ -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

View File

@ -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"},

View File

@ -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>),

View File

@ -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>