Windows 12 Web Edition In-Depth Development Report

科技语者

已于 2023-11-24 19:51:53 修改

阅读量1.4k

点赞数 1

分类专栏： Windows 12 文章标签： windows

于 2023-11-19 12:58:24 首次发布

本文链接：https://blog.csdn.net/2302_81075415/article/details/134489315

版权

Windows 12 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Hacker Beaver Article Statement

Original For the record, this is an original article by Hacker Beaver, this article is under a CC 4.0 BY-SA contract, please include the original source.

The original creator allows others to reproduce this article, but may not make any changes to this creation, may not be applied to the commercial use of this article, the contract is a legally binding contract, please consciously abide by the contract permission, respect for the labor of others.

Please comply with the above provisions, we have the right to legal defense through legal means.

Infringement Reporting Email: moss8882023@163.com

Author's signature: Hacker Beaver

Date: November 18, 2023

preamble

In his original article "Windows 12 Web Edition In-Depth Development Report", Hacker Beaver gives us a detailed explanation of Windows 12 web development essentials. He started with the basics of the operating system and let us understand the various technical details of the web front-end, back-end and security. His explanations are so in-depth that we beginners can easily understand and master the essentials of Windows 12 Web Edition development.

In this article, Hacker Beaver not only provides us with a wealth of technical details, but also helps us better understand these points through clear and concise diagrams and examples. His explanatory style is easy to understand, so even people with no programming knowledge can easily get started.

In addition, he shared some practical development tips and experiences which are invaluable for us beginners. Through his practical experience, he let us understand how to do web development better and avoid some common mistakes.

Overall, this article is not only a great read but also provides a valuable reference guide for developers. If you want to know more about Windows 12 Web Edition development, then this article is not to be missed. All aspects of the emerging technology of Web Edition. With a unique perspective and in-depth analysis, he explains the advantages, features, usage scenarios, and future trends of Windows 12 Web Edition. His clear, logical and precise reasoning impresses the reader.

catalogs

Section I. Development environment -----------------------------------1

1.1 Development of software -------------------------------------1

1.2 Open Source Project -----------------------------------------2

Section II Introduction to HTML --------------------------------------4

2.1 What is the front end ----------------------------------------4

2.2 History of the front end ------------------------------------4

2.3 Why learn front-end development -----------------------------6

2.4 Front-end development learning journey ----------------------7

2.5 Software Development Architecture ---------------------------8

2.6 Development environment ------------------------------------10

2.7 How many things happen when you enter a URL back in a browser window?------------------------------------------------------------11

2.8 HTTP protocol ----------------------------------------------11

Section III. Local area networks ------------------------------------13

Section IV. Source code --------------------------------------------16

4.1 HTML section source code ------------------------------------16

4.2 CSS part of the source code ----------------------------------44

4.3 JS Partial Source Code --------------------------------------63

Section V. Intranet Penetration ------------------------------------78

Acknowledgements --------------------------------------------------79

Section I. Development environment

Introduction: In this section, you can learn some "cold knowledge" about web development, which is very suitable for beginners to understand.

1.1 Development of software

Official website download address: https://code.visualstudio.com/

Here the author used Visual Studio Code software, this software is very suitable for beginners, here you can refer to the official website address above to download. As shown in the picture, this software can write programs in various languages, such as: PYthon, Java, C, C#, C++ ...... This software is still very good overall.

The author recommends some plugins that are commonly used for designing front-ends

1.2 Open source projects

Win12 web version download: https://github.com/tjy-gitnub/win12

Since 1985, when Microsoft released the first generation of Windows, its market share has been steadily increasing. After decades of iterative development, Windows is now the dominant desktop operating system in the world.

This year, the entire technology industry began to embrace the era of artificial intelligence, Microsoft, with the GPT-4 released by OpenAI, launched a new AI search engine Bing early, and in the fog-filled way forward, killed a bloody road, quickly stood firm, and came into prominence.

The previous Microsoft in the developer conference put a big move, announced the official launch of Windows Copilot, AI deep integration into the future of the Windows 11 system, manpower an AI intelligent assistant, is no longer a dream.

The operating system's UI is elegantly simple and comes with a variety of smooth and silky animations, as well as a variety of utilities and applications that emulate the native system.

The project is developed entirely with front-end technology and integrates Microsoft-like Windows 12 Copilot, which can quickly handle various work tasks and improve productivity when you give instructions to the system.

Interestingly, several of the project's core developers are mainly junior high school students, including one who was born in 2009, is only 14 years old, and will be in his third year of junior high school this year.

During his school years, he won the first prize of CSP popularization group and the third prize of Blue Bridge Cup national competition. From the perspective of his technology stack, he should have been inspired by Scratch at the earliest, and then gradually developed to the front-end field.

The fact that I can be so passionate about technology and put it into practice at such a young age makes me feel ashamed of myself when I was only playing games on the computer.

After the project was open-sourced on GitHub, Star has continued to rise in the last few days, and is now close to 3,000, receiving a lot of attention from web developers.

How many stars would you rate this program overall if it were 5 stars?

Section II. Introduction to HTML

Introduction: HTML language is Hyper Text Markup Language.HTML (Hyper Text Markup Language) is a standard markup language used to create web pages.

2.1 What is the Front End

The back-end is responsible for dealing with business logic & providing data, any interface that deals directly with the user can be called the front-end, mainly responsible for the page display, interaction with the user and so on below are the front-end:

1. Company's official website (access the company's website via a browser on a PC)

2. Mobile web page (browse company information, mini games, etc. on your cell phone)

3. Mobile APP (e.g. Taobao, Go Travel, Ctrip, etc.)

4. WeChat small program (WeChat's newest feature, loaded as you go, does not take up space on your phone).

In the early days, the main content of the web page production are static, mainly text images, the user to use the site is also mainly browsing.

With the development of the Internet, modern web pages are more beautiful, interactive and powerful. Therefore, the main technologies of front-end development nowadays usually refer to html, css, js technologies and the use of some development frameworks.

2.2 History of the Front End

Web production in the web 1.0 era

Web page production is the product of the web 1.0 era, the web page at that time is mainly a static web page, the so-called static web page is no interaction with the user and only for the reader to browse the web page, we were called "psoriasis" web page.

For example, a QQ log, a blog post and other display articles. In the web1.0 era, the only thing the user can do is to browse the site's text image content, when the user can not be like now in most of the site can be commented on the exchange (lack of interactivity).

I believe that most people may have heard of the "Three Musketeers of the Web Dreamweaver + Fireworks + Flash it, this combination is the product of the web 1.0 era!

Front-end development in the web 2.0 era

The term "front-end development" evolved from "web production".

Since 2005, the Internet has entered the web 2.0 era. Static web pages consisting of a single text and image can no longer meet the needs of users, who need a better experience.

In the web 2.0 era, there are static and dynamic web pages.

The so-called dynamic web pages, that is, the user can not only browse the web page, but also can interact with the server. For example, if you log in to Sina Weibo, you need to enter your account password, and this time you need the server to verify your account and password before you can do so.

Web pages in the web 2.0 era not only contain colorful animation, audio and video, but also allow users to comment and exchange ideas, upload and download files, etc. (interactivity). If the web pages of this era are made by "Web Three Musketeers Dreamweaver+Fireworks+Flash", it is far from being able to meet the demand.

Now website development, whether it is difficult to develop, or development methods, are closer to the traditional website background development, so now no longer called "web page production", but called "web front-end development".

Therefore, in the web2.0 era, if you want to learn web development technology, do not believe in the so-called "three swordsmen Dreamweaver + Fireworks + Flash, because this combination has been the product of the last Internet era. And this combination of website development out of the problem is also very much, such as code redundancy, website maintenance difficulties (learning to the late, you will know why not use this combination.

2.3 Why learn front-end development

Why do we need to learn front-end development, on the one hand, the market requirements for programmers tend to be more and more full-stack. On the other hand, those who do not seek the overall situation is not enough to seek a city, that is to say, that is to say, we not only want to master the back-end development technology but also to master a certain degree of front-end development technology. Through the previous course of study, I believe we have mastered the basic syntax of Python, functions, object-oriented, network programming and database-related content. The content of the above are all part of the back-end development category, in the next chapter we will come together to learn the front-end part of the content.

2.4 Front-end development learning journey

We know that using the so-called Web 3 Musketeers can no longer meet the demand, so what exactly is the technology to learn for front-end development? Web page is most mainly composed of 3 parts: structure, performance and behavior. Web page now the new standard is W3C, the current mode is HTML, CSS and JavaScript.

1. What is HTML?

HTML, full name "Hyper Text Markup Language (Hypertext Markup Language)", simply put, web pages are made in HTML. HTML is a descriptive language, is a very easy to get started with the language.

2.css

CSS, full name "(Cascading Style Sheets)". In the future, we will see "Cascading Style Sheets" and "CSS styles" in other places, referring to CSS.

3. JavaScript

JavaScript is a scripting language.

4. Front-end framework

1. bootstrap

2. JQuery

3. vue

In fact, the framework is a lot of operations encapsulated for you in advance, you just need to follow a fixed syntax call.

Differences between HTML, CSS and JavaScript

We all know that the three core front-end technologies are HTML, CSS and JavaScript. But what exactly do these three do?

HTML is the structure/skeleton of a web page without any styling

CSS is the appearance of a web page, adding various styles to the skeleton to make it look good

JavaScript is the behavior of the page, control the dynamic effects of the page

For example, if we compare the process of front-end development to "building a house", making a web page is like building a house!

1. Build the house structure first (HTML)

2. After you have built your house, you decorate it (CSS), for example, by putting curtains on the windows and beautiful tiles on the floor.

3. Finally, after the renovation, when night falls, we have to turn on the lights (JavaScript) so we can see inside.

2.5 Software Development Architecture

CS Client Server

BS Browser Server

PS: BS is essentially CS too

Simple Example of BS Architecture

First, we manually develop and write a socket server, the code is as follows.

import socket

s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)

s.bind(('127.0.0.1', 8888))

s.listen(5)

while True:

conn, addr = s.accept()

data = conn.recv(1024)

print(data)

conn.send(b'http/1.1 200 ok\r\n')

conn.send(b'\r\n')

with open('index.html',mode='rb') as f.

data=f.read()

conn.send(data)

conn.close()

Then create an index.html file, the character encoding is changed to gbk, otherwise there will be garbled problems, because Google Chrome default character encoding for gbk, the code is as follows:

<h1 style="color: chartreuse">Hello there! </h1>

<h1>Hacker Beaver</h1>

The server then receives the data and link request sent by the client, the effect is as shown below.

How about this for a simple implementation of a BS architecture?

2.6 Development Environment

