From 404890589659a47d09839e845c3624ebb48a97a3 Mon Sep 17 00:00:00 2001
From: RustyStriker <avivr903@tutanota.com>
Date: Mon, 25 Jul 2022 15:06:05 +0300
Subject: [PATCH] 1 box multiple splitters(who will win?)

---
 404.html                   |  3 +-
 about.html                 |  8 ++---
 another_page.html          | 73 +++++++++++++++++++-------------------
 bscripts/internal_links.py |  6 ++++
 default_style.css          |  5 +++
 index.html                 |  3 +-
 old_index.html             | 36 ++++++++-----------
 stories/injector.html      | 15 +++-----
 template/footer.html       |  2 +-
 9 files changed, 74 insertions(+), 77 deletions(-)
 create mode 100644 bscripts/internal_links.py

diff --git a/404.html b/404.html
index 56034ab..d02a205 100644
--- a/404.html
+++ b/404.html
@@ -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>
diff --git a/about.html b/about.html
index 57d650e..a21262a 100644
--- a/about.html
+++ b/about.html
@@ -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>
diff --git a/another_page.html b/another_page.html
index 2446616..e7ef893 100644
--- a/another_page.html
+++ b/another_page.html
@@ -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,
diff --git a/bscripts/internal_links.py b/bscripts/internal_links.py
new file mode 100644
index 0000000..daa3774
--- /dev/null
+++ b/bscripts/internal_links.py
@@ -0,0 +1,6 @@
+while True:
+    try:
+        a = input()
+    except:
+        break
+    print('<a href=\'#' + a + '\'>' + a.capitalize() + '</a> ')
diff --git a/default_style.css b/default_style.css
index 3be28c6..f99878e 100644
--- a/default_style.css
+++ b/default_style.css
@@ -24,6 +24,11 @@ div {
 a {
     color:rgb(150, 150, 255);
 }
+hr {
+    width: 90%;
+    color: rgb(60, 0, 90);
+}
+
 
 .borderless {
     border-width: 0px;
diff --git a/index.html b/index.html
index fa6d121..5b8158f 100644
--- a/index.html
+++ b/index.html
@@ -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
diff --git a/old_index.html b/old_index.html
index 8a2abec..87638fa 100644
--- a/old_index.html
+++ b/old_index.html
@@ -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"},
diff --git a/stories/injector.html b/stories/injector.html
index f683b84..0b14e85 100644
--- a/stories/injector.html
+++ b/stories/injector.html
@@ -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>), 
diff --git a/template/footer.html b/template/footer.html
index 4944419..877b08e 100644
--- a/template/footer.html
+++ b/template/footer.html
@@ -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>