created mac OS desktop with HTML, CSS, JS 😀

Overview

Hello World 👋

I am planing to make a mac OS simulator using HTML, CSS, and JavaScript 😀

Mac Os Monterey

Try it now! : https://mhmdmhd6.github.io/Mac-OS-Desktop

Sample Desktop Application 👇

Screenshot 2022-06-04 155457

Sample Mobile Application 👇



New Available features in this recent versions are: 😀

  • New background image.
  • Bluring the navbar (Bottom and Top).
  • New icons are added to the bottom taskbar.
  • Menu is added to top taskbar.
  • Dots under the icons of open apps.
  • Apps name is in top navbar.
  • Add light theme to project.
  • Right click Menubar.
  • control center for control brightness, sound, WiFi and others.

Sample images for the changes are as follow: 👇



In this version I have added new icons, launchpad, Notepad and calculator. 😃 An example of new icons those are added:

This is how the new features looks like :)

new feature in this version Launchpad
new feature launchpad
Terminal Calculator App

and also Note app

note


📌 Please feel free to contribute to this project with your commmits, and share this with your friends if you like this projects. 😁 😃

List of components for this project:

  • Navbar top
  • Dock
  • Clock (AM , PM)
  • Date
  • App Window
  • Drop down menu on navbar top
  • Terminal app
  • Note app
  • notification page
  • Add more notes on note app
  • Calculator app
  • Control center
  • Preference app
  • Map app
  • Siri
  • VSCode app
  • Weather app
  • Calendar app
  • Launchpad
  • search in Launchpad
  • Launchpad icons vibrate
  • Launchpad change page
  • Launchpad animation
  • dragable icon on dock
  • right click to duck icons
  • right click to desktop
  • shortcuts for opening app and other parts of site
  • Spotlight search
  • Change dekstop background
  • Spotlight search
  • Add change brightness range input

list of Shorcuts :

Alt + t = opening Terminal
Alt + o = opening Launchpad
Alt + s = opening serach in launchpad

Acknowledgements

Thanks @neysidev (Mehdi Neysi), @m-kashani (Mahdi Kashani) , @pooria faramarzian and @safaeean (Hossein Piri) for helping me to improve this project 🙏

