website/another_page.html

200 lines
8.8 KiB
HTML
Raw Normal View History

2022-04-23 12:30:28 +00:00
<!DOCTYPE html>
2022-03-25 11:08:07 +00:00
<html>
2022-04-23 12:30:28 +00:00
<head>
<!-- JS Licese -->
<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>
<title>Links are stupid</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 onscroll="onBodyScroll()">
<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>
2022-03-25 11:08:07 +00:00
<p>
2022-04-16 14:40:41 +00:00
Oh good, the last page got really crowded,
ok, back to the nonsense!
2022-03-25 11:08:07 +00:00
</p>
2022-04-16 14:40:41 +00:00
<div style="width: 98%;">
<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 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...
<br>
(in case you were wondering this div is "width:60%; margin:auto"
with some color values)
</p>
</div>
2022-03-25 11:08:07 +00:00
<p>
2022-04-16 14:40:41 +00:00
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)
2022-03-25 11:08:07 +00:00
<br>
2022-04-16 14:40:41 +00:00
I will try it tho
2022-03-25 11:08:07 +00:00
</p>
</div>
2022-04-16 14:40:41 +00:00
<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;">
2022-04-16 14:40:41 +00:00
<div class="borderless" style="width: 40%; margin:auto; height: 300px;">
2022-03-25 11:08:07 +00:00
<p>
Please enjoy Molly's picture as I figure how to get the scroll data...
2022-03-25 11:08:07 +00:00
</p>
2022-04-16 14:40:41 +00:00
<div class="borderless" id="cat_par2" style="visibility: hidden;">
2022-03-25 11:08:07 +00:00
<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)
2022-04-16 14:40:41 +00:00
<br><br>
Also, this is Louise on the right, and she purrs as soon as someone gets close to her.
2022-03-25 11:08:07 +00:00
</p>
</div>
</div>
</div>
2022-04-16 14:40:41 +00:00
<br>
2022-03-25 11:08:07 +00:00
<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),
2022-04-16 14:40:41 +00:00
people made countless things with js, from fully featured web games, to a bloody server backend(why?).
2022-03-25 11:08:07 +00:00
<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>
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>
<script>
2022-03-25 11:08:07 +00:00
var needToAnimateImage = true;
function onBodyScroll() {
let scrollPercent = document.body.scrollTop / document.body.scrollTopMax;
2022-04-23 12:30:28 +00:00
if (needToAnimateImage) {
2022-03-25 11:08:07 +00:00
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>
2022-04-23 12:30:28 +00:00
</html>