2. Linux.do
  3. Gpt5.6pro（juice 960）的代码能力

Gpt5.6pro（juice 960）的代码能力

SuLe 2026-06-24 13:10 1

先说结果：让他做了Windows界面，一轮对话，提示词非常简单 效果很惊人






补充html文件：https://wwbhi.lanzoub.com/iVqnb3ssfsng

最新回复 (19)
  • Linus Torvalds 06-24 13:12
    1楼

    很久之前就说gpt-5.6前端能力大大加强，这个东西保真吗

  • ctrlshift 06-24 13:13
    2楼

    当真有5.6了？5.6据说要7月中旬才发布了，你是怎么做到的 佬 以及是怎么知道他是5.6模型的？

  • ctrlshift 06-24 13:13
    3楼

    （帖子已被作者删除）

  • kevin 06-24 13:13
    4楼

    有部分账号的5.5pro已经灰度到5.6pro了

  • Simber 06-24 13:14
    5楼

    有没有可能这个网络上的现成的仓库代码直接就分给你了？

    你以为他是自己推理出来的，其实他是仓库代码的缝合怪。

  • Dracula 06-24 13:14
    6楼

    这个windows项目我在github看到过，训练数据肯定包含了，换一个提示词测试一下

  • Simber 06-24 13:16
    7楼

    提示词就是不许使用 GitHub 上的代码。

  • 你好❤️ 06-24 13:16
    8楼

    经典天气卡片！！！


    以 iOS 18 的设计风格做一个带有动画效果的天气卡片，要求是使用 HTML、CSS 和基础 JavaScript，使用横板天气页面（拥有 4 个天气卡片 (晴天，大风，暴雨，暴雪))。应足够美观，实现一定的交互效果。
  • MitsuhaYuki 06-24 13:18
    9楼

    要是训练数据里面就有的话他应该也分不清哪些是github的那些是自己编的，毕竟在LLM看来都是自己的记忆

  • Dracula 06-24 13:19
    10楼

    不见得，因为github的那个仓库就是用的windows11风格界面，这个提示词只说了windows但gpt为什么不生成win10风格界面

  • SuLe 楼主 06-24 13:29
    11楼

  • ubert 06-24 13:30
    12楼

    有没有5.5模型做Windows的效果的一个对比？

  • Bliod 06-24 13:31
    13楼

    这样判断就有点奇怪了吧，我同样可以问"这个提示词只说了windows但gpt为什么要生成win10风格界面"

  • xsc1 06-24 13:34
    14楼

    这要是5.6出的，那前端感觉还是有提升

  • 万象心生 06-24 13:34
    15楼

    这个天气卡片看着真舒服。

    可以期待5.6了。出来了我估计要把我的套餐升到pro20x ^-^

  • xsc1 06-24 13:35
    16楼

    我看竞猜5.6不是大概率下月底才会出吗

  • 一只橘子🍊 06-24 13:35
    17楼

    牛啊，佬你是自己的号还是收的呀，没被灰测到心痒难耐了，这是多少分钟出来的呢

  • 大亮子 06-24 13:38
    18楼

    我使用5.5生成的效果几乎跟你的一样，发了跟你一模一样的提示词。很快就生成了










    生成的代码如下


    <!DOCTYPE html>
    
<html lang="zh-CN">
    
<head>
    
<meta charset="UTF-8">
    
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    
<title>Windows 11 Web Desktop</title>
    
