From 6f6bd71cf146c8b15a4d7e550c2e9617ae15b24b Mon Sep 17 00:00:00 2001 From: tjy-gitnub <2017225905@qq.com> Date: Sat, 28 Jan 2023 22:40:23 +0800 Subject: [PATCH] =?UTF-8?q?v3.9.0=20=E6=96=B0=E5=A2=9E=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E8=89=B2=E8=AE=BE=E7=BD=AE=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=B8=83?= =?UTF-8?q?=E5=B1=80=E4=BC=98=E5=8C=96=20=E6=9B=B4=E6=96=B0=E9=83=A8?= =?UTF-8?q?=E5=88=86=E6=9D=A5=E6=BA=90=20@User782Tec=20=E7=9A=84pr=20#54?= =?UTF-8?q?=20-=E6=96=B0=E5=A2=9E=E7=B3=BB=E7=BB=9F=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E8=89=B2=E8=AE=BE=E7=BD=AE=E5=8A=9F=E8=83=BD=20-=E8=AE=B0?= =?UTF-8?q?=E4=BA=8B=E6=9C=AC=E5=AD=97=E4=BD=93=E9=80=89=E6=8B=A9=E5=B8=83?= =?UTF-8?q?=E5=B1=80=E4=BC=98=E5=8C=96=20-"=E5=85=B3=E4=BA=8E"=E5=BA=94?= =?UTF-8?q?=E7=94=A8=E7=9A=84=E6=94=B9=E8=BF=9B=20-=E7=BB=86=E8=8A=82?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=92=8C=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/style/about.css | 8 ++- apps/style/fonts.css | 3 - apps/style/setting.css | 123 ++++++++++++++++++++++++++++++++++------- desktop.css | 64 +++++++++++++-------- desktop.html | 122 ++++++++++++++++++++++++---------------- desktop.js | 10 +++- newyear-dark.png | Bin 833654 -> 0 bytes newyear-light.png | Bin 1149443 -> 0 bytes sw.js | 6 +- 9 files changed, 239 insertions(+), 97 deletions(-) delete mode 100644 newyear-dark.png delete mode 100644 newyear-light.png diff --git a/apps/style/about.css b/apps/style/about.css index c0eca8d..45c2b8f 100644 --- a/apps/style/about.css +++ b/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{ diff --git a/apps/style/fonts.css b/apps/style/fonts.css index c966052..1f1a2bb 100644 --- a/apps/style/fonts.css +++ b/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; diff --git a/apps/style/setting.css b/apps/style/setting.css index 67cbd14..b36c9c2 100644 --- a/apps/style/setting.css +++ b/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; diff --git a/desktop.css b/desktop.css index 1e548f0..40cd8eb 100644 --- a/desktop.css +++ b/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 { diff --git a/desktop.html b/desktop.html index 7c4f4f7..da7519a 100644 --- a/desktop.html +++ b/desktop.html @@ -264,16 +264,16 @@

注意: 新闻内容均不属实

-
-

Windows12 网页版春节特别版 发布

- +

Windows12 v3.9.0 发布

+ 详细信息 >

Windows13 即将发布，官方透露: 将自带 Macos 子系统

- 详细信息 > + 详细信息 >

Windows11 将于下周停止支持

@@ -281,7 +281,7 @@

2029年,微软终重拾Cortana 微软员工透露:将与Siri整合

- 详细信息 > + 详细信息 >

今日凌晨,Minecraft把代理权交给中国航天员谭景元,网易败下阵来了?

@@ -293,7 +293,7 @@

想给新闻增加更多奇思妙想?
快在github上来提交吧

- 提交issues >
@@ -510,12 +510,10 @@ - -  系统 + 系统 蓝牙和其他设备 网络和 Internet - 个性化 + 个性化 应用 账户 时间和语言 @@ -525,33 +523,57 @@ Windows 更新 -
-

系统

-
-

-
-

Desktop-PingGai

-

瓶盖

