Windows 12 网页版

apps/setting/main.css

@@ -0,0 +1,73 @@
+#win-setting {
+    display: flex;
+    height: calc(100% - 32px);
+}
+
+#win-setting>* {
+    height: 100%
+}
+
+#win-setting>.menu {
+    width: 300px;
+    padding: 10px 5px 5px 10px;
+}
+
+#win-setting>.menu>.user {
+    display: flex;
+    padding: 10px 10px;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    transition: 200ms;
+}
+
+#win-setting>.menu>.user:hover {
+    background-color: #ffffff70;
+}
+
+#win-setting>.menu>.user>div>p:first-child {
+    font-size: 25px;
+    margin-bottom: -7px;
+}
+
+#win-setting>.menu>.user>div {
+    padding: 0px 0 0 10px;
+}
+
+#win-setting>.menu>.user>.bi {
+    background-color: #eeeeeeee;
+    box-shadow: 0 0 10px #7f7f7f7f;
+    width: 60px;
+    height: 60px;
+    font-size: 45px;
+    border-radius: 50%;
+}
+
+#win-setting>.menu>.user>.bi::before {
+    position: relative;
+    top: -7px;
+    left: 7px;
+}
+
+#win-setting>.menu>list {
+    padding-bottom: 10px;
+    margin-left: 5px;
+    margin-top: 40px;
+    height: calc(100% - 123px);
+    overflow: auto;
+}
+
+#win-setting>.menu>list>a {
+    padding: 5px 8px;
+    font-size: 15px;
+    display: flex;
+}
+
+#win-setting>.menu>list>a>p {
+    margin: 5px 7px;
+}
+
+#win-setting>.menu>list>a>img {
+    height: 20px;
+    width: 20px;
+    margin: 1px 10px 0 0;
+}

apps/setting/main.js

@@ -0,0 +1,29 @@
+const main = document.getElementsByTagName('body')[0];
+const icon = document.querySelector('.window.setting>.titbar');
+const wd = document.querySelector('.window.setting');
+let move = false;
+let deltaLeft = 0, deltaTop = 0;
+
+icon.addEventListener('mousedown', function (e) {
+    deltaLeft = e.clientX - wd.offsetLeft;
+    deltaTop = e.clientY - wd.offsetTop;
+    move = true;
+})
+
+main.addEventListener('mousemove', function (e) {
+    if (move) {
+        const cx = e.clientX;
+        const cy = e.clientY;
+        let dx = cx - deltaLeft
+        let dy = cy - deltaTop
+        if (dx < 0) dx = 0
+        if (dy < 0) dy = 0
+        if (dx > 500) dx = 500
+        if (dy > 300) dy = 300
+        wd.setAttribute('style', `left:${dx}px;top:${dy}px`)
+    }
+})
+main.addEventListener('mouseup', function (e) {
+    move = false;
+    console.log('mouseup');
+})

base.css

@@ -0,0 +1,79 @@
+body {
+    margin: 0;
+    font-family: -apple-system,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 {
+    font-family: sans-serif;
+    line-height: 1.15;
+    -webkit-text-size-adjust: 100%;
+    -webkit-tap-highlight-color: transparent;
+}
+
+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;
+}
+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