There are many HTML editors on the market to choose from, the common Hbuild, Sublime Text, Dreamweare can be used to develop HTML. Of course, PyCharm also supports HTML development. Here the author uses the software is Visual Studio Code in the first section 1.1 on the said

1. Browser

Browsers can open html files locally as well, browsers are like interpreters, from top to bottom, left to right

There are five major browser vendors in the world, and we mainly focus on Chrome.

chrome

firfox

safri

presto

Browser kernels are different, browser rendering engines are different (compatibility issues are considered at a later stage), and all other browsers use these 5 browser kernels

2. Browser History

The world's first browser, Netscape.

Then it tried to make an operating system. It moved Microsoft's cheese. Microsoft tried to kill him.

Microsoft also did a particularly desperate, Microsoft use the market share of the windows operating system, provides a free browser ie, and windows operating system must have.

China's earliest browser ie6, state-owned enterprises use ie6.

Browsers are different, parsing different labeling standards, Microsoft is too overbearing, just don't change the standard, insist on not updating, then Google and Firefox grabbed the market, IE is stupid, at present, only fools use IE.

The market became more and more confusing, so w3c (World Wide Web Consortium (W3C)) was formed to develop a unified standard for everyone.

Learning front-end half of the work in the consideration of compatibility, the current html5 in the compatibility of the solution is better.

3. File suffix specification

Difference between .htm and .html extensions

DOS systems (win95 or win98) can only support suffixes of length 3, so older versions of the system have been using .htm suffixes

But in windows suffix length can be greater than 3 digits, so windows does not matter htm and html, html is named for the format of the long file

If the file extension is .htm, there is no doubt that browsers can be compatible, but .html is recommended

2.7 How many things happen when you enter a URL back in a browser window?

The browser sends a request to the server.
Server accepts requests (eg: request Baidu request)
The server returns the appropriate response (eg: return a Baidu home page)
The browser accepts the response and renders the page for the user to see according to specific rules

The browser can act as a client for many services

Baidu Tencent video Youku video...

How do you make it possible for a browser to interact with data from several different clients?

1. Browser is very powerful to automatically recognize different servers to do different processing

2. develop a unified standard If you want the server you write to be able to do the normal data interaction with the client side

3. Then you have to follow some rules.

2.8 HTTP protocol

1. Introduction to the HTTP protocol

HyperText Transfer Protocol (English: HyperText Transfer Protocol, abbreviation: HTTP) is an application layer protocol for distributed, collaborative, and hypermedia information systems.HTTP is the basis for data communication on the World Wide Web.

2. Role

Used to specify the format of the data interaction between the server and the browser.

Additional Notes:

You don't have to follow that protocol, but the server you write won't be accessible to browsers.

You just play with yourself, you write your own client, and if users want to use it, they just download your special app.

3. How HTTP works

The HTTP protocol defines how a Web client requests a Web page from a Web server and how the server delivers the Web page to the client.The HTTP protocol uses a request/response model. The client sends a request message to the server, which contains the requested method, URL, protocol version, request header and request data. The server responds with a status line containing the protocol version, success or error code, server information, response headers and response data.

The following are the steps for HTTP request/response:

Client Connection to Web Server

An HTTP client, usually a browser, establishes a TCP socket connection to the web server's HTTP port (80 by default). For example, http://www.baidu.com.

Send HTTP request

Through the TCP socket, the client sends a text request message to the Web server. A request message consists of four parts: request line, request header, blank line and request data.

The server accepts the request and returns an HTTP response

The web server parses the request and locates the requested resource. The server writes a copy of the resource to a TCP socket, which is read by the client. A response consists of 4 parts: a status line, a response header, a blank line, and response data.

Release Connection TCP Connection

If the connection mode is close, the server actively closes the TCP connection, and the client passively closes the connection to release the TCP connection; if the connection mode is keepalive, the connection will be maintained for a certain period of time, and you can continue to receive requests during that time;.

Client browser parses HTML content

The client browser first parses the status line for a status code indicating whether the request was successful or not. It then parses each response header, which tells the following several bytes of the HTML document and the character set of the document. The client browser reads the response data HTML, formats it according to the HTML syntax, and displays it in the browser window.

For example, if you type the URL in the address bar of your browser and press enter, you will go through the following process:

The browser requests a DNS server to resolve the IP address of the domain name in the URL.

After resolving the IP address, establish a TCP connection with the server based on the IP address and the default port 80.

The browser sends an HTTP request to read a file (the file that corresponds to the part of the URL that follows the domain name), which is sent to the server as the data in the third message of the three TCP handshakes.

The server responds to the browser request and sends the corresponding html text to the browser.

Release the TCP connection.

The browser takes the html text and displays the content.

This section is excerpted from Jarvis Echo's CSDN blog

Section III. Local area networks

With the development and improvement of the whole computer network technology, local area network (LAN) has been fully applied and popularized, and almost every organization has its own LAN, and some even have their own small LAN in their families. Obviously, the so-called LAN is a localized network that covers a small area. There is no limit to the number of computers that can be used in a LAN, from as few as two to as many as several hundred. Generally speaking, the number of workstations in an enterprise LAN ranges from a few dozen to two hundred. The geographical distance of the network can be from a few meters to less than 10 kilometers. LANs are generally located in a building or an organization, do not have pathfinding problems, and do not include network layer applications.

This type of network is characterized by a narrow connection range, a small number of users, easy configuration, and high connection rates. The fastest rate of the LAN is nowadays 10G Ethernet.

The IEEE's 802 standards committee defines several major LAN networks: Ethernet, Token Ring, Fiber Distributed Interface Network (FDDI), Asynchronous Transfer Mode (ATM), and most recently, Wireless Local Area Network (WLAN).

3.1 Ethernet

Ethernet is the most widely used local area network, including Standard Ethernet (10Mbps), Fast Ethernet (100Mbps), Gigabit Ethernet (1000 Mbps), and 10G Ethernet, all of which conform to the IEEE802.3 family of standards.

(1) Standard Ethernet

In the beginning, Ethernet had a throughput of only 10 Mbps and used the CSMA/CD (Carrier Sense Multi-Channel Access with Conflict Detection) access control method, often referred to as Standard Ethernet for the earliest 10 Mbps Ethernet. The two main transmission media for Ethernet are twisted pair and coaxial cable. All Ethernet follows the IEEE 802.3 standard.

Manchester encoding/differential Manchester encoding is what is applied to Ethernet.

The following is a list of some of the IEEE 802.3 Ethernet standards, in which the first number indicates the transmission speed in "Mbps", the last number indicates the length of a single segment of the cable (the base unit is 100m), Base means "baseband", and Broad means "bandwidth". Base means "baseband" and Broad stands for "bandwidth".

●10Base-5 using thick coaxial cable with a maximum segment length of 500m, baseband transmission method;

●10Base-2 using thin coaxial cable with a maximum segment length of 185m, baseband transmission method;

●10Base-T uses twisted-pair cables with a maximum segment length of 100m;

●1Base-5 uses twisted-pair cable with a maximum segment length of 500m and a transmission speed of 1Mbps;

●-10Broad-36 uses coaxial cable (RG-59/U CATV) with a maximum segment length of 3,600m, which is a broadband transmission method;

●10Base-F uses fiber optic transmission media with a transmission rate of 10 Mbps;

(2) Fast Ethernet

As networks have evolved, traditional standard Ethernet technology has struggled to meet the increasing speed demands of network data traffic. Prior to October 1993, for LAN applications requiring more than 10Mbps of data traffic, there was only the Fiber Distributed Data Interface (FDDI) available, but it was a very expensive, 100Mpbs cable-based LAN. In October 1993, Grand Junction launched the world's first Fast Ethernet hub FastSwitch10/100 and network interface card FastNIC100, Fast Ethernet technology is officially applied. Subsequently, Intel, SynOptics, 3COM, BayNetworks and other companies also launched their own Fast Ethernet devices. At the same time, the IEEE802 engineering group also studied various standards for 100Mbps Ethernet, such as 100BASE-TX, 100BASE-T4, MII, repeater, full duplex, etc. In March 1995, the IEEE announced the IEEE802.3u, which is the standard for 100BASE-T Fast Ethernet. 100BASE-T Fast Ethernet standard (Fast Ethernet), thus beginning the era of Fast Ethernet.

Fast Ethernet and the original work in the 100Mbps bandwidth under the FDDI compared to it has many advantages, mainly reflected in the Fast Ethernet technology can effectively protect the user in the implementation of cabling infrastructure investment, which supports 3, 4, 5 twisted-pair cable as well as fiber optic connections, can effectively use the existing facilities.

The shortcomings of Fast Ethernet are actually also shortcomings of Ethernet technology, that is, Fast Ethernet is still based on Carrier Listening Multiple Access and Conflict Detection (CSMA/CD) technology, which causes a reduction in efficiency when the network is heavily loaded, which of course can be compensated for by the use of switching technology.

The 100Mbps Fast Ethernet standard is subdivided into three subcategories: 100BASE-TX, 100BASE-FX, and 100BASE-T4.

● 100BASE-TX: is a Fast Ethernet technology that uses Category 5 data-grade unshielded twisted pair or shielded twisted pair. It uses two pairs of twisted-pair cables, one pair for transmitting and one pair for receiving data. It uses 4B/5B encoding for transmission at 125 MHz and complies with the EIA586 Category 5 cabling standard and the IBM SPT Category 1 cabling standard. It uses the same RJ-45 connector as 10BASE-T. Its maximum segment length is 100 meters. It supports full-duplex data transmission.

● 100BASE-FX: is a Fast Ethernet technology that uses fiber optic cables and is available in single-mode and multimode fibers (62.5 and 125um) The maximum distance for multimode fiber connections is 550 meters. The maximum distance for a single-mode fiber connection is 3,000 meters. It uses 4B/5B coding in transmission and a signal frequency of 125 MHz. it uses MIC/FDDI connectors, ST connectors, or SC connectors. The maximum segment length is 150m, 412m, 2000m or up to 10km, depending on the type of fiber used and the mode of operation, and it supports full-duplex data transmission. 100BASE-FX is particularly suitable for use in environments where electrical interference is a concern, for connections over large distances, or in high-security environments.

● 100BASE-T4: is a Fast Ethernet technology that can use Category 3, 4, 5 unshielded twisted pair or shielded twisted pair. It uses four pairs of twisted-pair wires, three pairs for transmitting data and one pair for detecting conflicting signals. It uses 8B/6T encoding for transmission at 25 MHz and complies with the EIA586 structured cabling standard. It uses the same RJ-45 connector as 10BASE-T and has a maximum segment length of 100 meters.

Section IV. Source code

4.1 HTML part of the source code

[index.html] source code

<!DOCTYPE html>

