The concept for this page is to be a live infographic showing relatime stats for the van in its current state, however, i dont really want my current state to be publicly available, so its a bit of a strange project to want things and not want things at the same time. i mayhave to give up my privacy to make this happen. but it would be super cool.
I will be using the d3 library to make it work, and built it up slowly, piece by piece.
Honestly i just need to put my thoughts down onto the page for this one.
the idea is that it will be an mildly interactive comic script where the panels are animated into shot, and animated out of shot, using very simple moving cards like technique, similar to yellow sumbarine, or southpark, or kursgesagt, obviously with a different art style.
the timeline will be controlled by scrolling down the page, with pictures sliding in and out of frame, and speech bubbles popping in and out as you scroll.
The story is that you have come here by accident via dns poisoning, that this is intentional and to provide some learning opportunities around DNS poisoning and how someone can sniff traffic coming from your pc and scrape data from the connection to know where you are going, and what you are doing. which is why things like https, VPN's etc are very important for modern internet users to be able to protect themselves.
The first initial frame of the animation needs to be the most gripping in terms of eye catching and making the user wish to know more, but it also needs to convey that scrolling down is necessary to continue.
i want it to look like an error page, with something like an acknowledgement that this isnt the page you were looking for, maybe even incorporating their requested page into the text on th screen,
Use the GET request location text, display the main narrator with a magnifying glass searching for the text with a speech bubble explaining that they are unable to find it and scrolling down would be the best way to fin out why.
I want the page to load incrementally as you scroll rather than all at once, so that it can appear super fast, then lazily load the remainder if scrolling happens. I'm going to have to learn how to do that anyway for hyperion as its page is too large aready and its historical data shouldnt all come in at once.
I want the style to be like the ride in jurassic park, or one of kurzgesagt's videos, a bad infomercial with lame chracters
part of the elements i want to incorporate into the animation i want t be live graphs of things that are happening built with d3, pulling real world data from my background scripts and pushed to the users connection. things like bandwidth graphs, console output, file trees etc. some of this data may have been collected already and i will just want to display it as if its happening in real time, so perhaps a logging format for my scripts that incorporates a timestamp so that it can be played back in the browser.
I want animated diagrams of how things are physically connected, showing how the network and i want to use this overlayed with a vpn structure to show how it bypasses all of the physical sniffers, what is still available for people and what is not.
I want to discuss encryption, how it works, and how it can be used by everyday people, provide links and instruction on how to get it up. it would be nice to have a link to this website which is stripped of the invasive things that exists online.
It would be nice to have an app that alerts when you are being scanned. something that can sit in the tray, allow you to set thresholds for observation, etc. looks like on linux psad might be a tool to help learn about it.
One of the dangers that i face as being an open target for hackers, i need to make sure that my own security is upto scratch, i guess that in part due to the difficulty of setting something like this up it will help inform me of the things i also need to look out for. secure my laptop from myself as it were.
The attack i want to be fast and brutal, since i know nothing about security research my only thoughts on the matter are to have a list of common attack vectors that is updated everytime someone connects to me, implement a sort of priority list of ports and information gathering methods that is used to quickly gather as much information about a host as possible. I dont want to venture into any illegal territory so only things that are available through defaults and what they can be prompted to give me.
Using the information i gather, with my backend internet connection perhaps try to find out more about them.
There is the chance that i might be able to find out dangerous information, however small. I definitely need a mechanism for reporting to authorities for any grossly dangerous content. people are fucked in the head.
Create an interactive timeline with basic shapes flying in and out of the page, make the page load incremetally, and have it kick off a script on the server that takes the hosts ip and puts it in a file that can be used to display back to the user.