Windows 12网页版

Windows 12 网页版

apps/icons/about/info.svg

@@ -0,0 +1 @@
+<svg width="257" height="210" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"><defs><clipPath id="clip0"><rect x="194" y="174" width="257" height="210"/></clipPath><linearGradient x1="371" y1="145.246" x2="274" y2="411.754" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="fill1"><stop offset="0" stop-color="#2983CC"/><stop offset="0.19" stop-color="#2983CC"/><stop offset="0.6" stop-color="#A964C8"/><stop offset="1" stop-color="#181717"/></linearGradient></defs><g clip-path="url(#clip0)" transform="translate(-194 -174)"><path d="M210.938 204.816C225.042 198.915 245.267 192.551 264.934 190.573 286.131 188.436 304.108 191.578 314.531 202.567L314.531 358.008C299.63 349.555 280.744 348.391 263.324 350.145 244.518 352.059 225.552 357.498 210.938 363.08L210.938 204.816ZM330.469 202.567C340.892 191.578 358.869 188.436 380.066 190.573 399.733 192.551 419.958 198.915 434.062 204.816L434.062 363.08C419.432 357.498 400.482 352.043 381.676 350.161 364.24 348.391 345.37 349.539 330.469 358.008L330.469 202.567ZM322.5 188.149C306.802 174.64 284.043 172.63 263.324 174.704 239.195 177.144 214.842 185.422 199.67 192.328 196.827 193.622 195.001 196.459 195 199.585L195 375.026C195.001 379.43 198.57 382.999 202.971 382.998 204.108 382.998 205.232 382.754 206.268 382.283 220.325 375.903 242.972 368.231 264.918 366.014 287.374 363.75 306.196 367.402 316.284 380.002 319.038 383.437 324.054 383.988 327.487 381.232 327.94 380.868 328.352 380.455 328.716 380.002 338.804 367.402 357.626 363.75 380.066 366.014 402.028 368.231 424.691 375.903 438.732 382.283 442.738 384.106 447.463 382.334 449.285 378.325 449.756 377.289 450 376.164 450 375.026L450 199.585C449.999 196.459 448.173 193.622 445.33 192.328 430.158 185.422 405.805 177.144 381.676 174.704 360.957 172.614 338.198 174.64 322.5 188.149Z" fill="url(#fill1)" fill-rule="evenodd"/></g></svg>

apps/icons/about/update.svg

@@ -0,0 +1 @@
+<svg width="275" height="303" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"><defs><clipPath id="clip0"><rect x="224" y="210" width="275" height="303"/></clipPath><linearGradient x1="425.957" y1="184.336" x2="297.161" y2="538.2" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="fill1"><stop offset="0" stop-color="#FFD966"/><stop offset="0.3" stop-color="#FFD966"/><stop offset="0.6" stop-color="#A964C8"/><stop offset="1" stop-color="#181717"/></linearGradient><linearGradient x1="425.957" y1="184.336" x2="297.161" y2="538.2" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="fill2"><stop offset="0" stop-color="#FFD966"/><stop offset="0.3" stop-color="#FFD966"/><stop offset="0.6" stop-color="#A964C8"/><stop offset="1" stop-color="#181717"/></linearGradient><linearGradient x1="425.957" y1="184.336" x2="297.161" y2="538.2" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="fill3"><stop offset="0" stop-color="#FFD966"/><stop offset="0.3" stop-color="#FFD966"/><stop offset="0.6" stop-color="#A964C8"/><stop offset="1" stop-color="#181717"/></linearGradient><linearGradient x1="425.957" y1="184.336" x2="297.161" y2="538.2" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="fill4"><stop offset="0" stop-color="#FFD966"/><stop offset="0.3" stop-color="#FFD966"/><stop offset="0.6" stop-color="#A964C8"/><stop offset="1" stop-color="#181717"/></linearGradient></defs><g clip-path="url(#clip0)" transform="translate(-224 -210)"><path d="M272.157 395.177 336.421 448.754C341.883 453.308 342.578 460.968 338.024 466.43 333.47 471.893 325.81 472.587 320.348 468.033L256.084 414.456C250.622 409.902 249.927 402.242 254.481 396.78 259.035 391.318 266.695 390.623 272.157 395.177Z" fill="url(#fill1)" fill-rule="evenodd"/><path d="M245.369 427.309 309.632 480.886C315.095 485.44 315.789 493.1 311.235 498.562 306.681 504.025 299.022 504.719 293.559 500.165L229.295 446.588C223.833 442.034 223.139 434.374 227.692 428.912 232.246 423.45 239.906 422.755 245.369 427.309Z" fill="url(#fill2)" fill-rule="evenodd"/><path d="M229.826 468.817C221.682 480.545 223.714 496.4 234.639 505.508 245.564 514.617 261.526 513.763 271.598 503.642L229.826 468.817Z" fill="url(#fill3)" fill-rule="evenodd"/><path d="M459.663 235.601C459.663 235.601 459.663 235.601 459.663 235.601 459.663 235.601 459.663 235.601 459.663 235.601 413.768 197.883 346.277 203.707 307.273 248.53L304.862 251.422C296.879 261.651 290.771 272.898 286.536 285.162 282.838 296.785 280.961 308.836 281.172 320.995 281.919 335.779 276.611 359.131 274.252 369.147 273.341 372.199 274.519 375.36 277.089 377.503L352.92 440.724C355.491 442.867 358.812 443.457 361.651 442.011 371.079 437.889 393.095 428.467 407.772 426.542 419.77 424.562 431.608 420.816 442.055 414.819 453.358 408.448 463.322 400.415 471.948 390.722L474.359 387.831C511.434 341.4 505.022 273.962 459.663 235.601ZM452.937 374.328C446.186 381.772 438.15 388.144 429.686 393.07 421.758 397.353 413.134 400.511 404.028 401.634 389.137 404.47 374.674 408.752 361.282 415.015L331.078 389.834 301.195 364.921C304.626 350.352 306.236 335.355 306.669 320.465 306.456 311.573 307.69 302.254 310.477 293.685 313.479 284.204 318.623 275.421 324.731 267.442L326.874 264.871C356.716 230.383 408.887 225.949 444.179 254.827L444.179 254.827 444.179 254.827C444.179 254.827 444.179 254.827 444.179 254.827 444.179 254.827 444.179 254.827 444.179 254.827L444.179 254.827 444.179 254.827C478.935 284.348 484.226 336.145 455.401 372.025L453.258 374.596Z" fill="url(#fill4)" fill-rule="evenodd"/></g></svg>

