diff --git a/.vscode/tasks.json b/.vscode/tasks.json index fc0078c..e0de7bc 100644 --- a/.vscode/tasks.json +++ b/.vscode/tasks.json @@ -2,7 +2,7 @@ "version": "2.0.0", "tasks": [ { - "label": "Start Prozilla OS", + "label": "Start ProzillaOS", "type": "shell", "command": "npm start", "group": "none", diff --git a/README.md b/README.md index 882a18e..566e14e 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,13 @@ -License Stars Forks +License Stars Forks -# Logo Prozilla OS +# ProzillaOS -Prozilla OS is a web-based operating system inspired by Ubuntu Linux and Windows made with React by Prozilla. +Banner with the logo of ProzillaOS + +ProzillaOS is a web-based operating system inspired by Ubuntu Linux and Windows made with React by Prozilla. **Live demo: [os.prozilla.dev](https://os.prozilla.dev/)** -Banner with the logo of Prozilla OS - -> Please note that Prozilla OS is a WIP and far from complete. Many additional features will be added in the near future. - ## Documentation See [docs](docs/README.md) for more info. @@ -17,7 +15,9 @@ See [docs](docs/README.md) for more info. ### Quick Links - [Features](docs/features/README.md) +- [Configuration](docs/configuration/README.md) - [Design](docs/design/README.md) +- [FAQ](docs/faq/README.md) - [Roadmap](docs/roadmap/README.md) - [Contributing](docs/contributing/README.md) @@ -25,13 +25,13 @@ See [docs](docs/README.md) for more info. See [docs/design](docs/design/README.md) for more info. -Prozilla OS was designed in Figma by Prozilla. You can view the design file [here](https://www.figma.com/file/bEE5RyWgV0QILcXpZWEk2r/ProzillaOS?type=design&node-id=0%3A1&mode=design&t=7KR1tKCp9H5cK3hf-1). +ProzillaOS was designed in Figma by Prozilla. You can view the design file [here](https://www.figma.com/file/bEE5RyWgV0QILcXpZWEk2r/ProzillaOS?type=design&node-id=0%3A1&mode=design&t=7KR1tKCp9H5cK3hf-1). ### Preview -Screenshot of Prozilla OS +Screenshot of ProzillaOS -## Support Prozilla OS +## Support ProzillaOS You can support this project by donating to **[ko-fi.com/prozilla](https://ko-fi.com/prozilla)**. diff --git a/deploy.sh b/deploy.sh index aaea839..f51a754 100644 --- a/deploy.sh +++ b/deploy.sh @@ -3,7 +3,7 @@ # Edit these variables before deploying DOMAIN=os.prozilla.dev COMMIT_MESSAGE="Deployed build to GitHub Pages" -REPO_URL="https://github.com/Prozilla/Prozilla-OS" +REPO_URL="https://github.com/Prozilla/ProzillaOS" # ------- You don't need to edit anything below this line ------- diff --git a/docs/README.md b/docs/README.md index d95d734..07c672a 100644 --- a/docs/README.md +++ b/docs/README.md @@ -16,12 +16,13 @@ ### Quickstart 1. Clone this repository. -2. Run `npm install`. -3. Run `npm start` and visit [localhost:3000](http://localhost:3000/). +2. Run `npm install` to install dependencies. +3. Run `npm start` to start the web server and go to [localhost:3000](http://localhost:3000/). ### Development 1. Run `npm start` and watch your changes live at [localhost:3000](http://localhost:3000/). +2. Vite's hot module replacement makes sure your changes applied without needing to refresh the website. ### Building & deploying @@ -71,7 +72,7 @@ Folders | kebab-case | `virtual-drive` Local `.module.css` files | PascalCase | `Desktop.module.css` Global `.module.css` files | kebab-case | `utils.module.css` Variables | camelCase | ```const fooBar = true;``` -Global constant variables | MACRO_CASE | ```export const NAME = "Prozilla OS";``` +Global constant variables | MACRO_CASE | ```export const NAME = "ProzillaOS";``` Classes | PascalCase | ```class WindowsManager { }``` React components | PascalCase | ```export function WindowsView({ }) { }``` Functions | camelCase | ```function focusWindow() { }``` @@ -79,5 +80,5 @@ Types | PascalCase | ```type FooBar = boolean;``` ### External files -- [Design file - Figma](https://www.figma.com/file/bEE5RyWgV0QILcXpZWEk2r/ProzillaOS?type=design&node-id=0%3A1&mode=design&t=7KR1tKCp9H5cK3hf-1) -- [Task board - Notion](https://prozilla.notion.site/8325fabca1fb4f9885b6d6dfd5aa64c8?v=1a59f7ce50914f5ea711fe6460e52868&pvs=4) \ No newline at end of file +- [Design file (Figma)](https://www.figma.com/file/bEE5RyWgV0QILcXpZWEk2r/ProzillaOS?type=design&node-id=0%3A1&mode=design&t=7KR1tKCp9H5cK3hf-1) +- [Task board (Notion)](https://prozilla.notion.site/8325fabca1fb4f9885b6d6dfd5aa64c8?v=1a59f7ce50914f5ea711fe6460e52868&pvs=4) \ No newline at end of file diff --git a/docs/configuration/README.md b/docs/configuration/README.md index 09babef..01a6102 100644 --- a/docs/configuration/README.md +++ b/docs/configuration/README.md @@ -2,10 +2,10 @@ # Configuration -Prozilla OS can be configured in numerous ways. The most important one being via the application itself, by going to the Settings app or directly changing the config files in the `~/.config` folder. +ProzillaOS can be configured in numerous ways. The most important one being via the application itself, by going to the Settings app or directly changing the config files in the `~/.config` folder. -As a developer, there are also the following ways to configure Prozilla OS: +As a developer, there are also the following ways to configure ProzillaOS: -- `src/config` - The `src/config` directory holds all global variables used in the rest of the `src` directory, which are mostly string and number constants, but also includes some arrays and dictionaries that can be adjusted to configure Prozilla oS. +- `src/config` - The `src/config` directory holds all global variables used in the rest of the `src` directory, which are mostly string and number constants, but also includes some arrays and dictionaries that can be adjusted to configure ProzillaOS. - `styles` - Everything related to styles, can be configured in `styles` directory. Most configurations will happen inside `styles/global`, where you can define the fonts, css variables/properties and other details. - `public/config` - This directory has XML files that serve as the default data for config files used by the app in the virtual drive. These can be edited by the user once they're loaded during initialisation. diff --git a/docs/design/README.md b/docs/design/README.md index e79bd7c..0ca79ba 100644 --- a/docs/design/README.md +++ b/docs/design/README.md @@ -2,19 +2,19 @@ # Design -Prozilla OS is designed in Figma by Prozilla. You can view the design file [here](https://www.figma.com/file/bEE5RyWgV0QILcXpZWEk2r/ProzillaOS?type=design&node-id=0%3A1&mode=design&t=7KR1tKCp9H5cK3hf-1). +ProzillaOS is designed in Figma by Prozilla. You can view the design file [here](https://www.figma.com/file/bEE5RyWgV0QILcXpZWEk2r/ProzillaOS?type=design&node-id=0%3A1&mode=design&t=7KR1tKCp9H5cK3hf-1). ### Preview -Screenshot of Prozilla OS +Screenshot of ProzillaOS ### Font -The font used by Prozilla OS is [Poppins](https://fonts.google.com/specimen/Poppins) from Google Fonts by Indian Type Foundry, Jonny Pinhorn. +The font used by ProzillaOS is [Poppins](https://fonts.google.com/specimen/Poppins) from Google Fonts by Indian Type Foundry, Jonny Pinhorn. ### UI Icons -Prozilla OS uses [Font Awesome](https://fontawesome.com/) icons (some modified) in its UI. +ProzillaOS uses [Font Awesome](https://fontawesome.com/) icons (some modified) in its UI. ### App Icons diff --git a/docs/faq/README.md b/docs/faq/README.md index 9b27bc4..a08cfa7 100644 --- a/docs/faq/README.md +++ b/docs/faq/README.md @@ -2,10 +2,10 @@ # FAQ -### Q: What's the purpose of Prozilla OS? +### Q: What's the purpose of ProzillaOS? -A: Obviously Prozilla OS doesn't solve any issues or anything like that. It's just a fun project I started because I wanted to refine my web development and design skills, as well as my React.js proficiency. At the same time, I also wanted to create an interesting and innovative web application and share it with the community via open source. +A: Obviously ProzillaOS doesn't solve any issues or anything like that. It's just a fun project I started because I wanted to refine my web development and design skills, as well as my React.js proficiency. At the same time, I also wanted to create an interesting and innovative web application and share it with the community via open source. -### Q: What tools did you use to make Prozilla OS? +### Q: What tools did you use to make ProzillaOS? A: I used Visual Studio Code for coding, Figma for designing, Notion for project management, GitHub for source control. I didn't use any libraries for the main parts of the OS. The libraries I used for specific purposes like certain applications or utilities, can be found in the `package.json` file. I got the icons from Font Awesome and the fonts from Google Fonts. \ No newline at end of file diff --git a/docs/features/apps/media-viewer/README.md b/docs/features/apps/media-viewer/README.md index 396366c..e3faba6 100644 --- a/docs/features/apps/media-viewer/README.md +++ b/docs/features/apps/media-viewer/README.md @@ -6,4 +6,4 @@ An app for viewing media like images and videos. ## Screenshot -![Media Viewer window showing Prozilla OS.png](screenshot.png) \ No newline at end of file +![Media Viewer window showing ProzillaOS.png](screenshot.png) \ No newline at end of file diff --git a/docs/features/apps/settings/README.md b/docs/features/apps/settings/README.md index e61f9c6..40b37e7 100644 --- a/docs/features/apps/settings/README.md +++ b/docs/features/apps/settings/README.md @@ -2,7 +2,7 @@ # Settings -Allows the user to change their settings and personalize their instance of Prozilla OS. +Allows the user to change their settings and personalize their instance of ProzillaOS. ## Screenshot diff --git a/docs/features/storage/README.md b/docs/features/storage/README.md index c275381..f68f587 100644 --- a/docs/features/storage/README.md +++ b/docs/features/storage/README.md @@ -4,6 +4,6 @@ > Related document: [Virtual Drive](../virtual-drive/README.md) -Prozilla OS makes use of the local storage to store persistent data. The data is loaded by the virtual root during the initialization process. On the first run, the default data is loaded. +ProzillaOS makes use of the local storage to store persistent data. The data is loaded by the virtual root during the initialization process. On the first run, the default data is loaded. The data is converted from class instances to a JSON object and then to a string by the virtual root before it is stored in the local storage. To load data from the local storage, an inverse process is used. \ No newline at end of file diff --git a/docs/roadmap/README.md b/docs/roadmap/README.md index f343f6f..ba357b5 100644 --- a/docs/roadmap/README.md +++ b/docs/roadmap/README.md @@ -2,14 +2,4 @@ # Roadmap -This is a list of planned/in progress features. - -For more detailed information, check the [task board](https://prozilla.notion.site/8325fabca1fb4f9885b6d6dfd5aa64c8?v=1a59f7ce50914f5ea711fe6460e52868&pvs=4) on Notion. - -### Visual Studio Code clone - -A fully functional VSC clone called Code Editor. - -### App centre - -Allows user to download additional apps \ No newline at end of file +For more information about the future plans and development of ProzillaOS, check out the [task board](https://prozilla.notion.site/8325fabca1fb4f9885b6d6dfd5aa64c8?v=1a59f7ce50914f5ea711fe6460e52868&pvs=4) on Notion. diff --git a/index.html b/index.html index 4ea0ecc..bd2ee30 100644 --- a/index.html +++ b/index.html @@ -1,33 +1,41 @@ - + - Prozilla OS | Web-based Operating System - + + - - + ProzillaOS | Web-based Operating System + - - - - - + + + + + + + + + + + - - - + + + + - - - - + + + + + @@ -41,18 +49,18 @@ "mainEntity": [ { "@type": "Question", - "name": "Is Prozilla OS open source?", + "name": "Is ProzillaOS open source?", "acceptedAnswer": { "@type": "Answer", - "text": "Yes, the source code for Prozilla OS is hosted on GitHub." + "text": "Yes, the source code for ProzillaOS is hosted on GitHub." } }, { "@type": "Question", - "name": "Is Prozilla OS a real operating system?", + "name": "Is ProzillaOS a real operating system?", "acceptedAnswer": { "@type": "Answer", - "text": "No, Prozilla OS is a web-based operating system that runs entirely in your browser. It does not have the same capabilities as an operating system like Ubuntu Linux and runs completely virtually." + "text": "No, ProzillaOS is a web-based operating system that runs entirely in your browser. It does not have the same capabilities as an operating system like Ubuntu Linux and runs completely virtually." } } ] @@ -60,7 +68,7 @@ - +
diff --git a/package.json b/package.json index 8d32bf2..c858a22 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "private": false, "author": "Prozilla", "homepage": "https://os.prozilla.dev/", - "repository": "https://github.com/Prozilla/Prozilla-OS", + "repository": "https://github.com/Prozilla/ProzillaOS", "type": "module", "scripts": { "start": "vite --port 3000", diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png deleted file mode 100644 index de19b61..0000000 Binary files a/public/android-chrome-192x192.png and /dev/null differ diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png deleted file mode 100644 index e564b55..0000000 Binary files a/public/android-chrome-512x512.png and /dev/null differ diff --git a/public/assets/apps/file-explorer/icons/file-code.svg b/public/assets/apps/file-explorer/icons/file-code.svg index 27daca8..2aa73c3 100644 --- a/public/assets/apps/file-explorer/icons/file-code.svg +++ b/public/assets/apps/file-explorer/icons/file-code.svg @@ -1,16 +1,16 @@ - + - + - + - - + + diff --git a/public/assets/apps/file-explorer/icons/file-info.svg b/public/assets/apps/file-explorer/icons/file-info.svg index f079907..55d0208 100644 --- a/public/assets/apps/file-explorer/icons/file-info.svg +++ b/public/assets/apps/file-explorer/icons/file-info.svg @@ -1,15 +1,15 @@ - + - + - + - + diff --git a/public/assets/apps/file-explorer/icons/file-text.svg b/public/assets/apps/file-explorer/icons/file-text.svg index 7cae1ff..b486d40 100644 --- a/public/assets/apps/file-explorer/icons/file-text.svg +++ b/public/assets/apps/file-explorer/icons/file-text.svg @@ -1,17 +1,17 @@ - + - + - + - - - + + + diff --git a/public/assets/apps/file-explorer/icons/file.svg b/public/assets/apps/file-explorer/icons/file.svg index 6cf4702..b16ca2f 100644 --- a/public/assets/apps/file-explorer/icons/file.svg +++ b/public/assets/apps/file-explorer/icons/file.svg @@ -1,12 +1,12 @@ - + - + - + diff --git a/public/assets/apps/file-explorer/icons/folder-images.svg b/public/assets/apps/file-explorer/icons/folder-images.svg index dccb4fb..32e14dc 100644 --- a/public/assets/apps/file-explorer/icons/folder-images.svg +++ b/public/assets/apps/file-explorer/icons/folder-images.svg @@ -1,14 +1,14 @@ - + - + - + - - + + diff --git a/public/assets/apps/file-explorer/icons/folder-link.svg b/public/assets/apps/file-explorer/icons/folder-link.svg index 8f08e0f..354e7a9 100644 --- a/public/assets/apps/file-explorer/icons/folder-link.svg +++ b/public/assets/apps/file-explorer/icons/folder-link.svg @@ -1,14 +1,14 @@ - + - + - + - - + + diff --git a/public/assets/apps/file-explorer/icons/folder-text.svg b/public/assets/apps/file-explorer/icons/folder-text.svg index 371686f..98f8960 100644 --- a/public/assets/apps/file-explorer/icons/folder-text.svg +++ b/public/assets/apps/file-explorer/icons/folder-text.svg @@ -1,13 +1,13 @@ - + - + - + - + diff --git a/public/assets/apps/file-explorer/icons/folder.svg b/public/assets/apps/file-explorer/icons/folder.svg index f5d4036..ce75b33 100644 --- a/public/assets/apps/file-explorer/icons/folder.svg +++ b/public/assets/apps/file-explorer/icons/folder.svg @@ -1,12 +1,12 @@ - + - + - + diff --git a/public/assets/apps/icons/balls.svg b/public/assets/apps/icons/balls.svg index c6cfc86..9871efa 100644 --- a/public/assets/apps/icons/balls.svg +++ b/public/assets/apps/icons/balls.svg @@ -1,8 +1,8 @@ - + - + diff --git a/public/assets/apps/icons/browser.svg b/public/assets/apps/icons/browser.svg index a028277..dd9139b 100644 --- a/public/assets/apps/icons/browser.svg +++ b/public/assets/apps/icons/browser.svg @@ -1,12 +1,12 @@ - + - + - + diff --git a/public/assets/apps/icons/calculator.svg b/public/assets/apps/icons/calculator.svg index 613f4c0..fe1d878 100644 --- a/public/assets/apps/icons/calculator.svg +++ b/public/assets/apps/icons/calculator.svg @@ -1,13 +1,13 @@ - + - + - + - + @@ -15,7 +15,6 @@ - @@ -25,7 +24,6 @@ - @@ -35,7 +33,6 @@ - diff --git a/public/assets/apps/icons/code-editor.svg b/public/assets/apps/icons/code-editor.svg index aca378b..d4287d3 100644 --- a/public/assets/apps/icons/code-editor.svg +++ b/public/assets/apps/icons/code-editor.svg @@ -1,8 +1,8 @@ - + - + @@ -11,7 +11,6 @@ - diff --git a/public/assets/apps/icons/file-explorer.svg b/public/assets/apps/icons/file-explorer.svg index 5c509ec..ed67b6f 100644 --- a/public/assets/apps/icons/file-explorer.svg +++ b/public/assets/apps/icons/file-explorer.svg @@ -1,23 +1,23 @@ - - + + - - - - + + + + - + - + - - + + diff --git a/public/assets/apps/icons/logic-sim.svg b/public/assets/apps/icons/logic-sim.svg index 99691ee..91328e3 100644 --- a/public/assets/apps/icons/logic-sim.svg +++ b/public/assets/apps/icons/logic-sim.svg @@ -2,16 +2,16 @@ - + - + - + - - + + diff --git a/public/assets/apps/icons/media-viewer.svg b/public/assets/apps/icons/media-viewer.svg index 36c1a60..9665f01 100644 --- a/public/assets/apps/icons/media-viewer.svg +++ b/public/assets/apps/icons/media-viewer.svg @@ -1,10 +1,10 @@ - + - + - + diff --git a/public/assets/apps/icons/minesweeper.svg b/public/assets/apps/icons/minesweeper.svg index e004bf0..f601356 100644 --- a/public/assets/apps/icons/minesweeper.svg +++ b/public/assets/apps/icons/minesweeper.svg @@ -1,12 +1,12 @@ - + - + - + diff --git a/public/assets/apps/icons/settings.svg b/public/assets/apps/icons/settings.svg index b2e7832..f58ac5d 100644 --- a/public/assets/apps/icons/settings.svg +++ b/public/assets/apps/icons/settings.svg @@ -1,7 +1,7 @@ - + - + diff --git a/public/assets/apps/icons/terminal.svg b/public/assets/apps/icons/terminal.svg index d7e8c8b..4048da1 100644 --- a/public/assets/apps/icons/terminal.svg +++ b/public/assets/apps/icons/terminal.svg @@ -1,7 +1,7 @@ - + - + diff --git a/public/assets/apps/icons/text-editor.svg b/public/assets/apps/icons/text-editor.svg index 32946dd..8fb104d 100644 --- a/public/assets/apps/icons/text-editor.svg +++ b/public/assets/apps/icons/text-editor.svg @@ -1,19 +1,19 @@ - + - + - - - + + + - + - + @@ -22,7 +22,6 @@ - @@ -32,7 +31,6 @@ - @@ -42,7 +40,6 @@ - diff --git a/public/assets/apps/icons/wordle.svg b/public/assets/apps/icons/wordle.svg index 9a8724a..b7da345 100644 --- a/public/assets/apps/icons/wordle.svg +++ b/public/assets/apps/icons/wordle.svg @@ -1,7 +1,7 @@ - + - + diff --git a/public/assets/banner-logo-title-small.png b/public/assets/banner-logo-title-small.png index b7f7015..2fd4f21 100644 Binary files a/public/assets/banner-logo-title-small.png and b/public/assets/banner-logo-title-small.png differ diff --git a/public/assets/banner-logo-title.png b/public/assets/banner-logo-title.png index 2d3951b..ec78795 100644 Binary files a/public/assets/banner-logo-title.png and b/public/assets/banner-logo-title.png differ diff --git a/public/assets/screenshots/screenshot-files-info-taskbar-desktop.png b/public/assets/screenshots/screenshot-files-info-taskbar-desktop.png new file mode 100644 index 0000000..88ae201 Binary files /dev/null and b/public/assets/screenshots/screenshot-files-info-taskbar-desktop.png differ diff --git a/public/assets/screenshots/screenshot-files-settings-taskbar-desktop.png b/public/assets/screenshots/screenshot-files-settings-taskbar-desktop.png deleted file mode 100644 index ca7f27b..0000000 Binary files a/public/assets/screenshots/screenshot-files-settings-taskbar-desktop.png and /dev/null differ diff --git a/public/assets/wallpapers/abstract-mesh-gradient-orange-red-purple.png b/public/assets/wallpapers/abstract-mesh-gradient-orange-red-purple.png index 64245b0..cfd1232 100644 Binary files a/public/assets/wallpapers/abstract-mesh-gradient-orange-red-purple.png and b/public/assets/wallpapers/abstract-mesh-gradient-orange-red-purple.png differ diff --git a/public/assets/wallpapers/abstract-wallpaper-mesh-gradient-cyan.png b/public/assets/wallpapers/abstract-wallpaper-mesh-gradient-cyan.png index 4f6eb05..ed4543c 100644 Binary files a/public/assets/wallpapers/abstract-wallpaper-mesh-gradient-cyan.png and b/public/assets/wallpapers/abstract-wallpaper-mesh-gradient-cyan.png differ diff --git a/public/assets/wallpapers/colorful-abstract-wallpaper-blue-red-green.png b/public/assets/wallpapers/colorful-abstract-wallpaper-blue-red-green.png index 0125b70..8d6f5aa 100644 Binary files a/public/assets/wallpapers/colorful-abstract-wallpaper-blue-red-green.png and b/public/assets/wallpapers/colorful-abstract-wallpaper-blue-red-green.png differ diff --git a/public/assets/wallpapers/colorful-mesh-gradient-yellow-blue-green.png b/public/assets/wallpapers/colorful-mesh-gradient-yellow-blue-green.png index f2c214d..01d42a2 100644 Binary files a/public/assets/wallpapers/colorful-mesh-gradient-yellow-blue-green.png and b/public/assets/wallpapers/colorful-mesh-gradient-yellow-blue-green.png differ diff --git a/public/assets/wallpapers/mesh-gradient-wallpaper-red-purple.png b/public/assets/wallpapers/mesh-gradient-wallpaper-red-purple.png index 3600e81..6729f0e 100644 Binary files a/public/assets/wallpapers/mesh-gradient-wallpaper-red-purple.png and b/public/assets/wallpapers/mesh-gradient-wallpaper-red-purple.png differ diff --git a/public/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png b/public/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png index bc9e735..2c82d08 100644 Binary files a/public/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png and b/public/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png differ diff --git a/public/assets/wallpapers/vibrant-wallpaper-purple-yellow.png b/public/assets/wallpapers/vibrant-wallpaper-purple-yellow.png index 04bb3db..d566b79 100644 Binary files a/public/assets/wallpapers/vibrant-wallpaper-purple-yellow.png and b/public/assets/wallpapers/vibrant-wallpaper-purple-yellow.png differ diff --git a/public/assets/wallpapers/wave-abstract-wallpaper-teal.png b/public/assets/wallpapers/wave-abstract-wallpaper-teal.png index 8698e9d..79a2311 100644 Binary files a/public/assets/wallpapers/wave-abstract-wallpaper-teal.png and b/public/assets/wallpapers/wave-abstract-wallpaper-teal.png differ diff --git a/public/browserconfig.xml b/public/browserconfig.xml deleted file mode 100644 index eac1c4e..0000000 --- a/public/browserconfig.xml +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - #222f3e - - - diff --git a/public/documents/info.md b/public/documents/info.md index f6b04f8..b6099bc 100644 --- a/public/documents/info.md +++ b/public/documents/info.md @@ -1,13 +1,13 @@ -Banner with the logo of Prozilla OS +Banner with the logo of ProzillaOS # Info -This is Prozilla OS, a web-based operating system made with React.js by [Prozilla](https://prozilla.dev/). +This is ProzillaOS, a web-based operating system made with React.js by [Prozilla](https://prozilla.dev/). ## Open Source -Prozilla OS is [open source](https://github.com/Prozilla/Prozilla-OS)! Feel free to fork this project and create your own OS or share feedback by creating an issue on the GitHub page. +ProzillaOS is [open source](https://github.com/Prozilla/ProzillaOS)! Feel free to fork this project and create your own OS or share feedback by creating an issue on the GitHub page. -## Support Prozilla OS +## Support ProzillaOS You can support this project by donating to [ko-fi.com/prozilla](https://ko-fi.com/prozilla). \ No newline at end of file diff --git a/public/documents/links.md b/public/documents/links.md index a68a94f..5590425 100644 --- a/public/documents/links.md +++ b/public/documents/links.md @@ -1,8 +1,8 @@ # Links -**Prozilla OS** +**ProzillaOS** -- [GitHub](https://github.com/Prozilla/Prozilla-OS) +- [GitHub](https://github.com/Prozilla/ProzillaOS) **Prozilla** @@ -11,5 +11,5 @@ **Crumbling City** -- [Website (daisygames.org/crumbling-city)](https://daisygames.org/crumbling-city/) +- [Website (crumblingcity.com)](https://crumblingcity.com/) - [Steam page](https://store.steampowered.com/app/1520290/Crumbling_City/) \ No newline at end of file diff --git a/public/favicon-16.png b/public/favicon-16.png new file mode 100644 index 0000000..c945c03 Binary files /dev/null and b/public/favicon-16.png differ diff --git a/public/favicon-192.png b/public/favicon-192.png new file mode 100644 index 0000000..b60cbc6 Binary files /dev/null and b/public/favicon-192.png differ diff --git a/public/favicon-32.png b/public/favicon-32.png new file mode 100644 index 0000000..728bd77 Binary files /dev/null and b/public/favicon-32.png differ diff --git a/public/favicon-48.png b/public/favicon-48.png new file mode 100644 index 0000000..5bd65fc Binary files /dev/null and b/public/favicon-48.png differ diff --git a/public/favicon.ico b/public/favicon.ico index 9c770e8..342cf7c 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/icon.png b/public/icon.png new file mode 100644 index 0000000..d3e86b7 Binary files /dev/null and b/public/icon.png differ diff --git a/public/assets/logo.svg b/public/icon.svg similarity index 51% rename from public/assets/logo.svg rename to public/icon.svg index 5fd55a4..2cd9f76 100644 --- a/public/assets/logo.svg +++ b/public/icon.svg @@ -1,43 +1,43 @@ - + - - + + - - - - - - - + + + + + + + - - + + - + - - + + - + - - + + diff --git a/public/manifest.json b/public/manifest.json deleted file mode 100644 index 1e2ada6..0000000 --- a/public/manifest.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "short_name": "Prozilla OS", - "name": "Prozilla OS", - "icons": [ - { - "src": "/android-chrome-192x192.png", - "sizes": "192x192", - "type": "image/png" - }, - { - "src": "/android-chrome-512x512.png", - "sizes": "512x512", - "type": "image/png" - } - ], - "start_url": ".", - "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" -} diff --git a/public/mstile-144x144.png b/public/mstile-144x144.png deleted file mode 100644 index bd4937f..0000000 Binary files a/public/mstile-144x144.png and /dev/null differ diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png deleted file mode 100644 index 128f878..0000000 Binary files a/public/mstile-150x150.png and /dev/null differ diff --git a/public/mstile-310x150.png b/public/mstile-310x150.png deleted file mode 100644 index e79217d..0000000 Binary files a/public/mstile-310x150.png and /dev/null differ diff --git a/public/mstile-310x310.png b/public/mstile-310x310.png deleted file mode 100644 index cd5aec7..0000000 Binary files a/public/mstile-310x310.png and /dev/null differ diff --git a/public/mstile-70x70.png b/public/mstile-70x70.png deleted file mode 100644 index 79a891b..0000000 Binary files a/public/mstile-70x70.png and /dev/null differ diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg deleted file mode 100644 index 88dc337..0000000 --- a/public/safari-pinned-tab.svg +++ /dev/null @@ -1,345 +0,0 @@ - - - - -Created by potrace 1.14, written by Peter Selinger 2001-2017 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/site.webmanifest b/public/site.webmanifest new file mode 100644 index 0000000..6b6df70 --- /dev/null +++ b/public/site.webmanifest @@ -0,0 +1,14 @@ +{ + "name": "ProzillaOS", + "short_name": "ProzillaOS", + "icons": [ + { + "src": "/favicon-192.png?v=2", + "sizes": "192x192", + "type": "image/png" + } + ], + "theme_color": "#0d1114", + "background_color": "#0d1114", + "display": "standalone" +} diff --git a/public/sitemap.xml b/public/sitemap.xml index bb05221..dd9089b 100644 --- a/public/sitemap.xml +++ b/public/sitemap.xml @@ -8,7 +8,7 @@ https://os.prozilla.dev/assets/banner-logo-title.png - https://os.prozilla.dev/assets/screenshots/screenshot-files-settings-taskbar-desktop.png + https://os.prozilla.dev/assets/screenshots/screenshot-files-info-taskbar-desktop.png https://os.prozilla.dev/assets/wallpapers/abstract-mesh-gradient-orange-red-purple.png @@ -20,7 +20,7 @@ https://os.prozilla.dev/assets/wallpapers/colorful-abstract-wallpaper-blue-red-green.png - https://os.prozilla.dev/assets/wallpapers/colorful-mesh-gradient-yellow-blue-green.png + https://os.prozilla.dev/assets/wallpapers/colorful-mesh-gradient--yellow-1lue-green.png https://os.prozilla.dev/assets/wallpapers/mesh-gradient-wallpaper-red-purple.png diff --git a/src/components/_utils/button/Button.module.css b/src/components/_utils/button/Button.module.css index 831170f..d633b6f 100644 --- a/src/components/_utils/button/Button.module.css +++ b/src/components/_utils/button/Button.module.css @@ -1,7 +1,7 @@ .Button { - --text-color: var(--foreground-color-a); - --normal-color: var(--background-color-a); - --hover-color: var(--background-color-b); + --text-color: var(--foreground-color-0); + --normal-color: var(--background-color-0); + --hover-color: var(--background-color-1); color: var(--text-color); background-color: var(--normal-color); diff --git a/src/components/_utils/dropdown-button/DropdownButton.module.css b/src/components/_utils/dropdown-button/DropdownButton.module.css index c884fac..db0b585 100644 --- a/src/components/_utils/dropdown-button/DropdownButton.module.css +++ b/src/components/_utils/dropdown-button/DropdownButton.module.css @@ -26,7 +26,7 @@ top: 100%; left: 0; padding: 0.35rem; - background-color: var(--background-color-b); + background-color: var(--background-color-1); border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } @@ -39,7 +39,7 @@ padding: 0.25rem 0.5rem; background: none; border: none; - border-radius: 0.5rem; + border-radius: var(--border-radius-1); outline: none; font-size: 0.85rem; text-align: start; @@ -48,7 +48,7 @@ } .Dropdown > button:hover, .Dropdown > button:focus-visible { - background-color: hsla(var(--background-color-a-hsl), 75%); + background-color: color-mix(in srgb, var(--background-color-0) 75%, transparent); } .Dropdown > button > p { @@ -56,5 +56,5 @@ } .Shortcut { - color: var(--foreground-color-b); + color: var(--foreground-color-1); } \ No newline at end of file diff --git a/src/components/_utils/progress-bar/ProgressBar.module.css b/src/components/_utils/progress-bar/ProgressBar.module.css index 4b37aaf..e0c949b 100644 --- a/src/components/_utils/progress-bar/ProgressBar.module.css +++ b/src/components/_utils/progress-bar/ProgressBar.module.css @@ -4,7 +4,7 @@ max-width: 100%; min-height: 2rem; max-height: 100%; - background-color: var(--background-color-d); + background-color: var(--background-color-3); } .Fill { @@ -16,5 +16,5 @@ width: var(--fill); min-width: 1px; height: 100%; - background-color: var(--blue-a); + background-color: var(--blue-0); } \ No newline at end of file diff --git a/src/components/actions/Actions.module.css b/src/components/actions/Actions.module.css index 92c53b8..0a6a94c 100644 --- a/src/components/actions/Actions.module.css +++ b/src/components/actions/Actions.module.css @@ -31,7 +31,7 @@ } .Context-menu.Container { - --border-radius: 0.5rem; + --border-radius: var(--border-radius-1); --padding: 0.375rem; padding: var(--padding); @@ -39,7 +39,7 @@ border-top-right-radius: calc((1 - var(--left) * var(--bottom)) * var(--border-radius)) !important; border-bottom-left-radius: calc((1 - var(--right) * var(--top)) * var(--border-radius)) !important; border-bottom-right-radius: calc((1 - var(--left) * var(--top)) * var(--border-radius)) !important; - background-color: var(--background-color-b) !important; + background-color: var(--background-color-1) !important; } .Context-menu .Button, @@ -51,7 +51,7 @@ padding: 0.25rem 0.5rem; background: none; border: none; - border-radius: 0.5rem; + border-radius: var(--border-radius-1); outline: none; font-size: 0.875rem; text-align: start; @@ -63,7 +63,7 @@ .Context-menu .Button:focus-visible, .Context-menu .Dropdown:hover, .Context-menu .Dropdown:focus-visible { - background-color: hsla(var(--background-color-a-hsl), 75%); + background-color: color-mix(in srgb, var(--background-color-0) 75%, transparent); } .Context-menu .Label { @@ -112,7 +112,7 @@ } .Context-menu .Shortcut { - color: var(--foreground-color-b); + color: var(--foreground-color-1); } .Context-menu .Dropdown { @@ -125,9 +125,9 @@ top: calc(var(--padding) * -1); left: 100%; padding: var(--padding); - border-radius: 0.5rem; + border-radius: var(--border-radius-1); border-top-left-radius: 0; - background-color: var(--background-color-b); + background-color: var(--background-color-1); transition: opacity 100ms ease-out; cursor: auto; } @@ -139,9 +139,9 @@ .Context-menu .Divider { width: calc(100% - 0.5rem); - height: 0.1rem; - border-radius: 1rem; - background-color: var(--foreground-color-c); + height: 2px; + border-radius: var(--border-radius-99); + background-color: var(--foreground-color-2); margin: 0.5rem auto; } @@ -185,7 +185,7 @@ top: 100%; left: 0; padding: 0.35rem; - background-color: var(--background-color-b); + background-color: var(--background-color-1); border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } @@ -203,7 +203,7 @@ padding: 0.25rem 0.5rem; background: none; border: none; - border-radius: 0.5rem; + border-radius: var(--border-radius-1); outline: none; font-size: 0.85rem; text-align: start; @@ -212,7 +212,7 @@ } .Header-menu .Button:hover, .Header-menu .Button:focus-visible { - background-color: hsla(var(--background-color-a-hsl), 75%); + background-color: color-mix(in srgb, var(--background-color-0) 75%, transparent); } .Header-menu .Dropdown > .Label > p, .Header-menu .Button > .Label > p { @@ -220,6 +220,6 @@ } .Header-menu .Shortcut { - color: var(--foreground-color-b); + color: var(--foreground-color-1); margin: 0; } \ No newline at end of file diff --git a/src/components/apps/_utils/header-menu/HeaderMenu.module.css b/src/components/apps/_utils/header-menu/HeaderMenu.module.css index 2ae7269..40dc069 100644 --- a/src/components/apps/_utils/header-menu/HeaderMenu.module.css +++ b/src/components/apps/_utils/header-menu/HeaderMenu.module.css @@ -3,5 +3,5 @@ width: 100%; height: 1.5rem; min-height: 1.5rem; - background-color: var(--background-color-a); + background-color: var(--background-color-0); } \ No newline at end of file diff --git a/src/components/apps/browser/Browser.module.css b/src/components/apps/browser/Browser.module.css index 015b37e..492023e 100644 --- a/src/components/apps/browser/Browser.module.css +++ b/src/components/apps/browser/Browser.module.css @@ -13,7 +13,7 @@ flex-direction: column; width: 100%; height: var(--header-height); - background-color: var(--background-color-a); + background-color: var(--background-color-0); } .Nav-bar { @@ -27,7 +27,7 @@ } .Icon-button { - --color: var(--foreground-color-a); + --color: var(--foreground-color-0); position: relative; display: flex; @@ -51,7 +51,7 @@ width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0%); - border-radius: 9999px; + border-radius: var(--border-radius-99); transform: scale(100%); transform-origin: center; transition: all 200ms ease-in-out; @@ -64,7 +64,7 @@ } .Icon-button:disabled { - --color: var(--foreground-color-c); + --color: var(--foreground-color-2); } .Icon-button svg { @@ -79,9 +79,9 @@ .Search-bar { flex: 1; padding: 0.25rem 0.5rem; - background-color: var(--background-color-c); + background-color: var(--background-color-2); border: none; - border-radius: 0.5rem; + border-radius: var(--border-radius-1); outline: none; font-family: inherit; font-size: 0.875em; diff --git a/src/components/apps/calculator/Calculator.module.css b/src/components/apps/calculator/Calculator.module.css index c603b11..c00c188 100644 --- a/src/components/apps/calculator/Calculator.module.css +++ b/src/components/apps/calculator/Calculator.module.css @@ -22,12 +22,12 @@ } .Calculation { - color: var(--foreground-color-c); + color: var(--foreground-color-2); height: 1.25rem; } .Preview { - color: var(--foreground-color-a); + color: var(--foreground-color-0); font-size: 2.5rem; } @@ -47,18 +47,18 @@ .Button { flex: 1; - border-radius: 0.25rem; + border-radius: var(--border-radius-0); font-size: 1.5rem; } .Input-row:first-of-type .Button { - --normal-color: var(--background-color-b); - --hover-color: var(--background-color-ba); + --normal-color: var(--background-color-1); + --hover-color: var(--background-color-1a); } .Input-row .Button:last-of-type { - --text-color: var(--background-color-a); - --normal-color: var(--blue-a); + --text-color: var(--background-color-0); + --normal-color: var(--blue-0); --hover-color: var(--blue-b); } diff --git a/src/components/apps/file-explorer/FileExplorer.module.css b/src/components/apps/file-explorer/FileExplorer.module.css index 5141a45..b33cd14 100644 --- a/src/components/apps/file-explorer/FileExplorer.module.css +++ b/src/components/apps/file-explorer/FileExplorer.module.css @@ -17,11 +17,11 @@ width: 100%; height: var(--header-height); padding: 1rem; - background-color: var(--background-color-a); + background-color: var(--background-color-0); } .Icon-button { - --color: var(--foreground-color-a); + --color: var(--foreground-color-0); position: relative; height: 1.25rem; @@ -42,7 +42,7 @@ width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0%); - border-radius: 9999px; + border-radius: var(--border-radius-99); transform: scale(100%); transform-origin: center; transition: all 200ms ease-in-out; @@ -54,7 +54,7 @@ } .Icon-button:disabled { - --color: var(--foreground-color-c); + --color: var(--foreground-color-2); } .Icon-button svg { @@ -69,9 +69,9 @@ .Path-input { flex: 1; padding: 0.25rem 0.5rem; - background-color: var(--background-color-c); + background-color: var(--background-color-2); border: none; - border-radius: 0.5rem; + border-radius: var(--border-radius-1); outline: none; font-family: inherit; font-size: inherit; @@ -82,7 +82,7 @@ display: flex; width: 100%; height: calc(100% - var(--header-height)); - background-color: var(--background-color-c); + background-color: var(--background-color-2); } .Sidebar { @@ -94,7 +94,7 @@ height: 100%; max-width: 50%; padding: 0.5rem; - background-color: var(--background-color-b); + background-color: var(--background-color-1); resize: horizontal; overflow: hidden; } @@ -107,14 +107,14 @@ padding: 0.5rem; background: none; border: none; - border-radius: 0.5rem; + border-radius: var(--border-radius-1); outline: none; cursor: pointer; transition: background-color 100ms ease-in-out; } .Nav-button:hover, .Nav-button:focus-visible { - background-color: hsla(var(--background-color-a-hsl), 75%); + background-color: color-mix(in srgb, var(--background-color-0) 75%, transparent); } .Nav-button svg { @@ -146,8 +146,8 @@ width: 100%; height: var(--footer-height); padding: 0 0.75rem; - border-top: 0.25rem solid var(--background-color-a); - background-color: var(--background-color-c); + border-top: 0.25rem solid var(--background-color-0); + background-color: var(--background-color-2); } .Footer p { diff --git a/src/components/apps/file-explorer/directory-list/DirectoryList.module.css b/src/components/apps/file-explorer/directory-list/DirectoryList.module.css index adb6c8a..1fbd83a 100644 --- a/src/components/apps/file-explorer/directory-list/DirectoryList.module.css +++ b/src/components/apps/file-explorer/directory-list/DirectoryList.module.css @@ -19,7 +19,7 @@ padding: 0.5rem; background: none; border: none; - border-radius: 0.5rem; + border-radius: var(--border-radius-1); outline: none; cursor: pointer; transition: background-color 100ms ease-in-out; @@ -27,14 +27,14 @@ .File-button[data-selected=true], .Folder-button[data-selected=true] { - background-color: hsla(var(--background-color-a-hsl), 40%) !important; + background-color: color-mix(in srgb, var(--background-color-0) 40%, transparent) !important; } .File-button:hover, .Folder-button:hover, .File-button:focus-visible, .Folder-button:focus-visible { - background-color: hsla(var(--background-color-a-hsl), 20%); + background-color: color-mix(in srgb, var(--background-color-0) 20%, transparent); } .File-button p, .Folder-button p { @@ -64,7 +64,7 @@ .Selection-rect { opacity: 25%; position: absolute; - border-radius: 0.25rem; + border-radius: var(--border-radius-0); background-color: var(--blue-b); - border: 0.25rem solid var(--blue-a); + border: 0.25rem solid var(--blue-0); } \ No newline at end of file diff --git a/src/components/apps/settings/Settings.module.css b/src/components/apps/settings/Settings.module.css index bb90467..7a6bd2e 100644 --- a/src/components/apps/settings/Settings.module.css +++ b/src/components/apps/settings/Settings.module.css @@ -5,7 +5,7 @@ display: flex; width: 100%; height: 100%; - background-color: var(--background-color-c); + background-color: var(--background-color-2); } .Tabs { @@ -18,7 +18,7 @@ max-width: 50%; padding: 0.5rem; margin: 0; - background-color: var(--background-color-ba); + background-color: var(--background-color-1a); resize: horizontal; overflow: hidden; } @@ -30,17 +30,17 @@ width: 100%; min-width: fit-content; padding: 0.75rem; - border-radius: 0.5rem; + border-radius: var(--border-radius-1); font-size: 0.875rem; } .Tab-button.Active-tab { - background-color: var(--background-color-a); + background-color: var(--background-color-0); } .Tab-button:not(.Active-tab):hover, .Tab-button:not(.Active-tab):focus-visible { - background-color: hsla(var(--background-color-a-hsl), 50%); + background-color: color-mix(in srgb, var(--background-color-0) 50%, transparent); } .Tab-button > svg { @@ -90,7 +90,7 @@ } .Option > .Label { - color: var(--foreground-color-a); + color: var(--foreground-color-0); } .Input { @@ -122,13 +122,13 @@ } .Image-select > input:checked + img { - outline: 0.25em solid var(--foreground-color-a); + outline: 0.25em solid var(--foreground-color-0); } .Image-select > img { width: 100%; height: 100%; - border-radius: 0.5rem; + border-radius: var(--border-radius-1); transition: filter 100ms ease-in-out; cursor: pointer; } @@ -145,22 +145,22 @@ } .Button { - --normal-color: var(--background-color-a) !important; - --hover-color: var(--background-color-b) !important; + --normal-color: var(--background-color-0) !important; + --hover-color: var(--background-color-1) !important; margin-bottom: 0.75rem !important; padding: 0.5rem 1rem; - border-radius: 0.5rem; + border-radius: var(--border-radius-1); } .Button-red { - --text-color: var(--dark-grey-b) !important; - --normal-color: var(--red-a) !important; - --hover-color: var(--red-b) !important; + --text-color: var(--black-1) !important; + --normal-color: var(--red-0) !important; + --hover-color: var(--red-1) !important; } .Icon-button { - --color: var(--foreground-color-a); + --color: var(--foreground-color-0); position: relative; height: 1.25rem; @@ -181,7 +181,7 @@ width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0%); - border-radius: 9999px; + border-radius: var(--border-radius-99); transform: scale(100%); transform-origin: center; transition: all 200ms ease-in-out; @@ -193,7 +193,7 @@ } .Icon-button:disabled { - --color: var(--foreground-color-c); + --color: var(--foreground-color-2); } .Icon-button svg { @@ -248,9 +248,9 @@ max-width: calc(60% - var(--gap)); padding: 0.5rem 1rem; color: var(--text-color); - background-color: var(--background-color-a); + background-color: var(--background-color-0); border: none; - border-radius: 0.5rem; + border-radius: var(--border-radius-1); outline: none; font-size: 0.875em; } @@ -259,7 +259,7 @@ color: inherit; background-color: inherit; border: none; - border-radius: 0.5rem; + border-radius: var(--border-radius-1); outline: none; font-family: inherit; font-size: inherit; diff --git a/src/components/apps/settings/tabs/AboutSettings.tsx b/src/components/apps/settings/tabs/AboutSettings.tsx index 38b2ad5..227405f 100644 --- a/src/components/apps/settings/tabs/AboutSettings.tsx +++ b/src/components/apps/settings/tabs/AboutSettings.tsx @@ -30,7 +30,7 @@ export function AboutSettings() { diff --git a/src/components/apps/terminal/Terminal.module.css b/src/components/apps/terminal/Terminal.module.css index b460c64..6a49904 100644 --- a/src/components/apps/terminal/Terminal.module.css +++ b/src/components/apps/terminal/Terminal.module.css @@ -58,7 +58,7 @@ left: calc(var(--cursor-offset) * var(--char-width) * 0.9746124950079872); width: var(--cursor-width); height: 100%; - background-color: var(--foreground-color-a); + background-color: var(--foreground-color-0); animation: blink 1000ms step-end infinite; } @@ -80,7 +80,7 @@ background-color: transparent; } 50% { - background-color: var(--foreground-color-a); + background-color: var(--foreground-color-0); } } @@ -93,31 +93,31 @@ cursor: text; } -.ansi-black-fg { color: var(--dark-grey-c); } -.ansi-red-fg { color: var(--red-a); } -.ansi-green-fg { color: var(--green-a); } -.ansi-yellow-fg { color: var(--yellow-a); } -.ansi-blue-fg { color: var(--blue-a); } -.ansi-magenta-fg { color: var(--purple-a); } -.ansi-cyan-fg { color: var(--cyan-a); } -.ansi-white-fg { color: var(--foreground-color-a); } +.ansi-black-fg { color: var(--black-2); } +.ansi-red-fg { color: var(--red-0); } +.ansi-green-fg { color: var(--green-0); } +.ansi-yellow-fg { color: var(--yellow-0); } +.ansi-blue-fg { color: var(--blue-0); } +.ansi-magenta-fg { color: var(--purple-0); } +.ansi-cyan-fg { color: var(--cyan-0); } +.ansi-white-fg { color: var(--foreground-color-0); } -.ansi-bright-black-fg { color: var(--dark-grey-c); } -.ansi-bright-red-fg { color: var(--red-a); } -.ansi-bright-green-fg { color: var(--green-a); } -.ansi-bright-yellow-fg { color: var(--yellow-a); } -.ansi-bright-blue-fg { color: var(--blue-a); } -.ansi-bright-magenta-fg { color: var(--purple-a); } -.ansi-bright-cyan-fg { color: var(--cyan-a); } -.ansi-bright-white-fg { color: var(--foreground-color-a); } +.ansi-bright-black-fg { color: var(--black-2); } +.ansi-bright-red-fg { color: var(--red-0); } +.ansi-bright-green-fg { color: var(--green-0); } +.ansi-bright-yellow-fg { color: var(--yellow-0); } +.ansi-bright-blue-fg { color: var(--blue-0); } +.ansi-bright-magenta-fg { color: var(--purple-0); } +.ansi-bright-cyan-fg { color: var(--cyan-0); } +.ansi-bright-white-fg { color: var(--foreground-color-0); } -.ansi-black-bg { background-color: var(--dark-grey-c); } -.ansi-red-bg { background-color: var(--red-a); } -.ansi-green-bg { background-color: var(--green-a); } -.ansi-yellow-bg { background-color: var(--yellow-a); } -.ansi-blue-bg { background-color: var(--blue-a); } -.ansi-magenta-bg { background-color: var(--purple-a); } -.ansi-cyan-bg { background-color: var(--cyan-a); } -.ansi-white-bg { background-color: var(--foreground-color-a); } +.ansi-black-bg { background-color: var(--black-2); } +.ansi-red-bg { background-color: var(--red-0); } +.ansi-green-bg { background-color: var(--green-0); } +.ansi-yellow-bg { background-color: var(--yellow-0); } +.ansi-blue-bg { background-color: var(--blue-0); } +.ansi-magenta-bg { background-color: var(--purple-0); } +.ansi-cyan-bg { background-color: var(--cyan-0); } +.ansi-white-bg { background-color: var(--foreground-color-0); } .ansi-dim { opacity: 0.65; } \ No newline at end of file diff --git a/src/components/apps/text-editor/TextEditor.module.css b/src/components/apps/text-editor/TextEditor.module.css index 0bc3e5a..5a9bed2 100644 --- a/src/components/apps/text-editor/TextEditor.module.css +++ b/src/components/apps/text-editor/TextEditor.module.css @@ -17,8 +17,8 @@ width: 100%; height: 100%; padding: 1rem !important; - color: var(--foreground-color-a) !important; - background-color: var(--background-color-c) !important; + color: var(--foreground-color-0) !important; + background-color: var(--background-color-2) !important; border: none; outline: none; font-size: 1rem; @@ -30,7 +30,7 @@ .View img { max-width: 100%; object-fit: contain; - border-radius: 0.25rem; + border-radius: var(--border-radius-0); margin-right: 0.5rem; } @@ -38,9 +38,9 @@ margin-left: 0; padding: 0.5rem; padding-left: 1.5rem; - border-left: 1rem solid var(--background-color-a); - background-color: var(--background-color-b); - border-radius: 0.5rem; + border-left: 1rem solid var(--background-color-0); + background-color: var(--background-color-1); + border-radius: var(--border-radius-1); } .View blockquote > p { @@ -50,8 +50,8 @@ .View code { font-family: var(--mono-font-family); - border-radius: 0.5rem; - background-color: var(--background-color-b); + border-radius: var(--border-radius-1); + background-color: var(--background-color-1); padding: 0.25rem; } @@ -60,7 +60,7 @@ } .View table, .View th, .View td { - border: 0.2rem solid var(--background-color-a); + border: 0.2rem solid var(--background-color-0); } .View th, .View td { @@ -72,14 +72,14 @@ cursor: default; } -.Code *[class*="hljs-string"] { color: var(--green-a); } -.Code *[class*="hljs-literal"] { color: var(--yellow-a); } -.Code *[class*="hljs-number"] { color: var(--yellow-a); } -.Code *[class*="hljs-keyword"] { color: var(--blue-a); } -.Code *[class*="hljs-title"] { color: var(--cyan-a); } -.Code *[class*="hljs-name"] { color: var(--red-a); } -.Code *[class*="hljs-attr"] { color: var(--blue-a); } -.Code *[class*="hljs-param"] { color: var(--red-a); } -.Code *[class*="hljs-comment"] { color: var(--dark-grey-a); } -.Code *[class*="linenumber"] { color: var(--dark-grey-a); } -.Code *[class*="hljs-meta"] { color: var(--blue-a); } \ No newline at end of file +.Code *[class*="hljs-string"] { color: var(--green-0); } +.Code *[class*="hljs-literal"] { color: var(--yellow-0); } +.Code *[class*="hljs-number"] { color: var(--yellow-0); } +.Code *[class*="hljs-keyword"] { color: var(--blue-0); } +.Code *[class*="hljs-title"] { color: var(--cyan-0); } +.Code *[class*="hljs-name"] { color: var(---red-0); } +.Code *[class*="hljs-attr"] { color: var(--blue-0); } +.Code *[class*="hljs-param"] { color: var(---red-0); } +.Code *[class*="hljs-comment"] { color: var(--black-0); } +.Code *[class*="linenumber"] { color: var(--black-0); } +.Code *[class*="hljs-meta"] { color: var(--blue-0); } \ No newline at end of file diff --git a/src/components/desktop/Desktop.module.css b/src/components/desktop/Desktop.module.css index 405fcbd..708e61d 100644 --- a/src/components/desktop/Desktop.module.css +++ b/src/components/desktop/Desktop.module.css @@ -35,13 +35,13 @@ .Item { padding: 0.25rem; - text-shadow: 0.1rem 0.1rem 0.2rem hsla(var(--background-color-a-hsl), 75%); + text-shadow: 0.1rem 0.1rem 0.2rem color-mix(in srgb, var(--background-color-0) 75%, transparent); } .Item p { - color: var(--white-a); + color: var(--white-0); } .Item svg { - filter: drop-shadow(0.1rem 0.1rem 0.2rem hsla(var(--background-color-a-hsl), 50%)); + filter: drop-shadow(0.1rem 0.1rem 0.2rem color-mix(in srgb, var(--background-color-0) 50%, transparent)); } \ No newline at end of file diff --git a/src/components/modals/ModalView.module.css b/src/components/modals/ModalView.module.css index bdcae67..be59b34 100644 --- a/src/components/modals/ModalView.module.css +++ b/src/components/modals/ModalView.module.css @@ -8,7 +8,7 @@ } .Container > * { - background: var(--background-color-a); - border-radius: 0.5rem; + background: var(--background-color-0); + border-radius: var(--border-radius-1); box-shadow: var(--window-box-shadow); } \ No newline at end of file diff --git a/src/components/modals/_utils/WindowedModal.module.css b/src/components/modals/_utils/WindowedModal.module.css index 4110df3..86881c6 100644 --- a/src/components/modals/_utils/WindowedModal.module.css +++ b/src/components/modals/_utils/WindowedModal.module.css @@ -7,7 +7,7 @@ flex-direction: column; min-width: 300px; min-height: 150px; - background-color: var(--background-color-c) !important; + background-color: var(--background-color-2) !important; resize: both; overflow: hidden; } @@ -22,7 +22,7 @@ padding: 0.25rem; padding-left: var(--window-icon-margin); padding-right: 0; - background-color: var(--background-color-b); + background-color: var(--background-color-1); cursor: grab; } @@ -60,7 +60,7 @@ height: var(--header-height); margin: 0; padding: 0.75rem; - color: var(--foreground-color-a); + color: var(--foreground-color-0); background: none; cursor: pointer; border: none; @@ -73,7 +73,7 @@ } .Exit-button { - --header-button-hover-color: var(--red-b); + --header-button-hover-color: var(--red-0); } .Header-button:hover, .Header-button:focus-visible { diff --git a/src/components/modals/dialog-box/DialogBox.module.css b/src/components/modals/dialog-box/DialogBox.module.css index 0c92dac..c5636a0 100644 --- a/src/components/modals/dialog-box/DialogBox.module.css +++ b/src/components/modals/dialog-box/DialogBox.module.css @@ -7,7 +7,7 @@ flex-direction: column; min-width: 300px; min-height: 150px; - background-color: var(--background-color-c) !important; + background-color: var(--background-color-2) !important; resize: both; overflow: hidden; } @@ -22,7 +22,7 @@ padding: 0.25rem; padding-left: var(--dialog-icon-margin); padding-right: 0; - background-color: var(--background-color-b); + background-color: var(--background-color-1); cursor: grab; } @@ -60,7 +60,7 @@ height: var(--header-height); margin: 0; padding: 0.75rem; - color: var(--foreground-color-a); + color: var(--foreground-color-0); background: none; cursor: pointer; border: none; @@ -73,7 +73,7 @@ } .Exit-button { - --header-button-hover-color: var(--red-b); + --header-button-hover-color: var(--red-0); } .Header-button:hover, .Header-button:focus-visible { @@ -95,15 +95,15 @@ margin-bottom: 0.75rem; padding: 0.5rem 1rem; width: fit-content; - color: var(--foreground-color-a); - background-color: var(--background-color-a); + color: var(--foreground-color-0); + background-color: var(--background-color-0); border: none; - border-radius: 0.5rem; + border-radius: var(--border-radius-1); outline: none; transition: background-color 100ms ease-in-out; cursor: pointer; } .Dialog-content button:hover, .Dialog-content button:focus-visible { - background-color: var(--background-color-b); + background-color: var(--background-color-1); } \ No newline at end of file diff --git a/src/components/modals/file-properties/FileProperties.module.css b/src/components/modals/file-properties/FileProperties.module.css index 80adc48..7d416b0 100644 --- a/src/components/modals/file-properties/FileProperties.module.css +++ b/src/components/modals/file-properties/FileProperties.module.css @@ -54,8 +54,8 @@ left: 0; width: 100%; height: var(--divider-width); - border-radius: 0.25rem; - background-color: var(--background-color-a); + border-radius: var(--border-radius-0); + background-color: var(--background-color-0); } .Line { diff --git a/src/components/modals/file-selector/FileSelector.module.css b/src/components/modals/file-selector/FileSelector.module.css index 4dc220e..47153e4 100644 --- a/src/components/modals/file-selector/FileSelector.module.css +++ b/src/components/modals/file-selector/FileSelector.module.css @@ -17,9 +17,9 @@ } .Button { - --normal-color: var(--background-color-a); - --hover-color: var(--background-color-b); + --normal-color: var(--background-color-0); + --hover-color: var(--background-color-1); padding: 0.35rem 0.7rem; - border-radius: 0.5rem; + border-radius: var(--border-radius-1); } \ No newline at end of file diff --git a/src/components/modals/share/Share.module.css b/src/components/modals/share/Share.module.css index 670ff12..30439dd 100644 --- a/src/components/modals/share/Share.module.css +++ b/src/components/modals/share/Share.module.css @@ -56,9 +56,9 @@ max-width: calc(60% - var(--gap)); padding: 0.5rem 1rem; color: var(--text-color); - background-color: var(--background-color-b); + background-color: var(--background-color-1); border: none; - border-radius: 0.5rem; + border-radius: var(--border-radius-1); outline: none; font-size: 0.875em; } @@ -67,7 +67,7 @@ select.Input > * { color: inherit; background-color: inherit; border: none; - border-radius: 0.5rem; + border-radius: var(--border-radius-1); outline: none; font-family: inherit; font-size: inherit; @@ -90,7 +90,7 @@ select.Input > * { width: 100%; height: 100%; object-fit: contain; - fill: var(--foreground-color-a); + fill: var(--foreground-color-0); } .Checkbox > svg > * { @@ -103,10 +103,10 @@ select.Input > * { } .Button { - --normal-color: var(--background-color-a) !important; - --hover-color: var(--background-color-b) !important; + --normal-color: var(--background-color-0) !important; + --hover-color: var(--background-color-1) !important; padding: 0.5rem 1rem; - border-radius: 0.5rem; + border-radius: var(--border-radius-1); white-space: nowrap; } \ No newline at end of file diff --git a/src/components/taskbar/Taskbar.module.css b/src/components/taskbar/Taskbar.module.css index 1fda140..6f9927e 100644 --- a/src/components/taskbar/Taskbar.module.css +++ b/src/components/taskbar/Taskbar.module.css @@ -1,6 +1,9 @@ :root { --taskbar-height: 3rem; - --taskbar-color: rgba(0, 0, 0, 75%); + --taskbar-color: var(--background-color-2); + --taskbar-opacity: 0.75; + --taskbar-menu-color: var(--background-color-1); + --taskbar-menu-opacity: 0.5; --taskbar-button-hover-color: rgba(255, 255, 255, 5%); --taskbar-filter: blur(1rem); } @@ -12,14 +15,25 @@ left: 0; width: 100%; height: var(--taskbar-height); - background-color: var(--taskbar-color); backdrop-filter: var(--taskbar-filter); } +.Taskbar::after { + opacity: var(--taskbar-opacity); + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: var(--taskbar-color); + z-index: -2; +} + .Taskbar button { display: flex; align-items: center; - color: var(--foreground-color-a); + color: var(--foreground-color-0); background: none; cursor: pointer; border: none; @@ -40,7 +54,7 @@ } .Home-button * { - fill: var(--foreground-color-a); + fill: var(--foreground-color-0); filter: none; } diff --git a/src/components/taskbar/Taskbar.tsx b/src/components/taskbar/Taskbar.tsx index b6622e4..b5d895e 100644 --- a/src/components/taskbar/Taskbar.tsx +++ b/src/components/taskbar/Taskbar.tsx @@ -145,7 +145,7 @@ export const Taskbar = memo(() => { className={`${styles["Menu-button"]} ${styles["Home-button"]}`} onClick={() => { updateShowHome(!showHome); }} > - + diff --git a/src/components/taskbar/app-icon/AppIcon.module.css b/src/components/taskbar/app-icon/AppIcon.module.css index 66b8ffa..81afe5e 100644 --- a/src/components/taskbar/app-icon/AppIcon.module.css +++ b/src/components/taskbar/app-icon/AppIcon.module.css @@ -7,6 +7,10 @@ animation: appear 100ms ease-out forwards; } +.App-icon svg { + filter: drop-shadow(0.1rem 0.1rem 0.2rem color-mix(in srgb, var(--taskbar-color) 50%, transparent)); +} + .App-icon.Hidden { animation: disappear 400ms ease-in-out forwards; pointer-events: none; @@ -42,7 +46,7 @@ bottom: 0; width: 90%; height: 0.15rem; - background-color: var(--grey-a); + background-color: var(--foreground-color-0); transition: height 200ms ease-in-out, width 200ms ease-in-out; transform: translateX(-50%); -webkit-transform: translateX(-50%); diff --git a/src/components/taskbar/indicators/Battery.module.css b/src/components/taskbar/indicators/Battery.module.css index 0125806..46426e9 100644 --- a/src/components/taskbar/indicators/Battery.module.css +++ b/src/components/taskbar/indicators/Battery.module.css @@ -3,7 +3,7 @@ } .Charging-indicator { - --outline-color: var(--background-color-c); + --outline-color: var(--background-color-2); --outline-width: 2px; position: absolute; diff --git a/src/components/taskbar/indicators/Calendar.module.css b/src/components/taskbar/indicators/Calendar.module.css index fd4ec36..b73d039 100644 --- a/src/components/taskbar/indicators/Calendar.module.css +++ b/src/components/taskbar/indicators/Calendar.module.css @@ -20,5 +20,5 @@ } .Date { - color: var(--foreground-color-b); + color: var(--foreground-color-1); } \ No newline at end of file diff --git a/src/components/taskbar/menus/AppList.module.css b/src/components/taskbar/menus/AppList.module.css index a30e5c9..f4a12b2 100644 --- a/src/components/taskbar/menus/AppList.module.css +++ b/src/components/taskbar/menus/AppList.module.css @@ -4,6 +4,7 @@ flex-direction: column; overflow-y: auto; max-height: 100%; + padding-bottom: 0.5rem; z-index: 0; } @@ -12,7 +13,7 @@ gap: 1rem; width: 100%; padding: 0.25rem 0.5rem; - border-radius: 0.5rem; + border-radius: var(--border-radius-1); } .App-button > div, @@ -22,6 +23,10 @@ height: 2rem; } +.App-button svg { + filter: drop-shadow(0.1rem 0.1rem 0.2rem color-mix(in srgb, var(--taskbar-color) 50%, transparent)); +} + .App-button > p, .App-button > h2 { margin: 0; white-space: nowrap; diff --git a/src/components/taskbar/menus/HomeMenu.module.css b/src/components/taskbar/menus/HomeMenu.module.css index bf44a3b..b2d468f 100644 --- a/src/components/taskbar/menus/HomeMenu.module.css +++ b/src/components/taskbar/menus/HomeMenu.module.css @@ -11,7 +11,6 @@ display: flex; min-width: 16rem; max-width: 32rem; - background-color: hsla(var(--background-color-c-hsl), 75%); border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; @@ -22,6 +21,18 @@ resize: horizontal; } +.Container-inner::after { + opacity: var(--taskbar-menu-opacity); + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: var(--taskbar-menu-color); + z-index: -2; +} + .Container-outer:not(.Active) { pointer-events: none; } @@ -42,7 +53,7 @@ .Buttons > button { padding: 0.5rem; - border-radius: 0.5rem; + border-radius: var(--border-radius-1); } .Buttons > button > svg { diff --git a/src/components/taskbar/menus/SearchMenu.module.css b/src/components/taskbar/menus/SearchMenu.module.css index 2ee0a22..be1aa3a 100644 --- a/src/components/taskbar/menus/SearchMenu.module.css +++ b/src/components/taskbar/menus/SearchMenu.module.css @@ -17,7 +17,6 @@ min-width: 13rem; max-width: 19rem; padding: 0.5rem; - background-color: hsla(var(--background-color-c-hsl), 75%); border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; @@ -28,6 +27,18 @@ resize: horizontal; } +.Container-inner::after { + opacity: var(--taskbar-menu-opacity); + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: var(--taskbar-menu-color); + z-index: -2; +} + .Container-outer:not(.Active) { pointer-events: none; } @@ -44,10 +55,10 @@ .Input { width: 100%; padding: 0.25rem 0.5rem; - color: var(--foreground-color-a); + color: var(--foreground-color-0); background-color: rgba(0, 0, 0, 25%); border: none; - border-radius: 0.5rem; + border-radius: var(--border-radius-1); outline: none; font-family: inherit; font-size: inherit; diff --git a/src/components/taskbar/menus/UtilMenu.module.css b/src/components/taskbar/menus/UtilMenu.module.css index 8d7f579..5de4c9f 100644 --- a/src/components/taskbar/menus/UtilMenu.module.css +++ b/src/components/taskbar/menus/UtilMenu.module.css @@ -9,7 +9,6 @@ .Container-inner { opacity: 1; display: flex; - background-color: hsla(var(--background-color-c-hsl), 75%); border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem; @@ -20,6 +19,18 @@ resize: horizontal; } +.Container-inner::after { + opacity: var(--taskbar-menu-opacity); + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: var(--taskbar-menu-color); + z-index: -2; +} + .Container-outer:not(.Active) { pointer-events: none; } diff --git a/src/components/windows/WindowView.module.css b/src/components/windows/WindowView.module.css index cefc332..f5bc87e 100644 --- a/src/components/windows/WindowView.module.css +++ b/src/components/windows/WindowView.module.css @@ -32,8 +32,8 @@ flex-direction: column; min-width: 300px; min-height: 150px; - background-color: var(--background-color-c); - border-radius: 0.5rem; + background-color: var(--background-color-2); + border-radius: var(--border-radius-1); box-shadow: var(--window-box-shadow); resize: both; overflow: hidden; @@ -83,7 +83,7 @@ padding: 0.25rem; padding-left: var(--window-icon-margin); padding-right: 0; - background-color: var(--background-color-b); + background-color: var(--background-color-1); cursor: grab; } @@ -121,7 +121,7 @@ height: var(--header-height); margin: 0; padding: 0.75rem; - color: var(--foreground-color-a); + color: var(--foreground-color-0); background: none; cursor: pointer; border: none; @@ -134,7 +134,7 @@ } .Exit-button { - --header-button-hover-color: var(--red-b); + --header-button-hover-color: var(--red-0); } .Header-button:hover, .Header-button:focus-visible { diff --git a/src/config/branding.config.ts b/src/config/branding.config.ts index 1818fd1..351c411 100644 --- a/src/config/branding.config.ts +++ b/src/config/branding.config.ts @@ -1,6 +1,6 @@ import { ANSI } from "./apps/terminal.config"; -export const NAME = "Prozilla OS"; +export const NAME = "ProzillaOS"; export const TAG_LINE = "Web-based Operating System"; export const ASCII_LOGO = ` @@ -20,7 +20,7 @@ export const ASCII_LOGO = ` .::---------::.. ....::... `; -export const ANSI_LOGO_COLOR = ANSI.fg.green; +export const ANSI_LOGO_COLOR = ANSI.fg.cyan; export const ANSI_ASCII_LOGO = ` :. -==. diff --git a/src/features/apps/terminal/commands/neofetch.ts b/src/features/apps/terminal/commands/neofetch.ts index 1337fdc..40253ed 100644 --- a/src/features/apps/terminal/commands/neofetch.ts +++ b/src/features/apps/terminal/commands/neofetch.ts @@ -30,10 +30,10 @@ export const neofetch = new Command() browserName = "Unknown"; } - const formatLine = (label, text) => ANSI.fg.green + label.toUpperCase() + ANSI.reset + ": " + text; + const formatLine = (label, text) => ANSI.fg.cyan + label.toUpperCase() + ANSI.reset + ": " + text; const rightColumn = [ - `${ANSI.fg.green + username + ANSI.reset}@${ANSI.fg.green + hostname + ANSI.reset}`, + `${ANSI.fg.cyan + username + ANSI.reset}@${ANSI.fg.cyan + hostname + ANSI.reset}`, "-".repeat(rightColumnWidth), formatLine("os", NAME), formatLine("uptime", formatRelativeTime(START_DATE, 2, false)), diff --git a/src/features/virtual-drive/root/defaultData.ts b/src/features/virtual-drive/root/defaultData.ts index c4867e4..e38cd27 100644 --- a/src/features/virtual-drive/root/defaultData.ts +++ b/src/features/virtual-drive/root/defaultData.ts @@ -35,7 +35,7 @@ export function loadDefaultData(virtualRoot: VirtualRoot) { file.setSource(source); }); } - }).createFile("Prozilla-OS", "png", (file) => { + }).createFile("ProzillaOS", "png", (file) => { file.setSource("/assets/banner-logo-title.png"); }).createFolder("Crumbling City", (folder) => { folder.createFile("Japan", "png", (file) => { @@ -80,19 +80,19 @@ export function loadDefaultData(virtualRoot: VirtualRoot) { virtualRoot.createFolder(".github", (folder) => { folder.createFile("FUNDING", "yml", (file) => { - file.setSource("https://raw.githubusercontent.com/Prozilla/Prozilla-OS/main/.github/FUNDING.yml"); + file.setSource("https://raw.githubusercontent.com/Prozilla/ProzillaOS/main/.github/FUNDING.yml"); }); }); virtualRoot.createFolder(".vscode", (folder) => { folder.createFile("settings", "json", (file) => { - file.setSource("https://raw.githubusercontent.com/Prozilla/Prozilla-OS/main/.vscode/settings.json"); + file.setSource("https://raw.githubusercontent.com/Prozilla/ProzillaOS/main/.vscode/settings.json"); }); }); virtualRoot.createFolder("docs", (folder) => { folder.createFile("README", "md", (file) => { - file.setSource("https://raw.githubusercontent.com/Prozilla/Prozilla-OS/main/docs/README.md"); + file.setSource("https://raw.githubusercontent.com/Prozilla/ProzillaOS/main/docs/README.md"); }); }); @@ -110,7 +110,7 @@ export function loadDefaultData(virtualRoot: VirtualRoot) { folder.createFolders(["outfit", "roboto-mono"]); }).createFolder("screenshots", (folder) => { folder.createFile("screenshot", "png", (file) => { - file.setSource(`/assets/screenshots/screenshot-files-settings-taskbar-desktop.png`); + file.setSource("/assets/screenshots/screenshot-files-info-taskbar-desktop.png"); }); }).createFolder("wallpapers", (folder) => { folder.setProtected(true); @@ -122,34 +122,34 @@ export function loadDefaultData(virtualRoot: VirtualRoot) { }); } }).createFile("banner", "png", (file) => { - file.setSource(`/assets/banner-logo-title.png`); + file.setSource("/assets/banner-logo-title.png"); }).createFile("logo", "svg", (file) => { - file.setSource(`/assets/logo.svg`); + file.setSource("/icon.svg"); }); }).createFolder("config", (folder) => { folder.createFile("apps", "xml", (file) => { - file.setSource(`/config/apps.xml`); + file.setSource("/config/apps.xml"); }).createFile("desktop", "xml", (file) => { - file.setSource(`/config/desktop.xml`); + file.setSource("/config/desktop.xml"); }).createFile("taskbar", "xml", (file) => { - file.setSource(`/config/taskbar.xml`); + file.setSource("/config/taskbar.xml"); }).createFile("theme", "xml", (file) => { - file.setSource(`/config/theme.xml`); + file.setSource("/config/theme.xml"); }); }).createFolder("documents", (folder) => { folder.createFile("info", "md", (file) => { - file.setSource(`/documents/info.md`); + file.setSource("/documents/info.md"); }).createFile("links", "md", (file) => { - file.setSource(`/documents/links.md`); + file.setSource("/documents/links.md"); }); }).createFile("favicon", "ico", (file) => { - file.setSource(`/favicon.ico`); + file.setSource("/favicon.ico"); }).createFile("index", "html", (file) => { - file.setSource(`/index.html`); + file.setSource("/index.html"); }).createFile("robots", "txt", (file) => { - file.setSource(`/robots.txt`); + file.setSource("/robots.txt"); }).createFile("sitemap", "xml", (file) => { - file.setSource(`/sitemap.xml`); + file.setSource("/sitemap.xml"); }); }); @@ -160,25 +160,25 @@ export function loadDefaultData(virtualRoot: VirtualRoot) { .createFolder("hooks") .createFolder("styles") .createFile("App", "tsx", (file) => { - file.setSource("https://raw.githubusercontent.com/Prozilla/Prozilla-OS/main/src/App.tsx"); + file.setSource("https://raw.githubusercontent.com/Prozilla/ProzillaOS/main/src/App.tsx"); }).createFile("index", "tsx", (file) => { - file.setSource("https://raw.githubusercontent.com/Prozilla/Prozilla-OS/main/src/index"); + file.setSource("https://raw.githubusercontent.com/Prozilla/ProzillaOS/main/src/index"); }); }); virtualRoot.createFile("", "env", (file) => { - file.setSource("https://raw.githubusercontent.com/Prozilla/Prozilla-OS/main/.env"); + file.setSource("https://raw.githubusercontent.com/Prozilla/ProzillaOS/main/.env"); }).createFile("", "gitignore", (file) => { - file.setSource("https://raw.githubusercontent.com/Prozilla/Prozilla-OS/main/.gitignore"); + file.setSource("https://raw.githubusercontent.com/Prozilla/ProzillaOS/main/.gitignore"); }).createFile("LICENSE", "md", (file) => { - file.setSource("https://raw.githubusercontent.com/Prozilla/Prozilla-OS/main/LICENSE.md"); + file.setSource("https://raw.githubusercontent.com/Prozilla/ProzillaOS/main/LICENSE.md"); }).createFile("README", "md", (file) => { - file.setSource("https://raw.githubusercontent.com/Prozilla/Prozilla-OS/main/README.md"); + file.setSource("https://raw.githubusercontent.com/Prozilla/ProzillaOS/main/README.md"); }).createFile("package", "json", (file) => { - file.setSource("https://raw.githubusercontent.com/Prozilla/Prozilla-OS/main/package.json"); + file.setSource("https://raw.githubusercontent.com/Prozilla/ProzillaOS/main/package.json"); }).createFile("deploy", "sh", (file) => { - file.setSource("https://raw.githubusercontent.com/Prozilla/Prozilla-OS/main/deploy.sh"); + file.setSource("https://raw.githubusercontent.com/Prozilla/ProzillaOS/main/deploy.sh"); }).createFile("tsconfig", "json", (file) => { - file.setSource("https://raw.githubusercontent.com/Prozilla/Prozilla-OS/main/tsconfig.json"); + file.setSource("https://raw.githubusercontent.com/Prozilla/ProzillaOS/main/tsconfig.json"); }); } \ No newline at end of file diff --git a/src/styles/global.css b/src/styles/global.css index d27ccd5..8f8310a 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -12,7 +12,7 @@ html, body, #root { html { scroll-behavior: smooth; overflow: hidden; - background-color: var(--background-color-c); + background-color: var(--background-color-2); font-size: 16px; } @@ -24,7 +24,7 @@ body { } *, :after, :before { - color: var(--foreground-color-a); + color: var(--foreground-color-0); font-size: 1rem; box-sizing: border-box; -webkit-tap-highlight-color: transparent; @@ -60,6 +60,6 @@ code { *::selection { - color: var(--background-color-c); - background-color: var(--grey-b); + color: var(--background-color-3); + background-color: var(--foreground-color-0); } \ No newline at end of file diff --git a/src/styles/global/scrollbar.css b/src/styles/global/scrollbar.css index a7e7eba..aa1022c 100644 --- a/src/styles/global/scrollbar.css +++ b/src/styles/global/scrollbar.css @@ -15,7 +15,7 @@ } *::-webkit-scrollbar-thumb { - border-radius: 9999px; + border-radius: var(--border-radius-99); border: 5px solid transparent; background-color: var(--scrollbar-color); background-clip: padding-box; diff --git a/src/styles/global/variables.css b/src/styles/global/variables.css index ffdfb1e..cf6f5b0 100644 --- a/src/styles/global/variables.css +++ b/src/styles/global/variables.css @@ -1,50 +1,70 @@ :root { - --white-a: hsl(210, 54%, 95%); - --white-b: hsl(210, 45%, 90%); - --pink-a: hsl(308, 100%, 81%); - --pink-b: hsl(308, 85%, 68%); - --yellow-a: hsl(41, 99%, 67%); - --yellow-b: hsl(29, 100%, 63%); - --red-a: hsl(0, 100%, 71%); - --red-b: hsl(360, 82%, 63%); - --red-c: hsl(360, 64%, 55%); - --red-d: hsl(360, 46%, 47%); - --light-blue-a: hsl(191, 96%, 63%); - --light-blue-b: hsl(191, 92%, 46%); - --green-a: hsl(164, 76%, 47%); - --green-b: hsl(165, 83%, 37%); - --cyan-a: hsl(180, 100%, 41%); - --cyan-b: hsl(180, 99%, 32%); - --blue-a: hsl(213, 100%, 66%); - --blue-b: hsl(210, 73%, 53%); - --purple-a: hsl(260, 68%, 48%); - --purple-b: hsl(251, 66%, 36%); - --grey-a: hsl(210, 36%, 85%); - --grey-aa: hsl(210, 27%, 72.5%); - --grey-b: hsl(210, 18%, 60%); - --dark-grey-a: hsl(212, 14%, 40%); - --dark-grey-b: hsl(212, 29%, 19%); - --dark-grey-c: hsl(212, 29%, 15%); - --dark-grey-ca: hsl(212, 27%, 12%); - --dark-grey-d: hsl(212, 14%, 10%); - --dark-grey-e: hsl(212, 12%, 8%); - --dark-grey-f: hsl(212, 10%, 6%); + --red-0: #FF4D5B; + --red-1: #B23640; + --red-2: #661F25; - --foreground-color-a: var(--white-a); - --foreground-color-b: var(--grey-a); - --foreground-color-c: var(--grey-b); + --orange-0: #FF974D; + --orange-1: #B26A36; + --orange-2: #663C1F; - --background-color-a: hsl(var(--background-color-a-hsl)); - --background-color-b: hsl(var(--background-color-c-hsl)); - --background-color-ba: var(--dark-grey-ca); - --background-color-c: var(--dark-grey-d); - --background-color-d: var(--dark-grey-e); + --yellow-0: #FED24C; + --yellow-1: #B29336; + --yellow-2: #66541F; - --background-color-a-hsl: 212, 29%, 19%; - --background-color-c-hsl: 212, 29%, 15%; + --green-0: #4DFF8B; + --green-1: #36B261; + --green-2: #1F6638; - --scrollbar-color: hsla(211, 29%, 40%, 25%); + --cyan-0: #4DFFE1; + --cyan-1: #36B29E; + --cyan-2: #1F665A; + --light-blue-0: #4CDFFF; + --light-blue-1: #369CB2; + --light-blue-2: #1F5966; + + --blue-0: #4D9CFF; + --blue-1: #366DB2; + --blue-2: #1F3E66; + + --purple-0: #974DFF; + --purple-1: #6A36B2; + --purple-2: #3C1F66; + + --pink-0: #FF4DFF; + --pink-1: #B236B2; + --pink-2: #661F66; + + --white-0: #E5F2FF; + --white-1: #A0A9B2; + --white-2: #5C6166; + + --black-0: #29343F; + --black-1: #1E262E; + --black-2: #14191F; + --black-3: #0D1114; + --black-4: #080B0D; +} + +:root { + --foreground-color-0: var(--white-0); + --foreground-color-1: var(--white-1); + --foreground-color-2: var(--white-2); + + --background-color-0: var(--black-0); + --background-color-1: var(--black-1); + --background-color-2: var(--black-2); + --background-color-3: var(--black-3); + --background-color-4: var(--black-4); + + --scrollbar-color: color-mix(in srgb, var(--background-color-0) 25%, transparent); +} + +:root { + --border-radius-0: 0.2rem; + --border-radius-1: 0.375rem; + --border-radius-99: 9999px; + --window-shadow-size: 0.3rem; --window-shadow-opacity: 35%; --window-shadow-spread: 3; diff --git a/src/styles/utils.module.css b/src/styles/utils.module.css index 7f66f88..63dacb3 100644 --- a/src/styles/utils.module.css +++ b/src/styles/utils.module.css @@ -5,9 +5,9 @@ } .Text-light { - color: var(--foreground-color-c); + color: var(--foreground-color-1); font-size: 0.875em; - font-weight: 300; + font-weight: 400; letter-spacing: normal; }