<head>

<title>Redirecting... </title> <! -- Optimization: adding descriptive titles -->

</head>

<body>

If your browser doesn't jump automatically, click <a href="desktop.html">here</a> ......

</body>

</html>

[bios.html] source code

<!DOCTYPE html>

<head>

<! -- Change page titles to improve search engine searchability -->

<title>Windows 12 BIOS Setup</title>

<! -- Referencing external CSS files using relative paths -->

</head>

<p style="text-align: center;margin-top: 15px;flex: 35;flex: 25;" id="confirm-tit"> Save configuration changes and exit now?</p>

<a class="confirm-button" style="color: #000;background-color: #fff;" click="document.getElementById('exit_confirm').style.display = ' none'; document.getElementById('background').style.display = 'none';" id="cancel-btn">[Cancel]</a>

</div>

<nav>

<p class="tit">BIOS Setup Utility</p>

</nav>

</nav>

<tr>

<td>

System Time.

</td>

[11:45:14]

</td>

</tr>

<tr>

<td>

System Date.

</td>

[10/08/1919]

</td>

<! -- Note: the date here is [dd/mm/yyyy] -->

</tr>

</table>

</div>

<div click="BIOS_confirm(' Save configuration changes and exit now? ','toBoot()',30)" ontouchstart="BIOS_confirm(' Save configuration changes and exit now? ','toBoot()',30)" class="exit" id="e1">Exit Saving Changes</div></div> Save configuration changes and exit now? ','toBoot()',30)" class="exit" id="e1">Exit Saving Changes</div>

<div click="BIOS_confirm(' Discard changes and exit setup? ', 'toBoot()',25);" ontouchstart="BIOS_confirm(' Discard changes and exit setup? ', 'toBoot()',25);" class="exit" id="e2">Exit Discarding Changes</div></div ', 'toBoot()',25);" class="exit" id="e2">Exit Discarding Changes</div>

<div click="BIOS_confirm(' Restore default setup? ','document.getElementById(`exit_confirm`).style.display = `none`;document. getElementById(`background`).style.display = `none`;',18);" ontouchstart="BIOS_confirm(' Restore default setup? ','document. getElementById(`exit_confirm`).style.display = `none`; document.getElementById(`background`).style.display = `none`;',18);" class="exit" id="e3">Restore Defaults</div>

</div>

<! -- Referencing JavaScript files using relative paths -->

</body>

</html>

[bluescreen.html] source code

<!DOCTYPE html>

<head>

<! -- Add descriptive information about the page -->

<! -- Windows 12 Web Edition Original by Jingyuan Tan -->

<! -- The Windows 12 Web Edition is an open source project.

Hoping to give users a preview of Windows 12 on the web, the

The content may not be consistent with the official Windows 12 release.

Use of standard web technologies such as HTML, CSS and Javascript

This program is in no way affiliated with Microsoft and should not be confused with Microsoft operating systems or products.

This is also not a Windows 365 cloud PC

Microsoft, Windows and other demonstration products in this program are trademarks of Microsoft Corporation -->

<title>Windows 12 Web Edition</title>

</head>

<body>

<style>

body{

width: 100%;

height: 100%;

background-color: #005eaa.

cursor: none;

}

#box{

display: flex;

flex-direction: column;

justify-items: center;

width: 70%;

left: 15%;

position: absolute;

height: 100%;

justify-content: center;

}

#happy-face{

color: #fff.

font-size: 150px;

margin: 0;

line-height: 1;

/* margin-left: -40px; */

margin-top: -10px;

height: 150px;

display: flex;

}

#happy-face>*{

position: relative;

line-height: 0px;

}

@keyframes eyea{

0%{

top: -140px;

left: -40px;

}

15%{

top: -150px;

left: -60px;

}

25%{

top: -140px;

left: -40px;

}

35%{

top: -150px;

left: -20px;

}

50%{

top: -140px;

left: -40px;

}

85%{

top: -140px;

left: -40px;

}

95%{

top: -45px;

left: -40px;

}

/* 63%{

top: 0px;

left: 0;

} */

}

#happy-face>.eye.a{

top: -45px;

left: -40px;

animation: eyea 2s.

}

@keyframes eyeb{

0%{

top: -140px;

left: 14px;

}

15%{

top: -150px;

left: -6px;

}

25%{

top: -140px;

left: 14px;

}

35%{

top: -150px;

left: 34px;

}

50%{

top: -140px;

left: 24px;

}

90%{

top: -140px;

left: 24px;

}

#happy-face>.eye.b{

left: -76px;

top: -125px;

animation: eyeb 2s.

}

@keyframes mou{

0%{

transform: rotate(90deg);

top: 10px;

left: -60px;

}

15%{

transform: rotate(120deg);

top: -10px;

left: -80px;

}

25%{

transform: rotate(90deg);

top: 10px;

left: -60px;

}

35%{

transform: rotate(60deg);

top: -10px;

left: -20px;

}

50%{

transform: rotate(270deg);

top: 10px;

left: -80px;

}

80%{

transform: rotate(270deg);

top: -10px;

left: -80px;

}

90%{

transform: rotate(180deg);

top: -25px;

left: -60px;

}

/* 50%{

transform: rotate(180deg);

top: 20px;

left: 50px;

} */

}

#happy-face>.mouse{

transform: rotate(180deg);

top: -25px;

left: -60px;

animation: mou 2s.

}

#tx1{

color: #fff.

font-size: 23px;

margin-bottom: 5px;

margin-top: 50px;

}

#prog{

color: #fff.

font-size: 23px;

}

#dtx{

color: #fff.

margin-left: 20px;

font-size: 17px;

margin-top: 0;

}

#qr{

min-width: 150px;

width: 150px;

height: 150px;

fill: #005eaa;

background-color: #fff;

}

#detail{

display: flex;

}

.link{

color: #efefef;

text-decoration: none;

transition: 100ms;

cursor: pointer;

}

.link:hover{

color: #aaa.

}

</style>

</div>

<p id="tx1">Your device is experiencing problems and needs a reboot. <br>We just pretend to collect certain error messages and then re-blue screen it for you. </p>

<p id="prog"><span id="complete">0</span>% complete</p>

<p id="dtx">For more information about this problem and possible solutions, please visit <br><a οnclick="window.open('https:\/\/www.bilibili.com/video/BV1GJ411x7h7','_blank ')" class="link" title="Warning from Rick Astley: Are you sure you want to click :)">https://www.windows.com/stopcode?version=12.0&channel=Canary</a>< br><br>If calling support, please provide them with the following information:<br>Termination code: <span id="stopcode">YOU_MAY_DID_NOT_STAR_THIS_PROJECT</span></p& gt;

</div>

function sleep(millisecond, callback) {

// Delay execution of the callback function for a specified number of milliseconds.

setTimeout(callback, millisecond);

}

function update_complete() {

// Update the text content of the complete element by adding 1 to its value.

complete.innerText = (parseInt(complete.innerText) + 1).toString();

}

function next_loop(element) {

// Parses the text of the complete element as an integer.

var i = parseInt(complete.innerText, 10);

// Define the delay time array

var delays = [300, 200, 100, 50];

if (i >= 100) {

// Reload the page

reload().

return;

}

var delay.

if (i < 20) {

// Corresponds to the delay time when i is less than 20

delay = delays[0];

} else if (i < 60) {

// Corresponds to the delay time when i is less than 60

delay = delays[1];

} else if (i < 80) {

// corresponds to the delay time when i is less than 80

delay = delays[2];

} else {

// corresponds to a delay time when i is greater than or equal to 80

delay = delays[3];

}

sleep(delay, function () {

// Update the value of the complete element

update_complete();

// Recursively call the next_loop function to form a loop

next_loop();

}).

}

function reload() {

// Reload the page

window.location.reload();

}

let complete = document.getElementById("complete");

next_loop();

// Get the value "code" from the URL parameter.

var r = window.location.search.substr(1).match(/(^|&)code=([^&]*)(&|$)/);

if(r!=null){

document.getElementById('stopcode').innerHTML = r[2];

}

</script>

</body>

</html>

[boot.html] Source Code

<!DOCTYPE html>

<head>

<title>Windows 12 Web Version</title> <! -- Optimization: more descriptive page titles -->

<! -- Optimization: add viewport meta tag to ensure adaptability on mobile devices -->

<style>

@font-face {

font-family: 'dos'.

src: url(... /... /fonts/dos.ttf).

}

* {

font-family: 'dos'.

margin: 0; /* Optimization: merge duplicate CSS properties */

padding: 0;

border: 0;

user-select: none;

scrollbar-width: none;

-webkit-user-select: none;

-moz-user-select: none;

-o-user-select: none;

}

::-webkit-scrollbar {

display: none;

}

body {

background-color: black;

color: white;

cursor: none; /* Optimization: use CSS properties to hide the mouse pointer */

}

.loading {

display: flex;

align-items: center;

justify-content: center;

}

</style>

</head>

<body>

<p>Starting</p>

<br>

</div>

<p style="text-align: center;">Press F2 or touch screen to enter SETUP</p>.

</div>

</body>

</html>

[desktop.html] source code (partial)

<!DOCTYPE html>

<! -------- Disable formatting of this document! -------->

<head>

<! -- Windows 12 Web Edition Original by Jingyuan Tan -->

<! -- The Windows 12 Web Edition is an open source project.

Hoping to give users a preview of Windows 12 on the web, the

The content may not be consistent with the official Windows 12 release.

Using standard web technologies such as HTML, CSS and JavaScript.

this program is in no way affiliated with microsoft and should not be confused with microsoft operating systems or products.

This is also not a Windows 365 cloud PC

Microsoft, Windows and other demonstration products in this project are trademarks of Microsoft Corporation -->

<! -- Apps style -->

<! -- Applause for the introduction of Copilot's css(bs -->

<! -- Applause for the introduction of css for voice-recognition input methods (bs -->)

<! -- Individual modules -->

<title>Windows 12 Web Edition</title>

<! -- <meta name="keywords" content="Windows 12, windows 12, Windows12, windows12, Windows 12 web version, Windows 12 web version, Windows12 web version, windows12 web version. Win12, win12,Win12 web version, win12 web version, web version"> -->

<! -- A true SEO powerhouse doesn't use keywords -->

</head>

<! -- Development Notes:

In order to unify the code style and increase readability, for the convenience of others, the following content all developers, contributors must comply with, thank you for your cooperation!

Provisions for HTML files

1. Formatting of this document is absolutely prohibited

2. For the id attribute, try to replace it with a class unless you must not use the id attribute. If you must use it, remember:

1. do not use single word id names except for body>* nodes

2. The name chosen must be meaningful

