danvics/ProzillaOS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added WebView component + web apps

Browse source
This commit is contained in:
Prozilla 2023-07-23 19:50:50 +02:00
parent af5f8a1e94
commit 2ccbfd91d4
No known key found for this signature in database
GPG key ID: 5858DFE71CAF31EE
14 changed files with 110 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -4,6 +4,8 @@
ProzillaOS is a web-based operating system inspired by Ubuntu Linux and Windows made with React by Prozilla.
[Live demo](https://os.prozilla.dev/)
<img src="public/media/Banner2.png"/>
> Please note that ProzillaOS is a WIP and far from complete. Many additional features will be added in the near future.

24
package-lock.json generated
View file

@ -16,10 +16,10 @@
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"core-js": "^3.31.1",
"dotenv": "^16.3.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-draggable": "^4.4.5",
"react-iframe": "^1.8.5",
"react-scripts": "5.0.1",
"react-svg": "^16.1.18",
"web-vitals": "^2.1.4"
@ -7045,17 +7045,6 @@
"tslib": "^2.0.3"
}
},
"node_modules/dotenv": {
"version": "16.3.1",
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
"integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==",
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/motdotla/dotenv?sponsor=1"
}
},
"node_modules/dotenv-expand": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
@ -14741,6 +14730,17 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
},
"node_modules/react-iframe": {
"version": "1.8.5",
"resolved": "https://registry.npmjs.org/react-iframe/-/react-iframe-1.8.5.tgz",
"integrity": "sha512-F4cQJGs3ydaG6fJWfuz9yLwOU0Trzl6kttXuUG+vYwosH8enOOFxZWEDQCSbNVO8ayjfYZeqLxEvdvcsSy4GvA==",
"dependencies": {
"object-assign": "^4.1.1"
},
"peerDependencies": {
"react": ">=16.x.x"
}
},
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

1
package.json
View file

@ -17,6 +17,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-draggable": "^4.4.5",
"react-iframe": "^1.8.5",
"react-scripts": "5.0.1",
"react-svg": "^16.1.18",
"web-vitals": "^2.1.4"

18
public/media/applications/icons/balls.svg Normal file
View file

@ -0,0 +1,18 @@
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="15" y="15" width="170" height="170" rx="35.7" fill="#48DBFB"/>
<g filter="url(#filter0_d_63_49)">
<path d="M118.72 99.7C122.987 100.7 126.287 102.767 128.62 105.9C131.02 108.967 132.22 112.533 132.22 116.6C132.22 122.8 130.154 127.6 126.02 131C121.954 134.333 116.087 136 108.42 136H71.3203V65.2H107.42C114.62 65.2 120.287 66.7667 124.42 69.9C128.554 73.0333 130.62 77.6 130.62 83.6C130.62 87.7333 129.52 91.2333 127.32 94.1C125.187 96.9 122.32 98.7667 118.72 99.7ZM93.5203 92.8H102.12C104.12 92.8 105.587 92.4 106.52 91.6C107.52 90.8 108.02 89.5667 108.02 87.9C108.02 86.1667 107.52 84.9 106.52 84.1C105.587 83.2333 104.12 82.8 102.12 82.8H93.5203V92.8ZM103.62 118.2C105.62 118.2 107.087 117.833 108.02 117.1C109.02 116.3 109.52 115.033 109.52 113.3C109.52 109.9 107.554 108.2 103.62 108.2H93.5203V118.2H103.62Z" fill="#FECA57"/>
</g>
<defs>
<filter id="filter0_d_63_49" x="51.3203" y="45.2" width="100.9" height="110.8" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="10"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_63_49"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_63_49" result="shape"/>
</filter>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

18
public/media/applications/icons/minesweeper.svg Normal file
View file

@ -0,0 +1,18 @@
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="15" y="15" width="170" height="170" rx="42" fill="#1DD1A1"/>
<g filter="url(#filter0_d_63_42)">
<path d="M64 58.0132V142.001C64 145.319 61.3188 148 58 148C54.6812 148 52 145.319 52 142.001V58.0132C52 54.695 54.6812 52.0141 58 52.0141C61.3188 52.0141 64 54.695 64 58.0132ZM71.65 114.78C71.0875 114.949 70.525 115.099 70 115.267V54.545C74.7812 53.2139 80.6875 52.0141 86.5 52.0141C93.3438 52.0141 99.3063 53.7201 104.425 55.1824L104.669 55.2574C110.012 56.7759 114.494 58.0132 119.5 58.0132C124.525 58.0132 129.419 56.7384 133.188 55.3699C135.044 54.695 136.544 54.0201 137.575 53.5326C138.081 53.2889 138.475 53.0827 138.738 52.9515C138.869 52.8765 138.944 52.839 139 52.8015L139.038 52.7828C140.894 51.7329 143.181 51.7329 145.019 52.8203C146.856 53.9076 148 55.8761 148 58.0132V106.006C148 108.275 146.725 110.356 144.681 111.368L142 106.006C144.681 111.368 144.681 111.368 144.681 111.368H144.663L144.625 111.387L144.494 111.462C144.381 111.518 144.212 111.593 144.025 111.687C143.612 111.874 143.05 112.137 142.337 112.436C140.894 113.055 138.869 113.861 136.431 114.667C131.594 116.298 124.9 118.004 118 118.004C111.062 118.004 105.775 116.242 101.312 114.761L101.125 114.705C96.625 113.205 92.9312 112.005 88 112.005C82.8438 112.005 76.7313 113.318 71.65 114.78Z" fill="#EE5253"/>
</g>
<defs>
<filter id="filter0_d_63_42" x="32" y="32" width="136" height="136" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="10"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_63_42"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_63_42" result="shape"/>
</filter>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

