diff --git a/apps/setting/icons.woff2 b/apps/setting/icons.woff2 new file mode 100644 index 0000000..61fdc34 Binary files /dev/null and b/apps/setting/icons.woff2 differ diff --git a/apps/setting/main.css b/apps/setting/main.css index 034522c..2d49a8f 100644 --- a/apps/setting/main.css +++ b/apps/setting/main.css @@ -1,3 +1,29 @@ +@font-face { + font-family: SettingsIcons; + src: url(icons.woff2) format("woff2") +} + +@font-face { + font-display: block; + font-family: "booticon"; + src: url("../../fonts/bootstrap-icons.woff2?8d200481aa7f02a2d63a331fc782cfaf") format("woff2"), + url("../../fonts/bootstrap-icons.woff?8d200481aa7f02a2d63a331fc782cfaf") format("woff"); +} + +.title{ + font-size: 35px; + margin: 0; +} + +.s-icon{ + font-family: SettingsIcons; +} + +html{ + width: 100%; + overflow-x: hidden; +} + #win-setting { display: flex; height: calc(100% - 32px); @@ -6,6 +32,10 @@ #win-setting>* { height: 100% } +#win-setting>.page { + width: calc(100% - 300px); +} + #win-setting>.menu { width: 300px; @@ -53,11 +83,10 @@ margin-left: 5px; margin-top: 40px; height: calc(100% - 123px); - overflow: auto; } #win-setting>.menu>list>a { - padding: 5px 8px; + padding: 5px 12px; font-size: 15px; display: flex; } @@ -70,4 +99,62 @@ height: 20px; width: 20px; margin: 1px 10px 0 0; +} + + +.setting-list { + display: flex; + flex-direction: column; + padding: 0 5px; + margin-bottom: 0; + border-radius: 10px; + width: 100%; +} + +.setting-list>* { + width: calc(100% - 50px); + color: var(--text); + background-color: #ffffff50; + margin-bottom: 5px; + border-radius: 10px; + border: 2px solid #7f7f7f30; + text-decoration: none; + display: flex; + padding: 10px 15px; + transition: 100ms; +} + +.setting-list>*:hover { + color: var(--text); + background-color: #ffffff90; + text-decoration: none; + transition: 200ms; +} + + +.setting-list>a>icon{ + font-family: SettingsIcons; + font-size: 20px; + margin:10px 20px 0 5px; +} +.setting-list>a>icon.b{ + font-family: booticon; +} + +.setting-list>a>div>p:first-child{ + font-size: 20px; + margin:0 0 -12px 0; +} + +.setting-list>a>div>p:last-child{ + font-size: 10px; + color: #7f7f7f; + margin-bottom: 2px; +} + +.setting-list>a>.then{ + position: absolute; + right: 30px; + margin-top: 12px; + color: #7f7f7f; } \ No newline at end of file diff --git a/apps/setting/main.js b/apps/setting/main.js index d514e9e..11673ba 100644 --- a/apps/setting/main.js +++ b/apps/setting/main.js @@ -16,10 +16,6 @@ main.addEventListener('mousemove', function (e) { const cy = e.clientY; let dx = cx - deltaLeft let dy = cy - deltaTop - if (dx < 0) dx = 0 - if (dy < 0) dy = 0 - if (dx > 500) dx = 500 - if (dy > 300) dy = 300 wd.setAttribute('style', `left:${dx}px;top:${dy}px`) } }) diff --git a/apps/setting/system.html b/apps/setting/system.html new file mode 100644 index 0000000..22df910 --- /dev/null +++ b/apps/setting/system.html @@ -0,0 +1,166 @@ + +

系统

+
+

+
+

Desktop-PingGai

+

瓶盖

+ 重命名 +
+
+
+ + +
+

显示

+

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

+
+ + + + + + +
+

声音

+

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

+
+ + + + + + +
+

通知

+

来自系统和应用的警报

+
+ + + + + + +
+

专注助手

+

通知、自动规则

