Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

New blue background on browser homepage, nicer windows buttons and app button! #8

Open
wants to merge 23 commits into
base: main
Choose a base branch
from
Open

New blue background on browser homepage, nicer windows buttons and app button! #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
47e3b17
f
NINJACLUBREAL Aug 17, 2024
4ab5615
br
NINJACLUBREAL Aug 17, 2024
e92ac94
bghjhj
NINJACLUBREAL Aug 17, 2024
768fc7b
b
NINJACLUBREAL Aug 17, 2024
2229e7f
grt
NINJACLUBREAL Aug 17, 2024
2fdcb8d
try to fix error :(
NINJACLUBREAL Aug 17, 2024
ac67e8f
Error With Window Buttons Fi xed! :D
NINJACLUBREAL Aug 17, 2024
d4dc0a3
juhi
NINJACLUBREAL Aug 17, 2024
1cf9d2c
opps i forgot px
NINJACLUBREAL Aug 17, 2024
63c2d56
HC
NINJACLUBREAL Aug 17, 2024
644d97d
ad whats new button (it does nto work yet)
NINJACLUBREAL Aug 17, 2024
7d69726
adding what new app
NINJACLUBREAL Aug 17, 2024
663e3ed
no whats new app
NINJACLUBREAL Aug 17, 2024
890fa61
s
NINJACLUBREAL Aug 17, 2024
fa9c894
fhnic
NINJACLUBREAL Aug 17, 2024
4efd04d
Update BIOS
NINJACLUBREAL Aug 17, 2024
f8ffc1e
new fullscreen button for window icon!
NINJACLUBREAL Aug 17, 2024
4687189
Update README.md
NINJACLUBREAL Sep 6, 2024
c9bee68
Windows Button Shape Better nOw :D
NINJACLUBREAL Oct 6, 2024
d7555b9
windows shape smaller curves
NINJACLUBREAL Oct 6, 2024
646dd57
make window more round
NINJACLUBREAL Oct 6, 2024
5965cee
more good stuff :D
NINJACLUBREAL Oct 6, 2024
6cf8ee6
new 'blue' color for browser homepage background!
NINJACLUBREAL Oct 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

Pulsar OS is a revolutionary, fully functional browser-based operating system that brings the desktop experience to your web browser. Developed by Talkomatic, this innovative project offers a complete OS environment, including a boot-up sequence, BIOS, login screen, and a feature-rich OS interface.

[![Join our Discord](https://img.shields.io/discord/YOUR_DISCORD_SERVER_ID?color=7289DA&logo=discord&logoColor=white)](https://discord.gg/AY7Bk6zgze)
[![Join our Discord](https://img.shields.io/discord/YOUR_DISCORD_SERVER_ID?color=7289DA&logo=discord&logoColor=white)](https://discord.gg/BPjdh7cCnD)
[![Reddit Community](https://img.shields.io/reddit/subreddit-subscribers/talkomatic?style=social)](https://www.reddit.com/r/talkomatic/)

## Table of Contents
Expand Down
6 changes: 3 additions & 3 deletions bios.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TalkoBrowser BIOS</title>
<title>Pulsar OS BIOS</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
/* Import font */
Expand Down Expand Up @@ -257,7 +257,7 @@
<body>
<div id="bios-screen">
<div id="header">
<div>TalkoBrowser BIOS v4.0</div>
<div>Pulsar OS BIOS</div>
<div id="tabs">
<div class="tab active" data-tab="main">Main</div>
<div class="tab" data-tab="advanced">Advanced</div>
Expand Down Expand Up @@ -304,7 +304,7 @@
<table>
<tr><th colspan="2">System Information</th></tr>
<tr><td>CPU</td><td>AMD Ryzen 9 7950X3D 16-Core {cpuSpeed} MHz</td></tr>
<tr><td>Memory</td><td>{memorySize} GB DDR5-6000</td></tr>
<tr><td>Memory</td><td>{memorySize} MB DDR5-6000</td></tr>
<tr><td>GPU</td><td>NVIDIA GeForce RTX 4090 24GB GDDR6X</td></tr>
<tr><td>BIOS Version</td><td>5.2.1</td></tr>
<tr><td>BIOS Date</td><td>07/15/2024</td></tr>
Expand Down
18 changes: 17 additions & 1 deletion js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const windows = {
let highestZIndex = 100;
let clickTimeout = null;

// Desktop grid configuration
// Desktop grid configuration! trye
const gridSize = 80; // Size of each grid cell in pixels
let desktopGrid = [];

Expand Down Expand Up @@ -362,4 +362,20 @@ scripts.forEach(script => {
const scriptElement = document.createElement('script');
scriptElement.src = script;
document.body.appendChild(scriptElement);
});


// what is now pop up script :)
document.getElementById('openPopupBtn').addEventListener('click', function() {
document.getElementById('popup').style.display = 'flex';
});

document.querySelector('.close-new').addEventListener('click', function() {
document.getElementById('popup').style.display = 'none';
});

window.addEventListener('click', function(event) {
if (event.target === document.getElementById('popup')) {
document.getElementById('popup').style.display = 'none';
}
});
101 changes: 80 additions & 21 deletions os.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,37 @@
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
/* whats new pop up */
/* styles.css */
.popup {
display: none; /* Hidden by default */
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
justify-content: center;
align-items: center;
}

.popup-content {
background-color: white;
padding: 20px;
border-radius: 5px;
width: 800px;
height: 500px;
text-align: center;
}

.close-new {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
}


:root {
--color-dark: #646464;
Expand All @@ -35,7 +66,7 @@
background-color: var(--color-medium);
border: 2px solid var(--color-accent);
box-shadow: 0 0 10px rgb(0, 187, 255);
border-radius: 25px;
border-radius: 15px;
}

.title-bar {
Expand All @@ -46,32 +77,32 @@
.window-btn1 {
background: yellow;
color: yellow;
border-radius: 25px;
border-radius: 5px;
}
.window-btn2 {
background: rgb(0, 255, 21);
color: rgb(0, 255, 21);
border-radius: 25px;
border-radius: 5px;
}
.window-btn3 {
background: red;
color: red;
border-radius: 25px;
border-radius: 5px;
}
.window-btn1:hover {
background: yellow;
color: var(--color-dark);
border-radius: 25px;
border-radius: 5px;
}
.window-btn2:hover {
background: rgb(0, 255, 21);
color: var(--color-dark);
border-radius: 25px;
border-radius: 5px;
}
.window-btn3:hover {
background: red;
color: var(--color-dark);
border-radius: 25px;
border-radius: 5px;
}


Expand Down Expand Up @@ -151,7 +182,7 @@
}

#custom-homepage {
background: wheat;
background: rgb(54, 159, 252);
color: var(--color-light);
}

Expand Down Expand Up @@ -222,7 +253,7 @@
font-size: 24px;
background-color: rgba(45, 55, 72, 0.7);
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 25px;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background-color 0.2s ease, border-color 0.2s ease;
}
Expand Down Expand Up @@ -380,6 +411,22 @@
}
</style>
</head>
<!--SCRIPT FOR WHATS NEW POP UP-->
<script>
document.getElementById('openPopupBtn').addEventListener('click', function() {
document.getElementById('popup').style.display = 'flex';
});

document.querySelector('.close-btn').addEventListener('click', function() {
document.getElementById('popup').style.display = 'none';
});

window.addEventListener('click', function(event) {
if (event.target === document.getElementById('popup')) {
document.getElementById('popup').style.display = 'none';
}
});
</script>
<body class="select-none text-lg">
<div id="desktop" class="relative w-full h-screen p-4">
<div class="desktop-icon cursor-move m-4" id="browser-icon">
Expand Down Expand Up @@ -418,14 +465,15 @@
<div class="icon w-16 h-16 flex items-center justify-center text-3xl bg-gray-800 rounded-lg">💻</div>
<div class="mt-2 text-center text-white">Terminal</div>
</div>

</div>

<div class="window fixed flex flex-col hidden rounded-lg overflow-hidden" id="browser-window" style="width: 800px; height: 600px; left: 50px; top: 50px;">
<div class="title-bar flex justify-between items-center p-2 cursor-move">
<span class="title px-2">Pulsar OS Browser 2.3</span>
<div class="flex space-x-2">
<button class="window-btn1 px-3 py-1 rounded minimize-btn">_</button>
<button class="window-btn2 px-3 py-1 rounded maximize-btn">□</button>
<button class="window-btn2 px-3 py-1 rounded maximize-btn">⛶</button>
<button class="window-btn3 px-3 py-1 rounded close-btn">X</button>
</div>
</div>
Expand All @@ -435,10 +483,11 @@
<button class="browser-btn px-3 py-1 rounded" id="reload-btn">↻</button>
<button class="browser-btn px-3 py-1 rounded" id="home-btn">🏠</button>
<!-- if you know how add a whats new in Pulsar OS pop up to the Whats New! Button :) -->
<button class="browser-btn px-3 py-1 rounded" id="what-new">Whats New!</button>
<button class="browser-btn px-3 py-1 rounded" id="openPopupBtn">Whats New!</button>
<input type="text" class="search-bar flex-grow px-2 py-1 rounded" id="url-bar" placeholder="Enter search or URL">
<button class="browser-btn px-3 py-1 rounded" id="go-btn">Go</button>
</div>

<div class="content flex-1 overflow-hidden bg-white">
<iframe id="browser-frame" src="about:blank"></iframe>
<div id="custom-homepage" class="w-full h-full flex flex-col items-center justify-center p-8">
Expand All @@ -452,13 +501,20 @@ <h1 class="text-4xl font-bold mb-8">Welcome to Pulsar OS Browser V2.3!</h1>
</div>
<div class="resize-handle"></div>
</div>

<!-- Whats New Pop Up Add New Stuff Here! -->
<div id="popup" class="popup">
<div class="popup-content">
<span class="close-new">&times;</span>
<h1>Whats New In Pulsar OS:</h1>
<p>New UI, <br>new windows corner roundness </p>
</div>
</div>
<div class="window fixed flex flex-col hidden rounded-lg overflow-hidden" id="notepad-window" style="width: 600px; height: 400px; left: 100px; top: 100px;">
<div class="title-bar flex justify-between items-center p-2 cursor-move">
<span class="title px-2">Notepad</span>
<div class="flex space-x-2">
<button class="window-btn1 px-3 py-1 rounded minimize-btn">_</button>
<button class="window-btn2 px-3 py-1 rounded maximize-btn">□</button>
<button class="window-btn2 px-3 py-1 rounded maximize-btn">⛶</button>
<button class="window-btn3 px-3 py-1 rounded close-btn">X</button>
</div>
</div>
Expand Down Expand Up @@ -494,7 +550,7 @@ <h1 class="text-4xl font-bold mb-8">Welcome to Pulsar OS Browser V2.3!</h1>
<span class="title px-2">Calculator</span>
<div class="flex space-x-2">
<button class="window-btn1 px-3 py-1 rounded minimize-btn">_</button>
<button class="window-btn2 px-3 py-1 rounded maximize-btn">□</button>
<button class="window-btn2 px-3 py-1 rounded maximize-btn">⛶</button>
<button class="window-btn3 px-3 py-1 rounded close-btn">X</button>
</div>
</div>
Expand Down Expand Up @@ -529,7 +585,7 @@ <h1 class="text-4xl font-bold mb-8">Welcome to Pulsar OS Browser V2.3!</h1>
<span class="title px-2">Paint</span>
<div class="flex space-x-2">
<button class="window-btn1 px-3 py-1 rounded minimize-btn">_</button>
<button class="window-btn2 px-3 py-1 rounded maximize-btn">□</button>
<button class="window-btn2 px-3 py-1 rounded maximize-btn">⛶</button>
<button class="window-btn3 px-3 py-1 rounded close-btn">X</button>
</div>
</div>
Expand All @@ -551,7 +607,7 @@ <h1 class="text-4xl font-bold mb-8">Welcome to Pulsar OS Browser V2.3!</h1>
<span class="title px-2">Music Player</span>
<div class="flex space-x-2">
<button class="window-btn1 px-3 py-1 rounded minimize-btn">_</button>
<button class="window-btn2 px-3 py-1 rounded maximize-btn">□</button>
<button class="window-btn2 px-3 py-1 rounded maximize-btn">⛶</button>
<button class="window-btn3 px-3 py-1 rounded close-btn">X</button>
</div>
</div>
Expand Down Expand Up @@ -585,13 +641,13 @@ <h2 id="track-title" class="text-xl font-bold">No Track Selected</h2>
<div class="resize-handle"></div>
</div>

<!-- Add this to your HTML, inside the <body> tag, alongside other window definitions -->
<!-- Add this to your HTML, inside the <body> tag, alongside other window definitions -->
<div class="window fixed flex flex-col hidden rounded-lg overflow-hidden" id="explorer-window" style="width: 800px; height: 600px; left: 100px; top: 50px;">
<div class="title-bar flex justify-between items-center p-2 cursor-move">
<span class="title px-2">File Explorer</span>
<div class="flex space-x-2">
<button class="window-btn1 px-3 py-1 rounded minimize-btn">_</button>
<button class="window-btn2 px-3 py-1 rounded maximize-btn">□</button>
<button class="window-btn2 px-3 py-1 rounded maximize-btn">⛶</button>
<button class="window-btn3 px-3 py-1 rounded close-btn">X</button>
</div>
</div>
Expand Down Expand Up @@ -627,7 +683,7 @@ <h2 id="file-modal-title" class="text-xl font-bold">File Viewer</h2>
<span class="title px-2">Clock & Alarm</span>
<div class="flex space-x-2">
<button class="window-btn1 px-3 py-1 rounded minimize-btn">_</button>
<button class="window-btn2 px-3 py-1 rounded maximize-btn">□</button>
<button class="window-btn2 px-3 py-1 rounded maximize-btn">⛶</button>
<button class="window-btn3 px-3 py-1 rounded close-btn">X</button>
</div>
</div>
Expand All @@ -654,7 +710,7 @@ <h2 id="file-modal-title" class="text-xl font-bold">File Viewer</h2>
<span class="title px-2">Video Player</span>
<div class="flex space-x-2">
<button class="window-btn1 px-3 py-1 rounded minimize-btn">_</button>
<button class="window-btn2 px-3 py-1 rounded maximize-btn">□</button>
<button class="window-btn2 px-3 py-1 rounded maximize-btn">⛶</button>
<button class="window-btn3 px-3 py-1 rounded close-btn">X</button>
</div>
</div>
Expand Down Expand Up @@ -701,7 +757,7 @@ <h2 id="file-modal-title" class="text-xl font-bold">File Viewer</h2>
<span class="title px-2">Terminal</span>
<div class="flex space-x-2">
<button class="window-btn1 px-3 py-1 rounded minimize-btn">_</button>
<button class="window-btn2 px-3 py-1 rounded maximize-btn">□</button>
<button class="window-btn2 px-3 py-1 rounded maximize-btn">⛶</button>
<button class="window-btn3 px-3 py-1 rounded close-btn">X</button>
</div>
</div>
Expand All @@ -715,7 +771,10 @@ <h2 id="file-modal-title" class="text-xl font-bold">File Viewer</h2>
<div class="resize-handle"></div>
</div>


<!-- taskbar -->
<div class="taskbar fixed bottom-0 w-full h-14 flex items-center px-2 space-x-2">
<!-- start button -->
<button class="start-btn px-6 py-2 rounded-lg flex items-center text-xl font-bold">
Start
</button>
Expand Down