RustyStriker/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

1 box multiple splitters(who will win?)

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

3
404.html
View file

@ -11,8 +11,7 @@
<br>
You may click the page title to go to the root page.
</p>
</div>
<div>
<hr>
<a href = "https://qoto.org/@RustyStriker/108131661345490091">
Also, here is a video of Molly and Louise playing with their toy
</a>

8
about.html
View file

@ -4,8 +4,7 @@
About
</h1>
<p>
<a href="#website">Website</a>
<a href="#me">Me</a>
<INJECT>grep 'h[1-3] id="' $CURRENT/$FILE | awk -F \" '{ print $2 }' | python $HOME/bscripts/internal_links.py</INJECT>
</p>
<div>
<h2 id="website">Website</h2>
@ -26,11 +25,10 @@
of said page in the gitea repository.
</i>
</p>
</div>
<div>
<hr>
<h2 id="me">Me</h2>
<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,
and know the world I was given is broken and immoral(hopefully we could change it one day)
</p>

73
another_page.html
View file

@ -3,7 +3,7 @@
Oh good, the last page got really crowded,
ok, back to the nonsense!
</p>
<div style="width: 98%;">
<div>
<h1>
Links are stupid
</h1>
@ -26,7 +26,7 @@
<div class="borderless" style="width:80%; background-color: rgb(112, 26, 26); color:rgb(133, 255, 255); margin:auto;">
<p>
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>
(in case you were wondering this div is "width:60%; margin:auto"
with some color values)
@ -44,31 +44,32 @@
<br>
I will try it tho
</p>
</div>
<div style="margin:auto;height: 360px;">
<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;">
<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;">
<hr>
<div class="borderless" style="margin:auto;height: 360px;">
<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;">
<div class="borderless" style="width: 40%; margin:auto; height: 300px;">
<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.
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>
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>
<br>
<div>
<br>
<hr/>
<br>
<p>
Anyway, some questions arise while im doing this, like
<br><br>
@ -98,6 +99,7 @@
Because Like,
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,
<br>
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.
<br>
@ -108,21 +110,20 @@
<br>
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
</p>
</div>
<script>
var needToAnimateImage = true;
document.body.onscroll = onBodyScroll;
function onBodyScroll() {
let scrollPercent = document.body.scrollTop / document.body.scrollTopMax;
if (needToAnimateImage) {
needToAnimateImage = false;
let img = document.getElementById("animatedImage");
img.style.visibility = "inherit";
img.animate([
{ transform: "translateX(400px)" },
<script>
var needToAnimateImage = true;
document.body.onscroll = onBodyScroll;
function onBodyScroll() {
let scrollPercent = document.body.scrollTop / document.body.scrollTopMax;
if (needToAnimateImage) {
needToAnimateImage = false;
let img = document.getElementById("animatedImage");
img.style.visibility = "inherit";
img.animate([
{ transform: "translateX(400px)" },
{ transform: "translateX(0px)"},
], {
duration: 2000,

6
bscripts/internal_links.py Normal file
View file

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

5
default_style.css
View file

@ -24,6 +24,11 @@ div {
a {
color:rgb(150, 150, 255);
}
hr {
width: 90%;
color: rgb(60, 0, 90);
}
.borderless {
border-width: 0px;

3
index.html
View file

@ -11,8 +11,7 @@
<br><br>
<i>(if you are looking for the old index it is now <a href = "old_index.html">here</a>)</i>
</p>
</div>
<div>
<hr />
<p>
While you are here, feel free to navigate the site using the
<code>Folders</code> and <code>Files</code> listings above

36
old_index.html
View file

@ -34,20 +34,17 @@
A button
</p>
<button onclick="onCoolButtonClick()">This is a cool button, click me</button>
</div>
<div id="appearing-div" style="visibility: hidden;">
<p>
<hr/>
<p id="appearing-div" style="visibility: hidden;">
As you can see, clicking that button changes the background.
<br>
But something to note here, while you set colors usually using "#012345"
when you retrieve those colors using js, it gives you a string
like "rgb(1, 35, 69)" instead, which i find dumb and annoying...
</p>
<p>
<br><br>
Also, i made this part appear only after you clicked the button,
because i can!
</p>
<p>
<br><br>
Another thing to note here, is that even tho some stuff
might have 2 options(technically) and could be used as a bool,
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
or not and we are trying to not cause weird bugs on our first day)
</p>
</div>
<div id="rangeDiv">
<p>
<hr/>
<p id="rangeDiv">
Now imma make a slider, which may or may not do something extre
<br>
Only one way to find out!
</p>
<input type="range" min="0" max="100" value="100" id="alphaSlider" oninput="onSliderInput()">
</div>
<div id="animated">
<p>
And now, I will attempt to animate this div
<hr/>
<p id="animated">
And now, I will attempt to animate this paragraph
</p>
<button onclick="animateDiv()">Start the show please</button>
</div>
<div id="keyframeAnimated">
<p>
<button onclick="animateP()">Start the show please</button>
<hr/>
<p id="keyframeAnimated">
The last animation was made using the `setInterval` and `clearInterval`
built in function,
but this one will use the `animate` built in function
(I really hope it works well)
</p>
<button onclick="animateDivAgain()">I hope this is better</button>
<button onclick="animatePAgain()">I hope this is better</button>
<p>
This is indeed MUCH MUCH better. BUT, it is experimental
and not supported on everything or something
@ -119,7 +113,7 @@
div.style.color = "rgba(255, 150, 150, " + value + ")";
}
var divAnimationId = null;
function animateDiv() {
function animateP() {
clearInterval(divAnimationId);
let div = document.getElementById("animated");
let dir = -0.1;
@ -138,7 +132,7 @@
}
divAnimationId = setInterval(frame, 25);
}
function animateDivAgain() {
function animatePAgain() {
let div = document.getElementById("keyframeAnimated");
div.animate([
{ color: "rgba(255,150,150, 1.0"},

15
stories/injector.html
View file

@ -46,8 +46,7 @@
and a call to python3
(the actual commands are in the top of the source code of this page for example)
</p>
</div>
<div>
<hr>
<h3>But, can't it leak critical information to the outside world?</h3>
<p>
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
(like i keep the build scripts in the <i>bscripts</i> folder).
</p>
</div>
<div>
<hr>
<h3>Interesting notes from making it using Rust</h3>
<p>
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,
and another 1 for lossly converting a <code>[u8]</code> to <code>&str</code>.
</p>
</div>
<div>
<hr>
<h3>The original plan</h3>
<p>
The original plan was different, I initially wanted a fully real time thingy,
@ -101,8 +98,7 @@
<br>
I decided to make into a bash commands, to better have what I aimed for
</p>
</div>
<div>
<hr>
<h3>Rust can be annoing sometimes</h3>
<p>
Rust can be a bitch when it comes to handling strings,
@ -118,8 +114,7 @@
<br>
without any extra functions or allocations or anything really...
</p>
</div>
<div>
<hr>
<h3>Still glad I used Rust</h3>
<p>
I'm kind of a Rust fanboy(<i>catgirl</i>),

2
template/footer.html
View file

@ -13,7 +13,7 @@
| Except where otherwise noted.
<br>
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>
</footer>
</body>