@@ -0,0 +1,546 @@
+/* @import "../boot4/css/bootstrap.min.css"; */
+@import "./bootstrap-icons.css";
+@import "./base.css";
+
+:root {
+    --theme: #fff;
+    --theme-text: #ddd;
+}
+
+p {
+    margin: 0;
+}
+
+body {
+    background: url('./bg.svg') center;
+    background-size: cover;
+}
+
+.a {
+    color: var(--them-text);
+    text-decoration: none;
+}
+
+.a:hover {
+    color: var(--them-text);
+}
+
+body {
+    color: var(--them-text);
+    user-select: none;
+}
+
+#dock-box {
+    position: absolute;
+    bottom: 10px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
+.dock {
+    border-radius: 10px;
+    height: 100%;
+    background-color: #eeeeeea0;
+    backdrop-filter: blur(10px);
+    box-shadow: 0 0 5px #7f7f7f7f;
+    padding: 7px 10px;
+    margin: 0 3px;
+    display: flex;
+}
+
+.dock>* {
+    padding-left: 3px;
+    padding-right: 3px;
+}
+
+.dock>.bi {
+    font-size: 28px;
+    margin-top: -8px;
+}
+
+#start-btn {
+    transition: 200ms;
+    width: 32px;
+    height: 26px;
+}
+
+#start-btn>svg {
+    transition: 200ms;
+}
+
+#start-btn:hover {
+    opacity: 0.6;
+}
+
+#start-btn:active {
+    padding: 2.5px 5.5px;
+}
+
+#start-btn:active>svg {
+    width: 21px;
+    height: 21px;
+}
+
+#start-menu {
+    display: none;
+    position: absolute;
+    bottom: 0px;
+    top: 300px;
+    width: 800px;
+    left: calc(50% - 400px);
+    border-radius: 20px;
+    background-color: #ffffff70;
+    backdrop-filter: blur(80px);
+    opacity: 0;
+    transition: 200ms;
+    box-shadow: 0 0 15px #7f7f7f7f;
+    border: 2px solid #7f7f7f10;
+    z-index: 99;
+}
+
+#start-menu.show-begin {
+    display: flex;
+}
+
+#start-menu.show {
+    display: flex;
+    top: 100px;
+    bottom: 60px;
+    opacity: 1;
+}
+
+
+#s-m-l {
+    width: 300px;
+    height: 100%;
+    padding: 0 10px;
+}
+
+#s-m-l>.input {
+    padding-left: 30px;
+}
+
+input-before {
+    display: block;
+    font-size: 15px;
+    height: 0;
+    margin-top: -28px;
+    margin-left: 8px;
+    margin-bottom: 10px;
+}
+
+#s-m-l>list {
+    margin-left: 5px;
+    margin-top: 40px;
+}
+#s-m-l>list>a {
+    padding: 3px 8px;
+    font-size: 15px;
+    display: flex;
+}
+#s-m-l>list>a>p {
+    margin: 5px 7px;
+}
+#s-m-l>list>a>img {
+    height: 25px;
+    width: 25px;
+    margin-top: 3px;
+}
+
+
+#s-m-r {
+    width: 500px;
+    height: 50px;
+    transition: 400ms;
+    overflow: hidden;
+    opacity: 0;
+    margin-top: 80px;
+}
+#s-m-r>*{
+    margin-bottom: 50px !important;
+    transition: 600ms;
+    opacity: 0;
+}
+#s-m-r>.pinned{
+    margin-bottom: 80px !important;
+    transition: 800ms;
+}
+#start-menu.show>#s-m-r{
+    height: 100%;
+    opacity: 1;
+    margin-top: 0;
+}
+#start-menu.show>#s-m-r>*{
+    opacity: 1;
+    margin-bottom: 0!important;
+}
+
+#s-m-r>.row1{
+    display: flex;
+}
+#s-m-r>.row1>.tool{
+    width: 200px;
+    padding: 5px 10px 0 0;
+}
+#s-m-r>.row1>.tool>*{
+    float: right;
+}
+#s-m-r>.row1>.folder{
+    display: flex;
+    padding: 10px 10px;
+    margin: 15px 15px;
+    border-radius: 10px;
+    background-color: #ffffff50;
+    width: calc(100% - 200px);
+}
+#s-m-r>.row1>.folder>.sm-app{
+    height: 72px;
+}
+#s-m-r>.pinned{
+    padding: 10px 10px;
+    margin: 0 10px 0 15px;
+    border-radius: 10px;
+    background-color: #ffffff50;
+}
+#s-m-r>.pinned>.apps{
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 15px;
+}
+#s-m-r>.pinned>.title{
+    padding: 5px 0 5px 10px;
+    font-size: 18px;
+    font-weight: 530;
+    display: flex;
+}
+#s-m-r>.pinned>.title>*{
+    width: 100%;
+}
+
+#s-m-r>.tuijian{
+    padding: 10px 10px;
+    margin: 15px 10px 0 15px;
+    border-radius: 10px;
+    background-color: #ffffff50;
+}
+#s-m-r>.tuijian>.apps{
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 15px;
+}
+#s-m-r>.tuijian>.title{
+    padding: 5px 0 5px 10px;
+    font-size: 18px;
+    font-weight: 530;
+    display: flex;
+}
+#s-m-r>.tuijian>.title>*{
+    width: 100%;
+}
+#s-m-user {
+    height: 100px;
+    width: 100px;
+    border-radius: 50%;
+    position: relative;
+    top: -50px;
+    left: calc(50% - 50px);
+    background-color: #ececec;
+    font-size: 80px;
+}
+
+#s-m-user>.bi {
+    position: relative;
+    top: -15px;
+    left: 10px;
+}
+
+
+
+.input {
+    background-color: #fbfbfb;
+    border-radius: 10px;
+    border: none;
+    border-bottom: 2px solid #868686;
+    padding: 3px 5px 4px 8px;
+    outline: medium;
+    transition: 200ms;
+    width: 100%;
+}
+
+
+.input:hover {
+    background-color: #eee;
+}
+
+.input:focus {
+    background-color: #fff;
+    border-bottom-color: #2983cc;
+}
+
+.btn{
+    border: 0px solid;
+    border-radius: 10px;
+    padding: 7px 10px;
+    transition: 200ms;
+    background-color: #00000000;
+}
+
+.btn-icon{
+    border: 0px solid;
+    border-radius: 10px;
+    padding: 1px 5px;
+    transition: 200ms;
+    background-color: #00000000;
+    font-size: 23px;
+    height: 33px;
+    width: 33px;
+}
+.btn-icon.big{
+    padding: 3px 7px;
+    font-size: 19px;
+}
+
+.btn:hover {
+    background-color: #7f7f7f30;
+}
+
+.btn:active{
+    font-size: 17px;
+    padding: 4px 8px;
+}
+
+.btn-icon.big:active{
+    font-size: 13px;
+    padding: 6px 10px;
+}
+
+.more-btn{
+    background: #ffffff70;
+    padding: 0;
+    border-radius: 5px;
+    font-size: 12px;
+    float: right;
+    padding:2px 5px;
+    border: 1px solid #7f7f7f30;
+}
+.more-btn:hover{
+    background-color: #ffffff50;
+}
+.more-btn>.bi{
+    font-size: 10px;
+}
+
+.sm-app{
+    width: 72px;
+    height: 80px;
+    border-radius: 10px;
+    text-align: center;
+    transition: 200ms;
+    padding: 0 3px;
+}
+.sm-app>*:first-child{
+    height: 34px;
+    width: 34px;
+    margin-top: 12px;
+    transition: 200ms;
+}
+.sm-app>*:last-child{
+    margin-top: -3px;
+    transition: 200ms;
+    font-size: 10px;
+    line-height: 13px;
+}
+.sm-app:hover{
+    background-color: #ffffff70;
+}
+.sm-app:active{
+    padding-top: 4px;
+}
+.sm-app:active>*:last-child{
+    margin-top: 1px;
+}
+.sm-app:active>*:first-child{
+    height: 26px;
+    width: 26px;
+}
+
+.tj-obj{
+    width: 50%;
+    height: 55px;
+    border-radius: 10px;
+    transition: 200ms;
+    padding: 0 3px;
+    display: flex;
+    padding: 10px 3px 10px 10px;
+}
+.tj-obj>img{
+    height: 35px;
+    width: 35px;
+    transition: 200ms;
+}
+.tj-obj>div>*:first-child{
+    margin: 3px 0 2px 5px;
+    font-size: 15px;
+    line-height: 13px;
+}
+.tj-obj>div>*:last-child{
+    font-size: 10px;
+    line-height: 13px;
+    margin-left: 6px;
+}
+.tj-obj:hover{
+    background-color: #ffffff70;
+}
+/* hi */
+
+dropdown {
+    border-radius: 10px;
+    display: none;
+    position: fixed;
+    box-shadow: 0 0 5px var(--sd);
+    min-width: 200px;
+    background: #eeeeee30;
+    backdrop-filter: saturate(180%) blur(12px);
+    z-index: 999;
+    box-shadow: 0 0 5px #7f7f7f7f;
+}
+
+
+dropdown>list>* {
+    padding: 3px 10px;
+    border-radius: 0;
+}
+
+dropdown>list>*:last-child {
+    border-radius: 0 0 10px 10px;
+    padding-bottom: 5px;
+}
+
+dropdown>list>*:first-child {
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+}
+
+list {
+    display: flex;
+    flex-direction: column;
+    padding-left: 0;
+    margin-bottom: 0;
+    border-radius: 10px;
+
+}
+
+list>* {
+    width: 100%;
+    color: var(--text);
+    text-align: inherit;
+    border-radius: 10px;
+    position: relative;
+    display: block;
+    padding: 10px 20px;
+    transition: 100ms;
+}
+
+list>*:hover {
+    color: var(--text);
+    background-color: #ffffff70;
+    text-decoration: none;
+    transition: 200ms;
+}
+
+list>*:focus {
+    background-color: #9ac0e977;
+    transition: 200ms;
+}
+
+list>hr {
+    width: calc(100% - 12px);
+    padding: 0 !important;
+    margin: 2px 6px;
+    background-color: #7f7f7f;
+    border-radius: 5px;
+    height: 0.75px;
+}
+
+list>hr:hover {
+    background-color: #7f7f7f;
+}
+
+list>.text {
+    margin: 0;
+}
+
+list>.text:hover {
+    background-color: unset;
+}
+
+.window{
+    position: fixed;
+    width: 50%;
+    height: 50%;
+    top: 25%;
+    left: 25%;
+    background-color: #ffffff70;
+    backdrop-filter: blur(50px);
+    border-radius: 10px;
+    border: 3px solid #7f7f7f20;
+    display: none;
+    opacity: 0;
+    transition: 200ms;
+    overflow: hidden;
+}
+.window.show-begin{
+    display: block;
+}
+.window.show{
+    height: 80%;
+    width: 70%;
+    top: 10%;
+    left: 15%;
+    opacity: 1;
+}
+.window.notrans{
+    transition: unset !important;
+}
+
+.window>.titbar{
+    background-color: #ffffff30;
+    border-radius: 10px 10px 0 0;
+    height: 32px;
+    padding: 0 0 0 5px;
+    display: flex;
+}
+.window>.titbar>p{
+    font-size: 16px;
+    width: 100px;
+    margin-top: 3px;
+}
+.window>.titbar>.icon{
+    margin: 6px 5px 0 0;
+    height: 20px;
+    width: 20px;
+}
+.window>.titbar>div{
+    width: calc(100% - 125px);
+}
+.wbtg{
+    height: 100%;
+    float: right;
+    width: 45px;
+    text-align: center;
+    padding-top: 5px;
+    font-size: 13px;
+    transition: 100ms;
+}
+.wbtg.red{
+    border-top-right-radius: 10px;
+}
+.wbtg:hover{
+    background-color: #7f7f7f30;
+}
+.wbtg.red:hover{
+    background-color: #c42b1c;
+    color: #fff;
+}

