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"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- Favicon --> <!-- Favicon -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/media/logo.svg"> <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/media/logo.svg"/>
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/media/logo.svg"> <link rel="mask-icon" href="%PUBLIC_URL%/media/logo.svg" color="#1dd1a1"/>
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/media/logo.svg"> <meta name="msapplication-TileColor" content="#222f3e"/>
<link rel="mask-icon" href="%PUBLIC_URL%/media/logo.svg" color="#1dd1a1"> <meta name="theme-color" content="#1dd1a1"/>
<meta name="msapplication-TileColor" content="#222f3e">
<meta name="theme-color" content="#1dd1a1">
<!-- Open Graph --> <!-- Open Graph -->
<meta property="og:title" content="ProzillaOS"> <meta property="og:title" content="ProzillaOS"/>
<meta property="og:site_name" 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: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:type" content="website"/>
<meta property="og:image" content="%PUBLIC_URL%/media/Banner2.png"> <meta property="og:image" content="%PUBLIC_URL%/media/Banner2.png"/>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run ProzillaOS.</noscript> <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 ( return (
<div className={styles.Container}> <div className={styles.Container}>
<div className={styles.Header}> <div className={styles.Header}>
<button className={styles["Icon-button"]}> <button title="Back" className={styles["Icon-button"]}>
<FontAwesomeIcon icon={faCaretLeft}/> <FontAwesomeIcon icon={faCaretLeft}/>
</button> </button>
<button className={styles["Icon-button"]}> <button title="Forward" className={styles["Icon-button"]}>
<FontAwesomeIcon icon={faCaretRight}/> <FontAwesomeIcon icon={faCaretRight}/>
</button> </button>
<button className={styles["Icon-button"]} onClick={() => { changeDirectory(".."); }}> <button title="Up" className={styles["Icon-button"]} onClick={() => { changeDirectory(".."); }}>
<FontAwesomeIcon icon={faArrowUp}/> <FontAwesomeIcon icon={faArrowUp}/>
</button> </button>
<input <input
@ -77,35 +77,35 @@ export function FileExplorer() {
onChange={onPathChange} onChange={onPathChange}
onKeyDown={onKeyDown} onKeyDown={onKeyDown}
/> />
<button className={styles["Icon-button"]}> <button title="Search" className={styles["Icon-button"]}>
<FontAwesomeIcon icon={faSearch}/> <FontAwesomeIcon icon={faSearch}/>
</button> </button>
<button className={styles["Icon-button"]}> <button title="Settings" className={styles["Icon-button"]}>
<FontAwesomeIcon icon={faCog}/> <FontAwesomeIcon icon={faCog}/>
</button> </button>
</div> </div>
<div className={styles.Body}> <div className={styles.Body}>
<div className={styles.Sidebar}> <div className={styles.Sidebar}>
<button className={styles["Nav-button"]} onClick={() => { changeDirectory("~"); }}> <button title="Home" className={styles["Nav-button"]} onClick={() => { changeDirectory("~"); }}>
<FontAwesomeIcon icon={faHouse}/> <FontAwesomeIcon icon={faHouse}/>
Home Home
</button> </button>
<button className={styles["Nav-button"]} onClick={() => { changeDirectory("~/Desktop"); }}> <button title="Desktop" className={styles["Nav-button"]} onClick={() => { changeDirectory("~/Desktop"); }}>
<FontAwesomeIcon icon={faDesktop}/> <FontAwesomeIcon icon={faDesktop}/>
Desktop Desktop
</button> </button>
<button className={styles["Nav-button"]} onClick={() => { changeDirectory("~/Documents"); }}> <button title="Documents" className={styles["Nav-button"]} onClick={() => { changeDirectory("~/Documents"); }}>
<FontAwesomeIcon icon={faFileLines}/> <FontAwesomeIcon icon={faFileLines}/>
Documents Documents
</button> </button>
<button className={styles["Nav-button"]} onClick={() => { changeDirectory("~/Images"); }}> <button title="Images" className={styles["Nav-button"]} onClick={() => { changeDirectory("~/Images"); }}>
<FontAwesomeIcon icon={faImage}/> <FontAwesomeIcon icon={faImage}/>
Images Images
</button> </button>
</div> </div>
<div className={styles.Main}> <div className={styles.Main}>
{currentDirectory.files.map((file, index) => {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(); event.preventDefault();
windowsManager.openFile(file); windowsManager.openFile(file);
}}> }}>
@ -114,7 +114,7 @@ export function FileExplorer() {
</button> </button>
)} )}
{currentDirectory.subFolders.map(({ name }, index) => {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); changeDirectory(name);
}}> }}>
<FontAwesomeIcon icon={faFolder}/> <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 // eslint-disable-next-line react-hooks/exhaustive-deps
}, [windows]); }, [windows]);
return (<button className={active ? `${styles["App-icon"]} ${styles["Active"]}` : styles["App-icon"]} key={app.id} onClick={() => { windowsManager.open(app.id); }}> const classNames = [styles["App-icon"]];
<ReactSVG src={process.env.PUBLIC_URL + `/media/applications/icons/${app.id}.svg`}/> if (active)
</button>); 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() { export function Taskbar() {
@ -40,7 +50,7 @@ export function Taskbar() {
return ( return (
<div className={styles["Task-bar"]}> <div className={styles["Task-bar"]}>
<div className={styles["Program-icons"]}> <div className={styles["Program-icons"]}>
<button> <button title="Search">
<FontAwesomeIcon icon={faSearch}/> <FontAwesomeIcon icon={faSearch}/>
</button> </button>
{ApplicationsManager.APPLICATIONS.map((app) => {ApplicationsManager.APPLICATIONS.map((app) =>
@ -48,16 +58,16 @@ export function Taskbar() {
)} )}
</div> </div>
<div className={styles["Util-icons"]}> <div className={styles["Util-icons"]}>
<button> <button title="Battery">
<FontAwesomeIcon icon={faBatteryFull}/> <FontAwesomeIcon icon={faBatteryFull}/>
</button> </button>
<button> <button title="Wifi">
<FontAwesomeIcon icon={faWifi}/> <FontAwesomeIcon icon={faWifi}/>
</button> </button>
<button> <button title="Volume">
<FontAwesomeIcon icon={faVolumeHigh}/> <FontAwesomeIcon icon={faVolumeHigh}/>
</button> </button>
<button style={{ userSelect: "none" }}> <button title="Date & Time" style={{ userSelect: "none" }}>
{date.toLocaleString("en-US", { {date.toLocaleString("en-US", {
hour: "numeric", hour: "numeric",
minute: "numeric", minute: "numeric",
@ -70,7 +80,7 @@ export function Taskbar() {
year: "numeric", year: "numeric",
})} })}
</button> </button>
<button id="desktop-button"/> <button title="View Desktop" id="desktop-button"/>
</div> </div>
</div> </div>
); );

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

@ -14,13 +14,13 @@ export function DropdownButton({ label, options }) {
return ( return (
<OutsideClickListener onOutsideClick={() => { setOpen(false); }}> <OutsideClickListener onOutsideClick={() => { setOpen(false); }}>
<div className={styles.Container}> <div className={styles.Container}>
<button className={styles.Button} onClick={() => { setOpen(!open) }}> <button title={label} className={styles.Button} onClick={() => { setOpen(!open) }}>
{label} {label}
</button> </button>
{open && options {open && options
? (<div className={styles.Dropdown}> ? (<div className={styles.Dropdown}>
{Object.entries(options).map(([label, callback]) => {Object.entries(options).map(([label, callback]) =>
<button key={label} onClick={() => { <button title={label} key={label} onClick={() => {
setOpen(false); setOpen(false);
callback(); 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`}> <div className={`${styles.Header} Handle`}>
<ReactSVG className={styles["Window-icon"]} src={process.env.PUBLIC_URL + `/media/applications/icons/${app.id}.svg`}/> <ReactSVG className={styles["Window-icon"]} src={process.env.PUBLIC_URL + `/media/applications/icons/${app.id}.svg`}/>
<p>{title}</p> <p>{title}</p>
<button onClick={() => setMinimized(!minimized)}> <button title="Minimize" onClick={() => setMinimized(!minimized)}>
<FontAwesomeIcon icon={faMinus}/> <FontAwesomeIcon icon={faMinus}/>
</button> </button>
<button onClick={() => setMaximized(!maximized)}> <button title="Maximize" onClick={() => setMaximized(!maximized)}>
<FontAwesomeIcon icon={faSquare}/> <FontAwesomeIcon icon={faSquare}/>
</button> </button>
<button onClick={close}> <button title="Close" onClick={close}>
<FontAwesomeIcon icon={faXmark}/> <FontAwesomeIcon icon={faXmark}/>
</button> </button>
</div> </div>