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

Updated SEO

Browse source
This commit is contained in:
Prozilla 2023-07-29 19:54:49 +02:00
parent 04cd2c9ed2
commit a99142b9c5
No known key found for this signature in database
GPG key ID: 5858DFE71CAF31EE
6 changed files with 46 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/apple-touch-icon.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 13 KiB

22
public/index.html
View file

@ -8,20 +8,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- Favicon -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/media/logo.svg">
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/media/logo.svg">
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/media/logo.svg">
<link rel="mask-icon" href="%PUBLIC_URL%/media/logo.svg" color="#1dd1a1">
<meta name="msapplication-TileColor" content="#222f3e">
<meta name="theme-color" content="#1dd1a1">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
<link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/media/logo.svg"/>
<link rel="mask-icon" href="%PUBLIC_URL%/media/logo.svg" color="#1dd1a1"/>
<meta name="msapplication-TileColor" content="#222f3e"/>
<meta name="theme-color" content="#1dd1a1"/>
<!-- Open Graph -->
<meta property="og:title" content="ProzillaOS">
<meta property="og:site_name" content="ProzillaOS">
<meta property="og:description" content="ProzillaOS is a web-based operating system inspired by Ubuntu Linux and Windows made with React by Prozilla.">
<meta property="og:type" content="website">
<meta property="og:image" content="%PUBLIC_URL%/media/Banner2.png">
<meta property="og:title" content="ProzillaOS"/>
<meta property="og:site_name" content="ProzillaOS"/>
<meta property="og:description" content="ProzillaOS is a web-based operating system inspired by Ubuntu Linux and Windows made with React by Prozilla."/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="%PUBLIC_URL%/media/Banner2.png"/>
</head>
<body>
<noscript>You need to enable JavaScript to run ProzillaOS.</noscript>

24
src/components/applications/file-explorer/FileExplorer.jsx
View file