desktop.html

@@ -0,0 +1,352 @@
+<!DOCTYPE html>
+<html lang="en" style="height: 100%;">
+
+<head>
+	<meta charset="UTF-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<link rel="stylesheet" href="./desktop.css" />
+	<title>Win12</title>
+	<!-- Windows 12 网页版 谭景元原创  -->
+
+	<!-- Windows 12 网页版是一个开放源项目,希望在网络上复制 Windows12 的桌面体验,
+	使用标准网络技术,例妙如 Html、CSS 和 Javascript
+	此项目绝不附属于微软,且不应与微软操作系统或产品混淆
+	这也不是 Windows365 cloud PC
+	本项目中微软、Windows和其他示范产品是微软公司组的商标 -->
+</head>
+
+<body>
+	<script src="./jq.min.js"></script>
+	<dropdown id="power">
+		<!-- 关机菜单 -->
+		<list>
+			<a href="#"><i class="bi bi-power"></i> 关机</a>
+			<a href="#"><i class="bi bi-arrow-counterclockwise"></i> 重启</a>
+		</list>
+	</dropdown>
+	<div id="start-menu">
+		<!-- 开始菜单 -->
+		<div id="s-m-l">
+			<div id="s-m-user">
+				<i class="bi bi-person"></i>
+			</div>
+			<p style="width: 100%;text-align: center;margin: -50px 0 20px 0;font-size: 30px;">Administartor</p>
+			<input type="text" class="input" alt="hi" placeholder="在这里输入你要搜索的内容">
+			<input-before class="bi bi-search"></input-before>
+			<list>
+				<a href="#"><img src="icon/setting.png">
+					<p>设置</p>
+				</a>
+				<a href="#"><img src="icon/explorer.png">
+					<p>文件资源管理器</p>
+				</a>
+				<a href="#"><img src="icon/edge.png">
+					<p>Microsoft Edge</p>
+				</a>
+			</list>
+		</div>
+		<div id="s-m-r">
+			<div class="row1">
+				<div class="folder">
+					<a href="#" class="a sm-app">
+						<img src="icon/folder/docs.png">
+						<p>文档</p>
+					</a>
+					<a href="#" class="a sm-app">
+						<img src="icon/folder/pics.png">
+						<p>图片</p>
+					</a>
+					<a href="#" class="a sm-app">
+						<img src="icon/folder/music.png">
+						<p>音乐</p>
+					</a>
+				</div>
+				<div class="tool">
+					<p style="font-size: 40px;margin-bottom: -10px;">12:00</p>
+					<p>星期一, 2368年13月34日</p>
+					<a href="#" class="a btn btn-icon" onclick="
+						let rect=this.getBoundingClientRect();
+						showdropdown('power',
+							'top',rect.bottom+5,
+							'right',document.body.clientWidth-rect.right);">
+						<i class="bi bi-power"></i>
+					</a>
+					<a href="#" class="a btn btn-icon big">
+						<i class="bi bi-arrows-angle-expand"></i>
+					</a>
+				</div>
+			</div>
+			<div class="pinned">
+				<!-- 已固定 卡片 -->
+				<div class="title">
+					<p>已固定</p>
+					<div>
+						<a href="#" class="a more-btn">所有应用 <i class="bi bi-chevron-right"></i></a>
+						<!-- 这个好像没什么必要 -->
+					</div>
+				</div>
+				<div class="apps">
+					<a href="#" class="a sm-app">
+						<img src="icon/calc.png">
+						<p>计算器</p>
+					</a>
+					<a href="#" class="a sm-app">
+						<img src="icon/camera.png">
+						<p>相机</p>
+					</a>
+					<a href="#" class="a sm-app">
+						<img src="icon/defender.png">
+						<p>Windows 安全中心</p>
+					</a>
+					<a href="#" class="a sm-app">
+						<img src="icon/edge.png">
+						<p>Microsoft Edge</p>
+					</a>
+					<a href="#" class="a sm-app">
+						<img src="icon/explorer.png">
+						<p>文件资源管理器</p>
+					</a>
+					<a href="#" class="a sm-app">
+						<img src="icon/getstarted.png">
+						<p>入门</p>
+					</a>
+					<a href="#" class="a sm-app">
+						<img src="icon/notepad.png">
+						<p>记事本</p>
+					</a>
+					<a href="#" class="a sm-app" onclick="
+							showwin('setting');
+							$('#start-menu').removeClass('show');
+							setTimeout(() => {
+								$('#start-menu').removeClass('show-begin');
+							}, 200);">
+						<img src="icon/setting.png">
+						<p>设置 <i>(可用)</i></p>
+					</a>
+					<a href="#" class="a sm-app">
+						<img src="icon/store.png">
+						<p>Microsoft Store</p>
+					</a>
+					<a href="#" class="a sm-app">
+						<img src="icon/taskmanager.png">
+						<p>任务管理器</p>
+					</a>
+					<a href="#" class="a sm-app">
+						<img src="icon/teams.png">
+						<p>Teams</p>
+					</a>
+					<a href="#" class="a sm-app">
+						<img src="icon/terminal.png">
+						<p>终端</p>
+					</a>
+				</div>
+			</div>
+			<div class="tuijian">
+				<!-- 推荐的项目 卡片 -->
+				<div class="title">
+					<p>推荐的项目</p>
+					<div>
+						<a href="#" class="a more-btn">更多 <i class="bi bi-chevron-right"></i></a>
+					</div>
+				</div>
+				<div class="apps">
+					<a href="#" class="a tj-obj">
+						<img src="icon/files/ppt.png">
+						<div>
+							<p>科学地使用瓶盖.pptx</p>
+							<p>5 分钟前</p>
+						</div>
+					</a>
+					<a href="#" class="a tj-obj">
+						<img src="icon/files/img.png">
+						<div>
+							<p>可口可乐瓶盖.jpg</p>
+							<p>7 分钟前</p>
+						</div>
+					</a>
+					<a href="#" class="a tj-obj">
+						<img src="icon/files/img.png">
+						<div>
+							<p>瓶盖构造图.jpg</p>
+							<p>16 分钟前</p>
+						</div>
+					</a>
+					<a href="#" class="a tj-obj">
+						<img src="icon/files/word.png">
+						<div>
+							<p>瓶盖的构造及作用.docx</p>
+							<p>24 分钟前</p>
+						</div>
+					</a>
+					<a href="#" class="a tj-obj">
+						<img src="icon/files/excel.png">
+						<div>
+							<p>可口可乐瓶盖厚度.xlsx</p>
+							<p>35 分钟前</p>
+						</div>
+					</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div id="dock-box">
+		<!-- Dock(任务)栏 -->
+		<div class="dock">
+			<a href="#" id="start-btn" onclick="
+				if($('#start-menu').hasClass('show')){
+					$('#start-menu').removeClass('show');
+					setTimeout(() => {
+						$('#start-menu').removeClass('show-begin');
+					}, 200);
+				}
+				else{
+					$('#start-menu').addClass('show-begin');
+					setTimeout(() => {
+						$('#start-menu').addClass('show');
+					}, 0);//非常神奇,我也不知道为什么去掉就不行
+				}">
+				<!-- 开始按钮 -->
+				<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+					width="26" height="26" viewBox="0,0,141.01231,139.7904">
+					<g transform="translate(-249.49385,-110.1048)">
+						<g data-paper-data="{&quot;isPaintingLayer&quot;:true}" fill-rule="nonzero" stroke="none"
+							stroke-width="0" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10"
+							stroke-dasharray="" stroke-dashoffset="0" style="mix-blend-mode: normal">
+							<g>
+								<path
+									d="M249.91007,176.97859v-37.06258c0,0 -0.61201,-15.50218 6.44566,-22.55984c6.65481,-6.65481 21.75412,-7.25137 21.75412,-7.25137h38.674c0,0 -5.63996,23.50704 -5.63996,34.44402c0,12.14542 4.83426,33.03404 4.83426,33.03404c0,0 -14.30746,5.32223 -33.64257,5.43854c-19.06387,0.11467 -32.4255,-6.04281 -32.4255,-6.04281z"
+									fill="#c349b3" />
+								<path
+									d="M322.8133,175.97146c0,0 -5.43854,-18.43537 -5.43854,-31.42262c0,-11.24451 6.24424,-34.44402 6.24424,-34.44402h38.67399c0,0 15.09931,0.59657 21.75412,7.25138c7.05766,7.05765 6.44567,22.55983 6.44567,22.55983v37.06257c0,0 -13.50808,-6.9902 -34.28384,-6.44566c-19.42489,0.50913 -33.39565,5.43854 -33.39565,5.43854z"
+									data-paper-data="{&quot;index&quot;:null}" fill="#af63c7" />
+								<path
+									d="M390.49279,183.02141v37.06258c0,0 0.61199,15.50217 -6.44567,22.55983c-6.65481,6.65481 -21.75412,7.25138 -21.75412,7.25138h-38.67399c0,0 5.63995,-17.9772 5.63995,-35.04831c0,-15.863 -4.63281,-31.82548 -4.63281,-31.82548c0,0 12.3084,-5.19058 31.58281,-5.63996c17.27865,-0.40286 34.28384,5.63996 34.28384,5.63996z"
+									data-paper-data="{&quot;index&quot;:null}" fill="#5f79e1" />
+								<path
+									d="M317.58956,184.83425c0,0 4.4314,15.78166 4.4314,32.22833c0,17.11804 -5.63996,32.83262 -5.63996,32.83262h-38.67399c0,0 -15.09932,-0.59657 -21.75413,-7.25138c-7.05766,-7.05767 -6.44566,-22.55983 -6.44566,-22.55983v-37.06258c0,0 14.36466,6.61326 33.43265,6.44566c18.72762,-0.1646 34.6497,-4.63282 34.6497,-4.63282z"
+									data-paper-data="{&quot;index&quot;:null}" fill="#8072d3" />
+							</g>
+						</g>
+					</g>
+				</svg>
+			</a>
+		</div>
+		<div class="dock">
+			<!-- 任务栏固定的应用 -->
+			<i class="bi bi-gear"></i>
+			<i class="bi bi-folder"></i>
+			<i class="bi bi-browser-edge"></i>
+		</div>
+	</div>
+	<div class="window setting">
+		<div class="titbar">
+			<img src="icon/setting.png" class="icon">
+			<p>设置</p>
+			<div>
+				<a href="#" class="a wbtg red" onclick="hidewin('setting')">
+					<i class="bi bi-x-lg"></i>
+					<a href="#" class="a wbtg">
+						<i class="bi bi-app"></i>
+					</a>
+					<a href="#" class="a wbtg">
+						<i class="bi bi-dash-lg"></i>
+					</a>
+				</a>
+			</div>
+		</div>
+		<div class="content" id="win-setting">
+			<div class="menu">
+				<a href="#" class="a user">
+					<i class="bi bi-person"></i>
+					<div>
+						<p>瓶盖</p>
+						<p>tanjingyuan@win12.com</p>
+					</div>
+				</a>
+				<input type="text" class="input" placeholder="查找设置" style="padding-left: 30px;">
+				<input-before class="bi bi-search"></input-before>
+				<list>
+					<a href="#">
+						<img src="apps/setting/icons/system.webp">
+						系统
+					</a>
+					<a href="#">
+						<img src="apps/setting/icons/blueteeth.webp">
+						蓝牙和其他设备
+					</a>
+					<a href="#">
+						<img src="apps/setting/icons/network.webp">
+						网络和 Internet
+					</a>
+					<a href="#">
+						<img src="apps/setting/icons/personal.webp">
+						个性化
+					</a>
+					<a href="#">
+						<img src="apps/setting/icons/apps.webp">
+						应用
+					</a>
+					<a href="#">
+						<img src="apps/setting/icons/user.webp">
+						账户
+					</a>
+					<a href="#">
+						<img src="apps/setting/icons/time.webp">
+						时间和语言
+					</a>
+					<a href="#">
+						<img src="apps/setting/icons/game.webp">
+						游戏
+					</a>
+					<a href="#">
+						<img src="apps/setting/icons/help.webp">
+						辅助功能
+					</a>
+					<a href="#">
+						<img src="apps/setting/icons/safe.webp">
+						隐私和安全性
+					</a>
+					<a href="#">
+						<img src="apps/setting/icons/update.webp">
+						Windows 更新
+					</a>
+				</list>
+			</div>
+			<div class="page">
+				hello
+			</div>
+		</div>
+		<link rel="stylesheet" href="apps/setting/main.css">
+		<script src="apps/setting/main.js"></script>
+	</div>
+	<script>
+		function showwin(name) {
+			$('.window.' + name).addClass('show-begin');
+			setTimeout(() => {
+				$('.window.' + name).addClass('show');
+			}, 0);
+			setTimeout(() => {
+				$('.window.' + name).addClass('notrans');
+			}, 200);
+		}
+		function hidewin(name) {
+			$('.window.' + name).removeClass('notrans');
+			$('.window.' + name).removeClass('show');
+			setTimeout(() => {
+				$('.window.' + name).removeClass('show-begin');
+			}, 200);
+		}
+		function showdropdown(dropid, type1, pos1, type2, pos2) {
+			var dd = document.getElementById(dropid);
+			dd.style.setProperty(type1, pos1 + "px", "important");
+			dd.style.setProperty(type2, pos2 + "px", "important");
+			if (dd.style.display != "block") {
+				dd.style.setProperty("display", "block", "important");
+			} else
+				dd.style.setProperty("display", "none", "important");
+		}
+	</script>
+</body>
+
+</html>