3. For non-body>* nodes, please name them according to "Parent element identifier -(...) - id name". -id name". For example: taskmgr-search, setting-search, etc.

3. Provisions for the class attribute:

1. Assign class only to necessary elements

2. The name chosen must be meaningful

3. When using css selectors, make sure that the selected element is accurately positioned with no other matches.

4. Press rows:

1. For the svg images in the file, be sure to compress them into a single line.

2. For more than three consecutive consecutive closing labels, as appropriate, pressed into one line

3. For shorter multiple items that are identical side by side, each item is pressed into a single line as appropriate, such as the contents of a list.

3. For the content before #loginback, the press line can be discarded for readability.

Some globally usable content for use and uniformity of style:

.button Classic buttons, often combined with .a

list list>

a List item, often combined with .a

.text Text content

.buttons Buttons group>

.submit Confirmation, often combined with .a

.cancel cancel, often combined with .a

.act Classic click animation

.a Modernly designed links for a variety of elements

.input Input box

The following functions are available:

setData(k,v) locally stored information, permanently available

localStorage.getItem(k) works with the former

stop(event) stops the event from being passed to the parent

showm(event,id,arg) show context menu, usage: οncοntextmenu="return showm(event,'logo',arg);"

Feel free to add to the list.

-->

<body>

<style>

#loadback.hide {

opacity: 0;

}

loading>svg>circle:last-child {

stroke: #fff;

fill: none;

stroke-width: 2px;

stroke-linecap: round;

animation: spin-infinite 2.5s linear 0s infinite normal none running;

transform-origin: 50% 50%;

transition: all .2s ease-in-out 0s;

}

loading>svg {

background-color: #00000000;

border-radius: 50%;

}

