My websites code

This is a custom desktop environment built for personal websites, because the modern web is boring.

I did not use AI to make this website

features

Fake systemd like boot:

boot.mp4

User login page:

login.mp4

Window manager:

window_manager.mp4

Custom apps:

apps-compressed.mp4

Theming:

theme.mp4

Digital guestbook:

guestbook.mp4

I removed almost all the code relating to my myself in this repo(eg: personal blogs, about me page, github links), so you can make your own fake desktop enviroment using this template to make it unique to yourself. If you want to see what can be done: visit my website at https://isopodheaven.com

Install

download:

git clone https://github.com/beee33/web-computer
cd web-computer

I kept my code for my guestbook https://isopodheaven.com/guestbook.html but removed all assocaitons to my website. If you would want to implement it, go to: Enabling the Guestbook. If you dont want to do that, you can just delete any file with the word guestbook in it. The website will not break:

rm  *guestbook*

Running

You can just plop this into any web server eg: apache or nginx.

For testing you can use npx instead:

npx http-server ./ -o -p 9999 

Adding your own app

In order to create you own app. you need to edit main_thread.js and make a new applicaiton using make_application()
where the first parameter is application id, then the name of the function, titlebar name, file path of icon, location on desktop, application type( the only option is app), as well as the function envoked when the user clicks on the icon.

like this:

make_application("favorite_hobbies","make_hobby_window()","My Hobbies","/desktop_icons/hobbies.jpg",[1,1],"app",function() {make_hobby_window()});

After that, you need to make make_hobby_window also in main_thread.js function like this:

function make_hobby_window() {
	var html = `<div class="text_color" style="color:rgb(`+cur_theme[3][0]+`,`+cur_theme[3][1]+`,`+cur_theme[3][2]+`);">about me</div>`
	var win_id = make_window(null,null,500,300,"Hobbies",html);
	add_icons_to_task_bar(win_id,"favorite_hobbies");
}

The first two parmeters in make_window are x and y positions, leaving them both null makes it go to the center of the screen. The third parmeter is the window width. The fourth parmeter is the window height. Both are numbers representing pixels. The last parameter is the html that will be put into the window.

Styling

These are the divs you need to add in order for your text and backgrounds inside your window to match the theme.

text inside window borders:

<div class ="sel_color" color:rgb(`+cur_theme[2][0]+`,`+cur_theme[2][1]+`,`+cur_theme[2][2]+`);">

window border color:

<div class ="sec_color" style="background-color:rgb(`+cur_theme[1][0]+`,`+cur_theme[1][1]+`,`+cur_theme[1][2]+`)"></div> 

text color inside windows:

<div class="text_color" style="color:rgb(`+cur_theme[3][0]+`,`+cur_theme[3][1]+`,`+cur_theme[3][2]+`);"></div>

background color in windows:

<div class="main_color" style="background-color:rgb(`+cur_theme[0][0]+`,`+cur_theme[0][1]+`,`+cur_theme[0][2]+`)">

Configuration

most things are stored in config.js. The rest(like ascii icons) on the first few lines of main_thread.js.

Enabling The guestbook

todo