mirror of
https://github.com/tjy-gitnub/win12.git
synced 2026-09-01 05:46:10 +08:00
v4.3.0 其实我想发布成5.0版的
-搜索菜单重新设计 -列表悬停立体效果(全局) -新增鼠标悬停提示框(全局) -记事本全新设计与功能(向Word努力) -计算器新样式 -新增多开亚克力设置 -关于应用更新记录动画 -文件资源管理器的新动画 -桌面图标点击效果 -修复设置的小竖条位置问题 -新新闻 -细节优化和修复
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
# Windows 12 网页版
|
||||
|
||||
> 又开学了。。。
|
||||
> 大家的建议我都收到了,非常感谢宝贵建议。这里对 [前景规划](#前景规划) 做了一些更改
|
||||
|
||||
- [Windows 12 网页版](#windows-12-网页版)
|
||||
- [前言](#前言)
|
||||
@@ -40,31 +40,29 @@
|
||||
|
||||
## 前景规划
|
||||
关于该项目的路径规划:
|
||||
- <input type="checkbox" checked> 基本功能与应用
|
||||
- <input type="checkbox" checked> 外观整体优化
|
||||
- <input type="checkbox" checked> 加入特效
|
||||
- <input type="checkbox" checked> 窗口功能
|
||||
- <input type="checkbox" checked> 应用完善
|
||||
- <input type="checkbox"> 添加更多个性化方面的设置
|
||||
- <input type="checkbox"> 动态壁纸
|
||||
- <input type="checkbox"> 完善小组件,添加到桌面等功能
|
||||
- <input type="checkbox"> 更多任务栏的自定义
|
||||
- <input type="checkbox"> 添加Edge应用
|
||||
- <input type="checkbox"> 丰富应用生态
|
||||
- [x] 基本功能与应用
|
||||
- [x] 外观整体优化
|
||||
- [x] 加入特效
|
||||
- [x] 窗口功能
|
||||
- [x] 应用完善
|
||||
- [ ] 添加更多个性化方面的设置
|
||||
- [ ] 添加Edge应用
|
||||
- [ ] 完善小组件,添加到桌面等功能
|
||||
- [ ] 动态壁纸
|
||||
- [ ] 更多任务栏的自定义
|
||||
- [ ] 丰富应用生态
|
||||
|
||||
下面是一些...呃......畅..想 `~o~)/`
|
||||
<s>
|
||||
- <input type="checkbox"> 建立文件系统
|
||||
- <input type="checkbox"> 建立自己的可执行文件机制
|
||||
- <input type="checkbox"> 将exe文件转化并执行
|
||||
- <input type="checkbox"> 提供更多api供应用调用
|
||||
- <input type="checkbox"> 内置浏览器内核,成为应用
|
||||
- <input type="checkbox"> 将项目更名为 "Windows 12"
|
||||
- <input type="checkbox"> 封装到Windows中系统中
|
||||
- <input type="checkbox"> 将启动程序设为此应用
|
||||
- <input type="checkbox"> 去除多余系统功能,封装成独立的操作系统
|
||||
- <input type="checkbox"> 将项目更名为 "Doswin 1.0"
|
||||
- <input type="checkbox"> 适配量子计算机
|
||||
- <input type="checkbox"> 接入chatgpt
|
||||
- <input type="checkbox"> 将项目更名为 "550W"
|
||||
</s>
|
||||
- [ ] 建立文件系统
|
||||
- [ ] 建立自己的可执行文件机制
|
||||
- [ ] 将exe文件转化并执行
|
||||
- [ ] 提供更多api供应用调用
|
||||
- [ ] 内置浏览器内核,成为应用
|
||||
- [ ] 将项目更名为 "Windows 12"
|
||||
- [ ] 封装到Windows中系统中
|
||||
- [ ] 将启动程序设为此应用
|
||||
- [ ] 去除多余系统功能,封装成独立的操作系统
|
||||
- [ ] 将项目更名为 "Doswin 1.0"
|
||||
- [ ] 适配量子计算机
|
||||
- [ ] 接入chatgpt
|
||||
- [ ] 将项目更名为 "550W"
|
||||
+14
-9
@@ -20,10 +20,11 @@
|
||||
|
||||
#win-about>.cnt{
|
||||
overflow: auto;
|
||||
transform: translate(0, 50%);
|
||||
transform: translate(0, 30%);
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
transition: transform 300ms cubic-bezier(0,0,0,1), opacity 300ms 50ms;
|
||||
padding: 0 5px 60px 0;
|
||||
/* display: none; */
|
||||
}
|
||||
|
||||
@@ -57,22 +58,26 @@
|
||||
|
||||
#win-about>.update>div>details{
|
||||
background-color: var(--card);
|
||||
padding: 10px;
|
||||
padding: 10px 10px 0 10px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 3px 3px 5px var(--sd);
|
||||
margin: 10px 10px 0 0;
|
||||
transform: scale(0.98);
|
||||
transition: transform 50ms;
|
||||
transition: 100ms,height 0ms,padding-bottom 100ms ease-out;
|
||||
overflow: hidden;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
#win-about>.update>div>details:hover{
|
||||
transform: none;
|
||||
#win-about>.update>div>details[open]{
|
||||
padding-bottom: 10px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#win-about>.update>div>details:not([open]):hover{
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
#win-about>.update>div>details:active{
|
||||
filter: blur(0.5px);
|
||||
transform: scale(0.95);
|
||||
transition: transform 400ms cubic-bezier(0.14, 1.02, 0.17, 0.03);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
#win-about>.update>div>details>summary{
|
||||
|
||||
+9
-3
@@ -32,9 +32,14 @@
|
||||
transition: 40ms;
|
||||
border-radius: 7px;
|
||||
border: 1.5px solid #63636330;
|
||||
box-shadow: 0px 2px 2px var(--sd);
|
||||
box-shadow: 0px 1px 4px var(--bd);
|
||||
background: var(--card);
|
||||
padding-top: 5px;
|
||||
border: 1.5px solid var(--bd);
|
||||
border-top: 2px solid var(--bd);
|
||||
border-bottom: 1px solid var(--bd);
|
||||
/* border-color: var(--bd); */
|
||||
transform-origin: bottom;
|
||||
}
|
||||
#win-calc>.keyb>.b.u{
|
||||
padding-top: 5px;
|
||||
@@ -42,6 +47,7 @@
|
||||
#win-calc>.keyb>.b.ans{
|
||||
background-image: linear-gradient(120deg, var(--theme-1), var(--theme-2));
|
||||
border: none;
|
||||
color: #ddd;
|
||||
}
|
||||
#win-calc>.keyb>.b.ans:hover{
|
||||
backdrop-filter: brightness(0.8);
|
||||
@@ -58,6 +64,6 @@
|
||||
|
||||
#win-calc>.keyb>.b:active{
|
||||
opacity: 0.8;
|
||||
transform: scale(0.94) translate(0,1px);
|
||||
box-shadow: 0px 1px 1px var(--sd);
|
||||
transform: scale(0.96);
|
||||
box-shadow: 0px 1px 1px var(--bd);
|
||||
}
|
||||
+19
-3
@@ -134,9 +134,24 @@
|
||||
}
|
||||
|
||||
#win-explorer>.main>.content>.tool>.tit{
|
||||
display: flex;
|
||||
/* display: flex; */
|
||||
margin-top: 3px;
|
||||
margin-left: 5px;
|
||||
overflow: hidden;
|
||||
border: 1.5px solid transparent;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#win-explorer>.main>.content>.tool>.tit:hover{
|
||||
height: min-content;
|
||||
min-width: 100px;
|
||||
background: var(--unfoc);
|
||||
border-radius: 5px;
|
||||
border: 1.5px solid #6f6f6f30;
|
||||
padding: 3px 5px;
|
||||
margin: 0 5px 3px 0;
|
||||
box-shadow: 2px 2px 5px var(--sd);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#win-explorer>.main>.content>.tool>.search{
|
||||
@@ -171,7 +186,7 @@
|
||||
|
||||
@keyframes exp-show {
|
||||
0%{
|
||||
transform: scale(0.9) translate(0,50%);
|
||||
transform: translateX(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
100%{
|
||||
@@ -194,7 +209,8 @@
|
||||
}
|
||||
|
||||
#win-explorer>.main>.content>.view>.item:active{
|
||||
transform: scale(0.98);
|
||||
transform: scale(0.99);
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
#win-explorer>.main>.content>.view>.item>img{
|
||||
|
||||
@@ -27,6 +27,21 @@
|
||||
transition: 200ms;
|
||||
}
|
||||
|
||||
#win-notepad>.text-box *:not(div):not(br){
|
||||
border-radius: 8px;
|
||||
outline: 2px solid transparent;
|
||||
transition: 100ms;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#win-notepad>.text-box *:not(div):not(br):focus{
|
||||
background: red;
|
||||
}
|
||||
|
||||
#win-notepad>.text-box *:not(div):not(br):hover{
|
||||
outline-color: #2983cc;
|
||||
}
|
||||
|
||||
#win-notepad>.text-box:focus{
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
|
||||
+11
-12
@@ -12,11 +12,6 @@
|
||||
font-family: SettingsIcons;
|
||||
}
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#win-setting {
|
||||
display: flex;
|
||||
height: calc(100% - 32px);
|
||||
@@ -119,7 +114,7 @@ html {
|
||||
}
|
||||
|
||||
#win-setting>.page>.cnt {
|
||||
overflow: auto;
|
||||
overflow-y: scroll;
|
||||
transform: translate(0, 50%) scale(0.8);
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
@@ -171,6 +166,7 @@ html {
|
||||
|
||||
.setting-list>a.dp{
|
||||
margin-bottom: 0px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.setting-list>a.dp.show {
|
||||
@@ -190,11 +186,13 @@ html {
|
||||
}
|
||||
|
||||
.setting-list>div.dp {
|
||||
border: none;
|
||||
border: 1.5px solid #6f6f6f30;
|
||||
border-top: none;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
max-height: 0px;
|
||||
transition: 200ms;
|
||||
transition: max-height 300ms,padding 100ms 200ms linear,opacity 200ms 100ms,transform 200ms 200ms;
|
||||
transform: translateY(-50px);
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
padding: 0 15px;
|
||||
@@ -202,14 +200,15 @@ html {
|
||||
/* transform-origin: bottom; */
|
||||
opacity: 0;
|
||||
/* display: none; */
|
||||
margin:0 0 5px 0;
|
||||
margin:0 0 4px 0;
|
||||
}
|
||||
|
||||
.setting-list>div.dp.show {
|
||||
border: 1.5px solid #6f6f6f30;
|
||||
border-top: none;
|
||||
max-height: 1000px;
|
||||
padding: 10px 15px;
|
||||
transition: max-height 300ms 100ms,padding 100ms 50ms linear,opacity 200ms 100ms,transform 300ms 50ms;
|
||||
transform: none;
|
||||
max-height: 1000px;
|
||||
/* padding: 10px 15px; */
|
||||
opacity: 1;
|
||||
/* display: block; */
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 80 KiB |
+174
-43
@@ -5,13 +5,13 @@
|
||||
--text: #000;
|
||||
--bg: #ffffff;
|
||||
--bg30: #ffffff30;
|
||||
--bg50: #ffffff60;
|
||||
--bg50: #ffffff80;
|
||||
--bg70: #ffffff80;
|
||||
--sd: #33333370;
|
||||
--card: #efefef60;
|
||||
--hover: #ffffff70;
|
||||
--hover-half: #ffffff50;
|
||||
--hover-b: #00000016;
|
||||
--card: #efefef55;
|
||||
--hover: #ffffff65;
|
||||
--hover-half: #ffffff40;
|
||||
--hover-b: #1111110f;
|
||||
--bggrey: #ddd;
|
||||
--fill:#d3d3d370;
|
||||
--bgul: url('bg.svg');
|
||||
@@ -23,6 +23,8 @@
|
||||
--theme-1:#ad6eca;
|
||||
--theme-2:#3b91d8;
|
||||
--href:#2983cc;
|
||||
--bd:#8f8f8f30;
|
||||
/* --bd:#ffffff10; */
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
@@ -33,9 +35,9 @@
|
||||
--bg70: #00000080;
|
||||
--sd: #000000a0;
|
||||
--card: #72727240;
|
||||
--hover: #aaaaaa20;
|
||||
--hover: #aaaaaa40;
|
||||
--hover-half: #ffffff20;
|
||||
--hover-b: #ffffff16;
|
||||
--hover-b: #eeeeee0f;
|
||||
--bggrey: #444;
|
||||
--fill:#54545470;
|
||||
--bgul: url('bg-dark.svg');
|
||||
@@ -44,6 +46,7 @@
|
||||
--bar: #7272722a;
|
||||
--hr:#00000050;
|
||||
--unfoc:#333;
|
||||
--bd:#ffffff06;
|
||||
}
|
||||
|
||||
:root.nobr *,
|
||||
@@ -65,8 +68,9 @@
|
||||
--sd:none;
|
||||
}
|
||||
|
||||
:root.noblur *{
|
||||
backdrop-filter: none !important;
|
||||
:root.moreblur .window:not(.foc){
|
||||
background-color: var(--bg70);
|
||||
backdrop-filter: blur(30px);
|
||||
}
|
||||
|
||||
:root.noblur{
|
||||
@@ -164,6 +168,7 @@ p {
|
||||
|
||||
html {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -238,7 +243,7 @@ list>a,
|
||||
.wg>.titbar>.more,
|
||||
.wg.calc>.content>.b,
|
||||
.button {
|
||||
transition: transform 400ms cubic-bezier(0.14, 1.02, 0.17, 0.03) !important;
|
||||
transition: 80ms, transform 400ms cubic-bezier(0.14, 1.02, 0.17, 0.03) !important;
|
||||
}
|
||||
|
||||
.act:active,
|
||||
@@ -256,7 +261,7 @@ list>a:active,
|
||||
|
||||
#s-m-l>list>a,
|
||||
#win-setting>.menu>list>a {
|
||||
border: 2px solid #00000000;
|
||||
/* border: 2px solid #00000000; */
|
||||
/* background-clip: padding-box, border-box;
|
||||
background-origin: padding-box, border-box; */
|
||||
}
|
||||
@@ -349,7 +354,7 @@ list>a:active,
|
||||
}
|
||||
|
||||
#taskbar {
|
||||
padding: 3px 5px;
|
||||
padding: 3px 2px;
|
||||
transition: 80ms;
|
||||
overflow: hidden;
|
||||
width: 0;
|
||||
@@ -358,10 +363,14 @@ list>a:active,
|
||||
#taskbar>a {
|
||||
border-radius: 5px;
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
width: 38px;
|
||||
transition: 100ms;
|
||||
padding: 4px 0 0 5px;
|
||||
padding: 4px 5px;
|
||||
display: block;
|
||||
margin: 0;
|
||||
background-clip: padding-box;
|
||||
border-left: 2px solid transparent;
|
||||
border-right: 2px solid transparent;
|
||||
}
|
||||
|
||||
#taskbar>a:hover {
|
||||
@@ -446,17 +455,22 @@ list>a:active,
|
||||
#taskbar>a:not(.foc)::after {
|
||||
background: linear-gradient(90deg, #7f7f7f, #7f7f7f);
|
||||
width: 12px;
|
||||
left: 6.2px;
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
#taskbar>a:hover:after {
|
||||
#taskbar>a:not(.foc):hover:after {
|
||||
width: 16px;
|
||||
left: 4.2px;
|
||||
}
|
||||
|
||||
#taskbar>a.foc:hover:after {
|
||||
width: 22px;
|
||||
left: 1.2px;
|
||||
}
|
||||
|
||||
#taskbar>a.min:hover:after {
|
||||
width: 16px;
|
||||
left: 4.2px;
|
||||
width: 18px;
|
||||
left: 3.2px;
|
||||
}
|
||||
|
||||
.dock.date {
|
||||
@@ -599,7 +613,7 @@ list>a:active,
|
||||
}
|
||||
|
||||
#search-btn.show>svg.in {
|
||||
transform: scale(1.2);
|
||||
transform: scale(1.1);
|
||||
filter: hue-rotate(380deg) brightness(1.1);
|
||||
}
|
||||
|
||||
@@ -1036,29 +1050,99 @@ input-before {
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
background-image: linear-gradient(90deg, var(--theme-1), var(--theme-2));
|
||||
width: 100%;
|
||||
width: calc(100% - 6px);
|
||||
left: 3px;
|
||||
height: 3px;
|
||||
border-radius: 3px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#search-win>.ans {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#search-win>.ans>.list {
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
margin-right: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#search-win>.ans>.list>list>a:hover {
|
||||
background-color: #ffffff50;
|
||||
#search-win>.ans>.list>list>a {
|
||||
padding: 5px 5px 0px 10px;
|
||||
display: flex;
|
||||
/* transition: 70ms!important; */
|
||||
}
|
||||
|
||||
#search-win>.ans>.list>list>a:active{
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
#search-win>.ans>.list>list>a>.bi{
|
||||
display: block;
|
||||
margin-right: 3px;
|
||||
font-size: 24px;
|
||||
margin-top: -5px;
|
||||
background-image: linear-gradient(100deg, var(--theme-1), var(--theme-2));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
#search-win>.ans>.list>list>a>img{
|
||||
height: 23px;
|
||||
width: 23px;
|
||||
margin: 1px 5px 7px 0;
|
||||
}
|
||||
|
||||
#search-win>.ans>.view {
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
background: var(--card);
|
||||
padding: 3px;
|
||||
box-shadow: 2px 2px 5px var(--sd);
|
||||
border: 1.5px solid #6f6f6f30;
|
||||
display: none;
|
||||
overflow: auto;
|
||||
/* height: 100%; */
|
||||
margin: 2px 5px 5px 0;
|
||||
}
|
||||
|
||||
#search-win>.ans>.view.show{
|
||||
display: block;
|
||||
}
|
||||
|
||||
#search-win>.ans>.view>.fname>.bi{
|
||||
font-size: 70px;
|
||||
display: block;
|
||||
margin: 30px 0 5px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#search-win>.ans>.view>.fname>.name{
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
#search-win>.ans>.view>.fname>.type{
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
opacity: 0.5;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#search-win>.ans>.view>.option>list{
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
#search-win>.ans>.view>.option>list>a{
|
||||
border-radius: 6px;
|
||||
transition: 70ms !important;
|
||||
padding: 4px 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#search-win>.ans>.view>.option>list>a:active{
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
#widgets {
|
||||
@@ -1136,6 +1220,19 @@ input-before {
|
||||
|
||||
#widgets>.widgets>.content>.grid>.wg {
|
||||
background: var(--card);
|
||||
transition: 100ms;
|
||||
animation: wgs 150ms;
|
||||
}
|
||||
|
||||
@keyframes wgs {
|
||||
0%{
|
||||
transform:scale(0.6);
|
||||
opacity: 0.5;
|
||||
}
|
||||
100%{
|
||||
transform:none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#widgets>.widgets>.content>.template {
|
||||
@@ -1374,18 +1471,21 @@ input-before {
|
||||
text-align: center;
|
||||
margin: 8px 10px 2px 10px;
|
||||
padding: 0 3px 3px 3px;
|
||||
border: 2px solid transparent;
|
||||
border: 1.5px solid transparent;
|
||||
border-top: 2px solid transparent;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
#desktop>div:hover {
|
||||
border-color: var(--bd);
|
||||
background-color: var(--hover-m);
|
||||
backdrop-filter: blur(15px) saturate(0.9) brightness(1.4);
|
||||
}
|
||||
|
||||
#desktop>div:active{
|
||||
background-color: var(--hover-m);
|
||||
backdrop-filter: blur(3px) brightness(1.5);
|
||||
border: 2px solid var(--href);
|
||||
backdrop-filter: blur(5px) brightness(1.5);
|
||||
border-color: var(--hr);
|
||||
}
|
||||
|
||||
#desktop>div>img {
|
||||
@@ -1431,7 +1531,7 @@ input-before {
|
||||
background-origin: padding-box, border-box;
|
||||
background-image: linear-gradient(var(--bg), var(--bg)), linear-gradient(90deg, var(--theme-1), var(--theme-2));
|
||||
border-bottom-color: transparent;
|
||||
box-shadow: 1px 1px 4px 2px var(--sd);
|
||||
box-shadow: 1px 1px 10px var(--sd);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@@ -1459,17 +1559,12 @@ input-before {
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #ffffff50;
|
||||
background: var(--hover);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
font-size: 17px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.btn-icon.big:active {
|
||||
font-size: 13px;
|
||||
padding: 6px 10px;
|
||||
transform: scale(0.9);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.button{
|
||||
@@ -1528,9 +1623,8 @@ input-before {
|
||||
|
||||
|
||||
#cm>list>a {
|
||||
padding: 5px 12px;
|
||||
padding: 4px 12px;
|
||||
margin: 0 0;
|
||||
transition: 80ms;
|
||||
border-radius: 7px;
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
@@ -1611,6 +1705,30 @@ input-before {
|
||||
background-color: var(--hover-b);
|
||||
}
|
||||
|
||||
#descp{
|
||||
position: fixed;
|
||||
background: var(--cm);
|
||||
border-radius: 6px;
|
||||
box-shadow: 2px 2px 10px var(--sd);
|
||||
z-index: 102;
|
||||
border: 1.5px solid #4f4f4f30;
|
||||
backdrop-filter: blur(15px) saturate(2);
|
||||
font-size: 13px;
|
||||
padding: 4px 7px;
|
||||
margin: 0;
|
||||
transition: opacity 100ms;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#descp.show{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#descp.show-begin{
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.more-btn {
|
||||
background-image: linear-gradient(100deg, var(--theme-1), var(--theme-2));
|
||||
@@ -1753,11 +1871,19 @@ list>* {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
list>a{
|
||||
border: 1.5px solid transparent;
|
||||
border-top: 2px solid transparent;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: 80ms,transform 400ms cubic-bezier(0.14, 1.02, 0.17, 0.03),border 50ms 50ms!important;
|
||||
}
|
||||
|
||||
list>*:hover {
|
||||
|
||||
list>a:hover {
|
||||
color: var(--text);
|
||||
background-color: var(--hover-half);
|
||||
text-decoration: none;
|
||||
border-color: var(--bd);
|
||||
}
|
||||
|
||||
list>hr {
|
||||
@@ -1777,10 +1903,12 @@ list>hr:hover {
|
||||
list>.text {
|
||||
margin: 0;
|
||||
cursor: inherit;
|
||||
border: none;
|
||||
}
|
||||
|
||||
list>.text:hover {
|
||||
background-color: unset;
|
||||
border: none;
|
||||
}
|
||||
|
||||
list>span.focs{
|
||||
@@ -1788,16 +1916,18 @@ list>span.focs{
|
||||
width: 4px;
|
||||
height: 20px;
|
||||
background: linear-gradient(0deg, var(--theme-1), var(--theme-2));
|
||||
background-size: cover;
|
||||
padding: 0;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
margin: 7.5px 7px;
|
||||
margin: -30px 7px 0 7px;
|
||||
z-index: 1;
|
||||
transition: 350ms cubic-bezier(0.8, 0, 0.2, 1);
|
||||
transition: 500ms cubic-bezier(1, 0, 0, 1);
|
||||
/* transform-origin: top; */
|
||||
}
|
||||
|
||||
list>span.focs.cl{
|
||||
animation: fcl 150ms cubic-bezier(0.7,0,0.3,1) 100ms;
|
||||
animation: fcl 200ms cubic-bezier(1,0.8,0,0.2) 160ms;
|
||||
}
|
||||
|
||||
@keyframes fcl {
|
||||
@@ -1904,6 +2034,7 @@ list>span.focs.cl{
|
||||
.window.foc {
|
||||
background-color: var(--bg70);
|
||||
backdrop-filter: blur(80px) saturate(1.3);
|
||||
filter: none;
|
||||
-webkit-backdrop-filter: blur(80px) saturate(1.3);
|
||||
box-shadow: 3px 3px 20px 3px var(--sd);
|
||||
}
|
||||
|
||||
+101
-63
@@ -66,7 +66,7 @@
|
||||
<svg viewBox="0,0,257,344" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"><defs><clipPath id="user-clip0"><rect x="382" y="195" width="257" height="344"/></clipPath><linearGradient x1="351.462" y1="233.56" x2="669.496" y2="500.422" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="user-fill1"><stop offset="0" stop-color="#A964C8"/><stop offset="0.35" stop-color="#A964C8"/><stop offset="0.87" stop-color="#2D8AD5"/><stop offset="1" stop-color="#2D8AD5"/></linearGradient><linearGradient x1="351.462" y1="233.56" x2="669.496" y2="500.422" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="user-fill2"><stop offset="0" stop-color="#A964C8"/><stop offset="0.35" stop-color="#A964C8"/><stop offset="0.87" stop-color="#2D8AD5"/><stop offset="1" stop-color="#2D8AD5"/></linearGradient></defs><g clip-path="url(#user-clip0)" transform="translate(-382 -195)"><path d="M637.755 433.872C642.215 515.221 579.577 537.983 508.011 537.983 436.444 537.983 376.676 507.833 383.513 437.11 383.109 425.234 389.59 414.133 398.634 409.891 413.82 402.768 444.753 402.936 507.484 402.997 570.214 403.058 609.164 402.279 621.521 407.947 633.878 413.614 638.011 424.609 637.755 433.872Z" fill="url(#user-fill1)" fill-rule="evenodd"/><path d="M422 285C422 235.847 461.623 196 510.5 196 559.377 196 599 235.847 599 285 599 334.153 559.377 374 510.5 374 461.623 374 422 334.153 422 285Z" fill="url(#user-fill2)" fill-rule="evenodd"/></g></svg>
|
||||
</div>
|
||||
<p style="width: 100%;text-align: center;margin: -50px 0 20px 0;font-size: 30px;">Administartor</p>
|
||||
<input type="text" class="input" title="搜索" placeholder="在这里输入你要搜索的内容" onfocus="hide_startmenu();
|
||||
<input type="text" class="input" win12_title="搜索" placeholder="在这里输入你要搜索的内容" onfocus="hide_startmenu();
|
||||
$('#search-btn').addClass('show');
|
||||
$('#search-win').addClass('show-begin');
|
||||
setTimeout(() => {
|
||||
@@ -104,14 +104,14 @@
|
||||
<div class="tool">
|
||||
<p style="font-size: 40px;margin-bottom: -10px;" class="time">12:00</p>
|
||||
<p class="date">星期一, 2368年13月34日</p>
|
||||
<a class="a btn btn-icon power" title="电源" onclick="$(this).addClass('show')">
|
||||
<a class="a btn btn-icon power" win12_title="电源" onclick="$(this).addClass('show')">
|
||||
<span class="bi bi-power"></span>
|
||||
<i class="bi bi-power" onclick="$('#start-menu').removeClass('show');
|
||||
setTimeout(() => {window.location='shutdown.html';},200);" title="关机"></i>
|
||||
setTimeout(() => {window.location='shutdown.html';},200);" win12_title="关机"></i>
|
||||
<i class="bi bi-arrow-counterclockwise" onclick="$('#start-menu').removeClass('show');
|
||||
setTimeout(() => {window.location='reload.html';},200);" title="重启"></i>
|
||||
setTimeout(() => {window.location='reload.html';},200);" win12_title="重启"></i>
|
||||
</a>
|
||||
<a class="a btn btn-icon big" onclick="
|
||||
<a class="a btn btn-icon big" win12_title="切换全屏" onclick="
|
||||
if($('#start-menu').hasClass('max')){
|
||||
$('#start-menu>#s-m-r>.row1>.tool>.btn-icon.big').html('<i class=\'bi bi-arrows-angle-expand\'></i>');
|
||||
$('#start-menu').removeClass('max');
|
||||
@@ -175,14 +175,7 @@
|
||||
</div>
|
||||
<div id="search-win">
|
||||
<!-- 搜索框 -->
|
||||
<input type="text" class="input" placeholder="在这里输入你要搜索的内容" id="search-input" oninput="
|
||||
if(this.value.length>0){
|
||||
let rand=['农夫山泉瓶盖简介.txt','瓶盖构造图.png','瓶盖结构说明.docx','可口可乐瓶盖.jpg','可口可乐瓶盖历史.pptx','瓶盖质量统计分析.xlsx','农夫山泉瓶盖.svg','瓶盖介绍.doc'];
|
||||
$('#search-win>.ans>.list>list').html('<a class=\'a\'>'+rand[this.value.length%8]+'</a>'+'<a class=\'a\'>'+rand[(this.value.length+3)%8]+'</a>');
|
||||
}else
|
||||
$('#search-win>.ans>.list>list').html('什么也没有')
|
||||
$('#search-span').text(this.value);
|
||||
">
|
||||
<input type="text" class="input" placeholder="在这里输入你要搜索的内容" id="search-input" oninput="apps.search.search(this.value.length)">
|
||||
<input-before class="bi bi-search"></input-before>
|
||||
<div class="tab">
|
||||
<a class="now">全部</a><a>应用</a><a>文档</a><a>网页</a>
|
||||
@@ -192,12 +185,35 @@
|
||||
<div class="ans">
|
||||
<div class="list">
|
||||
<list>
|
||||
什么也没有
|
||||
<p class="text">推荐</p>
|
||||
<a onclick="openapp('setting');$('#search-btn').removeClass('show');
|
||||
$('#search-win').removeClass('show');
|
||||
setTimeout(() => {
|
||||
$('#search-win').removeClass('show-begin');
|
||||
}, 200);">
|
||||
<img src="icon/setting.png"><p>设置</p></a>
|
||||
<a onclick="openapp('about');$('#search-btn').removeClass('show');
|
||||
$('#search-win').removeClass('show');
|
||||
setTimeout(() => {
|
||||
$('#search-win').removeClass('show-begin');
|
||||
}, 200);">
|
||||
<img src="icon/about.png"><p>关于Win12网页版</p></a>
|
||||
</list>
|
||||
</div>
|
||||
<div class="view">
|
||||
<p class="bi bi-search" style="text-align: center;font-size: 50px;"></p>
|
||||
<p style="text-align: center;font-size: 25px;">搜索 "<span id="search-span"></span>"</p>
|
||||
<div class="fname">
|
||||
<i class="bi bi-search"></i>
|
||||
<p class="name"></p>
|
||||
<p class="type"></p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="option">
|
||||
<list>
|
||||
<a class="a">打开</a>
|
||||
<a class="a">打开文件所在位置</a>
|
||||
<a class="a">复制路径</a>
|
||||
</list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -208,21 +224,21 @@
|
||||
<div class="widgets">
|
||||
<div class="bar">
|
||||
<p class="tit">小组件</p>
|
||||
<button onclick="widgets.widgets.add('calc')" class="a act btn btn-icon big" style="background: linear-gradient(100deg, var(--theme-1), var(--theme-2));color:#fff;"><i class="bi bi-plus-lg"></i></button>
|
||||
<button onclick="widgets.widgets.add('calc')" class="a act btn btn-icon big" style="background: linear-gradient(100deg, var(--theme-1), var(--theme-2));color:#fff;" win12_title="添加"><i class="bi bi-plus-lg"></i></button>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="template">
|
||||
<div class="calc">
|
||||
<div class="wg calc">
|
||||
<div class="titbar">
|
||||
<a title="更多" class="a more" onclick="$('.wg.calc>.titbar>.menu').toggleClass('show')"><i class="bi bi-three-dots"></i></a>
|
||||
<a win12_title="更多" onmouseenter="showdescp(event)" onmouseleave="hidedescp(event)" class="a more notip" onclick="$('.wg.calc>.titbar>.menu').toggleClass('show')"><i class="bi bi-three-dots"></i></a>
|
||||
<div class="menu">
|
||||
<a title="打开应用" class="a img" onclick="$('.wg.calc>.titbar>.menu').removeClass('show');hide_widgets();openapp('calc')">
|
||||
<a win12_title="打开应用" class="a img notip" onclick="$('.wg.calc>.titbar>.menu').removeClass('show');hide_widgets();openapp('calc')" onmouseenter="showdescp(event)" onmouseleave="hidedescp(event)">
|
||||
<img src="icon/calc.png">
|
||||
</a>
|
||||
<a class="a" title="移动 (不可用)"><i class="bi bi-arrows-move"></i></a>
|
||||
<a class="a" title="添加到桌面 (不可用)"><i class="bi bi-menu-app"></i></a>
|
||||
<a class="a" title="删除" onclick="$('.wg.calc>.titbar>.menu').removeClass('show');widgets.widgets.remove('calc')"><i class="bi bi-trash"></i></a>
|
||||
<a class="a notip" win12_title="移动 (不可用)" onmouseenter="showdescp(event)" onmouseleave="hidedescp(event)"><i class="bi bi-arrows-move"></i></a>
|
||||
<a class="a notip" win12_title="添加到桌面 (不可用)" onmouseenter="showdescp(event)" onmouseleave="hidedescp(event)"><i class="bi bi-menu-app"></i></a>
|
||||
<a class="a notip" win12_title="删除" onmouseenter="showdescp(event)" onmouseleave="hidedescp(event)" onclick="$('.wg.calc>.titbar>.menu').removeClass('show');widgets.widgets.remove('calc')"><i class="bi bi-trash"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
@@ -270,18 +286,22 @@
|
||||
$('#win-about>.about').removeClass('show');$('#win-about>.update').addClass('show');
|
||||
$('#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: #9dd0fb;text-shadow: 0 0 3px #000;">详细信息 ></a>
|
||||
<div class="card" style="grid-column: 4/6;grid-row: 7/9;background:url(img/win13.jpg) right;background-size: cover;">
|
||||
<p class="tit" style="font-size: 19px;margin: 70px 0 0 10px;color: #fff;">Windows13 即将发布,官方透露: 将自带 Macos 子系统</p>
|
||||
<a class="a" style="margin: 5px 0 0 80px;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>
|
||||
<a class="a" style="margin: 5px 0 0 80px;font-size: 17px;">详细信息 ></a>
|
||||
</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>
|
||||
<div class="card" style="grid-column: 1/3;grid-row: 5/7;background:linear-gradient(#00000000,#111 80%),url(img/corsiri.svg) bottom;background-size: 150%;">
|
||||
<p class="tit" style="font-size: 19px;margin: 80px 0 0px 10px;color: #fff;">2029年,微软终重拾Cortana 微软员工透露:将与Siri整合</p>
|
||||
<a class="a" style="margin: 0 0 0 80px;font-size: 17px;color: #9dd0fb;">详细信息 ></a>
|
||||
</div>
|
||||
<div class="card" style="grid-column: 1/4;grid-row: 7/9;background:linear-gradient(#00000000,#111 90%),url(img/wsm.png) left;background-size: 120%;">
|
||||
<p class="tit" style="font-size: 19px;margin: 100px 0 0px 10px;color: #fff;">微软发布 Windows Subsystem for MocOS</p>
|
||||
<a class="a" style="margin: 0 0 0 170px;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>
|
||||
<a class="a" style="margin: 0 0 0 170px;font-size: 17px;">详细信息 ></a>
|
||||
@@ -290,9 +310,9 @@
|
||||
<p class="tit" style="font-size: 19px;margin: 120px 0 -20px 10px;">中国宇航员谭景元昨天下午成功登月</p>
|
||||
<a class="a" style="margin: 0 0 0 150px;font-size: 17px;">详细信息 ></a>
|
||||
</div>
|
||||
<div class="card" style="grid-column: 1/3;grid-row: 8/10;background:#171b22;">
|
||||
<div class="card" style="grid-column: 1/3;grid-row: 9/11;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: #9dd0fb" onclick="
|
||||
<a class="a" win12_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>
|
||||
@@ -316,7 +336,7 @@
|
||||
<div id="dock-box">
|
||||
<!-- Dock(任务)栏 -->
|
||||
<div class="dock dock-start">
|
||||
<a class="dock-btn" id="start-btn" title="开始" onclick="
|
||||
<a class="dock-btn" id="start-btn" win12_title="开始" onclick="
|
||||
if($('#start-menu').hasClass('show')){
|
||||
hide_startmenu();
|
||||
}
|
||||
@@ -377,7 +397,7 @@
|
||||
<path d="M1163.19 512 1064.8 512 1064.8 512 1064 379.593C1088.35 388.648 1113.49 394.507 1136.24 394.774 1158.49 394.241 1180.75 380.925 1203 374L1203 472.245C1203 494.201 1185.18 512 1163.19 512Z" fill="url(#sf3)" fill-rule="evenodd"></path>
|
||||
<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 class="dock-btn" id="search-btn" title="搜索" onclick="
|
||||
<a class="dock-btn" id="search-btn" win12_title="搜索" onclick="
|
||||
if($('#search-win').hasClass('show')){
|
||||
$('#search-btn').removeClass('show');
|
||||
$('#search-win').removeClass('show');
|
||||
@@ -398,7 +418,7 @@
|
||||
<svg class="out" width="26" height="26" viewBox="0,0,398,406" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"><defs><clipPath id="clip-search0"><rect x="77" y="29" width="398" height="406"/></clipPath></defs><g clip-path="url(#clip-search0)" transform="translate(-77 -29)"><path style="fill: var(--text);filter:brightness(0.9);" d="M77 195C77 103.873 151.097 30 242.5 30 333.903 30 408 103.873 408 195 408 286.127 333.903 360 242.5 360 151.097 360 77 286.127 77 195ZM122.372 195C122.372 261.069 176.155 314.629 242.5 314.629 308.845 314.629 362.628 261.069 362.628 195 362.628 128.931 308.845 75.3717 242.5 75.3717 176.155 75.3717 122.372 128.931 122.372 195Z" fill-rule="evenodd"/><path style="fill: var(--text);filter:brightness(0.9);" d="M329.14 331.039C317.792 319.691 317.792 301.292 329.14 289.944L329.14 289.944C340.488 278.596 358.887 278.596 370.235 289.944L465.351 385.06C476.699 396.408 476.699 414.807 465.351 426.155L465.351 426.155C454.003 437.503 435.604 437.503 424.256 426.155Z" fill-rule="evenodd"/></g></svg>
|
||||
<svg class="in" width="20" height="20" viewBox="0,0,245,245" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"><defs><clipPath id="clip-search1"><rect x="121" y="76" width="245" height="245"/></clipPath><linearGradient x1="99.764" y1="115.514" x2="387.236" y2="281.486" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="fill-search1"><stop offset="0" stop-color="#A964C8"/><stop offset="0.26" stop-color="#A964C8"/><stop offset="1" stop-color="#2D8AD5"/></linearGradient></defs><g clip-path="url(#clip-search1)" transform="translate(-121 -76)"><path d="M122 198.5C122 131.397 176.397 77 243.5 77 310.603 77 365 131.397 365 198.5 365 265.603 310.603 320 243.5 320 176.397 320 122 265.603 122 198.5Z" fill="url(#fill-search1)" fill-rule="evenodd"/></g></svg>
|
||||
</a>
|
||||
<a class="dock-btn" id="widgets-btn" title="小组件" onclick="
|
||||
<a class="dock-btn" id="widgets-btn" win12_title="小组件" onclick="
|
||||
if($('#widgets').hasClass('show')){
|
||||
hide_widgets();
|
||||
}
|
||||
@@ -427,7 +447,7 @@
|
||||
<div class="dock" id="taskbar" style="display: none;" count="0">
|
||||
</div>
|
||||
<div class="dock about" oncontextmenu="return showcm(event,'dockabout',$(this).hasClass('show'))"
|
||||
onclick="if($(this).hasClass('show')){$(this).removeClass('show')}else{$(this).addClass('show')};navigator.serviceWorker.controller.postMessage('set?');">
|
||||
onclick="if($(this).hasClass('show')){$(this).removeClass('show')}else{$(this).addClass('show')};" win12_title="点击展开详细">
|
||||
Windows 12 网页版 谭景元原创
|
||||
<p>Windows 12 网页版是一个开放源项目,<br>
|
||||
希望让用户在网络上预先体验 Windows 12,<br>
|
||||
@@ -437,7 +457,7 @@
|
||||
这也不是 Windows365 cloud PC<br>
|
||||
本项目中微软、Windows和其他示范产品是微软公司的商标</p>
|
||||
</div>
|
||||
<div class="a dock theme" title="切换主题" onclick="toggletheme()">
|
||||
<div class="a dock theme" win12_title="切换主题" onclick="toggletheme()">
|
||||
<svg viewBox="0,0,307,307" class="light" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"><defs><clipPath id="theme-light-clip0"><rect x="79" y="77" width="307" height="307"/></clipPath><linearGradient x1="128.499" y1="49.9991" x2="337.501" y2="412.001" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="theme-light-fill1"><stop offset="0" stop-color="#FFC567"/><stop offset="0.18" stop-color="#FFC567"/><stop offset="0.8" stop-color="#EE54F2"/></linearGradient></defs><g clip-path="url(#theme-light-clip0)" transform="translate(-79 -77)"><path d="M80 231C80 146.5 148.5 78 233 78 317.5 78 386 146.5 386 231 386 315.5 317.5 384 233 384 148.5 384 80 315.5 80 231Z" fill="url(#theme-light-fill1)" fill-rule="evenodd"/></g></svg>
|
||||
<svg viewBox="0,0,275,294" class="dark" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"><defs><clipPath id="theme-dark-clip0"><rect x="525" y="230" width="275" height="294"/></clipPath><linearGradient x1="599.492" y1="203.887" x2="725.508" y2="550.113" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="theme-dark-fill1"><stop offset="0" stop-color="#2474B6"/><stop offset="0.42" stop-color="#2474B6"/><stop offset="0.98" stop-color="#FFD966"/><stop offset="1" stop-color="#FFD966"/></linearGradient></defs><g clip-path="url(#theme-dark-clip0)" transform="translate(-525 -230)"><path d="M635.002 236.062C638.664 240.491 639.245 246.694 636.469 251.721 625.869 271.094 620.334 292.809 620.372 314.869 620.372 388.255 680.469 447.679 754.537 447.679 764.199 447.679 773.604 446.675 782.643 444.759 788.307 443.538 794.156 445.809 797.493 450.526 801.036 455.459 800.803 462.148 796.925 466.824 767.803 502.434 724.103 523.073 677.976 523 593.458 523 525 455.217 525 371.701 525 308.846 563.757 254.933 618.942 232.083 624.588 229.708 631.132 231.329 635.002 236.062Z" fill="url(#theme-dark-fill1)" fill-rule="evenodd"/></g></svg>
|
||||
</div>
|
||||
@@ -462,8 +482,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="desktop" oncontextmenu="return showcm(event,'desktop',null)">
|
||||
<div ondblclick="openapp('explorer');" ontouchstart="openapp('explorer');">
|
||||
<img src="apps/icons/explorer/thispc.png" title="显示连接到此计算机的驱动器和硬件。">
|
||||
<div ondblclick="openapp('explorer');" ontouchstart="openapp('explorer');" win12_title="显示连接到此计算机的驱动器和硬件。">
|
||||
<img src="apps/icons/explorer/thispc.png">
|
||||
<p>此电脑</p>
|
||||
</div>
|
||||
<div class="b" ondblclick="openapp('setting');" ontouchstart="openapp('setting');">
|
||||
@@ -483,9 +503,12 @@
|
||||
<div id="dp">
|
||||
<list>
|
||||
</list>
|
||||
</div>
|
||||
<div id="descp">
|
||||
|
||||
</div>
|
||||
<div id="window-fill"></div>
|
||||
<div class="window setting" onmousedown="focwin('setting')" ontouchstart="focwin('setting')">
|
||||
<div class="window setting" onmousedown="focwin('setting')" ontouchstart="focwin('setting')">
|
||||
<div class="titbar" oncontextmenu="return showcm(event,'titbar','setting')" ondblclick="maxwin('setting')">
|
||||
<img src="icon/setting.png" class="icon"><p>设置</p>
|
||||
<div>
|
||||
@@ -531,7 +554,7 @@
|
||||
<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>
|
||||
<a style="color: var(--href);text-decoration: underline !important;;" class="a">重命名</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-list">
|
||||
@@ -573,22 +596,22 @@
|
||||
</div>
|
||||
<div class="border-radius"><icon></icon><div><p>圆角</p><p>设置系统界面中是否启用圆角</p></div>
|
||||
<div class="alr">
|
||||
<a class="a checkbox checked" onclick="$(this).toggleClass('checked');$(':root').toggleClass('nobr')" id="#nobr"></a>
|
||||
<a class="a checkbox checked" onclick="$(this).toggleClass('checked');$(':root').toggleClass('nobr')"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-radius"><icon></icon><div><p>动画</p><p>系统界面元素过渡动画</p></div>
|
||||
<div class="alr">
|
||||
<a class="a checkbox checked" onclick="$(this).toggleClass('checked');$(':root').toggleClass('notrans')" id="#notrans"></a>
|
||||
<a class="a checkbox checked" onclick="$(this).toggleClass('checked');$(':root').toggleClass('notrans')"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-radius"><icon></icon><div><p>阴影</p><p>为系统界面元素添加阴影效果</p></div>
|
||||
<div class="alr">
|
||||
<a class="a checkbox checked" onclick="$(this).toggleClass('checked');$(':root').toggleClass('nosd')" id="#nosd"></a>
|
||||
<a class="a checkbox checked" onclick="$(this).toggleClass('checked');$(':root').toggleClass('nosd')"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-radius"><icon></icon><div><p>透明效果</p><p>某些界面启用亚克力背景透明效果</p></div>
|
||||
<div class="border-radius"><icon></icon><div><p>多窗口透明</p><p>为所有窗口开启透明效果,而不是仅用于焦点窗口(开启后窗口的拖拽操作可能卡顿)</p></div>
|
||||
<div class="alr">
|
||||
<a class="a checkbox checked" onclick="$(this).toggleClass('checked');$(':root').toggleClass('noblur')" id="#noblur"></a>
|
||||
<a class="a checkbox" onclick="$(this).toggleClass('checked');$(':root').toggleClass('moreblur')"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -728,9 +751,9 @@
|
||||
<div style="margin-left: 20px;">
|
||||
<h2 class="tit"><span></span>简介</h2>
|
||||
<p>  Windows 12 网页版是一个开源项目, 由谭景元原创, 使用 Html,css,js , 在网络上模拟、创新操作系统</p>
|
||||
<p>  此项目已发布至 Github, <a onclick="window.open('https://github.com/tjy-gitnub/win12','_blank');" title="https://github.com/tjy-gitnub/win12" class="jump">点击此处查看</a></p>
|
||||
<p>  若您对于该项目有任何意见或建议,请在 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>  原创作者谭景元,点击以<a onclick="window.open('https://tjy-gitnub.github.io/','_blank');" title="https://tjy-gitnub.github.io/" class="jump">了解详细</a></p>
|
||||
<p>  此项目已发布至 Github, <a onclick="window.open('https://github.com/tjy-gitnub/win12','_blank');" win12_title="https://github.com/tjy-gitnub/win12" class="jump">点击此处查看</a></p>
|
||||
<p>  若您对于该项目有任何意见或建议,请在 Github 上<a onclick="window.open('https://github.com/tjy-gitnub/win12/issues','_blank');" win12_title="https://github.com/tjy-gitnub/win12/issues" class="jump">提交 issues</a>, 您的问题会被尽可能快地解决</p>
|
||||
<p>  原创作者谭景元,点击以<a onclick="window.open('https://tjy-gitnub.github.io/','_blank');" win12_title="https://tjy-gitnub.github.io/" class="jump">了解详细</a></p>
|
||||
<h2 class="tit"><span></span>开源说明</h2>
|
||||
<p>  由于这是一个开源项目,你可以在任何媒介以任何形式复制、发行本作品。</p>
|
||||
<p>  你还可以对该项目进行修改、转换或以本作品为基础进行创作。</p>
|
||||
@@ -744,6 +767,21 @@
|
||||
<div class="cnt update">
|
||||
<h1 class="tit"><span></span>更新记录</h1>
|
||||
<div style="margin-left: 20px;">
|
||||
<details><summary><span>v4.3.0</span> 其实我想发布成5.0版的</summary><p>
|
||||
<span>欢迎(尽量在issues中,当然也可以在下面版本中链接里)提出问题和建议</span><br>
|
||||
  -搜索菜单重新设计<br>
|
||||
  -列表悬停立体效果(全局,深色模式可能会明显一点,灵感源于win11,大家可以帮忙找一个浅色模式的边框颜色)<br>
|
||||
  -新增鼠标悬停提示框(全局)<br>
|
||||
  -记事本全新设计与功能(向Word努力)<br>
|
||||
  -计算器新样式<br>
|
||||
  -新增多开亚克力设置<br>
|
||||
  -关于应用更新记录动画<br>
|
||||
  -文件资源管理器的新动画<br>
|
||||
  -桌面图标点击效果<br>
|
||||
  -修复设置的小竖条位置问题<br>
|
||||
  -新新闻<br>
|
||||
  -细节优化和修复</p>
|
||||
</details>
|
||||
<details><summary><span>v4.2.0</span> 外观整改</summary><p>
|
||||
<a href="https://forms.office.com/Pages/ResponsePage.aspx?id=DQSIkWdsW0yxEjajBLZtrQAAAAAAAAAAAAO__SDw7SZUQ0xGSTFTSjBKMVY2SFM5U1ZWNFc5NkU3Ry4u" class="jump">参与小调查,帮助改进项目</a><br>
|
||||
  -新的计算器外观<br>
|
||||
@@ -867,7 +905,7 @@
|
||||
</p>
|
||||
</details>
|
||||
</div>
|
||||
<a class="jump" title="https://github.com/tjy-gitnub/win12/blob/main/update.md" onclick="window.open('https://github.com/tjy-gitnub/win12/blob/main/update.md','_blank')" style="text-align: center;display: block;margin-top: 5px;">更多</a>
|
||||
<a class="jump" win12_title="https://github.com/tjy-gitnub/win12/blob/main/update.md" onclick="window.open('https://github.com/tjy-gitnub/win12/blob/main/update.md','_blank')" style="text-align: center;display: block;margin-top: 5px;">更多</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -890,11 +928,12 @@
|
||||
<a class="a" onmouseover="showdp(this,'notepad.edit',null)" onmouseleave="hidedp()">编辑</a>
|
||||
<a class="a" onmouseover="showdp(this,'notepad.view',null)" onmouseleave="hidedp()">格式</a>
|
||||
</div>
|
||||
<div class="text-box" contenteditable="true"></div>
|
||||
<div class="text-box" contenteditable="true" spellcheck="false">
|
||||
<p>Type here...</p>
|
||||
</div>
|
||||
<a href="" download="未命名.txt" style="opacity: 0;" class="save">另存为</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="window notepad-fonts" onmousedown="focwin('notepad-fonts')" ontouchstart="focwin('notepad-fonts')">
|
||||
<div class="titbar" oncontextmenu="return showcm(event,'titbar','notepad-fonts')">
|
||||
<img src="icon/notepad.png" class="icon">
|
||||
@@ -913,29 +952,28 @@
|
||||
<input type="text" />
|
||||
<list class="value-box">
|
||||
<a class="option">Arial</a>
|
||||
<a class="option">Arial Black</a>
|
||||
<a class="option">"Book Antiqua"</a>
|
||||
<a class="option">Charcoal</a>
|
||||
<a class="option">"Comic Sans MS"</a>
|
||||
<a class="option">Book Antiqua</a>
|
||||
<a class="option">Cascadia Code</a>
|
||||
<a class="option">Comic Sans MS</a>
|
||||
<a class="option">Consolas</a>
|
||||
<a class="option">Courier</a>
|
||||
<a class="option">"Courier New"</a>
|
||||
<a class="option">cursive</a>
|
||||
<a class="option">Geneva</a>
|
||||
<a class="option">Georgia</a>
|
||||
<a class="option">Helvetica</a>
|
||||
<a class="option">"Lucida Console"</a>
|
||||
<a class="option">"Lucida Grande"</a>
|
||||
<a class="option">"Lucida Sans Unicode"</a>
|
||||
<a class="option">Ink Free</a>
|
||||
<a class="option">Lucida Console</a>
|
||||
<a class="option">Microsoft YaHei UI</a>
|
||||
<a class="option">Monaco</a>
|
||||
<a class="option">monospace</a>
|
||||
<a class="option">Palatino</a>
|
||||
<a class="option">"Palatino Linotype"</a>
|
||||
<a class="option">sans-serif</a>
|
||||
<a class="option">Palatino Linotype</a>
|
||||
<a class="option">serif</a>
|
||||
<a class="option">Tahoma</a>
|
||||
<a class="option">"Trebuchet MS"</a>
|
||||
<a class="option">Verdana</a>
|
||||
<a class="option">仿宋</a>
|
||||
<a class="option">方正舒体</a>
|
||||
<a class="option">华文行楷</a>
|
||||
<a class="option">楷体</a>
|
||||
<a class="option">宋体</a>
|
||||
<a class="option">幼圆</a>
|
||||
</list>
|
||||
</div>
|
||||
<div class="select-input" id="win-notepad-font-size">
|
||||
|
||||
+160
-72
@@ -1,14 +1,14 @@
|
||||
// 列表点击 + 边框发光
|
||||
document.querySelectorAll(`#s-m-l>list>a,#win-setting>.menu>list>a`).forEach(la => {
|
||||
la.addEventListener('mousemove', e => {
|
||||
x = e.clientX - $(la).offset()['left'];
|
||||
y = e.clientY - $(la).offset()['top'];
|
||||
$(la).css('cssText', `background:radial-gradient(circle at ${x}px ${y}px,var(--hover) 20px, #00000000) center;background-size:110% 100%;border-image:radial-gradient(circle at ${x}px ${y}px,var(--hover) 20px, #00000000 40px) 2;`)
|
||||
});
|
||||
la.addEventListener('mouseout', () => {
|
||||
$(la).css('cssText', `background-image:radial-gradient(#00000000,#00000000),radial-gradient(#00000000,#00000000);`)
|
||||
});
|
||||
});
|
||||
// document.querySelectorAll(`#s-m-l>list>a,#win-setting>.menu>list>a`).forEach(la => {
|
||||
// la.addEventListener('mousemove', e => {
|
||||
// x = e.clientX - $(la).offset()['left'];
|
||||
// y = e.clientY - $(la).offset()['top'];
|
||||
// $(la).css('cssText', `background:radial-gradient(circle at ${x}px ${y}px,var(--hover) 20px, #00000000) center;background-size:110% 100%;border-image:radial-gradient(circle at ${x}px ${y}px,var(--hover) 20px, #00000000 40px) 2;`)
|
||||
// });
|
||||
// la.addEventListener('mouseout', () => {
|
||||
// $(la).css('cssText', `background-image:radial-gradient(#00000000,#00000000),radial-gradient(#00000000,#00000000);`)
|
||||
// });
|
||||
// });
|
||||
|
||||
document.querySelectorAll(`list.focs`).forEach(li => {
|
||||
// li.querySelectorAll(`a`).forEach(la => {
|
||||
@@ -19,14 +19,15 @@ document.querySelectorAll(`list.focs`).forEach(li => {
|
||||
// $(_).css('left',la.offsetLeft-li.offsetLeft);
|
||||
// });
|
||||
// });
|
||||
li.addEventListener('click',e=>{
|
||||
let _=li.querySelector('span.focs'),la=li.querySelector('a.check');
|
||||
li.addEventListener('click', e => {
|
||||
let _ = li.querySelector('span.focs'), la = li.querySelector('a.check'),
|
||||
las = li.querySelectorAll('a');
|
||||
$(_).addClass('cl');
|
||||
$(_).css('top',la.offsetTop-li.offsetTop-li.offsetHeight);
|
||||
$(_).css('left',la.offsetLeft-li.offsetLeft);
|
||||
$(_).css('top', la.offsetTop - las[las.length - 1].offsetTop);
|
||||
$(_).css('left', la.offsetLeft - li.offsetLeft);
|
||||
setTimeout(() => {
|
||||
$(_).removeClass('cl');
|
||||
}, 200);
|
||||
}, 500);
|
||||
})
|
||||
});
|
||||
// 禁止拖拽图片
|
||||
@@ -75,8 +76,8 @@ let cms = {
|
||||
'desktop': [
|
||||
['<i class="bi bi-arrow-clockwise"></i> 刷新', `$('#desktop').css('opacity','0');setTimeout(()=>{$('#desktop').css('opacity','1');},100);`],
|
||||
['<i class="bi bi-circle-square"></i> 切换主题', 'toggletheme()'],
|
||||
`<a onmousedown="window.open('https://github.com/tjy-gitnub/win12','_blank');" title="https://github.com/tjy-gitnub/win12"><i class="bi bi-github"></i> 在 Github 中查看此项目</a>`,
|
||||
`<a onmousedown="window.open('https://github.com/tjy-gitnub/win12/issues','_blank');" title="https://github.com/tjy-gitnub/win12/issues"><i class="bi bi-chat-left-text"></i> 发送反馈</a>`,
|
||||
`<a onmousedown="window.open('https://github.com/tjy-gitnub/win12','_blank');" win12_title="https://github.com/tjy-gitnub/win12" onmouseenter="showdescp(event)" onmouseleave="hidedescp(event)"><i class="bi bi-github"></i> 在 Github 中查看此项目</a>`,
|
||||
`<a onmousedown="window.open('https://github.com/tjy-gitnub/win12/issues','_blank');" win12_title="https://github.com/tjy-gitnub/win12/issues" onmouseenter="showdescp(event)" onmouseleave="hidedescp(event)"><i class="bi bi-chat-left-text"></i> 发送反馈</a>`,
|
||||
['<i class="bi bi-info-circle"></i> 关于 Win12 网页版', `$('#win-about>.about').addClass('show');$('#win-about>.update').removeClass('show');openapp('about');if($('.window.about').hasClass('min'))minwin('about');`],
|
||||
],
|
||||
'winx': [
|
||||
@@ -120,7 +121,7 @@ let cms = {
|
||||
}
|
||||
},
|
||||
['<i class="bi bi-info-circle"></i> 更多信息', `$('#win-about>.about').addClass('show');$('#win-about>.update').removeClass('show');
|
||||
openapp('about');if($('.window.about').hasClass('min'))minwin('about');`]
|
||||
openapp('about');if($('.window.about').hasClass('min'))minwin('about');$('.dock.about').removeClass('show')`]
|
||||
],
|
||||
'msgupdate': [
|
||||
['<i class="bi bi-layout-text-window-reverse"></i> 查看详细', `openapp('about');if($('.window.about').hasClass('min'))
|
||||
@@ -229,7 +230,16 @@ dps = {
|
||||
['<i class="bi bi-arrow-clockwise"></i> 重做 <info>Ctrl+Y</info>', 'document.execCommand(\'redo\')'],
|
||||
],
|
||||
'notepad.view': [
|
||||
['<i class="bi bi-fonts"></i> 字体 ', 'hidedp(true);showwin(\'notepad-fonts\');resetfonts();']
|
||||
['<i class="bi bi-type"></i> 插入正常字块', 'hidedp(true);$(\'#win-notepad>.text-box\')[0].innerHTML+=\'<p>T</p>\''],
|
||||
['<i class="bi bi-type-h1"></i> 插入主标题', 'hidedp(true);$(\'#win-notepad>.text-box\')[0].innerHTML+=\'<h1>H1</h1>\''],
|
||||
['<i class="bi bi-type-h2"></i> 插入次标题', 'hidedp(true);$(\'#win-notepad>.text-box\')[0].innerHTML+=\'<h2>H2</h2>\''],
|
||||
['<i class="bi bi-type-h3"></i> 插入副标题', 'hidedp(true);$(\'#win-notepad>.text-box\')[0].innerHTML+=\'<h3>H3</h3>\''],
|
||||
['<i class="bi bi-type-underline"></i> 插入下划线', 'hidedp(true);$(\'#win-notepad>.text-box\')[0].innerHTML+=\'<u>U</u>\''],
|
||||
['<i class="bi bi-type-strikethrough"></i> 插入删除线', 'hidedp(true);$(\'#win-notepad>.text-box\')[0].innerHTML+=\'<s>S</s>\''],
|
||||
['<i class="bi bi-type-italic"></i> 插入斜体字', 'hidedp(true);$(\'#win-notepad>.text-box\')[0].innerHTML+=\'<i>I</i>\''],
|
||||
['<i class="bi bi-type-bold"></i> 插入加粗字', 'hidedp(true);$(\'#win-notepad>.text-box\')[0].innerHTML+=\'<b>B</b>\''],
|
||||
'<hr>',
|
||||
['<i class="bi bi-fonts"></i> 字体', 'hidedp(true);showwin(\'notepad-fonts\');resetfonts();'],
|
||||
]
|
||||
}
|
||||
let dpt = null, isOnDp = false;
|
||||
@@ -291,10 +301,45 @@ function hidedp(force = false) {
|
||||
}, 200);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
// 悬停提示
|
||||
document.querySelectorAll('*[win12_title]:not(.notip)').forEach(a => {
|
||||
a.addEventListener('mouseenter', showdescp);
|
||||
a.addEventListener('mouseleave', hidedescp);
|
||||
})
|
||||
function showdescp(e) {
|
||||
$(e.target).attr('data-descp', 'waiting');
|
||||
setTimeout(() => {
|
||||
if ($(e.target).attr('data-descp') == 'hide') {
|
||||
return;
|
||||
}
|
||||
$(e.target).attr('data-descp', 'show');
|
||||
$('#descp').css('left', e.clientX + 15);
|
||||
$('#descp').css('top', e.clientY + 20);
|
||||
$('#descp').text($(e.target).attr('win12_title'));
|
||||
$('#descp').addClass('show-begin');
|
||||
setTimeout(() => {
|
||||
if (e.clientY + $('#descp')[0].offsetHeight + 20 >= $('html')[0].offsetHeight) {
|
||||
$('#descp').css('top', e.clientY - $('#descp')[0].offsetHeight - 10);
|
||||
}
|
||||
if (e.clientX + $('#descp')[0].offsetWidth + 15 >= $('html')[0].offsetWidth) {
|
||||
$('#descp').css('left', e.clientX - $('#descp')[0].offsetWidth - 10);
|
||||
}
|
||||
$('#descp').addClass('show');
|
||||
}, 100);
|
||||
}, 500);
|
||||
}
|
||||
function hidedescp(e) {
|
||||
$('#descp').removeClass('show');
|
||||
$(e.target).attr('data-descp', 'hide');
|
||||
setTimeout(() => {
|
||||
$('#descp').removeClass('show-begin');
|
||||
}, 100);
|
||||
}
|
||||
// 应用
|
||||
let apps = {
|
||||
setting: {
|
||||
init: () => {
|
||||
init: () => {
|
||||
$('#win-setting>.menu>list>a.system')[0].click();
|
||||
// let _=$('#win-setting>.menu>list>span.focs'),
|
||||
// la=$('#win-setting>.menu>list>a.system')[0],
|
||||
@@ -304,12 +349,12 @@ let apps = {
|
||||
// _.css('top',la.offsetTop-li.offsetTop-li.offsetHeight);
|
||||
// _.css('left',la.offsetLeft-li.offsetLeft);
|
||||
},
|
||||
page:(name)=>{
|
||||
$('#win-setting>.page>.cnt.'+name).scrollTop(0);
|
||||
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>.page>.cnt.' + name).addClass('show');
|
||||
$('#win-setting>.menu>list>a.check').removeClass('check');
|
||||
$('#win-setting>.menu>list>a.'+name).addClass('check');
|
||||
$('#win-setting>.menu>list>a.' + name).addClass('check');
|
||||
}
|
||||
},
|
||||
explorer: {
|
||||
@@ -320,9 +365,10 @@ let apps = {
|
||||
$('#win-explorer>.main>.content>.view')[0].innerHTML = `<style>#win-explorer>.main>.content>.view>.class{margin-left: 20px;display: flex;}
|
||||
#win-explorer>.main>.content>.view>.class>img{width: 20px;height: 20px;margin-top: 3px;margin-right: 5px;filter:brightness(0.9);}
|
||||
#win-explorer>.main>.content>.view>.group{display: flex;flex-wrap: wrap;padding: 10px 20px;}
|
||||
#win-explorer>.main>.content>.view>.group>.item{width: 280px;margin: 5px;height: 80px;
|
||||
#win-explorer>.main>.content>.view>.group>.item{width: 280px;margin: 5px;height:80px;border: 1px solid #6f6f6f30;
|
||||
background: radial-gradient(circle, var(--card),var(--card));border-radius: 10px;display: flex;}
|
||||
#win-explorer>.main>.content>.view>.group>.item:hover{background-color: var(--hover);}
|
||||
#win-explorer>.main>.content>.view>.group>.item:active{transform: scale(0.97);}
|
||||
#win-explorer>.main>.content>.view>.group>.item>img{width: 55px;height: 55px;margin-top: 18px;margin-left: 10px;}
|
||||
#win-explorer>.main>.content>.view>.group>.item>div{flex-grow: 1;padding: 5px 5px 0 0;}
|
||||
#win-explorer>.main>.content>.view>.group>.item>div>.bar{width: calc(100% - 10px);height: 8px;border-radius: 10px;
|
||||
@@ -408,13 +454,56 @@ let apps = {
|
||||
}
|
||||
},
|
||||
terminal: {
|
||||
init: () => {
|
||||
init: () => {
|
||||
$('#win-terminal>pre').html(`Micrsotft Windosw [版本 12.0.39035.7324]
|
||||
(c) Micrsotft Corparotoin。保所留有权利。
|
||||
一个摆设,后续会完善。
|
||||
|
||||
C:\Windows\System32> <input type="text" oninput="setTimeout(() => {$('#win-terminal>pre')[0].innerHTML+=this.outerHTML;$('#win-terminal>pre>input').focus()}, 0);$('#win-terminal>pre')[0].innerText+=$(this).val();">`)
|
||||
}
|
||||
},
|
||||
search: {
|
||||
rand: [{ name: '农夫山泉瓶盖简介.txt', bi: 'text', ty: '文本文档' },
|
||||
{ name: '瓶盖构造图.png', bi: 'image', ty: 'PNG 文件' },
|
||||
{ name: '瓶盖结构说明.docx', bi: 'richtext', ty: 'Microsoft Word 文档' },
|
||||
{ name: '可口可乐瓶盖.jpg', bi: 'image', ty: 'JPG 文件' },
|
||||
{ name: '可口可乐瓶盖历史.pptx', bi: 'slides', ty: 'Microsoft Powerpoint 演示文稿' },
|
||||
{ name: '瓶盖质量统计分析.xlsx', bi: 'ruled', ty: 'Microsoft Excel 工作表' },
|
||||
{ name: '农夫山泉瓶盖.svg', bi: 'image', ty: 'SVG 文件' },
|
||||
{ name: '瓶盖介绍.doc', bi: 'richtext', ty: 'Microsoft Word 文档' }],
|
||||
search: le => {
|
||||
if (le > 0) {
|
||||
$('#search-win>.ans>.list>list').html(
|
||||
`<a class="a" onclick="apps.search.showdetail(${le % 8})"><i class="bi bi-file-earmark-${
|
||||
apps.search.rand[le % 8].bi}"></i> ${apps.search.rand[le % 8].name
|
||||
}</a><a class="a" onclick="apps.search.showdetail(${(le + 3) % 8})"><i class="bi bi-file-earmark-${
|
||||
apps.search.rand[(le + 3) % 8].bi}"></i> ${apps.search.rand[(le + 3) % 8].name}</a>`);
|
||||
apps.search.showdetail(le % 8);
|
||||
} else {
|
||||
$('#search-win>.ans>.list>list').html(
|
||||
`<p class="text">推荐</p>
|
||||
<a onclick="openapp('setting');$('#search-btn').removeClass('show');
|
||||
$('#search-win').removeClass('show');
|
||||
setTimeout(() => {
|
||||
$('#search-win').removeClass('show-begin');
|
||||
}, 200);">
|
||||
<img src="icon/setting.png"><p>设置</p></a>
|
||||
<a onclick="openapp('about');$('#search-btn').removeClass('show');
|
||||
$('#search-win').removeClass('show');
|
||||
setTimeout(() => {
|
||||
$('#search-win').removeClass('show-begin');
|
||||
}, 200);">
|
||||
<img src="icon/about.png"><p>关于Win12网页版</p></a>`);
|
||||
$('#search-win>.ans>.view').removeClass('show');
|
||||
}
|
||||
},
|
||||
showdetail: i => {
|
||||
$('#search-win>.ans>.view').addClass('show');
|
||||
let inf = apps.search.rand[i];
|
||||
$('#search-win>.ans>.view>.fname>.bi').attr('class', 'bi bi-file-earmark-' + inf.bi);
|
||||
$('#search-win>.ans>.view>.fname>.name').text(inf.name);
|
||||
$('#search-win>.ans>.view>.fname>.type').text(inf.ty);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -469,20 +558,19 @@ for (let i = 1; i <= daysum; i++) {
|
||||
$('#datebox>.cont>.body')[0].innerHTML += `<p>${i}</p>`;
|
||||
}
|
||||
function openapp(name) {
|
||||
// focwin(name); 这里会添加2个窗口,因为我在 line 457 加了foc的内容
|
||||
if ($('#taskbar>.' + name).length != 0) {
|
||||
return;
|
||||
}
|
||||
$('.window.' + name).addClass('load');
|
||||
showwin(name);
|
||||
$('#taskbar').attr('count', Number($('#taskbar').attr('count')) + 1);
|
||||
$('#taskbar').append(`<a class="${name}" onclick="taskbarclick(\'${name}\')"><img src="icon/${name}.png"></a>`);
|
||||
$('#taskbar').append(`<a class="${name}" onclick="taskbarclick(\'${name}\')" win12_title="${$(`.window.${name}>.titbar>p`).text()}" onmouseenter="showdescp(event)" onmouseleave="hidedescp(event)"><img src="icon/${name}.png"></a>`);
|
||||
if ($('#taskbar').attr('count') == '1') {
|
||||
$('#taskbar').css('display', 'flex');
|
||||
}
|
||||
$('#taskbar>.'+name).addClass('foc');
|
||||
$('#taskbar>.' + name).addClass('foc');
|
||||
setTimeout(() => {
|
||||
$('#taskbar').css('width', 10 + $('#taskbar').attr('count') * 34);
|
||||
$('#taskbar').css('width', 4 + $('#taskbar').attr('count') * (34 + 4));
|
||||
}, 0);
|
||||
apps[name].init();
|
||||
setTimeout(() => {
|
||||
@@ -495,7 +583,7 @@ function showwin(name) {
|
||||
setTimeout(() => { $('.window.' + name).addClass('show'); }, 0);
|
||||
setTimeout(() => { $('.window.' + name).addClass('notrans'); }, 200);
|
||||
$('.window.' + name).attr('style', `top: 10%;left: 15%;`);
|
||||
$('#taskbar>.'+wo[0]).removeClass('foc');
|
||||
$('#taskbar>.' + wo[0]).removeClass('foc');
|
||||
$('.window.' + wo[0]).removeClass('foc');
|
||||
wo.splice(0, 0, name);
|
||||
orderwindow();
|
||||
@@ -508,7 +596,7 @@ function hidewin(name, arg = 'window') {
|
||||
if (arg == 'window') {
|
||||
$('#taskbar').attr('count', Number($('#taskbar').attr('count')) - 1)
|
||||
$('#taskbar>.' + name).remove();
|
||||
$('#taskbar').css('width', 10 + $('#taskbar').attr('count') * 34);
|
||||
$('#taskbar').css('width', 4 + $('#taskbar').attr('count') * (34 + 4));
|
||||
setTimeout(() => {
|
||||
if ($('#taskbar').attr('count') == '0') {
|
||||
$('#taskbar').css('display', 'none');
|
||||
@@ -517,7 +605,7 @@ function hidewin(name, arg = 'window') {
|
||||
}
|
||||
setTimeout(() => { $('.window.' + name).removeClass('show-begin'); }, 200);
|
||||
$('.window.' + name + '>.titbar>div>.wbtg.max').html('<i class="bi bi-app"></i>');
|
||||
wo.splice(wo.indexOf('name'),1);
|
||||
wo.splice(wo.indexOf('name'), 1);
|
||||
orderwindow();
|
||||
}
|
||||
function maxwin(name, trigger = true) {
|
||||
@@ -537,8 +625,8 @@ function maxwin(name, trigger = true) {
|
||||
// }
|
||||
} else {
|
||||
if (trigger) {
|
||||
$('.window.' + name).attr('data-pos-x', `${$('.window.'+name).css('left')}`);
|
||||
$('.window.' + name).attr('data-pos-y', `${$('.window.'+name).css('top')}`);
|
||||
$('.window.' + name).attr('data-pos-x', `${$('.window.' + name).css('left')}`);
|
||||
$('.window.' + name).attr('data-pos-y', `${$('.window.' + name).css('top')}`);
|
||||
}
|
||||
$('.window.' + name).removeClass('notrans');
|
||||
$('.window.' + name).addClass('max');
|
||||
@@ -583,11 +671,11 @@ function orderwindow() {
|
||||
}
|
||||
}
|
||||
// 以下函数基于bug运行,切勿改动!
|
||||
function focwin(name,arg='window') {
|
||||
function focwin(name, arg = 'window') {
|
||||
// if(wo[0]==name)return;
|
||||
if(arg=='window'){
|
||||
$('#taskbar>.'+wo[0]).removeClass('foc');
|
||||
$('#taskbar>.'+name).addClass('foc');
|
||||
if (arg == 'window') {
|
||||
$('#taskbar>.' + wo[0]).removeClass('foc');
|
||||
$('#taskbar>.' + name).addClass('foc');
|
||||
}
|
||||
$('.window.' + wo[0]).removeClass('foc');
|
||||
wo.splice(wo.indexOf(name), 1);
|
||||
@@ -595,13 +683,13 @@ function focwin(name,arg='window') {
|
||||
orderwindow();
|
||||
$('.window.' + name).addClass('foc');
|
||||
}
|
||||
function taskbarclick(name){
|
||||
if($('.window.'+name).hasClass('foc')){
|
||||
function taskbarclick(name) {
|
||||
if ($('.window.' + name).hasClass('foc')) {
|
||||
minwin(name);
|
||||
focwin(null); // 禁改
|
||||
return;
|
||||
}
|
||||
if($('.window.'+name).hasClass('min')){
|
||||
if ($('.window.' + name).hasClass('min')) {
|
||||
minwin(name);
|
||||
}
|
||||
focwin(name);
|
||||
@@ -622,16 +710,16 @@ function toggletheme() {
|
||||
$('.dock.theme').toggleClass('dk');
|
||||
$(':root').toggleClass('dark');
|
||||
if ($(':root').hasClass('dark')) {
|
||||
setData('theme','dark');
|
||||
}else{
|
||||
setData('theme','light');
|
||||
setData('theme', 'dark');
|
||||
} else {
|
||||
setData('theme', 'light');
|
||||
}
|
||||
}
|
||||
// 拖拽窗口
|
||||
const page = document.getElementsByTagName('html')[0];
|
||||
const titbars = document.querySelectorAll('.window>.titbar');
|
||||
const wins = document.querySelectorAll('.window');
|
||||
let deltaLeft = 0, deltaTop = 0, fil = false, filty='none', bfLeft = 0, bfTop = 0;
|
||||
let deltaLeft = 0, deltaTop = 0, fil = false, filty = 'none', bfLeft = 0, bfTop = 0;
|
||||
for (let i = 0; i < wins.length; i++) {
|
||||
const win = wins[i];
|
||||
const titbar = titbars[i];
|
||||
@@ -651,9 +739,9 @@ for (let i = 0; i < wins.length; i++) {
|
||||
$('#window-fill').addClass('fill');
|
||||
}, 0);
|
||||
fil = this;
|
||||
filty='top';
|
||||
filty = 'top';
|
||||
}
|
||||
}else if(cx<=0){
|
||||
} else if (cx <= 0) {
|
||||
this.setAttribute('style', `left:${-deltaLeft}px;top:${cy - deltaTop}px`);
|
||||
if (this.classList[1] != 'calc' && this.classList[1] != 'notepad-fonts') {
|
||||
$('#window-fill').addClass('left');
|
||||
@@ -661,9 +749,9 @@ for (let i = 0; i < wins.length; i++) {
|
||||
$('#window-fill').addClass('fill');
|
||||
}, 0);
|
||||
fil = this;
|
||||
filty='left';
|
||||
filty = 'left';
|
||||
}
|
||||
}else if(cx>=document.body.offsetWidth-2){
|
||||
} else if (cx >= document.body.offsetWidth - 2) {
|
||||
this.setAttribute('style', `left:calc(100% - ${deltaLeft}px);top:${cy - deltaTop}px`);
|
||||
if (this.classList[1] != 'calc' && this.classList[1] != 'notepad-fonts') {
|
||||
$('#window-fill').addClass('right');
|
||||
@@ -671,7 +759,7 @@ for (let i = 0; i < wins.length; i++) {
|
||||
$('#window-fill').addClass('fill');
|
||||
}, 0);
|
||||
fil = this;
|
||||
filty='right';
|
||||
filty = 'right';
|
||||
}
|
||||
} else if (fil) {
|
||||
$('#window-fill').removeClass('fill');
|
||||
@@ -681,14 +769,14 @@ for (let i = 0; i < wins.length; i++) {
|
||||
$('#window-fill').removeClass('right');
|
||||
}, 200);
|
||||
fil = false;
|
||||
filty='none';
|
||||
filty = 'none';
|
||||
} else if ($(this).hasClass('max')) {
|
||||
deltaLeft = deltaLeft / (this.offsetWidth - (45 * 3)) * ((0.7 * document.body.offsetWidth) - (45 * 3));
|
||||
maxwin(this.classList[1], false);
|
||||
// 窗口控制按钮宽 45px
|
||||
this.setAttribute('style', `left:${cx - deltaLeft}px;top:${cy - deltaTop}px;`);
|
||||
$('.window.' + this.classList[1] + '>.titbar>div>.wbtg.max').html('<i class="bi bi-app"></i>');
|
||||
|
||||
|
||||
$(this).addClass('notrans');
|
||||
}
|
||||
}
|
||||
@@ -718,12 +806,12 @@ for (let i = 0; i < wins.length; i++) {
|
||||
page.addEventListener('mouseup', () => {
|
||||
page.onmousemove = null;
|
||||
if (fil) {
|
||||
if(filty=='top')
|
||||
maxwin(fil.classList[1], false);
|
||||
else if(filty=='left'){
|
||||
if (filty == 'top')
|
||||
maxwin(fil.classList[1], false);
|
||||
else if (filty == 'left') {
|
||||
maxwin(fil.classList[1], false);
|
||||
$(fil).addClass('left');
|
||||
}else if(filty=='right'){
|
||||
} else if (filty == 'right') {
|
||||
maxwin(fil.classList[1], false);
|
||||
$(fil).addClass('right');
|
||||
}
|
||||
@@ -741,12 +829,12 @@ page.addEventListener('mouseup', () => {
|
||||
page.addEventListener('touchend', () => {
|
||||
page.ontouchmove = null;
|
||||
if (fil) {
|
||||
if(filty=='top')
|
||||
maxwin(fil.classList[1], false);
|
||||
else if(filty=='left'){
|
||||
if (filty == 'top')
|
||||
maxwin(fil.classList[1], false);
|
||||
else if (filty == 'left') {
|
||||
maxwin(fil.classList[1], false);
|
||||
$(fil).addClass('left');
|
||||
}else if(filty=='right'){
|
||||
} else if (filty == 'right') {
|
||||
maxwin(fil.classList[1], false);
|
||||
$(fil).addClass('right');
|
||||
}
|
||||
@@ -897,11 +985,11 @@ document.getElementsByTagName('body')[0].onload = function nupd() {
|
||||
navigator.serviceWorker.register('sw.js', { updateViaCache: 'none', scope: './' });
|
||||
|
||||
navigator.serviceWorker.controller.postMessage({
|
||||
head:'is_update'
|
||||
head: 'is_update'
|
||||
});
|
||||
|
||||
navigator.serviceWorker.controller.postMessage({
|
||||
head:'get_userdata'
|
||||
head: 'get_userdata'
|
||||
});
|
||||
|
||||
navigator.serviceWorker.addEventListener('message', function (e) {
|
||||
@@ -910,19 +998,19 @@ navigator.serviceWorker.addEventListener('message', function (e) {
|
||||
$('.msg.update>.main>.tit').html('<i class="bi bi-stars" style="background-image: linear-gradient(100deg, var(--theme-1), var(--theme-2));-webkit-background-clip: text;-webkit-text-fill-color: transparent;text-shadow:3px 3px 5px var(--sd);filter:saturate(200%) brightness(0.9);"></i> ' + $('#win-about>.cnt.update>div>details:first-child>summary').text());
|
||||
$('.msg.update>.main>.cont').html($('#win-about>.cnt.update>div>details:first-child>p').html());
|
||||
$('#loadbackupdate').css('display', 'block');
|
||||
}else if(e.data.head=='userdata'){
|
||||
const d=e.data.data;
|
||||
} else if (e.data.head == 'userdata') {
|
||||
const d = e.data.data;
|
||||
console.log(d);
|
||||
if(d.theme=='dark')$(':root').addClass('dark');
|
||||
$(':root').css('--theme-1',d.color1);
|
||||
$(':root').css('--theme-2',d.color2);
|
||||
if (d.theme == 'dark') $(':root').addClass('dark');
|
||||
$(':root').css('--theme-1', d.color1);
|
||||
$(':root').css('--theme-2', d.color2);
|
||||
}
|
||||
});
|
||||
function setData(k,v) {
|
||||
function setData(k, v) {
|
||||
navigator.serviceWorker.controller.postMessage({
|
||||
head:'set_userdata',
|
||||
key:k,
|
||||
value:v
|
||||
head: 'set_userdata',
|
||||
key: k,
|
||||
value: v
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
Reference in New Issue
Block a user