@ -61,13 +61,13 @@ export function FileExplorer() {
return (
<div className={styles.Container}>
<div className={styles.Header}>
<button className={styles["Icon-button"]}>
<button title="Back" className={styles["Icon-button"]}>
<FontAwesomeIcon icon={faCaretLeft}/>
</button>
<button className={styles["Icon-button"]}>
<button title="Forward" className={styles["Icon-button"]}>
<FontAwesomeIcon icon={faCaretRight}/>
</button>
<button className={styles["Icon-button"]} onClick={() => { changeDirectory(".."); }}>
<button title="Up" className={styles["Icon-button"]} onClick={() => { changeDirectory(".."); }}>
<FontAwesomeIcon icon={faArrowUp}/>
</button>
<input
@ -77,35 +77,35 @@ export function FileExplorer() {
onChange={onPathChange}
onKeyDown={onKeyDown}
/>
<button className={styles["Icon-button"]}>
<FontAwesomeIcon icon={faSearch}/>
<button title="Search" className={styles["Icon-button"]}>
<FontAwesomeIcon icon={faSearch}/>
</button>
<button className={styles["Icon-button"]}>
<button title="Settings" className={styles["Icon-button"]}>
<FontAwesomeIcon icon={faCog}/>
</button>
</div>
<div className={styles.Body}>
<div className={styles.Sidebar}>
<button className={styles["Nav-button"]} onClick={() => { changeDirectory("~"); }}>
<button title="Home" className={styles["Nav-button"]} onClick={() => { changeDirectory("~"); }}>
<FontAwesomeIcon icon={faHouse}/>
Home
</button>
<button className={styles["Nav-button"]} onClick={() => { changeDirectory("~/Desktop"); }}>
<button title="Desktop" className={styles["Nav-button"]} onClick={() => { changeDirectory("~/Desktop"); }}>
<FontAwesomeIcon icon={faDesktop}/>
Desktop
</button>
<button className={styles["Nav-button"]} onClick={() => { changeDirectory("~/Documents"); }}>
<button title="Documents" className={styles["Nav-button"]} onClick={() => { changeDirectory("~/Documents"); }}>
<FontAwesomeIcon icon={faFileLines}/>
Documents
</button>
<button className={styles["Nav-button"]} onClick={() => { changeDirectory("~/Images"); }}>
<button title="Images" className={styles["Nav-button"]} onClick={() => { changeDirectory("~/Images"); }}>
<FontAwesomeIcon icon={faImage}/>
Images
</button>
</div>
<div className={styles.Main}>
{currentDirectory.files.map((file, index) =>
<button key={index} className={styles["File-button"]} onClick={(event) => {
<button key={index} title={file.id} className={styles["File-button"]} onClick={(event) => {
event.preventDefault();
windowsManager.openFile(file);
}}>
@ -114,7 +114,7 @@ export function FileExplorer() {
</button>
)}
{currentDirectory.subFolders.map(({ name }, index) =>
<button key={index} className={styles["Folder-button"]} onClick={() => {
<button key={index} title={name} className={styles["Folder-button"]} onClick={() => {
changeDirectory(name);
}}>
<FontAwesomeIcon icon={faFolder}/>

28
src/components/task-bar/TaskBar.jsx
View file

@ -23,9 +23,19 @@ function AppButton({ app }) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [windows]);
return (<button className={active ? `${styles["App-icon"]} ${styles["Active"]}` : styles["App-icon"]} key={app.id} onClick={() => { windowsManager.open(app.id); }}>
<ReactSVG src={process.env.PUBLIC_URL + `/media/applications/icons/${app.id}.svg`}/>
</button>);
const classNames = [styles["App-icon"]];
if (active)
classNames.push(styles.Active);
return (
<button
className={classNames.join(" ")}
onClick={() => { windowsManager.open(app.id); }}
title={app.name}
>
<ReactSVG src={process.env.PUBLIC_URL + `/media/applications/icons/${app.id}.svg`}/>
</button>
);
}
export function Taskbar() {
@ -40,7 +50,7 @@ export function Taskbar() {
return (
<div className={styles["Task-bar"]}>
<div className={styles["Program-icons"]}>
<button>
<button title="Search">
<FontAwesomeIcon icon={faSearch}/>
</button>
{ApplicationsManager.APPLICATIONS.map((app) =>
@ -48,16 +58,16 @@ export function Taskbar() {
)}
</div>
<div className={styles["Util-icons"]}>
<button>
<button title="Battery">
<FontAwesomeIcon icon={faBatteryFull}/>
</button>
<button>
<button title="Wifi">
<FontAwesomeIcon icon={faWifi}/>
</button>
<button>
<button title="Volume">
<FontAwesomeIcon icon={faVolumeHigh}/>
</button>
<button style={{ userSelect: "none" }}>
<button title="Date & Time" style={{ userSelect: "none" }}>
{date.toLocaleString("en-US", {
hour: "numeric",
minute: "numeric",
@ -70,7 +80,7 @@ export function Taskbar() {
year: "numeric",
})}
</button>
<button id="desktop-button"/>
<button title="View Desktop" id="desktop-button"/>
</div>
</div>
);

4
src/components/utils/DropdownButton.jsx
View file

@ -14,13 +14,13 @@ export function DropdownButton({ label, options }) {
return (
<OutsideClickListener onOutsideClick={() => { setOpen(false); }}>
<div className={styles.Container}>
<button className={styles.Button} onClick={() => { setOpen(!open) }}>
<button title={label} className={styles.Button} onClick={() => { setOpen(!open) }}>
{label}
</button>
{open && options
? (<div className={styles.Dropdown}>
{Object.entries(options).map(([label, callback]) =>
<button key={label} onClick={() => {
<button title={label} key={label} onClick={() => {
setOpen(false);
callback();
}}>

6
src/components/windows/Window.jsx
View file

@ -81,13 +81,13 @@ export function Window({ id, app, size, position, focused = false, onInteract, o
<div className={`${styles.Header} Handle`}>
<ReactSVG className={styles["Window-icon"]} src={process.env.PUBLIC_URL + `/media/applications/icons/${app.id}.svg`}/>
<p>{title}</p>
<button onClick={() => setMinimized(!minimized)}>
<button title="Minimize" onClick={() => setMinimized(!minimized)}>
<FontAwesomeIcon icon={faMinus}/>
</button>
<button onClick={() => setMaximized(!maximized)}>
<button title="Maximize" onClick={() => setMaximized(!maximized)}>
<FontAwesomeIcon icon={faSquare}/>
</button>
<button onClick={close}>
<button title="Close" onClick={close}>
<FontAwesomeIcon icon={faXmark}/>
</button>
</div>