<style>
    
  :root{
    
    --accent:#2563eb;
    
    --accent-rgb:37,99,235;
    
    --glass:rgba(248,250,252,.76);
    
    --glass-strong:rgba(255,255,255,.92);
    
    --text:#101828;
    
    --muted:#667085;
    
    --border:rgba(255,255,255,.56);
    
    --shadow:0 18px 55px rgba(15,23,42,.26);
    
    --taskbar-h:48px;
    
  }
    
  *{box-sizing:border-box}
    
  html,body{width:100%;height:100%;margin:0;overflow:hidden;font-family:"Segoe UI","Microsoft YaHei UI",system-ui,sans-serif;color:var(--text);user-select:none}
    
  button,input,textarea{font:inherit}
    
  button{color:inherit}
    
  .hidden{display:none!important}
    
  .desktop{
    
    position:relative;width:100%;height:100%;overflow:hidden;
    
    background:
    
      radial-gradient(circle at 73% 28%,rgba(255,255,255,.28),transparent 18%),
    
      linear-gradient(135deg,#0d72d8 0%,#37a3ee 45%,#9b7ff2 100%);
    
  }
    
  .desktop::before,.desktop::after{
    
    content:"";position:absolute;border-radius:48% 52% 56% 44% / 52% 42% 58% 48%;
    
    filter:blur(1px);pointer-events:none;
    
  }
    
  .desktop::before{
    
    width:62vw;height:66vw;right:-15vw;top:-25vw;
    
    background:linear-gradient(145deg,rgba(255,255,255,.52),rgba(255,255,255,.04) 58%);
    
    transform:rotate(18deg);box-shadow:-40px 40px 110px rgba(37,99,235,.2);
    
  }
    
  .desktop::after{
    
    width:45vw;height:45vw;right:8vw;top:8vh;
    
    border:3.5vw solid rgba(255,255,255,.15);transform:rotate(-22deg);
    
    box-shadow:0 0 100px rgba(255,255,255,.16) inset;
    
  }
    
  .desktop[data-wallpaper="sunset"]{
    
    background:radial-gradient(circle at 70% 20%,#ffe3b5 0 8%,transparent 9%),
    
      linear-gradient(160deg,#5d5fef,#ec7fa9 58%,#f7b267);
    
  }
    
  .desktop[data-wallpaper="dark"]{
    
    background:radial-gradient(circle at 70% 35%,#2b4d79,transparent 26%),
    
      linear-gradient(145deg,#08101e,#16233b 48%,#243b55);
    
  }
    
  .desktop[data-wallpaper="green"]{
    
    background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.32),transparent 22%),
    
      linear-gradient(135deg,#166534,#14b8a6 55%,#67e8f9);
    
  }
    

    
  /* SVG */
    
  .svg-icon{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
    
  .svg-icon.fill{fill:currentColor;stroke:none}
    

    
  /* desktop icons */
    
  .desktop-icons{
    
    position:absolute;inset:14px auto calc(var(--taskbar-h) + 14px) 10px;
    
    display:grid;grid-auto-flow:column;grid-template-rows:repeat(auto-fill,86px);
    
    grid-auto-columns:82px;gap:4px;z-index:2;
    
  }
    
  .desktop-icon{
    
    width:82px;height:82px;border:1px solid transparent;border-radius:5px;
    
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    
    color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);font-size:12px;cursor:default;
    
  }
    
  .desktop-icon:hover,.desktop-icon.selected{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.25)}
    
  .desktop-icon .app-art{width:42px;height:42px;filter:drop-shadow(0 4px 5px rgba(0,0,0,.22))}
    
  .desktop-icon span{max-width:74px;text-align:center;line-height:1.25}
    

    
  /* taskbar */
    
  .taskbar{
    
    position:absolute;z-index:1000;left:0;right:0;bottom:0;height:var(--taskbar-h);
    
    display:flex;align-items:center;justify-content:center;
    
    background:rgba(245,248,252,.76);border-top:1px solid rgba(255,255,255,.58);
    
    box-shadow:0 -5px 22px rgba(15,23,42,.12);backdrop-filter:blur(22px) saturate(1.4);
    
  }
    
  .task-items{display:flex;align-items:center;gap:3px;height:100%}
    
  .task-btn{
    
    width:42px;height:40px;border:0;border-radius:7px;background:transparent;
    
    display:grid;place-items:center;position:relative;cursor:pointer;transition:.15s;
    
  }
    
  .task-btn:hover{background:rgba(255,255,255,.7)}
    
  .task-btn:active{transform:scale(.92)}
    
  .task-btn.running::after,.task-btn.active::after{
    
    content:"";position:absolute;bottom:2px;width:6px;height:3px;border-radius:4px;background:#64748b;transition:.18s;
    
  }
    
  .task-btn.active::after{width:17px;background:var(--accent)}
    
  .task-btn .app-art{width:25px;height:25px}
    
  .tray{
    
    position:absolute;right:6px;height:100%;display:flex;align-items:center;gap:4px;
    
  }
    
  .tray-group{
    
    height:40px;padding:0 8px;border-radius:7px;display:flex;align-items:center;gap:7px;
    
    font-size:12px;cursor:pointer;
    
  }
    
  .tray-group:hover{background:rgba(255,255,255,.66)}
    
  .tray-clock{text-align:right;line-height:1.25;min-width:64px}
    
  .show-desktop{position:absolute;right:0;width:5px;height:100%;border-left:1px solid rgba(0,0,0,.08);cursor:pointer}
    

    
  /* panels */
    
  .panel{
    
    position:absolute;z-index:900;bottom:58px;background:var(--glass);
    
    border:1px solid var(--border);box-shadow:var(--shadow);backdrop-filter:blur(30px) saturate(1.35);
    
    animation:panelIn .18s ease-out;border-radius:12px;overflow:hidden;
    
  }
    
  @keyframes panelIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
    
  .start-menu{left:50%;transform:translateX(-50%);width:min(620px,calc(100vw - 24px));height:640px;max-height:calc(100vh - 75px);padding:24px}
    
  .start-search{
    
    height:38px;background:rgba(255,255,255,.8);border:1px solid rgba(148,163,184,.35);
    
    border-bottom:2px solid var(--accent);border-radius:7px;display:flex;align-items:center;padding:0 12px;gap:10px;
    
  }
    
  .start-search input{border:0;outline:0;background:transparent;width:100%;user-select:text}
    
  .section-row{display:flex;align-items:center;justify-content:space-between;margin:24px 26px 12px}
    
  .section-row h3{font-size:14px;margin:0}
    
  .more-btn{border:0;background:rgba(255,255,255,.7);border-radius:5px;padding:5px 9px;font-size:11px;cursor:pointer}
    
  .pinned-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px 6px}
    
  .pinned-app{height:78px;border:0;background:transparent;border-radius:7px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;font-size:11px;cursor:pointer}
    
  .pinned-app:hover{background:rgba(255,255,255,.64)}
    
  .pinned-app .app-art{width:32px;height:32px}
    
  .recommended{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin:0 18px}
    
  .rec-item{display:flex;align-items:center;gap:11px;padding:8px;border-radius:6px;font-size:12px;cursor:pointer}
    
  .rec-item:hover{background:rgba(255,255,255,.64)}
    
  .rec-item .app-art{width:31px;height:31px}
    
  .rec-item small{display:block;color:var(--muted);margin-top:2px}
    
  .start-footer{
    
    position:absolute;left:0;right:0;bottom:0;height:66px;border-top:1px solid rgba(148,163,184,.25);
    
    background:rgba(255,255,255,.42);display:flex;align-items:center;justify-content:space-between;padding:0 48px;
    
  }
    
  .profile{display:flex;align-items:center;gap:10px;font-size:12px}
    
  .avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#f8b4d9,#7c3aed);color:white;font-weight:700}
    
  .power-wrap{position:relative}
    
  .power-btn{width:36px;height:36px;border:0;background:transparent;border-radius:6px;display:grid;place-items:center;cursor:pointer}
    
  .power-btn:hover{background:rgba(255,255,255,.65)}
    
  .power-menu{position:absolute;right:0;bottom:42px;width:150px;background:#fff;border:1px solid #ddd;border-radius:8px;padding:5px;box-shadow:0 12px 30px rgba(0,0,0,.18)}
    
  .power-menu button{width:100%;border:0;background:transparent;padding:9px;border-radius:5px;text-align:left;cursor:pointer}
    
  .power-menu button:hover{background:#f1f5f9}
    

    
  .search-panel{left:50%;transform:translateX(-50%);width:min(720px,calc(100vw - 24px));height:520px;max-height:calc(100vh - 75px);padding:20px}
    
  .big-search{display:flex;align-items:center;background:#fff;border-radius:8px;border-bottom:2px solid var(--accent);padding:0 12px;height:42px;gap:10px}
    
  .big-search input{border:0;outline:0;width:100%;user-select:text}
    
  .search-content{height:calc(100% - 58px);display:grid;grid-template-columns:180px 1fr;gap:14px;margin-top:16px}
    
  .search-side{border-right:1px solid rgba(148,163,184,.28);padding-right:12px}
    
  .search-side button{width:100%;border:0;background:transparent;padding:10px;border-radius:6px;text-align:left;cursor:pointer}
    
  .search-side button:hover{background:rgba(255,255,255,.6)}
    
  .search-results{overflow:auto}
    
  .search-result{display:flex;align-items:center;gap:12px;padding:10px;border-radius:7px;cursor:pointer}
    
  .search-result:hover{background:rgba(255,255,255,.68)}
    
  .search-result .app-art{width:38px;height:38px}
    

    
  .quick-panel{right:12px;width:355px;padding:14px}
    
  .quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
    
  .quick-toggle{height:64px;border:0;border-radius:8px;background:rgba(255,255,255,.75);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0 12px;gap:5px;cursor:pointer}
    
  .quick-toggle.on{background:var(--accent);color:white}
    
  .slider-row{display:flex;align-items:center;gap:10px;margin-top:14px;padding:0 6px}
    
  input[type="range"]{accent-color:var(--accent);width:100%}
    
  .calendar-panel{right:12px;width:330px;padding:20px}
    
  .calendar-head{font-size:12px;color:var(--muted)}
    
  .calendar-time{font-size:38px;font-weight:300;margin:6px 0 16px}
    
  .month-row{display:flex;justify-content:space-between;align-items:center;margin:10px 0}
    
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;font-size:12px}
    
  .cal-grid span{height:34px;display:grid;place-items:center;border-radius:50%}
    
  .cal-grid .muted{color:#94a3b8}.cal-grid .today{background:var(--accent);color:white}
    

    
  /* windows */
    
  .window{
    
    position:absolute;z-index:100;min-width:300px;min-height:220px;width:760px;height:510px;
    
    left:50%;top:48%;transform:translate(-50%,-50%);
    
    background:rgba(250,252,255,.93);border:1px solid rgba(255,255,255,.8);border-radius:10px;
    
    box-shadow:0 18px 65px rgba(15,23,42,.3);overflow:hidden;resize:both;
    
    backdrop-filter:blur(24px);animation:winIn .16s ease-out;
    
  }
    
  @keyframes winIn{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
    
  .window.positioned{transform:none;animation:winInPositioned .16s ease-out}
    
  @keyframes winInPositioned{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
    
  .window.active{box-shadow:0 22px 75px rgba(15,23,42,.4);border-color:rgba(var(--accent-rgb),.36)}
    
  .window.maximized{left:0!important;top:0!important;width:100%!important;height:calc(100% - var(--taskbar-h))!important;border-radius:0;resize:none;transform:none!important}
    
  .window.minimized{display:none}
    
  .titlebar{
    
    height:38px;display:flex;align-items:center;padding-left:12px;background:rgba(248,250,252,.78);
    
    border-bottom:1px solid rgba(148,163,184,.18);cursor:default;
    
  }
    
  .title-left{display:flex;align-items:center;gap:8px;font-size:12px;flex:1;min-width:0}
    
  .title-left .app-art{width:18px;height:18px}
    
  .title-left span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    
  .win-controls{display:flex;height:100%}
    
  .win-controls button{width:46px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer}
    
  .win-controls button:hover{background:rgba(148,163,184,.2)}
    
  .win-controls .close:hover{background:#e81123;color:white}
    
  .window-body{height:calc(100% - 38px);overflow:hidden;background:rgba(255,255,255,.72)}
    

    
  /* shared app layout */
    
  .commandbar{height:45px;display:flex;align-items:center;gap:5px;padding:0 10px;border-bottom:1px solid #e2e8f0;background:rgba(255,255,255,.7)}
    
  .icon-btn{width:32px;height:32px;border:0;border-radius:5px;background:transparent;display:grid;place-items:center;cursor:pointer}
    
  .icon-btn:hover{background:#e9eef5}
    
  .addressbar{height:31px;display:flex;align-items:center;gap:6px;border:1px solid #d8dee9;border-radius:5px;background:#fff;padding:0 9px;font-size:12px;flex:1}
    
  .app-shell{height:100%;display:flex;flex-direction:column}
    
  .content-row{display:flex;flex:1;min-height:0}
    
  .sidebar{width:190px;padding:8px;overflow:auto;border-right:1px solid #e5e7eb;background:rgba(248,250,252,.72)}
    
  .side-item{display:flex;align-items:center;gap:9px;height:34px;padding:0 9px;border-radius:5px;font-size:12px;cursor:pointer}
    
  .side-item:hover,.side-item.active{background:#e8eef8}
    
  .side-item.active{color:var(--accent)}
    
  .main-view{flex:1;overflow:auto;padding:18px}
    
  .group-title{font-size:12px;font-weight:600;margin-bottom:10px}
    
  .folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:8px}
    
  .file-card{height:90px;border:1px solid transparent;border-radius:7px;padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;font-size:12px;cursor:pointer}
    
  .file-card:hover{background:#edf3fb;border-color:#d8e4f3}
    
  .file-card .app-art{width:40px;height:40px}
    
  .statusbar{height:25px;border-top:1px solid #e2e8f0;padding:4px 10px;color:#64748b;font-size:11px;background:#fafafa}
    

    
  /* notepad */
    
  .menu-strip{height:31px;display:flex;align-items:center;border-bottom:1px solid #e5e7eb;background:#fff;padding:0 5px}
    
  .menu-strip button{border:0;background:transparent;border-radius:4px;padding:5px 9px;font-size:12px;cursor:pointer}
    
  .menu-strip button:hover{background:#edf1f5}
    
  .notepad-area{width:100%;height:calc(100% - 56px);border:0;outline:0;resize:none;padding:14px;background:#fff;color:#111;user-select:text;font:15px/1.6 Consolas,"Microsoft YaHei UI",monospace}
    
  .note-status{height:25px;border-top:1px solid #ddd;display:flex;justify-content:flex-end;align-items:center;gap:22px;padding:0 14px;font-size:11px;background:#fafafa}
    

    
  /* calculator */
    
  .calculator{height:100%;max-width:390px;margin:auto;padding:14px;background:#f3f6fa;display:flex;flex-direction:column}
    
  .calc-mode{font-size:18px;font-weight:600;padding:6px}
    
  .calc-display{height:105px;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;padding:8px;overflow:hidden}
    
  .calc-history{font-size:13px;color:#667085;height:22px}
    
  .calc-value{font-size:38px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis}
    
  .calc-grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(6,1fr);gap:3px}
    
  .calc-grid button{border:0;border-radius:6px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08);font-size:16px;cursor:pointer}
    
  .calc-grid button:hover{background:#edf2f7}
    
  .calc-grid .op{background:#f8fafc}.calc-grid .equals{background:var(--accent);color:#fff}
    

    
  /* settings */
    
  .settings-top{height:70px;padding:12px 20px;display:flex;align-items:center;gap:16px;border-bottom:1px solid #e5e7eb}
    
  .settings-search{height:34px;border:1px solid #cbd5e1;border-radius:6px;display:flex;align-items:center;gap:8px;padding:0 10px;max-width:380px;flex:1;background:#fff}
    
  .settings-search input{border:0;outline:0;width:100%;user-select:text}
    
  .settings-side{width:220px;padding:12px;background:#f8fafc;overflow:auto}
    
  .settings-main{flex:1;padding:24px;overflow:auto}
    
  .settings-main h1{font-size:28px;font-weight:500;margin:0 0 24px}
    
  .setting-card{background:#fff;border:1px solid #e2e8f0;border-radius:9px;padding:16px;margin-bottom:10px}
    
  .wallpapers{display:grid;grid-template-columns:repeat(4,minmax(85px,1fr));gap:10px;margin-top:12px}
    
  .wallpaper{aspect-ratio:16/9;border:2px solid transparent;border-radius:7px;cursor:pointer;position:relative}
    
  .wallpaper.selected{border-color:var(--accent)}
    
  .wallpaper[data-w="default"]{background:linear-gradient(135deg,#0d72d8,#9b7ff2)}
    
  .wallpaper[data-w="sunset"]{background:linear-gradient(135deg,#5d5fef,#f7b267)}
    
  .wallpaper[data-w="dark"]{background:linear-gradient(135deg,#08101e,#243b55)}
    
  .wallpaper[data-w="green"]{background:linear-gradient(135deg,#166534,#67e8f9)}
    
  .color-dots{display:flex;gap:10px;margin-top:12px}
    
  .color-dot{width:31px;height:31px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #cbd5e1;cursor:pointer}
    

    
  /* browser */
    
  .browser-tabs{height:35px;background:#e7edf5;display:flex;align-items:flex-end;padding:0 8px}
    
  .browser-tab{width:190px;height:30px;background:#fff;border-radius:7px 7px 0 0;padding:7px 10px;font-size:11px}
    
  .browser-bar{height:44px;background:#fff;display:flex;align-items:center;gap:7px;padding:0 10px;border-bottom:1px solid #e5e7eb}
    
  .browser-url{flex:1;background:#f1f5f9;border:1px solid transparent;border-radius:17px;height:31px;padding:0 14px;outline:0;user-select:text}
    
  .browser-url:focus{background:#fff;border-color:var(--accent)}
    
  .browser-page{height:calc(100% - 79px);overflow:auto;background:#fff}
    
  .edge-home{min-height:100%;padding:55px 7%;background:
    
    linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.92)),
    
    radial-gradient(circle at 80% 20%,#93c5fd,transparent 35%),
    
    linear-gradient(135deg,#ecfeff,#eef2ff)}
    
  .edge-logo{font-size:38px;text-align:center;font-weight:700;color:#0f766e;margin-bottom:28px}
    
  .web-search{max-width:650px;margin:auto;height:48px;border-radius:24px;background:#fff;box-shadow:0 10px 30px rgba(15,23,42,.12);display:flex;align-items:center;padding:0 18px;gap:10px}
    
  .web-search input{width:100%;border:0;outline:0;user-select:text}
    
  .news-grid{max-width:900px;margin:40px auto;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    
  .news-card{background:rgba(255,255,255,.88);border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(15,23,42,.08)}
    
  .news-img{height:100px;background:linear-gradient(135deg,#60a5fa,#c4b5fd)}
    
  .news-card:nth-child(2) .news-img{background:linear-gradient(135deg,#fbbf24,#fb7185)}
    
  .news-card:nth-child(3) .news-img{background:linear-gradient(135deg,#34d399,#22d3ee)}
    
  .news-card p{padding:0 12px 12px;font-size:12px;line-height:1.5}
    

    
  /* terminal */
    
  .terminal{height:100%;background:#0c0c0c;color:#ddd;padding:10px;overflow:auto;user-select:text;font:14px/1.45 Consolas,monospace}
    
  .term-line{white-space:pre-wrap}
    
  .term-input-row{display:flex}
    
  .term-prompt{white-space:pre}
    
  .term-input{flex:1;background:transparent;border:0;outline:0;color:#fff;font:inherit;user-select:text}
    

    
  /* context menu and toast */
    
  .context-menu{position:absolute;z-index:2000;width:220px;background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.7);border-radius:8px;padding:5px;box-shadow:0 15px 45px rgba(0,0,0,.22);backdrop-filter:blur(20px)}
    
  .context-menu button{width:100%;border:0;background:transparent;border-radius:5px;padding:8px 10px;text-align:left;display:flex;align-items:center;gap:10px;font-size:12px;cursor:pointer}
    
  .context-menu button:hover{background:#e7eef8}
    
  .context-sep{height:1px;background:#e2e8f0;margin:4px}
    
  .toast-area{position:absolute;right:14px;bottom:62px;z-index:3000;display:flex;flex-direction:column;gap:8px}
    
  .toast{width:320px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.8);box-shadow:0 12px 35px rgba(15,23,42,.24);border-radius:10px;padding:14px;backdrop-filter:blur(18px);animation:toastIn .25s ease-out}
    
  @keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
    
  .toast b{font-size:13px}.toast p{font-size:12px;color:#475569;margin:5px 0 0}
    

    
  /* lock / boot */
    
  .boot-screen,.lock-screen{
    
    position:absolute;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;
    
    background:#05070a;transition:opacity .45s;
    
  }
    
  .boot-logo{width:82px;height:82px;color:white}
    
  .spinner{width:24px;height:24px;margin-top:34px;border:2px solid rgba(255,255,255,.24);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}
    
  @keyframes spin{to{transform:rotate(360deg)}}
    
  .lock-screen{
    
    background:linear-gradient(rgba(0,0,0,.12),rgba(0,0,0,.28)),linear-gradient(135deg,#1d4ed8,#7c3aed 54%,#ec4899);
    
    justify-content:flex-start;padding-top:13vh;cursor:pointer;
    
  }
    
  .lock-time{font-size:82px;font-weight:300;line-height:1}
    
  .lock-date{font-size:20px;margin-top:12px}
    
  .lock-hint{position:absolute;bottom:55px;font-size:13px;opacity:.82}
    
  .shutdown{position:absolute;inset:0;z-index:10000;background:#000;color:#fff;display:grid;place-items:center;font-size:24px}
    

    
  /* task manager */
    
  .tm-table{width:100%;border-collapse:collapse;font-size:12px}
    
  .tm-table th,.tm-table td{text-align:left;border-bottom:1px solid #e5e7eb;padding:9px}
    
  .tm-table th{position:sticky;top:0;background:#f8fafc}
    
  .usage-bar{height:5px;background:#dbeafe;border-radius:5px;overflow:hidden;width:90px}
    
  .usage-bar i{height:100%;display:block;background:var(--accent)}
    

    
  @media(max-width:700px){
    
    .desktop-icons{grid-template-rows:repeat(auto-fill,80px)}
    
    .window{min-width:260px;width:94vw;height:72vh}
    
    .pinned-grid{grid-template-columns:repeat(4,1fr)}
    
    .start-menu{padding:18px;height:calc(100vh - 75px)}
    
    .recommended{display:none}.start-footer{padding:0 22px}
    
    .settings-side,.sidebar{width:150px}
    
    .news-grid{grid-template-columns:1fr}
    
    .tray .tray-icons{display:none}
    
  }
    
</style>
    
</head>
    
<body>
    
<!-- Inline SVG sprite -->
    
<svg width="0" height="0" style="position:absolute">
    
  <symbol id="i-start" viewBox="0 0 24 24"><path fill="currentColor" d="M2 3.5 10.5 2v9H2V3.5Zm9.5-1.7L22 0v11h-10.5V1.8ZM2 12h8.5v9L2 19.5V12Zm9.5 0H22v11l-10.5-1.8V12Z"/></symbol>
    
  <symbol id="i-search" viewBox="0 0 24 24"><circle cx="10.8" cy="10.8" r="6.8"/><path d="m16 16 5 5"/></symbol>
    
  <symbol id="i-folder" viewBox="0 0 24 24"><path fill="#f6c445" stroke="#d9a517" d="M2.5 6.2h7l1.8 2H22v10.5a2 2 0 0 1-2 2H4.5a2 2 0 0 1-2-2V6.2Z"/><path fill="#ffe17a" stroke="#d9a517" d="M2.5 8.4H22l-2.5 10H4.5l-2-10Z"/></symbol>
    
  <symbol id="i-edge" viewBox="0 0 24 24"><path fill="#0ea5e9" d="M21.7 13.7A9.7 9.7 0 0 1 5 18.7c1.5.5 3 .5 4.3 0 2.2-.7 3.6-2.4 3.5-4.1-.2-2.2-2.7-3.3-5-2.8-2.2.4-4 2-4.8 4.1A9.8 9.8 0 0 1 19.3 5c-3.8-.7-7.6.9-9.2 4.3 4.4-2.6 10.7-.6 11.6 4.4Z"/><path fill="#14b8a6" d="M3 15.9c1.9-1.1 4.8-.9 6.6.6 2 1.7 5.7 2.1 8.7.1a9.7 9.7 0 0 1-13.3 2.1A9.5 9.5 0 0 1 3 15.9Z"/></symbol>
    
  <symbol id="i-note" viewBox="0 0 24 24"><rect x="4" y="2.5" width="16" height="19" rx="2" fill="#e8f3ff" stroke="#3b82f6"/><path d="M8 7h8M8 11h8M8 15h6" stroke="#3b82f6"/></symbol>
    
  <symbol id="i-calc" viewBox="0 0 24 24"><rect x="4" y="2.5" width="16" height="19" rx="2.5" fill="#dbeafe" stroke="#2563eb"/><rect x="7" y="5.5" width="10" height="3.5" rx="1" fill="#fff" stroke="#2563eb"/><path d="M8 12h.01M12 12h.01M16 12h.01M8 16h.01M12 16h.01M16 16h.01" stroke="#2563eb" stroke-width="2.4"/></symbol>
    
  <symbol id="i-settings" viewBox="0 0 24 24"><path fill="#94a3b8" stroke="#64748b" d="m9.8 2 4.4.1.7 2.4 2 .9 2.2-1.2 3 3.2-1.4 2.1.7 2.1 2.4.9-.1 4.4-2.4.7-.9 2 1.2 2.2-3.2 3-2.1-1.4-2.1.7-.9 2.4-4.4-.1-.7-2.4-2-.9-2.2 1.2-3-3.2 1.4-2.1-.7-2.1-2.4-.9.1-4.4 2.4-.7.9-2-1.2-2.2 3.2-3 2.1 1.4 2.1-.7.9-2.4Z"/><circle cx="12" cy="12" r="3.2" fill="#fff"/></symbol>
    
  <symbol id="i-terminal" viewBox="0 0 24 24"><rect x="2.5" y="3.5" width="19" height="17" rx="2" fill="#1f2937" stroke="#111827"/><path d="m6 8 3 3-3 3M11 15h6" stroke="#f8fafc"/></symbol>
    
  <symbol id="i-store" viewBox="0 0 24 24"><path fill="#f8fafc" stroke="#2563eb" d="M4 7h16l-1 14H5L4 7Z"/><path d="M8 9V6a4 4 0 0 1 8 0v3" stroke="#2563eb"/><path fill="#2563eb" d="M9.2 12H12v2.8H9.2zM12.8 12h2.8v2.8h-2.8zM9.2 15.6H12v2.8H9.2zM12.8 15.6h2.8v2.8h-2.8z"/></symbol>
    
  <symbol id="i-pc" viewBox="0 0 24 24"><rect x="2.5" y="3" width="19" height="14" rx="2" fill="#cfe8ff" stroke="#2563eb"/><path d="M8 21h8M12 17v4" stroke="#2563eb"/><path fill="#60a5fa" d="M4.5 5h15v10h-15z"/></symbol>
    
  <symbol id="i-bin" viewBox="0 0 24 24"><path fill="#e0f2fe" stroke="#0ea5e9" d="M6 7h12l-1 14H7L6 7Z"/><path d="M4 7h16M9 4h6l1 3H8l1-3ZM10 10v7M14 10v7" stroke="#0ea5e9"/></symbol>
    
  <symbol id="i-doc" viewBox="0 0 24 24"><path fill="#fff" stroke="#3b82f6" d="M5 2.5h9l5 5V21H5V2.5Z"/><path d="M14 2.5v5h5M8 12h8M8 16h8" stroke="#3b82f6"/></symbol>
    
  <symbol id="i-image" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" fill="#ecfeff" stroke="#0ea5e9"/><circle cx="8.5" cy="8.5" r="2" fill="#fbbf24"/><path d="m5 18 5-5 3 3 2-2 4 4" stroke="#16a34a"/></symbol>
    
  <symbol id="i-wifi" viewBox="0 0 24 24"><path d="M3 9a14 14 0 0 1 18 0M6 13a9 9 0 0 1 12 0M9.5 16.5a4 4 0 0 1 5 0M12 20h.01" stroke="currentColor" stroke-width="2"/></symbol>
    
  <symbol id="i-volume" viewBox="0 0 24 24"><path d="M4 10v4h4l5 4V6l-5 4H4Z"/><path d="M16 9a4 4 0 0 1 0 6M18.5 6.5a8 8 0 0 1 0 11" /></symbol>
    
  <symbol id="i-battery" viewBox="0 0 24 24"><rect x="3" y="7" width="17" height="10" rx="2"/><path d="M21 10v4M6 10h9v4H6z" fill="currentColor"/></symbol>
    
  <symbol id="i-power" viewBox="0 0 24 24"><path d="M12 2v9M6.3 5.3a9 9 0 1 0 11.4 0"/></symbol>
    
  <symbol id="i-chevron" viewBox="0 0 24 24"><path d="m8 10 4 4 4-4"/></symbol>
    
  <symbol id="i-back" viewBox="0 0 24 24"><path d="m15 5-7 7 7 7"/></symbol>
    
  <symbol id="i-forward" viewBox="0 0 24 24"><path d="m9 5 7 7-7 7"/></symbol>
    
  <symbol id="i-up" viewBox="0 0 24 24"><path d="m5 15 7-7 7 7"/></symbol>
    
  <symbol id="i-refresh" viewBox="0 0 24 24"><path d="M20 6v5h-5M4 18v-5h5"/><path d="M18.5 9A7 7 0 0 0 6 6.5L4 9M5.5 15A7 7 0 0 0 18 17.5l2-2.5"/></symbol>
    
  <symbol id="i-min" viewBox="0 0 24 24"><path d="M6 16h12"/></symbol>
    
  <symbol id="i-max" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12"/></symbol>
    
  <symbol id="i-close" viewBox="0 0 24 24"><path d="m7 7 10 10M17 7 7 17"/></symbol>
    
  <symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
    
  <symbol id="i-copy" viewBox="0 0 24 24"><rect x="8" y="8" width="11" height="11" rx="2"/><path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"/></symbol>
    
  <symbol id="i-delete" viewBox="0 0 24 24"><path d="M4 7h16M9 7V4h6v3M7 7l1 14h8l1-14M10 11v6M14 11v6"/></symbol>
    
  <symbol id="i-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5 19 19M19 5l-1.5 1.5M6.5 17.5 5 19"/></symbol>
    
  <symbol id="i-bt" viewBox="0 0 24 24"><path d="m7 7 10 10-5 4V3l5 4L7 17"/></symbol>
    
  <symbol id="i-plane" viewBox="0 0 24 24"><path d="m3 11 18-7-7 17-3-7-8-3Z"/><path d="m11 14 10-10"/></symbol>
    
  <symbol id="i-night" viewBox="0 0 24 24"><path d="M20 15.5A8 8 0 0 1 8.5 4 8.5 8.5 0 1 0 20 15.5Z"/></symbol>
    
  <symbol id="i-lock" viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></symbol>
    
</svg>
    

    
<div class="desktop" id="desktop" data-wallpaper="default">
    
  <div class="desktop-icons" id="desktopIcons">
    
    <div class="desktop-icon" data-app="explorer" data-path="此电脑">
    
      <svg class="app-art"><use href="#i-pc"/></svg><span>此电脑</span>
    
    </div>
    
    <div class="desktop-icon" data-app="explorer" data-path="回收站">
    
      <svg class="app-art"><use href="#i-bin"/></svg><span>回收站</span>
    
    </div>
    
    <div class="desktop-icon" data-app="explorer" data-path="文档">
    
      <svg class="app-art"><use href="#i-doc"/></svg><span>文档</span>
    
    </div>
    
    <div class="desktop-icon" data-app="edge">
    
      <svg class="app-art"><use href="#i-edge"/></svg><span>Microsoft Edge</span>
    
    </div>
    
  </div>
    

    
  <div id="windowsLayer"></div>
    

    
  <div class="panel start-menu hidden" id="startMenu">
    
    <div class="start-search">
    
      <svg class="svg-icon"><use href="#i-search"/></svg>
    
      <input id="startSearch" placeholder="搜索应用、设置和文档">
    
    </div>
    
    <div class="section-row"><h3>已固定</h3><button class="more-btn">所有应用 ›</button></div>
    
    <div class="pinned-grid" id="pinnedGrid"></div>
    
    <div class="section-row"><h3>推荐的项目</h3><button class="more-btn">更多 ›</button></div>
    
    <div class="recommended">
    
      <div class="rec-item" data-app="notepad"><svg class="app-art"><use href="#i-doc"/></svg><div>欢迎使用 Windows<small>刚刚</small></div></div>
    
      <div class="rec-item" data-app="explorer" data-path="下载"><svg class="app-art"><use href="#i-folder"/></svg><div>下载<small>最近使用</small></div></div>
    
      <div class="rec-item" data-app="settings"><svg class="app-art"><use href="#i-settings"/></svg><div>个性化设置<small>昨天</small></div></div>
    
      <div class="rec-item" data-app="terminal"><svg class="app-art"><use href="#i-terminal"/></svg><div>Windows Terminal<small>最近添加</small></div></div>
    
    </div>
    
    <div class="start-footer">
    
      <div class="profile"><div class="avatar">C</div><span>Cahya</span></div>
    
      <div class="power-wrap">
    
        <button class="power-btn" id="powerBtn"><svg class="svg-icon"><use href="#i-power"/></svg></button>
    
        <div class="power-menu hidden" id="powerMenu">
    
          <button data-power="lock">🔒 锁定</button>
    
          <button data-power="restart">↻ 重新启动</button>
    
          <button data-power="shutdown">⏻ 关机</button>
    
        </div>
    
      </div>
    
    </div>
    
  </div>
    

    
  <div class="panel search-panel hidden" id="searchPanel">
    
    <div class="big-search"><svg class="svg-icon"><use href="#i-search"/></svg><input id="globalSearch" placeholder="在此键入以搜索"></div>
    
    <div class="search-content">
    
      <div class="search-side">
    
        <button>全部</button><button>应用</button><button>文档</button><button>设置</button><button>Web</button>
    
      </div>
    
      <div class="search-results" id="searchResults"></div>
    
    </div>
    
  </div>
    

    
  <div class="panel quick-panel hidden" id="quickPanel">
    
    <div class="quick-grid">
    
      <button class="quick-toggle on"><svg class="svg-icon"><use href="#i-wifi"/></svg><span>Wi‑Fi</span></button>
    
      <button class="quick-toggle on"><svg class="svg-icon"><use href="#i-bt"/></svg><span>蓝牙</span></button>
    
      <button class="quick-toggle"><svg class="svg-icon"><use href="#i-plane"/></svg><span>飞行模式</span></button>
    
      <button class="quick-toggle"><svg class="svg-icon"><use href="#i-night"/></svg><span>夜间模式</span></button>
    
      <button class="quick-toggle"><svg class="svg-icon"><use href="#i-battery"/></svg><span>节电模式</span></button>
    
      <button class="quick-toggle on"><svg class="svg-icon"><use href="#i-volume"/></svg><span>声音</span></button>
    
    </div>
    
    <div class="slider-row"><svg class="svg-icon"><use href="#i-sun"/></svg><input id="brightness" type="range" min="40" max="120" value="100"></div>
    
    <div class="slider-row"><svg class="svg-icon"><use href="#i-volume"/></svg><input type="range" min="0" max="100" value="62"></div>
    
  </div>
    

    
  <div class="panel calendar-panel hidden" id="calendarPanel">
    
    <div class="calendar-head" id="fullDate"></div>
    
    <div class="calendar-time" id="largeTime"></div>
    
    <div class="month-row"><b id="monthLabel"></b><span>⌃ ⌄</span></div>
    
    <div class="cal-grid" id="calGrid"></div>
    
  </div>
    

    
  <div class="context-menu hidden" id="contextMenu">
    
    <button data-action="view">▦ 查看</button>
    
    <button data-action="sort">↕ 排序方式</button>
    
    <button data-action="refresh"><svg class="svg-icon" style="width:16px"><use href="#i-refresh"/></svg>刷新</button>
    
    <div class="context-sep"></div>
    
    <button data-action="new">＋ 新建文件夹</button>
    
    <button data-action="settings"><svg class="svg-icon" style="width:16px"><use href="#i-settings"/></svg>显示设置</button>
    
    <button data-action="personalize">✎ 个性化</button>
    
  </div>
    

    
  <div class="toast-area" id="toastArea"></div>
    

    
  <div class="taskbar">
    
    <div class="task-items" id="taskItems">
    
      <button class="task-btn" id="startBtn" title="开始"><svg class="app-art" style="color:#2563eb"><use href="#i-start"/></svg></button>
    
      <button class="task-btn" id="searchBtn" title="搜索"><svg class="svg-icon"><use href="#i-search"/></svg></button>
    
      <button class="task-btn app-launch" data-app="explorer" title="文件资源管理器"><svg class="app-art"><use href="#i-folder"/></svg></button>
    
      <button class="task-btn app-launch" data-app="edge" title="Microsoft Edge"><svg class="app-art"><use href="#i-edge"/></svg></button>
    
      <button class="task-btn app-launch" data-app="store" title="Microsoft Store"><svg class="app-art"><use href="#i-store"/></svg></button>
    
    </div>
    
    <div class="tray">
    
      <div class="tray-group tray-icons" id="quickBtn">
    
        <svg class="svg-icon" style="width:16px"><use href="#i-wifi"/></svg>
    
        <svg class="svg-icon" style="width:16px"><use href="#i-volume"/></svg>
    
        <svg class="svg-icon" style="width:17px"><use href="#i-battery"/></svg>
    
      </div>
    
      <div class="tray-group tray-clock" id="clockBtn"><div><div id="clockTime"></div><div id="clockDate"></div></div></div>
    
    </div>
    
    <div class="show-desktop" id="showDesktop"></div>
    
  </div>
    

    
  <div class="boot-screen" id="bootScreen">
    
    <svg class="boot-logo"><use href="#i-start"/></svg><div class="spinner"></div>
    
  </div>
    
  <div class="lock-screen hidden" id="lockScreen">
    
    <div class="lock-time" id="lockTime"></div><div class="lock-date" id="lockDate"></div>
    
    <div class="lock-hint">单击任意位置解锁</div>
    
  </div>
    
  <div class="shutdown hidden" id="shutdownScreen">Windows 已关机<br><small style="font-size:13px;opacity:.6">单击屏幕重新启动</small></div>
    
</div>
    

    
<script>
    
(() => {
    
  const $ = s => document.querySelector(s);
    
  const $$ = s => [...document.querySelectorAll(s)];
    
  const desktop = $('#desktop');
    
  const windowsLayer = $('#windowsLayer');
    
  const startMenu = $('#startMenu');
    
  const searchPanel = $('#searchPanel');
    
  const quickPanel = $('#quickPanel');
    
  const calendarPanel = $('#calendarPanel');
    
  const contextMenu = $('#contextMenu');
    
  let zIndex = 120, activeWindow = null, windowCount = 0;
    
  const openWindows = new Map();
    

    
  const appMeta = {
    
    explorer:{name:'文件资源管理器', icon:'i-folder'},
    
    notepad:{name:'记事本', icon:'i-note'},
    
    calc:{name:'计算器', icon:'i-calc'},
    
    settings:{name:'设置', icon:'i-settings'},
    
    edge:{name:'Microsoft Edge', icon:'i-edge'},
    
    terminal:{name:'终端', icon:'i-terminal'},
    
    store:{name:'Microsoft Store', icon:'i-store'},
    
    taskmgr:{name:'任务管理器', icon:'i-pc'}
    
  };
    

    
  const icon = (id, cls='svg-icon') => `<svg class="${cls}"><use href="#${id}"/></svg>`;
    

    
  function hidePanels(except=null){
    
    [startMenu,searchPanel,quickPanel,calendarPanel,contextMenu].forEach(p=>{
    
      if(p!==except) p.classList.add('hidden');
    
    });
    
    $('#powerMenu').classList.add('hidden');
    
  }
    

    
  function toast(title, text){
    
    const t=document.createElement('div');
    
    t.className='toast';
    
    t.innerHTML=`<b>${title}</b><p>${text}</p>`;
    
    $('#toastArea').appendChild(t);
    
    setTimeout(()=>{t.style.opacity='0';t.style.transform='translateX(15px)';setTimeout(()=>t.remove(),220)},2800);
    
  }
    

    
  function setActive(win){
    
    $$('.window').forEach(w=>w.classList.remove('active'));
    
    $$('.task-btn[data-window]').forEach(b=>b.classList.remove('active'));
    
    if(win){
    
      win.classList.add('active'); win.style.zIndex=++zIndex; activeWindow=win;
    
      const btn=$(`.task-btn[data-window="${win.dataset.winid}"]`); if(btn) btn.classList.add('active');
    
    }else activeWindow=null;
    
  }
    

    
  function addTaskButton(win, app){
    
    const meta=appMeta[app];
    
    const btn=document.createElement('button');
    
    btn.className='task-btn running active';
    
    btn.dataset.window=win.dataset.winid;
    
    btn.title=meta.name;
    
    btn.innerHTML=icon(meta.icon,'app-art');
    
    btn.onclick=()=>{
    
      if(win.classList.contains('minimized')){win.classList.remove('minimized');setActive(win)}
    
      else if(win===activeWindow){win.classList.add('minimized');btn.classList.remove('active');activeWindow=null}
    
      else setActive(win);
    
    };
    
    $('#taskItems').appendChild(btn);
    
  }
    

    
  function makeDraggable(win){
    
    const bar=win.querySelector('.titlebar');
    
    let drag=false, ox=0, oy=0;
    
    bar.addEventListener('pointerdown',e=>{
    
      if(e.target.closest('button')||win.classList.contains('maximized')) return;
    
      drag=true; setActive(win);
    
      const r=win.getBoundingClientRect(); ox=e.clientX-r.left; oy=e.clientY-r.top;
    
      win.setPointerCapture(e.pointerId);
    
    });
    
    bar.addEventListener('pointermove',e=>{
    
      if(!drag)return;
    
      const maxX=innerWidth-win.offsetWidth, maxY=innerHeight-48-win.offsetHeight;
    
      win.classList.add('positioned');
    
      win.style.left=Math.max(0,Math.min(e.clientX-ox,maxX))+'px';
    
      win.style.top=Math.max(0,Math.min(e.clientY-oy,Math.max(0,maxY)))+'px';
    
      win.style.transform='none';
    
    });
    
    bar.addEventListener('pointerup',e=>{
    
      drag=false;
    
      try{win.releasePointerCapture(e.pointerId)}catch{}
    
      if(e.clientY<5) toggleMax(win);
    
    });
    
    bar.addEventListener('dblclick',()=>toggleMax(win));
    
  }
    

    
  function toggleMax(win){
    
    win.classList.toggle('maximized');
    
    if(!win.classList.contains('maximized')) win.classList.add('positioned');
    
  }
    

    
  function closeWindow(win){
    
    const app=win.dataset.app, id=win.dataset.winid;
    
    const btn=$(`.task-btn[data-window="${id}"]`);
    
    if(btn) btn.remove();
    
    openWindows.delete(app);
    
    win.remove();
    
    const remaining=$$('.window:not(.minimized)');
    
    setActive(remaining.at(-1)||null);
    
  }
    

    
  function createWindow(app, title, body, opts={}){
    
    if(openWindows.has(app) && !opts.multi){
    
      const existing=openWindows.get(app);
    
      existing.classList.remove('minimized');setActive(existing);return existing;
    
    }
    
    const meta=appMeta[app];
    
    const win=document.createElement('div');
    
    const id='w'+(++windowCount);
    
    win.className='window';
    
    win.dataset.app=app;win.dataset.winid=id;
    
    if(opts.width)win.style.width=opts.width;
    
    if(opts.height)win.style.height=opts.height;
    
    if(opts.x!=null){win.style.left=opts.x+'px';win.style.top=(opts.y||60)+'px';win.style.transform='none';win.classList.add('positioned')}
    
    win.innerHTML=`
    
      <div class="titlebar">
    
        <div class="title-left">${icon(meta.icon,'app-art')}<span>${title||meta.name}</span></div>
    
        <div class="win-controls">
    
          <button class="min">${icon('i-min')}</button>
    
          <button class="max">${icon('i-max')}</button>
    
          <button class="close">${icon('i-close')}</button>
    
        </div>
    
      </div>
    
      <div class="window-body">${body}</div>`;
    
    windowsLayer.appendChild(win);
    
    if(!opts.multi)openWindows.set(app,win);
    
    addTaskButton(win,app);makeDraggable(win);setActive(win);
    
    win.addEventListener('pointerdown',()=>setActive(win));
    
    win.querySelector('.min').onclick=()=>{win.classList.add('minimized');$(`.task-btn[data-window="${id}"]`).classList.remove('active');activeWindow=null};
    
    win.querySelector('.max').onclick=()=>toggleMax(win);
    
    win.querySelector('.close').onclick=()=>closeWindow(win);
    
    return win;
    
  }
    

    
  function explorerBody(path='主页'){
    
    const common=[
    
      ['桌面','i-folder'],['文档','i-doc'],['下载','i-folder'],['图片','i-image'],['音乐','i-folder'],['视频','i-folder']
    
    ];
    
    const files = path==='回收站'
    
      ? [['回收站为空','i-bin']]
    
      : path==='文档'
    
      ? [['欢迎使用 Windows.txt','i-note'],['项目计划.docx','i-doc'],['预算.xlsx','i-doc']]
    
      : path==='下载'
    
      ? [['Windows_操作指南.pdf','i-doc'],['示例图片.png','i-image'],['安装程序.exe','i-settings']]
    
      : common;
    
    return `
    
    <div class="app-shell explorer-app" data-path="${path}">
    
      <div class="commandbar">
    
        <button class="icon-btn">${icon('i-plus')}</button><button class="icon-btn">${icon('i-copy')}</button>
    
        <button class="icon-btn">${icon('i-delete')}</button><span style="width:1px;height:22px;background:#ddd;margin:0 5px"></span>
    
        <button class="icon-btn nav-back">${icon('i-back')}</button><button class="icon-btn">${icon('i-forward')}</button><button class="icon-btn">${icon('i-up')}</button>
    
        <div class="addressbar">${icon('i-folder')}<span>此电脑 › ${path}</span></div>
    
        <button class="icon-btn">${icon('i-refresh')}</button>
    
      </div>
    
      <div class="content-row">
    
        <aside class="sidebar">
    
          ${['主页','桌面','下载','文档','图片','此电脑','网络','回收站'].map((x,i)=>`<div class="side-item ${x===path?'active':''}" data-path="${x}">${icon(i<5?'i-folder':i===5?'i-pc':i===7?'i-bin':'i-wifi')}<span>${x}</span></div>`).join('')}
    
        </aside>
    
        <main class="main-view">
    
          <div class="group-title">${path==='主页'?'快速访问':path}</div>
    
          <div class="folder-grid">
    
            ${files.map(([n,i])=>`<div class="file-card" data-file="${n}">${icon(i,'app-art')}<span>${n}</span></div>`).join('')}
    
          </div>
    
        </main>
    
      </div>
    
      <div class="statusbar">${files.length} 个项目</div>
    
    </div>`;
    
  }
    

    
  function bindExplorer(win){
    
    const shell=win.querySelector('.explorer-app');
    
    const navigate=path=>{
    
      win.querySelector('.window-body').innerHTML=explorerBody(path);
    
      win.querySelector('.title-left span').textContent=path+' - 文件资源管理器';
    
      bindExplorer(win);
    
    };
    
    win.querySelectorAll('.side-item').forEach(x=>x.onclick=()=>navigate(x.dataset.path));
    
    win.querySelectorAll('.file-card').forEach(x=>x.ondblclick=()=>{
    
      const name=x.dataset.file;
    
      if(name.endsWith('.txt'))openApp('notepad');
    
      else if(name.endsWith('.png'))toast('照片','这是一个演示图片文件。');
    
      else if(!name.includes('.'))navigate(name);
    
      else toast('打开文件',`已模拟打开：${name}`);
    
    });
    
  }
    

    
  function notepadBody(){
    
    const saved=localStorage.getItem('win-note')||`欢迎使用网页版 Windows 11 桌面！
    

    
这是一个完全由 HTML、CSS、JavaScript 和内联 SVG 制作的单文件操作页面。
    

    
你可以：
    
• 拖动、缩放、最小化和最大化窗口
    
• 打开开始菜单和搜索
    
• 使用计算器、终端、浏览器和设置
    
• 修改壁纸与主题色
    
• 在桌面右键打开菜单
    

    
在这里输入的内容可以通过“文件 → 保存”存入浏览器。`;
    
    return `<div class="app-shell">
    
      <div class="menu-strip"><button data-note="new">文件</button><button data-note="edit">编辑</button><button data-note="view">查看</button><button data-note="save">保存</button></div>
    
      <textarea class="notepad-area" spellcheck="false">${saved}</textarea>
    
      <div class="note-status"><span class="note-pos">行 1，列 1</span><span>100%</span><span>Windows (CRLF)</span><span>UTF-8</span></div>
    
    </div>`;
    
  }
    

    
  function bindNotepad(win){
    
    const ta=win.querySelector('textarea'),pos=win.querySelector('.note-pos');
    
    const update=()=>{
    
      const pre=ta.value.slice(0,ta.selectionStart).split('\n');
    
      pos.textContent=`行 ${pre.length}，列 ${pre.at(-1).length+1}`;
    
    };
    
    ta.addEventListener('keyup',update);ta.addEventListener('click',update);
    
    win.querySelector('[data-note="save"]').onclick=()=>{localStorage.setItem('win-note',ta.value);toast('记事本','内容已保存到浏览器本地存储。')};
    
    win.querySelector('[data-note="new"]').onclick=()=>{if(confirm('新建空白文档？'))ta.value=''};
    
    win.querySelector('[data-note="edit"]').onclick=()=>toast('编辑','支持常用键盘快捷键：Ctrl+C、Ctrl+V、Ctrl+Z。');
    
    win.querySelector('[data-note="view"]').onclick=()=>toast('查看','当前缩放比例：100%');
    
  }
    

    
  function calcBody(){
    
    const keys=['%','CE','C','⌫','1/x','x²','√x','÷','7','8','9','×','4','5','6','−','1','2','3','+','±','0','.','='];
    
    return `<div class="calculator">
    
      <div class="calc-mode">标准</div>
    
      <div class="calc-display"><div class="calc-history"></div><div class="calc-value">0</div></div>
    
      <div class="calc-grid">${keys.map(k=>`<button class="${k==='='?'equals':isNaN(k)&&k!=='.'?'op':''}" data-key="${k}">${k}</button>`).join('')}</div>
    
    </div>`;
    
  }
    
  function bindCalc(win){
    
    let value='0',stored=null,op=null,reset=false;
    
    const disp=win.querySelector('.calc-value'),hist=win.querySelector('.calc-history');
    
    const show=()=>disp.textContent=value.length>15?Number(value).toExponential(8):value;
    
    const compute=()=>{
    
      if(stored===null||op===null)return;
    
      let a=Number(stored),b=Number(value),r=b;
    
      if(op==='+')r=a+b;if(op==='−')r=a-b;if(op==='×')r=a*b;if(op==='÷')r=b===0?'错误':a/b;
    
      value=String(r);stored=null;op=null;reset=true;show();
    
    };
    
    win.querySelectorAll('[data-key]').forEach(btn=>btn.onclick=()=>{
    
      const k=btn.dataset.key;
    
      if(!isNaN(k)||k==='.'){
    
        if(reset){value='0';reset=false}
    
        if(k==='.'&&value.includes('.'))return;
    
        value=value==='0'&&k!=='.'?k:value+k;show();return;
    
      }
    
      if(['+','−','×','÷'].includes(k)){if(op)compute();stored=value;op=k;hist.textContent=`${value} ${k}`;reset=true;return}
    
      if(k==='='){compute();hist.textContent=''}
    
      if(k==='C'){value='0';stored=null;op=null;hist.textContent='';show()}
    
      if(k==='CE'){value='0';show()}
    
      if(k==='⌫'){value=value.length>1?value.slice(0,-1):'0';show()}
    
      if(k==='±'){value=String(-Number(value));show()}
    
      if(k==='%'){value=String(Number(value)/100);show()}
    
      if(k==='1/x'){value=String(1/Number(value));show()}
    
      if(k==='x²'){value=String(Number(value)**2);show()}
    
      if(k==='√x'){value=String(Math.sqrt(Number(value)));show()}
    
    });
    
  }
    

    
  function settingsBody(){
    
    return `<div class="app-shell">
    
      <div class="settings-top"><div class="avatar">C</div><div><b>Cahya</b><small style="display:block;color:#64748b">本地帐户</small></div><div class="settings-search">${icon('i-search')}<input placeholder="查找设置"></div></div>
    
      <div class="content-row">
    
        <aside class="settings-side">
    
          ${[['系统','i-pc'],['蓝牙和设备','i-bt'],['网络和 Internet','i-wifi'],['个性化','i-settings'],['应用','i-store'],['帐户','i-lock'],['时间和语言','i-calc'],['Windows 更新','i-refresh']].map((x,i)=>`<div class="side-item ${i===3?'active':''}">${icon(x[1])}<span>${x[0]}</span></div>`).join('')}
    
        </aside>
    
        <main class="settings-main">
    
          <h1>个性化</h1>
    
          <div class="setting-card"><b>背景</b><div style="font-size:12px;color:#64748b;margin-top:4px">选择桌面壁纸</div>
    
            <div class="wallpapers">${['default','sunset','dark','green'].map(w=>`<div class="wallpaper ${desktop.dataset.wallpaper===w?'selected':''}" data-w="${w}"></div>`).join('')}</div>
    
          </div>
    
          <div class="setting-card"><b>颜色</b><div style="font-size:12px;color:#64748b;margin-top:4px">选择 Windows 强调色</div>
    
            <div class="color-dots">
    
              <div class="color-dot" data-color="#2563eb" data-rgb="37,99,235" style="background:#2563eb"></div>
    
              <div class="color-dot" data-color="#7c3aed" data-rgb="124,58,237" style="background:#7c3aed"></div>
    
              <div class="color-dot" data-color="#db2777" data-rgb="219,39,119" style="background:#db2777"></div>
    
              <div class="color-dot" data-color="#059669" data-rgb="5,150,105" style="background:#059669"></div>
    
              <div class="color-dot" data-color="#ea580c" data-rgb="234,88,12" style="background:#ea580c"></div>
    
            </div>
    
          </div>
    
          <div class="setting-card"><b>主题</b><p style="font-size:12px;color:#64748b">当前主题：Windows（浅色）</p></div>
    
        </main>
    
      </div>
    
    </div>`;
    
  }
    
  function bindSettings(win){
    
    win.querySelectorAll('.wallpaper').forEach(w=>w.onclick=()=>{
    
      desktop.dataset.wallpaper=w.dataset.w;
    
      localStorage.setItem('wallpaper',w.dataset.w);
    
      win.querySelectorAll('.wallpaper').forEach(x=>x.classList.toggle('selected',x===w));
    
    });
    
    win.querySelectorAll('.color-dot').forEach(c=>c.onclick=()=>{
    
      document.documentElement.style.setProperty('--accent',c.dataset.color);
    
      document.documentElement.style.setProperty('--accent-rgb',c.dataset.rgb);
    
      localStorage.setItem('accent',c.dataset.color);localStorage.setItem('accentRgb',c.dataset.rgb);
    
      toast('个性化','强调色已更新。');
    
    });
    
  }
    

    
  function edgeBody(){
    
    return `<div class="app-shell">
    
      <div class="browser-tabs"><div class="browser-tab">新建标签页</div></div>
    
      <div class="browser-bar"><button class="icon-btn">${icon('i-back')}</button><button class="icon-btn">${icon('i-forward')}</button><button class="icon-btn edge-refresh">${icon('i-refresh')}</button>
    
        <input class="browser-url" value="edge://newtab" aria-label="地址栏"><button class="icon-btn">☆</button><button class="icon-btn">•••</button>
    
      </div>
    
      <div class="browser-page">
    
        <div class="edge-home"><div class="edge-logo">Microsoft Edge</div>
    
          <div class="web-search">${icon('i-search')}<input class="edge-search" placeholder="搜索 Web"></div>
    
          <div class="news-grid">
    
            <div class="news-card"><div class="news-img"></div><p><b>Windows 网页桌面演示</b><br>探索单文件网页中的窗口、任务栏与应用交互。</p></div>
    
            <div class="news-card"><div class="news-img"></div><p><b>HTML + CSS + JavaScript</b><br>无需任何第三方库，也无需联网即可运行。</p></div>
    
            <div class="news-card"><div class="news-img"></div><p><b>内联 SVG 图标</b><br>所有图标均嵌入当前 HTML 文件。</p></div>
    
          </div>
    
        </div>
    
      </div>
    
    </div>`;
    
  }
    
  function bindEdge(win){
    
    const url=win.querySelector('.browser-url'),page=win.querySelector('.browser-page');
    
    const navigate=q=>{
    
      if(!q)return;
    
      if(q==='edge://newtab'){page.innerHTML=edgeBody().match(/<div class="browser-page">([\s\S]*)<\/div>\s*<\/div>$/)?.[1]||page.innerHTML;return}
    
      page.innerHTML=`<div style="padding:50px;max-width:800px;margin:auto"><h1>搜索结果</h1><p>这是离线演示浏览器，无法访问真实互联网。</p><div class="setting-card"><b>${q}</b><p>已模拟搜索此关键词。你可以在真实项目中将这里替换为 iframe、后端搜索接口或自己的网页内容。</p></div></div>`;
    
      url.value='https://www.bing.com/search?q='+encodeURIComponent(q);
    
    };
    
    url.addEventListener('keydown',e=>{if(e.key==='Enter')navigate(url.value)});
    
    win.querySelector('.edge-search')?.addEventListener('keydown',e=>{if(e.key==='Enter')navigate(e.target.value)});
    
    win.querySelector('.edge-refresh').onclick=()=>toast('Microsoft Edge','页面已刷新。');
    
  }
    

    
  function terminalBody(){
    
    return `<div class="terminal" tabindex="0">
    
      <div class="term-line">Microsoft Windows [版本 11.0.26100.1]<br>(c) Microsoft Corporation。保留所有权利。<br><br>输入 help 查看可用命令。</div>
    
      <div class="term-input-row"><span class="term-prompt">C:\\Users\\Cahya&gt;</span><input class="term-input" autocomplete="off" autofocus></div>
    
    </div>`;
    
  }
    
  function bindTerminal(win){
    
    const term=win.querySelector('.terminal');
    
    const focus=()=>term.querySelector('.term-input')?.focus();setTimeout(focus,50);term.onclick=focus;
    
    const submit=input=>{
    
      input.addEventListener('keydown',e=>{
    
        if(e.key!=='Enter')return;
    
        const cmd=input.value.trim(),line=input.closest('.term-input-row');
    
        line.innerHTML=`<span class="term-prompt">C:\\Users\\Cahya&gt;</span><span>${escapeHtml(cmd)}</span>`;
    
        let out='';
    
        const [base,...args]=cmd.split(/\s+/);
    
        switch((base||'').toLowerCase()){
    
          case 'help':out='支持的命令：help, dir, date, time, echo, whoami, ver, cls, start';break;
    
          case 'dir':out=' 驱动器 C 中的卷没有标签。\\n\\n2026/06/24  10:30    &lt;DIR&gt;          Desktop\\n2026/06/24  10:30    &lt;DIR&gt;          Documents\\n2026/06/24  10:30    &lt;DIR&gt;          Downloads';break;
    
          case 'date':out=new Date().toLocaleDateString('zh-CN',{dateStyle:'full'});break;
    
          case 'time':out=new Date().toLocaleTimeString('zh-CN');break;
    
          case 'echo':out=escapeHtml(args.join(' '));break;
    
          case 'whoami':out='desktop-web\\\\cahya';break;
    
          case 'ver':out='Microsoft Windows [版本 11.0.26100.1]';break;
    
          case 'cls':term.innerHTML='';addPrompt();return;
    
          case 'start':openApp(args[0]||'edge');out='';break;
    
          case '':out='';break;
    
          default:out=`'${escapeHtml(base)}' 不是内部或外部命令，也不是可运行的程序。`;
    
        }
    
        if(out){const d=document.createElement('div');d.className='term-line';d.innerHTML=out.replace(/\n/g,'<br>');term.appendChild(d)}
    
        addPrompt();
    
      });
    
    };
    
    const addPrompt=()=>{
    
      const row=document.createElement('div');row.className='term-input-row';
    
      row.innerHTML='<span class="term-prompt">C:\\Users\\Cahya&gt;</span><input class="term-input" autocomplete="off">';
    
      term.appendChild(row);submit(row.querySelector('input'));focus();term.scrollTop=term.scrollHeight;
    
    };
    
    submit(term.querySelector('.term-input'));
    
  }
    
  const escapeHtml=s=>s.replace(/[&<>"']/g,m=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]));
    

    
  function storeBody(){
    
    return `<div class="app-shell"><div class="commandbar"><h3 style="margin:0 18px 0 5px">Microsoft Store</h3><div class="addressbar">${icon('i-search')}<span style="color:#64748b">搜索应用、游戏、电影等</span></div></div>
    
    <div class="main-view" style="background:linear-gradient(135deg,#f8fafc,#eef2ff)"><h1>欢迎使用 Microsoft Store</h1>
    
      <div class="news-grid" style="margin:20px 0;max-width:none">
    
        ${[['记事本','i-note'],['计算器','i-calc'],['Windows Terminal','i-terminal']].map(([n,i])=>`<div class="setting-card" style="text-align:center">${icon(i,'app-art')}<h3>${n}</h3><button class="more-btn" data-store-app="${n==='记事本'?'notepad':n==='计算器'?'calc':'terminal'}">打开</button></div>`).join('')}
    
      </div></div></div>`;
    
  }
    

    
  function taskmgrBody(){
    
    const rows=$$('.window').map(w=>[appMeta[w.dataset.app]?.name||w.dataset.app,Math.floor(Math.random()*18+1),Math.floor(Math.random()*280+40)]);
    
    return `<div class="app-shell"><div class="commandbar"><b>进程</b><span style="margin-left:auto">CPU 18% 内存 42%</span></div><div class="main-view" style="padding:0">
    
      <table class="tm-table"><thead><tr><th>名称</th><th>状态</th><th>CPU</th><th>内存</th></tr></thead><tbody>
    
      ${rows.map(r=>`<tr><td>${r[0]}</td><td>正在运行</td><td><div class="usage-bar"><i style="width:${r[1]}%"></i></div>${r[1]}%</td><td>${r[2]} MB</td></tr>`).join('')}
    
      </tbody></table></div></div>`;
    
  }
    

    
  function openApp(app,opts={}){
    
    hidePanels();
    
    let win;
    
    switch(app){
    
      case'explorer':win=createWindow('explorer',(opts.path||'主页')+' - 文件资源管理器',explorerBody(opts.path||'主页'));bindExplorer(win);break;
    
      case'notepad':win=createWindow('notepad','无标题 - 记事本',notepadBody(),{width:'700px',height:'500px'});bindNotepad(win);break;
    
      case'calc':win=createWindow('calc','计算器',calcBody(),{width:'360px',height:'560px'});bindCalc(win);break;
    
      case'settings':win=createWindow('settings','设置',settingsBody(),{width:'860px',height:'590px'});bindSettings(win);break;
    
      case'edge':win=createWindow('edge','Microsoft Edge',edgeBody(),{width:'900px',height:'610px'});bindEdge(win);break;
    
      case'terminal':win=createWindow('terminal','Windows Terminal',terminalBody(),{width:'740px',height:'460px'});bindTerminal(win);break;
    
      case'store':win=createWindow('store','Microsoft Store',storeBody(),{width:'820px',height:'560px'});win.querySelectorAll('[data-store-app]').forEach(b=>b.onclick=()=>openApp(b.dataset.storeApp));break;
    
      case'taskmgr':win=createWindow('taskmgr','任务管理器',taskmgrBody(),{width:'720px',height:'470px'});break;
    
      default:toast('Windows',`未找到应用：${app}`);return;
    
    }
    
    return win;
    
  }
    

    
  // pinned apps
    
  const pinned=['edge','explorer','store','notepad','calc','settings','terminal','taskmgr'];
    
  $('#pinnedGrid').innerHTML=pinned.map(a=>`<button class="pinned-app" data-app="${a}">${icon(appMeta[a].icon,'app-art')}<span>${appMeta[a].name}</span></button>`).join('');
    

    
  // Launch bindings
    
  document.addEventListener('dblclick',e=>{
    
    const d=e.target.closest('.desktop-icon');
    
    if(d)openApp(d.dataset.app,{path:d.dataset.path});
    
  });
    
  document.addEventListener('click',e=>{
    
    if(!e.target.closest('.panel,.taskbar,.context-menu,.window'))hidePanels();
    
    const launch=e.target.closest('[data-app]');
    
    if(launch && !launch.classList.contains('desktop-icon') && !launch.closest('.window'))openApp(launch.dataset.app,{path:launch.dataset.path});
    
    if(e.target.closest('.desktop-icon')){
    
      $$('.desktop-icon').forEach(x=>x.classList.remove('selected'));e.target.closest('.desktop-icon').classList.add('selected');
    
    }
    
  });
    

    
  $('#startBtn').onclick=e=>{e.stopPropagation();const show=startMenu.classList.contains('hidden');hidePanels(show?startMenu:null);startMenu.classList.toggle('hidden',!show);if(show)setTimeout(()=>$('#startSearch').focus(),50)};
    
  $('#searchBtn').onclick=e=>{e.stopPropagation();const show=searchPanel.classList.contains('hidden');hidePanels(show?searchPanel:null);searchPanel.classList.toggle('hidden',!show);if(show){renderSearch('');setTimeout(()=>$('#globalSearch').focus(),50)}};
    
  $('#quickBtn').onclick=e=>{e.stopPropagation();const show=quickPanel.classList.contains('hidden');hidePanels(show?quickPanel:null);quickPanel.classList.toggle('hidden',!show)};
    
  $('#clockBtn').onclick=e=>{e.stopPropagation();const show=calendarPanel.classList.contains('hidden');hidePanels(show?calendarPanel:null);calendarPanel.classList.toggle('hidden',!show);buildCalendar()};
    
  $('#powerBtn').onclick=e=>{e.stopPropagation();$('#powerMenu').classList.toggle('hidden')};
    
  $$('.quick-toggle').forEach(b=>b.onclick=()=>b.classList.toggle('on'));
    
  $('#brightness').oninput=e=>desktop.style.filter=`brightness(${e.target.value}%)`;
    
  $('#showDesktop').onclick=()=>{$$('.window').forEach(w=>w.classList.add('minimized'));$$('.task-btn[data-window]').forEach(b=>b.classList.remove('active'));activeWindow=null};
    

    
  function renderSearch(q){
    
    const all=Object.entries(appMeta).filter(([,m])=>!q||m.name.toLowerCase().includes(q.toLowerCase()));
    
    $('#searchResults').innerHTML=`<h3 style="font-size:14px">最佳匹配</h3>`+all.map(([a,m])=>`<div class="search-result" data-app="${a}">${icon(m.icon,'app-art')}<div><b>${m.name}</b><small style="display:block;color:#64748b">应用</small></div></div>`).join('');
    
    $('#searchResults').querySelectorAll('[data-app]').forEach(x=>x.onclick=()=>openApp(x.dataset.app));
    
  }
    
  $('#globalSearch').oninput=e=>renderSearch(e.target.value);
    
  $('#startSearch').oninput=e=>{if(e.target.value){startMenu.classList.add('hidden');searchPanel.classList.remove('hidden');$('#globalSearch').value=e.target.value;renderSearch(e.target.value);$('#globalSearch').focus()}};
    

    
  // context menu
    
  desktop.addEventListener('contextmenu',e=>{
    
    if(e.target.closest('.window,.taskbar,.panel'))return;
    
    e.preventDefault();hidePanels(contextMenu);
    
    contextMenu.style.left=Math.min(e.clientX,innerWidth-230)+'px';
    
    contextMenu.style.top=Math.min(e.clientY,innerHeight-285)+'px';
    
    contextMenu.classList.remove('hidden');
    
  });
    
  contextMenu.addEventListener('click',e=>{
    
    const action=e.target.closest('[data-action]')?.dataset.action;
    
    if(action==='refresh'){desktop.style.opacity='.97';setTimeout(()=>desktop.style.opacity='1',90)}
    
    if(action==='new'){
    
      const d=document.createElement('div');d.className='desktop-icon';d.dataset.app='explorer';d.dataset.path='新建文件夹';
    
      d.innerHTML=`${icon('i-folder','app-art')}<span contenteditable="true">新建文件夹</span>`;
    
      $('#desktopIcons').appendChild(d);setTimeout(()=>d.querySelector('span').focus(),20);
    
    }
    
    if(action==='settings'||action==='personalize')openApp('settings');
    
    contextMenu.classList.add('hidden');
    
  });
    

    
  // power
    
  $('#powerMenu').addEventListener('click',e=>{
    
    const p=e.target.dataset.power;if(!p)return;
    
    hidePanels();
    
    if(p==='lock'){$('#lockScreen').classList.remove('hidden');updateClock()}
    
    if(p==='shutdown')$('#shutdownScreen').classList.remove('hidden');
    
    if(p==='restart'){
    
      $('#bootScreen').classList.remove('hidden');$('#bootScreen').style.opacity='1';
    
      setTimeout(()=>$('#bootScreen').style.opacity='0',1100);
    
      setTimeout(()=>$('#bootScreen').classList.add('hidden'),1600);
    
    }
    
  });
    
  $('#lockScreen').onclick=()=>$('#lockScreen').classList.add('hidden');
    
  $('#shutdownScreen').onclick=()=>{
    
    $('#shutdownScreen').classList.add('hidden');$('#bootScreen').classList.remove('hidden');$('#bootScreen').style.opacity='1';
    
    setTimeout(()=>$('#bootScreen').style.opacity='0',1000);setTimeout(()=>$('#bootScreen').classList.add('hidden'),1450);
    
  };
    

    
  // clock/calendar
    
  function updateClock(){
    
    const n=new Date();
    
    const hm=n.toLocaleTimeString('zh-CN',{hour:'2-digit',minute:'2-digit',hour12:false});
    
    const ds=n.toLocaleDateString('zh-CN',{month:'numeric',day:'numeric'});
    
    $('#clockTime').textContent=hm;$('#clockDate').textContent=ds;
    
    $('#largeTime').textContent=hm;$('#fullDate').textContent=n.toLocaleDateString('zh-CN',{weekday:'long',year:'numeric',month:'long',day:'numeric'});
    
    $('#lockTime').textContent=hm;$('#lockDate').textContent=n.toLocaleDateString('zh-CN',{weekday:'long',month:'long',day:'numeric'});
    
  }
    
  function buildCalendar(){
    
    const n=new Date(),y=n.getFullYear(),m=n.getMonth(),first=new Date(y,m,1).getDay(),days=new Date(y,m+1,0).getDate(),prev=new Date(y,m,0).getDate();
    
    $('#monthLabel').textContent=`${y}年${m+1}月`;
    
    const labels=['日','一','二','三','四','五','六'].map(x=>`<span style="font-weight:600">${x}</span>`);
    
    const cells=[];
    
    for(let i=first-1;i>=0;i--)cells.push(`<span class="muted">${prev-i}</span>`);
    
    for(let d=1;d<=days;d++)cells.push(`<span class="${d===n.getDate()?'today':''}">${d}</span>`);
    
    let next=1;while(cells.length<42)cells.push(`<span class="muted">${next++}</span>`);
    
    $('#calGrid').innerHTML=labels.join('')+cells.join('');
    
  }
    
  updateClock();buildCalendar();setInterval(updateClock,1000);
    

    
  // keyboard shortcuts
    
  document.addEventListener('keydown',e=>{
    
    if(e.key==='Escape')hidePanels();
    
    if(e.key==='Meta'){e.preventDefault();$('#startBtn').click()}
    
    if(e.altKey&&e.key==='F4'&&activeWindow){e.preventDefault();closeWindow(activeWindow)}
    
    if(e.ctrlKey&&e.shiftKey&&e.key.toLowerCase()==='escape'){e.preventDefault();openApp('taskmgr')}
    
  });
    

    
  // restore settings
    
  const wp=localStorage.getItem('wallpaper');if(wp)desktop.dataset.wallpaper=wp;
    
  const ac=localStorage.getItem('accent'),ar=localStorage.getItem('accentRgb');
    
  if(ac)document.documentElement.style.setProperty('--accent',ac);
    
  if(ar)document.documentElement.style.setProperty('--accent-rgb',ar);
    

    
  // boot and welcome
    
  setTimeout(()=>{$('#bootScreen').style.opacity='0';setTimeout(()=>{$('#bootScreen').classList.add('hidden');toast('欢迎使用 Windows 网页桌面','双击桌面图标，或打开“开始”菜单体验。')},450)},950);
    
})();
    
</script>
    
</body>
    
</html>
  • SuLe 楼主 06-24 13:39
    19楼

    正在上传：image.png…



    这么看 不使用github代码会有一些明显的问题，而且代码体积也大一些。不过效果我感觉也是很不错了

* 帖子来源Linux.do
附近帖子
返回
飞读
随机推荐