v3.9.0 新增主题色设置功能，布局优化

更新部分来源 @User782Tec 的pr #54
-新增系统主题色设置功能
-记事本字体选择布局优化
-"关于"应用的改进
-细节优化和修复

apps/style/about.css

@@ -34,12 +34,14 @@
     border-radius: 10px;
     width: 6px;
     margin: 5px 5px;
-    transition: 100ms;
-    opacity: 0;
+    transition: 200ms;
+    /* opacity: 0; */
+    transform: scaleY(0);
+    transform-origin: top;
 }
 
 #win-about>.cnt .tit:hover>span{
-    opacity: 1;
+    transform: none;
 }
 
 #win-about>.update>div>details{

apps/style/fonts.css

@@ -1,6 +1,3 @@
-/* 这里我对ui做了一些调整 */
-/* 我注意到你的布局居中都是用margin做的，可以在dis:flex的块中加 align-content: space-around; 居中 */
-/* 这个flex-direction: column;的不同设备的兼容性不是很好，可能错位，可以写明确一点来布局 */
 #win-notepad-font>.row {
     display: flex;
     justify-content: space-around;

apps/style/setting.css

@@ -3,7 +3,7 @@
     src: url(../icons/setting/icons.woff2) format("woff2")
 }
 
-#win-setting>.page>.title {
+#win-setting>.page>.cnt>.title {
     font-size: 35px;
     margin: 0;
 }
@@ -27,7 +27,7 @@ html {
 }
 
 #win-setting>.page {
-    flex-grow:1
+    flex-grow: 1
 }
 
 
@@ -53,13 +53,18 @@ html {
     font-size: 25px;
     margin-bottom: -7px;
 }
-#win-setting>.menu>.user>div>p:last-child{
-    overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
+
+#win-setting>.menu>.user>div>p:last-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 #win-setting>.menu>.user>div {
     padding: 0px 0 0 10px;
-    overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 #win-setting>.menu>.user>svg {
@@ -88,6 +93,11 @@ html {
     margin-bottom: 3px;
 }
 
+#win-setting>.menu>list>a:not(.enable) {
+    transform: none !important;
+    filter: contrast(0.6) brightness(0.8) opacity(0.3);
+}
+
 #win-setting>.menu>list>a>p {
     margin: 5px 7px;
 }
@@ -99,7 +109,28 @@ html {
 }
 
 #win-setting>.menu>list>a.check {
