├── .gitignore ├── LICENSE ├── README.md ├── package.json ├── public ├── CNAME ├── _redirects ├── favicon.png ├── index.html ├── manifest.json ├── me.png ├── robots.txt └── service-worker.js ├── src ├── App.test.js ├── actions │ ├── activityActions.js │ ├── createActivityAction.js │ ├── defaultApps.js │ ├── desktopActions.js │ ├── fileSystemActions.js │ └── types.js ├── assets │ ├── applications │ │ ├── browser.css │ │ ├── camera.css │ │ ├── settings.css │ │ └── terminal.css │ ├── background │ │ ├── wall-1.svg │ │ ├── wall-2.svg │ │ ├── wall-3.svg │ │ ├── wall-4.svg │ │ ├── wall-5.svg │ │ └── wall-6.svg │ ├── common │ │ └── toggleButton.css │ ├── default.css │ ├── desktop │ │ ├── desktop.css │ │ ├── desktopIcon.css │ │ ├── desktopWorkingArea.css │ │ ├── dialogBox.css │ │ ├── dropdown.css │ │ ├── explorer.css │ │ ├── lowerDesktop.css │ │ ├── powerOff.css │ │ ├── startMenu.css │ │ ├── taskList.css │ │ └── taskbar.css │ └── icons │ │ ├── archive.svg │ │ ├── battery.svg │ │ ├── brightness.svg │ │ ├── browser.svg │ │ ├── camera.svg │ │ ├── codepen.svg │ │ ├── download.svg │ │ ├── dropdown-point.svg │ │ ├── dropdown-white.svg │ │ ├── dropdown.svg │ │ ├── facebook.svg │ │ ├── file.svg │ │ ├── folder.svg │ │ ├── gmail.svg │ │ ├── home.svg │ │ ├── instagram.svg │ │ ├── lighting.svg │ │ ├── linkedin.svg │ │ ├── medium.svg │ │ ├── octocat.svg │ │ ├── profile.svg │ │ ├── project.svg │ │ ├── search.svg │ │ ├── setting.svg │ │ ├── sponsorship.png │ │ ├── stopwatch.svg │ │ ├── terminal.png │ │ ├── terminal.svg │ │ ├── transfer.png │ │ ├── twitter.svg │ │ ├── user.png │ │ └── wifi.svg ├── components │ ├── applications │ │ ├── browser │ │ │ └── browser.jsx │ │ ├── camera │ │ │ └── camera.jsx │ │ ├── settings │ │ │ ├── components │ │ │ │ ├── FontChanger.jsx │ │ │ │ ├── Personalise.jsx │ │ │ │ └── ThemeChanger.jsx │ │ │ └── settings.jsx │ │ ├── terminal │ │ │ └── terminal.jsx │ │ └── textEditor │ │ │ └── textEditor.jsx │ ├── common │ │ └── ToggleButton.jsx │ ├── desktop │ │ ├── Desktop.jsx │ │ ├── desktopWorkingArea │ │ │ ├── ContextMenu.jsx │ │ │ ├── desktopIcon.jsx │ │ │ └── desktopWorkingArea.jsx │ │ ├── dialogBox │ │ │ └── dialogBox.jsx │ │ ├── dropdown │ │ │ └── dropdown.jsx │ │ ├── explorer │ │ │ └── explorer.jsx │ │ ├── lowerDesktop │ │ │ ├── lowerDesktop.jsx │ │ │ └── navItem.jsx │ │ ├── powerOff │ │ │ └── powerOff.jsx │ │ ├── startMenu │ │ │ ├── startItem.jsx │ │ │ └── startMenu.jsx │ │ └── taskbar │ │ │ ├── RightTaskPane.jsx │ │ │ ├── date.jsx │ │ │ ├── taskList.jsx │ │ │ └── taskbar.jsx │ └── notFound │ │ ├── error.css │ │ └── error.jsx ├── index.js ├── reducers │ ├── activityReducers.js │ ├── combinedReducers.js │ ├── desktopReducers.js │ └── fileSystemReducers.js ├── serviceWorkerRegistration.js ├── setupTests.js └── store.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-applications/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | .eslintcache 22 | 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Raghav Dhingra 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Netlify Status](https://api.netlify.com/api/v1/badges/7b2463c6-1999-472c-8135-7faa48dfa3d0/deploy-status)](https://app.netlify.com/sites/raghavdhingra/deploys) 2 | 3 | Test live: https://raghavdhinrga.web.app 4 | 5 | Production build: https://raghavdhingra.com 6 | 7 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 8 | 9 | Developers favourite operating system Linux is now available for Web. Check out linux based portfolio here - https://raghavdhingra.com 10 | 11 | ## Available Scripts 12 | 13 | In the project directory, you can run: 14 | 15 | ### `yarn start` 16 | 17 | Runs the app in the development mode.
18 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 19 | 20 | The page will reload if you make edits.
21 | You will also see any lint errors in the console. 22 | 23 | ### `yarn test` 24 | 25 | Launches the test runner in the interactive watch mode.
26 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 27 | 28 | ### `yarn build` 29 | 30 | Builds the app for production to the `build` folder.
31 | It correctly bundles React in production mode and optimizes the build for the best performance. 32 | 33 | The build is minified and the filenames include the hashes.
34 | Your app is ready to be deployed! 35 | 36 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 37 | 38 | ### `yarn eject` 39 | 40 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 41 | 42 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 43 | 44 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 45 | 46 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 47 | 48 | ## Learn More 49 | 50 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 51 | 52 | To learn React, check out the [React documentation](https://reactjs.org/). 53 | 54 | ### Code Splitting 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 57 | 58 | ### Analyzing the Bundle Size 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 61 | 62 | ### Making a Progressive Web App 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 65 | 66 | ### Advanced Configuration 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 69 | 70 | ### Deployment 71 | 72 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 73 | 74 | ### `yarn build` fails to minify 75 | 76 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 77 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "os-portfolio-2", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@reduxjs/toolkit": "^1.9.5", 7 | "@testing-library/jest-dom": "^5.16.5", 8 | "@testing-library/react": "^14.0.0", 9 | "@testing-library/user-event": "^14.4.3", 10 | "react": "^18.2.0", 11 | "react-dom": "^18.2.0", 12 | "react-redux": "^8.1.1", 13 | "react-router-dom": "^6.14.1", 14 | "react-scripts": "^5.0.1", 15 | "redux": "^4.2.1", 16 | "redux-thunk": "^2.4.2" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": "react-app" 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | }, 39 | "devDependencies": { 40 | "react-error-overlay": "6.0.9" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /public/CNAME: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raghavdhingra/Web-OS/b9ab826d6761759b27439ac853a3d190ecf51ed0/public/favicon.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | 19 | 20 | 21 | 22 | Portfolio OS | Raghav Dhingra | Full Stack Developer 23 | 24 | 25 | 26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "me.png", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon", 9 | "purpose": "any maskable" 10 | }, 11 | { 12 | "src": "me.png", 13 | "type": "image/png", 14 | "sizes": "192x192", 15 | "purpose": "any maskable" 16 | }, 17 | { 18 | "src": "me.png", 19 | "type": "image/png", 20 | "sizes": "512x512", 21 | "purpose": "any maskable" 22 | } 23 | ], 24 | "start_url": "/", 25 | "theme_color": "#F4BD42", 26 | "background_color": "#2B2929", 27 | "display": "standalone", 28 | "scope": "/" 29 | } 30 | -------------------------------------------------------------------------------- /public/me.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raghavdhingra/Web-OS/b9ab826d6761759b27439ac853a3d190ecf51ed0/public/me.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/service-worker.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-restricted-globals */ 2 | 3 | // This service worker can be customized! 4 | // See https://developers.google.com/web/tools/workbox/modules 5 | // for the list of available Workbox modules, or add any other 6 | // code you'd like. 7 | // You can also remove this file if you'd prefer not to use a 8 | // service worker, and the Workbox build step will be skipped. 9 | 10 | import { clientsClaim } from "workbox-core"; 11 | import { ExpirationPlugin } from "workbox-expiration"; 12 | import { precacheAndRoute, createHandlerBoundToURL } from "workbox-precaching"; 13 | import { registerRoute } from "workbox-routing"; 14 | import { StaleWhileRevalidate } from "workbox-strategies"; 15 | 16 | clientsClaim(); 17 | 18 | // Precache all of the assets generated by your build process. 19 | // Their URLs are injected into the manifest variable below. 20 | // This variable must be present somewhere in your service worker file, 21 | // even if you decide not to use precaching. See https://cra.link/PWA 22 | precacheAndRoute(self.__WB_MANIFEST); 23 | 24 | // Set up App Shell-style routing, so that all navigation requests 25 | // are fulfilled with your index.html shell. Learn more at 26 | // https://developers.google.com/web/fundamentals/architecture/app-shell 27 | const fileExtensionRegexp = new RegExp("/[^/?]+\\.[^/]+$"); 28 | registerRoute( 29 | // Return false to exempt requests from being fulfilled by index.html. 30 | ({ request, url }) => { 31 | // If this isn't a navigation, skip. 32 | if (request.mode !== "navigate") { 33 | return false; 34 | } // If this is a URL that starts with /_, skip. 35 | 36 | if (url.pathname.startsWith("/_")) { 37 | return false; 38 | } // If this looks like a URL for a resource, because it contains // a file extension, skip. 39 | 40 | if (url.pathname.match(fileExtensionRegexp)) { 41 | return false; 42 | } // Return true to signal that we want to use the handler. 43 | 44 | return true; 45 | }, 46 | createHandlerBoundToURL(process?.env.PUBLIC_URL + "/index.html") 47 | ); 48 | 49 | // An example runtime caching route for requests that aren't handled by the 50 | // precache, in this case same-origin .png requests like those from in public/ 51 | registerRoute( 52 | // Add in any other file extensions or routing criteria as needed. 53 | ({ url }) => 54 | url.origin === self.location.origin && url.pathname.endsWith(".png"), // Customize this strategy as needed, e.g., by changing to CacheFirst. 55 | new StaleWhileRevalidate({ 56 | cacheName: "images", 57 | plugins: [ 58 | // Ensure that once this runtime cache reaches a maximum size the 59 | // least-recently used images are removed. 60 | new ExpirationPlugin({ maxEntries: 50 }), 61 | ], 62 | }) 63 | ); 64 | 65 | // This allows the web app to trigger skipWaiting via 66 | // registration.waiting.postMessage({type: 'SKIP_WAITING'}) 67 | self.addEventListener("message", (event) => { 68 | if (event.data && event.data.type === "SKIP_WAITING") { 69 | self.skipWaiting(); 70 | } 71 | }); 72 | 73 | // Any other custom service worker logic can go here. 74 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /src/actions/activityActions.js: -------------------------------------------------------------------------------- 1 | import * as actions from "./types"; 2 | 3 | export const removeActivity = (payload) => async (dispatch) => { 4 | try { 5 | await dispatch({ 6 | type: actions.UPDATE_ACTIVITY_TRIGGER, 7 | payload: { activityIndex: payload, isTriggered: true }, 8 | }); 9 | await dispatch({ 10 | type: actions.TOGGLE_LOADING_ACTIVITY, 11 | payload: { activityIndex: payload, isLoading: true }, 12 | }); 13 | setTimeout(async () => { 14 | await dispatch({ 15 | type: actions.TOGGLE_LOADING_ACTIVITY, 16 | payload: { activityIndex: payload, isLoading: true }, 17 | }); 18 | await dispatch({ 19 | type: actions.REMOVE_ACTIVITY, 20 | payload: { 21 | activityIndex: payload, 22 | }, 23 | }); 24 | await dispatch({ type: actions.REMOVE_ACTIVITY_TRIGGER }); 25 | }, 100); 26 | } catch (err) { 27 | console.log(err); 28 | } 29 | }; 30 | export const toggleActivityMaximise = (payload) => async (dispatch) => { 31 | try { 32 | dispatch({ 33 | type: actions.TOGGLE_ACTIVITY_MAXIMISE, 34 | payload, 35 | }); 36 | } catch (err) { 37 | console.log(err); 38 | } 39 | }; 40 | export const updateZIndexActivity = (payload) => async (dispatch) => { 41 | try { 42 | dispatch({ 43 | type: actions.UPDATE_ZINDEX_ACTIVITY, 44 | payload: { 45 | activityIndex: payload, 46 | }, 47 | }); 48 | } catch (err) { 49 | console.log(err); 50 | } 51 | }; 52 | export const toggleActivityLoading = (payload) => async (dispatch) => { 53 | try { 54 | dispatch({ 55 | type: actions.TOGGLE_LOADING_ACTIVITY, 56 | payload, 57 | }); 58 | } catch (err) { 59 | console.log(err); 60 | } 61 | }; 62 | export const updatePositionActivity = (payload) => async (dispatch) => { 63 | try { 64 | dispatch({ 65 | type: actions.UPDATE_ACTIVITY_POSITION, 66 | payload, 67 | }); 68 | } catch (err) { 69 | console.log(err); 70 | } 71 | }; 72 | export const updateDimensionActivity = (payload) => async (dispatch) => { 73 | try { 74 | dispatch({ 75 | type: actions.UPDATE_ACTIVITY_DIMENSION, 76 | payload, 77 | }); 78 | } catch (err) { 79 | console.log(err); 80 | } 81 | }; 82 | -------------------------------------------------------------------------------- /src/actions/createActivityAction.js: -------------------------------------------------------------------------------- 1 | import { applications } from './defaultApps'; 2 | import * as actions from './types'; 3 | 4 | export const createActivity = (payload) => async (dispatch) => { 5 | try { 6 | let { name, newApp } = payload; 7 | let app; 8 | if (newApp) { 9 | let { image, footer, child } = payload; 10 | app = { 11 | name, 12 | image, 13 | width: '40px', 14 | key: name, 15 | child, 16 | footer, 17 | }; 18 | } else { 19 | app = applications.defaultApps.find((app) => app.key === name); 20 | } 21 | await dispatch({ 22 | type: actions.CREATE_ACTIVITY, 23 | payload: { 24 | activity: { 25 | name: app.name, 26 | isLoading: false, 27 | date: new Date(), 28 | isExplorerOpened: false, 29 | isMaximise: false, 30 | child: app.child, 31 | footer: app.footer, 32 | image: app.image, 33 | zIndex: 4, 34 | top: '34px', 35 | left: '60px', 36 | height: '500px', 37 | width: '750px', 38 | triggeredFunction: false, 39 | }, 40 | }, 41 | }); 42 | } catch (err) { 43 | console.log(err); 44 | } 45 | }; 46 | -------------------------------------------------------------------------------- /src/actions/defaultApps.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import TerminalImage from "../assets/icons/terminal.svg"; 3 | import CameraImage from "../assets/icons/camera.svg"; 4 | import BrowserImage from "../assets/icons/browser.svg"; 5 | import SettingsImage from "../assets/icons/setting.svg"; 6 | import TerminalWindow from "../components/applications/terminal/terminal"; 7 | import Camera from "../components/applications/camera/camera"; 8 | import Browser from "../components/applications/browser/browser"; 9 | import Settings from "../components/applications/settings/settings"; 10 | 11 | import PROFILE_IMAGE from "../assets/icons/profile.svg"; 12 | import PROJECT_IMAGE from "../assets/icons/project.svg"; 13 | import ARCHIVE_IMAGE from "../assets/icons/archive.svg"; 14 | import GITHUB_IMAGE from "../assets/icons/octocat.svg"; 15 | import FACEBOOK_IMAGE from "../assets/icons/facebook.svg"; 16 | import TWITTER_IMAGE from "../assets/icons/twitter.svg"; 17 | import INSTAGRAM_IMAGE from "../assets/icons/instagram.svg"; 18 | import LINKEDIN_IMAGE from "../assets/icons/linkedin.svg"; 19 | import CODEPEN_IMAGE from "../assets/icons/codepen.svg"; 20 | import GMAIL_IMAGE from "../assets/icons/gmail.svg"; 21 | import MEDIUM_IMAGE from "../assets/icons/medium.svg"; 22 | import SPONSOR_IMAGE from "../assets/icons/sponsorship.png"; 23 | 24 | // const nullFunction = (supplement) => null; 25 | const width1 = "40px"; 26 | const width2 = "50px"; 27 | const width3 = "60px"; 28 | const width4 = "70px"; 29 | 30 | export const applications = { 31 | allApplications: [ 32 | { 33 | name: "Browser", 34 | image: BrowserImage, 35 | width: width2, 36 | bigWidth: width4, 37 | key: "browser", 38 | child: (supplement) => , 39 | }, 40 | { 41 | name: "Camera", 42 | image: CameraImage, 43 | width: width1, 44 | bigWidth: width3, 45 | key: "camera", 46 | child: (supplement) => , 47 | }, 48 | { 49 | name: "Settings", 50 | image: SettingsImage, 51 | width: width2, 52 | bigWidth: width4, 53 | key: "settings", 54 | child: (supplement) => , 55 | }, 56 | { 57 | name: "Terminal", 58 | image: TerminalImage, 59 | width: width1, 60 | bigWidth: width3, 61 | key: "terminal", 62 | child: (supplement) => ( 63 | 67 | ), 68 | // footer: nullFunction, 69 | }, 70 | ], 71 | socialApps: [ 72 | { 73 | name: "Archive", 74 | key: "archive", 75 | image: ARCHIVE_IMAGE, 76 | width: width1, 77 | bigWidth: width3, 78 | link: "https://archive.raghavdhingra.com", 79 | }, 80 | { 81 | name: "Portfolio", 82 | key: "portfolio", 83 | width: width1, 84 | bigWidth: width3, 85 | image: PROFILE_IMAGE, 86 | link: "https://portfolio.raghavdhingra.com", 87 | }, 88 | { 89 | name: "Projects", 90 | key: "projects", 91 | width: width1, 92 | bigWidth: width3, 93 | image: PROJECT_IMAGE, 94 | link: "https://portfolio.raghavdhingra.com/projects", 95 | }, 96 | { 97 | name: "GitHub", 98 | key: "github", 99 | width: width1, 100 | bigWidth: width3, 101 | image: GITHUB_IMAGE, 102 | link: "https://github.com/raghavdhingra", 103 | }, 104 | { 105 | name: "Facebook", 106 | key: "facebook", 107 | width: width1, 108 | bigWidth: width3, 109 | image: FACEBOOK_IMAGE, 110 | link: "https://www.facebook.com/raghav.dhingra15", 111 | }, 112 | { 113 | name: "Twitter", 114 | key: "twitter", 115 | width: width1, 116 | bigWidth: width3, 117 | image: TWITTER_IMAGE, 118 | link: "https://twitter.com/raghavdhingra15", 119 | }, 120 | { 121 | name: "Instagram", 122 | key: "instagram", 123 | width: width1, 124 | bigWidth: width3, 125 | image: INSTAGRAM_IMAGE, 126 | link: "https://www.instagram.com/raghav.dhingra15/", 127 | }, 128 | { 129 | name: "Linkedin", 130 | key: "linkedin", 131 | width: width1, 132 | bigWidth: width3, 133 | image: LINKEDIN_IMAGE, 134 | link: "https://www.linkedin.com/in/raghav-dhingra/", 135 | }, 136 | { 137 | name: "Codepen", 138 | key: "codepen", 139 | width: width1, 140 | bigWidth: width3, 141 | image: CODEPEN_IMAGE, 142 | link: "https://codepen.io/raghav-dhingra", 143 | }, 144 | { 145 | name: "G-Mail", 146 | key: "gmail", 147 | width: width1, 148 | bigWidth: width3, 149 | image: GMAIL_IMAGE, 150 | link: "mailto:admin@raghavdhingra.com", 151 | }, 152 | { 153 | name: "Medium", 154 | key: "medium", 155 | width: width1, 156 | bigWidth: width3, 157 | image: MEDIUM_IMAGE, 158 | link: "https://medium.com/@raghav.dhingra15", 159 | }, 160 | { 161 | name: "Sponsor", 162 | key: "sponsor", 163 | width: width1, 164 | bigWidth: width3, 165 | image: SPONSOR_IMAGE, 166 | link: "https://github.com/sponsors/raghavdhingra", 167 | }, 168 | ], 169 | defaultApps: [ 170 | { 171 | name: "Terminal", 172 | image: TerminalImage, 173 | width: width1, 174 | key: "terminal", 175 | child: (supplement) => ( 176 | 180 | ), 181 | // footer: nullFunction, 182 | }, 183 | { 184 | name: "Browser", 185 | image: BrowserImage, 186 | width: width2, 187 | key: "browser", 188 | child: (supplement) => , 189 | }, 190 | { 191 | name: "Camera", 192 | image: CameraImage, 193 | width: width1, 194 | key: "camera", 195 | child: (supplement) => , 196 | }, 197 | { 198 | name: "Settings", 199 | image: SettingsImage, 200 | width: width2, 201 | key: "settings", 202 | child: (supplement) => , 203 | }, 204 | ], 205 | }; 206 | -------------------------------------------------------------------------------- /src/actions/desktopActions.js: -------------------------------------------------------------------------------- 1 | import * as actions from "./types"; 2 | 3 | export const changeBackImage = (payload) => async (dispatch) => { 4 | try { 5 | await dispatch({ 6 | type: actions.BACK_IMAGE_CHANGE, 7 | payload: { 8 | background: payload, 9 | }, 10 | }); 11 | } catch (err) { 12 | console.log(err); 13 | } 14 | }; 15 | export const changeStartMenu = (payload) => async (dispatch) => { 16 | try { 17 | await dispatch({ 18 | type: actions.TOGGLE_START_MENU, 19 | payload: { 20 | startMenuOpen: payload, 21 | }, 22 | }); 23 | } catch (err) { 24 | console.log(err); 25 | } 26 | }; 27 | export const changeSingleClickIcon = (payload) => async (dispatch) => { 28 | try { 29 | await dispatch({ 30 | type: actions.SINGLE_CLICK_ICON_CHANGE, 31 | payload: { 32 | singleClickIcon: payload, 33 | }, 34 | }); 35 | } catch (err) { 36 | console.log(err); 37 | } 38 | }; 39 | export const changeFontStyle = (payload) => async (dispatch) => { 40 | try { 41 | await dispatch({ 42 | type: actions.FONT_STYLE_CHANGE, 43 | payload: { 44 | fontStyle: payload, 45 | }, 46 | }); 47 | } catch (err) { 48 | console.log(err); 49 | } 50 | }; 51 | export const toggleFullScreen = () => async (dispatch) => { 52 | try { 53 | await dispatch({ type: actions.TOGGLE_FULL_SCREEN }); 54 | } catch (err) { 55 | console.log(err); 56 | } 57 | }; 58 | export const resetToDefault = () => async (dispatch) => { 59 | try { 60 | localStorage.clear(); 61 | await dispatch({ type: actions.RESET_TO_DEFAULT }); 62 | } catch (err) { 63 | console.log(err); 64 | } 65 | }; 66 | export const changeBrightness = (payload) => async (dispatch) => { 67 | try { 68 | await dispatch({ 69 | type: actions.BRIGHTNESS_CHANGE, 70 | payload: { 71 | brightness: payload, 72 | }, 73 | }); 74 | } catch (err) { 75 | console.log(err); 76 | } 77 | }; 78 | export const dropDownToggle = (payload) => async (dispatch) => { 79 | try { 80 | dispatch({ 81 | type: actions.TOGGLE_DROP_DOWN, 82 | payload: { 83 | dropDownOpen: payload, 84 | }, 85 | }); 86 | } catch (err) { 87 | console.log(err); 88 | } 89 | }; 90 | export const activityDropDownToggle = (payload) => async (dispatch) => { 91 | try { 92 | dispatch({ 93 | type: actions.ACTIVITY_TOGGLE_DROP_DOWN, 94 | payload: { 95 | activityDropDown: payload, 96 | }, 97 | }); 98 | } catch (err) { 99 | console.log(err); 100 | } 101 | }; 102 | export const batteryStatus = (payload) => async (dispatch) => { 103 | try { 104 | dispatch({ 105 | type: actions.BATTERY_STATUS, 106 | payload: { 107 | battery: payload, 108 | }, 109 | }); 110 | } catch (err) { 111 | console.log(err); 112 | } 113 | }; 114 | export const onlineStatus = (payload) => async (dispatch) => { 115 | try { 116 | dispatch({ 117 | type: actions.ONLINE_STATUS, 118 | payload: { 119 | isOnline: payload, 120 | }, 121 | }); 122 | } catch (err) { 123 | console.log(err); 124 | } 125 | }; 126 | export const networkType = (payload) => async (dispatch) => { 127 | try { 128 | dispatch({ 129 | type: actions.NETWORK_TYPE, 130 | payload: { 131 | networkType: payload, 132 | }, 133 | }); 134 | } catch (err) { 135 | console.log(err); 136 | } 137 | }; 138 | export const dateStatus = (payload) => async (dispatch) => { 139 | try { 140 | dispatch({ 141 | type: actions.DATE_STATUS, 142 | payload: { 143 | date: payload, 144 | }, 145 | }); 146 | } catch (err) { 147 | console.log(err); 148 | } 149 | }; 150 | export const powerOffStatus = (payload) => async (dispatch) => { 151 | try { 152 | const { active, timer } = payload; 153 | dispatch({ 154 | type: actions.POWER_OFF_STATUS, 155 | payload: { 156 | powerOff: { 157 | active, 158 | timer, 159 | }, 160 | }, 161 | }); 162 | } catch (err) { 163 | console.log(err); 164 | } 165 | }; 166 | -------------------------------------------------------------------------------- /src/actions/fileSystemActions.js: -------------------------------------------------------------------------------- 1 | import * as actions from "./types"; 2 | 3 | export const makeDirectoryAction = (payload) => async (dispatch) => { 4 | try { 5 | dispatch({ 6 | type: actions.MAKE_DIRECTORY_IN_SYSTEM, 7 | payload, 8 | }); 9 | } catch (err) { 10 | console.log(err); 11 | } 12 | }; 13 | export const makeFileAction = (payload) => async (dispatch) => { 14 | try { 15 | dispatch({ 16 | type: actions.MAKE_FILE_IN_SYSTEM, 17 | payload, 18 | }); 19 | } catch (err) { 20 | console.log(err); 21 | } 22 | }; 23 | 24 | export const removeDirectoryAction = (payload) => async (dispatch) => { 25 | try { 26 | dispatch({ 27 | type: actions.REMOVE_DIRECTORY_IN_SYSTEM, 28 | payload, 29 | }); 30 | } catch (err) { 31 | console.log(err); 32 | } 33 | }; 34 | export const changeTextInFile = (payload) => async (dispatch) => { 35 | try { 36 | dispatch({ type: actions.CHANGE_TEXT_IN_FILE, payload }); 37 | } catch (err) { 38 | console.log(err); 39 | } 40 | }; 41 | export const previousStateSet = () => async (dispatch) => { 42 | try { 43 | await dispatch({ type: actions.PREVIOUS_STATE_SET }); 44 | } catch (err) { 45 | console.log(err); 46 | } 47 | }; 48 | -------------------------------------------------------------------------------- /src/actions/types.js: -------------------------------------------------------------------------------- 1 | // Desktop Types 2 | export const BACK_IMAGE_CHANGE = "BACK_IMAGE_CHANGE"; 3 | export const BRIGHTNESS_CHANGE = "BRIGHTNESS_CHANGE"; 4 | export const DATE_STATUS = "DATE_STATUS"; 5 | export const TOGGLE_DROP_DOWN = "TOGGLE_DROP_DOWN"; 6 | export const BATTERY_STATUS = "BATTERY_STATUS"; 7 | export const ONLINE_STATUS = "ONLINE_STATUS"; 8 | export const NETWORK_TYPE = "NETWORK_TYPE"; 9 | export const POWER_OFF_STATUS = "POWER_OFF_STATUS"; 10 | export const RESET_TO_DEFAULT = "RESET_TO_DEFAULT"; 11 | export const FONT_STYLE_CHANGE = "FONT_STYLE_CHANGE"; 12 | export const SINGLE_CLICK_ICON_CHANGE = "SINGLE_CLICK_ICON_CHANGE"; 13 | export const TOGGLE_FULL_SCREEN = "TOGGLE_FULL_SCREEN"; 14 | export const TOGGLE_START_MENU = "TOGGLE_START_MENU"; 15 | 16 | // Activities Types 17 | export const CREATE_ACTIVITY = "CREATE_ACTIVITY"; 18 | export const REMOVE_ACTIVITY = "REMOVE_ACTIVITY"; 19 | export const UPDATE_ZINDEX_ACTIVITY = "UPDATE_ZINDEX_ACTIVITY"; 20 | export const ACTIVITY_TOGGLE_DROP_DOWN = "ACTIVITY_TOGGLE_DROP_DOWN"; 21 | export const TOGGLE_ACTIVITY_MAXIMISE = "TOGGLE_ACTIVITY_MAXIMISE"; 22 | export const TOGGLE_LOADING_ACTIVITY = "TOGGLE_LOADING_ACTIVITY"; 23 | export const UPDATE_ACTIVITY_POSITION = "UPDATE_ACTIVITY_POSITION"; 24 | export const UPDATE_ACTIVITY_DIMENSION = "UPDATE_ACTIVITY_DIMENSION"; 25 | export const UPDATE_ACTIVITY_TRIGGER = "UPDATE_ACTIVITY_TRIGGER"; 26 | export const REMOVE_ACTIVITY_TRIGGER = "REMOVE_ACTIVITY_TRIGGER"; 27 | 28 | // File System Types 29 | export const MAKE_DIRECTORY_IN_SYSTEM = "MAKE_DIRECTORY_IN_SYSTEM"; 30 | export const REMOVE_DIRECTORY_IN_SYSTEM = "REMOVE_DIRECTORY_IN_SYSTEM"; 31 | export const MAKE_FILE_IN_SYSTEM = "MAKE_FILE_IN_SYSTEM"; 32 | export const CHANGE_TEXT_IN_FILE = "CHANGE_TEXT_IN_FILE"; 33 | export const PREVIOUS_STATE_SET = "PREVIOUS_STATE_SET"; 34 | -------------------------------------------------------------------------------- /src/assets/applications/browser.css: -------------------------------------------------------------------------------- 1 | .browser-container { 2 | height: 100%; 3 | width: 100%; 4 | display: grid; 5 | grid-template-rows: auto 1fr; 6 | } 7 | .browser-task-container { 8 | /* background-color: aqua; */ 9 | border-bottom: 0.05rem solid #00000015; 10 | padding: 0.3rem 0.5rem; 11 | display: grid; 12 | box-sizing: border-box; 13 | grid-template-columns: auto 1fr auto; 14 | } 15 | .browser-task-image-container > img { 16 | width: 15px; 17 | cursor: pointer; 18 | } 19 | .browser-container > iframe { 20 | height: 100%; 21 | width: 100%; 22 | border: none; 23 | } 24 | .browser-loader { 25 | height: calc(100% - 66px); 26 | width: 100%; 27 | position: absolute; 28 | top: 66px; 29 | text-align: center; 30 | z-index: 100000; 31 | background-color: #eee; 32 | } 33 | .loader-lg-browser { 34 | r: 20px; 35 | cy: 40px; 36 | cx: 40px; 37 | stroke: #0005; 38 | stroke-width: 5px; 39 | fill: #0000; 40 | stroke-dasharray: 60 40; 41 | } 42 | input.browser-search-input { 43 | border: 1px solid #0002; 44 | padding: 0.2rem 0.4rem; 45 | margin: 0 1rem; 46 | box-sizing: border-box; 47 | border-radius: 30px !important; 48 | } 49 | .browser-search-input:focus { 50 | outline: none; 51 | } 52 | -------------------------------------------------------------------------------- /src/assets/applications/camera.css: -------------------------------------------------------------------------------- 1 | .camera-container { 2 | height: 100%; 3 | width: 100%; 4 | } 5 | .camera-video-container { 6 | object-fit: contain; 7 | height: 100%; 8 | width: 100%; 9 | transform: rotateY(180deg); 10 | } 11 | .camera-container-overlay { 12 | height: calc(100% - 31px); 13 | width: 100%; 14 | position: absolute; 15 | top: 31px; 16 | display: grid; 17 | grid-template-columns: 1fr auto; 18 | } 19 | .camera-button-container { 20 | display: grid; 21 | height: 100%; 22 | grid-template-rows: 1fr auto 1fr; 23 | padding: 0 0.5rem; 24 | box-sizing: border-box; 25 | } 26 | .camera-capture-button-svg { 27 | cursor: pointer; 28 | height: 4rem; 29 | width: 4rem; 30 | transition: 0.2s ease; 31 | filter: drop-shadow(0 0 3px #0003); 32 | } 33 | .camera-capture-button { 34 | stroke: white; 35 | stroke-width: 0.3rem; 36 | transition: 0.2s ease-in-out; 37 | fill: #0000; 38 | } 39 | 40 | .camera-capture-button:hover { 41 | stroke-width: 0.5rem; 42 | } 43 | 44 | .camera-capture-button-svg:active { 45 | transform: scale(0.9); 46 | } 47 | 48 | .captured-image { 49 | position: absolute; 50 | top: 40px; 51 | left: 10px; 52 | height: 200px; 53 | width: 350px; 54 | animation: move-amin 5s ease forwards; 55 | filter: drop-shadow(0 0 5px #0009); 56 | border: 0.5rem solid #fff8; 57 | border-radius: 10px; 58 | } 59 | .captured-image-canvas { 60 | height: 100%; 61 | width: 100%; 62 | /* transform: rotateY(180deg); */ 63 | } 64 | .captured-image:hover .captured-image::after { 65 | position: absolute; 66 | content: ""; 67 | background-color: #0005; 68 | top: 0; 69 | height: 100%; 70 | width: 100%; 71 | } 72 | @keyframes move-amin { 73 | 0% { 74 | transform: translateY(20px); 75 | } 76 | 20% { 77 | transform: translateY(0); 78 | } 79 | 40% { 80 | transform: translateY(20px); 81 | } 82 | 60% { 83 | transform: translateY(0); 84 | } 85 | 80% { 86 | transform: translateY(10px); 87 | } 88 | 100% { 89 | transform: translateY(0); 90 | } 91 | } 92 | .image-download-button-canvas { 93 | position: absolute; 94 | z-index: 1; 95 | top: 5px; 96 | left: 5px; 97 | height: 25px; 98 | width: 25px; 99 | background-color: #fff; 100 | box-shadow: 0 0 3px 0 #0003; 101 | cursor: pointer; 102 | display: flex; 103 | flex-direction: column; 104 | justify-content: center; 105 | border-radius: 50%; 106 | } 107 | .image-close-button-canvas { 108 | position: absolute; 109 | top: 0; 110 | right: 10px; 111 | z-index: 1; 112 | cursor: pointer; 113 | color: #fff; 114 | font-size: 2rem; 115 | filter: drop-shadow(0 0 2px #0005); 116 | } 117 | 118 | .image-download-button-canvas > img { 119 | height: auto; 120 | width: 14px; 121 | margin: 0 auto; 122 | } 123 | .camera-timer-container { 124 | text-align: center; 125 | color: #fff; 126 | cursor: pointer; 127 | } 128 | .camera-timer-container > img { 129 | filter: drop-shadow(0 0 2px #0005); 130 | width: 30px; 131 | margin-top: 1rem; 132 | } 133 | .timer-container { 134 | position: absolute; 135 | height: calc(100% - 31px); 136 | width: 100%; 137 | top: 31px; 138 | display: flex; 139 | flex-direction: column; 140 | justify-content: center; 141 | text-align: center; 142 | color: #fff; 143 | font-size: 4rem; 144 | } 145 | .fade-out-anim { 146 | animation: fadeOut 1s ease forwards; 147 | } 148 | @keyframes fadeOut { 149 | from { 150 | opacity: 1; 151 | transform: scale(1); 152 | } 153 | to { 154 | opacity: 0; 155 | transform: scale(3); 156 | } 157 | } 158 | -------------------------------------------------------------------------------- /src/assets/applications/settings.css: -------------------------------------------------------------------------------- 1 | .settings-container { 2 | height: 100%; 3 | width: 100%; 4 | display: grid; 5 | grid-template-columns: 200px 1fr; 6 | } 7 | .settings-left-container { 8 | overflow-y: auto; 9 | overflow-x: hidden; 10 | padding: 0.5rem 0; 11 | box-sizing: border-box; 12 | border-right: 1px solid rgb(207, 207, 207); 13 | } 14 | .settings-left-button { 15 | padding: 0.5rem 1rem; 16 | box-sizing: border-box; 17 | cursor: pointer; 18 | } 19 | .settings-left-button-active { 20 | background-color: rgb(234, 84, 33, 0.2); 21 | } 22 | .settings-left-button:hover { 23 | background-color: rgb(234, 84, 33); 24 | color: #fff; 25 | } 26 | .settings-left-button:active { 27 | filter: brightness(0.9); 28 | } 29 | .settings-right-container { 30 | background-color: rgb(247, 247, 247); 31 | } 32 | .settings-right-inner-container { 33 | width: 90% !important; 34 | margin: 0 auto; 35 | } 36 | .settings-right-inner-container-header { 37 | font-size: 1rem; 38 | font-weight: bold; 39 | margin: 1rem 0 0.5rem 0; 40 | } 41 | .settings-right-inner-container-bottom { 42 | width: 100%; 43 | background-color: #fff; 44 | padding: 0.5rem 1rem; 45 | box-sizing: border-box; 46 | border: 1px solid rgb(207, 207, 207); 47 | border-radius: 3px; 48 | } 49 | 50 | /* Theme */ 51 | .theme-change-container { 52 | display: grid; 53 | grid-template-columns: repeat(3, 1fr); 54 | gap: 1rem; 55 | /* display: flex; 56 | width: 100%; 57 | flex-shrink: 0; 58 | justify-content: space-between; */ 59 | } 60 | .theme-change-division { 61 | padding: 0.5rem; 62 | cursor: pointer; 63 | border-radius: 5px; 64 | box-sizing: border-box; 65 | margin: 0 auto; 66 | width: 130px; 67 | } 68 | .theme-change-division:hover { 69 | background-color: rgb(26, 115, 232, 0.8); 70 | color: #fff; 71 | } 72 | .theme-change-background { 73 | border-radius: 5px; 74 | height: 90px; 75 | width: 100%; 76 | text-align: center; 77 | font-size: 2rem; 78 | background-color: aliceblue; 79 | color: #666; 80 | transition: 0.2s ease; 81 | } 82 | .theme-change-division-active { 83 | background-color: rgb(26, 115, 232, 0.3); 84 | } 85 | .theme-change-name { 86 | margin: 0.2rem 0; 87 | text-align: center; 88 | } 89 | 90 | /* Reset To Default */ 91 | .reset-button { 92 | width: max-content; 93 | padding: 0.2rem 0.6rem; 94 | margin: 0.5rem 0; 95 | border-radius: 3px; 96 | box-sizing: border-box; 97 | cursor: pointer; 98 | border: 1px solid #0004; 99 | } 100 | .reset-button:hover { 101 | background-color: #0001; 102 | } 103 | .reset-button:active { 104 | background-color: #0002; 105 | } 106 | 107 | /* Personalise */ 108 | .personalise-2-grid { 109 | display: grid; 110 | grid-template-columns: 1fr auto; 111 | gap: 1rem; 112 | margin: 1rem 0; 113 | } 114 | .personalise-2-grid:first-child { 115 | margin-top: 0; 116 | } 117 | .personalise-2-grid:last-child { 118 | margin-bottom: 0; 119 | } 120 | .personalise-text { 121 | font-size: 1rem; 122 | color: #000c; 123 | } 124 | -------------------------------------------------------------------------------- /src/assets/applications/terminal.css: -------------------------------------------------------------------------------- 1 | .terminal-editable-container { 2 | height: 100%; 3 | width: 100%; 4 | background-color: rgb(45, 9, 34); 5 | color: #fff; 6 | overflow-y: auto; 7 | overflow-x: hidden; 8 | font-size: 0.9rem; 9 | cursor: text; 10 | } 11 | .terminal-editable-container::-webkit-scrollbar { 12 | width: 5px; 13 | } 14 | .terminal-editable-container::-webkit-scrollbar-thumb { 15 | border-radius: 10px; 16 | background-color: #888; 17 | } 18 | .terminal-green { 19 | color: rgba(124, 227, 53); 20 | } 21 | .terminal-blue { 22 | color: rgb(86, 137, 211); 23 | } 24 | .terminal-main-content { 25 | margin: 0.5rem 0; 26 | } 27 | .terminal-text-editor { 28 | padding: 0 0.5rem; 29 | box-sizing: border-box; 30 | } 31 | .terminal-text-editor:focus { 32 | outline: none; 33 | } 34 | .terminal-red { 35 | color: rgb(255, 0, 25); 36 | } 37 | .terminal-output { 38 | margin: 0.3rem 0; 39 | font-size: 0.9rem; 40 | letter-spacing: 0.05rem; 41 | } 42 | .terminal-help-grid { 43 | display: grid; 44 | grid-template-columns: 0.7fr auto 2fr; 45 | gap: 0.5rem; 46 | } 47 | .terminal-file-system-grid { 48 | display: grid; 49 | gap: 1rem; 50 | grid-template-columns: repeat(2, 1fr); 51 | } 52 | @media screen and (min-width: 500px) { 53 | .terminal-file-system-grid { 54 | grid-template-columns: repeat(4, 1fr); 55 | } 56 | } 57 | @media screen and (min-width: 800px) { 58 | .terminal-file-system-grid { 59 | grid-template-columns: repeat(6, 1fr); 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/assets/background/wall-1.svg: -------------------------------------------------------------------------------- 1 |  -------------------------------------------------------------------------------- /src/assets/background/wall-2.svg: -------------------------------------------------------------------------------- 1 |  -------------------------------------------------------------------------------- /src/assets/background/wall-3.svg: -------------------------------------------------------------------------------- 1 |  -------------------------------------------------------------------------------- /src/assets/background/wall-4.svg: -------------------------------------------------------------------------------- 1 |  -------------------------------------------------------------------------------- /src/assets/background/wall-5.svg: -------------------------------------------------------------------------------- 1 |  -------------------------------------------------------------------------------- /src/assets/background/wall-6.svg: -------------------------------------------------------------------------------- 1 |  -------------------------------------------------------------------------------- /src/assets/common/toggleButton.css: -------------------------------------------------------------------------------- 1 | .toggle-button-container { 2 | width: 50px; 3 | height: 30px; 4 | border-radius: 30px; 5 | box-sizing: border-box; 6 | background-color: #0002; 7 | cursor: pointer; 8 | transition: 0.2s ease; 9 | } 10 | .toggle-button { 11 | --dimension: 24px; 12 | transition: 0.2s ease; 13 | margin: 3px; 14 | height: var(--dimension); 15 | width: var(--dimension); 16 | background-color: #ffffff; 17 | box-shadow: 0 0 2px 0 rgb(0, 0, 0, 0.2); 18 | border-radius: 50%; 19 | } 20 | .toggle-button-container-active { 21 | background-color: rgb(234, 84, 33, 1); 22 | } 23 | .toggle-button-active { 24 | transform: translateX(20px); 25 | } 26 | -------------------------------------------------------------------------------- /src/assets/default.css: -------------------------------------------------------------------------------- 1 | /* @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap"); */ 2 | @import url("https://fonts.googleapis.com/css2?family=Potta+One&display=swap"); 3 | @import url("https://fonts.googleapis.com/css2?family=Raleway&display=swap"); 4 | @import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap"); 5 | 6 | * { 7 | margin: 0; 8 | padding: 0; 9 | -webkit-user-select: none; 10 | -khtml-user-select: none; 11 | -moz-user-select: none; 12 | -o-user-select: none; 13 | user-select: none; 14 | --darkColor: #393f3f; 15 | --lightColor: #bbc2c0; 16 | --orangeColor: #ea5421f2; 17 | --white: #fff; 18 | --black: #000; 19 | --transparent: #0000; 20 | } 21 | .font-roboto { 22 | font-family: "Roboto", sans-serif; 23 | } 24 | .font-potta { 25 | font-family: "Potta One", cursive; 26 | } 27 | .font-raleway { 28 | font-family: "Raleway", sans-serif; 29 | } 30 | .font-lobster { 31 | font-family: "Lobster", cursive; 32 | } 33 | .font-times { 34 | font-family: "Times New Roman", Times, serif; 35 | } 36 | .font-courier { 37 | font-family: "Courier New", Courier, monospace; 38 | } 39 | .centralise { 40 | display: flex; 41 | flex-direction: column; 42 | justify-content: center; 43 | } 44 | .display-none { 45 | display: none; 46 | } 47 | .cursor-pointer { 48 | cursor: pointer; 49 | } 50 | .text-area-editor { 51 | height: 100%; 52 | width: 100%; 53 | resize: none; 54 | border: none; 55 | box-sizing: border-box; 56 | padding: 0.2rem 0.4rem; 57 | } 58 | .text-area-editor:focus { 59 | outline: none; 60 | } 61 | .text-area-editor::-webkit-scrollbar { 62 | width: 10px; 63 | } 64 | .text-area-editor::-webkit-scrollbar-thumb { 65 | width: 10px; 66 | background-color: rgba(234, 84, 33, 0.9); 67 | border-radius: 10px; 68 | } 69 | .button-base { 70 | border: none; 71 | outline: none; 72 | cursor: pointer; 73 | background-color: #0000; 74 | } 75 | 76 | .container-center { 77 | padding-right: 15px; 78 | padding-left: 15px; 79 | margin-right: auto; 80 | margin-left: auto; 81 | box-sizing: border-box; 82 | } 83 | .container { 84 | padding-right: 15px; 85 | padding-left: 15px; 86 | margin-right: auto; 87 | margin-left: auto; 88 | } 89 | @media (min-width: 768px) { 90 | .container { 91 | width: 750px; 92 | } 93 | } 94 | @media (min-width: 992px) { 95 | .container { 96 | width: 970px; 97 | } 98 | .container-center { 99 | width: 970px; 100 | } 101 | } 102 | @media (min-width: 1200px) { 103 | .container { 104 | width: 1170px; 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /src/assets/desktop/desktop.css: -------------------------------------------------------------------------------- 1 | .desktop-container { 2 | height: 100vh; 3 | width: 100vw; 4 | overflow: hidden; 5 | color: white; 6 | } 7 | .image-cover { 8 | background-position: center; 9 | background-size: cover; 10 | background-repeat: no-repeat; 11 | } 12 | .desktop-taskbar-grid { 13 | display: grid; 14 | grid-template-rows: auto 1fr; 15 | height: 100%; 16 | } 17 | -------------------------------------------------------------------------------- /src/assets/desktop/desktopIcon.css: -------------------------------------------------------------------------------- 1 | .desktop-icon-container { 2 | height: 90px; 3 | width: 80px; 4 | margin: 0 0.65rem 0.65rem 0; 5 | box-sizing: border-box; 6 | border-radius: 3px; 7 | transition: 0.1s ease; 8 | } 9 | .desktop-icon-container:hover { 10 | border: 1px solid #fff7; 11 | background-color: #fff2; 12 | } 13 | .desktop-icon-container:active { 14 | background-color: #fff5; 15 | } 16 | .desktop-icon { 17 | height: 100%; 18 | cursor: pointer; 19 | text-align: center; 20 | display: flex; 21 | flex-direction: column; 22 | justify-content: center; 23 | } 24 | .desktop-icon-text { 25 | /* display: inline-block; */ 26 | font-size: 14px; 27 | width: 75px; 28 | margin: 0 auto; 29 | white-space: nowrap; 30 | overflow: hidden !important; 31 | text-overflow: ellipsis; 32 | } 33 | -------------------------------------------------------------------------------- /src/assets/desktop/desktopWorkingArea.css: -------------------------------------------------------------------------------- 1 | .desktop-area-container { 2 | height: 100%; 3 | width: 100%; 4 | padding: 0.8rem; 5 | box-sizing: border-box; 6 | display: grid; 7 | grid-template-columns: repeat(10, auto) 1fr; 8 | animation: fade-in 0.2s ease-in forwards; 9 | opacity: 0; 10 | } 11 | @keyframes fade-in { 12 | from { 13 | opacity: 0; 14 | } 15 | to { 16 | opacity: 1; 17 | } 18 | } 19 | .link-footer > a { 20 | color: #666; 21 | text-decoration: none; 22 | } 23 | .link-footer > a:hover { 24 | text-decoration: underline; 25 | } 26 | .portfolio-container-iframe { 27 | height: 100%; 28 | width: 100%; 29 | border: none; 30 | } 31 | .new-file-folder-input { 32 | border: none; 33 | padding: 0.4rem 0.6rem; 34 | border: 1px solid #0002; 35 | border-radius: 3px; 36 | box-sizing: border-box; 37 | font-size: 1rem; 38 | width: 100%; 39 | } 40 | .new-file-folder-input:focus { 41 | outline: none; 42 | } 43 | 44 | /* Context Menu */ 45 | .context-menu-container { 46 | position: absolute; 47 | height: 300px; 48 | width: 230px; 49 | color: var(--lightColor); 50 | background-color: var(--darkColor); 51 | border-radius: 5px; 52 | box-shadow: 0 0 10px 0 #0006; 53 | animation: opacAnim 0.2s ease; 54 | overflow: hidden; 55 | } 56 | @keyframes opacAnim { 57 | from { 58 | transform: scaleY(0.8); 59 | opacity: 0; 60 | } 61 | to { 62 | transform: scaleY(1); 63 | opacity: 1; 64 | } 65 | } 66 | .context-menu-content { 67 | padding: 0.5rem 1rem; 68 | box-sizing: border-box; 69 | cursor: pointer; 70 | transition: 0.2s ease; 71 | border-radius: 5px; 72 | } 73 | .context-menu-content:hover { 74 | background-color: var(--orangeColor); 75 | color: var(--white); 76 | } 77 | .context-menu-content:active { 78 | filter: brightness(0.8); 79 | } 80 | -------------------------------------------------------------------------------- /src/assets/desktop/dialogBox.css: -------------------------------------------------------------------------------- 1 | .dialog-overlay { 2 | top: 0; 3 | left: 0; 4 | height: 100vh; 5 | width: 100vw; 6 | position: absolute; 7 | } 8 | .dialog-overlay { 9 | background-color: #0004; 10 | z-index: 20; 11 | } 12 | .dialog-container { 13 | position: absolute; 14 | top: 50%; 15 | left: 50%; 16 | transform: translate(-50%, -50%); 17 | background-color: #fff; 18 | max-width: 500px; 19 | margin: 0 auto; 20 | color: #212121; 21 | border-radius: 5px; 22 | z-index: 21; 23 | width: 100%; 24 | max-width: 500px; 25 | border: 1px solid #0002; 26 | box-sizing: border-box; 27 | } 28 | .dialog-header { 29 | background-color: #00000008; 30 | border-bottom: 1px solid #0002; 31 | padding: 0.6rem 0.8rem; 32 | font-size: 1.1rem; 33 | font-weight: bolder; 34 | letter-spacing: 0.05rem; 35 | box-sizing: border-box; 36 | } 37 | .dialog-body { 38 | padding: 1rem; 39 | box-sizing: border-box; 40 | border-bottom: 1px solid #0002; 41 | } 42 | .dialog-footer { 43 | font-weight: bolder; 44 | background-color: #00000008; 45 | display: grid; 46 | grid-template-columns: repeat(2, 1fr); 47 | } 48 | .dialog-footer-btn { 49 | padding: 0.5rem; 50 | text-align: center; 51 | cursor: pointer; 52 | transition: 0.2s ease; 53 | color: #212121; 54 | box-sizing: border-box; 55 | } 56 | .dialog-footer-btn:first-child { 57 | border-right: 1px solid #0002; 58 | } 59 | .dialog-footer-btn:hover { 60 | background-color: #00000020; 61 | } 62 | -------------------------------------------------------------------------------- /src/assets/desktop/dropdown.css: -------------------------------------------------------------------------------- 1 | .drop-down-container { 2 | position: absolute; 3 | right: 10px; 4 | top: 34px; 5 | width: 100%; 6 | max-width: 300px; 7 | display: grid; 8 | grid-template-rows: auto 1fr; 9 | z-index: 10; 10 | } 11 | .drop-drop-caret-pointed-container { 12 | transform: rotate(180deg); 13 | } 14 | .flex-end { 15 | display: grid; 16 | grid-template-columns: 1fr auto; 17 | margin-left: 1.5rem; 18 | } 19 | .drop-drop-caret-pointed { 20 | transform: translateX(10px); 21 | } 22 | .drop-down-inner-container { 23 | box-shadow: 0 2px 5px 0 #0002; 24 | background-color: var(--darkColor); 25 | color: var(--lightColor); 26 | border-radius: 5px; 27 | transform: translateY(-7px); 28 | padding: 0.8rem 0; 29 | box-sizing: border-box; 30 | } 31 | .drop-down-items { 32 | max-height: 30.4px; 33 | box-sizing: border-box; 34 | padding: 0.4rem 1rem; 35 | transition: 0.2s ease; 36 | } 37 | .drop-down-items:hover { 38 | background-color: #0002; 39 | } 40 | .network-dot { 41 | height: 10px; 42 | width: 10px; 43 | margin-right: 0.5rem; 44 | border-radius: 50%; 45 | display: inline-block; 46 | } 47 | .dropdown-hr { 48 | height: 1px; 49 | width: 30px; 50 | background-color: #aaa; 51 | margin: 0.5rem auto; 52 | } 53 | .drop-down-grid { 54 | display: grid; 55 | grid-template-columns: auto 1fr; 56 | gap: 1rem; 57 | } 58 | .brightness-scroll-line { 59 | height: 2px; 60 | width: 100%; 61 | background-color: #666; 62 | display: flex; 63 | } 64 | .no-cursor { 65 | cursor: default; 66 | } 67 | .brightness-scroll-line::-webkit-slider-thumb { 68 | height: 15px; 69 | border-radius: 50%; 70 | width: 15px; 71 | background: #fff; 72 | box-shadow: 0 0 2px 0 #777; 73 | cursor: pointer; 74 | } 75 | -------------------------------------------------------------------------------- /src/assets/desktop/explorer.css: -------------------------------------------------------------------------------- 1 | .explorer-container { 2 | position: absolute; 3 | display: grid; 4 | grid-template-rows: auto 1fr auto; 5 | border-radius: 3px; 6 | overflow: hidden; 7 | box-shadow: 0 0 10px 1px #0002; 8 | } 9 | .explorer-heading-name-icon-container { 10 | display: grid; 11 | height: 100%; 12 | grid-template-columns: auto 1fr; 13 | gap: 0.5rem; 14 | } 15 | .explorer-header { 16 | background: linear-gradient(rgb(53, 49, 50), rgb(50, 49, 50)); 17 | display: grid; 18 | grid-template-columns: 1fr auto; 19 | gap: 1rem; 20 | cursor: grab; 21 | } 22 | .explorer-header:active { 23 | cursor: grabbing; 24 | } 25 | .explorer-header-heading { 26 | margin: 0.2rem 0.5rem; 27 | } 28 | .explorer-header-btn-container { 29 | display: grid; 30 | grid-template-columns: repeat(3, 1fr); 31 | gap: 0.5rem; 32 | margin: 0.4rem 0.5rem; 33 | } 34 | .explorer-close-btn { 35 | height: 18px; 36 | width: 18px; 37 | display: flex; 38 | flex-direction: column; 39 | text-align: center; 40 | justify-content: center; 41 | cursor: pointer; 42 | border-radius: 50%; 43 | transition: 0.2s ease; 44 | font-size: 1.1rem; 45 | } 46 | .explorer-close-color { 47 | background-color: rgb(238, 81, 35); 48 | } 49 | .explorer-close-btn:hover { 50 | background-color: #fff4; 51 | } 52 | .explorer-close-icon-translate { 53 | transform: translateY(-2px); 54 | } 55 | .explorer-body { 56 | background-color: #fff; 57 | color: #212121; 58 | overflow: hidden; 59 | box-sizing: border-box; 60 | } 61 | .explorer-footer { 62 | border-top: 1px solid #0003; 63 | background-color: rgb(247, 247, 247); 64 | color: #212121; 65 | padding: 0.2rem 0.5rem; 66 | box-sizing: border-box; 67 | } 68 | .sc-EHOje.dMFuoo { 69 | overflow-x: hidden; 70 | } 71 | -------------------------------------------------------------------------------- /src/assets/desktop/lowerDesktop.css: -------------------------------------------------------------------------------- 1 | .lower-desktop-grid { 2 | display: grid; 3 | grid-template-columns: auto 1fr; 4 | } 5 | .left-navigation-bar { 6 | width: 60px; 7 | display: grid; 8 | grid-template-rows: 1fr auto; 9 | box-sizing: border-box; 10 | background-color: #0004; 11 | } 12 | .left-nav-item { 13 | cursor: pointer; 14 | height: 50px; 15 | width: 50px; 16 | margin: 0.5rem auto; 17 | border-radius: 5px; 18 | text-align: center; 19 | transition: 0.1s ease-in-out; 20 | } 21 | .left-nav-item:hover { 22 | background-color: #fff4; 23 | } 24 | .left-nav-item-active { 25 | background-color: #fff2; 26 | } 27 | .left-nav-item:active { 28 | transform: scale(0.95); 29 | } 30 | .start-icon-svg { 31 | stroke: white; 32 | stroke-width: 4; 33 | transition: 0.2s ease-in-out; 34 | fill: #0000; 35 | r: 15px; 36 | } 37 | .start-icon-container:hover .start-icon-svg { 38 | r: 10px; 39 | stroke-width: 20; 40 | } 41 | .nav-item-image { 42 | height: auto; 43 | /* width: 40px; */ 44 | margin: 0 auto; 45 | } 46 | -------------------------------------------------------------------------------- /src/assets/desktop/powerOff.css: -------------------------------------------------------------------------------- 1 | .power-off-container { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | height: 100vh; 6 | width: 100vw; 7 | z-index: 50; 8 | opacity: 0; 9 | animation: powerOff 1s ease forwards; 10 | } 11 | .power-off-inner-container { 12 | height: 100%; 13 | width: 100%; 14 | color: #fff; 15 | opacity: 0; 16 | animation: powerOff 1s ease forwards; 17 | animation-delay: 1s; 18 | box-sizing: border-box; 19 | padding: 0 1rem; 20 | } 21 | .power-off-loader-container { 22 | display: grid; 23 | grid-template-columns: auto auto; 24 | gap: 1rem; 25 | width: max-content; 26 | margin: 0 auto; 27 | } 28 | .shutdown-loader-text { 29 | font-size: 1.8rem; 30 | font-weight: bolder; 31 | letter-spacing: 0.05rem; 32 | } 33 | @keyframes powerOff { 34 | from { 35 | opacity: 0; 36 | } 37 | to { 38 | opacity: 1; 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/assets/desktop/startMenu.css: -------------------------------------------------------------------------------- 1 | .start-menu-container { 2 | background-color: #0005; 3 | animation: fade-in 0.2s ease-in forwards; 4 | opacity: 0; 5 | height: calc(100vh - 30px); 6 | } 7 | @keyframes fade-in { 8 | from { 9 | opacity: 0; 10 | } 11 | to { 12 | opacity: 1; 13 | } 14 | } 15 | .search-field-container { 16 | margin: 1rem 0; 17 | text-align: center; 18 | } 19 | .start-menu-container-grid { 20 | display: grid; 21 | gap: 1rem; 22 | grid-template-rows: auto 1fr auto; 23 | height: calc(100vh - 31px); 24 | } 25 | input.search-field { 26 | margin: 0 auto; 27 | border-radius: 0 30px 30px 0; 28 | box-sizing: border-box; 29 | border: none; 30 | width: 100%; 31 | color: #555; 32 | padding: 0.3rem 0; 33 | padding-right: 0.6rem; 34 | } 35 | input.search-field::placeholder { 36 | color: #0006; 37 | } 38 | input.search-field:focus { 39 | outline: none; 40 | } 41 | .search-field-grid { 42 | display: grid; 43 | width: 100%; 44 | max-width: 240px; 45 | margin: 0 auto; 46 | grid-template-columns: auto 1fr; 47 | } 48 | .search-bar-icon-container { 49 | border-radius: 30px 0 0 30px; 50 | background-color: #fff; 51 | text-align: center; 52 | box-sizing: border-box; 53 | padding: auto 0.8rem; 54 | } 55 | .search-bar-icon { 56 | margin-left: 0.6rem; 57 | margin-right: 0.5rem; 58 | cursor: text; 59 | } 60 | .start-application-container { 61 | box-sizing: border-box; 62 | display: grid; 63 | grid-template-columns: repeat(2, 1fr); 64 | } 65 | .start-menu-item { 66 | height: 120px; 67 | width: 110px; 68 | padding: 1rem; 69 | box-sizing: border-box; 70 | cursor: pointer; 71 | text-align: center; 72 | margin: 0 auto; 73 | display: grid; 74 | grid-template-rows: 1fr auto; 75 | gap: 0.5rem; 76 | transition: 0.2s ease; 77 | font-size: 1.2rem; 78 | border-radius: 3px; 79 | } 80 | .start-menu-item:hover { 81 | background-color: #ffffff15; 82 | box-shadow: inset 1px 2px 10px 0 #ffffff15; 83 | } 84 | .start-menu-footer-grid { 85 | display: grid; 86 | width: max-content; 87 | gap: 1rem; 88 | margin: 1rem auto; 89 | grid-template-columns: repeat(2, auto); 90 | } 91 | .start-menu-footer-item { 92 | border-bottom: 0.2rem solid #0000; 93 | padding: 0.5rem; 94 | box-sizing: border-box; 95 | cursor: pointer; 96 | color: #fff8; 97 | transition: 0.2s ease; 98 | } 99 | .start-menu-footer-item:hover { 100 | color: #fff; 101 | } 102 | .start-menu-footer-item-active { 103 | color: #fff; 104 | border-color: #ea5421; 105 | } 106 | @media screen and (min-width: 600px) { 107 | .start-application-container { 108 | grid-template-columns: repeat(3, 1fr); 109 | } 110 | } 111 | @media screen and (min-width: 1000px) { 112 | .start-application-container { 113 | grid-template-columns: repeat(4, 1fr); 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /src/assets/desktop/taskList.css: -------------------------------------------------------------------------------- 1 | .heading { 2 | padding-right: 1rem; 3 | /* border-right: 1px dashed white; */ 4 | } 5 | .task-list-container { 6 | display: flex; 7 | overflow: hidden; 8 | } 9 | .task-listing-activity { 10 | margin: 0 0.2rem; 11 | padding: 0.02rem 0.5rem; 12 | border-radius: 5px; 13 | box-sizing: border-box; 14 | cursor: default; 15 | transition: 0.2s; 16 | border-radius: 2px; 17 | display: grid; 18 | grid-template-columns: auto 1fr; 19 | gap: 0.3rem; 20 | } 21 | .task-listing-activity:hover { 22 | background-color: #fff3; 23 | } 24 | .task-listing-activity-active { 25 | background-color: #fff2; 26 | } 27 | .task-list-inner-grid { 28 | display: grid; 29 | grid-template-columns: auto 1fr auto; 30 | gap: 0.2rem; 31 | } 32 | .loader-sm { 33 | r: 5px; 34 | cy: 10px; 35 | cx: 10px; 36 | stroke: var(--black); 37 | stroke-width: 2px; 38 | stroke-dasharray: 20 8; 39 | fill: var(--transparent); 40 | } 41 | .loader-sm-2 { 42 | r: 5px; 43 | cy: 8px; 44 | cx: 8px; 45 | stroke: var(--white); 46 | stroke-width: 2px; 47 | stroke-dasharray: 20 8; 48 | fill: var(--transparent); 49 | } 50 | .loader-lg { 51 | r: 10px; 52 | cy: 20px; 53 | cx: 20px; 54 | stroke: var(--white); 55 | stroke-width: 5px; 56 | fill: #0000; 57 | stroke-dasharray: 30 20; 58 | } 59 | .loader-rotate { 60 | animation: rotate 1s linear infinite; 61 | } 62 | @keyframes rotate { 63 | from { 64 | transform: rotate(0); 65 | } 66 | to { 67 | transform: rotate(360deg); 68 | } 69 | } 70 | .activity-inner-container { 71 | border-radius: 3px; 72 | padding: 0.5rem 0 !important; 73 | box-sizing: border-box; 74 | transform: translateY(-3px) !important; 75 | } 76 | .activity-list-container { 77 | max-width: 200px !important; 78 | top: 34px !important; 79 | left: 66px !important; 80 | } 81 | .activity-list-nav-grid { 82 | display: grid; 83 | grid-template-columns: auto auto; 84 | gap: 0.5rem; 85 | } 86 | .down-caret-arrow-translate { 87 | transform: translateY(-2px); 88 | } 89 | .activity-close-btn { 90 | height: 16px; 91 | width: 16px; 92 | text-align: center; 93 | border-radius: 50%; 94 | color: var(--lightColor); 95 | cursor: pointer; 96 | transition: 0.2s ease; 97 | } 98 | .activity-close-btn:hover { 99 | background-color: var(--orangeColor); 100 | color: var(--white); 101 | } 102 | -------------------------------------------------------------------------------- /src/assets/desktop/taskbar.css: -------------------------------------------------------------------------------- 1 | .taskbar-container { 2 | width: 100vw; 3 | background-color: rgba(0, 0, 0, 0.6); 4 | box-shadow: 0 0 7px 2px #0009; 5 | font-size: 0.9rem; 6 | padding: 0.4rem 0.5rem; 7 | box-sizing: border-box; 8 | display: grid; 9 | grid-template-columns: 1fr auto 1fr; 10 | gap: 0.5rem; 11 | } 12 | .right-task-item-container { 13 | display: flex; 14 | flex-direction: row; 15 | justify-content: flex-end; 16 | } 17 | .right-displayed-container { 18 | cursor: pointer; 19 | transition: 0.2s ease; 20 | display: grid; 21 | gap: 0.5rem; 22 | grid-template-columns: repeat(5, auto); 23 | } 24 | .right-displayed-container-after { 25 | content: ""; 26 | display: block; 27 | background-color: #fff; 28 | width: 125px; 29 | height: 3px; 30 | position: absolute; 31 | border-radius: 10px; 32 | transform: translateY(5px); 33 | } 34 | .drop-caret { 35 | transition: 0.2s ease; 36 | } 37 | .drop-caret-up { 38 | transform: rotate(180deg); 39 | } 40 | -------------------------------------------------------------------------------- /src/assets/icons/archive.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/battery.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/assets/icons/brightness.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 10 | 13 | 16 | 19 | 22 | 24 | 26 | 28 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /src/assets/icons/browser.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/camera.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/codepen.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/download.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/icons/dropdown-point.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/icons/dropdown-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /src/assets/icons/dropdown.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /src/assets/icons/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/folder.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/gmail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /src/assets/icons/instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/lighting.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /src/assets/icons/linkedin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/medium.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/icons/octocat.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/profile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/project.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 20 | 21 | 22 | 23 | 24 | 26 | 27 | 28 | 29 | 30 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /src/assets/icons/setting.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/icons/sponsorship.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raghavdhingra/Web-OS/b9ab826d6761759b27439ac853a3d190ecf51ed0/src/assets/icons/sponsorship.png -------------------------------------------------------------------------------- /src/assets/icons/stopwatch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/terminal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raghavdhingra/Web-OS/b9ab826d6761759b27439ac853a3d190ecf51ed0/src/assets/icons/terminal.png -------------------------------------------------------------------------------- /src/assets/icons/terminal.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/assets/icons/transfer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raghavdhingra/Web-OS/b9ab826d6761759b27439ac853a3d190ecf51ed0/src/assets/icons/transfer.png -------------------------------------------------------------------------------- /src/assets/icons/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icons/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raghavdhingra/Web-OS/b9ab826d6761759b27439ac853a3d190ecf51ed0/src/assets/icons/user.png -------------------------------------------------------------------------------- /src/assets/icons/wifi.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 12 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /src/components/applications/browser/browser.jsx: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useState } from "react"; 2 | import HOME_ICON from "../../../assets/icons/home.svg"; 3 | import SEARCH_ICON from "../../../assets/icons/search.svg"; 4 | import "../../../assets/applications/browser.css"; 5 | 6 | const Browser = () => { 7 | const [browserLink, setBrowserLink] = useState("https://ekoru.org"); 8 | const [searchStr, setSearchStr] = useState(""); 9 | const [isLoading, setIsLoading] = useState(true); 10 | 11 | const searchBrowser = useCallback(() => { 12 | if (searchStr) { 13 | setIsLoading(true); 14 | setBrowserLink(`https://ekoru.org/?q=${searchStr}`); 15 | setSearchStr(""); 16 | } 17 | }, [searchStr]); 18 | 19 | const changeSearchStr = useCallback((e) => { 20 | e.preventDefault(); 21 | setSearchStr(e.target.value); 22 | }, []); 23 | 24 | const homeLink = useCallback(() => { 25 | setBrowserLink(""); 26 | setTimeout(() => { 27 | setIsLoading(true); 28 | setBrowserLink("https://ekoru.org"); 29 | }, 50); 30 | }, []); 31 | 32 | return ( 33 |
34 |
35 |
36 | Home 37 |
38 | e.keyCode === 13 && searchBrowser()} 44 | onChange={changeSearchStr} 45 | /> 46 |
47 | search 48 |
49 |
50 |