18
public/media/applications/icons/wordle.svg Normal file
View file

@ -0,0 +1,18 @@
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="15" y="15" width="170" height="170" rx="35.7" fill="#10AC84"/>
<g filter="url(#filter0_d_63_38)">
<path d="M152.52 65.2L136.32 136H108.72L100.52 95.8L92.3195 136H64.7195L48.5195 65.2H72.4195L78.8195 109.8L88.4195 65.2H112.62L122.22 109.8L128.62 65.2H152.52Z" fill="white"/>
</g>
<defs>
<filter id="filter0_d_63_38" x="28.5195" y="45.2" width="144" height="110.8" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="10"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_63_38"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_63_38" result="shape"/>
</filter>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
public/media/icons/close.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.32233 7.32233C17.0854 -2.44078 32.9146 -2.44078 42.6777 7.32233L100 64.6447L157.322 7.32233C167.085 -2.44078 182.915 -2.44078 192.678 7.32233C202.441 17.0854 202.441 32.9146 192.678 42.6777L135.355 100L192.678 157.322C202.441 167.085 202.441 182.915 192.678 192.678C182.915 202.441 167.085 202.441 157.322 192.678L100 135.355L42.6777 192.678C32.9146 202.441 17.0854 202.441 7.32233 192.678C-2.44078 182.915 -2.44078 167.085 7.32233 157.322L64.6447 100L7.32233 42.6777C-2.44078 32.9146 -2.44078 17.0854 7.32233 7.32233Z" fill="white"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 654 B

3
public/media/icons/maximize.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M42 0C18.804 0 0 18.804 0 42V158C0 181.196 18.804 200 42 200H158C181.196 200 200 181.196 200 158V42C200 18.804 181.196 0 158 0H42ZM158 63C158 51.402 148.598 42 137 42H63C51.402 42 42 51.402 42 63V137C42 148.598 51.402 158 63 158H137C148.598 158 158 148.598 158 137V63Z" fill="white"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 441 B

3
public/media/icons/minimize.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 100C0 112.703 8.95431 123 20 123H180C191.046 123 200 112.703 200 100C200 87.2975 191.046 77 180 77H20C8.95431 77 0 87.2975 0 100Z" fill="white"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 265 B

4
public/media/icons/search.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M133.182 80C133.182 113.325 107.343 139 77.0909 139C46.8391 139 21 113.325 21 80C21 46.6752 46.8391 21 77.0909 21C107.343 21 133.182 46.6752 133.182 80Z" stroke="white" stroke-width="42"/>
<path d="M120 120L175 175" stroke="white" stroke-width="42" stroke-linecap="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 390 B

13
src/components/applications/templates/WebView.jsx Normal file
View file

@ -0,0 +1,13 @@
import Iframe from "react-iframe";
import styles from "./WebView.module.css";
/**
* @param {Object} props
* @param {String} props.source
* @returns
*/
export function WebView(props) {
return (
<Iframe url={props.source} className={styles["Web-view"]} {...props}/>
);
}

6
src/components/applications/templates/WebView.module.css Normal file
View file

@ -0,0 +1,6 @@
.Web-view {
width: 100%;
height: 100%;
border: none;
background: none;
}

5
src/features/applications/application.js
View file

@ -1,4 +1,9 @@
export default class Application {
/**
* @param {String} name
* @param {String} id
* @param {React.ReactElement} windowContent
*/
constructor(name, id, windowContent) {
Object.assign(this, { name, id, windowContent });
}

4
src/features/applications/applications.js
View file

@ -1,4 +1,5 @@
/* eslint-disable eqeqeq */
import { WebView } from "../../components/applications/templates/WebView.jsx";
import { Terminal } from "../../components/applications/terminal/Terminal.js";
import Application from "./application.js";
@ -9,6 +10,9 @@ export default class ApplicationsManager {
new Application("Code Editor", "code-editor"),
new Application("File Explorer", "file-explorer"),
new Application("Media Viewer", "media-viewer"),
new Application("Wordle", "wordle", <WebView source="https://prozilla.dev/wordle"/>),
new Application("Balls", "balls", <WebView source="https://prozilla.dev/ball-maze"/>),
new Application("Minesweeper", "minesweeper", <WebView source="https://prozilla.dev/minesweeper"/>),
]
static getApplication(id) {