opensource/win12
3
0
Fork 0
mirror of https://github.com/tjy-gitnub/win12.git synced 2026-08-31 01:55:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

v5.2.1 登录界面，开机音效和细节优化

Browse Source 
来自 @User782Tec 
-为网站添加Favicon和标题
-Edge浏览器中，超出标签页范围的文字将会被隐藏以避免文字溢出的问题
-微调Edge浏览器中加载动画的位置
-新增了开机音效和登录界面
-格式化部分文档
This commit is contained in:
tjy
2023-05-01 18:39:13 +08:00
committed by GitHub
parent 09f5bd7fb3 c64c79742f
commit 532b33b006
7 changed files with 238 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/style/edge.css
+70 -44
View File
@@ -1,17 +1,17 @@
.window.edge.max>#win-edge{
.window.edge.max>#win-edge {
padding-bottom: 55px;
}
.window.edge>.titbar>.tabs{
.window.edge>.titbar>.tabs {
display: flex;
flex-grow: 1!important;
flex-grow: 1 !important;
height: 100%;
padding: 2px 1px;
/* overflow-x:auto; */
overflow: hidden;
}
.window.edge>.titbar>.tabs>.tab{
.window.edge>.titbar>.tabs>.tab {
display: flex;
border-radius: 8px;
max-width: 200px;
@@ -25,7 +25,8 @@
overflow: hidden;
transition: 50ms;
}
.window.edge>.titbar>.tabs>.tab::before{
.window.edge>.titbar>.tabs>.tab::before {
content: '';
position: relative;
width: 1.5px;
@@ -36,47 +37,60 @@
transition: 50ms;
}
.window.edge>.titbar>.tabs>.tab.show{
.window.edge>.titbar>.tabs>.tab p {
overflow: hidden;
display: -webkit-box;
box-orient: vertical;
-webkit-box-orient: vertical;
line-clamp: 1;
-webkit-line-clamp: 1;
}
.window.edge>.titbar>.tabs>.tab.show {
background: var(--card) !important;
box-shadow: 0 1px 2px var(--sd);
}
.window.edge>.titbar>.tabs>.tab.close{
.window.edge>.titbar>.tabs>.tab.close {
transform: translateY(calc(100% + 5px)) !important;
opacity: 0.6;
transition: 150ms;
}
.window.edge>.titbar>.tabs>.tab.left{
.window.edge>.titbar>.tabs>.tab.left {
transform: translateX(-100%) !important;
transition: 150ms;
}
.window.edge>.titbar>.tabs>.tab.right{
.window.edge>.titbar>.tabs>.tab.right {
transform: translateX(100%) !important;
transition: 150ms;
}
.window.edge>.titbar>.tabs>.tab.moving{
background: var(--unfoc)!important;
.window.edge>.titbar>.tabs>.tab.moving {
background: var(--unfoc) !important;
z-index: 1;
}
.window.edge>.titbar>.tabs>.tab:hover{
.window.edge>.titbar>.tabs>.tab:hover {
background: var(--hover-half);
}
.window.edge>.titbar>.tabs>.tab:hover::before,
.window.edge>.titbar>.tabs>.tab:hover+.tab::before,
.window.edge>.titbar>.tabs>.tab.show::before,
.window.edge>.titbar>.tabs>.tab.show+.tab::before{
.window.edge>.titbar>.tabs>.tab.show+.tab::before {
opacity: 0;
}
.window.edge>.titbar>.tabs>.tab>p{
.window.edge>.titbar>.tabs>.tab>p {
font-size: 15px;
margin-left: 7px;
margin-top: 1px;
flex-grow: 1;
}
.window.edge>.titbar>.tabs>.tab>.clbtn{
.window.edge>.titbar>.tabs>.tab>.clbtn {
border-radius: 4px;
display: block;
margin: 3px 5px 0 0;
@@ -84,17 +98,17 @@
height: 18px;
}
.window.edge>.titbar>.tabs>.tab>.clbtn::before{
.window.edge>.titbar>.tabs>.tab>.clbtn::before {
position: relative;
top: -3px;
left: 1px;
}
.window.edge>.titbar>.tabs>.tab>.clbtn:hover{
.window.edge>.titbar>.tabs>.tab>.clbtn:hover {
background: var(--hover);
}
.window.edge>.titbar>.tabs>.new{
.window.edge>.titbar>.tabs>.new {
border-radius: 7px;
margin: 3px 2px;
height: 25px;
@@ -103,26 +117,28 @@
text-align: center;
transition: 50ms;
}
.window.edge>.titbar>.tabs>.new::before{
.window.edge>.titbar>.tabs>.new::before {
position: relative;
top: -3px;
}
.window.edge>.titbar>.tabs>.new:hover{
.window.edge>.titbar>.tabs>.new:hover {
background-color: var(--hover-half);
}
#win-edge{
#win-edge {
display: flex;
flex-direction: column;
transition: 50ms;
}
#win-edge>.tool{
#win-edge>.tool {
display: flex;
padding: 2px 5px;
}
#win-edge>.tool>.a{
#win-edge>.tool>.a {
font-size: 20px;
border-radius: 7px;
width: 30px;
@@ -131,81 +147,91 @@
transition: 50ms;
margin: 0 1px;
}
#win-edge>.tool>.a>.bi::before{
#win-edge>.tool>.a>.bi::before {
position: relative;
top: var(--top);
}
#win-edge>.tool>.a:hover{
#win-edge>.tool>.a:hover {
background-color: var(--hover-half);
}
#win-edge>.tool>input{
#win-edge>.tool>input {
background-color: var(--hover-half);
border-radius: 50px;
border: 1.5px solid transparent;
padding: 3px 14px 4px 10px;
outline: medium;
color: var(--text);
transition: 100ms,border 0s;
transition: 100ms, border 0s;
height: 30px;
margin: 0 2px;
}
#win-edge>.tool>input.url{
#win-edge>.tool>input.url {
flex-grow: 1;
}
#win-edge>.tool>input.rename:not(.show){
#win-edge>.tool>input.rename:not(.show) {
width: 0;
padding: 0;
border: none;
}
#win-edge>.tool>input.rename.show{
#win-edge>.tool>input.rename.show {
width: 200px;
}
#win-edge>.tool>input:hover{
#win-edge>.tool>input:hover {
border-color: #7f7f7f7f;
}
#win-edge>.tool>input:focus{
#win-edge>.tool>input:focus {
border-color: var(--href);
}
#win-edge>iframe{
#win-edge>iframe {
width: calc(100% - 4px);
flex-grow: 1;
margin: 2px;
border-radius: 10px;
--bg:var(--bg);
--text:var(--text);
--bg: var(--bg);
--text: var(--text);
display: none;
}
#win-edge>iframe.show{
#win-edge>iframe.show {
display: block;
}
.reloading>svg{
width: 27px;
.reloading>svg {
width: 27px !important;
}
.reloading{
.reloading {
margin-right: -5px;
margin-bottom: -4px;
animation: reload 100ms;
}
@keyframes reload {
0%{
0% {
margin-right: -27px;
}
100%{
100% {
margin-right: -5px;
}
}
.reloading>svg>circle:first-child {
stroke:#7f7f7f50;
fill:none;stroke-width:2px;
stroke: #7f7f7f50;
fill: none;
stroke-width: 2px;
}
.reloading>svg>circle:last-child {
stroke:#2983cc;stroke-width:2px;
stroke: #2983cc;
stroke-width: 2px;
}
apps/style/login.css
+68
View File
@@ -0,0 +1,68 @@
div.login {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: linear-gradient(130deg, #ad6eca, #3b91d8);
transition: filter 500ms, background-color 500ms, opacity 1500ms ease-in-out;
}
#login {
padding: 4px 50px 4px 50px;
border: 2px solid #aaa;
background-color: #eaeaea;
color: #121212;
transition: background-color 300ms, transform cubic-bezier(0.14, 1.02, 0.17, 0.03) 300ms;
font-size: 18px;
border-radius: 10px;
}
#login:hover {
background-color: #fefefe;
}
#login:active {
transform: scale(0.95);
}
#login-after {
color: #fefefe;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
margin: 6px 0px 6px 0px;
}
.login>div.user {
width: 150px;
height: 150px;
border-radius: 100%;
background-image: url("../../icon/user.svg");
background-size: 65% 65%;
background-position: 50% 50%;
background-repeat: no-repeat;
margin-bottom: 20px;
background-color: #ddd;
transition: filter 500ms;
}
.login>div.name {
color: #fefefe;
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 20px;
transition: color 500ms;
}
div.login-close, div.login-close>div.user {
filter: brightness(0);
}
div.login-close>div.name, div.login-close #login-after {
color: #000 !important;
}
div.login-close {
background-color: black;
}
desktop.html
+45 -2
View File
@@ -29,9 +29,14 @@
<link rel="stylesheet" href="apps/style/camera.css">
<link rel="stylesheet" href="widgets.css">
<link rel="manifest" href="pwa/manifest.json">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="apps/style/login.css">
<base target="_blank">
<title>Windows 12 网页版</title>
</head>
<body>
<audio src="media/startup.mp3" id="startup-music"></audio>
<div id="loadback" style="background-color:#000;width:100%;height:100%;z-index:105;position:absolute;transition:200ms;">
<style>
#loadback.hide {
@@ -126,6 +131,30 @@
}, 100);
</script>
</div>
<div class="login" style="position: absolute; width: 100%; height: 100%; opacity: 0; display: none; z-index: 101;">
<div class="user"></div>
<div class="name">Administrator</div>
<div id="login" onclick="
this.id = 'login-after';
this.innerText = '登录中...';
window.setTimeout(() => {
this.style.transition = 'color 500ms'
}, 100);
window.setTimeout(() => {
document.querySelector('div.login').className = 'login login-close'
window.setTimeout(() => {
$('.login').css('opacity', '0');
}, 500);
window.setTimeout(() => {
$('.login').css('display', 'none');
}, 2000);
document.querySelector('audio#startup-music').play();
}, 1000);
this.onclick = null;
">
登录
</div>
</div>
<!-- <img src="https://bing.com/th?id=OHR.Trossachs_ZH-CN9299955040_UHD.jpg&qlt=100" alt=""> -->
<script src="./jq.min.js"></script>
<div id="start-menu">
@@ -176,6 +205,12 @@
<img src="icon/camera.png"><p>相机</p>
</a>
<p class="text">其它</p>
<a class="a">
<img src="icon/defender.png"><p>Windows 安全中心</p>
</a>
<a class="a">
<img src="icon/store.png"><p>Microsoft Store</p>
</a>
</list>
</div>
<div id="s-m-r">
@@ -891,8 +926,16 @@
<div class="cnt update">
<h1 class="tit"><span></span>更新记录</h1>
<div style="margin-left: 20px;">
<details><summary><span>v5.2.1</span> 登录界面，开机音效和细节优化</summary><p>
&emsp;&emsp;<strong>更新来自 @User782Tec</strong><br />
&emsp;&emsp;-为网站添加Favicon和标题<br />
&emsp;&emsp;-Edge浏览器中，超出标签页范围的文字将会被隐藏以避免文字溢出的问题<br />
&emsp;&emsp;-微调Edge浏览器中加载动画的位置<br />
&emsp;&emsp;-新增了开机音效和登录界面<br />
&emsp;&emsp;-格式化部分文档<br />
</details>
<details><summary><span>v5.2.0</span> 相机应用及细节修复</summary><p>
&emsp;&emsp;<strong>更新来自 @User782Tec</strong>
&emsp;&emsp;<strong>更新来自 @User782Tec</strong><br />
&emsp;&emsp;-新增“相机”应用，支持拍照功能<br />
&emsp;&emsp;-优化焦点控制，关闭焦点窗口后，焦点会转移至下面一个窗口，更加符合原生体验<br />
&emsp;&emsp;-计算器优化，优化符号及输入<br />
@@ -900,7 +943,7 @@
&emsp;&emsp;-修复部分情况下标题栏不显示的问题<br />
&emsp;&emsp;-优化窗口布局<br />
&emsp;&emsp;-修正部分非标准CSS特性<br />
&emsp;&emsp;-格式化部分文档<br />
&emsp;&emsp;-格式化部分文档<br /></p>
</details>
<details><summary><span>v5.1.2</span> 细节修复和更改</summary><p>
&emsp;&emsp;-修复关于加载失效的问题<br />
desktop.js
+54 -47
View File
@@ -404,13 +404,13 @@ let apps = {
apps.camera.downloadLink = document.querySelector('#win-camera a');
apps.camera.control = document.querySelector('#win-camera>.control')
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then((stream) => {
apps.camera.video.srcObject = stream;
apps.camera.video.play();
})
.catch(() => {
hidewin('camera');
});
.then((stream) => {
apps.camera.video.srcObject = stream;
apps.camera.video.play();
})
.catch(() => {
hidewin('camera');
});
apps.camera.video.addEventListener('canplay', () => {
if (!apps.camera.streaming) {
apps.camera.aspectRatio = apps.camera.video.videoWidth / apps.camera.video.videoHeight;
@@ -588,15 +588,15 @@ let apps = {
init: () => {
$('#win-about>.about').addClass('show');
$('#win-about>.update').removeClass('show');
if($('#contri').length>1)return;
if ($('#contri').length > 1) return;
apps.about.get();
},
get:()=>{
get: () => {
$('#contri').html(`<loading><svg width="30px" height="30px" viewBox="0 0 16 16">
<circle cx="8px" cy="8px" r="7px" style="stroke:#7f7f7f50;fill:none;stroke-width:3px;"></circle>
<circle cx="8px" cy="8px" r="7px" style="stroke:#2983cc;stroke-width:3px;"></circle></svg></loading>`)
// 实时获取项目贡献者
$.get('https://api.github.com/repos/tjy-gitnub/win12/contributors').then(cs=>{
$.get('https://api.github.com/repos/tjy-gitnub/win12/contributors').then(cs => {
setTimeout(() => {
$('#contri').html('');
cs.forEach(c => {
@@ -706,54 +706,54 @@ C:\Windows\System32> <input type="text" oninput="setTimeout(() => {$('#win-termi
$('.window.edge>.titbar>.tabs')[0].innerHTML += '<a class="new bi bi-plus" onclick="apps.edge.newtab();"></a>';
// $('.window.edge>.titbar>.tabs>.tab.'+apps.edge.tabs[apps.edge.now][0]).addClass('show');
},
moving: (t,ev,np)=>{
let deltaLeft=ev.clientX;
function move_f(e){
$(this).css('transform',`translateX(${e.clientX-deltaLeft}px)`);
let pos=Math.floor((this.offsetLeft+e.clientX-deltaLeft-36+(this.offsetWidth/2))/this.offsetWidth);
moving: (t, ev, np) => {
let deltaLeft = ev.clientX;
function move_f(e) {
$(this).css('transform', `translateX(${e.clientX - deltaLeft}px)`);
let pos = Math.floor((this.offsetLeft + e.clientX - deltaLeft - 36 + (this.offsetWidth / 2)) / this.offsetWidth);
$('.window.edge>.titbar>.tabs>.tab.left').removeClass('left');
$('.window.edge>.titbar>.tabs>.tab.right').removeClass('right');
if(np<pos){
for (let i = np+1; i <= pos; i++) {
if (np < pos) {
for (let i = np + 1; i <= pos; i++) {
const ta = apps.edge.tabs[i];
$('.window.edge>.titbar>.tabs>.tab.'+ta[0]).addClass('left');
$('.window.edge>.titbar>.tabs>.tab.' + ta[0]).addClass('left');
}
}
else if(np>pos){
else if (np > pos) {
for (let i = pos; i < np; i++) {
const ta = apps.edge.tabs[i];
$('.window.edge>.titbar>.tabs>.tab.'+ta[0]).addClass('right');
$('.window.edge>.titbar>.tabs>.tab.' + ta[0]).addClass('right');
}
}
};
page.onmousemove=move_f.bind(t);
function up_f(e){
page.onmousemove=null;
page.onmouseup=null;
console.log(this,this.offsetWidth);
let pos=Math.floor((this.offsetLeft+e.clientX-deltaLeft-36+(this.offsetWidth/2))/this.offsetWidth);
console.log(pos,np);
if(pos==np || pos>apps.edge.tabs.length || pos<0){
$(this).css('transform','none');
page.onmousemove = move_f.bind(t);
function up_f(e) {
page.onmousemove = null;
page.onmouseup = null;
console.log(this, this.offsetWidth);
let pos = Math.floor((this.offsetLeft + e.clientX - deltaLeft - 36 + (this.offsetWidth / 2)) / this.offsetWidth);
console.log(pos, np);
if (pos == np || pos > apps.edge.tabs.length || pos < 0) {
$(this).css('transform', 'none');
$(this).removeClass('moving');
$('.window.edge>.titbar>.tabs>.tab.left').removeClass('left');
$('.window.edge>.titbar>.tabs>.tab.right').removeClass('right');
return;
}else{
apps.edge.tabs.splice(np<pos?pos+1:pos,0,apps.edge.tabs[np]);
apps.edge.tabs.splice(np<pos?np:(np+1),1);
} else {
apps.edge.tabs.splice(np < pos ? pos + 1 : pos, 0, apps.edge.tabs[np]);
apps.edge.tabs.splice(np < pos ? np : (np + 1), 1);
apps.edge.settabs();
apps.edge.tab(pos);
}
}
page.onmouseup=up_f.bind(t);
page.onmouseup = up_f.bind(t);
$(t).addClass('moving');
},
close: c => {
$('.window.edge>.titbar>.tabs>.tab.'+apps.edge.tabs[c][0]).addClass('close');
for (let i = c+1; i < apps.edge.tabs.length; i++) {
$('.window.edge>.titbar>.tabs>.tab.' + apps.edge.tabs[c][0]).addClass('close');
for (let i = c + 1; i < apps.edge.tabs.length; i++) {
const _id = apps.edge.tabs[i][0];
$('.window.edge>.titbar>.tabs>.tab.'+_id).addClass('left');
$('.window.edge>.titbar>.tabs>.tab.' + _id).addClass('left');
}
setTimeout(() => {
$('#win-edge>iframe.' + apps.edge.tabs[c][0]).remove();
@@ -789,7 +789,7 @@ C:\Windows\System32> <input type="text" oninput="setTimeout(() => {$('#win-termi
apps.edge.tab(apps.edge.now);
},
reload: () => {
$('#win-edge>iframe.show').attr('src',$('#win-edge>iframe.show').attr('src'));
$('#win-edge>iframe.show').attr('src', $('#win-edge>iframe.show').attr('src'));
if (!document.querySelector('.window.edge>.titbar>.tabs>.tab.\\3' + apps.edge.now + '>.reloading')) {
document.querySelector('.window.edge>.titbar>.tabs>.tab.\\3' + apps.edge.now).insertAdjacentHTML('afterbegin', apps.edge.reloadElt);
document.querySelector('#win-edge>iframe.\\3' + apps.edge.now).onload = function () {
@@ -1064,13 +1064,13 @@ function toggletheme() {
}
}
// 云母效果
let mica_difx=0,mica_dify=0;
window.addEventListener('resize',e=>{
let b=$('body')[0];
console.log(b.offsetHeight,b.offsetWidth);
$(':root').css('--mica-size',`${Math.max(b.offsetHeight,b.offsetWidth)}px`);
mica_difx=(b.offsetHeight<b.offsetWidth)?0:(b.offsetWidth-b.offsetHeight)/2;
mica_dify=(b.offsetHeight<b.offsetWidth)?(b.offsetHeight-b.offsetWidth)/2:0;
let mica_difx = 0, mica_dify = 0;
window.addEventListener('resize', e => {
let b = $('body')[0];
console.log(b.offsetHeight, b.offsetWidth);
$(':root').css('--mica-size', `${Math.max(b.offsetHeight, b.offsetWidth)}px`);
mica_difx = (b.offsetHeight < b.offsetWidth) ? 0 : (b.offsetWidth - b.offsetHeight) / 2;
mica_dify = (b.offsetHeight < b.offsetWidth) ? (b.offsetHeight - b.offsetWidth) / 2 : 0;
})
// 拖拽窗口
@@ -1139,8 +1139,8 @@ function win_move(e) {
$(this).addClass('notrans');
}
if($(this).hasClass('mica')){
$(this).css('--mica-pos', `${mica_difx-cx + deltaLeft}px ${mica_dify-cy + deltaTop}px`);
if ($(this).hasClass('mica')) {
$(this).css('--mica-pos', `${mica_difx - cx + deltaLeft}px ${mica_dify - cy + deltaTop}px`);
}
}
for (let i = 0; i < wins.length; i++) {
@@ -1338,7 +1338,14 @@ function preview() {
// 启动
let updated = false;
document.getElementsByTagName('body')[0].onload = function nupd() {
$('#loadback').addClass('hide'); setTimeout(() => { $('#loadback').css('display', 'none') }, 200);
$('.login').css('opacity', '1');
$('.login').css('display', 'flex');
setTimeout(() => {
$('#loadback').addClass('hide');
}, 500);
setTimeout(() => {
$('#loadback').css('display', 'none');
}, 1000);
if (updated) {
setTimeout(() => {
$('.msg.update').addClass('show');
favicon.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 263 KiB

media/startup.mp3
BIN
View File
Binary file not shown.
reload.html
+1 -1
View File
@@ -3,7 +3,7 @@
<head>
<style>
body {
background: linear-gradient(130deg, #ad6ecaee, #3b91d8ee)
background: linear-gradient(130deg, #ad6ecaee, #3b91d8ee);
}
loading>svg>circle:first-child {