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

Replaced react starter app

Browse source
This commit is contained in:
Prozilla 2023-07-13 23:00:14 +02:00
parent e1111886f6
commit 6f8b991120
No known key found for this signature in database
GPG key ID: 5858DFE71CAF31EE
13 changed files with 306 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
package-lock.json generated
View file

@ -8,6 +8,9 @@
"name": "prozilla-os", "name": "prozilla-os",
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@testing-library/jest-dom": "^5.16.5", "@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
@ -2377,6 +2380,51 @@
"node": "^12.22.0 || ^14.17.0 || >=16.0.0" "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
} }
}, },
"node_modules/@fortawesome/fontawesome-common-types": {
"version": "6.4.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz",
"integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==",
"hasInstallScript": true,
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/fontawesome-svg-core": {
"version": "6.4.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz",
"integrity": "sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.4.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-solid-svg-icons": {
"version": "6.4.0",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz",
"integrity": "sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.4.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/react-fontawesome": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
"integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
"dependencies": {
"prop-types": "^15.8.1"
},
"peerDependencies": {
"@fortawesome/fontawesome-svg-core": "~1 || ~6",
"react": ">=16.3"
}
},
"node_modules/@humanwhocodes/config-array": { "node_modules/@humanwhocodes/config-array": {
"version": "0.11.10", "version": "0.11.10",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",

3
package.json
View file

@ -3,6 +3,9 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@testing-library/jest-dom": "^5.16.5", "@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",

4
public/index.html
View file

@ -7,7 +7,7 @@
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
name="description" name="description"
content="Web site created using create-react-app" content="ProzillaOS"
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- <!--
@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>ProzillaOS</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

4
public/manifest.json
View file

@ -1,6 +1,6 @@
{ {
"short_name": "React App", "short_name": "ProzillaOS",
"name": "Create React App Sample", "name": "ProzillaOS",
"icons": [ "icons": [
{ {
"src": "favicon.ico", "src": "favicon.ico",

BIN
public/media/wallpaper.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 79 KiB

5
src/App.css
View file

@ -1,5 +1,9 @@
.App { .App {
background-image: url("/public/media/wallpaper.webp");
background-size: cover;
text-align: center; text-align: center;
width: 100%;
height: 100%;
} }
.App-logo { .App-logo {
@ -14,7 +18,6 @@
} }
.App-header { .App-header {
background-color: #282c34;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

19
src/App.js
View file

@ -1,23 +1,10 @@
import logo from './logo.svg'; import "./App.css";
import './App.css'; import { TaskBar } from "./components/TaskBar.js";
function App() { function App() {
return ( return (
<div className="App"> <div className="App">
<header className="App-header"> <TaskBar/>
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div> </div>
); );
} }

6
src/App.test.js
View file

@ -1,7 +1,7 @@
import { render, screen } from '@testing-library/react'; import { render, screen } from "@testing-library/react";
import App from './App'; import App from "./App";
test('renders learn react link', () => { test("renders learn react link", () => {
render(<App />); render(<App />);
const linkElement = screen.getByText(/learn react/i); const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument(); expect(linkElement).toBeInTheDocument();

61
src/components/TaskBar.css Normal file
View file

@ -0,0 +1,61 @@
.Task-bar {
position: fixed;
display: flex;
justify-content: space-between;
bottom: 0;
left: 0;
width: 100%;
height: 3rem;
background-color: rgba(0, 0, 0, 75%);
}
button {
color: white;
background: none;
cursor: pointer;
border: none;
outline: none;
}
button:hover {
background-color: rgba(255, 255, 255, 5%);
}
.Program-icons {
display: flex;
align-items: center;
height: 100%;
margin-left: 0.5rem;
}
.Program-icons > * {
height: 100%;
padding: 0.75rem;
}
.Program-icons > * > svg {
height: 1.25rem;
}
.Util-icons {
display: flex;
justify-content: flex-end;
align-items: center;
height: 100%;
}
.Util-icons > * {
height: 100%;
}
.Util-icons > * > svg {
height: 1rem;
}
#desktop-button {
border-left: 1px solid rgba(255, 255, 255, 50%);
height: 100%;
width: 0.5rem;
padding: 0;
margin-left: 1rem;
}

66
src/components/TaskBar.js Normal file
View file

@ -0,0 +1,66 @@
import { useEffect, useState } from "react";
import "./TaskBar.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBatteryFull, faCamera, faCode, faFolder, faGlobe, faSearch, faTerminal, faVolumeHigh, faWifi } from "@fortawesome/free-solid-svg-icons";
export function TaskBar() {
const [date, setDate] = useState(new Date());
useEffect(() => {
setInterval(() => {
setDate(new Date());
}, 30000);
}, []);
return (
<div className="Task-bar">
<div className="Program-icons">
<button>
<FontAwesomeIcon icon={faSearch}/>
</button>
<button>
<FontAwesomeIcon icon={faFolder}/>
</button>
<button>
<FontAwesomeIcon icon={faTerminal}/>
</button>
<button>
<FontAwesomeIcon icon={faCode}/>
</button>
<button>
<FontAwesomeIcon icon={faCamera}/>
</button>
<button>
<FontAwesomeIcon icon={faGlobe}/>
</button>
</div>
<div className="Util-icons">
<button>
<FontAwesomeIcon icon={faBatteryFull}/>
</button>
<button>
<FontAwesomeIcon icon={faWifi}/>
</button>
<button>
<FontAwesomeIcon icon={faVolumeHigh}/>
</button>
<button>
{date.toLocaleString("en-US", {
hour: "numeric",
minute: "numeric",
hour12: false,
})}
<br/>
{date.toLocaleDateString("en-GB", {
day: "numeric",
month: "short",
year: "numeric",
})}
</button>
<button id="desktop-button">
</button>
</div>
</div>
);
}

5
src/index.css
View file

@ -11,3 +11,8 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace; monospace;
} }
html, body, #root {
width: 100%;
height: 100%;
}

12
src/index.js
View file

@ -1,10 +1,10 @@
import React from 'react'; import React from "react";
import ReactDOM from 'react-dom/client'; import ReactDOM from "react-dom/client";
import './index.css'; import "./index.css";
import App from './App'; import App from "./App";
import reportWebVitals from './reportWebVitals'; import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(document.getElementById('root')); const root = ReactDOM.createRoot(document.getElementById("root"));
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<App /> <App />

2
src/reportWebVitals.js
View file

@ -1,6 +1,6 @@
const reportWebVitals = onPerfEntry => { const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) { if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry); getCLS(onPerfEntry);
getFID(onPerfEntry); getFID(onPerfEntry);
getFCP(onPerfEntry); getFCP(onPerfEntry);