+
+ + + + + + +
+

电源

+

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

+
+ + + + + + +
+

存储

+

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

+
+ + + + + + +
+

多任务处理

+

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

+
+ + + + + + +
+

激活

+

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

+
+ + + + + + +
+

疑难解答

+

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

+
+ + + + + + +
+

恢复

+

重置、高级启动、返回

+
+ + + + + + +
+

投影到此电脑

+

权限、配对 PIN、可发现性

+
+ + + + + + +
+

远程桌面

+

远程桌面用户、连接权限

+
+ + + + + + +
+

剪贴板

+

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

+
+ + + + + + +
+

关于

+

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

+
+ + + + +
\ No newline at end of file diff --git a/desktop.css b/desktop.css index 25959f1..429aab9 100644 --- a/desktop.css +++ b/desktop.css @@ -37,6 +37,7 @@ body { display: flex; justify-content: center; width: 100%; + z-index: 98; } .dock { @@ -48,6 +49,8 @@ body { padding: 7px 10px; margin: 0 3px; display: flex; + transition: 200ms; + bottom: 0; } .dock>* { @@ -60,6 +63,49 @@ body { margin-top: -8px; } +.dock.about { + width: 280px; + font-size: 18px; + display: block; + overflow: hidden; +} +.dock.about>p { + margin-top: 50px; + font-size: 15px; + padding-left: 15px; + display: none; + opacity: 0; + transition: 600ms; +} + +.dock.about:hover { + background-color: #cccccca0; +} +.dock.about:active>p { + display: block; +} + +.dock.about:active { + font-size: 13px; + padding: 10px 45px; +} + +.dock.about.show { + height: 220px; + width: 500px; + margin-top: -180px; + font-size: 23px; +} +.dock.about.show>p { + display: block; + margin-top: 5px; + opacity: 1; +} + +.dock.about.show:hover { + background-color: #eeeeeea0; +} + #start-btn { transition: 200ms; width: 32px; @@ -87,7 +133,7 @@ body { display: none; position: absolute; bottom: 0px; - top: 300px; + height: 500px; width: 800px; left: calc(50% - 400px); border-radius: 20px; @@ -106,7 +152,7 @@ body { #start-menu.show { display: flex; - top: 100px; + height: 594px; bottom: 60px; opacity: 1; } @@ -135,14 +181,17 @@ input-before { margin-left: 5px; margin-top: 40px; } + #s-m-l>list>a { padding: 3px 8px; font-size: 15px; display: flex; } + #s-m-l>list>a>p { margin: 5px 7px; } + #s-m-l>list>a>img { height: 25px; width: 25px; @@ -158,36 +207,43 @@ input-before { opacity: 0; margin-top: 80px; } -#s-m-r>*{ + +#s-m-r>* { margin-bottom: 50px !important; transition: 600ms; opacity: 0; } -#s-m-r>.pinned{ + +#s-m-r>.pinned { margin-bottom: 80px !important; transition: 800ms; } -#start-menu.show>#s-m-r{ + +#start-menu.show>#s-m-r { height: 100%; opacity: 1; margin-top: 0; } -#start-menu.show>#s-m-r>*{ + +#start-menu.show>#s-m-r>* { opacity: 1; - margin-bottom: 0!important; + margin-bottom: 0 !important; } -#s-m-r>.row1{ +#s-m-r>.row1 { display: flex; } -#s-m-r>.row1>.tool{ + +#s-m-r>.row1>.tool { width: 200px; padding: 5px 10px 0 0; } -#s-m-r>.row1>.tool>*{ + +#s-m-r>.row1>.tool>* { float: right; } -#s-m-r>.row1>.folder{ + +#s-m-r>.row1>.folder { display: flex; padding: 10px 10px; margin: 15px 15px; @@ -195,50 +251,59 @@ input-before { background-color: #ffffff50; width: calc(100% - 200px); } -#s-m-r>.row1>.folder>.sm-app{ + +#s-m-r>.row1>.folder>.sm-app { height: 72px; } -#s-m-r>.pinned{ + +#s-m-r>.pinned { padding: 10px 10px; margin: 0 10px 0 15px; border-radius: 10px; background-color: #ffffff50; } -#s-m-r>.pinned>.apps{ + +#s-m-r>.pinned>.apps { display: flex; flex-wrap: wrap; padding-left: 15px; } -#s-m-r>.pinned>.title{ + +#s-m-r>.pinned>.title { padding: 5px 0 5px 10px; font-size: 18px; font-weight: 530; display: flex; } -#s-m-r>.pinned>.title>*{ + +#s-m-r>.pinned>.title>* { width: 100%; } -#s-m-r>.tuijian{ +#s-m-r>.tuijian { padding: 10px 10px; margin: 15px 10px 0 15px; border-radius: 10px; background-color: #ffffff50; } -#s-m-r>.tuijian>.apps{ + +#s-m-r>.tuijian>.apps { display: flex; flex-wrap: wrap; padding-left: 15px; } -#s-m-r>.tuijian>.title{ + +#s-m-r>.tuijian>.title { padding: 5px 0 5px 10px; font-size: 18px; font-weight: 530; display: flex; } -#s-m-r>.tuijian>.title>*{ + +#s-m-r>.tuijian>.title>* { width: 100%; } + #s-m-user { height: 100px; width: 100px; @@ -279,7 +344,7 @@ input-before { border-bottom-color: #2983cc; } -.btn{ +.btn { border: 0px solid; border-radius: 10px; padding: 7px 10px; @@ -287,7 +352,7 @@ input-before { background-color: #00000000; } -.btn-icon{ +.btn-icon { border: 0px solid; border-radius: 10px; padding: 1px 5px; @@ -297,7 +362,8 @@ input-before { height: 33px; width: 33px; } -.btn-icon.big{ + +.btn-icon.big { padding: 3px 7px; font-size: 19px; } @@ -306,33 +372,35 @@ input-before { background-color: #7f7f7f30; } -.btn:active{ +.btn:active { font-size: 17px; padding: 4px 8px; } -.btn-icon.big:active{ +.btn-icon.big:active { font-size: 13px; padding: 6px 10px; } -.more-btn{ +.more-btn { background: #ffffff70; padding: 0; border-radius: 5px; font-size: 12px; float: right; - padding:2px 5px; + padding: 2px 5px; border: 1px solid #7f7f7f30; } -.more-btn:hover{ + +.more-btn:hover { background-color: #ffffff50; } -.more-btn>.bi{ + +.more-btn>.bi { font-size: 10px; } -.sm-app{ +.sm-app { width: 72px; height: 80px; border-radius: 10px; @@ -340,33 +408,39 @@ input-before { transition: 200ms; padding: 0 3px; } -.sm-app>*:first-child{ + +.sm-app>*:first-child { height: 34px; width: 34px; margin-top: 12px; transition: 200ms; } -.sm-app>*:last-child{ + +.sm-app>*:last-child { margin-top: -3px; transition: 200ms; font-size: 10px; line-height: 13px; } -.sm-app:hover{ + +.sm-app:hover { background-color: #ffffff70; } -.sm-app:active{ + +.sm-app:active { padding-top: 4px; } -.sm-app:active>*:last-child{ + +.sm-app:active>*:last-child { margin-top: 1px; } -.sm-app:active>*:first-child{ + +.sm-app:active>*:first-child { height: 26px; width: 26px; } -.tj-obj{ +.tj-obj { width: 50%; height: 55px; border-radius: 10px; @@ -375,24 +449,29 @@ input-before { display: flex; padding: 10px 3px 10px 10px; } -.tj-obj>img{ + +.tj-obj>img { height: 35px; width: 35px; transition: 200ms; } -.tj-obj>div>*:first-child{ + +.tj-obj>div>*:first-child { margin: 3px 0 2px 5px; font-size: 15px; line-height: 13px; } -.tj-obj>div>*:last-child{ + +.tj-obj>div>*:last-child { font-size: 10px; line-height: 13px; margin-left: 6px; } -.tj-obj:hover{ + +.tj-obj:hover { background-color: #ffffff70; } + /* hi */ dropdown { @@ -429,7 +508,6 @@ list { padding-left: 0; margin-bottom: 0; border-radius: 10px; - } list>* { @@ -476,12 +554,15 @@ list>.text:hover { background-color: unset; } -.window{ +.window { position: fixed; width: 50%; height: 50%; - top: 25%; - left: 25%; + top: 10%; + left: 15%; + margin-left: 10%; + margin-top: 7%; + /* 真的是胡整，margin-top和margin-left的百分比都是以width为标准，脑壳乔的 */ background-color: #ffffff70; backdrop-filter: blur(50px); border-radius: 10px; @@ -491,41 +572,55 @@ list>.text:hover { transition: 200ms; overflow: hidden; } -.window.show-begin{ + +.window.show-begin { display: block; } -.window.show{ + +.window.show { + margin-left: 0; + margin-top: 0; height: 80%; width: 70%; - top: 10%; - left: 15%; opacity: 1; } -.window.notrans{ + +.window.notrans { transition: unset !important; } -.window>.titbar{ +.window>.titbar { background-color: #ffffff30; border-radius: 10px 10px 0 0; height: 32px; padding: 0 0 0 5px; display: flex; } -.window>.titbar>p{ + +.window>.titbar>p { font-size: 16px; width: 100px; margin-top: 3px; } -.window>.titbar>.icon{ + +.window>.titbar>.icon { margin: 6px 5px 0 0; height: 20px; width: 20px; } -.window>.titbar>div{ + +.window>.titbar>div { width: calc(100% - 125px); } -.wbtg{ + +.window.max{ + width: 100%; + height: 100%; + left: 0 !important; + top: 0 !important; +} + +.wbtg { height: 100%; float: right; width: 45px; @@ -534,13 +629,16 @@ list>.text:hover { font-size: 13px; transition: 100ms; } -.wbtg.red{ + +.wbtg.red { border-top-right-radius: 10px; } -.wbtg:hover{ + +.wbtg:hover { background-color: #7f7f7f30; } -.wbtg.red:hover{ + +.wbtg.red:hover { background-color: #c42b1c; color: #fff; } \ No newline at end of file diff --git a/desktop.html b/desktop.html index f04f8d4..f37b633 100644 --- a/desktop.html +++ b/desktop.html @@ -9,9 +9,11 @@ Win12 - @@ -232,11 +234,16 @@ -
- - - - +
+ Windows 12 网页版 谭景元原创 +

Windows 12 网页版是一个开放源项目,
+ 希望让用户在网络上预先体验 Windows 12,
+ 内容可能与 Windows 12 正式版本不一致。
+ 使用标准网络技术,例如 Html,CSS 和 JS
+ 此项目绝不附属于微软,且不应与微软操作系统或产品混淆,
+ 这也不是 Windows365 cloud PC
+ 本项目中微软、Windows和其他示范产品是微软公司组的商标

@@ -246,7 +253,7 @@
- + @@ -267,7 +274,9 @@ - + +   系统 @@ -313,9 +322,7 @@
-
- hello -
+
@@ -330,6 +337,20 @@ $('.window.' + name).addClass('notrans'); }, 200); } + function maxwin(name) { + if ($('.window.' + name).hasClass('max')) { + $('.window.' + name).removeClass('max'); + setTimeout(() => { + $('.window.' + name).addClass('notrans'); + }, 200); + $('.window.' + name + '>.titbar>div>.wbtg.max').html(''); + } else { + $('.window.' + name).removeClass('notrans'); + $('.window.' + name).addClass('max'); + $('.window.' + name + '>.titbar>div>.wbtg.max').html('') + + } + } function hidewin(name) { $('.window.' + name).removeClass('notrans'); $('.window.' + name).removeClass('show');