apps/style/about.css

@@ -11,6 +11,11 @@
 
 #win-about>.menu>list>*{
     padding: 5px 10px;
+    display: flex;
+}
+
+#win-about>.menu>list>*>img{
+    margin: 2px 5px 0 0;
 }
 
 #win-about>.cnt{

apps/style/setting.css

@@ -1,6 +1,6 @@
 @font-face {
     font-family: SettingsIcons;
-    src: url(icons.woff2) format("woff2")
+    src: url(../icons/setting/icons.woff2) format("woff2")
 }
 
 #win-setting>.page>.title {

desktop.css

@@ -184,45 +184,31 @@ body {
     left: 1px;
 }
 
-#start-btn {
+.dock-btn {
     transition: 200ms;
     width: 32px;
     height: 26px;
 }
 
-#start-btn>svg {
+.dock-btn>svg {
     transition: 200ms;
 }
 
-#start-btn:hover {
+.dock-btn:hover {
     opacity: 0.6;
 }
 
-#start-btn:active {
+.dock-btn:active {
     padding: 2.5px 5.5px;
 }
 
-#start-btn:active>svg {
+.dock-btn:active>svg {
     width: 21px;
     height: 21px;
 }
 
-#search-btn{
-    font-size: 24px;
-    height: 35px;
-    width: 35px;
-    margin-top: -6px;
-    margin-left: 3px;
-    color: #333;
-    transition: 200ms;
-}
-
-#search-btn:hover{
-    opacity: 0.6;
-}
-#search-btn:active{
-    font-size: 20px;
-    padding: 3px 0 0 4px;
+.dock-btn.show{
+    filter: hue-rotate(380deg) brightness(1.1);
 }
 
 #start-menu {
