forked from tjy-gitnub/win12
-
Notifications
You must be signed in to change notification settings - Fork 0
/
desktop.html
875 lines (869 loc) · 61.3 KB
/
desktop.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
<!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" />
<!-- Windows 12 网页版 谭景元原创 -->
<!-- Windows 12 网页版是一个开放源项目,
希望让用户在网络上预先体验 Windows 12,
内容可能与 Windows 12 正式版本不一致。
使用标准网络技术,例妙如 Html、CSS 和 Javascript
此项目绝不附属于微软,且不应与微软操作系统或产品混淆,
这也不是 Windows365 cloud PC
本项目中微软、Windows和其他示范产品是微软公司的商标 -->
<link rel="stylesheet" href="./desktop.css" />
<!-- Apps style -->
<link rel="stylesheet" href="apps/style/setting.css">
<link rel="stylesheet" href="apps/style/explorer.css">
<link rel="stylesheet" href="apps/style/calc.css">
<link rel="stylesheet" href="apps/style/about.css">
<link rel="stylesheet" href="apps/style/notepad.css">
<link rel="stylesheet" href="widgets.css">
<link rel="manifest" href="pwa/manifest.json">
<base target="_blank">
</head>
<body>
<div id="loadback" style="background-color:#000;width:100%;height:100%;z-index:105;position:absolute;transition:200ms;">
<style>#loadback.hide{opacity:0;}
loading>svg>circle:first-child{stroke:#fff;fill:none;stroke-width:2px;stroke-linecap:round;
animation:spin-infinite 2s linear 0s infinite normal none running;transform-origin:50% 50%;
transition: all .2s ease-in-out 0s;}loading>svg>circle:last-child{fill:#00000000;}
loading>svg{background-color: #00000000;border-radius: 50%;}
@keyframes spin-infinite {0%{stroke-dasharray:.01px,43.97px;transform:rotate(0deg)}
50%{stroke-dasharray:21.99px,21.99px;transform:rotate(450deg)}
to{stroke-dasharray:.01px,43.97px;transform:rotate(3turn)}}</style>
<svg id="loadbacksvg" viewbox="0,0,306,305" style="transition: 1s;opacity: 0;position: absolute;left: calc(50% - 125px);top:20%;"
width="250" height="250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><clipPath id="clip0"><rect x="897" y="208" width="306" height="305"/></clipPath><linearGradient x1="885.371" y1="221.859" x2="1214.63" y2="498.141" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="fill1"><stop offset="0" stop-color="#A964C8"/><stop offset="0.18" stop-color="#A964C8"/><stop offset="0.36" stop-color="#A266E4"/><stop offset="0.73" stop-color="#346ED8"/><stop offset="0.91" stop-color="#2D8AD5"/><stop offset="1" stop-color="#2D8AD5"/></linearGradient><linearGradient x1="317.629" y1="13.8595" x2="-11.6295" y2="290.141" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="fill2"><stop offset="0" stop-color="#A964C8"/><stop offset="0.18" stop-color="#A964C8"/><stop offset="0.36" stop-color="#A266E4"/><stop offset="0.73" stop-color="#346ED8"/><stop offset="0.91" stop-color="#2D8AD5"/><stop offset="1" stop-color="#2D8AD5"/></linearGradient><linearGradient x1="885.371" y1="221.859" x2="1214.63" y2="498.141" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="fill3"><stop offset="0" stop-color="#A964C8"/><stop offset="0.18" stop-color="#A964C8"/><stop offset="0.36" stop-color="#A266E4"/><stop offset="0.73" stop-color="#346ED8"/><stop offset="0.91" stop-color="#2D8AD5"/><stop offset="1" stop-color="#2D8AD5"/></linearGradient><linearGradient x1="-11.6295" y1="290.141" x2="317.629" y2="13.8595" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="fill4"><stop offset="0" stop-color="#A964C8"/><stop offset="0.18" stop-color="#A964C8"/><stop offset="0.36" stop-color="#A266E4"/><stop offset="0.73" stop-color="#346ED8"/><stop offset="0.91" stop-color="#2D8AD5"/><stop offset="1" stop-color="#2D8AD5"/></linearGradient></defs><g clip-path="url(#clip0)" transform="translate(-897 -208)"><path d="M936.813 208 1035.2 208 1035.2 208 1036 340.407C1011.65 331.352 986.507 325.493 963.762 325.226 941.508 325.759 919.254 339.075 897 346L897 247.755C897 225.799 914.825 208 936.813 208Z" fill="url(#fill1)" fill-rule="evenodd"/><path d="M40.0431 0 139 0 139 0 139 140.549C115.82 150.681 92.6407 159.212 69.4611 158.946 45.5026 160.012 23.1537 145.082 0 138.15L0 39.7981C0 17.8182 17.9278 0 40.0431 0Z" fill="url(#fill2)" fill-rule="evenodd" transform="matrix(-1 0 0 1 1203 208)"/><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(#fill3)" fill-rule="evenodd"/><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(#fill4)" fill-rule="evenodd" transform="matrix(1 -1.22465e-16 -1.22465e-16 -1 897 512)"/></g></svg>
<loading id="loadbackloading" style="transition:1s;opacity: 0;">
<svg style="position: absolute;left: calc(50% - 25px);top:72%;" width="50px" height="50px" viewBox="0 0 16 16">
<circle cx="8px" cy="8px" r="7px"></circle><circle cx="8px" cy="8px" r="6px"></circle></svg>
<p id="loadbackupdate" style="position:absolute;top:calc(72% + 55px);left:0;width:100%;text-align:center;color:#fff;font-size: 25px;display:none;">正在更新</p>
</loading><script>setTimeout(() => {document.getElementById('loadbacksvg').style.opacity=1;
document.getElementById('loadbackloading').style.opacity=1;}, 100);</script>
</div>
<!-- <img src="https://bing.com/th?id=OHR.Trossachs_ZH-CN9299955040_UHD.jpg&qlt=100" alt=""> -->
<script src="./jq.min.js"></script>
<!-- 预加载设置图标 -->
<p style="font-family: SettingsIcons;"> </p>
<div id="start-menu">
<!-- 开始菜单 -->
<div id="s-m-l">
<div id="s-m-user">
<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();
$('#search-btn').addClass('show');
$('#search-win').addClass('show-begin');
setTimeout(() => {
$('#search-win').addClass('show');
}, 0);
$('#search-input').focus();">
<input-before class="bi bi-search"></input-before>
<list>
<p class="text">可用</p>
<a onclick="openapp('setting');hide_startmenu();">
<img src="icon/setting.png"><p>设置</p></a>
<a onclick="openapp('explorer');hide_startmenu();">
<img src="icon/explorer.png"><p>文件资源管理器</p></a>
<a onclick="openapp('calc');hide_startmenu();">
<img src="icon/calc.png"><p>计算器</p></a>
<a onclick="openapp('about');hide_startmenu();">
<img src="icon/about.png"><p>关于Win12网页版</p></a>
<a onclick="openapp('notepad');hide_startmenu();">
<img src="icon/notepad.png"><p>记事本</p></a>
<p class="text">其它</p>
<a><img src="icon/camera.png"><p>相机</p></a>
</list>
</div>
<div id="s-m-r">
<div class="row1">
<div class="folder">
<a class="a sm-app enable" onclick="openapp('explorer');apps.explorer.goto('C:/用户/Administrator/文档');
hide_startmenu();"><img src="icon/folder/docs.png"><p>文档</p></a>
<a class="a sm-app enable" onclick="openapp('explorer');apps.explorer.goto('C:/用户/Administrator/图片');
hide_startmenu();"><img src="icon/folder/pics.png"><p>图片</p></a>
<a class="a sm-app enable" onclick="openapp('explorer');apps.explorer.goto('C:/用户/Administrator/音乐');
hide_startmenu();"><img src="icon/folder/music.png"><p>音乐</p></a></div>
<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')">
<span class="bi bi-power"></span>
<i class="bi bi-power" onclick="$('#start-menu').removeClass('show');
setTimeout(() => {window.location='shutdown.html';},200);" title="关机"></i>
<i class="bi bi-arrow-counterclockwise" onclick="$('#start-menu').removeClass('show');
setTimeout(() => {window.location='reload.html';},200);" title="重启"></i>
</a>
<a class="a btn btn-icon big" 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');
}else{
$('#start-menu>#s-m-r>.row1>.tool>.btn-icon.big').html('<i class=\'bi bi-arrows-angle-contract\'></i>');
$('#start-menu').addClass('max');
}
">
<i class="bi bi-arrows-angle-expand"></i>
</a>
</div>
</div>
<div class="pinned">
<!-- 已固定 卡片 -->
<div class="title">
<p>已固定</p>
<div>
<a class="a more-btn">所有应用 <i class="bi bi-chevron-right"></i></a>
<!-- 这个好像没什么必要 -->
</div>
</div>
<div class="apps">
<a class="a sm-app enable" onclick="openapp('calc');hide_startmenu();" oncontextmenu="return showcm(event,'smapp',['calc','计算器'])">
<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" onclick="window.open('https:\/\/github.com/tjy-gitnub/win12/issues','_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 enable" onclick="openapp('about');hide_startmenu();" oncontextmenu="return showcm(event,'smapp',['about','关于 Win12 网页版'])">
<img src="icon/about.png"><p>关于Win12网页版</p></a>
<a class="a sm-app enable" onclick="openapp('explorer');hide_startmenu();" oncontextmenu="return showcm(event,'smapp',['explorer','文件资源管理器'])">
<img src="icon/explorer.png"><p>文件资源管理器</p></a>
<a class="a sm-app enable" onclick="openapp('notepad');hide_startmenu();" oncontextmenu="return showcm(event,'smapp',['notepad','记事本'])">
<img src="icon/notepad.png"><p>记事本</p></a>
<a class="a sm-app enable" onclick="openapp('setting');hide_startmenu();" oncontextmenu="return showcm(event,'smapp',['setting','设置'])">
<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>
<a class="a sm-app"><img src="icon/terminal.png"><p>终端</p></a>
</div>
</div>
<div class="tuijian">
<!-- 推荐的项目 卡片 -->
<div class="title">
<p>推荐的项目</p>
<div>
<a class="a more-btn">更多 <i class="bi bi-chevron-right"></i></a>
</div>
</div>
<div class="apps">
<a class="a tj-obj act"><img src="icon/files/ppt.png"><div><p>科学地使用瓶盖.pptx</p><p>5 分钟前</p></div></a>
<a class="a tj-obj act"><img src="icon/files/img.png"><div><p>可口可乐瓶盖.jpg</p><p>7 分钟前</p></div></a>
<a class="a tj-obj act"><img src="icon/files/img.png"><div><p>瓶盖构造图.jpg</p><p>16 分钟前</p></div></a>
<a class="a tj-obj act"><img src="icon/files/word.png"><div><p>瓶盖的构造及作用.docx</p><p>24 分钟前</p></div></a>
<a class="a tj-obj act"><img src="icon/files/excel.png"><div><p>可口可乐瓶盖厚度.xlsx</p><p>35 分钟前</p></div></a>
</div>
</div>
</div>
</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-before class="bi bi-search"></input-before>
<div class="tab">
<a class="now">全部</a><a>应用</a><a>文档</a><a>网页</a>
<a>电子邮件</a><a>人员</a><a>设置</a><a>视频</a>
<a>文件夹</a><a>音乐</a><a>照片</a>
</div>
<div class="ans">
<div class="list">
<list>
什么也没有
</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>
</div>
</div>
<script>
// $('').add()
</script>
<div id="widgets">
<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, #ad6ecaee, #3b91d8ee);color:#fff;"><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>
<div class="menu">
<a title="打开应用" class="a img" onclick="$('.wg.calc>.titbar>.menu').removeClass('show');hide_widgets();openapp('calc')">
<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>
</div>
</div>
<div class="content">
<input value="" onkeydown="if(event.keyCode == 13)$('*:not(.template)>*>.wg.calc>.content>.keyb>.ans').click()">
<a style="grid-area: pow;" class="b" onclick="$('*:not(.template)>*>.wg.calc>.content>input')[0].value*=$('*:not(.template)>*>.wg.calc>.content>input').val()">𝑥²</a>
<a style="grid-area: sqrt;" class="b" onclick="$('*:not(.template)>*>.wg.calc>.content>input').val(Math.sqrt($('*:not(.template)>*>.wg.calc>.content>input').val()))">√𝑥</a>
<a style="grid-area: c;" class="b" onclick="$('*:not(.template)>*>.wg.calc>.content>input')[0].value=''">C</a>
<a style="grid-area: jia;" class="b u" onclick="widgets.calc.add('+')">+</a>
<a style="grid-area: n7;" class="b" onclick="widgets.calc.add('7')">7</a>
<a style="grid-area: n8;" class="b" onclick="widgets.calc.add('8')">8</a>
<a style="grid-area: n9;" class="b" onclick="widgets.calc.add('9')">9</a>
<a style="grid-area: jian;" class="b u" onclick="widgets.calc.add('-')">-</a>
<a style="grid-area: n4;" class="b" onclick="widgets.calc.add('4')">4</a>
<a style="grid-area: n5;" class="b" onclick="widgets.calc.add('5')">5</a>
<a style="grid-area: n6;" class="b" onclick="widgets.calc.add('6')">6</a>
<a style="grid-area: cheng;" class="b u" onclick="widgets.calc.add('*')">×</a>
<a style="grid-area: n1;" class="b" onclick="widgets.calc.add('1')">1</a>
<a style="grid-area: n2;" class="b" onclick="widgets.calc.add('2')">2</a>
<a style="grid-area: n3;" class="b" onclick="widgets.calc.add('3')">3</a>
<a style="grid-area: chu;" class="b u" onclick="widgets.calc.add('/')">÷</a>
<a style="grid-area: dot;" class="b" onclick="widgets.calc.add('.')">.</a>
<a style="grid-area: n0;" class="b" onclick="widgets.calc.add('0')">0</a>
<a style="grid-area: back;" class="b" onclick="$('*:not(.template)>*>.wg.calc>.content>input').val($('*:not(.template)>*>.wg.calc>.content>input')[0].value.substring(0,$('*:not(.template)>*>.wg.calc>.content>input')[0].value.length-1));"><i class="bi bi-backspace"></i></a>
<a style="grid-area: ans;" class="b ans u" onclick="$('*:not(.template)>*>.wg.calc>.content>input')[0].value=eval($('*:not(.template)>*>.wg.calc>.content>input')[0].value)"> =</a>
</div>
</div>
</div>
</div>
<div class="grid">
</div>
</div>
</div>
<span class="hr"></span>
<div class="news">
<div class="bar">
<p class="tit">新闻</p>
<p style="color: #7f7f7f;margin-right: 5px;margin-top: 2px;">注意: 新闻内容均不属实 </p>
</div>
<div class="content">
<div class="card" style="grid-column: 1/6;grid-row: 1/3;color: #fff;background: var(--bgul);background-position:-50px -370px;background-size: 150%;">
<p class="tit" style="font-size: 22px;margin: 110px 0 0 30px;">Windows12 网页版 v3.4.1 发布</p>
<a class="a" style="margin: 5px 0 0 250px;font-size: 17px;color: #9dd0fb;" onclick="hide_widgets();
openapp('about');if($('.window.about').hasClass('min'))minwin('about');
$('#win-about>.update').show(200);$('#win-about>.about').hide();
$('#win-about>.update>div>details:first-child').attr('open','open')">详细信息 ></a>
</div>
<div class="card" style="grid-column: 1/4;grid-row: 3/5;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;">详细信息 ></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/7;background:linear-gradient(#00000000,var(--bg) 70%),url(img/hs.jpg) bottom;background-size: cover;">
<p class="tit" style="font-size: 19px;margin: 75px 0 0 10px;">美国一小孩做核酸被捅死，背后原因究竟为何</p>
<a class="a" style="margin: 0 0 0 80px;font-size: 17px;">详细信息 ></a>
</div>
<div class="card" style="grid-column: 3/6;grid-row: 5/8;background:linear-gradient(#00000000 0 30%,var(--bg) 95%),url(img/yq.jpg) bottom;background-size: cover;">
<p class="tit" style="font-size: 19px;margin: 210px 0 -20px 10px;">中国宇航员谭景元昨天下午成功登月</p>
<a class="a" style="margin: 0 0 0 170px;font-size: 17px;">详细信息 ></a>
</div>
<div class="card" style="grid-column: 1/3;grid-row: 7/9;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="
window.open('https://github.com/tjy-gitnub/win12/issues','_blank');">提交issues ></a>
</div>
</div>
</div>
</div>
<div id="datebox">
<div class="tit">
<p class="time">12:29:19</p>
<p class="date">星期一, 2022年09月22日</p>
<hr>
</div>
<div class="cont">
<div class="head">
<p>一</p><p>二</p><p>三</p><p>四</p><p>五</p><p>六</p><p>日</p>
</div>
<div class="body">
</div>
</div>
</div>
<div id="dock-box">
<!-- Dock(任务)栏 -->
<div class="dock dock-start">
<a class="dock-btn" id="start-btn" title="开始" onclick="
if($('#start-menu').hasClass('show')){
hide_startmenu();
}
else{
$('#start-btn').addClass('show');
if($('#search-win').hasClass('show')){
$('#search-btn').removeClass('show');
$('#search-win').removeClass('show');
setTimeout(() => {
$('#search-win').removeClass('show-begin');
}, 200);
hide_widgets();
}
if($('#widgets').hasClass('show'))hide_widgets();
$('#start-menu').addClass('show-begin');
setTimeout(() => {
$('#start-menu').addClass('show');
}, 0);
}" oncontextmenu="return showcm(event,'winx',null)">
<!-- 开始按钮 -->
<svg class="menu" viewBox="0,0,440,439" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
overflow="hidden">
<defs>
<clipPath id="clip-start1">
<rect x="134" y="59" width="440" height="439" />
</clipPath>
</defs>
<g clip-path="url(#clip-start1)" transform="translate(-134 -59)">
<path
d="M233.479 67.5001 475.521 67.5001C525.767 67.5001 566.5 108.233 566.5 158.479L566.5 490.5 142.5 490.5 142.5 158.479C142.5 108.233 183.233 67.5001 233.479 67.5001Z"
stroke="#7F7F7F" stroke-width="14.6667" stroke-linecap="round" stroke-miterlimit="8" fill="#A6A6A6"
fill-rule="evenodd" style="fill: var(--bg70);"/>
<path d="M208.5 132.5 334.716 132.5" stroke="#888" stroke-width="14.6667" stroke-linecap="round"
stroke-miterlimit="8" fill="none" fill-rule="evenodd" />
<path d="M208.5 175.5 386.34 175.5" stroke="#888" stroke-width="14.6667" stroke-linecap="round"
stroke-miterlimit="8" fill="none" fill-rule="evenodd" />
<path d="M208.5 221.5 271.608 221.5" stroke="#888" stroke-width="14.6667" stroke-linecap="round"
stroke-miterlimit="8" fill="none" fill-rule="evenodd" />
</g>
</svg>
<svg class="ico" 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,306,305"><defs><clipPath id="clip0"><rect x="897" y="208" width="306" height="305"></rect>
</clipPath><linearGradient x1="885.371" y1="221.859" x2="1214.63" y2="498.141" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="sf1">
<stop offset="0" stop-color="#A964C8"></stop><stop offset="0.18" stop-color="#A964C8"></stop><stop offset="0.36" stop-color="#A266E4"></stop>
<stop offset="0.73" stop-color="#346ED8"></stop><stop offset="0.91" stop-color="#2D8AD5"></stop><stop offset="1" stop-color="#2D8AD5"></stop>
</linearGradient><linearGradient x1="317.629" y1="13.8595" x2="-11.6295" y2="290.141" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="sf2">
<stop offset="0" stop-color="#A964C8"></stop><stop offset="0.18" stop-color="#A964C8"></stop><stop offset="0.36" stop-color="#A266E4"></stop>
<stop offset="0.73" stop-color="#346ED8"></stop><stop offset="0.91" stop-color="#2D8AD5"></stop><stop offset="1" stop-color="#2D8AD5"></stop>
</linearGradient><linearGradient x1="885.371" y1="221.859" x2="1214.63" y2="498.141" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="sf3">
<stop offset="0" stop-color="#A964C8"></stop><stop offset="0.18" stop-color="#A964C8"></stop><stop offset="0.36" stop-color="#A266E4"></stop>
<stop offset="0.73" stop-color="#346ED8"></stop><stop offset="0.91" stop-color="#2D8AD5"></stop><stop offset="1" stop-color="#2D8AD5"></stop>
</linearGradient><linearGradient x1="-11.6295" y1="290.141" x2="317.629" y2="13.8595" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="sf4">
<stop offset="0" stop-color="#A964C8"></stop><stop offset="0.18" stop-color="#A964C8"></stop><stop offset="0.36" stop-color="#A266E4"></stop>
<stop offset="0.73" stop-color="#346ED8"></stop><stop offset="0.91" stop-color="#2D8AD5"></stop><stop offset="1" stop-color="#2D8AD5"></stop>
</linearGradient></defs><g clip-path="url(#clip0)" transform="translate(-897 -208)">
<path d="M936.813 208 1035.2 208 1035.2 208 1036 340.407C1011.65 331.352 986.507 325.493 963.762 325.226 941.508 325.759 919.254 339.075 897 346L897 247.755C897 225.799 914.825 208 936.813 208Z" fill="url(#sf1)" fill-rule="evenodd"></path>
<path d="M40.0431 0 139 0 139 0 139 140.549C115.82 150.681 92.6407 159.212 69.4611 158.946 45.5026 160.012 23.1537 145.082 0 138.15L0 39.7981C0 17.8182 17.9278 0 40.0431 0Z" fill="url(#sf2)" fill-rule="evenodd" transform="matrix(-1 0 0 1 1203 208)"></path>
<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="
if($('#search-win').hasClass('show')){
$('#search-btn').removeClass('show');
$('#search-win').removeClass('show');
setTimeout(() => {
$('#search-win').removeClass('show-begin');
}, 200);
}
else{
$('#search-btn').addClass('show');
if($('#start-menu').hasClass('show'))hide_startmenu();
if($('#widgets').hasClass('show'))hide_widgets();
$('#search-win').addClass('show-begin');
setTimeout(() => {
$('#search-win').addClass('show');
}, 0);
$('#search-input').focus();
}">
<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="
if($('#widgets').hasClass('show')){
hide_widgets();
}
else{
$('#widgets-btn').addClass('show');
if($('#search-win').hasClass('show')){
$('#search-btn').removeClass('show');
$('#search-win').removeClass('show');
setTimeout(() => {
$('#search-win').removeClass('show-begin');
}, 200);
}
if($('#start-menu').hasClass('show'))hide_startmenu();
$('#widgets').addClass('show-begin');
setTimeout(() => {
$('#widgets').addClass('show');
}, 0);
$('#widgets-input').focus();
}">
<svg viewBox="0,0,464,464" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden" class="wid1"><defs><clipPath id="wid1-clip0"><rect x="655" y="70" width="464" height="464"/></clipPath><linearGradient x1="613.849" y1="144.008" x2="1161.15" y2="459.992" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="wid1-fill1"><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(#wid1-clip0)" transform="translate(-655 -70)"><path d="M656 187.928C656 123.35 708.35 71 772.928 71L1002.07 71C1066.65 71 1119 123.35 1119 187.928L1119 416.072C1119 480.65 1066.65 533 1002.07 533L772.928 533C708.35 533 656 480.65 656 416.072Z" fill="url(#wid1-fill1)" fill-rule="evenodd"/></g></svg>
<svg viewBox="0,0,207,226" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden" class="wid2"><defs><clipPath id="wid2-clip0"><rect x="316" y="202" width="207" height="226"/></clipPath><linearGradient x1="344.945" y1="185.866" x2="494.055" y2="444.134" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="wid2-fill1"><stop offset="0" stop-color="#11CCF1"/><stop offset="0.13" stop-color="#11CCF1"/><stop offset="1" stop-color="#2983CC"/></linearGradient></defs><g clip-path="url(#wid2-clip0)" transform="translate(-316 -202)"><path d="M317 260.165C317 228.041 343.041 202 375.165 202L463.835 202C495.959 202 522 228.041 522 260.165L522 369.835C522 401.959 495.959 428 463.835 428L375.165 428C343.041 428 317 401.959 317 369.835Z" fill="url(#wid2-fill1)" fill-rule="evenodd"/><path d="M349.5 249.5 393.5 249.5" stroke="#FFFFFF" stroke-width="14.6667" stroke-linecap="round" stroke-miterlimit="8" fill="none" fill-rule="evenodd"/><path d="M349.5 286.5 464.5 286.5" stroke="#FFFFFF" stroke-width="14.6667" stroke-linecap="round" stroke-miterlimit="8" fill="none" fill-rule="evenodd"/><path d="M349.5 323.5 422.5 323.5" stroke="#FFFFFF" stroke-width="14.6667" stroke-linecap="round" stroke-miterlimit="8" fill="none" fill-rule="evenodd"/></g></svg>
<svg viewBox="0,0,180,394" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden" class="wid3"><defs><clipPath id="wid3-clip0"><rect x="111" y="202" width="180" height="394"/></clipPath><linearGradient x1="93.038" y1="212.37" x2="307.962" y2="584.63" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="wid3-fill1"><stop offset="0" stop-color="#E062D7"/><stop offset="0.13" stop-color="#E062D7"/><stop offset="1" stop-color="#A266E4"/></linearGradient></defs><g clip-path="url(#wid3-clip0)" transform="translate(-111 -202)"><path d="M111 265.803C111 230.565 139.565 202 174.803 202L226.197 202C261.435 202 290 230.565 290 265.803L290 531.197C290 566.435 261.435 595 226.197 595L174.803 595C139.565 595 111 566.435 111 531.197Z" fill="url(#wid3-fill1)" fill-rule="evenodd"/><path d="M144.5 250.5 217.5 250.5" stroke="#FFFFFF" stroke-width="14.6667" stroke-linecap="round" stroke-miterlimit="8" fill="none" fill-rule="evenodd"/><path d="M144.5 287.5 184.246 287.5" stroke="#FFFFFF" stroke-width="14.6667" stroke-linecap="round" stroke-miterlimit="8" fill="none" fill-rule="evenodd"/><path d="M144.5 324.5 230.931 324.5" stroke="#FFFFFF" stroke-width="14.6667" stroke-linecap="round" stroke-miterlimit="8" fill="none" fill-rule="evenodd"/></g></svg>
<svg viewBox="0,0,206,152" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden" class="wid4"><defs><clipPath id="wid4-clip0"><rect x="317" y="444" width="206" height="152"/></clipPath><linearGradient x1="361.399" y1="419.366" x2="477.601" y2="620.634" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="wid4-fill1"><stop offset="0" stop-color="#D854CB"/><stop offset="0.13" stop-color="#D854CB"/><stop offset="1" stop-color="#A266E4"/></linearGradient></defs><g clip-path="url(#wid4-clip0)" transform="translate(-317 -444)"><path d="M317 498.466C317 468.938 340.938 445 370.466 445L468.534 445C498.062 445 522 468.938 522 498.466L522 541.534C522 571.062 498.062 595 468.534 595L370.466 595C340.938 595 317 571.062 317 541.534Z" fill="url(#wid4-fill1)" fill-rule="evenodd"/><path d="M356.5 548.5C370.917 521.094 385.333 493.688 400.5 492.521 415.667 491.355 434 538.837 447.5 541.503 461 544.168 479.417 520.386 481.5 508.515" stroke="#FFFFFF" stroke-width="14.6667" stroke-linecap="round" stroke-miterlimit="8" fill="none" fill-rule="evenodd"/></g></svg>
</a>
</div>
<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')}">
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 class="a dock theme" 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>
<div class="a dock date" onclick="if($('#datebox').hasClass('show')){
$('.dock.date').removeClass('show');
$('#datebox').removeClass('show');
setTimeout(() => {
$('#datebox').removeClass('show-begin');
}, 200);
}
else{
$('.dock.date').addClass('show');
$('#datebox').css('left',$(this).position().left-125);
$('#datebox').addClass('show-begin');
setTimeout(() => {
$('#datebox').addClass('show');
}, 0);
}">
<p class="time">12:34:56</p>
<p class="date">2022/10/01</p>
<i class="bi bi-chevron-down"></i>
</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="显示连接到此计算机的驱动器和硬件。">
<p>此电脑</p>
</div>
<div class="b" ondblclick="openapp('setting');" ontouchstart="openapp('setting');">
<img src="icon/setting.png">
<p>设置</p>
</div>
<div class="b" ondblclick="openapp('about');" ontouchstart="openapp('about');">
<img src="icon/about.png">
<p>关于 Win12 网页版</p>
</div>
</div>
<div id="cm">
<input class="foc">
<list>
</list>
</div>
<div id="dp">
<list>
</list>
</div>
<div id="window-fill"></div>
<div class="window setting">
<div class="titbar" oncontextmenu="return showcm(event,'titbar','setting')" ondblclick="maxwin('setting')">
<img src="icon/setting.png" class="icon"><p>设置</p>
<div>
<a class="a wbtg red" onclick="hidewin('setting')"><i class="bi bi-x-lg"></i></a>
<a class="a wbtg max" onclick="maxwin('setting')"><i class="bi bi-app"></i></a>
<a class="a wbtg" onclick="minwin('setting')"><i class="bi bi-dash-lg"></i></a>
</div>
</div>
<div class="loadback">
<img src="icon/setting.png" class="icon">
</div>
<div class="content" id="win-setting">
<div class="menu">
<a class="a user">
<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-clip1"><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-fill3"><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-fill4"><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-clip1)" 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-fill3)" 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-fill4)" fill-rule="evenodd"/></g></svg>
<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 class="check"><span
style="background-image: linear-gradient(180deg, #ad6eca, #3b91d8);border-radius: 10px;position: relative;left: -10px;top:1px;height: 20px;margin-right: -4px;">
</span><img src="apps/icons/setting/system.png">系统</a>
<a><img src="apps/icons/setting/blueteeth.png">蓝牙和其他设备</a>
<a><img src="apps/icons/setting/network.png">网络和 Internet</a>
<a><img src="apps/icons/setting/personal.png">个性化</a>
<a><img src="apps/icons/setting/apps.png">应用</a>
<a><img src="apps/icons/setting/user.png">账户</a>
<a><img src="apps/icons/setting/time.png">时间和语言</a>
<a><img src="apps/icons/setting/game.png">游戏</a>
<a><img src="apps/icons/setting/help.png">辅助功能</a>
<a><img src="apps/icons/setting/safe.png">隐私和安全性</a>
<a><img src="apps/icons/setting/update.png">Windows 更新</a>
</list>
</div>
<div class="page" style="overflow: auto;">
<p class="title">系统</p>
<div style="display: flex;">
<p class="s-icon" style="font-size: 70px;margin: -8px 10px 0px 20px;"></p>
<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>
</div>
</div>
<div class="setting-list">
<a><icon></icon><div><p>显示</p><p>显示器、亮度、夜间模式、显示描述</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon></icon><div><p>声音</p><p>声音级别、输入、输出、声音设备</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon></icon><div><p>通知</p><p>来自系统和应用的警报</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon></icon><div><p>专注助手</p><p>通知、自动规则</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon class="b"></icon><div><p>电源</p><p>睡眠、电池使用情况、节电模式</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon></icon><div><p>存储</p><p>存储空间、驱动器、配置规则</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon></icon><div><p>多任务处理</p><p>贴靠窗口、桌面、任务切换</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon></icon><div><p>激活</p><p>激活状态、订阅、产品密钥</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon></icon><div><p>疑难解答</p><p>建议的疑难解答、首选项和历史记录</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon></icon><div><p>恢复</p><p>重置、高级启动、返回</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon></icon><div><p>投影到此电脑</p><p>权限、配对 PIN、可发现性</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon></icon><div><p>远程桌面</p><p>远程桌面用户、连接权限</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon></icon><div><p>剪贴板</p><p>剪贴和复制历史记录、同步、清除</p></div><i class="bi bi-chevron-right"></i></a>
<a><icon></icon><div><p>关于</p><p>设备规格、重命名电脑、Windows 规格</p></div><i class="bi bi-chevron-right"></i></a>
</div>
</div>
</div>
</div>
<div class="window explorer">
<div class="titbar" oncontextmenu="return showcm(event,'titbar','explorer')" ondblclick="maxwin('explorer')">
<img src="icon/explorer.png" class="icon">
<p>文件资源管理器</p>
<div>
<a class="a wbtg red" onclick="hidewin('explorer')"><i class="bi bi-x-lg"></i></a>
<a class="a wbtg max" onclick="maxwin('explorer')"><i class="bi bi-app"></i></a>
<a class="a wbtg" onclick="minwin('explorer')"><i class="bi bi-dash-lg"></i></a>
</div>
</div>
<div class="loadback">
<img src="icon/explorer.png" class="icon">
</div>
<div class="content" id="win-explorer">
<div class="menu">
<div class="card pinned">
<p class="title"><span style="font: 15px;">📌</span> 已固定</p>
<list>
<a><img src="apps/icons/explorer/qa.png">快速访问</a>
<a><img src="apps/icons/explorer/od.png">OneDrive</a>
<a class="check" onclick="apps.explorer.reset();"><span
style="background:linear-gradient(180deg, #ad6eca, #3b91d8);width:4px;height: 19px;border-radius: 10px;margin-left: -12px;margin-right: 8px;margin-top: 1px;"></span>
<img src="apps/icons/explorer/thispc.png">此电脑</a>
<a><img src="apps/icons/explorer/rb.png">回收站</a>
</list>
</div>
<div class="card tags">
<p class="title"><span style="font: 15px;">🏷</span> 标签</p>
<list>
<a><span style="background-color: red;"></span>红色</a>
<a><span style="background-color: #3981d9;"></span>蓝色</a>
<a><span style="background-color: yellow;"></span>黄色</a>
<a><span style="background-color: green;"></span>绿色</a>
<a><span style="background-color: #fc9816;"></span>橙色</a>
<a><span style="background-color: purple;"></span>紫色</a>
<a><span style="background-color: #ffcad4;"></span>粉色</a>
</list>
</div>
</div>
<div class="main">
<div class="tool">
<a class="a b t"><img src="apps/icons/explorer/tool-new.png">新建</a><div class="hr"></div>
<a class="a b"><img src="apps/icons/explorer/tool-cut.png"></a>
<a class="a b"><img src="apps/icons/explorer/tool-copy.png"></a>
<a class="a b"><img src="apps/icons/explorer/tool-paste.png"></a>
<a class="a b"><img src="apps/icons/explorer/tool-rename.png"></a><div class="hr"></div>
<a class="a b t"><img src="apps/icons/explorer/tool-sort.png">排序方式</a>
<a class="a b t"><img src="apps/icons/explorer/tool-view.png">布局</a>
</div>
<div class="content" oncontextmenu="return showcm(event,'explorer.content',null);">
<div class="tool">
<a class="a btn btn-icon"><i class="bi bi-arrow-left"></i></a>
<a class="a btn btn-icon"><i class="bi bi-arrow-right"></i></a>
<a class="a btn btn-icon goback"><i class="bi bi-arrow-up"></i></a>
<p class="tit">此电脑</p>
<div class="search">
<input type="text" class="input" placeholder="在这里输入你要搜索的内容">
<input-before class="bi bi-search"></input-before>
</div>
</div>
<div class="view">
<!-- 文件列表 -->
</div>
</div>
</div>
</div>
</div>
<div class="window calc">
<div class="titbar" oncontextmenu="return showcm(event,'titbar','calc')">
<img src="icon/calc.png" class="icon">
<p>计算器</p>
<div>
<a class="a wbtg red" onclick="hidewin('calc')"><i class="bi bi-x-lg"></i></a>
<a class="a wbtg max" style="pointer-events: none;color: #777;"><i class="bi bi-app"></i></a>
<a class="a wbtg" onclick="minwin('calc')"><i class="bi bi-dash-lg"></i></a>
</div>
</div>
<div class="loadback">
<img src="icon/calc.png" class="icon">
</div>
<div class="content" id="win-calc">
<input id="calc-input" value="" onkeydown="if(event.keyCode == 13)$('#win-calc>.keyb>.ans').click()">
<div class="keyb">
<a class="a b" onclick="$('#calc-input')[0].value*=$('#calc-input').val()">𝑥²</a>
<a class="a b" onclick="$('#calc-input').val(Math.sqrt($('#calc-input').val()))">√𝑥</a>
<a class="a b" onclick="$('#calc-input')[0].value=''">C</a>
<a class="a b u" onclick="apps.calc.add('+')">+</a>
<a class="a b" onclick="apps.calc.add('7')">7</a>
<a class="a b" onclick="apps.calc.add('8')">8</a>
<a class="a b" onclick="apps.calc.add('9')">9</a>
<a class="a b u" onclick="apps.calc.add('-')">-</a>
<a class="a b" onclick="apps.calc.add('4')">4</a>
<a class="a b" onclick="apps.calc.add('5')">5</a>
<a class="a b" onclick="apps.calc.add('6')">6</a>
<a class="a b u" onclick="apps.calc.add('*')">×</a>
<a class="a b" onclick="apps.calc.add('1')">1</a>
<a class="a b" onclick="apps.calc.add('2')">2</a>
<a class="a b" onclick="apps.calc.add('3')">3</a>
<a class="a b u" onclick="apps.calc.add('/')">÷</a>
<a class="a b" onclick="apps.calc.add('.')">.</a>
<a class="a b" onclick="apps.calc.add('0')">0</a>
<a class="a b" onclick="$('#calc-input').val($('#calc-input')[0].value.substring(0,$('#calc-input')[0].value.length-1));"><i class="bi bi-backspace"></i></a>
<a class="a b ans u" onclick="$('#calc-input')[0].value=eval($('#calc-input')[0].value)"> =</a>
</div>
</div>
</div>
<div class="window about">
<div class="titbar" oncontextmenu="return showcm(event,'titbar','about')" ondblclick="maxwin('about')">
<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>
<a class="a wbtg max" onclick="maxwin('about')"><i class="bi bi-app"></i></a>
<a class="a wbtg" onclick="minwin('about')"><i class="bi bi-dash-lg"></i></a>
</div>
</div>
<div class="loadback">
<img src="icon/about.png" class="icon">
</div>
<div class="content" id="win-about">
<div class="menu">
<list>
<a onclick="$('#win-about>.about').show(200);$('#win-about>.update').hide();"><img src="apps/icons/about/info.svg" height="17px" width="19px">简介</a>
<a onclick="$('#win-about>.update').show(200);$('#win-about>.about').hide();"><img src="apps/icons/about/update.svg" height="20px" width="18px">更新记录</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>  Windows 12 网页版是一个开源项目, 由谭景元原创, 使用标准网络技术,例如 Html、CSS 和 Javascript, 希望让用户在网络上预先体验 Windows 12。</p>
<p>  因为这只是概念版，所以内容可能与 Windows 12 正式版本不一致。</p>
<p>  由于这是一个开源项目，你可以在任何媒介以任何形式复制、发行本作品。
你还可以对该项目进行修改、转换或以本作品为基础进行创作。
但您必须给出适当的署名，您必须提供创作者姓名、作品链接，同时标明是否对此作了修改。您可以用任何合理的方式来署名，但是不得以任何方式暗示许可方认可您或您的使用。</p>
<p>  此项目绝不附属于微软,且不应与微软操作系统或产品混淆, 这也不是 Windows365 cloud PC</p>
<p>  本项目中微软、Windows和其他示范产品是微软公司的商标</p>
</div>
<div style="margin-left: 20px;">
<h2 class="tit"><span></span>其它</h2>
<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>
</div>
</div>
<div class="cnt update" style="display: none;">
<h1 class="tit"><span></span>更新记录</h1>
<div style="margin-left: 20px;">
<details><summary><span>v3.4.1</span> 移动端适配</summary>
<p>  -适配了移动端的双(改成单击)<br>
  -适配了移动端的拖动窗口<br>
  -优化任务栏按钮点击效果<br>
  -更改右键菜单样式<br>
  -下拉菜单悬停展开<br>
  -细节优化和修复</p>
<i>感谢 @User782Tec</i>
</details>
<details><summary><span>v3.4.0</span> 动画优化</summary>
<p>  -别问我为什么动画占一个新版<br>
  -基本上所有动画都进行了更新优化<br>
  -修复了上个版本没删完的标题栏问题<br>
  -修改了开始菜单的图标<br>
  -细节优化和修复</p>
</details>
<details><summary><span>v3.3.0</span> 增加计算器小组件</summary>
<p>  -增加了计算器小组件<br>
  -修复了小组件新闻图片无法加载的问题<br>
  -移除了上一个版本的新窗口标题栏<br>
  -在一些图标按钮上悬停鼠标显示提示<br>
  -去除了所有链接的左下角链接提示<br>
  -细节优化和修复</p>
</details>
<details><summary><span>v3.2.0</span> 增加小组件菜单</summary>
<p>  -增加了小组件(资讯和兴趣)菜单<br>
  -小组件菜单中的新闻内容<br>
  -小组件按钮动画效果<br>
  -应用窗口标题栏样式新增<br>
  -对计算器的计算代码的精简<br>
  -细节优化和修复</p>
</details>
<details><summary><span>v3.1.0</span> 增加文件浏览功能，一些新功能</summary>
<p>  -文件资源管理器浏览功能<br>
  -对PWA更新的优化<br>
  -文件资源管理器右键菜单<br>
  -增加应用启动的加载动画<br>
  -增加应用启动初始化<br>
  -记事本新增"编辑"菜单<br>
  -下拉菜单整体优化<br>
  -右键菜单优化<br>
  -在输入框中允许浏览器的右键菜单<br>
  -双击窗口标题栏最大化<br>
  -细节优化和修复</p>
</details>
<details><summary><span>v3.0.0</span> 桌面图标、记事本、可安装到电脑</summary>
<p>  -可以在Edge、Chrome等主流浏览器中将Win12安装为pwa应用¹<br>
  -新增桌面图标，并增加桌面右键菜单"刷新"功能<br>
  -可以将开始菜单应用右键添加到桌面<br>
  -新增"记事本"应用<br>
  -新的深色模式切换按钮<br>
  -改进了窗口的外观<br>
  -细节优化和修复<br>
<i>1: 正常会有安装的提示，会在链接栏右上角，安装后可离线使用，有网会自动更新。感谢 @dzc120223 的建议</i>
</p>
</details>
<details><summary><span>v2.3.1</span> bug修复、外观优化</summary>
<p>  -修复了拖动窗口图标触发拖拽事件的错误<br>
  -修复了其它拖拽图片的错误<br>
  -右键菜单的外观优化<br>
  -深色模式的可读性优化<br>
  -细节优化和修复</p>
</details>
<details><summary><span>v2.3.0</span> 开始外观优化、日历菜单、任务栏图标动画</summary>
<p>  -开始菜单外观优化、更加松散<br>
  -新增任务栏中的日历菜单<br>
  -任务栏图标添加动画效果<br>
  -窗口最小化动画优化<br>
  -右键菜单的完善<br>
  -细节优化和修复</p>
</details>
<details><summary><span>v2.2.0</span> 开始、搜索按钮动画，右键菜单优化，新列表点击效果</summary>
<p>  -开始、搜索按钮新增点击动画<br>
  -优化右键菜单<br>
  -桌面右键菜单新增<br>
  -新的列表点击效果<br>
  -任务栏动画效果优化<br>
  -细节优化和修复</p>
</details>
<details><summary><span>v2.1.1</span> 更多右键菜单，win10主题列表悬停效果</summary>
<p>  -在开始、任务栏、更新消息支持更多右键菜单<br>
  -右键菜单超出界面的优化<br>
  -列表win10悬停效果<br>
  -点击或右击消息可在窗口中查看详细<br>
  -修复了时间无法显示星期日的问题<br>
  -细节优化</p>
</details>
<details><summary><span>v2.1.0</span> 右键菜单，细节优化更改</summary>
<p>  -在窗口标题、桌面、开始菜单支持右键菜单<br>
  -在其它元素上禁用右键菜单<br>
  -列表点击根据鼠标位置偏移<br>
  -新增更新消息图标<br>
  -修复了按钮点击缩小效果不正常显示的问题<br>
  -修复了更新消息在开机前显示的问题<br>
  -细节优化</p>
</details>
<details><summary><span>v2.0.0</span> 深色主题、更新提示、新点击效果、拖至顶部最大化</summary>
<p>  -支持深色模式<br>
  -在每次更新后显示更新提示<br>
  -去除原 win10 主题点击、悬停动画<br>
  -新的列表项点击动画<br>
  -将窗口拖至顶部最大化<br>
  -优化开始菜单固定项点击效果</p>
</details>
<details><summary><span>v1.1.4</span> 动画优化、显示时间</summary>
<p>  -优化窗口最大最小化动、开始、搜索等动画<br>
  -计算器外观优化<br>
  -"准备"深色主题😏<br>
  -在开始菜单中显示当前的时间<br>
  -一些细节优化</p>
</details>
<details><summary><span>v1.1.3</span> 列表 悬停、点击 效果</summary>
<p>  -在开始菜单、设置、关于、文件资源管理器、计算器中使用新的列表悬停、点击效果<br>
  -在任务栏、关于中使用主题色(蓝紫渐变)<br>
  -任务栏应用圆角优化<br>
  -增加任务栏右下角托盘(未完全实现)<br>
  -使启动时不显示鼠标，更加逼真</p>
</details>
<details><summary><span>v1.1.2</span> 外观优化</summary>
<p>  -透明效果改善<br>
  -在所有应用中使用主题色(蓝紫渐变)<br>
  -Dock(任务)栏圆角优化<br>
  -在设置中使用新的头像<br>
  -加速窗口动画，更加贴近原生</p>
</details>
<details><summary><span>v1.1.1</span> 外观优化，修复了一些 Bug</summary>
<p>  -外观优化，阴影增加<br>
  -修复了开始、搜索菜单关闭时高度会闪一下的问题<br>
  -开始菜单用户头像美化<br>
  -修复了"关于"应用切换标签时文字改变导致动画流畅的问题<br>
  -使页面不能滚动，更加逼真</p>
</details>
<details><summary><span>v1.1.0</span> 增加最小化功能,图标美化</summary>
<p>  -新增最小化窗口功能<br>
  -图标部分美化<br>
  -开始、搜索按钮点击动画美化<br>
  -修复计算器 "𝑥²" 键无效的问题<br>
  -修复窗口打开并最大化后最小化不正常的问题<br>
  -修复多次打开应用任务栏显示错误的问题<br>
  -简化js关于拖动窗口的代码</p>
</details>
<details><summary><span>v1.0.1</span> Bug和一些错别字</summary>
<p>  上传了才发现有 Bug 😅</p>
</details>
<details><summary><span>v1.0.0</span> 计算器功能增加，优化体验与开始菜单，新增关于应用</summary>
<p>  -使开始菜单和搜索窗口在高度不足的页面中更好地显示，页面高度过小也可能显示不全，还是建议使用电脑<br>
  -计算器增加平方与开方功能<br>
  -开始菜单中不可用应用用灰色显示，更加简洁方便<br>
  -新增 "关于Win12网页版" 应用，包含关于本项目的说明和历史更新记录<br>
  -优化开始菜单和搜索窗口的显示动画<br>
  -优化电脑端按钮的体验</p>
</details>
</div>
</div>
</div>
</div>
<div class="window notepad">
<div class="titbar" oncontextmenu="return showcm(event,'titbar','notepad')" ondblclick="maxwin('notepad')">
<img src="icon/notepad.png" class="icon">
<p>记事本</p>
<div>
<a class="a wbtg red" onclick="hidewin('notepad')"><i class="bi bi-x-lg"></i></a>
<a class="a wbtg max" onclick="maxwin('notepad')"><i class="bi bi-app"></i></a>
<a class="a wbtg" onclick="minwin('notepad')"><i class="bi bi-dash-lg"></i></a>
</div>
</div>
<div class="loadback">
<img src="icon/notepad.png" class="icon">
</div>
<div class="content" id="win-notepad">
<div class="tool">
<a class="a" onmouseover="showdp(this,'notepad.file',null)" onmouseleave="hidedp(this,'notepad.file',null)">文件</a>
<a class="a" onmouseover="showdp(this,'notepad.edit',null)" onmouseleave="hidedp(this,'notepad.edit',null)">编辑</a>
</div>
<textarea class="text-box"></textarea>
<a href="" download="未命名.txt" style="opacity: 0;" class="save">另存为</a>
</div>
</div>
<div class="msg update" oncontextmenu="return showcm(event,'msgupdate',null)">
<div class="main" onclick="openapp('about');if($('.window.about').hasClass('min'))minwin('about');
$('#win-about>.update').show(200);$('#win-about>.about').hide();
$('#win-about>.update>div>details:first-child').attr('open','open')">
<p class="tit"></p>
<p class="cont"></p>
</div>
<div class="a hide" onclick="$('.msg').removeClass('show')"><i class="bi bi-arrow-right-short"></i></div>
</div>
<script src="desktop.js"></script>
</body>
</html>