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

whatever i already made...

Browse source
This commit is contained in:
Aviv "RustyStriker" Romem 2022-03-25 14:08:07 +03:00
parent 0d63115e2a
commit b98306a05e
4 changed files with 294 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

134
another_page.html Normal file
View file

@ -0,0 +1,134 @@
<html>
<head>
<title>
Links are stupid
</title>
<link rel="stylesheet" type="text/css" href="default_style.css" media="all">
</head>
<body onscroll="onBodyScroll()">
Oh good, the last page got really crowded,
ok, back to the nonsense!
<h1>
Links are stupid
</h1>
<h3>
"hErE's WhY"
</h3>
<p>
So, if you want a hyper link in your site,
you need to use the &lt;a&gt; tag, but you have a &lt;link&gt;
tag, which links to another file(to import it, which indeed is useful),
but like, it could have a more "correct" name, and if you want to get a hyper link
you need to use the &lt;a&gt; tag.
<br>
And, I'm not saying you need to remove/replace the link, but like,
instead of &lt;a&gt; do something like &lt;hyper&gt;
or &lt;hyperlink&gt; or even &lt;hlink&gt;
(the last one might be confusing since it looks a lot like link,
but it is still better than fucking &lt;a&gt;)
</p>
<div style="width:60%; 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...
<br>
(in case you were wondering this div is "width:60%; margin:auto"
with some color values)
</p>
</div>
<p>
Any cool stuff I can try to make? Maybe an animated image
which flies in when you scroll down enough?
<br>
Sounds kinda stupid, and I hate it when websites makes scrolling
"digital"(by digital I mean it has discrete states, which I know everything
in computers are in discrete states since you cannot have the infinity in
a computer because reasons, but like, you get the point, its like having
a couple of stupid sites stitched on top of each other, which just sucks)
<br>
I will try it tho
</p>
<div style="margin:auto;height: 350px;">
<img src="cat_1.jpg" width="350px" height="350px" style="float:left;">
<img id="animatedImage" src="cat_1.jpg" width="350px" height="350px" style="float:right; visibility: hidden;">
<div style="width: 50%; margin:auto;">
<p>
Please enjoy this cute cat while I figure how to get the scroll data...
</p>
<div 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)
</p>
</div>
</div>
</div>
<div>
<p>
Anyway, some questions arise while im doing this, like
<br><br>
<b>Should websites be interactive at all?</b>
<br><br>
Of course they should, it's more fun that way!
<br><br>
<b>But just how much interactivity should we have...</b>
<br><br>
Forms and Such? Must(for needed websites)
<br>
Animations? Sure, it's fun, but dont push it.
<br>
Games? If you embed a game in your browser that is actually cool,
tho you prob shouldn't do it with javascript, or at least javascript shouldn't
support it, if we had solutions like the old ass flash player.
<br><br>
<i>"bUt FlAsH pLaYeR SuX(tm)"</i>
<br><br>
I said <b>like</b>...
And something is approaching, called wasm, or web assmbly.
<br>
But that brings another question to mind
<br><br>
<b>How far should we push our browsers?</b>
<br><br>
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,
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>
If i dont "trust" CSS i can just disable it.
<br>
But with JavaScript, it is a fully blown scripting language(a shitty one but still),
people made countless things with js, from fully featured web games, to a bloody backend system(why?).
<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>
</body>
<script>
var needToAnimateImage = true;
function onBodyScroll() {
let scrollPercent = document.body.scrollTop / document.body.scrollTopMax;
if (needToAnimateImage && scrollPercent > 0.99) {
needToAnimateImage = false;
let img = document.getElementById("animatedImage");
img.style.visibility = "inherit";
img.animate([
{ transform: "translateX(400px)" },
{ transform: "translateX(0px)"},
], {
duration: 2000,
}
);
setInterval(function() { document.getElementById("cat_par2").style.visibility = "inherit"; }, 2000);
}
}
</script>
</html>

BIN
cat_1.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 61 KiB

5
default_style.css Normal file
View file

