Added custom wallpaper + app icons
This commit is contained in:
Prozilla
parent
afdede17bb
commit
3a5a6058fd
13 changed files with 160 additions and 27 deletions
|
|
@ -36,6 +36,10 @@ Yes, you read that right. ProzillaOS will have playable games. Initially, the on
|
|||
|
||||
See [docs](docs) for more information.
|
||||
|
||||
## Design
|
||||
|
||||
ProzillaOS was designed in Figma. You can find the design file [here](https://www.figma.com/file/bEE5RyWgV0QILcXpZWEk2r/ProzillaOS?type=design&node-id=0%3A1&mode=design&t=7KR1tKCp9H5cK3hf-1).
|
||||
|
||||
## License
|
||||
|
||||
This project is licensed under the MIT license, Copyright (c) 2023 Sieben De Beule. For more information see [LICENSE.md](LICENSE.md).
|
||||
26
package-lock.json
generated
26
package-lock.json
generated
|
|
@ -17,6 +17,7 @@
|
|||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-svg": "^16.1.18",
|
||||
"web-vitals": "^2.1.4"
|
||||
}
|
||||
},
|
||||
|
|
@ -3634,6 +3635,16 @@
|
|||
"url": "https://github.com/sponsors/gregberge"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanem/svg-injector": {
|
||||
"version": "10.1.60",
|
||||
"resolved": "https://registry.npmjs.org/@tanem/svg-injector/-/svg-injector-10.1.60.tgz",
|
||||
"integrity": "sha512-yzdF0f7TZI7MrMieJLu5VYEJuL0WneFCabLvBfpNWDoWikzQPW8V9tpEqHa2A4kKJDiXUzsIoqtPEvGj9xsPgQ==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.22.5",
|
||||
"content-type": "^1.0.5",
|
||||
"tslib": "^2.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/dom": {
|
||||
"version": "9.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.1.tgz",
|
||||
|
|
@ -14622,6 +14633,21 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-svg": {
|
||||
"version": "16.1.18",
|
||||
"resolved": "https://registry.npmjs.org/react-svg/-/react-svg-16.1.18.tgz",
|
||||
"integrity": "sha512-XAnrAfW03GDDD1uLEZFoEu8Ij7CkojIaNeba7KCInWnS9dFSEfFD3VbGSlKFUmkhQimfFmtJoRloowKNVJQ9gw==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.22.5",
|
||||
"@tanem/svg-injector": "^10.1.59",
|
||||
"@types/prop-types": "^15.7.5",
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.0.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/read-cache": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-svg": "^16.1.18",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
18
public/media/applications/icons/browser.svg
Normal file
18
public/media/applications/icons/browser.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M59.1521 108C54.1521 88 85.1521 46 56.652 42.5C28.152 39 3.65204 73.5 8.65204 117C13.652 160.5 59.152 199 104.152 196.5C149.152 194 189.652 162.5 191.152 110C192.652 57.5 151.152 22.5 130.652 4C124.152 12 111.152 30.5 118.152 56C125.152 81.5 144.652 83 144.652 101C144.652 119 132.652 145 107.152 148C81.6519 151 64.1521 128 59.1521 108Z" fill="#5F27CD"/>
|
||||
<g filter="url(#filter0_d_4_26)">
|
||||
<circle cx="100" cy="100" r="53" fill="#FECA57"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_4_26" x="27" y="27" width="146" height="146" 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_4_26"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4_26" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
23
public/media/applications/icons/code-editor.svg
Normal file
23
public/media/applications/icons/code-editor.svg
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4_24)">
|
||||
<path d="M139.608 13.3976C146.038 13.3976 151.981 16.8284 155.196 22.3976L194.804 91.0001C198.019 96.5694 198.019 103.431 194.804 109L155.196 177.603C151.981 183.172 146.038 186.603 139.608 186.603L60.3923 186.603C53.9615 186.603 48.0192 183.172 44.8038 177.603L5.19615 109C1.98076 103.431 1.98076 96.5694 5.19615 91.0001L44.8038 22.3976C48.0192 16.8284 53.9615 13.3976 60.3923 13.3976L139.608 13.3976Z" fill="#54A0FF"/>
|
||||
<g filter="url(#filter0_d_4_24)">
|
||||
<path d="M90.8816 156.889L77.3483 152.948C75.9284 152.547 75.1298 151.055 75.5291 149.63L105.813 44.929C106.212 43.5039 107.698 42.7022 109.118 43.1031L122.652 47.0444C124.072 47.4452 124.87 48.9371 124.471 50.3622L94.1873 155.063C93.7658 156.488 92.3015 157.312 90.8816 156.889ZM65.5899 131.905L75.2407 121.573C76.2612 120.482 76.1947 118.745 75.0632 117.743L54.9629 99.996L75.0632 82.249C76.1947 81.2469 76.2834 79.5101 75.2407 78.419L65.5899 68.087C64.5915 67.0181 62.9054 66.9513 61.8183 67.9756L29.8486 98.0365C28.7171 99.0831 28.7171 100.887 29.8486 101.933L61.8183 132.016C62.9054 133.041 64.5915 132.996 65.5899 131.905ZM138.182 132.039L170.151 101.956C171.283 100.909 171.283 99.1053 170.151 98.0588L138.182 67.9534C137.117 66.9513 135.431 66.9959 134.41 68.0647L124.759 78.3967C123.739 79.4878 123.805 81.2247 124.937 82.2267L145.037 99.996L124.937 117.743C123.805 118.745 123.717 120.482 124.759 121.573L134.41 131.905C135.408 132.996 137.095 133.041 138.182 132.039Z" fill="#222F3E"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_4_24" x="9" y="23" width="182" height="154" 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_4_24"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4_24" result="shape"/>
|
||||
</filter>
|
||||
<clipPath id="clip0_4_24">
|
||||
<rect width="200" height="200" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
23
public/media/applications/icons/file-explorer.svg
Normal file
23
public/media/applications/icons/file-explorer.svg
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M181.25 41.5H106.25L81.25 25H18.75C8.39453 25 0 33.3945 0 43.75V156.25C0 166.605 8.39453 175 18.75 175H181.25C191.605 175 200 166.605 200 156.25V60.25C200 49.8945 191.605 41.5 181.25 41.5Z" fill="url(#paint0_linear_4_22)"/>
|
||||
<rect y="61" width="200" height="114" rx="18" fill="#576574"/>
|
||||
<g filter="url(#filter0_d_4_22)">
|
||||
<rect x="55" y="108" width="90" height="20" rx="10" fill="#8395A7"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_4_22" x="35" y="88" width="130" height="60" 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_4_22"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4_22" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_4_22" x1="100" y1="25" x2="100" y2="175" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.109375" stop-color="#FF6B6B"/>
|
||||
<stop offset="0.390625" stop-color="#7A1F1F"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
31
public/media/applications/icons/media-viewer.svg
Normal file
31
public/media/applications/icons/media-viewer.svg
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M200 56.25V168.75C200 179.102 191.602 187.5 181.25 187.5H18.75C8.39844 187.5 0 179.102 0 168.75V56.25C0 45.8984 8.39844 37.5 18.75 37.5H53.125L57.9297 24.6484C60.6641 17.3437 67.6562 12.5 75.4688 12.5H124.492C132.305 12.5 139.297 17.3437 142.031 24.6484L146.875 37.5H181.25C191.602 37.5 200 45.8984 200 56.25ZM146.875 112.5C146.875 86.6406 125.859 65.625 100 65.625C74.1406 65.625 53.125 86.6406 53.125 112.5C53.125 138.359 74.1406 159.375 100 159.375C125.859 159.375 146.875 138.359 146.875 112.5Z" fill="#576574"/>
|
||||
<g filter="url(#filter0_d_4_25)">
|
||||
<path d="M100 168C130.312 168 155 143.312 155 113C155 82.6875 130.312 58 100 58C69.6875 58 45 82.6875 45 113C45 143.312 69.6875 168 100 168Z" fill="#8395A7"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d_4_25)">
|
||||
<path d="M100 151C120.943 151 138 133.719 138 112.5C138 91.2812 120.943 74 100 74C79.0568 74 62 91.2812 62 112.5C62 133.719 79.0568 151 100 151Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_4_25" x="25" y="38" width="150" height="150" 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_4_25"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4_25" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d_4_25" x="42" y="54" width="116" height="117" 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_4_25"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4_25" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
18
public/media/applications/icons/terminal.svg
Normal file
18
public/media/applications/icons/terminal.svg
Normal 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 y="25" width="200" height="150" rx="18" fill="#222F3E"/>
|
||||
<g filter="url(#filter0_d_4_23)">
|
||||
<path d="M87.7901 103.813L49.5288 142.476C47.6835 144.341 44.6918 144.341 42.8467 142.476L38.3839 137.967C36.5418 136.105 36.5382 133.088 38.3761 131.223L68.6991 100.437L38.3763 69.6522C36.5384 67.7863 36.542 64.7694 38.3841 62.9079L42.8467 58.3985C44.692 56.5338 47.6837 56.5338 49.5288 58.3985L87.7901 97.0612C89.6354 98.9257 89.6354 101.949 87.7901 103.813ZM163 140.225V133.859C163 131.222 160.885 129.085 158.275 129.085H98.4251C95.8155 129.085 93.7001 131.222 93.7001 133.859V140.225C93.7001 142.862 95.8155 145 98.4251 145H158.275C160.885 145 163 142.862 163 140.225Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_4_23" x="17" y="37" width="166" height="128" 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_4_23"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4_23" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
BIN
public/media/wallpapers/wallpaper-1.png
Normal file
BIN
public/media/wallpapers/wallpaper-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 185 KiB |
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 79 KiB |
23
src/App.css
23
src/App.css
|
|
@ -1,5 +1,5 @@
|
|||
.App {
|
||||
background-image: url("/public/media/wallpaper.webp");
|
||||
background-image: url("/public/media/wallpapers/wallpaper-1.png");
|
||||
background-size: cover;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
|
@ -11,12 +11,6 @@
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
|
|
@ -25,17 +19,4 @@
|
|||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -37,6 +37,13 @@ button:hover {
|
|||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.Program-icons > * > div,
|
||||
.Program-icons > * > div > div,
|
||||
.Program-icons > * > div > div > svg {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.Util-icons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
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";
|
||||
import { faBatteryFull, faSearch, faVolumeHigh, faWifi } from "@fortawesome/free-solid-svg-icons";
|
||||
import { ReactSVG } from "react-svg";
|
||||
|
||||
export function TaskBar() {
|
||||
const [date, setDate] = useState(new Date());
|
||||
|
|
@ -19,19 +20,19 @@ export function TaskBar() {
|
|||
<FontAwesomeIcon icon={faSearch}/>
|
||||
</button>
|
||||
<button>
|
||||
<FontAwesomeIcon icon={faFolder}/>
|
||||
<ReactSVG src={process.env.PUBLIC_URL + "/media/applications/icons/file-explorer.svg"}/>
|
||||
</button>
|
||||
<button>
|
||||
<FontAwesomeIcon icon={faTerminal}/>
|
||||
<ReactSVG src={process.env.PUBLIC_URL + "/media/applications/icons/terminal.svg"}/>
|
||||
</button>
|
||||
<button>
|
||||
<FontAwesomeIcon icon={faCode}/>
|
||||
<ReactSVG src={process.env.PUBLIC_URL + "/media/applications/icons/code-editor.svg"}/>
|
||||
</button>
|
||||
<button>
|
||||
<FontAwesomeIcon icon={faCamera}/>
|
||||
<ReactSVG src={process.env.PUBLIC_URL + "/media/applications/icons/media-viewer.svg"}/>
|
||||
</button>
|
||||
<button>
|
||||
<FontAwesomeIcon icon={faGlobe}/>
|
||||
<ReactSVG src={process.env.PUBLIC_URL + "/media/applications/icons/browser.svg"}/>
|
||||
</button>
|
||||
</div>
|
||||
<div className="Util-icons">
|
||||
|
|
|
|||
Loading…
Reference in a new issue