+ Welcome to v4! -
+2/05/2023
+ +Howto: Game ripping
+
+ 
+ 
+ 
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/blog/hacking.html b/blog/hacking.html
new file mode 100644
index 0000000..cadd512
--- /dev/null
+++ b/blog/hacking.html
@@ -0,0 +1,92 @@
+
+
+
+
+
+
+
+
+
+
+
+ Introduction
++ Many people ask me (3kh0) how I get the games on my site, and now I can finally introduce the best (not underrated) tool, the network tab in your local inspect element! (I will be doing this in chrome since the layout in firefox is different and more people use chromium based browsers) +
+The Epic Hacker part
+
+ + I am going to just make a silly assumption that you know how to open inspect element on your browser/device, if you do not know how, look it up. I know this might look a little scary like omg what do all these crazy buttons do!??!/1 I will guide to step by step on what all this cool stuff is. So we will go from top to bottom, and we will only go over what is needed to know how to game rip. If you want to learn more, just play around with it or consult the wiki. THe screenshot above is the search page for google, (it is just google.com) and you can see, there is alot of stuff, that is because google is complex as fuck, so we will try something more simple. +
+
+ + There something more simple. I went to the website example.com and this is what I see in my network tab. Focus on the chart where is has things like example.com and favicon, this is our request list, this is a list of all the requests that your browser had to make to assemble this page that you are looking at right now. Now you will want to click on the listing that says example.com +
+
+ + Wow look at all that useless stuff! I highlighted the only two things you need to look at and that is the Request URL and Status Code, that is pretty much all you need. Now you might be asking, well what is that red listing that says favicon? Ok, go click it, now look at the Request URL and Status code. It is requesting https://example.com/favicon.ico but the problem is, the server replied with code 404, what this means is that the server can not find this favicon.ico file, so that is why it is red. But notice how the webpage still looks fine. When game ripping, you need to make sure you ignore some of these requests. Things like the favicon are often 404 errors. +
++ Alright, just as pratice, we are going to rip this website example.com just as a start. So open up your file explorer or any file indexing app and create a new folder, put the name as example. Now go back to the website, do ctrl+s (For Macs this is command+s) and it should save the HTML file for this page. If it pulls up a finder window asking where to save it, make sure you save it in your "example" folder. Now go to your example folder, right click the file you downloaded, open it with a web browser, and you should see the example.com website there. Congrats, you just ripped a website! Well this was only one file, so it was pretty easy. Lets try something harder. +
++ Now I have a site with many files, like HTML, CSS, and JS files. Now if you do not already have a code editor like VS Code, I would download that right now, don't have it? Click here. I am not going to teach you how to use VS Code, I would find a tutorial online or something. Now that you have a code editor, this will make it much easier. Now create another folder, call it test1 or something, make sure you know where it is! Now open VS Code and click file and open folder, go to your folder, click select or ok and you should be in your folder. Here is the website. Now don't cheat and just copy it off of the GitHub repo, you are not learning silly. Ok first open up the network tab, do a refresh. Why do I need to reload it again? If you open it after the page has loaded then sometimes you miss some requests that were made before you opened the panel. Now note the file structure, you need to copy everything in 3kh0.github.io/personal-site/ anything else that goes to any other domain, you can leave alone. So download the homepage, drop it into your folder, and open it in your browser. Now it looks a little different than the original link. Open up the network tab and see what is wrong, and OMG THAT IS ALOT OF RED! Click on a few of them, most of them will have the Status code of 404, which means that your web browser can not find the file that is on your computer, so we will need to get those, note the request URL, hey I know where that would be! Now using VS Code, download the file that is on the server, on to your computer. Make sure it is in the right place, so like a JS file that is in the js folder on the site should be in a js folder in that test1 folder with all your other stuff, now make sure you only get stuff from the /personal-site/ folder, nothing else. Once you have gotten the main page to work, try clicking on the links on the top, it brings you to a 404 error. You know what do to! Download the pages and assets that are needed. Once you are done, compare with the GitHub repo. If you got it spot on (cheater?) then good job! You are good at this. If the folder on your computer looks very different from Github repo, game ripping might not be for you. So find something else, idk. Good the skids are gone, moving on! +
++ Now since you made light work of that repo, it is time you try something harder, see if you can rip a game off of itch.io. Make sure you know your limits, this kind of basic of game ripping will not work for online games. Big online game websites like poki have measures in place to stop game ripping such as cookie authentication, the way to bypass this to save from the network tab, if you right click the listing for the item, you should be able to save it, I have had varied success with this. As always, if you need more help or something went wrong, hit me up on discord. +
+- Echo
+P.S. Next post will be about how this website came to be! Stay tuned :)
+Echo's adventures with 10 USBs
+
+ 
+
+
+
+
+
\ No newline at end of file
diff --git a/blog/index.html b/blog/index.html
new file mode 100644
index 0000000..d526cf6
--- /dev/null
+++ b/blog/index.html
@@ -0,0 +1,109 @@
+
+
+
+
+
+
+
+
+
+
+
+ + I recently ordered 10 64GB Micro Center USBs off of amazon and decided to use them for a fun project - flashing different hacking tools and exploits to them. This project was a great way to familiarize myself with various tools and have them readily available for use in the future. (Mostly trolling) +
++ To start, I did some research to determine what I wanted to flash onto my USBs. I considered a variety of tools, including penetration testing tools, forensic tools, and password cracking tools. I ended up choosing a mix of all three categories, making sure to select a variety with different capabilities and functions. +
++ Once I had my list of tools, I began the process of flashing them onto my USBs. The process of flashing a tool onto a USB involves copying the tool's files onto the USB, and then configuring the USB to be bootable. This allows me to run the tool directly from the USB, without having to install it onto a computer. +
+Some of the tools I ended up flashing onto my USBs include:
+-
+
- Kali Linux: A popular hacking distribution of Linux that includes a wide range of tools. +
- Ophcrack: A password cracking tool that can be used to recover Windows passwords. +
- Autopsy: A digital forensics tool that can be used to analyze digital devices for evidence of criminal activity. +
- Metasploit: A penetration testing tool that can be used to exploit vulnerabilities in computer systems. +
+ I used a tool called Ventoy, an open-source tool for creating multi-boot USB drives. It allows me to boot multiple operating systems or diagnostic tools from a single USB drive. Which is pretty cool, so using that I was able use each stick to is maximum potental in terms of storage
++
Then for the rest of them, I turned them into exploits following a post by Catalin Cimpanu on bleepingcomputer.com and others that I had known about.
+
+ -
+
- Sh1mmer: A exploit to uneroll enterpise managed chromebooks by the mercury team. +
- Rubber Ducky: A device that looks like a normal USB drive, but can execute malicious commands on a computer when plugged in. +
- BadUSB: A firmware vulnerability in some USB devices that allows attackers to alter their functionality and execute malicious code. +
- PoisonTap: A tool that exploits vulnerabilities in locked and password-protected computers to steal sensitive information and install backdoors. +
- USBDriveBy: A tool that allows an attacker to remotely compromise a computer when a specific type of USB device is plugged in. +
- Bash Bunny: A multi-functional device that can be used for a variety of hacking and penetration testing tasks, including executing payloads, key logging, and network reconnaissance. +
- LAN Turtle: A device that can be used to perform various network-based attacks, such as man-in-the-middle attacks and rogue DHCP server attacks. +
+ Most of these USB tools can be bought from Hak5 if you are too lazy to set them up yourself, I have the Wifi Pineapple already. (Wifi users beware!) +
++ Once all of the tools were successfully flashed onto my USBs, I tested them to make sure they were working properly. I was pleased to find that all of the tools worked as expected, and I was able to use them to perform various tasks related to hacking. +
++ In conclusion, this project was a fun and educational experience. I was able to familiarize myself with several different hacking tools and have them readily available for use in the future. I highly recommend this project to anyone who is interested in learning more about hacking and security. +
++ If you want to order some for yourself, click here: amazon.com +
+P.S. If you guys like me talking, I will do more :)
++ Further reading +
-
+
- https://hackeracademy.org/hack-any-system-with-a-usb-stealer/ +
- https://www.bleepingcomputer.com/news/security/heres-a-list-of-29-different-types-of-usb-attacks/ +
- https://infosecwriteups.com/how-i-made-a-programmable-hacking-usb-device-to-infiltrate-pcs-449726c5b23d +
- https://shop.hak5.org/products/usb-rubber-ducky +
- https://www.youtube.com/watch?v=kfaHJwcG2mg +
Blog
+
+
+ Welcome to my new blog. I can not guarantee that ChatGPT did not write these.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/blog/inspect.png b/blog/inspect.png
new file mode 100644
index 0000000..cf0594b
Binary files /dev/null and b/blog/inspect.png differ
diff --git a/blog/piplup.html b/blog/piplup.html
new file mode 100644
index 0000000..02b20d4
--- /dev/null
+++ b/blog/piplup.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+ 
+ Piplup
+
+
+
+
+
+
+
+
diff --git a/blog/v4.html b/blog/v4.html
new file mode 100644
index 0000000..8325029
--- /dev/null
+++ b/blog/v4.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
+
+
+
+
+ Piplup is cool
+🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧🐧
+
+ About v4
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/blog/v4release.html b/blog/v4release.html
new file mode 100644
index 0000000..a00f9c5
--- /dev/null
+++ b/blog/v4release.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
+
+
+ Hi! It's Nebelung. I know this is Echo's blog, but I'm making a little post about version 4 of the site.
++ The website you are on now is v4! I started this version with the vision of a clean, easy to use, and sexy looking new version of 3kh0. This site has many new features, like JSON loading for games, new themes, and fun animations and + easter eggs. +
+
+ Fun Facts:
+ 1. Development was started on Jan 3, 2023, just after the new year :D
+ 2. Version 4 was made from scratch, it's not just an updated version of v3.
+ 3. The default and Orchid themes are from the two buttons on the homepage of v3.
+ 4. Have you heard about the Konami Code?
+
So play the games, add a review or look around for easter eggs, and enjoy your stay.
+Hopefully v5 will be even better, whenever that happens, but I hope you enjoy this amazing site as much as I do!
+- Nebelung
+
+ Welcome to v4!
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/blog/v4update.gif b/blog/v4update.gif
new file mode 100644
index 0000000..4d56567
Binary files /dev/null and b/blog/v4update.gif differ
diff --git a/css/index.css b/css/index.css
new file mode 100644
index 0000000..f363637
--- /dev/null
+++ b/css/index.css
@@ -0,0 +1,6 @@
+/* Main font */
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+/* Main styles */
+@import url('style.css');
+@import url('themes.css');
+@import url('mobile.css');
\ No newline at end of file
diff --git a/css/mobile.css b/css/mobile.css
new file mode 100644
index 0000000..a847f4e
--- /dev/null
+++ b/css/mobile.css
@@ -0,0 +1,44 @@
+@media only screen and (max-width: 480px) {
+ .navlogo {
+ display: none;
+ }
+
+ .games {
+ grid-template-columns: repeat(auto-fill, 150px);
+ grid-gap: 1rem;
+ margin: 1rem;
+ }
+
+ .game {
+ height: 185px;
+ width: 150px;
+ }
+
+ .game-image {
+ height: 150px;
+ width: 150px;
+ }
+
+ .game-text {
+ line-height: 35px;
+ width: 150px;
+ }
+
+ .review:last-child {
+ display: none;
+ }
+
+ .review:first-child {
+ display: none;
+ }
+
+ .review-placeholder {
+ display: none;
+ }
+}
+
+@media only screen and (max-height: 432px) {
+ .reviews-link {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..d89ed68
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,594 @@
+* {
+ font-family: "Roboto";
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+::-webkit-scrollbar {
+ width: 16px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: var(--theme);
+ border: 4px solid transparent;
+ background-clip: content-box;
+ border-radius: 8px;
+}
+
+::-webkit-scrollbar-corner {
+ background: transparent;
+}
+
+::placeholder {
+ color: var(--text-secondary);
+ user-select: none;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ background: var(--background);
+}
+
+@keyframes breathing {
+ 0% {
+ box-shadow: 0 5px 170px var(--theme);
+ }
+
+ 25% {
+ box-shadow: 0 5px 200px var(--theme);
+ }
+
+ 60% {
+ box-shadow: 0 5px 170px var(--theme);
+ }
+
+ 100% {
+ box-shadow: 0 5px 170px var(--theme);
+ }
+}
+
+@-webkit-keyframes breathing {
+ 0% {
+ box-shadow: 0 5px 170px var(--theme);
+ }
+
+ 25% {
+ box-shadow: 0 5px 200px var(--theme);
+ }
+
+ 60% {
+ box-shadow: 0 5px 170px var(--theme);
+ }
+
+ 100% {
+ box-shadow: 0 5px 170px var(--theme);
+ }
+}
+
+.navbar {
+ height: 56px;
+ box-shadow: 0 5px 200px var(--theme);
+ position: sticky;
+ top: 0;
+ z-index: 9999;
+ animation: breathing 5s ease-out infinite normal;
+}
+
+.navitems {
+ display: flex;
+ justify-content: center;
+ height: 100%;
+ align-items: center;
+ gap: 10px;
+ background: var(--background);
+}
+
+.navlogo {
+ height: 45px;
+ border-radius: 15px;
+ position: absolute;
+ left: 5px;
+ user-select: none;
+}
+
+@keyframes shake {
+ 0% {
+ transform: translate(1px, 1px) rotate(0deg);
+ }
+
+ 10% {
+ transform: translate(-1px, -2px) rotate(-1deg);
+ }
+
+ 20% {
+ transform: translate(-3px, 0px) rotate(1deg);
+ }
+
+ 30% {
+ transform: translate(3px, 2px) rotate(0deg);
+ }
+
+ 40% {
+ transform: translate(1px, -1px) rotate(1deg);
+ }
+
+ 50% {
+ transform: translate(-1px, 2px) rotate(-1deg);
+ }
+
+ 60% {
+ transform: translate(-3px, 1px) rotate(0deg);
+ }
+
+ 70% {
+ transform: translate(3px, 1px) rotate(-1deg);
+ }
+
+ 80% {
+ transform: translate(-1px, -1px) rotate(1deg);
+ }
+
+ 90% {
+ transform: translate(1px, 2px) rotate(0deg);
+ }
+
+ 100% {
+ transform: translate(1px, -2px) rotate(-1deg);
+ }
+}
+
+.navlogo:hover {
+ animation: shake 0.5s;
+ animation-iteration-count: infinite;
+}
+
+.navitem {
+ border-radius: 40px;
+ padding: 10px 8px;
+ font-size: 15px;
+ background: transparent;
+ cursor: pointer;
+ user-select: none;
+ color: var(--text);
+}
+
+.navitem[current] {
+ background: var(--theme);
+ color: var(--text-secondary);
+}
+
+.title {
+ font-size: 3em;
+ color: var(--text);
+ text-align: center;
+ margin-top: 180px;
+ font-weight: bold;
+ margin-top: 10rem;
+}
+
+.message {
+ text-align: center;
+ color: var(--text);
+ font-size: 1.5rem;
+ margin: 1rem;
+}
+
+.homemessage {
+ cursor: pointer;
+ width: fit-content;
+ user-select: none;
+}
+
+.play-link {
+ width: fit-content;
+ display: block;
+}
+
+.play {
+ height: 30px;
+ padding: 20px 15px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--theme);
+ font-size: 1rem;
+ border-radius: 15px;
+ cursor: pointer;
+ margin-bottom: 10rem;
+ user-select: none;
+ border: none;
+ color: var(--text-secondary);
+ transition: transform 0.1s;
+}
+
+.play:hover {
+ transform: scaleX(1.4) scaleY(1.4) rotate(9deg);
+}
+
+a {
+ text-decoration: none;
+ color: #0084ff;
+}
+
+footer {
+ color: var(--text);
+ text-align: center;
+ margin-top: auto;
+ margin-bottom: 5px;
+}
+
+.searchbar {
+ height: 40px;
+ border: none;
+ background: var(--theme);
+ outline: none;
+ font-size: 1rem;
+ border-radius: 15px;
+ padding: 0 15px;
+ margin: 1rem;
+ width: 40rem;
+ color: var(--text-secondary);
+ max-width: calc(100% - 4rem);
+}
+
+.games {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, 200px);
+ justify-content: space-between;
+ grid-gap: 2rem;
+ margin: 1rem 2rem 2rem 2rem;
+}
+
+.game {
+ height: 240px;
+ width: 200px;
+ background: var(--theme);
+ color: var(--text);
+ text-decoration: none;
+ border-radius: 15px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ justify-content: center;
+ -webkit-user-select: none;
+ user-select: none;
+ position: relative;
+ transition: transform 0.1s;
+}
+
+.game:hover {
+ transform: scale(0.9);
+}
+
+.game[hidden] {
+ display: none;
+}
+
+.game-image {
+ background: var(--theme);
+ object-fit: cover;
+ height: 200px;
+ width: 200px;
+ border-radius: 15px 15px 0 0;
+}
+
+.game-text {
+ line-height: 40px;
+ width: 200px;
+ text-align: center;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: var(--text-secondary);
+ padding: 0 10px;
+ font-size: 18px;
+}
+
+.nogames {
+ color: var(--text);
+ margin: 0 2rem;
+ margin-top: -2rem;
+ text-align: center;
+ display: none;
+}
+
+.section-title {
+ color: var(--text);
+ font-size: 1.5rem;
+ margin: 1rem;
+}
+
+.section-text {
+ color: var(--text);
+ font-size: 1rem;
+ margin: 0 1rem;
+}
+
+.section-text p {
+ font-size: 18px;
+}
+
+.section-text a {
+ color: var(--theme);
+}
+
+.buttons {
+ display: flex;
+ gap: 10px;
+ margin: 0 1rem;
+ user-select: none;
+ flex-wrap: wrap;
+}
+
+.button {
+ background: var(--theme);
+ width: fit-content;
+ padding: 10px;
+ border-radius: 15px;
+ cursor: pointer;
+ color: var(--text-secondary);
+ border: 0;
+}
+
+.input {
+ border: none;
+ background: var(--theme);
+ width: 200px;
+ padding: 10px;
+ border-radius: 15px;
+ outline: none;
+ color: var(--text-secondary);
+}
+
+.play-link {
+ width: fit-content;
+ display: block;
+}
+
+.reviews-link {
+ height: 30px;
+ padding: 20px 15px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--theme);
+ font-size: 1rem;
+ border-radius: 40px;
+ cursor: pointer;
+ margin-bottom: 10rem;
+ user-select: none;
+ border: none;
+ color: var(--text-secondary);
+ width: fit-content;
+ position: absolute;
+ bottom: 1rem;
+ right: 0;
+ left: 0;
+ margin: 0 auto;
+}
+
+#reviews {
+ margin-top: 26rem;
+ visibility: hidden;
+ height: 382px;
+}
+
+.review-container {
+ display: flex;
+}
+
+.review {
+ background: var(--theme);
+ width: 200px;
+ height: 350px;
+ margin: 1rem;
+ border-radius: 15px;
+}
+
+.review-img {
+ border-radius: 50%;
+ width: 124px;
+ height: 124px;
+ display: flex;
+ margin: 0 auto;
+ margin-top: 1rem;
+}
+
+.review-name {
+ color: var(--text-secondary);
+ font-size: 1.5rem;
+ text-align: center;
+ margin: 0.5rem;
+ overflow: hidden;
+ height: 29.6px;
+}
+
+.review-content {
+ margin: 0 10px;
+ text-align: center;
+ overflow: hidden;
+ height: 44%;
+ color: var(--text-secondary);
+}
+
+.review-placeholder {
+ width: 200px;
+ height: 350px;
+ margin: 1rem;
+ border-radius: 15px;
+ opacity: 0;
+ user-select: none;
+ pointer-events: none;
+}
+
+[class^="number-slide"],
+[class*=" number-slide"] {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.navigation-wrapper {
+ position: relative;
+}
+
+.arrow {
+ width: 30px;
+ height: 30px;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
+ fill: #fff;
+ cursor: pointer;
+}
+
+.arrow--left {
+ left: 5px;
+ fill: "#fff";
+ background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24' %3E%3Cpath d='M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z' %3E%3C/path%3E%3C/svg%3E");
+}
+
+.arrow--right {
+ left: auto;
+ right: 5px;
+ background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24' %3E%3Cpath d='M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z'%3E%3C/path%3E%3C/svg%3E");
+}
+
+.arrow--disabled.arrow--left {
+ background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='grey' viewBox='0 0 24 24' %3E%3Cpath d='M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z' %3E%3C/path%3E%3C/svg%3E");
+}
+
+.arrow--disabled.arrow--right {
+ background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='grey' viewBox='0 0 24 24' %3E%3Cpath d='M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z'%3E%3C/path%3E%3C/svg%3E");
+}
+
+.version-warning {
+ color: var(--theme);
+ display: none;
+}
+
+.spinner {
+ display: inline-block;
+ color: var(--theme);
+ animation: 1.4s linear 0s infinite normal none running animation-61bdi0;
+ width: 80px;
+ height: 80px;
+ margin: 0 auto;
+ margin-top: 2rem;
+}
+
+.spinnerSvg {
+ stroke: currentColor;
+ stroke-dasharray: 80px, 200px;
+ stroke-dashoffset: 0;
+ -webkit-animation: animation-1p2h4ri 1.4s ease-in-out infinite;
+ animation: animation-1p2h4ri 1.4s ease-in-out infinite;
+}
+
+@keyframes animation-61bdi0 {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+.saveItems {
+ display: flex;
+ gap: 10px;
+ padding-left: 2rem;
+}
+
+.hiddenUpload {
+ display: none;
+}
+
+.uploadResult {
+ display: none;
+ color: var(--theme);
+ display: flex;
+ align-items: center;
+}
+
+.changelog-item {
+ display: flex;
+ width: fit-content;
+ border-radius: 2.5px;
+ margin: 1em 0;
+}
+
+.changelog-type {
+ padding: 0 0.5rem;
+ border-radius: 30px;
+ margin-right: 0.5rem;
+ user-select: none;
+ font-size: 13px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.changelog-type[added] {
+ background: #21bd01;
+ color: white;
+}
+
+.changelog-type[added]::before {
+ content: "Added";
+}
+
+.changelog-type[removed] {
+ background: #ff0000;
+ color: white;
+}
+
+.changelog-type[removed]::before {
+ content: "Removed";
+}
+
+.changelog-type[changed] {
+ background: #ff7b00;
+ color: white;
+}
+
+.changelog-type[changed]::before {
+ content: "Changed";
+}
+
+.hii {
+ color: var(--theme);
+ margin: 1rem;
+ margin-left: 2rem;
+}
+
+.alien {
+ border: none;
+ margin: 1rem auto;
+}
+
+input[type="color"] {
+ background: var(--text);
+ border: none;
+ border-radius: 5px;
+ outline: none;
+ padding: 2px;
+}
+
+.bookmarklet {
+ margin-bottom: 50px;
+}
+
+.content {
+ margin-left: 50px;
+ margin-bottom: 50px;
+}
\ No newline at end of file
diff --git a/css/themes.css b/css/themes.css
new file mode 100644
index 0000000..892851c
--- /dev/null
+++ b/css/themes.css
@@ -0,0 +1,163 @@
+body[theme="default"] {
+ --background: #1c1c1c;
+ --theme: #4caf50;
+ --text: white;
+ --text-secondary: black;
+}
+
+body[theme="light"] {
+ --background: white;
+ --theme: #4caf50;
+ --text: black;
+ --text-secondary: black;
+}
+
+body[theme="orchid"] {
+ --background: #1c1c1c;
+ --theme: #b625cc;
+ --text: white;
+ --text-secondary: white;
+}
+
+body[theme="sky"] {
+ --background: #1c1c1c;
+ --theme: #0084ff;
+ --text: white;
+ --text-secondary: black;
+}
+
+body[theme="winter"] {
+ --background: linear-gradient(to right, #2377a4, #79c0d7), #79c0d7;
+ --theme: #3da341;
+ --text: white;
+ --text-secondary: white;
+}
+
+body[theme="winter"] .navbar {
+ box-shadow: none;
+}
+
+body[theme="nebelung"] {
+ --background: #dabc9a;
+ --text: black;
+ --text-secondary: white;
+ --theme: linear-gradient(to right, #3d2d1e, #190f05);
+}
+
+body[theme="nebelung"] .navbar {
+ box-shadow: 0 5px 200px #3d2d1e;
+ animation: nebelungBreathing 5s ease-out infinite normal;
+}
+
+body[theme="piplup"] {
+ --background: #5bacee;
+ --theme: #0026ff;
+ --text: white;
+ --text-secondary: black;
+}
+
+@keyframes nebelungBreathing {
+ 0% {
+ box-shadow: 0 5px 170px #3d2d1e;
+ }
+
+ 25% {
+ box-shadow: 0 5px 200px #3d2d1e;
+ }
+
+ 60% {
+ box-shadow: 0 5px 170px #3d2d1e;
+ }
+
+ 100% {
+ box-shadow: 0 5px 170px #3d2d1e;
+ }
+}
+
+@-webkit-keyframes nebelungBreathing {
+ 0% {
+ box-shadow: 0 5px 170px #3d2d1e;
+ }
+
+ 25% {
+ box-shadow: 0 5px 200px #3d2d1e;
+ }
+
+ 60% {
+ box-shadow: 0 5px 170px #3d2d1e;
+ }
+
+ 100% {
+ box-shadow: 0 5px 170px #3d2d1e;
+ }
+}
+
+
+body[theme="forternish"] {
+ --background: #003443;
+ --theme: linear-gradient(15deg, #82c4e4, #60f108);
+ --text: white;
+ --text-secondary: black;
+}
+
+body[theme="forternish"] * {
+ font-family: Comic Sans MS;
+}
+
+body[theme="northernfish"] {
+ --background: linear-gradient(to bottom right, #91fa9e, #0ec9f8);
+ --theme: #3778ff;
+ --text: black;
+ --text-secondary: black;
+}
+
+body[theme="northernfish"] .navbar {
+ box-shadow: none !important;
+}
+
+body[theme="northernfish"] .navitems {
+ background: transparent;
+}
+
+body[theme="northernfish"]::-webkit-scrollbar {
+ background: #0ec9f8;
+}
+
+body[theme="forgor"] {
+ --background: #efefef;
+ --theme: #d7d700;
+ --text: #d7d700;
+ --text-secondary: #efefef;
+}
+
+body[theme="monotonium"] {
+ --background: white;
+ --theme: black;
+ --text: black;
+ --text-secondary: white;
+}
+
+body[theme="monotonium-dark"] {
+ --background: black;
+ --theme: white;
+ --text: white;
+ --text-secondary: black;
+}
+
+body[theme="concrete"] {
+ --background: gray;
+ --theme: white;
+ --text: white;
+ --text-secondary: grey;
+}
+
+body[theme="sunset"] {
+ --background: #1c1c1c;
+ --theme: #e83141;
+ --text: white;
+ --text-secondary: black;
+}
+
+html,body {
+ color: var(--text);
+}
\ No newline at end of file
diff --git a/js/about.js b/js/about.js
new file mode 100644
index 0000000..cd561c0
--- /dev/null
+++ b/js/about.js
@@ -0,0 +1,62 @@
+(async () => {
+ var version = document.getElementById("version");
+ var versionWarning = document.getElementById("version-warning");
+
+ var currentVersion;
+ var latestVersion;
+
+ try {
+ var infoFetch = await fetch(location.origin + "/info.json");
+ try {
+ var infoResult = await infoFetch.json();
+ if (infoResult.version) {
+ currentVersion = infoResult.version;
+ }
+ } catch {}
+ } catch {}
+
+ try {
+ var infoFetch = await fetch("https://raw.githack.com/3kh0/3kh0.github.io/main/info.json");
+ try {
+ var infoResult = await infoFetch.json();
+ if (infoResult.version) {
+ latestVersion = infoResult.version;
+ }
+ } catch {}
+ } catch {}
+
+ if (currentVersion) {
+ version.innerText = "You are on version " + currentVersion;
+ } else {
+ version.innerText = "Cannot get current version.";
+ }
+
+ var oldMessage = "Warning: You are on a older version. The current version is %VERSION%"
+ var betaMessage = "You are on a pre-release version! The current release is %VERSION%"
+ var otherMessage = "You not on the currently released version. The current release is %VERSION%"
+
+ if (latestVersion && currentVersion !== latestVersion) {
+ var latestVersionNumber = latestVersion.replace("v", "").replaceAll("-", ".")
+ var firstStr = latestVersionNumber.search(/\./) + 1
+ latestVersionNumber = Number(latestVersionNumber.substr(0, firstStr) + latestVersionNumber.slice(firstStr).replace(/\./g, ''))
+
+ var currentVersionNumber = currentVersion.replace("v", "").replaceAll("-", ".")
+ var firstStr2 = currentVersionNumber.search(/\./) + 1
+ currentVersionNumber = Number(currentVersionNumber.substr(0, firstStr2) + currentVersionNumber.slice(firstStr2).replace(/\./g, ''))
+
+ var message;
+
+ if (isNaN(latestVersionNumber) || isNaN(currentVersionNumber)) {
+ message = otherMessage
+ } else {
+ if (currentVersionNumber > latestVersionNumber) {
+ message = betaMessage
+ } else {
+ message = oldMessage
+ }
+ }
+
+ versionWarning.innerText = betaMessage.replace("%VERSION%", latestVersion);
+ versionWarning.style.display = "block";
+ }
+ })();
diff --git a/js/games-server.js b/js/games-server.js
new file mode 100644
index 0000000..993c694
--- /dev/null
+++ b/js/games-server.js
@@ -0,0 +1,15 @@
+var hasInstalled = false;
+
+navigator.serviceWorker.getRegistrations().then(function (registrations) {
+ for (let registration of registrations) {
+ if (registration.active.scriptURL == location.origin + "/sw.js") {
+ hasInstalled = true;
+ }
+ }
+});
+
+navigator.serviceWorker.register(location.origin + "/sw.js").then(function (reg) {
+ if (!hasInstalled) {
+ window.location.reload();
+ }
+});
diff --git a/js/games.js b/js/games.js
new file mode 100644
index 0000000..1eb4f8e
--- /dev/null
+++ b/js/games.js
@@ -0,0 +1,154 @@
+function searchGames(query) {
+ var gamesElement = document.querySelector(".games");
+
+ for (let game in gamesElement.children) {
+ if (gamesElement.children[game] instanceof Element) {
+ if (query) {
+ var gameName = gamesElement.children[game].querySelector(".game-text").innerText.trim().toLowerCase();
+ if (gameName.includes(query)) {
+ gamesElement.children[game].removeAttribute("hidden");
+ } else {
+ gamesElement.children[game].setAttribute("hidden", "");
+ }
+ } else {
+ gamesElement.children[game].removeAttribute("hidden");
+ }
+ }
+ }
+
+ if (document.querySelectorAll(".game:not([hidden])").length == 0) {
+ document.querySelector(".nogames").style.display = "initial";
+ } else {
+ document.querySelector(".nogames").style.display = "none";
+ }
+ }
+
+ (async () => {
+ var gamesElement = document.querySelector(".games");
+
+ var gamesData = await fetch('./assets/games.json');
+ var games = await gamesData.json();
+
+ for (let game in games) {
+ var newGame = document.createElement("a");
+ newGame.className = "game";
+ newGame.setAttribute("href", games[game].url);
+
+ var gameImage = document.createElement("img");
+ gameImage.className = "game-image";
+ gameImage.src = games[game].img
+ gameImage.setAttribute("onerror", "this.src='./assets/globe.svg'")
+
+ newGame.appendChild(gameImage);
+
+ var gameText = document.createElement("div");
+ gameText.className = "game-text";
+ gameText.innerText = games[game].name;
+
+ newGame.appendChild(gameText);
+
+ gamesElement.appendChild(newGame);
+ }
+
+ document.querySelector(".spinner").style.display = "none";
+ })();
+
+ function getMainSave() {
+ var mainSave = {};
+
+ var localStorageDontSave = ["theme", "tab", "nebelung"];
+
+ localStorageSave = Object.entries(localStorage);
+
+ for (let entry in localStorageSave) {
+ if (localStorageDontSave.includes(localStorageSave[entry][0])) {
+ localStorageSave.splice(entry, 1);
+ }
+ }
+
+ localStorageSave = btoa(JSON.stringify(localStorageSave));
+
+ mainSave.localStorage = localStorageSave;
+
+ cookiesSave = document.cookie;
+
+ cookiesSave = btoa(cookiesSave);
+
+ mainSave.cookies = cookiesSave;
+
+ mainSave = btoa(JSON.stringify(mainSave));
+
+ mainSave = CryptoJS.AES.encrypt(mainSave, "save").toString();
+
+ return mainSave;
+ }
+
+ function downloadMainSave() {
+ var data = new Blob([getMainSave()]);
+ var dataURL = URL.createObjectURL(data);
+
+ var fakeElement = document.createElement("a");
+ fakeElement.href = dataURL;
+ fakeElement.download = "projects.save";
+ fakeElement.click();
+ URL.revokeObjectURL(dataURL);
+ }
+
+ function getMainSaveFromUpload(data) {
+ data = CryptoJS.AES.decrypt(data, "save").toString(CryptoJS.enc.Utf8);
+
+ var mainSave = JSON.parse(atob(data));
+ var mainLocalStorageSave = JSON.parse(atob(mainSave.localStorage));
+ var cookiesSave = atob(mainSave.cookies);
+
+ for (let item in mainLocalStorageSave) {
+ localStorage.setItem(mainLocalStorageSave[item][0], mainLocalStorageSave[item][1]);
+ }
+
+ document.cookie = cookiesSave;
+ }
+
+ function uploadMainSave() {
+ var hiddenUpload = document.querySelector(".hiddenUpload");
+ hiddenUpload.click();
+
+ hiddenUpload.addEventListener("change", function (e) {
+ var files = e.target.files;
+ var file = files[0];
+
+ if (!file) {
+ return;
+ }
+
+ var reader = new FileReader();
+
+ reader.onload = function (e) {
+ getMainSaveFromUpload(e.target.result);
+
+ var uploadResult = document.querySelector(".uploadResult");
+ uploadResult.innerText = "Uploaded save!";
+ uploadResult.style.display = "initial";
+ setTimeout(function () {
+ uploadResult.style.display = "none";
+ }, 3000);
+ };
+
+ reader.readAsText(file);
+ });
+ }
+
+var hiiPattern = ["h", "i", "i"];
+var hiiCurrent = 0;
+
+document.addEventListener("keydown", function (e) {
+ if (e.key !== hiiPattern[hiiCurrent]) {
+ return (hiiCurrent = 0);
+ }
+
+ hiiCurrent++;
+
+ if (hiiPattern.length == hiiCurrent) {
+ hiiCurrent = 0;
+ document.querySelector(".hii").removeAttribute("hidden");
+ }
+});
diff --git a/js/home.js b/js/home.js
new file mode 100644
index 0000000..ec00cb7
--- /dev/null
+++ b/js/home.js
@@ -0,0 +1,46 @@
+var splashCacheAll;
+var splashCache;
+
+async function randomSay() {
+ if (splashCache) {
+ if (!splashCache.length) {
+ splashCache = splashCacheAll;
+ }
+ var says = splashCache;
+ } else {
+ var say = await fetch(location.origin + "/assets/say.json");
+ var says = await say.json();
+ splashCacheAll = says;
+ splashCache = says;
+ }
+
+ var getRandomSay = says[Math.floor(Math.random() * says.length)];
+
+ splashCache = splashCache.filter((splash) => splash !== getRandomSay);
+
+ return getRandomSay;
+}
+
+async function setRandomSay() {
+ var randomSplash = await randomSay();
+ if (randomSplash == "%REAL_IP%") {
+ var ips = await getIPs();
+ if (ips[0]) {
+ randomSplash = "Your real IP is " + ips[0];
+ } else {
+ randomSplash = "Cannot get your real IP :(";
+ }
+ } else if (randomSplash == "%GAMES_NUMBER%") {
+ var gamesFetch = await fetch(location.origin + "/assets/games.json");
+ var games = await gamesFetch.json();
+ randomSplash = "There are " + games.length + " games currently";
+ } else if (randomSplash == "%SPLASH_NUMBER%") {
+ randomSplash = "There are " + splashCacheAll.length + " of these messages!";
+ }
+
+ document.querySelector(".message").innerText = randomSplash;
+}
+
+if (document.querySelector(".message")) {
+ setRandomSay();
+}
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
new file mode 100644
index 0000000..e905cd5
--- /dev/null
+++ b/js/index.js
@@ -0,0 +1,243 @@
+// This is a JavaScript code that implements various functionalities for a web page, such as registering a service worker, registering custom elements, changing the theme of the page, and implementing secret themes.
+// Service Worker Registration:
+// The code first registers a service worker with the path "/sw.js". A Service Worker is a script that acts as a client-side proxy for network requests and can be used for offline support and push notifications.
+
+// Script Loading:
+// The code then loads an external script from "https://cdn.jsdelivr.net/gh/3kh0/3kh0.github.io/js/main.js". The script is added to the head of the document.
+
+// Tab Data Retrieval:
+// The code retrieves tab data from the local storage using localStorage.getItem("tab"). If the tab data exists, it is parsed into a JSON object. If the tab data doesn't exist, an empty object is created.
+
+// Tab Title and Icon Update:
+// If the tab data has a title property, the document title is updated. If the tab data has an icon property, the href attribute of the link element with the rel attribute set to "icon" is updated.
+
+// Color Contrast and Color Hex Functions:
+// The code defines two functions, getContrastHex and getColorHex, which calculate the contrast color and the text color, respectively, based on a given hexadecimal color value.
+
+// Theme Handling:
+// The code retrieves the theme from local storage using localStorage.getItem("theme") or sets the theme to "default" if it does not exist. The themes are defined as an array of objects, each with a theme and a color property.
+
+// Custom Theme:
+// If the theme is set to "custom", the theme color is retrieved from local storage using localStorage.getItem("theme_color"), and the body element is updated with the custom theme color.
+
+// Custom Elements:
+// The code defines three custom elements, Hey everyone!
+ Welcome to v4!
+ This site is a massive upgrade to the 3kh0 website, and is deployable much more easily.
+ You can find the github at https://github.com/3kh0/3kh0.github.io if you want to deploy it for your self or add to it.
+ And at https://discord.gg/3kh0 you can check out our discord server!
+
+ Check out Nebelung's original post at the v4 release blog.
+ We hope you enjoy the site!
+
piplupiscool
+ +
+
+ ${this.innerText}
+
+ `;
+ }
+}
+
+customElements.define("changelog-added", changelogAdded);
+
+class changelogRemoved extends HTMLElement {
+ constructor() {
+ super();
+ this.innerHTML = `
+
+
+ ${this.innerText}
+
+ `;
+ }
+}
+
+customElements.define("changelog-removed", changelogRemoved);
+
+class changelogChanged extends HTMLElement {
+ constructor() {
+ super();
+ this.innerHTML = `
+
+
+ ${this.innerText}
+
+ `;
+ }
+}
+
+customElements.define("changelog-changed", changelogChanged);
+
+function foundSecretTheme(name) {
+ document.body.setAttribute("theme", name);
+ localStorage.setItem("theme", name);
+ localStorage.setItem(name, "true");
+ if (document.querySelector("." + name)) {
+ document.querySelector("." + name).removeAttribute("hidden");
+ }
+}
+
+function secretThemeButton(name) {
+ if (localStorage.getItem(name) == "true") {
+ if (document.querySelector("." + name)) {
+ document.querySelector("." + name).removeAttribute("hidden");
+ }
+ }
+}
+
+function createSecretThemeType(name, pattern) {
+window[name + "pattern"] = pattern;
+window[name + "current"] = 0;
+
+var themePattern = window[name + "pattern"]
+var themeCurrent = window[name + "current"]
+
+document.addEventListener("keydown", function (e) {
+ if (e.key !== themePattern[themeCurrent]) {
+ return (themeCurrent = 0);
+ }
+
+ themeCurrent++;
+
+ if (themePattern.length == themeCurrent) {
+ themeCurrent = 0;
+ foundSecretTheme(name);
+ }
+});
+
+secretThemeButton(name)
+}
+
+createSecretThemeType("nebelung", ["ArrowUp", "ArrowUp", "ArrowDown", "ArrowDown", "ArrowLeft", "ArrowRight", "ArrowLeft", "ArrowRight", "b", "a"])
+createSecretThemeType("piplup", ["p", "i", "p", "l", "u", "p", "i", "s", "c", "o", "o", "l"])
+createSecretThemeType("forternish", ["c", "o", "m", "i", "c", "s", "a", "n", "s"])
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..4fcaef3
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,47 @@
+// Hello there!
+//
+// If you want to add my games to your site, please reach out at my email: echo-the-coder@tuta.io, or discord: 3kh0_#6969
+
+console.warn(
+ "%cNote!",
+ "color: purple; font-weight: 600; background: yellow; padding: 0 5px; border-radius: 5px",
+ "If you want to add my games to your site, please reach out at my email: echo-the-coder@tuta.io\nPlease do not just add them without asking me first! Thank you!"
+);
+
+function script(text) {
+ console.log("%cScript Injection", "color: cyan; font-weight: 600; background: black; padding: 0 5px; border-radius: 5px", text);
+}
+
+// ====================================
+// SCRIPT INJECTION
+// ====================================
+const gogascript27 = document.createElement("script");
+gogascript27.setAttribute("async", "");
+gogascript27.setAttribute("src", "https://www.googletagmanager.com/gtag/js?id=G-98DP5VKS42");
+const inlinegogascript843 = document.createElement("script");
+inlinegogascript843.innerHTML = `window.dataLayer = window.dataLayer || [];
+ function gtag(){dataLayer.push(arguments);}
+ gtag('js', new Date());
+ gtag('config', 'G-98DP5VKS42');`;
+document.head.append(gogascript27, inlinegogascript843);
+script("Injected script 1/4 (Google Tag Manager)");
+
+const arcbroker23 = document.createElement("script");
+arcbroker23.setAttribute("async", "");
+arcbroker23.setAttribute("src", "https://arc.io/widget.min.js#eRPHFgiC");
+document.head.append(arcbroker23);
+script("Injected script 2/4 (Widget stuff)");
+
+const adblockhandle44 = document.createElement("script");
+adblockhandle44.setAttribute("src", "https://fundingchoicesmessages.google.com/i/pub-5756835229788588?ers=1");
+adblockhandle44.setAttribute("nonce", "yibq-w_TR5NOCRWsU-VL0Q");
+adblockhandle44.setAttribute("async", "");
+document.head.append(adblockhandle44);
+script("Injected script 3/4 (Ad stuff)");
+
+const adscipterz92 = document.createElement("script");
+adscipterz92.setAttribute("async", "");
+adscipterz92.setAttribute("src", "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5756835229788588");
+adscipterz92.setAttribute("crossorigin", "anonymous");
+document.head.append(adscipterz92);
+script("Injected script 4/4 (Ad stuff)");
diff --git a/js/reviews.js b/js/reviews.js
new file mode 100644
index 0000000..3f004a9
--- /dev/null
+++ b/js/reviews.js
@@ -0,0 +1,162 @@
+(async () => {
+ var reviewsElement = document.getElementById("my-keen-slider");
+
+ var reviewsData = await fetch('./assets/reviews.json');
+ var reviews = await reviewsData.json();
+
+ for (let i = reviews.length - 1; i > 0; i--) {
+ const j = Math.floor(Math.random() * (i + 1));
+ [reviews[i], reviews[j]] = [reviews[j], reviews[i]];
+ }
+
+ var reviewsGroups = reviews.reduce((r, e, i) => (i % 3 ? r[r.length - 1].push(e) : r.push([e])) && r, []);
+
+ var lastReviewGroup = reviewsGroups[reviewsGroups.length - 1];
+
+ if (lastReviewGroup) {
+ if (lastReviewGroup.length == 1) {
+ lastReviewGroup.push({
+ placeholder: true,
+ });
+
+ lastReviewGroup.push({
+ placeholder: true,
+ });
+ }
+
+ if (lastReviewGroup.length == 2) {
+ lastReviewGroup.push({
+ placeholder: true,
+ });
+ }
+ }
+
+ for (let reviewsGroup in reviewsGroups) {
+ var newSlide = document.createElement("div");
+ newSlide.className = "keen-slider__slide number-slide" + Number(Number(reviewsGroup) + 1);
+
+ var reviewContainer = document.createElement("div");
+ reviewContainer.className = "review-container";
+
+ for (let review in reviewsGroups[reviewsGroup]) {
+ if (!reviewsGroups[reviewsGroup][review].placeholder) {
+ var newReview = document.createElement("div");
+ newReview.className = "review";
+
+ var reviewImg = document.createElement("img");
+ reviewImg.className = "review-img";
+ reviewImg.src = reviewsGroups[reviewsGroup][review].img;
+ newReview.appendChild(reviewImg);
+
+ var reviewName = document.createElement("div");
+ reviewName.className = "review-name";
+ reviewName.innerText = reviewsGroups[reviewsGroup][review].name;
+ newReview.appendChild(reviewName);
+
+ var reviewContent = document.createElement("div");
+ reviewContent.className = "review-content";
+ reviewContent.innerText = reviewsGroups[reviewsGroup][review].review;
+ newReview.appendChild(reviewContent);
+ } else {
+ var newReview = document.createElement("div");
+ newReview.className = "review-placeholder";
+ }
+
+ reviewContainer.appendChild(newReview);
+ }
+
+ newSlide.appendChild(reviewContainer);
+
+ reviewsElement.appendChild(newSlide);
+ }
+
+ function navigation(slider) {
+ let wrapper, dots, arrowLeft, arrowRight;
+
+ function markup(remove) {
+ wrapperMarkup(remove);
+ dotMarkup(remove);
+ arrowMarkup(remove);
+ }
+
+ function removeElement(elment) {
+ elment.parentNode.removeChild(elment);
+ }
+ function createDiv(className) {
+ var div = document.createElement("div");
+ var classNames = className.split(" ");
+ classNames.forEach((name) => div.classList.add(name));
+ return div;
+ }
+
+ function arrowMarkup(remove) {
+ if (remove) {
+ removeElement(arrowLeft);
+ removeElement(arrowRight);
+ return;
+ }
+ arrowLeft = createDiv("arrow arrow--left");
+ arrowLeft.addEventListener("click", () => slider.prev());
+ arrowRight = createDiv("arrow arrow--right");
+ arrowRight.addEventListener("click", () => slider.next());
+
+ wrapper.appendChild(arrowLeft);
+ wrapper.appendChild(arrowRight);
+ }
+
+ function wrapperMarkup(remove) {
+ if (remove) {
+ var parent = wrapper.parentNode;
+ while (wrapper.firstChild) parent.insertBefore(wrapper.firstChild, wrapper);
+ removeElement(wrapper);
+ return;
+ }
+ wrapper = createDiv("navigation-wrapper");
+ document.getElementById("reviews").appendChild(wrapper);
+ wrapper.appendChild(slider.container);
+ }
+
+ function dotMarkup(remove) {
+ if (remove) {
+ removeElement(dots);
+ return;
+ }
+ dots = createDiv("dots");
+ slider.track.details.slides.forEach((_e, idx) => {
+ var dot = createDiv("dot");
+ dot.addEventListener("click", () => slider.moveToIdx(idx));
+ dots.appendChild(dot);
+ });
+ wrapper.appendChild(dots);
+ }
+
+ function updateClasses() {
+ var slide = slider.track.details.rel;
+ slide === 0 ? arrowLeft.classList.add("arrow--disabled") : arrowLeft.classList.remove("arrow--disabled");
+ slide === slider.track.details.slides.length - 1 ? arrowRight.classList.add("arrow--disabled") : arrowRight.classList.remove("arrow--disabled");
+ Array.from(dots.children).forEach(function (dot, idx) {
+ idx === slide ? dot.classList.add("dot--active") : dot.classList.remove("dot--active");
+ });
+ }
+
+ slider.on("created", () => {
+ markup();
+ updateClasses();
+ document.getElementById("reviews").style.visibility = "initial";
+ });
+ slider.on("optionsChanged", () => {
+ console.log(2);
+ markup(true);
+ markup();
+ updateClasses();
+ });
+ slider.on("slideChanged", () => {
+ updateClasses();
+ });
+ slider.on("destroyed", () => {
+ markup(true);
+ });
+ }
+
+ var slider = new KeenSlider("#my-keen-slider", {}, [navigation]);
+})();
diff --git a/js/settings.js b/js/settings.js
new file mode 100644
index 0000000..44936b3
--- /dev/null
+++ b/js/settings.js
@@ -0,0 +1,99 @@
+var tab = localStorage.getItem("tab");
+if (tab) {
+ try {
+ var tabData = JSON.parse(tab);
+ } catch {
+ var tabData = {};
+ }
+} else {
+ var tabData = {};
+}
+if (tabData.title) {
+ document.getElementById("title").value = tabData.title;
+}
+if (tabData.icon) {
+ document.getElementById("icon").value = tabData.icon;
+}
+
+var settingsDefaultTab = {
+ title: "Settings | 3kh0",
+ icon: "./images/logo.png",
+};
+
+function setTitle(title = "") {
+ if (title) {
+ document.title = title;
+ } else {
+ document.title = settingsDefaultTab.title;
+ }
+
+ var tab = localStorage.getItem("tab");
+ if (tab) {
+ try {
+ var tabData = JSON.parse(tab);
+ } catch {
+ var tabData = {};
+ }
+ } else {
+ var tabData = {};
+ }
+ if (title) {
+ tabData.title = title;
+ } else {
+ delete tabData.title;
+ }
+ localStorage.setItem("tab", JSON.stringify(tabData));
+}
+
+function setFavicon(icon) {
+ if (icon) {
+ document.querySelector("link[rel='icon']").href = icon;
+ } else {
+ document.querySelector("link[rel='icon']").href = settingsDefaultTab.icon;
+ }
+
+ var tab = localStorage.getItem("tab");
+ if (tab) {
+ try {
+ var tabData = JSON.parse(tab);
+ } catch {
+ var tabData = {};
+ }
+ } else {
+ var tabData = {};
+ }
+ if (icon) {
+ tabData.icon = icon;
+ } else {
+ delete tabData.icon;
+ }
+ localStorage.setItem("tab", JSON.stringify(tabData));
+}
+
+function resetTab() {
+ document.title = settingsDefaultTab.title;
+ document.querySelector("link[rel='icon']").href = settingsDefaultTab.icon;
+ document.getElementById("title").value = "";
+ document.getElementById("icon").value = "";
+ localStorage.setItem("tab", JSON.stringify({}));
+}
+
+function setTheme(theme) {
+ localStorage.setItem("theme", theme);
+ document.body.setAttribute("theme", theme);
+ document.body.style = '';
+ localStorage.removeItem('theme_color');
+
+ themes.forEach(palette => {
+ if (palette.theme == theme) {
+ document.querySelector('#theme_color').value = palette.color;
+ }
+ });
+}
+
+function setThemeColor(theme) {
+ localStorage.setItem('theme', 'custom');
+ localStorage.setItem('theme_color', theme);
+ document.body.setAttribute('theme', 'custom');
+ document.body.style = `--theme: ${theme}; --background: ${getContrastHex(theme)}; --text: ${getColorHex(theme)}; --text-secondary: ${getColorHex(theme)};`;
+}