{"id":13552898,"url":"https://github.com/Laaouatni/w11CSS","last_synced_at":"2025-04-03T04:31:01.530Z","repository":{"id":54503763,"uuid":"432506785","full_name":"Laaouatni/w11CSS","owner":"Laaouatni","description":"Windows 11 UI WEB-BASED. works directly on your Browser! made by Laaouatni. Using only HTML, CSS and Vanilla Javascript (No Framework) ","archived":false,"fork":false,"pushed_at":"2024-12-05T16:10:17.000Z","size":2857,"stargazers_count":107,"open_issues_count":3,"forks_count":24,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-29T19:06:36.851Z","etag":null,"topics":["animation","css-animations","css-flexbox","css-grid","css-grid-layout","microsoft-windows","operating-system","os","w11","w11-clone","windows-11","windows-11-clone","windows-11-web","windows-11-web-clone","windows-clone","windows-desktop","windows11","windows11-darkmode","windows11-recreation","windows11-web"],"latest_commit_sha":null,"homepage":"https://w11-clone.vercel.app","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Laaouatni.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-11-27T16:10:07.000Z","updated_at":"2025-02-24T12:50:42.000Z","dependencies_parsed_at":"2024-08-01T12:21:43.022Z","dependency_job_id":"5d5b3f9a-2c44-49f6-a1e6-1ebf870cf034","html_url":"https://github.com/Laaouatni/w11CSS","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Laaouatni%2Fw11CSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Laaouatni%2Fw11CSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Laaouatni%2Fw11CSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Laaouatni%2Fw11CSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Laaouatni","download_url":"https://codeload.github.com/Laaouatni/w11CSS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246939151,"owners_count":20857916,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","css-animations","css-flexbox","css-grid","css-grid-layout","microsoft-windows","operating-system","os","w11","w11-clone","windows-11","windows-11-clone","windows-11-web","windows-11-web-clone","windows-clone","windows-desktop","windows11","windows11-darkmode","windows11-recreation","windows11-web"],"created_at":"2024-08-01T12:02:12.920Z","updated_at":"2025-04-03T04:31:00.998Z","avatar_url":"https://github.com/Laaouatni.png","language":"HTML","readme":"# Windows 11 CSS\n\n\u003e thanks for the ⭐ stars... \n\u003e \u003cbr\u003e the code isn't the best, I know but unfortunately, \n\u003e \n\u003e I won't edit this repo, to keep it simple for junior devs (like I was 2 years ago) \n\u003e \u003cbr\u003e because if is starred a lot I think is good as it is.\n\u003e\n\u003e sorry *(you can change it if you want to, to make it even better)*\n\n### online website\n\n\u003ca href=\"https://w11-clone.vercel.app\"\u003ew11-clone.vercel.app\u003c/a\u003e\n\n-----\n\n### User Interface\n\n![windows 11 interfaccia clone](https://user-images.githubusercontent.com/87947051/145460305-997d42b9-3b7d-49e9-8da3-1d4e15563b66.png)\n\n-----\n\n## table of contents\n\n- [Windows 11 Clone](#windows-11-clone)\n  - [LINK website](#online-website-w11-clone)\n- [Image of Windows 11 Clone](#user-interface)\n  - [table of contents](#table-of-contents)\n    - [on mouse_move, it will create a dinamic selection drag](#new-feature-on-mouse_move-it-will-create-a-dinamic-selection-drag)\n    - [START MENU](#start-menu-with-animations)\n      - [static image](#static-image-of-start-menu-windows-11)\n      - [gif animation](#gif-of-the-animation-on-start-menu-windows-11)\n    - [WIDGET section](#widget-taskbar-section-of-windows-11)\n      - [static image](#static-image-of-widget-section-when-is-active-windows-11)\n      - [gif animation](#gif-of-the-animation-on-widget-section-windows-11)\n    - [CREATE NEW WINDOW on click](#create-new-windows-tab-on-click-of-any-icon)\n      - [static image](#static-image-of-new-tab-when-generated-windows-11)\n      - [gif animation](#gif-of-the-animation-of-new-tab-when-generated-windows-11)\n    - [MOVABLE and RESIZABLE window](#movable-and-resizable-tab-window)\n      - [static image](#static-image-of-movable-and-resizable-tab-window-windows-11)\n      - [gif animation](#gif-with-animation-of-this-functionality)\n        - [MOVABLE window functionality](#movable-window-functionality-onmousemove)\n        - [RESIZABLE window functionality](#resize-window-functionality-without-using-javascript)\n    - [SNAP FUNCTIONALITY](#windows-11-snap-functionality)\n      - [LEFT snap](#left-snap)\n        - [static image](#static-image-of-left-snap-functionality)\n        - [gif animation](#animated-gif-of-left-snap-functionality)\n      - [RIGHT snap](#right-snap)\n        - [static image](#static-image-of-right-snap-functionality)\n      - [FULL_SCREEN snap](#all_screen-snap)\n        - [static image](#static-image-of-full_screen-snap-functionality)\n        - [gif animation ](#animated-gif-of-full_screen-snap-functionality)\n    - [if window minimized, the icon is in NavBar (all this is centered automatically)](#if-window-minimized-the-icon-is-in-navbar-all-this-is-centered-automatically)\n      - [static image](#static-image)\n      - [gif animation](#gif-animation)\n\n-----\n\n### ✅NEW FEATURE: on mouse_move, it will create a dinamic selection drag\n![selection drag windows 11 clone](https://user-images.githubusercontent.com/87947051/147878194-a7d1806e-caed-4633-875d-273df00374d9.gif)\n\n### Start Menu (with Animations)\n\n###### static image of START menu (windows 11)\n\n![windows 11 start section clone](https://user-images.githubusercontent.com/87947051/145460298-84d0d60b-c15e-4639-9525-a0e2dd5ddf51.png)\n\n###### gif of the animation on START menu (Windows 11)\n\n![windows 11 start menu animation](https://user-images.githubusercontent.com/87947051/147880209-195156a0-69bb-4538-a2f7-e10e59fc889e.gif)\n\n-----\n\n### Widget TaskBar Section of windows 11\n\n###### static image of WIDGET section when is Active (windows 11)\n\n![windows 11 widget section clone](https://user-images.githubusercontent.com/87947051/145460294-80e07f69-d55b-4ee9-8de9-ca66641beefe.png)\n\n###### gif of the animation on WIDGET section (Windows 11)\n\n![Widget windows 11 animation](https://user-images.githubusercontent.com/87947051/147880802-da349f95-08bb-4814-b746-d54262802287.gif)\n\n-----\n\n### create new windows tab on click of any icon\n\n###### static image of new tab when generated (Windows 11)\n\n![windows tab windows 11 clone](https://user-images.githubusercontent.com/87947051/145460289-6d894b1b-84ca-4e64-81a1-3126798ca601.png)\n\n###### gif of the animation of new tab when generated (Windows 11)\n\n![windows tab window generated, windows 11 dark animation](https://user-images.githubusercontent.com/87947051/147881150-93a6c02e-0eec-4ba6-a96f-bd3240a269ce.gif)\n\n-----\n\n### movable and resizable tab window\n\n###### static image of movable and resizable tab window (Windows 11)\n\n![windows 11 tab movement and rezible clone](https://user-images.githubusercontent.com/87947051/145460285-5bf51d47-5bd0-4576-83b0-ff434527104e.png)\n\n#### gif with animation of this functionality\n\n###### movable window functionality (onmousemove)\n\n![movable window in windows 11 clone html css javascript animation](https://user-images.githubusercontent.com/87947051/147881528-a46aa162-f011-4d6b-b291-606ee7b52274.gif)\n\n###### RESIZE window functionality (without using Javascript)\n\n![resize window in windows 11 clone animation](https://user-images.githubusercontent.com/87947051/147881807-422861ed-1cd0-441b-83f5-ca8d0ac9ccc6.gif)\n\n-----\n\n### windows 11 snap functionality\n\n#### **left** snap\n\n###### static image of LEFT SNAP functionality\n\n![windows 11 clone tab, can fit all right or left space](https://user-images.githubusercontent.com/87947051/145460277-a0fcf6a4-1b42-4745-8a30-11f3f7ad5547.png)\n\n###### animated gif of LEFT SNAP functionality\n\n![left snap animation windows 11](https://user-images.githubusercontent.com/87947051/147882279-8209b89f-b08b-4bfd-8367-0e2b222e45c3.gif)\n\n#### **right** snap\n\n###### static image of RIGHT SNAP functionality\n\n![Immagine 2021-12-11 123206](https://user-images.githubusercontent.com/87947051/145674918-8fd6a583-0f7f-4fd3-baee-0ffebfbfef81.png)\n\n#### **all_screen** snap\n\n###### static image of FULL_SCREEN snap functionality\n![all height tab windows 11 clone](https://user-images.githubusercontent.com/87947051/145670904-df8eb745-e670-4a82-b04d-1980ec501bbc.png)\n\n###### animated gif of FULL_SCREEN snap functionality\n![full screen window tab in windows 11](https://user-images.githubusercontent.com/87947051/147883682-420d7882-03d9-4ded-9054-1949a78113d5.gif)\n\n-----\n\n### if window minimized, the icon is in NavBar (all this is centered automatically)\n\n###### static image\n![navbar windows 11 html css clone](https://user-images.githubusercontent.com/87947051/145670732-259b9747-22e0-45e9-9c8e-b534341875fd.png)\n\n###### animated gif\n![gif navbar minimized icons](https://user-images.githubusercontent.com/87947051/147884263-2fc03350-ea53-487e-87b1-4c203ad335ad.gif)\n\n\n-----\n\n![w11 views](https://visitor-badge.glitch.me/badge?page_id=w11CSS)\n\nviews count started from 3 February, but the project is uploaded on december.\n","funding_links":[],"categories":["HTML"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLaaouatni%2Fw11CSS","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLaaouatni%2Fw11CSS","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLaaouatni%2Fw11CSS/lists"}