-    background-color: var(--hover)!important;
+    background-color: var(--hover) !important;
+}
+
+#win-setting>.page {
+    overflow: hidden;
+}
+
+#win-setting>.page>.cnt {
+    overflow: auto;
+    /* height: 100%; */
+    transform: translate(0, 50%);
+    opacity: 0;
+    height: 0;
+    transition: transform 300ms cubic-bezier(0,0,0,1), opacity 500ms 100ms;
+}
+
+#win-setting>.page>.cnt.show {
+    overflow: auto;
+    height: 100%;
+    transform: none;
+    opacity: 1;
+    display: block;
 }
 
 .setting-list {
@@ -114,7 +145,7 @@ html {
 .setting-list>* {
     width: 100%;
     color: var(--text);
-    background: radial-gradient(circle, var(--card),var(--card));
+    background: radial-gradient(circle, var(--card), var(--card));
     margin-bottom: 5px;
     border-radius: 10px;
     border: 2px solid #7f7f7f30;
@@ -122,54 +153,108 @@ html {
     display: flex;
     padding: 10px 15px;
     /* transition: 100ms; */
-    box-shadow: 3px 3px 6px var(--sd);
+    box-shadow: 2px 2px 3px var(--sd);
     transition: transform 300ms cubic-bezier(0.14, 1.02, 0.17, 0.03) !important;
 }
 
-.setting-list>*:hover {
+.setting-list>a:hover {
     text-decoration: none;
     background-color: var(--hover);
 }
 
-.setting-list>*:active {
+.setting-list>a:active {
     transform: scale(0.98);
     /* filter: blur(0.5px); */
 }
 
+.setting-list>a.dp.show {
+    border-bottom: none;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    margin-bottom: 1px;
+    box-shadow: 2px 1px 3px var(--sd);
+}
 
-.setting-list>a>icon {
+.setting-list>a.dp>.bi::before {
+    transition: 200ms;
+}
+
+.setting-list>a.dp.show>.bi::before {
+    transform: rotate(-180deg);
+}
+
+.setting-list>div.dp {
+    border-top: none;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    transform: scaleY(0);
+    transform-origin: top;
+    transition: 200ms !important;
+    display: block;
+}
+
+.setting-list>div.dp.show {
+    transform: scaleY(1);
+}
+
+div.app-color .color {
+    width: 25px;
+    height: 25px;
+    border-radius: 8px;
+    margin: 5px 0 0 5px;
+    outline: none;
+    border: none;
+    padding: 0;
+    transition: 200ms;
+}
+
+div.app-color .act.color:active{
+    transform: scale(0.8);
+}
+
+div.app-color input[type=color] {
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    border: none;
+    padding: 0;
+    outline: none;
+    margin: 0;
+}
+
+.setting-list>*>icon {
     font-family: SettingsIcons;
     font-size: 20px;
     margin: 10px 20px 0 5px;
-    background-image:linear-gradient(100deg, var(--theme-1), var(--theme-2)); 
-    -webkit-background-clip:text; 
-    -webkit-text-fill-color:transparent;
+    background-image: linear-gradient(100deg, var(--theme-1), var(--theme-2));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
     filter: saturate(130%) brightness(1.1);
 }
 
-.setting-list>a>icon.b {
+.setting-list>*>icon.b {
     font-family: bootstrap-icons;
 }
 
-.setting-list>a>div>p:first-child {
+.setting-list>*>div>p:first-child {
     font-size: 20px;
     margin: 0 0 0 0;
 }
 
-.setting-list>a>div>p:last-child {
+.setting-list>*>div>p:last-child {
     font-size: 10px;
     color: #7f7f7f;
     margin-bottom: 0px;
 }
 
-.setting-list>a>.bi {
+.setting-list>*>.bi {
     flex-grow: 1;
     margin-top: 15px;
     color: #7f7f7f;
     font-size: 20px;
 }
 
-.setting-list>a>.bi::before {
+.setting-list>*>.bi::before {
     position: relative;
     float: right;
     right: 5px;

desktop.css

@@ -1,7 +1,7 @@
 @import "./bootstrap-icons.css";
 @import "./base.css";
 
-/* :root {
+:root {
     --text: #000;
     --bg: #ffffff;
     --bg30: #ffffff30;
@@ -13,7 +13,8 @@
     --hover-half: #ffffff50;
     --hover-b: #00000017;
     --bggrey: #ddd;
-    --bgul: url('newyear-light.png');
+    --fill:#d3d3d370;
+    --bgul: url('bg.svg');
     --mm: #ffffffc0;
     --cm: #fafafabb;
     --bar: #efefef37;
@@ -22,8 +23,8 @@
     --theme-1:#ad6eca;
     --theme-2:#3b91d8;
     --href:#2983cc;
-} */
-/* 
+}
+
 :root.dark {
     --text: #ddd;
     --bg: #000000;
@@ -32,20 +33,19 @@
     --bg70: #00000070;
     --sd: #00000070;
     --card: #72727240;
-    --hover: #ffffff40;
+    --hover: #aaaaaa40;
     --hover-half: #ffffff20;
     --hover-b: #ffffff30;
     --bggrey: #444;
-    --bgul: url('newyear-dark.png');
+    --fill:#54545470;
+    --bgul: url('bg-dark.svg');
     --mm: #ffffff50;
     --cm: #252525bb;
     --bar: #7272722a;
     --hr:#00000050;
     --unfoc:#333;
-} */
-
-/* 新年特别版 */
-
+} 
+/*
 :root {
     --text: #000;
     --bg: #ffffff;
@@ -58,6 +58,7 @@
     --hover-half: #ff808050;
     --hover-b: #74000030;
     --bggrey: #ddd;
+    --fill:#d3d3d370;
     --bgul: url('newyear-light.png');
     --mm: #ff6464c0;
     --cm: #fafafabb;
@@ -81,15 +82,16 @@
     --hover-half: #ff616120;
     --hover-b: #ff616130;
     --bggrey: #444;
+    --fill:#54545470;
     --bgul: url('newyear-dark.png');
     --mm: #ff5b5b50;
     --cm: #252525bb;
     --bar: #7272722a;
     --hr:#00000050;
     --unfoc:#3a1a1a;
-}
+} */
 
-#start-btn>.ico{
+/* #start-btn>.ico{
     filter: var(--theme-f);
 }
 
@@ -111,9 +113,8 @@ img[src="icon/about.png"]{
 
 #win-setting>.menu>.user>svg{
     filter: var(--theme-f);
-}
+} */
 
-/* end */
 
 body,
 p {
@@ -199,7 +200,8 @@ list>a,
 #win-calc>.keyb>.b,
 #datebox>.cont>.body>p,
 .wg>.titbar>.more,
-.wg.calc>.content>.b {
+.wg.calc>.content>.b,
+.button {
     transition: transform 400ms cubic-bezier(0.14, 1.02, 0.17, 0.03) !important;
 }
 
@@ -209,7 +211,8 @@ list>a:active,
 #win-calc>.keyb>.b:active,
 #datebox>.cont>.body>p:active,
 .wg>.titbar>.more:active,
-.wg.calc>.content>.b:active {
+.wg.calc>.content>.b:active,
+.button:active {
     transform: scale(0.93);
     filter: blur(0.5px);
     /* transition: transform 500ms cubic-bezier(0.24, 0.86, 0.36, 0.44) !important; */
@@ -1394,7 +1397,7 @@ input-before {
     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(100deg, #ad6ecaee, #3b91d8ee);
+    background-image: linear-gradient(var(--bg), var(--bg)), linear-gradient(90deg, var(--theme-1), var(--theme-2));
     border-bottom-color: transparent;
 }
 
@@ -1435,6 +1438,21 @@ input-before {
     padding: 6px 10px;
 }
 
+.button{
+    background-color: #9f9f9f40;
+    border-radius: 10px;
+    padding: 5px 10px;
+    cursor: pointer;
+}
+
+.button:hover{
+    filter: brightness(1.2);
+}
+
+.button:active{
+    filter: brightness(1.2) blur(0.5px);
+}
+
 #cm {
     display: none;
     position: absolute;
@@ -1446,8 +1464,9 @@ input-before {
     backdrop-filter: blur(25px) saturate(2);
     min-width: 200px;
     overflow: hidden;
-    padding: 0 4px 0 0;
+    padding: 0 4px;
     max-height: 0;
+    width: max-content;
     transition: max-height 200ms ease-in-out, top 100ms, left 100ms, padding 200ms ease-in-out;
 }
 
@@ -1931,14 +1950,15 @@ list>.text:hover {
 }
 
 #window-fill {
-    background-color: var(--bg50);
-    backdrop-filter: blur(60px);
+    background-color: var(--fill);
+    backdrop-filter: blur(25px);
     display: none;
     position: fixed;
     transition: all 200ms;
     margin: 10px;
-    border-radius: 20px;
-    border: 4px solid var(--bg30);
+    border-radius: 10px;
+    box-shadow: 0 0 5px 5px var(--sd);
+    /* border: 4px solid var(--bg30); */
 }
 
 #window-fill.top {

desktop.html

@@ -264,16 +264,16 @@
 				<p style="color: #7f7f7f;margin-right: 5px;margin-top: 2px;">注意: 新闻内容均不属实 </p>
 			</div>
 			<div class="content">
-				<div class="card" style="grid-column: 1/6;grid-row: 1/3;color: #fff;background: var(--bgul);background-position:0px -70px;background-size: 170%;">
-					<p class="tit" style="font-size: 22px;margin: 110px 0 0 30px;text-shadow: 0 0 8px #000;">Windows12 网页版春节特别版 发布</p>
-					<a class="a" style="margin: 5px 0 0 250px;font-size: 17px;color: rgb(255, 156, 156);text-shadow: 0 0 3px #000;" onclick="hide_widgets();
+				<div class="card" style="grid-column: 1/6;grid-row: 1/3;color: #fff;background: var(--bgul);background-position:-50px -370px;background-size: 150%;">
+					<p class="tit" style="font-size: 22px;margin: 110px 0 0 30px;text-shadow: 0 0 8px #000;">Windows12 v3.9.0 发布</p>
+					<a class="a" style="margin: 5px 0 0 250px;font-size: 17px;color: #9dd0fb;text-shadow: 0 0 3px #000;" onclick="hide_widgets();
 					openapp('about');if($('.window.about').hasClass('min'))minwin('about');
 					$('#win-about>.update').show(200);$('#win-about>.about').hide();
 					$('#win-about>.update>div>details:first-child').attr('open','open')">详细信息 ></a>
 				</div>
 				<div class="card" style="grid-column: 3/6;grid-row: 7/9;background:url(img/win13.jpg) center;background-size: cover;">
 					<p class="tit" style="font-size: 19px;margin: 50px 0 0 10px;color: #fff;">Windows13 即将发布，官方透露: 将自带 Macos 子系统</p>
-					<a class="a" style="margin: 5px 0 0 130px;font-size: 17px;color: rgb(238, 108, 108);text-shadow: 0 0 3px #000;">详细信息 ></a>
+					<a class="a" style="margin: 5px 0 0 130px;font-size: 17px;color: #9dd0fb;text-shadow: 0 0 3px #000;">详细信息 ></a>
 				</div>
 				<div class="card" style="grid-column: 4/6;grid-row: 3/5;background:linear-gradient(#00000000,var(--bg) 70%),url(img/win11.jpg) center;background-size: cover;">
 					<p class="tit" style="font-size: 19px;margin: 100px 0 0 10px;">Windows11 将于下周停止支持</p>
@@ -281,7 +281,7 @@
 				</div>
 				<div class="card" style="grid-column: 1/3;grid-row: 5/8;background:linear-gradient(#00000000,#111 80%),url(img/corsiri.svg) bottom;background-size: 200%;">
 					<p class="tit" style="font-size: 19px;margin: 170px 0 0px 10px;color: #fff;">2029年,微软终重拾Cortana 微软员工透露:将与Siri整合</p>
-					<a class="a" style="margin: 0 0 0 80px;font-size: 17px;color: rgb(255, 97, 97);">详细信息 ></a>
+					<a class="a" style="margin: 0 0 0 80px;font-size: 17px;color: #9dd0fb;">详细信息 ></a>
 				</div>
 				<div class="card" style="grid-column: 3/6;grid-row: 5/7;background:linear-gradient(#00000000 0 30%,var(--bg) 70%),url(img/mc.jpg) bottom;background-size: cover;">
 					<p class="tit" style="font-size: 19px;margin: 100px 0 -20px 10px;">今日凌晨,Minecraft把代理权交给中国航天员谭景元,网易败下阵来了?</p>
@@ -293,7 +293,7 @@
 				</div>
 				<div class="card" style="grid-column: 1/3;grid-row: 8/10;background:#171b22;">
 					<p class="tit" style="font-size: 19px;margin: 50px 0 0 10px;color: #fff;">想给新闻增加更多奇思妙想? <br>快在github上来提交吧</p>
-					<a class="a" title="https://github.com/tjy-gitnub/win12/issues" style="margin: 10px 0 0 70px;font-size: 17px;color: rgb(255, 115, 115);" onclick="
+					<a class="a" title="https://github.com/tjy-gitnub/win12/issues" style="margin: 10px 0 0 70px;font-size: 17px;color: #9dd0fb" onclick="
 					window.open('https://github.com/tjy-gitnub/win12/issues','_blank');">提交issues ></a>
 				</div>
 			</div>
@@ -510,12 +510,10 @@
 				<input type="text" class="input" placeholder="查找设置" style="padding-left: 30px;">
 				<input-before class="bi bi-search"></input-before>
 				<list>
-					<a class="check"><span
-						style="background-image: linear-gradient(180deg, var(--theme-1), var(--theme-2));border-radius: 10px;position: relative;left: -10px;top:1px;height: 20px;margin-right: -4px;">
-						&nbsp;</span><img src="apps/icons/setting/system.png">系统</a>
+					<a class="enable system check" onclick="apps.setting.page('system')"><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 class="enable appearance" onclick="apps.setting.page('appearance')"><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>
@@ -525,33 +523,57 @@
 					<a><img src="apps/icons/setting/update.png">Windows 更新</a>
 				</list>
 			</div>
-			<div class="page" style="overflow: auto;">
-				<p class="title">系统</p>
-				<div style="display: flex;">
-					<p class="s-icon" style="font-size: 70px;margin: -8px 10px 0px 20px;"></p>
-					<div>
-						<p style="font-size: 28px;text-overflow: ellipsis;white-space: nowrap;">Desktop-PingGai</p>
-						<p style="color: #7f7f7f;margin:-8px 0 -5px 0;">瓶盖</p>
-						<a style="color: #2983cc;text-decoration: underline;">重命名</a>
+			<div class="page">
+				<div class="cnt system show">
+					<p class="title">系统</p>
+					<div style="display: flex;">
+						<p class="s-icon" style="font-size: 70px;margin: -8px 10px 0px 20px;"></p>
+						<div>
+							<p style="font-size: 28px;text-overflow: ellipsis;white-space: nowrap;">Desktop-PingGai</p>
+							<p style="color: #7f7f7f;margin:-8px 0 -5px 0;">瓶盖</p>
+							<a style="color: #2983cc;text-decoration: underline;">重命名</a>
+						</div>
+					</div>
+					<div class="setting-list">
+						<a><icon></icon><div><p>显示</p><p>显示器、亮度、夜间模式、显示描述</p></div><i class="bi bi-chevron-right"></i></a>
+						<a><icon></icon><div><p>声音</p><p>声音级别、输入、输出、声音设备</p></div><i class="bi bi-chevron-right"></i></a>
+						<a><icon></icon><div><p>通知</p><p>来自系统和应用的警报</p></div><i class="bi bi-chevron-right"></i></a>
+						<a><icon></icon><div><p>专注助手</p><p>通知、自动规则</p></div><i class="bi bi-chevron-right"></i></a>
+						<a><icon class="b">&#xF186;</icon><div><p>电源</p><p>睡眠、电池使用情况、节电模式</p></div><i class="bi bi-chevron-right"></i></a>
+						<a><icon></icon><div><p>存储</p><p>存储空间、驱动器、配置规则</p></div><i class="bi bi-chevron-right"></i></a>
+						<a><icon></icon><div><p>多任务处理</p><p>贴靠窗口、桌面、任务切换</p></div><i class="bi bi-chevron-right"></i></a>
+						<a><icon></icon><div><p>激活</p><p>激活状态、订阅、产品密钥</p></div><i class="bi bi-chevron-right"></i></a>
+						<a><icon></icon><div><p>疑难解答</p><p>建议的疑难解答、首选项和历史记录</p></div><i class="bi bi-chevron-right"></i></a>
+						<a><icon></icon><div><p>恢复</p><p>重置、高级启动、返回</p></div><i class="bi bi-chevron-right"></i></a>
+						<a><icon></icon><div><p>投影到此电脑</p><p>权限、配对 PIN、可发现性</p></div><i class="bi bi-chevron-right"></i></a>
+						<a><icon></icon><div><p>远程桌面</p><p>远程桌面用户、连接权限</p></div><i class="bi bi-chevron-right"></i></a>
+						<a><icon></icon><div><p>剪贴板</p><p>剪贴和复制历史记录、同步、清除</p></div><i class="bi bi-chevron-right"></i></a>
+						<a><icon></icon><div><p>关于</p><p>设备规格、重命名电脑、Windows 规格</p></div><i class="bi bi-chevron-right"></i></a>
 					</div>
 				</div>
-				<div class="setting-list">
-					<a><icon></icon><div><p>显示</p><p>显示器、亮度、夜间模式、显示描述</p></div><i class="bi bi-chevron-right"></i></a>
-					<a><icon></icon><div><p>声音</p><p>声音级别、输入、输出、声音设备</p></div><i class="bi bi-chevron-right"></i></a>
-					<a><icon></icon><div><p>通知</p><p>来自系统和应用的警报</p></div><i class="bi bi-chevron-right"></i></a>
-					<a><icon></icon><div><p>专注助手</p><p>通知、自动规则</p></div><i class="bi bi-chevron-right"></i></a>
-					<a><icon class="b">&#xF186;</icon><div><p>电源</p><p>睡眠、电池使用情况、节电模式</p></div><i class="bi bi-chevron-right"></i></a>
-					<a><icon></icon><div><p>存储</p><p>存储空间、驱动器、配置规则</p></div><i class="bi bi-chevron-right"></i></a>
-					<a><icon></icon><div><p>多任务处理</p><p>贴靠窗口、桌面、任务切换</p></div><i class="bi bi-chevron-right"></i></a>
-					<a><icon></icon><div><p>激活</p><p>激活状态、订阅、产品密钥</p></div><i class="bi bi-chevron-right"></i></a>
-					<a><icon></icon><div><p>疑难解答</p><p>建议的疑难解答、首选项和历史记录</p></div><i class="bi bi-chevron-right"></i></a>
-					<a><icon></icon><div><p>恢复</p><p>重置、高级启动、返回</p></div><i class="bi bi-chevron-right"></i></a>
-					<a><icon></icon><div><p>投影到此电脑</p><p>权限、配对 PIN、可发现性</p></div><i class="bi bi-chevron-right"></i></a>
-					<a><icon></icon><div><p>远程桌面</p><p>远程桌面用户、连接权限</p></div><i class="bi bi-chevron-right"></i></a>
-					<a><icon></icon><div><p>剪贴板</p><p>剪贴和复制历史记录、同步、清除</p></div><i class="bi bi-chevron-right"></i></a>
-					<a><icon></icon><div><p>关于</p><p>设备规格、重命名电脑、Windows 规格</p></div><i class="bi bi-chevron-right"></i></a>
+				<div class="cnt appearance">
+					<p class="title">个性化</p>
+					<div class="setting-list" style="margin-top: 10px;">
+						<a class="dp app-color" onclick="$('.dp.app-color').toggleClass('show');"><icon></icon><div><p>颜色</p><p>设置 Windows 的主题色</p></div><i class="bi bi-chevron-down"></i></a>
+						<div class="dp app-color">
+							<p>当前颜色</p>
+							<div class="color" style="background: linear-gradient(120deg,var(--theme-1),var(--theme-2));"></div>
+							<br>
+							<p>自定义颜色</p>
+							<div style="display: flex;">
+								<div class="a act color theme1" style="background: #47acff" onclick="$('div.app-color>div>input.theme1inp')[0].click();"></div>
+								<input type="color" class="theme1inp" onchange="$('div.app-color>div>.color.theme1').css('background-color',this.value);" value="#47acff">
+								<div style="width: 10px;height: 1px;background-color: var(--text);margin: 17px 5px 0 10px;"></div>
+								<div class="a act color theme2" style="background: #1168ae" onclick="$('div.app-color>div>input.theme2inp')[0].click();"></div>
+								<input type="color" class="theme2inp" onchange="$('div.app-color>div>.color.theme2').css('background-color',this.value);" value="#1168ae">
+								<a class="a button" style="margin-left: 20px;" onclick="$(':root').css('--theme-1',$('div.app-color>div>input.theme1inp').val());
+									$(':root').css('--theme-2',$('div.app-color>div>input.theme2inp').val())">应用</a>
+							</div>
+						</div>
+					</div>
 				</div>
 			</div>
+			
 		</div>
 	</div>
 	<div class="window explorer"  onmousedown="focwin('explorer')" ontouchstart="focwin('explorer')">
@@ -684,33 +706,38 @@
 				<h1 class="tit"><span></span>Windows 12 网页版</h1>
 				<div style="margin-left: 20px;">
 					<h2 class="tit"><span></span>简介</h2>
-					<p>&emsp;&emsp;Windows 12 网页版是一个开源项目, 由谭景元原创, 使用标准网络技术,例如 Html、CSS 和 Javascript, 希望让用户在网络上预先体验 Windows 12。</p>
-					<p>&emsp;&emsp;因为这只是概念版，所以内容可能与 Windows 12 正式版本不一致。</p>
-					<p>&emsp;&emsp;由于这是一个开源项目，你可以在任何媒介以任何形式复制、发行本作品。
-						你还可以对该项目进行修改、转换或以本作品为基础进行创作。
-						但您必须给出适当的署名，您必须提供创作者姓名、作品链接，同时标明是否对此作了修改。您可以用任何合理的方式来署名，但是不得以任何方式暗示许可方认可您或您的使用。</p>
-					<p>&emsp;&emsp;此项目绝不附属于微软,且不应与微软操作系统或产品混淆, 这也不是 Windows365 cloud PC</p>
-					<p>&emsp;&emsp;本项目中微软、Windows和其他示范产品是微软公司的商标</p>
-				</div>
-				<div style="margin-left: 20px;">
-					<h2 class="tit"><span></span>其它</h2>
+					<p>&emsp;&emsp;Windows 12 网页版是一个开源项目, 由谭景元原创, 使用 Html,css,js , 在网络上模拟、创新操作系统</p>
 					<p>&emsp;&emsp;此项目已发布至 Github, <a onclick="window.open('https://github.com/tjy-gitnub/win12','_blank');" title="https://github.com/tjy-gitnub/win12" class="jump">点击此处查看</a></p>
 					<p>&emsp;&emsp;若您对于该项目有任何意见或建议，请在 Github 上<a onclick="window.open('https://github.com/tjy-gitnub/win12/issues','_blank');" title="https://github.com/tjy-gitnub/win12/issues" class="jump">提交 issues</a>, 您的问题会被尽可能快地解决</p>
+					<p>&emsp;&emsp;原创作者谭景元，点击以<a onclick="window.open('https://tjy-gitnub.github.io/','_blank');" title="https://tjy-gitnub.github.io/" class="jump">了解详细</a></p>
+					<h2 class="tit"><span></span>开源说明</h2>
+					<p>&emsp;&emsp;由于这是一个开源项目，你可以在任何媒介以任何形式复制、发行本作品。</p>
+					<p>&emsp;&emsp;你还可以对该项目进行修改、转换或以本作品为基础进行创作。</p>
+					<p>&emsp;&emsp;但您必须给出适当的署名，<strong>您必须提供创作者姓名、作品链接</strong>，同时标明是否对此作了修改。您可以用任何合理的方式来署名，但是不得以<strong>任何方式</strong>暗示许可方认可您或您的使用。</p>
+					<h2 class="tit"><span></span>其它</h2>
+					<p>&emsp;&emsp;此项目基于目前 Windows 版本创造，与微软的 Windows 12 正式版本不一致。</p>
+					<p>&emsp;&emsp;此项目绝不附属于微软,且不应与微软操作系统或产品混淆, 这也不是 Windows365 cloud PC</p>
+					<p>&emsp;&emsp;本项目中微软、Windows和其他示范产品是微软公司的商标</p>
 				</div>
 			</div>
 			<div class="cnt update" style="display: none;">
 				<h1 class="tit"><span></span>更新记录</h1>
 				<div style="margin-left: 20px;">
+					<details><summary><span>v3.9.0</span> 新增主题色设置功能，布局优化</summary>
+						&emsp;&emsp;<i>更新部分来源 @User782Tec 的pr</i><br>
+						&emsp;&emsp;-新增系统主题色设置功能<br>
+						&emsp;&emsp;-记事本字体选择布局优化<br>
+						&emsp;&emsp;-"关于"应用的改进<br>
+						&emsp;&emsp;-细节优化和修复</p>
+					</details>
 					<details><summary><span>v3.8.0</span> 记事本字体，窗口焦点逻辑改善</summary>
-						<p>&emsp;&emsp;<strong style="color: red;">祝大家新的一年万事如意,幸福快乐,心想事成!</strong><br>
-						&emsp;&emsp;<i>非常感谢 @User782Tec 的pr</i><br>
+						&emsp;&emsp;<i>更新主要来源 @User782Tec 的pr</i><br>
 						&emsp;&emsp;-详见<a href="https://github.com/tjy-gitnub/win12/pull/50">pull</a>中的详细<br>
 						&emsp;&emsp;-窗口焦点逻辑改善<br>
 						&emsp;&emsp;-细节优化和修复</p>
 					</details>
 					<details><summary><span>v3.7.0</span> 窗口最大化完善,让颜色更"喜庆"一点</summary>
-						<p>&emsp;&emsp;<strong style="color: red;">祝大家新的一年万事如意,幸福快乐,心想事成!</strong><br>
-						&emsp;&emsp;<i>非常感谢 @User782Tec 的pr</i><br>
+						&emsp;&emsp;<i>更新部分来源 @User782Tec 的pr</i><br>
 						&emsp;&emsp;-增加最大化窗口下拖还原功能<br>
 						&emsp;&emsp;-最大化窗口还原后保留之前的位置<br>
 						&emsp;&emsp;-让系统的色调更"喜庆"一点<br>
@@ -720,7 +747,6 @@
 						&emsp;&emsp;-细节优化和修复</p>
 					</details>
 					<details><summary><span>v3.6.1</span> Windows12新年特别版</summary>
-						<p>&emsp;&emsp;<strong style="color: red;">祝大家新的一年万事如意,幸福快乐,心想事成!</strong><br>
 						&emsp;&emsp;-增加主题色控制功能<br>
 						&emsp;&emsp;-测试新的更新机制<br>
 						&emsp;&emsp;-细节优化和修复</p>

desktop.js

@@ -275,7 +275,15 @@ function hidedp(force = false) {
 // 应用
 let apps = {
     setting: {
-        init: () => { }
+        init: () => { },
+        page:(name)=>{
+            $('#win-setting>.page>.cnt.'+name).scrollTop(0);
+            $('#win-setting>.page>.cnt.show').removeClass('show');
+            $('#win-setting>.page>.cnt.'+name).addClass('show');
+            $('#win-setting>.menu>list>a.check').removeClass('check');
+            $('#win-setting>.menu>list>a.'+name).addClass('check');
+            
+        }
     },
     explorer: {
         init: () => {

sw.js

@@ -22,7 +22,11 @@ let changes=[
   '/desktop.html',
   '/desktop.js',
   '/desktop.css',
-  '/apps/style/notepad.css',
+  '/apps/style/about.css',
+  '/apps/style/fonts.css',
+  '/apps/style/setting.css',
+  '/newyear-dark.png',
+  '/newyear-light.png',
 ]
 // a
 let flag = false;