- 重命名 +
+
+

系统

+
+

+
+

Desktop-PingGai

+

瓶盖

+ 重命名 +
+
+
+

显示

显示器、亮度、夜间模式、显示描述

 +

声音

声音级别、输入、输出、声音设备

 +

通知

来自系统和应用的警报

 +

专注助手

通知、自动规则

 +

电源

睡眠、电池使用情况、节电模式

 +

存储

存储空间、驱动器、配置规则

 +

多任务处理

贴靠窗口、桌面、任务切换

 +

激活

激活状态、订阅、产品密钥

 +

疑难解答

建议的疑难解答、首选项和历史记录

 +

恢复

重置、高级启动、返回

 +

投影到此电脑

权限、配对 PIN、可发现性

 +

远程桌面

远程桌面用户、连接权限

 +

剪贴板

剪贴和复制历史记录、同步、清除

 +

关于

设备规格、重命名电脑、Windows 规格
-
-

显示

显示器、亮度、夜间模式、显示描述

 -

声音

声音级别、输入、输出、声音设备

 -

通知

来自系统和应用的警报

 -

专注助手

通知、自动规则

 -

电源

睡眠、电池使用情况、节电模式

 -

存储

存储空间、驱动器、配置规则

 -

多任务处理

贴靠窗口、桌面、任务切换

 -

激活

激活状态、订阅、产品密钥

 -

疑难解答

建议的疑难解答、首选项和历史记录

 -

恢复

重置、高级启动、返回

 -

投影到此电脑

权限、配对 PIN、可发现性

 -

远程桌面

远程桌面用户、连接权限

 -

剪贴板

剪贴和复制历史记录、同步、清除

 -

关于

设备规格、重命名电脑、Windows 规格

 +
+

个性化

+
+

颜色

设置 Windows 的主题色

 +
+

当前颜色

+
+
+

自定义颜色

+
+
+ +
+
+ + 应用 +
+
+
+
@@ -684,33 +706,38 @@

Windows 12 网页版

简介

-

  Windows 12 网页版是一个开源项目, 由谭景元原创, 使用标准网络技术,例如 Html、CSS 和 Javascript, 希望让用户在网络上预先体验 Windows 12。

-

  因为这只是概念版，所以内容可能与 Windows 12 正式版本不一致。

-

  由于这是一个开源项目，你可以在任何媒介以任何形式复制、发行本作品。 - 你还可以对该项目进行修改、转换或以本作品为基础进行创作。 - 但您必须给出适当的署名，您必须提供创作者姓名、作品链接，同时标明是否对此作了修改。您可以用任何合理的方式来署名，但是不得以任何方式暗示许可方认可您或您的使用。

-

  此项目绝不附属于微软,且不应与微软操作系统或产品混淆, 这也不是 Windows365 cloud PC

-

  本项目中微软、Windows和其他示范产品是微软公司的商标

-
-
-

其它

+

  Windows 12 网页版是一个开源项目, 由谭景元原创, 使用 Html,css,js , 在网络上模拟、创新操作系统

  此项目已发布至 Github, 点击此处查看

  若您对于该项目有任何意见或建议，请在 Github 上提交 issues, 您的问题会被尽可能快地解决

+

  原创作者谭景元，点击以了解详细

+

开源说明

+

  由于这是一个开源项目，你可以在任何媒介以任何形式复制、发行本作品。

+

  你还可以对该项目进行修改、转换或以本作品为基础进行创作。

+

  但您必须给出适当的署名，您必须提供创作者姓名、作品链接，同时标明是否对此作了修改。您可以用任何合理的方式来署名，但是不得以任何方式暗示许可方认可您或您的使用。

+

其它

+

  此项目基于目前 Windows 版本创造，与微软的 Windows 12 正式版本不一致。

+

  此项目绝不附属于微软,且不应与微软操作系统或产品混淆, 这也不是 Windows365 cloud PC

+

  本项目中微软、Windows和其他示范产品是微软公司的商标