icon.svg

@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="141.01231" height="139.7904" viewBox="0,0,141.01231,139.7904"><g transform="translate(-249.49385,-110.1048)"><g data-paper-data="{&quot;isPaintingLayer&quot;:true}" fill-rule="nonzero" stroke="none" stroke-width="0" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" style="mix-blend-mode: normal"><g><path d="M249.91007,176.97859v-37.06258c0,0 -0.61201,-15.50218 6.44566,-22.55984c6.65481,-6.65481 21.75412,-7.25137 21.75412,-7.25137h38.674c0,0 -5.63996,23.50704 -5.63996,34.44402c0,12.14542 4.83426,33.03404 4.83426,33.03404c0,0 -14.30746,5.32223 -33.64257,5.43854c-19.06387,0.11467 -32.4255,-6.04281 -32.4255,-6.04281z" fill="#c349b3"/><path d="M322.8133,175.97146c0,0 -5.43854,-18.43537 -5.43854,-31.42262c0,-11.24451 6.24424,-34.44402 6.24424,-34.44402h38.67399c0,0 15.09931,0.59657 21.75412,7.25138c7.05766,7.05765 6.44567,22.55983 6.44567,22.55983v37.06257c0,0 -13.50808,-6.9902 -34.28384,-6.44566c-19.42489,0.50913 -33.39565,5.43854 -33.39565,5.43854z" data-paper-data="{&quot;index&quot;:null}" fill="#af63c7"/><path d="M390.49279,183.02141v37.06258c0,0 0.61199,15.50217 -6.44567,22.55983c-6.65481,6.65481 -21.75412,7.25138 -21.75412,7.25138h-38.67399c0,0 5.63995,-17.9772 5.63995,-35.04831c0,-15.863 -4.63281,-31.82548 -4.63281,-31.82548c0,0 12.3084,-5.19058 31.58281,-5.63996c17.27865,-0.40286 34.28384,5.63996 34.28384,5.63996z" data-paper-data="{&quot;index&quot;:null}" fill="#5f79e1"/><path d="M317.58956,184.83425c0,0 4.4314,15.78166 4.4314,32.22833c0,17.11804 -5.63996,32.83262 -5.63996,32.83262h-38.67399c0,0 -15.09932,-0.59657 -21.75413,-7.25138c-7.05766,-7.05767 -6.44566,-22.55983 -6.44566,-22.55983v-37.06258c0,0 14.36466,6.61326 33.43265,6.44566c18.72762,-0.1646 34.6497,-4.63282 34.6497,-4.63282z" data-paper-data="{&quot;index&quot;:null}" fill="#8072d3"/></g></g></g></svg>

