计算器功能增加，优化体验与开始菜单，新增关于应用

README.md

@@ -12,7 +12,7 @@
 ![文件资源管理器](https://user-images.githubusercontent.com/71509955/188390819-362a2986-95cb-4d79-84e4-333b4136a792.png)
 *文件资源管理器*
 
-还有搜索等等功能。
+还有搜索、计算器等等功能。
 更多功能还在制作之中...
 
 ## 在线体验

apps/about/main.css

@@ -0,0 +1,59 @@
+#win-about{
+    display: flex;
+    height: calc(100% - 30px);
+}
+
+#win-about>.menu{
+    height: 100%;
+    min-width: 200px;
+    padding: 3px;
+}
+
+#win-about>.menu>list>*{
+    padding: 5px 10px;
+}
+
+#win-about>.cnt{
+    height: 100%;
+    flex-grow: 1;
+    overflow: auto;
+}
+
+#win-about>.cnt .tit{
+    margin: 0;
+    display: flex;
+}
+
+#win-about>.cnt .tit>span{
+    background-color: #2983cc;
+    border-radius: 10px;
+    width: 6px;
+    margin: 5px 5px;
+    transition: 200ms;
+    opacity: 0;
+}
+
+#win-about>.cnt .tit:hover>span{
+    opacity: 1;
+}
+
+#win-about>.update>div>details{
+    background-color: #ffffff50;
+    padding: 10px;
+    border-radius: 10px;
+    box-shadow: 3px 3px 5px #7f7f7f7f;
+    margin: 10px 10px 0 0;
+    transition: 200ms;
+}
+
+#win-about>.update>div>details>summary{
+    font-size: 17px;
+}
+
+#win-about>.update>div>details>summary>span{
+    font-weight: 900;
+}
+
+#win-about>.update>div>details>p{
+    margin-left: 10px;
+}

apps/calc/main.css

@@ -34,11 +34,6 @@
     padding-top: 5px;
 }
 #win-calc>.keyb>.b.ans{
-    width: 71px;
-    margin: -157px 5px 5px 5px;
-    padding-top: 75px;
-    height: 233px;
-    border-radius: 35px;
     background-color: #2983cc50;
 }
 #win-calc>.keyb>.b.ans:hover{

apps/explorer/main.css

@@ -51,7 +51,7 @@
 
 #win-explorer>.main{
     flex-grow: 1;
-    height: 100%;
+    height: calc(100% - 32px);
     display: flex;
     flex-direction: column;
 }
@@ -102,9 +102,10 @@
     flex-grow: 1;
     background-color: #ffffff50;
     border-radius: 10px;
-    margin: -10px 20px 45px 0;
+    margin: -10px 10px 10px 0;
     padding: 8px;
     box-shadow: 3px 3px 8px #7f7f7f6f;
+    overflow-y: auto;
 }
 
 #win-explorer>.main>.content>.title{

desktop.css

@@ -1,10 +1,6 @@
 @import "./bootstrap-icons.css";
 @import "./base.css";
 
