mirror of
https://github.com/tjy-gitnub/win12.git
synced 2026-09-21 12:44:02 +08:00
373 lines
13 KiB
HTML
373 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" style="height: 100%;">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="stylesheet" href="./desktop.css" />
|
|
<title>Win12</title>
|
|
<!-- Windows 12 网页版 谭景元原创 -->
|
|
|
|
<!-- Windows 12 网页版是一个开放源项目,
|
|
希望让用户在网络上预先体验 Windows 12,
|
|
内容可能与 Windows 12 正式版本不一致。
|
|
使用标准网络技术,例妙如 Html、CSS 和 Javascript
|
|
此项目绝不附属于微软,且不应与微软操作系统或产品混淆,
|
|
这也不是 Windows365 cloud PC
|
|
本项目中微软、Windows和其他示范产品是微软公司组的商标 -->
|
|
</head>
|
|
|
|
<body>
|
|
<script src="./jq.min.js"></script>
|
|
<dropdown id="power">
|
|
<!-- 关机菜单 -->
|
|
<list>
|
|
<a href="#"><i class="bi bi-power"></i> 关机</a>
|
|
<a href="#"><i class="bi bi-arrow-counterclockwise"></i> 重启</a>
|
|
</list>
|
|
</dropdown>
|
|
<div id="start-menu">
|
|
<!-- 开始菜单 -->
|
|
<div id="s-m-l">
|
|
<div id="s-m-user">
|
|
<i class="bi bi-person"></i>
|
|
</div>
|
|
<p style="width: 100%;text-align: center;margin: -50px 0 20px 0;font-size: 30px;">Administartor</p>
|
|
<input type="text" class="input" alt="hi" placeholder="在这里输入你要搜索的内容">
|
|
<input-before class="bi bi-search"></input-before>
|
|
<list>
|
|
<a href="#"><img src="icon/setting.png">
|
|
<p>设置</p>
|
|
</a>
|
|
<a href="#"><img src="icon/explorer.png">
|
|
<p>文件资源管理器</p>
|
|
</a>
|
|
<a href="#"><img src="icon/edge.png">
|
|
<p>Microsoft Edge</p>
|
|
</a>
|
|
</list>
|
|
</div>
|
|
<div id="s-m-r">
|
|
<div class="row1">
|
|
<div class="folder">
|
|
<a href="#" class="a sm-app">
|
|
<img src="icon/folder/docs.png">
|
|
<p>文档</p>
|
|
</a>
|
|
<a href="#" class="a sm-app">
|
|
<img src="icon/folder/pics.png">
|
|
<p>图片</p>
|
|
</a>
|
|
<a href="#" class="a sm-app">
|
|
<img src="icon/folder/music.png">
|
|
<p>音乐</p>
|
|
</a>
|
|
</div>
|
|
<div class="tool">
|
|
<p style="font-size: 40px;margin-bottom: -10px;">12:00</p>
|
|
<p>星期一, 2368年13月34日</p>
|
|
<a href="#" class="a btn btn-icon" onclick="
|
|
let rect=this.getBoundingClientRect();
|
|
showdropdown('power',
|
|
'top',rect.bottom+5,
|
|
'right',document.body.clientWidth-rect.right);">
|
|
<i class="bi bi-power"></i>
|
|
</a>
|
|
<a href="#" class="a btn btn-icon big">
|
|
<i class="bi bi-arrows-angle-expand"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="pinned">
|
|
<!-- 已固定 卡片 -->
|
|
<div class="title">
|
|
<p>已固定</p>
|
|
<div>
|
|
<a href="#" class="a more-btn">所有应用 <i class="bi bi-chevron-right"></i></a>
|
|
<!-- 这个好像没什么必要 -->
|
|
</div>
|
|
</div>
|
|
<div class="apps">
|
|
<a href="#" class="a sm-app">
|
|
<img src="icon/calc.png">
|
|
<p>计算器</p>
|
|
</a>
|
|
<a href="#" class="a sm-app">
|
|
<img src="icon/camera.png">
|
|
<p>相机</p>
|
|
</a>
|
|
<a href="#" class="a sm-app">
|
|
<img src="icon/defender.png">
|
|
<p>Windows 安全中心</p>
|
|
</a>
|
|
<a href="#" class="a sm-app">
|
|
<img src="icon/edge.png">
|
|
<p>Microsoft Edge</p>
|
|
</a>
|
|
<a href="#" class="a sm-app">
|
|
<img src="icon/explorer.png">
|
|
<p>文件资源管理器</p>
|
|
</a>
|
|
<a href="#" class="a sm-app">
|
|
<img src="icon/getstarted.png">
|
|
<p>入门</p>
|
|
</a>
|
|
<a href="#" class="a sm-app">
|
|
<img src="icon/notepad.png">
|
|
<p>记事本</p>
|
|
</a>
|
|
<a href="#" class="a sm-app" onclick="
|
|
showwin('setting');
|
|
$('#start-menu').removeClass('show');
|
|
setTimeout(() => {
|
|
$('#start-menu').removeClass('show-begin');
|
|
}, 200);">
|
|
<img src="icon/setting.png">
|
|
<p>设置 <i>(可用)</i></p>
|
|
</a>
|
|
<a href="#" class="a sm-app">
|
|
<img src="icon/store.png">
|
|
<p>Microsoft Store</p>
|
|
</a>
|
|
<a href="#" class="a sm-app">
|
|
<img src="icon/taskmanager.png">
|
|
<p>任务管理器</p>
|
|
</a>
|
|
<a href="#" class="a sm-app">
|
|
<img src="icon/teams.png">
|
|
<p>Teams</p>
|
|
</a>
|
|
<a href="#" class="a sm-app">
|
|
<img src="icon/terminal.png">
|
|
<p>终端</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="tuijian">
|
|
<!-- 推荐的项目 卡片 -->
|
|
<div class="title">
|
|
<p>推荐的项目</p>
|
|
<div>
|
|
<a href="#" class="a more-btn">更多 <i class="bi bi-chevron-right"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="apps">
|
|
<a href="#" class="a tj-obj">
|
|
<img src="icon/files/ppt.png">
|
|
<div>
|
|
<p>科学地使用瓶盖.pptx</p>
|
|
<p>5 分钟前</p>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="a tj-obj">
|
|
<img src="icon/files/img.png">
|
|
<div>
|
|
<p>可口可乐瓶盖.jpg</p>
|
|
<p>7 分钟前</p>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="a tj-obj">
|
|
<img src="icon/files/img.png">
|
|
<div>
|
|
<p>瓶盖构造图.jpg</p>
|
|
<p>16 分钟前</p>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="a tj-obj">
|
|
<img src="icon/files/word.png">
|
|
<div>
|
|
<p>瓶盖的构造及作用.docx</p>
|
|
<p>24 分钟前</p>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="a tj-obj">
|
|
<img src="icon/files/excel.png">
|
|
<div>
|
|
<p>可口可乐瓶盖厚度.xlsx</p>
|
|
<p>35 分钟前</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="dock-box">
|
|
<!-- Dock(任务)栏 -->
|
|
<div class="dock">
|
|
<a href="#" id="start-btn" onclick="
|
|
if($('#start-menu').hasClass('show')){
|
|
$('#start-menu').removeClass('show');
|
|
setTimeout(() => {
|
|
$('#start-menu').removeClass('show-begin');
|
|
}, 200);
|
|
}
|
|
else{
|
|
$('#start-menu').addClass('show-begin');
|
|
setTimeout(() => {
|
|
$('#start-menu').addClass('show');
|
|
}, 0);//非常神奇,我也不知道为什么去掉就不行
|
|
}">
|
|
<!-- 开始按钮 -->
|
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
width="26" height="26" viewBox="0,0,141.01231,139.7904">
|
|
<g transform="translate(-249.49385,-110.1048)">
|
|
<g data-paper-data="{"isPaintingLayer":true}" fill-rule="nonzero" stroke="none"
|
|
stroke-width="0" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10"
|
|
stroke-dasharray="" stroke-dashoffset="0" style="mix-blend-mode: normal">
|
|
<g>
|
|
<path
|
|
d="M249.91007,176.97859v-37.06258c0,0 -0.61201,-15.50218 6.44566,-22.55984c6.65481,-6.65481 21.75412,-7.25137 21.75412,-7.25137h38.674c0,0 -5.63996,23.50704 -5.63996,34.44402c0,12.14542 4.83426,33.03404 4.83426,33.03404c0,0 -14.30746,5.32223 -33.64257,5.43854c-19.06387,0.11467 -32.4255,-6.04281 -32.4255,-6.04281z"
|
|
fill="#c349b3" />
|
|
<path
|
|
d="M322.8133,175.97146c0,0 -5.43854,-18.43537 -5.43854,-31.42262c0,-11.24451 6.24424,-34.44402 6.24424,-34.44402h38.67399c0,0 15.09931,0.59657 21.75412,7.25138c7.05766,7.05765 6.44567,22.55983 6.44567,22.55983v37.06257c0,0 -13.50808,-6.9902 -34.28384,-6.44566c-19.42489,0.50913 -33.39565,5.43854 -33.39565,5.43854z"
|
|
data-paper-data="{"index":null}" fill="#af63c7" />
|
|
<path
|
|
d="M390.49279,183.02141v37.06258c0,0 0.61199,15.50217 -6.44567,22.55983c-6.65481,6.65481 -21.75412,7.25138 -21.75412,7.25138h-38.67399c0,0 5.63995,-17.9772 5.63995,-35.04831c0,-15.863 -4.63281,-31.82548 -4.63281,-31.82548c0,0 12.3084,-5.19058 31.58281,-5.63996c17.27865,-0.40286 34.28384,5.63996 34.28384,5.63996z"
|
|
data-paper-data="{"index":null}" fill="#5f79e1" />
|
|
<path
|
|
d="M317.58956,184.83425c0,0 4.4314,15.78166 4.4314,32.22833c0,17.11804 -5.63996,32.83262 -5.63996,32.83262h-38.67399c0,0 -15.09932,-0.59657 -21.75413,-7.25138c-7.05766,-7.05767 -6.44566,-22.55983 -6.44566,-22.55983v-37.06258c0,0 14.36466,6.61326 33.43265,6.44566c18.72762,-0.1646 34.6497,-4.63282 34.6497,-4.63282z"
|
|
data-paper-data="{"index":null}" fill="#8072d3" />
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div class="dock about"
|
|
onclick="if($(this).hasClass('show'))$(this).removeClass('show');else $(this).addClass('show')">
|
|
Windows 12 网页版 谭景元原创
|
|
<p>Windows 12 网页版是一个开放源项目,<br>
|
|
希望让用户在网络上预先体验 Windows 12,<br>
|
|
内容可能与 Windows 12 正式版本不一致。<br>
|
|
使用标准网络技术,例如 Html,CSS 和 JS<br>
|
|
此项目绝不附属于微软,且不应与微软操作系统或产品混淆,<br>
|
|
这也不是 Windows365 cloud PC<br>
|
|
本项目中微软、Windows和其他示范产品是微软公司组的商标</p>
|
|
</div>
|
|
</div>
|
|
<div class="window setting">
|
|
<div class="titbar">
|
|
<img src="icon/setting.png" class="icon">
|
|
<p>设置</p>
|
|
<div>
|
|
<a href="#" class="a wbtg red" onclick="hidewin('setting')">
|
|
<i class="bi bi-x-lg"></i>
|
|
<a href="#" class="a wbtg max" onclick="maxwin('setting')">
|
|
<i class="bi bi-app"></i>
|
|
</a>
|
|
<a href="#" class="a wbtg">
|
|
<i class="bi bi-dash-lg"></i>
|
|
</a>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="content" id="win-setting">
|
|
<div class="menu">
|
|
<a href="#" class="a user">
|
|
<i class="bi bi-person"></i>
|
|
<div>
|
|
<p>瓶盖</p>
|
|
<p>tanjingyuan@win12.com</p>
|
|
</div>
|
|
</a>
|
|
<input type="text" class="input" placeholder="查找设置" style="padding-left: 30px;">
|
|
<input-before class="bi bi-search"></input-before>
|
|
<list>
|
|
<a href="#" style="background-color: #ffffff70">
|
|
<span
|
|
style="background-color: #2983cc;border-radius: 10px;position: relative;left: -5px;top:1px;height: 20px;"> </span>
|
|
<img src="apps/setting/icons/system.webp">
|
|
系统
|
|
</a>
|
|
<a href="#">
|
|
<img src="apps/setting/icons/blueteeth.webp">
|
|
蓝牙和其他设备
|
|
</a>
|
|
<a href="#">
|
|
<img src="apps/setting/icons/network.webp">
|
|
网络和 Internet
|
|
</a>
|
|
<a href="#">
|
|
<img src="apps/setting/icons/personal.webp">
|
|
个性化
|
|
</a>
|
|
<a href="#">
|
|
<img src="apps/setting/icons/apps.webp">
|
|
应用
|
|
</a>
|
|
<a href="#">
|
|
<img src="apps/setting/icons/user.webp">
|
|
账户
|
|
</a>
|
|
<a href="#">
|
|
<img src="apps/setting/icons/time.webp">
|
|
时间和语言
|
|
</a>
|
|
<a href="#">
|
|
<img src="apps/setting/icons/game.webp">
|
|
游戏
|
|
</a>
|
|
<a href="#">
|
|
<img src="apps/setting/icons/help.webp">
|
|
辅助功能
|
|
</a>
|
|
<a href="#">
|
|
<img src="apps/setting/icons/safe.webp">
|
|
隐私和安全性
|
|
</a>
|
|
<a href="#">
|
|
<img src="apps/setting/icons/update.webp">
|
|
Windows 更新
|
|
</a>
|
|
</list>
|
|
</div>
|
|
<iframe src="apps/setting/system.html" frameborder="0" class="page"></iframe>
|
|
</div>
|
|
<link rel="stylesheet" href="apps/setting/main.css">
|
|
<script src="apps/setting/main.js"></script>
|
|
</div>
|
|
<script>
|
|
function showwin(name) {
|
|
$('.window.' + name).addClass('show-begin');
|
|
setTimeout(() => {
|
|
$('.window.' + name).addClass('show');
|
|
}, 0);
|
|
setTimeout(() => {
|
|
$('.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('<i class="bi bi-app"></i>');
|
|
} else {
|
|
$('.window.' + name).removeClass('notrans');
|
|
$('.window.' + name).addClass('max');
|
|
$('.window.' + name + '>.titbar>div>.wbtg.max').html('<svg version="1.1" width="12" height="12" viewBox="0,0,37.65105,35.84556" style="margin-top:4px;"><g transform="translate(-221.17804,-161.33903)"><g data-paper-data="{"isPaintingLayer":true}" fill="none" fill-rule="nonzero" stroke="#000000" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" style="mix-blend-mode: normal"><path d="M224.68734,195.6846c-2.07955,-2.10903 -2.00902,-6.3576 -2.00902,-6.3576l0,-13.72831c0,0 -0.23986,-1.64534 2.00902,-4.69202c1.97975,-2.68208 4.91067,-2.00902 4.91067,-2.00902h14.06315c0,0 3.77086,-0.23314 5.80411,1.67418c2.03325,1.90732 1.33935,5.02685 1.33935,5.02685v13.39347c0,0 0.74377,4.01543 -1.33935,6.3576c-2.08312,2.34217 -5.80411,1.67418 -5.80411,1.67418h-13.39347c0,0 -3.50079,0.76968 -5.58035,-1.33935z"/><path d="M229.7952,162.85325h16.06111c0,0 5.96092,-0.36854 9.17505,2.64653c3.21412,3.01506 2.11723,7.94638 2.11723,7.94638v18.55642"/></g></g></svg>')
|
|
|
|
}
|
|
}
|
|
function hidewin(name) {
|
|
$('.window.' + name).removeClass('notrans');
|
|
$('.window.' + name).removeClass('show');
|
|
setTimeout(() => {
|
|
$('.window.' + name).removeClass('show-begin');
|
|
}, 200);
|
|
}
|
|
function showdropdown(dropid, type1, pos1, type2, pos2) {
|
|
var dd = document.getElementById(dropid);
|
|
dd.style.setProperty(type1, pos1 + "px", "important");
|
|
dd.style.setProperty(type2, pos2 + "px", "important");
|
|
if (dd.style.display != "block") {
|
|
dd.style.setProperty("display", "block", "important");
|
|
} else
|
|
dd.style.setProperty("display", "none", "important");
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |