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

new index.html - needs work

This commit is contained in:
Rusty Striker 2022-07-13 20:02:17 +03:00
parent 698690c2ce
commit 835e5fdbac
2 changed files with 172 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
index.html
View File

@ -5,148 +5,25 @@
Files: <INJECT>cd $CURRENT && ls *.html | python3 $HOME/bscripts/ls_to_a.py</INJECT>
</p>
<h1>
Welcome, to my WEBSITE!
</h1>
<div>
<p>
Welcome to my awesome website,
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: &#129345;&#129345;&#129345;
</h1>
</p>
<p>
A button
</p>
<button onclick="onCoolButtonClick()">This is a cool button, click me</button>
</div>
<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)
Hello and welcome to my personal website
<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 id="rangeDiv">
<div>
<p>
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
</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>
<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>
While you are here, feel free to navigate the site using the
<code>Folders</code> and <code>Files</code> listings above
<br><br>
Sometimes pages will link directly to other pages
(like <a href = "old_index.html">old_index</a>
which links to <a href = "another_age.html">another_page</a>,
or like how this page links to other pages as part of pointing stuff out)
</p>
</div>
<script>
function onCoolButtonClick() {
let bg = document.body.style.getPropertyValue("background-color");
if (bg == "rgb(1, 2, 47)") {
document.body.style.setProperty("background-color", "rgb(5, 0, 11)");
}
else {
document.body.style.setProperty("background-color", "rgb(1, 2, 47)");
}
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>
<INJECT>cat $HOME/template/footer.html</INJECT>

152
old_index.html Normal file
View File

@ -0,0 +1,152 @@
<INJECT>cat $HOME/template/header.html | sed "s/__PAGE TITLE__/Rusty's website/"</INJECT>
<p>
Folders: <INJECT>cd $CURRENT && ls */ -d | sed 's/\///' | python3 $HOME/bscripts/ls_to_a.py</INJECT>
<br>
Files: <INJECT>cd $CURRENT && ls *.html | python3 $HOME/bscripts/ls_to_a.py</INJECT>
</p>
<h1>
Welcome, to my WEBSITE!
</h1>
<div>
<p>
Welcome to my awesome website,
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: &#129345;&#129345;&#129345;
</h1>
</p>
<p>
A button
</p>
<button onclick="onCoolButtonClick()">This is a cool button, click me</button>
</div>
<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>
<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
</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>
<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>
</div>
<script>
function onCoolButtonClick() {
let bg = document.body.style.getPropertyValue("background-color");
if (bg == "rgb(1, 2, 47)") {
document.body.style.setProperty("background-color", "rgb(5, 0, 11)");
}
else {
document.body.style.setProperty("background-color", "rgb(1, 2, 47)");
}
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>
<INJECT>cat $HOME/template/footer.html</INJECT>