Comments
  • FUNDING

    FUNDING

    Hi,

    If you are looking for sponsors first go to Sponsor page and register for verification. After verification create a repository with .github name. Add a README.md and a FUNDING.yml file in it. in yml file put these lines:

    github: mhmdmhd6
    tidelift: mhmdmhd6/Mac-OS-Desktop
    

    You can remove FUNDING.yml from this repo when you make .github repository. If there is any question you can send me Emails or ask them in Telegram.

    Email Telegram

    Goodnight. May the force be with you. Bye.

    Close this when you read

    opened by BlackIQ 3
  • Contribute in this project

    Contribute in this project

    Hello, I checked this code and I was really surprised that it works very smoothly and perfectly. I found some bugs in this project and I am really interested in contributing to this project. I wanted to ask your opinion before sending the pull request :)

    opened by arminamirinasab 2
  • Terminal app bugged when resizing and dragging.

    Terminal app bugged when resizing and dragging.

    I was just testing the Terminal app.

    I made it fullscreen and then minimized it, and after that when I was dragging the window with my mouse, this happened.

    ⬇️

    Buggged Terminal

    opened by iDCoded 2
  • Layout/Font Size Scaling

    Layout/Font Size Scaling

    Hi,

    I also found an issue about scaling for the larger screen.

    So basically, it's kinda hard to read/view the text for the bigger screen.

    Video: https://watch.screencastify.com/v/wfkrsfaoIl2zUY08gWAz

    opened by permanar 1
  • Right Click z-index Issue

    Right Click z-index Issue

    Hi,

    Thank you for the great project. It's awesome!

    Anyway, I found an issue with the right-click's layer functionality.

    Video: https://watch.screencastify.com/v/9cP1p3YebyCXPXTOzbsn

    opened by permanar 1
  • :bug: Fix terminal

    :bug: Fix terminal

    use function for detecting if element's content is overflowing to set the position of the terminal taskbar to a 'fixed' position by adding a class to the terminal taskbar element.

    Preview:

    Fixed Preview

    opened by sihlebomela 1
  • Great Job Mr. Mohammad!

    Great Job Mr. Mohammad!

    سلام

    از طریق پوریا عبداللهی با پروژه اتون اشنا شدم و خیلی خوشم اومد. بعد از بررسی اجمالی پروژه و توابع داخلیش تصمیم گرفتم فایل مرا بخوان" پروژه اتون رو تمیز کنم.

    امیدوارم روز به روز بیشتر ازین پروژه استقبال بشه و مباحث بیشتری رو بشه باهاش تمرین کردن و یاد گرفت

    خدا قوت!

    opened by m-kashani 1
  • Brightness Optimization

    Brightness Optimization

    Hello, to start, I added a simple feature to the project. I think this project needs powerful documentation for development. I am very interested in writing this documentation myself so that others like me can develop this project.

    I included some of these changes in this commit:

    The "About this Mac" section was linked to the project's github page, the minimum brightness was increased by 20% (problem is too dark), and from now on the screen brightness will be saved in the browser's local storage to give the feeling of using an operating system. to users :)

    opened by arminamirinasab 0
  • Add new fetures to the battery component

    Add new fetures to the battery component

    1. Get user battery level plus default value
    2. Show green background only on charging plus showing a charging electrical icon (Z)
    3. Update battery resource on charging
    opened by AhmadrezaMozaffary 0
  • What is your age man. This thing is insane . Can I download the source code and edit it to make something of my choice?

    What is your age man. This thing is insane . Can I download the source code and edit it to make something of my choice?

    Actually I am 15 y/o And I was into android development and python Basically did alot of pentesting, learnt alot . But I thought of doing something different .

    I found this and would like to edit the src and make something more beautiful like this. CAN I ?

    " I AM NEW TO HTML . THIS PROJECT WILL HELP ME TO UNDERSTAND THE DOCUMENTATION OF HTML MORE EASILY"

    opened by ghost 0
  • refactor: update navbar user interface

    refactor: update navbar user interface

    What has updated?

    • Added comments style and variables
    • Added inter font to the whole website
    • Refactored dropdown html code
    • The distances were observed correctly
    • When you put the item in dropdown, the background color changes to blue

    Dropdown (Before)

    Dropdown - Before

    Dropdown (After)

    Dropdown - After

    Navbar (Before)

    Navbar - Before

    Navbar (After)

    Navbar - After

    opened by neysidev 0
Releases(v1.4)
Owner
mhmd
Front end junior dev 15 y.o
mhmd
Requestly Desktop App (Mac, Linux, Windows)

Requestly Desktop App Requestly Desktop App. Debug your network request across all apps (Safari, Chrome, Firefox, Brave...) using a single app. Direct

Requestly 14 Jan 2, 2023
Desktop App for mdSilo: Tiny Knowledge silo on your desktop.

mdSilo A mind silo for storing ideas, thought, knowledge with a powerful writing tool. built with React and Tauri. Demo Discord This is desktop app, a

D.Loh 203 Dec 27, 2022
This provides an extension integration with Docker Desktop to run k9s quickly and easily through the Docker Desktop interface.

k9s extension for Docker Desktop This provides an extension integration with Docker Desktop to allow k9s quickly and easily through the Docker Desktop

James Spurin 14 Dec 16, 2022
Inter Process Communication Module for node supporting Unix sockets, TCP, TLS, and UDP. Giving lightning speed on Linux, Mac, and Windows. Neural Networking in Node.JS

Inter Process Communication Module for node supporting Unix sockets, TCP, TLS, and UDP. Giving lightning speed on Linux, Mac, and Windows. Neural Networking in Node.JS