-:root {
-    --theme: #fff;
-    --theme-text: #ddd;
-}
 
 p {
     margin: 0;
@@ -16,17 +12,19 @@ body {
 }
 
 .a {
-    color: var(--them-text);
-    text-decoration: none;
+    color: #000;
+    text-decoration: none !important;
     cursor: pointer;
 }
 
-.a:hover {
-    color: var(--them-text);
+a.jump{
+    cursor: alias !important;
+    text-decoration: underline;
+    color: #2983cc;
 }
 
 body {
-    color: var(--them-text);
+    color: #000;
     user-select: none;
 }
 
@@ -88,7 +86,8 @@ body {
 }
 
 .dock.about {
-    width: 330px;
+    cursor: pointer;
+    width: 280px;
     font-size: 18px;
     display: block;
     overflow: hidden;
@@ -230,7 +229,7 @@ body {
     display: none;
     position: absolute;
     bottom: 0px;
-    height: 500px;
+    height: calc(90% - 120px);
     width: 800px;
     left: calc(50% - 400px);
     border-radius: 20px;
@@ -249,16 +248,18 @@ body {
 
 #start-menu.show {
     display: flex;
-    height: 594px;
+    height: calc(100% - 120px);
+    max-height: 594px;
     bottom: 60px;
     opacity: 1;
 }
 
 #start-menu.max {
-    width: 100%;
-    height: 100%;
     left: 0;
     top: 0;
+    width: 100%;
+    max-height: 100%;
+    height: 100%;
     border-radius: 0;
 }
 #start-menu.max>#s-m-l>#s-m-user{
@@ -274,6 +275,8 @@ body {
     height: 100%;
     padding: 0 10px;
     transition: 400ms;
+    display: flex;
+    flex-direction: column;
 }
 
 #start-menu.max>#s-m-l{
@@ -297,6 +300,8 @@ input-before {
 #s-m-l>list {
     margin-left: 5px;
     margin-top: 40px;
+    flex-grow: 1;
+    overflow: auto;
 }
 
 #s-m-l>list>a {
@@ -524,7 +529,7 @@ input-before {
     display: none;
     position: absolute;
     bottom: 0px;
-    height: 500px;
+    height: calc(90% - 120px);
     width: 600px;
     left: calc(50% - 300px);
     border-radius: 20px;
@@ -544,9 +549,10 @@ input-before {
 }
 
 #search-win.show {
+    height: calc(100% - 120px);
+    max-height: 594px;
     display: flex;
     flex-direction: column;
-    height: 600px;
     bottom: 60px;
     opacity: 1;
 }
@@ -588,6 +594,7 @@ input-before {
 #search-win>.ans{
     display: flex;
     flex-grow: 1;
+    overflow: auto;
 }
 #search-win>.ans>.list{
     width: 250px;
@@ -684,6 +691,21 @@ input-before {
     text-align: center;
     transition: 80ms;
     padding: 0 3px;
+    color: #888;
+    cursor: inherit;
+}
+
+.sm-app.enable {
+    color: #000;
+    cursor: pointer;
+}
+
+.sm-app.enable:hover {
+    background-color: #ffffff70;
+}
+
+.sm-app.enable>*:first-child {
+    filter: brightness(1.2);
 }
 
 .sm-app>*:first-child {
@@ -691,6 +713,7 @@ input-before {
     width: 34px;
     margin-top: 12px;
     transition: 200ms;
+    filter: contrast(0.4) brightness(0.8);
 }
 
 .sm-app>*:last-child {
@@ -701,7 +724,7 @@ input-before {
 }
 
 .sm-app:hover {
-    background-color: #ffffff70;
+    background-color: #cccccc40;
 }
 
 .sm-app:active {

desktop.html

@@ -20,6 +20,7 @@
 	<link rel="stylesheet" href="apps/setting/main.css">
 	<link rel="stylesheet" href="apps/explorer/main.css">
 	<link rel="stylesheet" href="apps/calc/main.css">
+	<link rel="stylesheet" href="apps/about/main.css">
 </head>
 
 <body onload="$('#loadback').addClass('hide');setTimeout(() => {$('#loadback').css('display','none')}, 200);">
@@ -73,7 +74,7 @@
 				setTimeout(()=>{$('#start-menu').removeClass('show-begin');},200);">
 				<img src="icon/calc.png"><p>计算器</p></a>
 				<p class="text">其它</p>
-				<a><img src="icon/edge.png"><p>Microsoft Edge</p></a>
+				<a><img src="icon/camera.png"><p>相机</p></a>
 			</list>
 		</div>
 		<div id="s-m-r">
@@ -115,20 +116,22 @@
 					</div>
 				</div>
 				<div class="apps">
-					<a class="a sm-app" onclick="showwin('calc');$('#start-menu').removeClass('show');
+					<a class="a sm-app enable" onclick="showwin('calc');$('#start-menu').removeClass('show');
 					setTimeout(()=>{$('#start-menu').removeClass('show-begin');},200);">
-					<img src="icon/calc.png"><p>计算器<i>(可用)</i></p></a>
+					<img src="icon/calc.png"><p>计算器</p></a>
 					<a class="a sm-app"><img src="icon/camera.png"><p>相机</p></a>
+					<a class="a sm-app enable jump" href="https://github.com/tjy-gitnub/win12/issues" target="_blank">
+					<img src="icon/feedback.png"><p>反馈中心</p></a>
 					<a class="a sm-app"><img src="icon/defender.png"><p>Windows 安全中心</p></a>
-					<a class="a sm-app"><img src="icon/edge.png"><p>Microsoft Edge</p></a>
-					<a class="a sm-app" onclick="showwin('explorer');$('#start-menu').removeClass('show');
+					<a class="a sm-app enable" onclick="showwin('about');$('#start-menu').removeClass('show');
+					setTimeout(()=>{$('#start-menu').removeClass('show-begin');}, 200);"><img src="icon/about.png"><p>关于Win12网页版</p></a>
+					<a class="a sm-app enable" onclick="showwin('explorer');$('#start-menu').removeClass('show');
 					setTimeout(()=>{$('#start-menu').removeClass('show-begin');}, 200);">
-					<img src="icon/explorer.png"><p>文件资源管理器<i>(可用)</i></p></a>
-					<a class="a sm-app"><img src="icon/getstarted.png"><p>入门</p></a>
+					<img src="icon/explorer.png"><p>文件资源管理器</p></a>
 					<a class="a sm-app"><img src="icon/notepad.png"><p>记事本</p></a>
-					<a class="a sm-app" onclick="showwin('setting');$('#start-menu').removeClass('show');
+					<a class="a sm-app enable" onclick="showwin('setting');$('#start-menu').removeClass('show');
 					setTimeout(()=>{$('#start-menu').removeClass('show-begin');}, 200);">
-					<img src="icon/setting.png"><p>设置 <i>(可用)</i></p></a>
+					<img src="icon/setting.png"><p>设置 </p></a>
 					<a class="a sm-app"><img src="icon/store.png"><p>Microsoft Store</p></a>
 					<a class="a sm-app"><img src="icon/taskmanager.png"><p>任务管理器</p></a>
 					<a class="a sm-app"><img src="icon/teams.png"><p>Teams</p></a>
@@ -249,9 +252,8 @@
 		<div class="dock" id="taskbar" style="display: none;" count="0">
 		</div>
 		<div class="dock about"
-			onclick="if($(this).hasClass('show')){$(this).removeClass('show');$('#dockaboutbtn').text('关于...')}else{$(this).addClass('show');$('#dockaboutbtn').text('收起')}">
+			onclick="if($(this).hasClass('show')){$(this).removeClass('show')}else{$(this).addClass('show')}">
 			Windows 12 网页版 谭景元原创
-			<a class="a b" id="dockaboutbtn">关于...</a>
 			<p>Windows 12 网页版是一个开放源项目,<br>
 				希望让用户在网络上预先体验 Windows 12,<br>
 				内容可能与 Windows 12 正式版本不一致。<br>
@@ -447,22 +449,22 @@
 		<div class="content" id="win-calc">
 			<input id="calc-input" value="">
 			<div class="keyb">
+				<a class="a b" onClick="pe('calc-input').value*=document.getElementById('calc-input').value">𝑥²</a>
+				<a class="a b" onClick="document.getElementById('calc-input').value=Math.sqrt(document.getElementById('calc-input').value)">√𝑥</a>
+				<a class="a b" onClick="document.getElementById('calc-input').value=''">C</a>
 				<a class="a b" onClick="document.getElementById('calc-input').value+='+'">+</a>
-				<a class="a b" onClick="document.getElementById('calc-input').value+='-'">-</a>
-				<a class="a b" onClick="document.getElementById('calc-input').value+='*'">×</a>
-				<a class="a b" onClick="document.getElementById('calc-input').value+='/'">÷</a>
 				<a class="a b" onClick="document.getElementById('calc-input').value+='7'">7</a>
 				<a class="a b" onClick="document.getElementById('calc-input').value+='8'">8</a>
 				<a class="a b" onClick="document.getElementById('calc-input').value+='9'">9</a>
-				<a class="a b" onClick="document.getElementById('calc-input').value=''">C</a>
+				<a class="a b" onClick="document.getElementById('calc-input').value+='-'">-</a>
 				<a class="a b" onClick="document.getElementById('calc-input').value+='4'">4</a>
 				<a class="a b" onClick="document.getElementById('calc-input').value+='5'">5</a>
 				<a class="a b" onClick="document.getElementById('calc-input').value+='6'">6</a>
-				<span></span>
+				<a class="a b" onClick="document.getElementById('calc-input').value+='*'">×</a>
 				<a class="a b" onClick="document.getElementById('calc-input').value+='1'">1</a>
 				<a class="a b" onClick="document.getElementById('calc-input').value+='2'">2</a>
 				<a class="a b" onClick="document.getElementById('calc-input').value+='3'">3</a>
-				<span></span>
+				<a class="a b" onClick="document.getElementById('calc-input').value+='/'">÷</a>
 				<a class="a b" onClick="document.getElementById('calc-input').value+='.'">.</a>
 				<a class="a b" onClick="document.getElementById('calc-input').value+='0'">0</a>
 				<a class="a b" onClick="document.getElementById('calc-input').value=document.getElementById('calc-input').value.substring(0,document.getElementById('calc-input').value.length-1);"><i class="bi bi-backspace"></i></a>
@@ -470,6 +472,63 @@
 			</div>
 		</div>
 	</div>
+	<div class="window about show-begin show notrans">
+		<div class="titbar">
+			<img src="icon/about.png" class="icon">
+			<p>关于 Windows12 网页版</p>
+			<div>
+				<a class="a wbtg red" onclick="hidewin('about')">
+					<i class="bi bi-x-lg"></i>
+					<a class="a wbtg max" onclick="maxwin('about')">
+						<i class="bi bi-app"></i>
+					</a>
+					<a class="a wbtg">
+						<i class="bi bi-dash-lg"></i>
+					</a>
+				</a>
+			</div>
+		</div>
+		<div class="content" id="win-about">
+			<div class="menu">
+				<list>
+					<a onclick="$('#win-about>.about').show(200);$('#win-about>.update').hide(200);">简介</a>
+					<a onclick="$('#win-about>.update').show(200);$('#win-about>.about').hide(200);">更新记录</a>
+				</list>
+			</div>
+			<div class="cnt about">
+				<h1 class="tit"><span></span>Windows 12 网页版</h1>
+				<div style="margin-left: 20px;">
+					<h2 class="tit"><span></span>简介</h2>
+					<p>&emsp;&emsp;Windows 12 网页版是一个开源项目, 由谭景元原创, 使用标准网络技术,例如 Html、CSS 和 Javascript, 希望让用户在网络上预先体验 Windows 12。</p>
+					<p>&emsp;&emsp;因为这只是概念版，所以内容可能与 Windows 12 正式版本不一致。</p>
+					<p>&emsp;&emsp;由于这是一个开源项目，你可以在任何媒介以任何形式复制、发行本作品。
+						你还可以对该项目进行修改、转换或以本作品为基础进行创作。
+						但您必须给出适当的署名，您必须提供创作者姓名、作品链接，同时标明是否对此作了修改。您可以用任何合理的方式来署名，但是不得以任何方式暗示许可方认可您或您的使用。</p>
+					<p>&emsp;&emsp;此项目绝不附属于微软,且不应与微软操作系统或产品混淆, 这也不是 Windows365 cloud PC</p>
+					<p>&emsp;&emsp;本项目中微软、Windows和其他示范产品是微软公司的商标</p>
+				</div>
+				<div style="margin-left: 20px;">
+					<h2 class="tit"><span></span>其它</h2>
+					<p>&emsp;&emsp;此项目已发布至 Github, <a href="https://github.com/tjy-gitnub/win12" class="jump">点击此处查看</a></p>
+					<p>&emsp;&emsp;若您对于该项目有任何意见或建议，请在 Github 上<a href="https://github.com/tjy-gitnub/win12/issues" class="jump">提交 issues</a>, 您的问题会被尽可能快地解决</p>
+				</div>
+			</div>
+			<div class="cnt update" style="display: none;">
+				<h1 class="tit"><span></span>更新记录</h1>
+				<div style="margin-left: 20px;">
+					<details>
+						<summary><span>v1.0</span> 计算器功能增加，优化体验与开始菜单，新增关于应用</summary>
+						<p>&emsp;&emsp;-使开始菜单和搜索窗口在高度不足的页面中更好地显示，页面高度过小也可能显示不全，还是建议使用电脑<br>
+						&emsp;&emsp;-计算器增加平方与开发功能<br>
+						&emsp;&emsp;-开始菜单中不可用应用用灰色显示，更加简洁方便<br>
+						&emsp;&emsp;-新增 "关于Win12网页版" 应用，包含关于本项目的说明和历史更新记录<br>
+						&emsp;&emsp;-优化开始菜单和搜索窗口的显示动画<br>
+						&emsp;&emsp;-优化电脑端按钮的体验</p>
+					</details>
+				</div>
+			</div>
+		</div>
+	</div>
 	<script src="desktop.js"></script>
 </body>
 </html>

desktop.js

@@ -74,4 +74,17 @@ calc_tit.addEventListener('mousedown', function (e) {
 })
 main.addEventListener('mouseup', function (e) {
     main.removeEventListener('mousemove', calc_move);
+})
+const about_tit = document.querySelector('.window.about>.titbar');
+const about_win = document.querySelector('.window.about');
+function about_move(e) {
+    about_win.setAttribute('style', `left:${e.clientX - deltaLeft}px;top:${e.clientY - deltaTop}px`)
+}
+about_tit.addEventListener('mousedown', function (e) {
+    deltaLeft = e.clientX - about_win.offsetLeft;
+    deltaTop = e.clientY - about_win.offsetTop;
+    main.addEventListener('mousemove', about_move)
+})
+main.addEventListener('mouseup', function (e) {
+    main.removeEventListener('mousemove', about_move);
 })