@keyframes spin-infinite {

0% {

stroke-dasharray: .01px, 43.97px;

transform: rotate(0deg)

}

50% {

stroke-dasharray: 21.99px, 21.99px;

transform: rotate(450deg)

}

to {

stroke-dasharray: .01px, 43.97px;

transform: rotate(3turn)

}

</style>

</svg>

<p id="loadbackupdate" style="position:absolute;top:calc(72% + 55px);left:0;width:100%;text-align:center;color:#fff;font-size: 25px;. display:none;">being updated</p>

</loading>

setTimeout(() => {

document.getElementById('loadbacksvg').style.opacity = 1;

document.getElementById('loadbackloading').style.opacity = 1;

}, 100).

</script>

</div>

<div class="name">Administrator</div>

<div id="login" οnclick=""

this.id = 'login-after';

this.innerText = 'Logging in...' This.innerText = 'Logging in...'

document.querySelector('#loginback').removeChild(document.querySelector('#loginback .power'));

var qwq = window.setInterval(() => {

if (this.innerText.match(/\. \...\...\...\...\... \. /) {

this.innerText = 'Logging in...' This.innerText = 'Logging in...'

}

else {

this.innerText += '.' ;

}

}, 500).

window.setTimeout(() => {

this.style.transition = 'color 500ms';

}, 100).

window.setTimeout(() => {

$('#loginback').addClass('close');

window.setTimeout(() => {

$('#loginback').css('opacity', '0');

}, 500).

window.setTimeout(() => {

$('#loginback').css('display', 'none');

window.clearInterval(qwq);

}, 2000).

if(use_music){

document.querySelector('audio#startup-music').play();

}

}, 1000).

this.onclick = null;

</div>

<i class="bi bi-power" οnclick="setTimeout(() => {window.location='shutdown.html';}, 200);" win12_title="Shutdown"></i>

<i class="bii-arrow-counterclockwise" οnclick="setTimeout(() => {window.location='reload.html';}, 200);" win12_title="Restart">< /i>

</a>

</div>

<! -- <img src="https://bing.com/th?id=OHR.Trossachs_ZH-CN9299955040_UHD.jpg&qlt=100" alt=""> -->

</div>

var draggableElement = document.getElementById("draggableBtn");

var nbFlag = true;

var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

var isDragging = false;

draggableElement.addEventListener("mousedown", dragMouseDown);

draggableElement.addEventListener("mouseup", stopDrag);

function dragMouseDown(e) {

e.preventDefault();

pos3 = e.clientX;

pos4 = e.clientY;

document.addEventListener("mousemove", elementDrag);

isDragging = false;

}

function elementDrag(e) {

e.preventDefault();

pos1 = pos3 - e.clientX;

pos2 = pos4 - e.clientY;

pos3 = e.clientX;

pos4 = e.clientY;

draggableElement.style.top = (draggableElement.offsetTop - pos2) + "px";

draggableElement.style.left = (draggableElement.offsetLeft - pos1) + "px";

isDragging = true;

}

function stopDrag() {

document.removeEventListener("mousemove", elementDrag);

if (!isDragging) {

startSpeechRecognition();

}

function insertTextAtCursor(text) {

var range, selection.

if (window.getSelection) {

selection = window.getSelection();

if (selection.rangeCount) {

range = selection.getRangeAt(0);

if (range.commonAncestorContainer.parentNode.isContentEditable) {

range.collapse(false);

var textNode = document.createTextNode(text);

range.insertNode(textNode);

range.setEndAfter(textNode);

range.setStartAfter(textNode);

selection.removeAllRanges();

selection.addRange(range);

}

else{

var el = document.activeElement;

var start = el.selectionStart;

var end = el.selectionEnd;

var value = el.value;

var newText = value.slice(0, start) + text + value.slice(end);

el.value = newText;

el.selectionStart = el.selectionEnd = start + text.length;

}

</body>

[mainpage.html] source code

<!DOCTYPE html>

<head>

<title>Win12 browser</title> <! -- Optimization: change page title to descriptive -->

<style>

* {

margin: 0px;

padding: 0px;

}

html.

body {

height: 100%;

width: 100%;

}

* {

background: transparent;

}

body {

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

}

body>div.input {

display: flex;

width: 50%;

/* height: 10%; */

height: 2em;

font-size: 1.3em;

border-radius: 25px;

border: none;

padding: 4px 25px 5px 25px;

align-items: center;

justify-content: space-between;

border: 2px solid #6f6f6f50;

backdrop-filter: saturate(1.3);

box-shadow: 1px 3px 8px #00000045;

}

body>div.input>input {

font-size: 1em;

border: none;

height: 100%;

width: 90%;

color: #7f7f7f.

}

body>div.input>input:focus {

outline: none;

}

body>div.logo {

width: 100%;

height: 60px;

background-image: url('. /img/Bing.svg');

background-size: contain;

background-repeat: no-repeat;

background-position: 50% 50%;

margin-bottom: 30px;

margin-top:-150px;

}

</style>

</head>

<body>

</svg>

</div>

function handleKeyPress(event) {

// If the Enter key is pressed

if (event.keyCode === 13) {

// Get the value of the input box

var inputValue = event.target.value;

// Determine if the query is a search query

if (isSearchQuery(inputValue)) {

// Search in Bing

searchInBing(inputValue).

} else {

// Navigate to the specified URL

navigateToURL(inputValue).

}

function isSearchQuery(value) {

// Regulars are used to validate most common URL formats, including URLs that begin with "http://", "https://", or "ftp://".

var urlPattern = /^(((ht|f)tps?):\/\/)? ([^! @#$%^&*?. \s-]([^! @#$%^&*? \s]{0,63}[^! @#$%^&*? \s])? \...) +[a-z]{2,6}\/? /;.

// Determine if it's a URL

return !urlPattern.test(value);

}

function searchInBing(query) {

// Coding the query

var encodedQuery = encodeURIComponent(query);

// Open Bing Search in a New Tab

window.location = 'https://bing.com/search?q=' + encodedQuery;

// Possible error

apps.edge.rename(query);

}

function navigateToURL(url) {

// If the URL does not contain a protocol prefix

if (! /^https?:\/\//.test(url)) {

// Add default HTTP protocol prefixes

url = 'http://' + url;

}

// Navigate to the specified URL

window.location = url;

// Possible error

apps.edge.rename(url);

}

</script>

</body>

</html>

[Cloudflare AI.js] source code

import { Ai } from '. /vendor/@cloudflare/ai.js';

export default {

async fetch(request, env) {

if (request.method ! == 'POST') {

return new Response('Invalid method', { status: 405 });

}

const tasks = [];

const ai = new Ai(env.AI);

const body = await request.json();

let chat = {

messages: body.messages // Use the chat log in the request load

};

let response = await ai.run('@cf/meta/llama-2-7b-chat-int8', chat);

tasks.push({ inputs: chat, response });

return new Response(JSON.stringify(tasks), { headers: { 'Content-Type': 'application/json' } });

}

};

[CONTRIBUTING.md] source code

# Contribution guidelines

Thank you to all the developers who contributed to this project and to everyone for their support!

If you like this project, you are welcome to give this project a Star, give us a sponsorship or make some important contributions for us qwq~

Please don't submit meaningless PR's oh~name and shame here:

## Vulnerability reporting ##

1. Please use the latest version to confirm that the vulnerability has been fixed.

2. Please make sure that the vulnerability or error is not part of the problem you are using. For example, if you are using an older browser (e.g. Internet Explorer, etc.), or if you have turned off some of the features of your browser (e.g. disabling data storage, etc.).

3. Please describe the vulnerability clearly so that we can better fix it.

4. You can use the "Vulnerability Reporting" Issue template to provide feedback, but please fill in the content correctly.

5. It is prohibited to add any content that violates the law or is politically sensitive, or else it will be dealt with by locking + banning as appropriate.

## Make recommendations

1. Please use the latest version to confirm that the recommendation has been implemented/resolved.

2. Please describe the proposal clearly so that we can better realize/resolve it.

3. You can use the "Make a Suggestion" Issue template for your feedback, but please fill it out correctly.

4. It is prohibited to add any content that violates the law or is politically sensitive, or else it will be dealt with by locking + banning as appropriate.

## Submit code

Note: Please edit the code strictly according to the following, as well as the development specification at the beginning of desktop.html, otherwise it will not be merged.

1. Please try to submit everything in one commit. Additional commits are allowed, but try not to exceed 5 commits.

2. Please try to commit using the Git command line, Github Desktop, [https://github.dev](https://github.dev/tjy-gitnub/win12). Please do not commit by uploading files directly in your browser.

3. Prohibit the uploading of any content that violates the law or is politically sensitive, or else it will be locked and banned as appropriate (warm reminder: current affairs news is also not allowed).

4. When submitting, please do not arbitrarily take the title and content of the submission, for example:

- Good examples: fix xx not working properly, add xx apps

- Bad example: aba aba, forgot to get this thing, too many bugs.... .qwq

5. Formatting requirements.

- Do not format HTML files with formatting tools!

- For JavaScript and CSS files, you can use the formatting tools that come with Visual Studio Code to format them.

### Submission of information requests

1. If the update is of a certain importance or magnitude, please follow the format below:

v11.4.5 - updated xxx

(Updated from @Somebody)

- UPDATED...

- Optimized...

- patch sth.

...

- Requirements for using the format:

1. This update must be communicated to us prior to submission.

- Description:

1. The title should carry the version number and the main update.

2. The source of the update is indicated in the first line of the content.

3. The content should set out the updates in a list.

- Attention:

1. Please do not select the version number arbitrarily. If you are not sure, you can contact us through our communication group (<https://teams.live.com/l/invite/FEA0yrNkE_bAn-ddwI>) and assign the version number.

2. When updating, remember to add a note about the update in the update log of the "About Windows 12 Web Edition" app.

2. Submissions are not overly prescriptive if the following conditions are met:

- Fewer updates.

- There are no significant changes to the update.

Although there are no standardized regulations, they are still needed:

1. The title of the submission should be clear and concise, summarizing briefly the main content of the update.

2. Submissions should identify the author of the submission and describe the content of the update in a list or otherwise.

### Development specifications

1. Provisions for HTML documents

1. Provisions for the id attribute: Unless it is necessary, try not to use the id attribute to avoid conflicts, and try to replace it with class. If you must, remember the following:

1. Do not use single-word id names unless the node is body>*

2. The name chosen must be meaningful

3. For non-body>* nodes, please name them according to "parent element identifier -(...) - id name". -id name". For example: taskmgr-search, setting-search, etc.

2. Provisions for the class attribute:

1. The name chosen must be meaningful

2. no need to assign class to each element, just assign as needed

3. When using css selectors, make sure that the selected element is within the expected range, i.e., locate the element exactly so that it doesn't mistakenly match other elements

3. Provisions for code specifications:

1. For svg images, please try to compress them into one line or extract them into separate files to avoid bloating.

2. For those codes that do not need to be expanded, try to compress them into one line.

2. Provisions for the JS document

1. Please develop according to the following code style:

```js

var sum = 0;

for (var i = 0; i < 10; i++) {

sum += i;

}

console.log(sum);

2. For function names and variable naming, use the camel-type nomenclature, e.g.:

- isLoaded

- storagedItems

3. For class names, use Pascal's nomenclature (big hump nomenclature), for example:

- WindowManager

- Widgets

4. Provisions for code specifications:

1. For those codes that do not need to be expanded, try to compress them into one line.

## Contribute news

1. Please ensure that none of the news items** you submit appear in real life at the present time or in the past**, i.e., they are purely fictional.

2. Prohibit the uploading of any content that violates the law or is politically sensitive, or else it will be locked and blocked as appropriate (warm reminder: current affairs news is also not allowed).

4.2 CSS Partial Source Code

[base.css] source code

body {

margin: 0;

font-family: system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif, Apple Color Emoji. Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji.

font-size: 1rem;

font-weight: 400;

line-height: 1.5;

color: #212529;

text-align: left;

background-color: #fff;

}

*, ::after, ::before {

box-sizing: border-box;

}

html {

touch-action: none;

font-family: sans-serif.

line-height: 1.15;

-webkit-text-size-adjust: 100%;

-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent

}

html * {

touch-action: auto;

}

pre {

font-family: monospace.

}

hr {

box-sizing: content-box;

height: 0;

overflow: visible;

unicode-bidi: isolate.

margin-block-start: 0.5em;

margin-block-end: 0.5em;

margin-inline-start: auto;

margin-inline-end: auto;

border: 0;

border-top: 1px solid rgba(0,0,0,.1);

}

[type=button], [type=reset], [type=submit], button {

-webkit-appearance: button;

appearance: button;

}

button, select {

text-transform: none;

}

button, input {

overflow: visible;

}

button, input, optgroup, select, textarea {

margin: 0;

font-family: inherit;

font-size: inherit;

line-height: inherit;

}

button {

appearance: auto;

writing-mode: horizontal-tb !important;

text-rendering: auto;

letter-spacing: normal;

word-spacing: normal;

line-height: normal;

text-transform: none;

text-indent: 0px;

text-shadow: none;

display: inline-block;

text-align: center;

align-items: flex-start;

cursor: default;

box-sizing: border-box;

background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));

margin: 0em;

padding: 1px 6px;

border-width: 2px;

border-style: outset;

border-color: buttonborder;

border-image: initial;

}

a:-webkit-any-link {

cursor: pointer;

text-decoration: none;

}

[desktop.css] source code (partial)

@import ". /bootstrap-icons.css";

@import ". /base.css";

:root {

--text: #000;

--text2: #444.

---bg: #ffffff;

---bg50: #ffffff80.

---bg70: #ffffffa0.

--sd: #22222230.

--card: #efefef55.

--hover: #ffffff65.

--hover-half: #ffffff40;

--hover-b: #1111110f;

---bggrey: #ddd;

--fill: #d3d3d370;

--bgul: url('bg.svg');

---mm: #ffffffc0.

--cm: #fafafabb.

---bar: #efefef37;

--hr: #ccc.

--unfoc: #eaeaea.

---msg: #ffffffe7.

---theme-1: #ad6eca.

---theme-2: #3b91d8;

--href: #2983cc.

---bd: #8f8f8f30.

---s3d: #99999947.

--mica: linear-gradient(215deg, #ffe7f6, #a9c3ff);

}

:root.dark {

--text: #ddd;

--text2: #aaa;

---bg: #000000;

---bg50: #00000060.

--b#start-btn>svg.menu {

position: relative;

top: 27px;

transition: 200ms;

}

#start-btn.show>svg.menu {

top: 0;

transition-delay: 200ms;

}

#start-btn>.ico {

position: relative;

top: -32px;

transition: transform 200ms, top 200ms 100ms, left 200ms;

left: 0;

/* transition-delay: 100ms; */

}

#start-btn.show>.ico {

transform: scale(0.5);

top: -26px;

}

#search-btn>svg.in {

position: relative;

display: block;

top: -29.6px;

left: 2.5px;

width: 16px;

height: 16px;

transition: 200ms;

}

#search-btn:active {

transform: scale(0.85);

}

#search-btn.show>svg.in {

transform: scale(1.1) rotate(360deg);

filter: saturate(2) brightness(1.1).

}

#widgets-btn>svg {

display: block;

}

#s-m-l>.input {

padding-left: 30px;

}

input-before {

display: block;

font-size: 15px;

height: 0;

margin-top: -29px;

margin-left: 8px;

margin-bottom: 10px;

color: var(--text);

}

.window>.resize-bar {

z-index: 1 !important;

}

.window.max>.resize-bar {

display: none !important;

}

.window>.resize-bar>.resize-knob {

position: absolute;

}

.window>.resize-bar>.resize-knob.top {

left: 7px;

top: 0px;

height: 7px;

width: calc(100% - 14px);

cursor: ns-resize;

}

.window>.resize-bar>.resize-knob.bottom {

left: 7px;

bottom: 0px;

height: 7px;

width: calc(100% - 14px);

cursor: ns-resize;

}

.window>.resize-bar>.resize-knob.left {

top: 7px;

left: 0px;

height: calc(100% - 14px);

width: 7px;

cursor: ew-resize;

}

.window>.resize-bar>.resize-knob.right {

top: 7px;

right: 0px;

height: calc(100% - 14px);

width: 7px;

cursor: ew-resize;

}

.window>.resize-bar>.resize-knob.top-left {

top: 0px;

left: 0px;

width: 7px;

height: 7px;

cursor: nwse-resize;

}

#desktop-widgets>*.moving>.content {

opacity: 0.5;

}

#desktop-widgets>*.notrans {

transition: none !important;

}

#desktop-widgets>.widgets-move {

display: none;

background-color: #3daee922;

border: 1px solid #3daee9;

border-radius: 10px;

backdrop-filter: none;

-webkit-backdrop-filter: none;

box-shadow: none;

}

#desktop-widgets>.widgets-move.show {

display: block;

}

#desktop-widgets.edit>* .content * {

pointer-events: none;

}

#desktop-widgets.edit>* {

cursor: grab;

}

#desktop-widgets.edit>*>.content {

transition: opacity 500ms;

}

#desktop-widgets.edit>*>.content:hover {

opacity: 0.5;

}

#desktop-editbar-container {

width: 100%;

position: fixed;

top: -50px;

left: 0px;

display: flex;

justify-content: center;

align-items: center;

transition: top 500ms;

}

#desktop-editbar-container.show {

top: 0px;

}

#desktop-editbar {

background-color: var(---bg70);

backdrop-filter: blur(180px) saturate(1.5);

filter: none;

-webkit-backdrop-filter: blur(80px) saturate(1.5);

box-shadow: 3px 3px 20px 3px var(---sd);

border-radius: 0px 0px 8px 8px;

display: flex;

gap: 13px;

padding: 4px 20px;

}

#desktop-editbar>* {

transition: background-color 80ms;

padding: 1px 7px;

border-radius: 5px;

}

#desktop-editbar>*:hover {

background-color: var(--hover);

}

.input {

background-color: var(---bg50);

border: none;

border-bottom: 2.5px solid;

border-bottom-color: #7f7f7f7f7f;

border-radius: 7px;

padding: 3px 5px 3px 8px;

outline: medium;

width: 100%;

color: var(--text);

transition: 100ms, border 0s;

box-shadow: 0 1px 2px var(---s3d);

}

.input:hover {

background: var(--cm);

}

.input:focus {

background-color: var(---bg);

background-clip: padding-box, border-box;

background-origin: padding-box, border-box;

background-image: linear-gradient(var(---bg), var(---bg)), linear-gradient(90deg, var(---theme-1), var(---theme-2));

border-bottom-color: transparent;

box-shadow: 0 1px 10px var(---s3d);

opacity: 1;

}

.btn {

border: 0px solid;

border-radius: 10px;

padding: 7px 10px.

transition: 100ms;

background-color: #00000000;

}

.btn-icon {

border: 0px solid;

border-radius: 10px;

padding: 1px 5px;

background-color: #00000000;

font-size: 23px;

height: 33px;

width: 33px;

}

.btn-icon.big {

padding: 3px 7px;

font-size: 19px;

}

.btn:hover {

background: var(--hover);

}

.btn:active {

transform: scale(0.9);

opacity: 0.5;

}

.button {

background-color: #9f9f9f40;

border-radius: 10px;

padding: 5px 10px;

cursor: pointer;

}

.button:hover {

filter: brightness(1.2);

}

.button:active {

filter: brightness(1.2) opacity(0.8);

}

input.foc {

display: block;

height: 0;

width: 0;

opacity: 0;

padding: 0;

margin: 0;

border: none;

outline: none;

background: none;

}

#cm {

display: none;

position: absolute;

z-index: 101;

border-radius: 10px;

border: 1.5px solid #6f6f6f30;

background: var(--cm);

backdrop-filter: blur(25px) saturate(2);

min-width: 200px;

overflow: hidden;

padding: 0px 6px;

max-height: 0;

width: max-content;

transition: 110ms, max-height 200ms ease-in-out, top 100ms, left 100ms, padding 200ms ease-in-out, box-shadow 1s;

opacity: 0;

}

#cm.show {

max-height: 100%;

padding: 6px;

box-shadow: 3px 3px 25px 0px var(---sd);

opacity: 1;

}

#cm>list {

transform: translate(0, -50%);

opacity: 0;

transition: transform 200ms ease-in-out, opacity 150ms 50ms;

}

#cm.show>list {

opacity: 1;

transform: none;

}

#cm.show-begin {

display: block;

}

#cm>list>a {

padding: 4.5px 12px;

margin: 0 0;

border-radius: 6px;

font-size: 15px;

display: flex;

line-height: 19px;

}

#cm>list>a>.bi {

font-size: 17px;

margin-right: 10px;

display: block;

}

#cm>list>*:not(hr):hover {

background-color: var(--hover-b);

}

#dp {

display: none;

position: absolute;

box-shadow: 3px 3px 6px 1px var(---sd);

z-index: 101;

border-radius: 10px;

border: 1.5px solid #6f6f6f30;

background: var(--cm);

backdrop-filter: blur(20px) saturate(2);

min-width: 200px;

overflow: hidden;

transition: max-height 200ms ease-in-out;

padding: 4px;

max-height: 0;

}

#dp.show-begin {

display: block;

transition: max-height 200ms ease-in-out;

}

#dp.show {

max-height: 100%;

}

#dp>list>a {

padding: 4.5px 10px;

margin: 0;

transition: 80ms;

border-radius: 7px;

font-size: 14px;

display: flex;

line-height: 19px;

}

#dp>list>a>info {

float: right;

text-align: end;

color: #888;

flex-grow: 1;

}

#dp>list>a>.bi {

font-size: 19px;

margin-right: 4px;

display: block;

}

#dp>list>*:not(hr):hover {

background-color: var(--hover-b);

}

#descp {

position: fixed;

background: var(--cm);

border-radius: 6px;

box-shadow: 2px 2px 10px var(---sd);

z-index: 102.

border: 1.5px solid #4f4f4f30;

backdrop-filter: blur(15px) saturate(2);

font-size: 13px;

padding: 4px 7px;

margin: 0;

transition: opacity 100ms;

opacity: 0;

display: none;

}

#descp.show {

opacity: 1;

}

#descp.show-begin {

display: block;

}

list {

display: block;

padding-left: 0;

margin-bottom: 0;

border-radius: 7px;

}

list>* {

width: 100%;

color: var(--text);

text-align: inherit;

border-radius: 7px;

position: relative;

display: block;

padding: 2px 20px;

}

list:not(.new)>a {

transition: 80ms, transform 400ms cubic-bezier(0.14, 1.02, 0.17, 0.03);

}

list:not(.new)>a:active {

transform: scale(0.95);

}

list.new>a {

transition: 50ms, opacity 80ms;

}

list.new>a:active {

opacity: 0.7;

}

list>a:hover {

color: var(--text);

background-color: var(--hover-half);

text-decoration: none;

box-shadow: 0 1px 2px var(---s3d);

}

list>hr {

width: calc(100% - 12px);

padding: 0 !important;

margin: 2px 6px;

background-color: #7f7f7f7f7f;

border-radius: 5px;

height: 0.75px;

cursor: inherit;

}

list>hr:hover {

background-color: #7f7f7f7f7f;

}

list>.text {

margin: 0;

cursor: inherit;

border: none;

}

list>.text:hover {

background-color: unset;

border: none;

}

list>span.focs {

display: block;

width: 4px;

height: 20px;

background: linear-gradient(0deg, var(---theme-1), var(---theme-2));

background-size: cover;

padding: 0;

border-radius: 2px;

position: relative;

margin: -30px 7px 0 7px;

z-index: 1;

transition: 500ms cubic-bezier(1, 0, 0, 1);

/* transform-origin: top; */

}

list>span.focs.cl {

animation: fcl 200ms cubic-bezier(1, 0.8, 0, 0.2) 160ms.

}

@keyframes fcl {

0% {

transform: none;

}

50% {

transform: scaleY(2.5);

}

100% {

transform: none;

}

.msg {

background-color: var(---bg50);

backdrop-filter: blur(50px) saturate(130%);

position: fixed;

right: -430px;

bottom: 60px;

width: 430px;

min-height: 150px;

z-index: 100;

border-radius: 10px;

box-shadow: 3px 3px 6px 1px var(---sd);

padding: 10px 20px;

font-size: 15px;

display: flex;

transition: 400ms 200ms cubic-bezier(0.9, 0, 0.1, 1), transform 200ms;

cursor: pointer;

border: 1.5px solid #6f6f6f30;

transform: scale(0.9);

}

.msg:hover {

transition: 80ms;

background-color: var(--hover-half);

}

.msg.show {

right: 20px;

transform: none;

}

.msg>.main {

flex-grow: 1;

}

.msg>.hide {

height: 35px;

width: 35px;

min-width: 35px;

padding-left: 6px;

margin-right: -5px;

border-radius: 5px;

font-size: 23px;

transition: 100ms;

}

.msg>.hide:hover {

padding-left: 0;

}

.msg>.hide:active {

padding-left: 25px;

transform: scale(0.9);

}

.msg:not(.show)>.hide {

padding-left: 25px;

}

.msg>.main>.tit {

font-size: 20px;

margin-bottom: 5px;

transition: 100ms;

}

.msg>.main>.cont {

padding-left: 10px;

transition: 100ms;

}

#notice-back {

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: #00000070;

position: fixed;

z-index: 99.

justify-content: center;

align-items: center;

display: none;

}

#notice-back.show {

display: flex;

}

#notice {

overflow: hidden;

backdrop-filter: blur(20px);

display: block;

position: absolute;

min-width: 300px;

min-height: 100px;

background: var(---msg);

/* left: 30%; */

border-radius: 12px;

box-shadow: 0 1px 2px #44444460, 0 1px 30px var(---sd);

border: 1px solid var(--hr);

transition: 200ms !important;

opacity: 0;

transform: scale(0.94) translateY(20px);

}

#notice.show {

opacity: 1;

transform: none;

}

#notice>.cnt {

padding: 15px 20px 30px 20px;

}

#notice>.cnt>.tit {

font-size: 30px;

}

#notice>.cnt>list {

margin-top: 10px;

}

#notice>.cnt>list>* {

padding: 4px 10px;

}

#notice>.cnt>list>a:hover {

background-color: var(--hover-b);

}

#notice>.btns {

min-height: 60px;

background: var(--unfoc).

display: flex;

flex-direction: row-reverse;

align-items: center;

padding-right: 15px;

border-top: 1.5px solid var(--hr);

}

#notice>.btns>.btn {

margin-left: 10px;

background-color: var(---msg);

min-width: 100px;

text-align: center;

border-radius: 8px;

transition: 50ms;

box-shadow: 0 1px 3px 1px var(---s3d);

}

#notice>.btns>.btn.main {

color: #fff.

background-color: var(--href);

}

#notice>.btns>.btn:hover {

filter: brightness(1.2);

}

#notice>.btns>.btn:active {

transform: none;

opacity: 0.7;

}

.window {

position: absolute;

height: 80%;

width: 70%;

transform: scale(0.7);

background-color: var(--unfoc);

border-radius: 10px;

border: 1.5px solid #6f6f6f30;

display: none;

opacity: 0;

transition: cubic-bezier(0.9, 0, 0.1, 1) 200ms;

overflow: hidden;

box-shadow: 2px 2px 5px var(---sd);

z-index: 90;

}

4.3 JS Partial Source Code

[desktop.js] source code (partial)

// Back-end servers

// loadlang();

const server = 'http://win12server.freehk.svipss.top/';

const pages = {

'get-title': '', // get title

};

//settings page list right hight light <span> @Junchen Yi

document.querySelectorAll(`list.focs`).forEach(li => {

li.addEventListener('click', e => {

let _ = li.querySelector('span.focs'), la = li.querySelector('a.check'),

las = li.querySelectorAll('a');

$(_).addClass('cl');

$(_).css('top', la.offsetTop - las[las.length - 1].offsetTop);

$(_).css('left', la.offsetLeft - li.offsetLeft);

setTimeout(() => {

$(_).removeClass('cl');

}, 500).

})

}).

// Disable image dragging

$('img').on('dragstart', () => {

return false;

}).

// Right-click menu

$('html').on('contextmenu', () => {

return false;

}).

function stop(e) {

e.stopPropagation();

return false;

}

$('input,textarea,*[contenteditable=true]').on('contextmenu', (e) => {

stop(e);

return true;

}).

function addMenu() {

var parentDiv = document.getElementById('desktop');

var childDivs = parentDiv.getElementsByTagName('div');

for (var i = 0; i < childDivs.length; i++) {

if (i <= 4) {//win12 built-in 5 icons not added

continue;

}

var div = childDivs[i];

div.setAttribute('iconIndex', i - 5);

console.log(i - 5, div.getAttribute('appname'))

div.addEventListener('contextmenu', (event) => {

if (div.getAttribute('appname') ! = undefined) {

return showcm(event, 'desktop.icon', [div.getAttribute('appname'), div.getAttribute('iconIndex')]);

}

return false;

}, useCapture = true);

}

var run_cmd = '';

let nomax = { 'calc': 0 /* Actually, the calculator is maximized... */, 'notepad-fonts': 0, 'camera-notice': 0, 'winver': 0, 'run': 0, 'wsa': 0 };

let nomin = { 'notepad-fonts': 0, 'camera-notice': 0, 'run': 0 };

var topmost = [];

var sys_setting = [1, 1, 1, 0, 0, 0, 1];

var use_music = true;

let cms = {

'titbar': [

function (arg) {

if (arg in nomax) {

return 'null';

}

if ($('.window.' + arg).hasClass("max")) {

return ['<i class="bi bi-window-stack"></i> restore', `maxwin('${arg}')`];

}

else {

return ['<i class="bi bi-window-fullscreen"></i> maximize', `maxwin('${arg}')`];

}

}, }

function (arg) {

if (arg in nomin) {

return 'null';

}

else {

return ['<i class="bi bi-window-dash"></i> minimize', `minwin('${arg}')`];

}

}, }

function (arg) {

if (arg in nomin) {

return ['<i class="bi bi-window-x"></i> close', `hidewin('${arg}', 'configs')`];

}

else {

return ['<i class="bi bi-window-x"></i> close', `hidewin('${arg}')`];

}

}, }

'taskbar': [

function (arg) {

return ['<i class="bi bi-window-x"></i> close', `hidewin('${arg}')`];

}

'desktop': [

['<i class="bi bi-arrow-clockwise"></i> Refresh', `$('#desktop').css('opacity','0');setTimeout(()=>{$('#desktop').css(' opacity','1');},100);setIcon();`],

['<i class="bi bi-circle-square"></i> toggleheme', 'toggletheme()'],

`<a οnmοusedοwn="window.open('https://github.com/tjy-gitnub/win12','_blank');" win12_title="https://github.com/tjy-gitnub/win12" οnmοuseenter="showdescp(event)" οnmοuseleave="hidedescp(event)"><i class="bi bi-github"></i> View this project in Github</a>`,

function (arg) {

if (edit_mode) {

return ['<i class="bi bi-pencil"></i> Exit edit mode', 'editMode();'];

}

else if (!edit_mode) {

return ['<i class="bi bi-pencil"></i> Enter edit mode', 'editMode();'];

}

}, }

['<i class="bi bi-info-circle"></i> About Win12 web version', `$('#win-about>.about').addClass('show');$('#win-about>.update'). removeClass('show');openapp('about');if($('.window.about').hasClass('min'))minwin('about');`],.

['<i class="bi bi-brush"></i> Personalization', `openapp('setting');$('#win-setting > div.menu > list > a.enable.appearance')[0]. click()`]

'desktop.icon': [

function (arg) {

return ['<i class="bi bi-folder2-open"></i> open', 'openapp(`' + arg[0] + '`)']

}, }

function (arg) {

if (arg[1] >= 0) {

return ['<i class="bi bi-trash3"></i> Delete', 'desktopItem.splice(' + (arg[1] - 1) + ', 1);saveDesktop();setIcon();addMenu();'];

} else {

return 'null';

}

'winx': [

function (arg) {

if ($('#start-menu').hasClass("show")) {

return ['<i class="bi bi-box-arrow-in-down"></i> Close start menu', `hide_startmenu()`];

}

else {

return ['<i class="bi bi-box-arrow-in-up"></i> Open start menu', `$('#start-btn').addClass('show');

if($('#search-win').hasClass('show')){$('#search-btn').removeClass('show');

$('#search-win').removeClass('show');setTimeout(() => {$('#search-win').removeClass('show-begin');

}, 200);}$('#start-menu').addClass('show-begin'); setTimeout(() => {$('#start-menu').addClass('show');

}, 0);`];

}

}, }

'<hr>',

['<i class="bi bi-gear"></i> setting', `openapp('setting')`],

['<i class="bi bi-terminal"></i> run', `openapp('run')`],

['<i class="bi bi-folder2-open"></i> file explorer', `openapp('explorer')`],

['<i class="bi bi-search"></i> search', `$('#search-btn').addClass('show'); hide_startmenu();

$('#search-win').addClass('show-begin');setTimeout(() => {$('#search-win').addClass('show');

$('#search-input').focus();}, 0);`],

'<hr>',

['<i class="bi bi-power"></i> shut down', `window.location='shutdown.html'`],

['<i class="bi bi-arrow-counterclockwise"></i> reload', `window.location='reload.html'`],

'smapp': [

function (arg) {

return ['<i class="bi bi-window"></i> open', `openapp('${arg[0]}');hide_startmenu();`];

}, }

function (arg) {

return ['<i class="bi-link-45deg"></i> Create link on desktop', "var s=`<div class='b' οndblclick=openapp('" + arg[0] + "') ontouchstart= openapp('" + arg[0] + "') appname='" + arg[0] + "'><img src='icon/" + geticon(arg[0]) + "'><p>" + arg[1] + "</p></div>`;$ ('#desktop').append(s);desktopItem[desktopItem.length]=s;addMenu();saveDesktop();"];

}, }

function (arg) {

return ['<i class="bi bi-x"></i> unfix', `$('#s-m-r>.pinned>.apps>.sm-app.${arg[0]}').remove()`];

}

'smlapp': [

function (arg) {

return ['<i class="bi bi-window"></i> open', `openapp('${arg[0]}');hide_startmenu();`];

}, }

function (arg) {

}, }

function (arg) {

return ['<i class="bi bi-pin-angle"></i> pinned to start menu', "pinapp('" + arg[0] + "', '" + arg[1] + "', 'openapp("" + arg[0] + "" ;); hide_startmenu();')"]].

}

'msgupdate': [

['<i class="bi bi-layout-text-window-reverse"></i> View details', `openapp('about');if($('.window.about').hasClass('min'))

minwin('about');$('#win-about>.about').removeClass('show');$('#win-about>.update').addClass('show');

$('#win-about>.update>div>details:first-child').attr('open','open')`],

['<i class="bi bi-box-arrow-right"></i> close', `$('.msg.update').removeClass('show')`]

'explorer.folder': [

arg => {

return ['<i class="bi bi-folder2-open"></i> open', `apps.explorer.goto('${arg}')`];

}, }

arg => {

return ['<i class="bi bi-arrow-up-right-square"></i> Open in new tab', `apps.explorer.newtab('${arg}');`];

}, }

arg => {

if ($('#win-explorer>.path>.tit>.path>div.text').length > 1)

return ['<i class="bi bi-trash3"></i> delete', `apps.explorer.del('${arg}')`];

return 'null';

}, }

arg => {

if ($('#win-explorer>.path>.tit>.path>div.text').length > 1)

return ['<i class="bi bi-files"></i> copy', `apps.explorer.copy_or_cut('${arg}','copy')`];

return 'null';

}, }

arg => {

if ($('#win-explorer>.path>.tit>.path>div.text').length > 1)

return ['<i class="bi bi-scissors"></i> cut', `apps.explorer.copy_or_cut('${arg}','cut')`];

return 'null';

}, }

arg => {

if ($('#win-explorer>.path>.tit>.path>div.text').length > 1)

return ['<i class="bi bi-input-cursor-text"></i> Rename', `apps.explorer.rename('${arg}')`];

return 'null';

}

'explorer.file': [

arg => {

return ['<i class="bi bi-folder2-open"></i> open (not useful at the moment)', ``];

}, }

arg => {

if ($('#win-explorer>.path>.tit>.path>div.text').length > 1)

return ['<i class="bi bi-trash3"></i> delete', `apps.explorer.del('${arg}')`];

return 'null';

}, }

arg => {

if ($('#win-explorer>.path>.tit>.path>div.text')[0].innerHTML ! = "This computer")

return ['<i class="bi bi-files"></i> copy', `apps.explorer.copy_or_cut('${arg}','copy')`];

return 'null';

}, }

arg => {

if ($('#win-explorer>.path>.tit>.path>div.text').length > 1)

return ['<i class="bi bi-scissors"></i> cut', `apps.explorer.copy_or_cut('${arg}','cut')`];

}, }

arg => {

if ($('#win-explorer>.path>.tit>.path>div.text').length > 1)

return ['<i class="bi bi-input-cursor-text"></i> Rename', `apps.explorer.rename('${arg}')`];

return 'null';

}

'explorer.content': [

arg => {

if ($('#win-explorer>.path>.tit>.path>div.text').length > 1)

return ['<i class="bi bi-file-earmark-plus"></i> New file', `apps.explorer.add($('#win-explorer>.path>.tit')[0].dataset. path, 'New text document.txt')`];

return 'null';

}, }

arg => {

if ($('#win-explorer>.path>.tit>.path>div.text').length > 1)

return ['<i class="bi bi-folder-plus"></i> New folder', `apps.explorer.add($('#win-explorer>.path>.tit')[0].dataset.path,' New folder',type='files')`];

return 'null';

}, }

arg => {

if ($('#win-explorer>.path>.tit>.path>div.text').length > 1)

return ['<i class="bi bi-file-earmark-arrow-down"></i> paste', `apps.explorer.paste($('#win-explorer>.path>.tit')[0]. dataset.path,'new folder', type='files')`];

return 'null';

}, }

arg => {

if ($('#win-explorer>.path>.tit>.path>div.text').length > 1)

return ['<i class="bi bi-arrow-clockwise"></i> refresh', `apps.explorer.goto($('#win-explorer>.path>.tit')[0].dataset.path , false)`].

return ['<i class="bi bi-arrow-clockwise"></i> Refresh', `apps.explorer.reset()`];

}

'explorer.tab': [

arg => {

return ['<i class="bi bi-x"></i> Close tab', `m_tab.close('explorer',${arg})`];

}

'edge.tab': [

arg => {

return ['<i class="bi bi-pencil-square"></i> name tab', `apps.edge.c_rename(${arg})`];

}, }

arg => {

return ['<i class="bi bi-x"></i> close tab', `m_tab.close('edge',${arg})`];

}

'taskmgr.processes': [

arg => {

return ['<i class="bi bi-x"></i> end task', `apps.taskmgr.taskkill('${arg}')`]

}

]

}

window.onkeydown = function (event) {

if (event.keyCode == 116/*F5 is pressed (refresh)*/) {

event.preventDefault();/* cancel default refresh behavior */

$('#desktop').css('opacity', '0'); setTimeout(() => { $('#desktop').css('opacity', '1'); }, 100); setIcon();

}

function showcm(e, cl, arg) {

if ($('#cm').hasClass('show-begin')) {

setTimeout(() => {

$('#cm').css('left', e.clientX);

$('#cm').css('top', e.clientY);

let h = '';

cms[cl].forEach(item => {

if (typeof (item) == 'function') {

arg.event = e;

ret = item(arg);

if (ret == 'null') return true;

h += `<a class="a" οnmοusedοwn="${ret[1]}">${ret[0]}</a>\n`;

}

else if (typeof (item) == 'string') {

h += item + '\n';

}

else {

h += `<a class="a" οnmοusedοwn="${item[1]}">${item[0]}</a>\n`;

}

})

$('#cm>list')[0].innerHTML = h;

$('#cm').addClass('show-begin');

$('#cm>.foc').focus();

// This .foc is used to simulate focus, this line puts focus on the context menu, commenting it out has dire consequences >u-)o

// Oh, but if you set the focus it will show a virtual keyboard on mobile devices QAQ (By: User782Tec)

// (By: tjy-gitnub)

setTimeout(() => {

$('#cm').addClass('show');

}, 0);

setTimeout(() => {

if (e.clientY + $('#cm')[0].offsetHeight > $('html')[0].offsetHeight) {

$('#cm').css('top', e.clientY - $('#cm')[0].offsetHeight);

}

if (e.clientX + $('#cm')[0].offsetWidth > $('html')[0].offsetWidth) {

$('#cm').css('left', $('html')[0].offsetWidth - $('#cm')[0].offsetWidth - 5);

}

}, 200).

return;

}

$('#cm').css('left', e.clientX);

$('#cm').css('top', e.clientY);

let h = '';

cms[cl].forEach(item => {

if (typeof (item) == 'function') {

ret = item(arg);

console.log(arg, ret);

if (ret == 'null') {

return true;

}

h += `<a class="a" οnmοusedοwn="${ret[1]}">${ret[0]}</a>\n`;

} else if (typeof (item) == 'string') {

h += item + '\n';

} else {

h += `<a class="a" οnmοusedοwn="${item[1]}">${item[0]}</a>\n`;

}

})

$('#cm>list')[0].innerHTML = h;

$('#cm').addClass('show-begin');

$('#cm>.foc').focus();

setTimeout(() => {

$('#cm').addClass('show');

}, 0);

setTimeout(() => {

if (e.clientY + $('#cm')[0].offsetHeight > $('html')[0].offsetHeight) {

$('#cm').css('top', e.clientY - $('#cm')[0].offsetHeight);

}

if (e.clientX + $('#cm')[0].offsetWidth > $('html')[0].offsetWidth) {

$('#cm').css('left', $('html')[0].offsetWidth - $('#cm')[0].offsetWidth - 5);

}

}, 200).

}

$('#cm>.foc').blur(() => {

let x = event.target.parentNode;

$(x).removeClass('show');

setTimeout(() => {

$(x).removeClass('show-begin');

}, 200).

}).

let font_window = false;

// Drop-down menu

dps = {

'notepad.file': [

['<i class="bi bi-file-earmark-plus"></i> new', `hidedp(true);$('#win-notepad>.text-box').addClass('down');

setTimeout(()=>{$('#win-notepad>.text-box').val('');$('#win-notepad>.text-box').removeClass('down')},200);`],

['<i class="bi bi-box-arrow-right"></i> Save as', `hidedp(true);$('#win-notepad>.save').attr('href', window.URL. createObjectURL(new Blob([$('#win-notepad>.text-box').html()])));;

$('#win-notepad>.save')[0].click();`],

'<hr>',

['<i class="bi bi-x"></i> quit', `isOnDp=false;hidedp(true);hidewin('notepad')`],

'notepad.edit': [

['<i class="bi bi-files"></i> copying <info>Ctrl+C</info>', 'document.execCommand(\'copy\')'],

['<i class="bi bi-clipboard"></i> paste <info>Ctrl+V</info>', `document.execCommand(\'paste\')`],

['<i class="bi bi-scissors"></i> cut <info>Ctrl+X</info>', 'document.execCommand(\'cut\')'],

'<hr>',

['<i class="bi bi-arrow-return-left"></i> undo <info>Ctrl+Z</info>', 'document.execCommand(\'undo\')'],

['<i class="bi bi-arrow-clockwise"></i> redo <info>Ctrl+Y</info>', 'document.execCommand(\'redo\')'],

'notepad.view': [

['<i class="bi bi-type"></i> Insert normal word block', 'hidedp(true);$(\'#win-notepad>.text-box\')[0].innerHTML+=\'<p>T</p>\ ''].

['<i class="bi bi-type-h1"></i> Insert main title', 'hidedp(true);$(\'#win-notepad>.text-box\')[0].innerHTML+=\'<h1>H1</h1 >\''].

['<i class="bi bi-type-h2"></i> insert subheading', 'hidedp(true);$(\'#win-notepad>.text-box\')[0].innerHTML+=\'<h2>H2</h2 >\''].

['<i class="bi bi-type-h3"></i> insert subheading', 'hidedp(true);$(\'#win-notepad>.text-box\')[0].innerHTML+=\'<h3>H3</h3 >\''].

['<i class="bi bi-type-underline"></i> insert underline', 'hidedp(true);$(\'#win-notepad>.text-box\')[0].innerHTML+=\'<u>U& lt;/u>\''],

['<i class="bi bi-type-strikethrough"></i> insert strikethrough', 'hidedp(true);$(\'#win-notepad>.text-box\')[0].innerHTML+=\'<s> ;S</s>\''].

['<i class="bi bi-type-italic"></i> insert italics', 'hidedp(true);$(\'#win-notepad>.text-box\')[0].innerHTML+=\'<i>I</ i>\''],

['<i class="bi bi-type-bold"></i> Insert bold text', 'hidedp(true);$(\'#win-notepad>.text-box\')[0].innerHTML+=\'<b>B</b& gt;\''],

'<hr>',

['<i class="bi bi-fonts"></i> font', 'font_window=true;hidedp(true);showwin(\'notepad-fonts\');apps.notepadFonts.reset();'],

]

}

function playWindowsBackground() {

var audio = new Audio(". /media/Windows Background.wav")

audio.play()

}

let dpt = null, isOnDp = false;

$('#dp')[0].onmouseover = () => { isOnDp = true };

$('#dp')[0].onmouseleave = () => { isOnDp = false; hidedp() };

function showdp(e, cl, arg) {

if ($('#dp').hasClass('show-begin')) {

$('#dp').removeClass('show');

setTimeout(() => {

$('#dp').removeClass('show-begin');

}, 200).

if (e ! = dpt) {

setTimeout(() => {

showdp(e, cl, arg).

}, 400).

}

return;

}

// dpt = e;

let off = $(e).offset();

$('#dp').css('left', off.left);

$('#dp').css('top', off.top + e.offsetHeight);

let h = '';

dps[cl].forEach(item => {

if (typeof (item) == 'function') {

ret = item(arg);

if (ret == 'null') {

return true;

}

h += `<a class="a" οnclick="${ret[1]}">${ret[0]}</a>\n`;

} else if (typeof (item) == 'string') {

h += item + '\n';

} else {

h += `<a class="a" οnclick="${item[1]}">${item[0]}</a>\n`;

}

})

$('#dp>list')[0].innerHTML = h;

$('#dp').addClass('show-begin');

setTimeout(() => {

$('#dp').addClass('show');

}, 0);

setTimeout(() => {

if (off.top + e.offsetHeight + $('#dp')[0].offsetHeight > $('html')[0].offsetHeight) {

$('#dp').css('top', off.top - $('#dp')[0].offsetHeight);

}

if (e.clientX + $('#descp')[0].offsetWidth + 15 >= $('html')[0].offsetWidth) {

$('#descp').css('left', e.clientX - $('#descp')[0].offsetWidth - 10);

}

$('#descp').addClass('show');

}, 100).

}, 500).

}

function hidedescp(e) {

$('#descp').removeClass('show');

$(e.target).attr('data-descp', 'hide');

setTimeout(() => {

$('#descp').removeClass('show-begin');

}, 100).

}

// Tips

let nts = {

'about': {

cnt: `<p class="tit">Windows 12 Web Edition</p>

<p>The Windows 12 Web Edition is an open-source project,<br />

Want to give users a preview of Windows 12 on the web,<br />

The content may not be consistent with the official Windows 12 release. <br />

Use standard web technologies such as HTML, CSS and JS<br />.

This program is in no way affiliated with Microsoft and should not be confused with Microsoft operating systems or products,<br />.

It's also not a Windows 365 cloud PC<br />.

Microsoft, Windows and other demonstration products in this program are trademarks of Microsoft Corporation<br />

Google, Android, and other demonstration products in this program are trademarks of Google Inc.</p>`.

btn: [

{ type: 'main', text: 'closure', js: 'closenotice();' },

{ type: 'detail', text: 'more', js: "closenotice();openapp('about');if($('.window.about').hasClass('min'))minwin('about');$('.dock.about') .removeClass('show')" },

]

}, }

'feedback': {

cnt: `<p class="tit">Feedback</p>

<p>We are very focused on user experience and feedback</p>

<a class="a" οnclick="window.open('https://github.com/tjy-gitnub/win12/issues','_blank');" win12_title="Open link in new browser window" οnmοuseenter="" showdescp(event)" οnmοuseleave="hadescp(event)">Submit issue on github (github account required, will be taken more seriously)</a>

<a class="a" οnclick="window.open('https://forms.office.com/Pages/ResponsePage.aspx?id=DQSIkWdsW0yxEjajBLZtrQAAAAAAAAAAAAO__ SDw7SZURjUzOUo0VEVXU1pMWlFTSUVGWDNYWU1EWS4u','_blank');" win12_title="Open link in new browser window" οnmοuseenter="showdescp(event)" οnmοuseleave=" hidedescp(event)">Send feedback on Microsoft Forms (don't need an account and will value it)</a>

</list>`,

btn: [

{ type: 'main', text: 'closure', js: 'closenotice();' },

]

}, }

'widgets': {

cnt: `

<p class="tit">Add widget</p>

<a class="a" οnclick="closenotice(); widgets.widgets.add('calc');">Calculator</a>

<a class="a" οnclick="closenotice(); widgets.widgets.add('weather');">Weather</a>

<a class="a" οnclick="closenotice(); widgets.widgets.add('monitor');">System Performance Monitor</a>

</list>`,

Section V. Intranet Penetration

Introduction: We have learned a lot from the third section on LANs, and in this section we are going to learn about intranet penetration.

First of all, you need to use cpolar this tool, this tool is not like peanut shells software HTTP protocols need to pay ¥ 6.00 to open, this will be enough to use the free.

Official website address: https://www.cpolar.com/

See https://www.cpolar.com/docs for usage

a thank-you note

This article is compiled from a number of articles in the CSDN platform, due to the reference article is too much, not one by one in the Acknowledgments written in detail, the author would like to thank Thanks♪(・ω・)ノ

I am very grateful for the support of the CSDN platform, so that a civilian to get a rare learning opportunity, but also thanks to the invitation of the major enterprise conference, so that I learned a lot from it in the world outside the world that I see the new continent, but also thanks to the National Computer Grade Exam Level 4 - Computer Networks, the writing team.

Special thanks to Jingyuan Tan for his open source work "Windows 12 Web Edition" and their hard work. I would like to wish Jingyuan Tan good luck in his midterm exams in advance, and I hope you can create your own new world.

We would like to thank DeepL document translation tool, CSDN, Baidu and other platforms for their great support!

Thanks to all the feedback from readers, I'm here to thank these tech gurus for their input!

November 18, 2023 First published

November 24, 2023 Revision 3

科技语者

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Windows 12 Web Edition In-Depth Development Report

In his original article "Windows 12 Web Edition In-Depth Development Report", Hacker Beaver gives us a detailed explanation of Windows 12 web development essentials. He started with the basics of the operating system and let us understand the various techn
复制链接

扫一扫