@@ -834,7 +820,7 @@ list>.text:hover {
     background-color: #ffffff50;
     backdrop-filter: blur(50px);
     border-radius: 10px;
-    border: 3px solid #7f7f7f20;
+    border: 2px solid #7f7f7f20;
     display: none;
     opacity: 0;
     transition: 200ms;
@@ -842,6 +828,10 @@ list>.text:hover {
     box-shadow: 0 0 15px #7f7f7f7f;
 }
 
+.window.min{
+    margin-top: 17%;
+}
+
 .window.show-begin {
     display: block;
 }

desktop.html

@@ -17,10 +17,10 @@
 	本项目中微软、Windows和其他示范产品是微软公司的商标 -->
 	<link rel="stylesheet" href="./desktop.css" />
 	<!-- Apps style -->
-	<link rel="stylesheet" href="apps/setting/main.css">
-	<link rel="stylesheet" href="apps/explorer/main.css">
-	<link rel="stylesheet" href="apps/calc/main.css">
-	<link rel="stylesheet" href="apps/about/main.css">
+	<link rel="stylesheet" href="apps/style/setting.css">
+	<link rel="stylesheet" href="apps/style/explorer.css">
+	<link rel="stylesheet" href="apps/style/calc.css">
+	<link rel="stylesheet" href="apps/style/about.css">
 </head>
 
 <body onload="$('#loadback').addClass('hide');setTimeout(() => {$('#loadback').css('display','none')}, 200);">
@@ -52,10 +52,7 @@
 				<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="在这里输入你要搜索的内容" onclick="$('#start-menu').removeClass('show');
-				setTimeout(() => {
-					$('#start-menu').removeClass('show-begin');
-				}, 200);
+			<input type="text" class="input" alt="hi" placeholder="在这里输入你要搜索的内容" onclick="hide_startmenu();
 				$('#search-win').addClass('show-begin');
 				setTimeout(() => {
 					$('#search-win').addClass('show');
@@ -64,14 +61,11 @@
 			<input-before class="bi bi-search"></input-before>
 			<list>
 				<p class="text">可用</p>
-				<a onclick="showwin('setting');$('#start-menu').removeClass('show');
-				setTimeout(()=>{$('#start-menu').removeClass('show-begin');},200);">
+				<a onclick="showwin('setting');hide_startmenu();">
 				<img src="icon/setting.png"><p>设置</p></a>
-				<a onclick="showwin('explorer');$('#start-menu').removeClass('show');
-				setTimeout(()=>{$('#start-menu').removeClass('show-begin');},200);">
+				<a onclick="showwin('explorer');hide_startmenu();">
 				<img src="icon/explorer.png"><p>文件资源管理器</p></a>
-				<a onclick="showwin('calc');$('#start-menu').removeClass('show');
-				setTimeout(()=>{$('#start-menu').removeClass('show-begin');},200);">
+				<a onclick="showwin('calc');hide_startmenu();">
 				<img src="icon/calc.png"><p>计算器</p></a>
 				<p class="text">其它</p>
 				<a><img src="icon/camera.png"><p>相机</p></a>
@@ -116,21 +110,17 @@
 					</div>
 				</div>
 				<div class="apps">
-					<a class="a sm-app enable" onclick="showwin('calc');$('#start-menu').removeClass('show');
-					setTimeout(()=>{$('#start-menu').removeClass('show-begin');},200);">
+					<a class="a sm-app enable" onclick="showwin('calc');">
 					<img src="icon/calc.png"><p>计算器</p></a>
 					<a class="a sm-app"><img src="icon/camera.png"><p>相机</p></a>
 					<a class="a sm-app enable jump" href="https://github.com/tjy-gitnub/win12/issues" target="_blank">
 					<img src="icon/feedback.png"><p>反馈中心</p></a>
 					<a class="a sm-app"><img src="icon/defender.png"><p>Windows 安全中心</p></a>
-					<a class="a sm-app enable" onclick="showwin('about');$('#start-menu').removeClass('show');
-					setTimeout(()=>{$('#start-menu').removeClass('show-begin');}, 200);"><img src="icon/about.png"><p>关于Win12网页版</p></a>
-					<a class="a sm-app enable" onclick="showwin('explorer');$('#start-menu').removeClass('show');
-					setTimeout(()=>{$('#start-menu').removeClass('show-begin');}, 200);">
+					<a class="a sm-app enable" onclick="showwin('about');hide_startmenu();"><img src="icon/about.png"><p>关于Win12网页版</p></a>
+					<a class="a sm-app enable" onclick="showwin('explorer');hide_startmenu();">
 					<img src="icon/explorer.png"><p>文件资源管理器</p></a>
 					<a class="a sm-app"><img src="icon/notepad.png"><p>记事本</p></a>
-					<a class="a sm-app enable" onclick="showwin('setting');$('#start-menu').removeClass('show');
-					setTimeout(()=>{$('#start-menu').removeClass('show-begin');}, 200);">
+					<a class="a sm-app enable" onclick="showwin('setting');hide_startmenu();">
 					<img src="icon/setting.png"><p>设置 </p></a>
 					<a class="a sm-app"><img src="icon/store.png"><p>Microsoft Store</p></a>
 					<a class="a sm-app"><img src="icon/taskmanager.png"><p>任务管理器</p></a>
@@ -187,15 +177,14 @@
 	<div id="dock-box">
 		<!-- Dock(任务)栏 -->
 		<div class="dock">
-			<a id="start-btn" onclick="
+			<a class="dock-btn" id="start-btn" onclick="
 				if($('#start-menu').hasClass('show')){
-					$('#start-menu').removeClass('show');
-					setTimeout(() => {
-						$('#start-menu').removeClass('show-begin');
-					}, 200);
+					hide_startmenu();
 				}
 				else{
+					$('#start-btn').addClass('show');
 					if($('#search-win').hasClass('show')){
+						$('#search-btn').removeClass('show');
 						$('#search-win').removeClass('show');
 						setTimeout(() => {
 							$('#search-win').removeClass('show-begin');
@@ -228,25 +217,24 @@
 						<path d="M39.755 0 138 0 138 0 138 140.549C114.987 150.681 91.9742 159.212 68.9614 158.946 45.1752 160.012 22.9872 145.082 0 138.15L0 39.7981C0 17.8182 17.7989 0 39.755 0Z" fill="url(#sf4)" fill-rule="evenodd" transform="matrix(1 -1.22465e-16 -1.22465e-16 -1 897 512)"></path>
 					</g></svg>
 			</a>
-			<a id="search-btn" onclick="
+			<a class="dock-btn" id="search-btn" onclick="
 			if($('#search-win').hasClass('show')){
+				$('#search-btn').removeClass('show');
 				$('#search-win').removeClass('show');
 				setTimeout(() => {
 					$('#search-win').removeClass('show-begin');
 				}, 200);
 			}
 			else{
-				$('#start-menu').removeClass('show');
-				setTimeout(() => {
-					$('#start-menu').removeClass('show-begin');
-				}, 200);
+				$('#search-btn').addClass('show');
+				hide_startmenu();
 				$('#search-win').addClass('show-begin');
 				setTimeout(() => {
 					$('#search-win').addClass('show');
 				}, 0);
 				$('#search-input').focus();
 			}">
-				<i class="bi bi-search"></i>
+				<svg width="26" height="26" viewBox="0,0,313,313" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"><defs><clipPath id="search-clip1"><rect x="288" y="257" width="313" height="313"/></clipPath><linearGradient x1="338.45" y1="228.45" x2="551.55" y2="597.55" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="search-fill1"><stop offset="0" stop-color="#2983CC"/><stop offset="0.09" stop-color="#2983CC"/><stop offset="0.34" stop-color="#A964C8"/><stop offset="0.77"/><stop offset="1"/></linearGradient></defs><g clip-path="url(#search-clip1)" transform="translate(-288 -257)"><path d="M517.98 458.696C559.356 402.228 547.127 322.905 490.667 281.524 434.207 240.143 354.896 252.373 313.521 308.841 272.145 365.309 284.374 444.631 340.833 486.012 385.458 518.719 446.139 518.698 490.74 485.959L490.721 485.959C491.306 486.739 491.93 487.48 492.632 488.201L567.702 563.282C575.316 570.902 587.664 570.907 595.283 563.292 602.902 555.677 602.906 543.327 595.293 535.707L520.223 460.626C519.526 459.921 518.776 459.269 517.98 458.676ZM523.011 383.732C523.011 442.969 474.997 490.99 415.768 490.99 356.539 490.99 308.525 442.969 308.525 383.732 308.525 324.495 356.539 276.474 415.768 276.474 474.997 276.474 523.011 324.495 523.011 383.732Z" fill="url(#search-fill1)" fill-rule="evenodd"/></g></svg>
 			</a>
 		</div>
 		<div class="dock" id="taskbar" style="display: none;" count="0">
@@ -265,14 +253,11 @@
 	</div>
 	<div class="window setting">
 		<div class="titbar">
-			<img src="icon/setting.png" class="icon">
-			<p>设置</p>
+			<img src="icon/setting.png" class="icon"><p>设置</p>
 			<div>
-				<a class="a wbtg red" onclick="hidewin('setting')">
-					<i class="bi bi-x-lg"></i>
-					<a class="a wbtg max" onclick="maxwin('setting')"><i class="bi bi-app"></i></a>
-					<a class="a wbtg"><i class="bi bi-dash-lg"></i></a>
-				</a>
+				<a class="a wbtg red" onclick="hidewin('setting')"><i class="bi bi-x-lg"></i></a>
+				<a class="a wbtg max" onclick="maxwin('setting')"><i class="bi bi-app"></i></a>
+				<a class="a wbtg" onclick="minwin('setting')"><i class="bi bi-dash-lg"></i></a>
 			</div>
 		</div>
 		<div class="content" id="win-setting">
@@ -289,17 +274,17 @@
 				<list>
 					<a style="background-color: #ffffff70"><span
 						style="background-color: #2983cc;border-radius: 10px;position: relative;left: -10px;top:1px;height: 20px;margin-right: -4px;">
-						&nbsp;</span><img src="apps/setting/icons/system.png">系统</a>
-					<a><img src="apps/setting/icons/blueteeth.png">蓝牙和其他设备</a>
-					<a><img src="apps/setting/icons/network.png">网络和 Internet</a>
-					<a><img src="apps/setting/icons/personal.png">个性化</a>
-					<a><img src="apps/setting/icons/apps.png">应用</a>
-					<a><img src="apps/setting/icons/user.png">账户</a>
-					<a><img src="apps/setting/icons/time.png">时间和语言</a>
-					<a><img src="apps/setting/icons/game.png">游戏</a>
-					<a><img src="apps/setting/icons/help.png">辅助功能</a>
-					<a><img src="apps/setting/icons/safe.png">隐私和安全性</a>
-					<a><img src="apps/setting/icons/update.png">Windows 更新</a>
+						&nbsp;</span><img src="apps/icons/setting/system.png">系统</a>
+					<a><img src="apps/icons/setting/blueteeth.png">蓝牙和其他设备</a>
+					<a><img src="apps/icons/setting/network.png">网络和 Internet</a>
+					<a><img src="apps/icons/setting/personal.png">个性化</a>
+					<a><img src="apps/icons/setting/apps.png">应用</a>
+					<a><img src="apps/icons/setting/user.png">账户</a>
+					<a><img src="apps/icons/setting/time.png">时间和语言</a>
+					<a><img src="apps/icons/setting/game.png">游戏</a>
+					<a><img src="apps/icons/setting/help.png">辅助功能</a>
+					<a><img src="apps/icons/setting/safe.png">隐私和安全性</a>
+					<a><img src="apps/icons/setting/update.png">Windows 更新</a>
 				</list>
 			</div>
 			<div class="page" style="overflow: auto;">
@@ -336,15 +321,9 @@
 			<img src="icon/explorer.png" class="icon">
 			<p>文件资源管理器</p>
 			<div>
-				<a class="a wbtg red" onclick="hidewin('explorer')">
-					<i class="bi bi-x-lg"></i>
-					<a class="a wbtg max" onclick="maxwin('explorer')">
-						<i class="bi bi-app"></i>
-					</a>
-					<a class="a wbtg">
-						<i class="bi bi-dash-lg"></i>
-					</a>
-				</a>
+				<a class="a wbtg red" onclick="hidewin('explorer')"><i class="bi bi-x-lg"></i></a>
+				<a class="a wbtg max" onclick="maxwin('explorer')"><i class="bi bi-app"></i></a>
+				<a class="a wbtg" onclick="minwin('explorer')"><i class="bi bi-dash-lg"></i></a>
 			</div>
 		</div>
 		<div class="content" id="win-explorer">
@@ -352,20 +331,12 @@
 				<div class="card pinned">
 					<p class="title"><span style="font: 15px;">📌</span> 已固定</p>
 					<list>
-						<a>
-							<img src="apps/explorer/icons/qa.png">快速访问
-						</a>
-						<a>
-							<img src="apps/explorer/icons/od.png">OneDrive
-						</a>
-						<a class="check">
-							<span
-								style="background-color: #2983cc;width:4px;height: 19px;border-radius: 10px;margin-left: -12px;margin-right: 8px;margin-top: 1px;"></span>
-							<img src="apps/explorer/icons/thispc.png">此电脑
-						</a>
-						<a>
-							<img src="apps/explorer/icons/rb.png">回收站
-						</a>
+						<a><img src="apps/icons/explorer/qa.png">快速访问</a>
+						<a><img src="apps/icons/explorer/od.png">OneDrive</a>
+						<a class="check"><span
+							style="background-color: #2983cc;width:4px;height: 19px;border-radius: 10px;margin-left: -12px;margin-right: 8px;margin-top: 1px;"></span>
+							<img src="apps/icons/explorer/thispc.png">此电脑</a>
+						<a><img src="apps/icons/explorer/rb.png">回收站</a>
 					</list>
 				</div>
 				<div class="card tags">
@@ -383,30 +354,30 @@
 			</div>
 			<div class="main">
 				<div class="tool">
-					<a class="a b t"><img src="apps/explorer/icons/tool-new.png">新建</a><div class="hr"></div>
-					<a class="a b"><img src="apps/explorer/icons/tool-cut.png"></a>
-					<a class="a b"><img src="apps/explorer/icons/tool-copy.png"></a>
-					<a class="a b"><img src="apps/explorer/icons/tool-paste.png"></a>
-					<a class="a b"><img src="apps/explorer/icons/tool-rename.png"></a><div class="hr"></div>
-					<a class="a b t"><img src="apps/explorer/icons/tool-sort.png">排序方式</a>
-					<a class="a b t"><img src="apps/explorer/icons/tool-view.png">布局</a>
+					<a class="a b t"><img src="apps/icons/explorer/tool-new.png">新建</a><div class="hr"></div>
+					<a class="a b"><img src="apps/icons/explorer/tool-cut.png"></a>
+					<a class="a b"><img src="apps/icons/explorer/tool-copy.png"></a>
+					<a class="a b"><img src="apps/icons/explorer/tool-paste.png"></a>
+					<a class="a b"><img src="apps/icons/explorer/tool-rename.png"></a><div class="hr"></div>
+					<a class="a b t"><img src="apps/icons/explorer/tool-sort.png">排序方式</a>
+					<a class="a b t"><img src="apps/icons/explorer/tool-view.png">布局</a>
 				</div>
 				<div class="content">
 					<div class="tool">
 						<a class="a btn btn-icon"><i class="bi bi-arrow-left"></i></a>
 						<a class="a btn btn-icon"><i class="bi bi-arrow-right"></i></a>
 						<a class="a btn btn-icon"><i class="bi bi-arrow-up"></i></a>
-						<p class="tit"><img src="apps/explorer/icons/thispc.png">此电脑</p>
+						<p class="tit"><img src="apps/icons/explorer/thispc.png">此电脑</p>
 						<div class="search">
 							<input type="text" class="input" placeholder="在这里输入你要搜索的内容">
 							<input-before class="bi bi-search"></input-before>
 						</div>
 					</div>
 					<p class="title">此电脑</p>
-					<p class="class"><img src="apps/explorer/icons/disk.png"> 设备和驱动器</p>
+					<p class="class"><img src="apps/icons/explorer/disk.png"> 设备和驱动器</p>
 					<div class="group">
 						<a class="a item">
-							<img src="apps/explorer/icons/diskwin.png">
+							<img src="apps/icons/explorer/diskwin.png">
 							<div>
 								<p class="name">本地磁盘 (C:)</p>
 								<div class="bar">
@@ -416,7 +387,7 @@
 							</div>
 						</a>
 						<a class="a item">
-							<img src="apps/explorer/icons/disk.png">
+							<img src="apps/icons/explorer/disk.png">
 							<div>
 								<p class="name">本地磁盘 (D:)</p>
 								<div class="bar">
@@ -435,21 +406,15 @@
 			<img src="icon/calc.png" class="icon">
 			<p>计算器</p>
 			<div>
-				<a class="a wbtg red" onclick="hidewin('calc')">
-					<i class="bi bi-x-lg"></i>
-					<a class="a wbtg max" style="pointer-events: none;color: #aaa;">
-						<i class="bi bi-app"></i>
-					</a>
-					<a class="a wbtg">
-						<i class="bi bi-dash-lg"></i>
-					</a>
-				</a>
+				<a class="a wbtg red" onclick="hidewin('calc')"><i class="bi bi-x-lg"></i></a>
+				<a class="a wbtg max" style="pointer-events: none;color: #aaa;"><i class="bi bi-app"></i></a>
+				<a class="a wbtg" onclick="minwin('calc')"><i class="bi bi-dash-lg"></i></a>
 			</div>
 		</div>
 		<div class="content" id="win-calc">
 			<input id="calc-input" value="">
 			<div class="keyb">
-				<a class="a b" onClick="pe('calc-input').value*=document.getElementById('calc-input').value">𝑥²</a>
+				<a class="a b" onClick="document.getElementById('calc-input').value*=document.getElementById('calc-input').value">𝑥²</a>
 				<a class="a b" onClick="document.getElementById('calc-input').value=Math.sqrt(document.getElementById('calc-input').value)">√𝑥</a>
 				<a class="a b" onClick="document.getElementById('calc-input').value=''">C</a>
 				<a class="a b" onClick="document.getElementById('calc-input').value+='+'">+</a>
@@ -477,22 +442,16 @@
 			<img src="icon/about.png" class="icon">
 			<p>关于 Windows12 网页版</p>
 			<div>
-				<a class="a wbtg red" onclick="hidewin('about')">
-					<i class="bi bi-x-lg"></i>
-					<a class="a wbtg max" onclick="maxwin('about')">
-						<i class="bi bi-app"></i>
-					</a>
-					<a class="a wbtg">
-						<i class="bi bi-dash-lg"></i>
-					</a>
-				</a>
+				<a class="a wbtg red" onclick="hidewin('about')"><i class="bi bi-x-lg"></i></a>
+				<a class="a wbtg max" onclick="maxwin('about')"><i class="bi bi-app"></i></a>
+				<a class="a wbtg" onclick="minwin('about')"><i class="bi bi-dash-lg"></i></a>
 			</div>
 		</div>
 		<div class="content" id="win-about">
 			<div class="menu">
 				<list>
-					<a onclick="$('#win-about>.about').show(200);$('#win-about>.update').hide(200);">简介</a>
-					<a onclick="$('#win-about>.update').show(200);$('#win-about>.about').hide(200);">更新记录</a>
+					<a onclick="$('#win-about>.about').show(200);$('#win-about>.update').hide(200);"><img src="apps/icons/about/info.svg" height="17px" width="19px">简介</a>
+					<a onclick="$('#win-about>.update').show(200);$('#win-about>.about').hide(200);"><img src="apps/icons/about/update.svg" height="20px" width="18px">更新记录</a>
 				</list>
 			</div>
 			<div class="cnt about">
@@ -516,6 +475,15 @@
 			<div class="cnt update" style="display: none;">
 				<h1 class="tit"><span></span>更新记录</h1>
 				<div style="margin-left: 20px;">
+					<details><summary><span>v1.1.0</span> 增加最小化功能,图标美化</summary>
+						<p>&emsp;&emsp;-新增最小化窗口功能<br>
+						&emsp;&emsp;-图标部分美化<br>
+						&emsp;&emsp;-开始、搜索按钮点击动画美化<br>
+						&emsp;&emsp;-修复计算器 "𝑥²" 键无效的问题<br>
+						&emsp;&emsp;-修复窗口打开并最大化后最小化不正常的问题<br>
+						&emsp;&emsp;-修复多次打开应用任务栏显示错误的问题<br>
+						&emsp;&emsp;-简化js关于拖动窗口的代码</p>
+					</details>
 					<details><summary><span>v1.0.1</span> Bug和一些错别字</summary>
 						<p>&emsp;&emsp;上传了才发现有 Bug 😅</p>
 					</details>

desktop.js

@@ -1,13 +1,16 @@
 function showwin(name) {
+    if ($('#taskbar>.' + name).length != 0) return;
     $('.window.' + name).addClass('show-begin');
     $('#taskbar').attr('count', Number($('#taskbar').attr('count')) + 1)
-    $('#taskbar').html($('#taskbar').html() + '<a class="' + name + '"><img src="icon/' + name + '.png"></a>');
+    $('#taskbar').html(`${$('#taskbar').html()}<a class="${name}" onclick="minwin(\'${name}\')"><img src="icon/${name}.png"></a>`);
     if ($('#taskbar').attr('count') == '1') $('#taskbar').show();
     setTimeout(() => { $('.window.' + name).addClass('show'); }, 0);
     setTimeout(() => { $('.window.' + name).addClass('notrans'); }, 200);
+    $('.window.' + name).attr('style', `top: 10%;left: 15%;`);
 }
 function hidewin(name) {
     $('.window.' + name).removeClass('notrans');
+    $('.window.' + name).removeClass('max');
     $('.window.' + name).removeClass('show');
     $('#taskbar').attr('count', Number($('#taskbar').attr('count')) - 1)
     $('#taskbar>.' + name).remove();
@@ -17,75 +20,60 @@ function hidewin(name) {
 function maxwin(name) {
     if ($('.window.' + name).hasClass('max')) {
         $('.window.' + name).removeClass('max');
-        setTimeout(() => { $('.window.' + name).addClass('notrans'); }, 200);
         $('.window.' + name + '>.titbar>div>.wbtg.max').html('<i class="bi bi-app"></i>');
+        setTimeout(() => { $('.window.' + name).addClass('notrans'); }, 200);
+        $('.window.' + name).attr('style', `top: 10%;left: 15%;`);
     } else {
         $('.window.' + name).removeClass('notrans');
         $('.window.' + name).addClass('max');
         $('.window.' + name + '>.titbar>div>.wbtg.max').html('<svg version="1.1" width="12" height="12" viewBox="0,0,37.65105,35.84556" style="margin-top:4px;"><g transform="translate(-221.17804,-161.33903)"><g data-paper-data="{&quot;isPaintingLayer&quot;:true}" fill="none" fill-rule="nonzero" stroke="#000000" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" style="mix-blend-mode: normal"><path d="M224.68734,195.6846c-2.07955,-2.10903 -2.00902,-6.3576 -2.00902,-6.3576l0,-13.72831c0,0 -0.23986,-1.64534 2.00902,-4.69202c1.97975,-2.68208 4.91067,-2.00902 4.91067,-2.00902h14.06315c0,0 3.77086,-0.23314 5.80411,1.67418c2.03325,1.90732 1.33935,5.02685 1.33935,5.02685v13.39347c0,0 0.74377,4.01543 -1.33935,6.3576c-2.08312,2.34217 -5.80411,1.67418 -5.80411,1.67418h-13.39347c0,0 -3.50079,0.76968 -5.58035,-1.33935z"/><path d="M229.7952,162.85325h16.06111c0,0 5.96092,-0.36854 9.17505,2.64653c3.21412,3.01506 2.11723,7.94638 2.11723,7.94638v18.55642"/></g></g></svg>')
     }
 }
-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");
+function minwin(name) {
+    if ($('.window.' + name).hasClass('min')) {
+        $('.window.' + name).addClass('show-begin');
+        setTimeout(() => {
+            $('#taskbar>.' + name).removeClass('min');
+            $('.window.' + name).removeClass('min');
+            $('.window.' + name).addClass('show');
+            if ($('.window.' + name).hasClass('min-max')) $('.window.' + name).addClass('max');
+            $('.window.' + name).removeClass('min-max');
+        }, 0);
+        setTimeout(() => {
+            if (!$('.window.' + name).hasClass('max')) $('.window.' + name).addClass('notrans');
+        }, 200);
+    } else {
+        if ($('.window.' + name).hasClass('max')) $('.window.' + name).addClass('min-max');
+        $('.window.' + name).removeClass('max');
+        $('#taskbar>.' + name).addClass('min');
+        $('.window.' + name).addClass('min');
+        $('.window.' + name).removeClass('notrans');
+        $('.window.' + name).removeClass('show');
+        setTimeout(() => { $('.window.' + name).removeClass('show-begin'); }, 200);
+    }
 }
-const main = document.getElementsByTagName('html')[0];
-const setting_tit = document.querySelector('.window.setting>.titbar');
-const setting_win = document.querySelector('.window.setting');
+function hide_startmenu(params) {
+    $('#start-menu').removeClass('show');
+    $('#start-btn').removeClass('show');
+    setTimeout(() => { $('#start-menu').removeClass('show-begin'); }, 200);
+}
+const page = document.getElementsByTagName('html')[0];
+const titbars = document.querySelectorAll('.window>.titbar');
+const wins = document.querySelectorAll('.window');
 let deltaLeft = 0, deltaTop = 0;
-function setting_move(e) {
-    setting_win.setAttribute('style', `left:${e.clientX - deltaLeft}px;top:${e.clientY - deltaTop}px`)
+for (let i = 0; i < wins.length; i++) {
+    const win = wins[i];
+    const titbar = titbars[i];
+    function win_move(e) {
+        win.setAttribute('style', `left:${e.clientX - deltaLeft}px;top:${e.clientY - deltaTop}px`)
+    }
+    titbar.addEventListener('mousedown', (e) => {
+        deltaLeft = e.clientX - win.offsetLeft;
+        deltaTop = e.clientY - win.offsetTop;
+        page.addEventListener('mousemove', win_move);
+    })
+    page.addEventListener('mouseup', () => {
+        page.removeEventListener('mousemove', win_move);
+    })
 }
-setting_tit.addEventListener('mousedown', function (e) {
-    deltaLeft = e.clientX - setting_win.offsetLeft;
-    deltaTop = e.clientY - setting_win.offsetTop;
-    main.addEventListener('mousemove', setting_move)
-})
-main.addEventListener('mouseup', function (e) {
-    main.removeEventListener('mousemove', setting_move);
-})
-const explorer_tit = document.querySelector('.window.explorer>.titbar');
-const explorer_win = document.querySelector('.window.explorer');
-function explorer_move(e) {
-    explorer_win.setAttribute('style', `left:${e.clientX - deltaLeft}px;top:${e.clientY - deltaTop}px`)
-}
-explorer_tit.addEventListener('mousedown', function (e) {
-    deltaLeft = e.clientX - explorer_win.offsetLeft;
-    deltaTop = e.clientY - explorer_win.offsetTop;
-    main.addEventListener('mousemove', explorer_move)
-})
-main.addEventListener('mouseup', function (e) {
-    main.removeEventListener('mousemove', explorer_move);
-})
-const calc_tit = document.querySelector('.window.calc>.titbar');
-const calc_win = document.querySelector('.window.calc');
-function calc_move(e) {
-    calc_win.setAttribute('style', `left:${e.clientX - deltaLeft}px;top:${e.clientY - deltaTop}px`)
-}
-calc_tit.addEventListener('mousedown', function (e) {
-    deltaLeft = e.clientX - calc_win.offsetLeft;
-    deltaTop = e.clientY - calc_win.offsetTop;
-    main.addEventListener('mousemove', calc_move)
-})
-main.addEventListener('mouseup', function (e) {
-    main.removeEventListener('mousemove', calc_move);
-})
-const about_tit = document.querySelector('.window.about>.titbar');
-const about_win = document.querySelector('.window.about');
-function about_move(e) {
-    about_win.setAttribute('style', `left:${e.clientX - deltaLeft}px;top:${e.clientY - deltaTop}px`)
-}
-about_tit.addEventListener('mousedown', function (e) {
-    deltaLeft = e.clientX - about_win.offsetLeft;
-    deltaTop = e.clientY - about_win.offsetTop;
-    main.addEventListener('mousemove', about_move)
-})
-main.addEventListener('mouseup', function (e) {
-    main.removeEventListener('mousemove', about_move);
-})
 showwin('about');