2022-03-25 11:08:07 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
2022-04-23 12:30:28 +00:00
|
|
|
<head>
|
|
|
|
|
<!-- JS Licese -->
|
2022-04-22 19:19:45 +00:00
|
|
|
<script>
|
|
|
|
|
/*
|
|
|
|
|
@licstart The following is the entire license notice for the
|
|
|
|
|
JavaScript code in this page.
|
|
|
|
|
|
|
|
|
|
Copyright (C) 2022 Aviv "RustyStriker" Romem
|
|
|
|
|
|
|
|
|
|
The JavaScript code in this page is free software: you can
|
|
|
|
|
redistribute it and/or modify it under the terms of the GNU
|
|
|
|
|
General Public License (GNU GPL) as published by the Free Software
|
|
|
|
|
Foundation, either version 3 of the License, or (at your option)
|
|
|
|
|
any later version. The code is distributed WITHOUT ANY WARRANTY;
|
|
|
|
|
without even the implied warranty of MERCHANTABILITY or FITNESS
|
|
|
|
|
FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
|
|
|
|
|
|
|
|
|
|
As additional permission under GNU GPL version 3 section 7, you
|
|
|
|
|
may distribute non-source (e.g., minimized or compacted) forms of
|
|
|
|
|
that code without the copy of the GNU GPL normally required by
|
|
|
|
|
section 4, provided you include this license notice and a URL
|
|
|
|
|
through which recipients can access the Corresponding Source.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@licend The above is the entire license notice
|
|
|
|
|
for the JavaScript code in this page.
|
|
|
|
|
*/
|
|
|
|
|
</script>
|
2022-04-23 12:30:28 +00:00
|
|
|
|
|
|
|
|
<title>Rusty Striker's Awesome Website</title>
|
|
|
|
|
|
|
|
|
|
<!--Style stuff -->
|
2022-03-25 11:08:07 +00:00
|
|
|
<link rel="stylesheet" type="text/css" href="default_style.css" media="all">
|
2022-04-23 12:30:28 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<header>
|
|
|
|
|
<div>
|
|
|
|
|
<a href = "https://rustystriker.dev/">
|
|
|
|
|
<h1 style="margin-bottom:0px;">Rusty's Wetbsite</h1>
|
|
|
|
|
</a>
|
|
|
|
|
<p style = "margin-top: 0px;">
|
|
|
|
|
A place for wanky stuff, weird JavaScript and warm-ish takes
|
|
|
|
|
</p>
|
|
|
|
|
<a href = "https://rustystriker.dev/about.html">About</a>
|
|
|
|
|
<a href = "https://gitea.rustystriker.dev/RustyStriker/website">Source</a>
|
|
|
|
|
<a href = "https://rustystriker.dev/licenses.html">Licenses</a>
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
<h1>
|
|
|
|
|
Welcome, to my WEBSITE!
|
2022-03-25 11:08:07 +00:00
|
|
|
</h1>
|
2022-04-16 14:40:41 +00:00
|
|
|
<div>
|
|
|
|
|
<p>
|
2022-04-23 12:30:28 +00:00
|
|
|
Welcome to my awesome website,
|
2022-04-16 14:40:41 +00:00
|
|
|
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>
|
|
|
|
|
I PRESENT TO YOU: 🥁🥁🥁
|
|
|
|
|
</h1>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
A button
|
|
|
|
|
</p>
|
|
|
|
|
<button onclick="onCoolButtonClick()">This is a cool button, click me</button>
|
|
|
|
|
</div>
|
2022-03-25 11:08:07 +00:00
|
|
|
<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>
|
2022-04-16 14:40:41 +00:00
|
|
|
<input type="range" min="0" max="100" value="100" id="alphaSlider" oninput="onSliderInput()">
|
2022-03-25 11:08:07 +00:00
|
|
|
</div>
|
|
|
|
|
<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>
|
2022-04-16 14:40:41 +00:00
|
|
|
<p>
|
|
|
|
|
This is indeed MUCH MUCH better. BUT, it is experimental
|
2022-03-25 11:08:07 +00:00
|
|
|
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>
|
2022-04-16 14:40:41 +00:00
|
|
|
</div>
|
2022-04-23 12:30:28 +00:00
|
|
|
|
|
|
|
|
<footer>
|
|
|
|
|
<p>
|
|
|
|
|
Copyright © 2022 Aviv "RustyStriker" Romem |
|
|
|
|
|
Except where otherwise noted.
|
|
|
|
|
<br>
|
|
|
|
|
works and publications on this website are licenced under
|
|
|
|
|
<a href = "https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>.
|
|
|
|
|
<br>
|
|
|
|
|
Codes are published under
|
|
|
|
|
<a href = "https://www.gnu.org/licenses/agpl-3.0.html">GNU AGPL v3 or later</a>
|
|
|
|
|
and JavaScript is also published under
|
|
|
|
|
<a href = "https://www.gnu.org/licenses/gpl-3.0.html">GNU GPL v3 or later</a>
|
|
|
|
|
| Except where otherwise noted.
|
|
|
|
|
</p>
|
|
|
|
|
</footer>
|
|
|
|
|
</body>
|
|
|
|
|
|
2022-03-25 11:08:07 +00:00
|
|
|
<script>
|
|
|
|
|
function onCoolButtonClick() {
|
|
|
|
|
let bg = document.body.style.getPropertyValue("background-color");
|
2022-04-23 12:30:28 +00:00
|
|
|
if (bg == "rgb(1, 2, 47)") {
|
|
|
|
|
document.body.style.setProperty("background-color", "rgb(5, 0, 11)");
|
2022-03-25 11:08:07 +00:00
|
|
|
}
|
|
|
|
|
else {
|
2022-04-23 12:30:28 +00:00
|
|
|
document.body.style.setProperty("background-color", "rgb(1, 2, 47)");
|
2022-03-25 11:08:07 +00:00
|
|
|
}
|
|
|
|
|
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>
|
2022-04-22 19:15:27 +00:00
|
|
|
</html>
|