Node IPC 43 Dec 9, 2022
MagicCap is a image/GIF capture suite for Mac and Linux

MagicCap is a image/GIF capture suite for Mac and Linux. You can get a precompiled copy from the releases page of this GitHub page.

null 5 Sep 15, 2022
An open-source, blazing fast code editor for Windows, Mac, and Linux.

Thermite An open-source, blazing fast code editor for Windows, Mac, and Linux. About Thermite is a Blazing Fast, Open-Source, Cross-Platform Code Edit

Keston 4 Oct 25, 2022
Possibly the coolest way to install apps and customize your Mac!

BrewMyMac Possibly the coolest way to install apps and customize your Mac! Introduction This article explains the motivation behind this project. Gett

Alan Tai 38 Dec 6, 2022
A Tempermonky / Greasemonkey plugin which can help you export your class schedule to the calendar on your phone / pad / PC / Mac.

WHU Class Schedule Export as iCS Languages: English | 簡體中文 | 繁體中文 Changelog v0.90.1 - Sep 18, 2022 Fix bugs: Fix an error when a class have multiple s

Ostrich_B 6 Sep 7, 2022
Interactive To Do List, draggable tasks, optimized for desktop and mobile screen sizes. It reserves data in local storage. Built with HTML, CSS, and JavaScript.

To Do List Interactive daily To-Do List Built With Major languages: html, css, javascript Frameworks: Technologies used: Webpack Live Demo Live Demo L

Jafar Yousef 6 Aug 4, 2022
"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. It is created with HTML , CSS , JS and webpack and NPM.

My Todo List "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as com

Dyary Raoof Bayz Agha 5 Mar 29, 2022
Code Playground is a online application for testing and showcasing user-created and collaborational HTML, CSS and JavaScript code snippets

Code Playground About Code Playground is a online application for testing and showcasing user-created and collaborational HTML, CSS and JavaScript cod

Arshansh Agarwal 5 Dec 17, 2022
An Awesome Toggle Menu created with HTML,CSS,JQuery,font-awesome and line by line comment.

Demo : https://blackx-732.github.io/AwesomeMenu/ Under open source license No ©copyright issues Anyone can be modify this code as well Specifically we

BlackX-Lolipop 2 Feb 9, 2021
Keep track of your bookshelf with this dynamic list, created with HTML, CSS and populated by JavaScript.

Awesome Books In this project, is ment to build a basic website that allows users to add/remove books from a list. Built With HTML JavaScript CSS Auth

Federico Luna 8 Sep 2, 2022
This project is a group Project created using Poke Api, HTML, CSS and JavaScript

JavaScript-Capstone-Project This project is a group Project created using Poke Api, HTML, CSS and JavaScript. Home Page About Page Project Documentati

David Kasilia Mwanzia 6 Nov 18, 2022
A simple breakout game created using HTML, CSS and Javascript

BreakOut Game This game is created using HTML, CSS and Javascript Game Overview The game would consist of 3 lives in order to clear out all the blocks

Dhanush 7 Nov 27, 2022
Pure JavaScript library that add .is-hover class instead of css :hover for mobile and desktop.

MultiDeviceHover Pure JavaScript library that add .is-hover class instead of css :hover for mobile and desktop. Usage Install Using npm, install multi

Ryuta Sakai 1 Oct 5, 2021
Keep a track of all the tasks you need to do and Check off ones you have completed - Created using HTML, SCSS, JavaScript and Webpack.

To Do List Keep a track of tasks you need to do. An Application where you can keep a track of the tasks you need to do and checkout the ones that have

Awais Amjed 19 Jul 28, 2022
In this project, we built a simple HTML list of To Do tasks. This simple web page was created using webpack and served by a webpack dev server.

To do list In this project, we built a simple HTML list of To Do tasks. This simple web page was created using webpack and served by a webpack dev ser

Jesús Vázquez 8 Dec 21, 2022