@ -0,0 +1,5 @@
body {
background-color: #01011f;
color: rgb(255, 150, 150);
text-align: center;
}

155
index.html Normal file
View file

@ -0,0 +1,155 @@
<!DOCTYPE html>
<html>
<head>
<title>Rusty's Awesome Test Site</title>
<!-- Style -->
<link rel="stylesheet" type="text/css" href="default_style.css" media="all">
</head>
<header>
&#128128; &#128128; This is my &lt;header&gt; &#128128; &#128128;
</header>
<body>
<h1 style="color: crimson;">
Rusty's Awesome Test Site
</h1>
<p>
Welcome to my awesome test site,
I will Attempt to learn html using it,
and you can view my progress here(i guess)...
</p>
<p>
Why am i doing this for myself?
Because it is about time I learn to make websites
(and i want to really know how bad js is and if ts is actually any good)
</p>
<p style="background-color: whitesmoke; color: black; text-align: left;">
Imma do a lot of dumb shit here, like not centering this text.
<br>
And also giving it different colors
</p>
<p>
But enough with the games!
<h1>
</p>
I PRESENT TO YOU: &#129345;&#129345;&#129345;
</h1>
<p>
A button
</p>
<button onclick="onCoolButtonClick()">This is a cool button, click me</button>
<div id="appearing-div" style="visibility: hidden;">
<p>
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>
Also, i made this part appear only after you clicked the button,
because i can!
</p>
<p>
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,
so instead of doing "visibility = true" you do "visibility = inherit"
<br>
(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>
Now imma make a slider, which may or may not do something extre
<br>
Only one way to find out!
</p>
</div>
<input type="range" min="0" max="100" value="100" id="alphaSlider" oninput="onSliderInput()">
<div id="animated">
<p>
And now, I will attempt to animate this div
</p>
<button onclick="animateDiv()">Start the show please</button>
</div>
<div id="keyframeAnimated">
<p>
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>
</div>
<p>
This is indeed MUCH MUCH better. BUT, it is experimental
and not supported on everything or something
(like Safari, and also IE but that is deprecated).
<br>
Basically you can set keyframes, and pass some more stuff,
but most noteable you dont need to store the id of the interval
anywhere and you can simply fire and forget
(but just in case you can give it an id which is great)
</p>
<p>
This page is getting crowded so imma attemp at creating an hyper link
to another page on the site
<br>
<a href="another_page.html">I am really not sure how it works</a>
</p>
</body>
<script>
function onCoolButtonClick() {
let bg = document.body.style.getPropertyValue("background-color");
if (bg == "rgb(31, 1, 15)") {
document.body.style.setProperty("background-color", "rgb(1, 2, 47)");
}
else {
document.body.style.setProperty("background-color", "rgb(31, 1, 15)");
}
if (document.getElementById("appearing-div").style.visibility == "hidden") {
document.getElementById("appearing-div").style.visibility = "inherit";
}
}
function onSliderInput() {
let slider = document.getElementById("alphaSlider");
let div = document.getElementById("rangeDiv");
let value = Number(slider.value) / 100;
console.log(value);
div.style.color = "rgba(255, 150, 150, " + value + ")";
}
var divAnimationId = null;
function animateDiv() {
clearInterval(divAnimationId);
let div = document.getElementById("animated");
let dir = -0.1;
let curr = 0.99;
let frame = function() {
if(curr <= 0.0) {
dir = 0.1;
}
if (curr >= 1.0) {
clearInterval(divAnimationId);
}
else {
curr += dir;
div.style.color = "rgba(255, 150, 150, " + curr + ")";
}
}
divAnimationId = setInterval(frame, 25);
}
function animateDivAgain() {
let div = document.getElementById("keyframeAnimated");
div.animate([
{ color: "rgba(255,150,150, 1.0"},
{ color: "rgba(255,150,150, 0.0"},
{ color: "rgba(255,150,150, 1.0"},
],
{ duration: 500, iterations: 2 }
)
}
</script>
</html>