start.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en" style="height: 100%;">
+
+<head>
+	<meta name="theme-color" content="#fff" />
+	<meta charset="UTF-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<meta http-equiv="refresh" content="5;desktop.html">
+	<title>Win12</title>
+	<style>
+		loading>svg>circle:first-child {
+			stroke: #fff;
+			fill: none;
+			stroke-width: 2px;
+			stroke-linecap: round;
+			animation: spin-infinite 1.6s linear 0s infinite normal none running;
+			-webkit-transform-origin: 50% 50%;
+			transform-origin: 50% 50%;
+			transition: all .2s ease-in-out 0s
+		}
+
+		loading>svg>circle:last-child {
+			fill: #00000000;
+		}
+
+		loading>svg {
+			background-color: #00000000;
+			border-radius: 50%;
+		}
+
+		@keyframes spin-infinite {
+			0% {
+				stroke-dasharray: .01px, 43.97px;
+				-webkit-transform: rotate(0deg);
+				transform: rotate(0deg)
+			}
+
+			50% {
+				stroke-dasharray: 21.99px, 21.99px;
+				-webkit-transform: rotate(450deg);
+				transform: rotate(450deg)
+			}
+
+			to {
+				stroke-dasharray: .01px, 43.97px;
+				-webkit-transform: rotate(3turn);
+				transform: rotate(3turn)
+			}
+		}
+	</style>
+</head>
+
+<body style="background-color: #000;">
+	<svg style="position: absolute;left: calc(50% - 125px);top:20%;" version="1.1" xmlns="http://www.w3.org/2000/svg"
+		xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="250" viewBox="0,0,141.01231,139.7904">
+		<g transform="translate(-249.49385,-110.1048)">
+			<g data-paper-data="{&quot;isPaintingLayer&quot;:true}" fill-rule="nonzero" stroke="none" stroke-width="0"
+				stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray=""
+				stroke-dashoffset="0" style="mix-blend-mode: normal">
+				<g>
+					<path
+						d="M249.91007,176.97859v-37.06258c0,0 -0.61201,-15.50218 6.44566,-22.55984c6.65481,-6.65481 21.75412,-7.25137 21.75412,-7.25137h38.674c0,0 -5.63996,23.50704 -5.63996,34.44402c0,12.14542 4.83426,33.03404 4.83426,33.03404c0,0 -14.30746,5.32223 -33.64257,5.43854c-19.06387,0.11467 -32.4255,-6.04281 -32.4255,-6.04281z"
+						fill="#c349b3" />
+					<path
+						d="M322.8133,175.97146c0,0 -5.43854,-18.43537 -5.43854,-31.42262c0,-11.24451 6.24424,-34.44402 6.24424,-34.44402h38.67399c0,0 15.09931,0.59657 21.75412,7.25138c7.05766,7.05765 6.44567,22.55983 6.44567,22.55983v37.06257c0,0 -13.50808,-6.9902 -34.28384,-6.44566c-19.42489,0.50913 -33.39565,5.43854 -33.39565,5.43854z"
+						data-paper-data="{&quot;index&quot;:null}" fill="#af63c7" />
+					<path
+						d="M390.49279,183.02141v37.06258c0,0 0.61199,15.50217 -6.44567,22.55983c-6.65481,6.65481 -21.75412,7.25138 -21.75412,7.25138h-38.67399c0,0 5.63995,-17.9772 5.63995,-35.04831c0,-15.863 -4.63281,-31.82548 -4.63281,-31.82548c0,0 12.3084,-5.19058 31.58281,-5.63996c17.27865,-0.40286 34.28384,5.63996 34.28384,5.63996z"
+						data-paper-data="{&quot;index&quot;:null}" fill="#5f79e1" />
+					<path
+						d="M317.58956,184.83425c0,0 4.4314,15.78166 4.4314,32.22833c0,17.11804 -5.63996,32.83262 -5.63996,32.83262h-38.67399c0,0 -15.09932,-0.59657 -21.75413,-7.25138c-7.05766,-7.05767 -6.44566,-22.55983 -6.44566,-22.55983v-37.06258c0,0 14.36466,6.61326 33.43265,6.44566c18.72762,-0.1646 34.6497,-4.63282 34.6497,-4.63282z"
+						data-paper-data="{&quot;index&quot;:null}" fill="#8072d3" />
+				</g>
+			</g>
+		</g>
+	</svg>
+	<loading>
+		<svg style="position: absolute;left: calc(50% - 25px);top: 80%;" width="50px" height="50px" viewBox="0 0 16 16">
+			<circle cx="8px" cy="8px" r="7px"></circle>
+			<circle cx="8px" cy="8px" r="6px"></circle>
+		</svg>
+	</loading>
+</body>
+
+</html>