taliwind+pyodide实现浏览器中离线直接运行python代码的webos操作系统代码-html代码-BFW代码库

taliwind+pyodide实现浏览器中离线直接运行python代码的webos操作系统代码

代码语言：html

代码描述：taliwind+pyodide实现浏览器中离线直接运行python代码的webos操作系统代码，支持多窗口，文件管理、python代码运行、计算器、锁屏、系统设置，桌面操作、dock窗口等ui操作。

代码标签： taliwind pyodide 浏览器离线直接运行 python 代码 webos 操作系

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN" class="h-full select-none">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebOS - Browser Python Desktop</title>
    <!-- Tailwind CSS -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        osGray: {
                            50: '#f8fafc',
                            100: '#f1f5f9',
                            800: '#1e293b',
                            900: '#0f172a',
                        }
                    }
                }
            }
        }
    </script>
    <!-- FontAwesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Pyodide Python 运行库 -->
    <script src="https://cdn.jsdelivr.net/pyodide/v0.26.1/full/pyodide.js"></script>
    <style>
        /* 毛玻璃效果强化 */
        .glass {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .glass-dark {
            background: rgba(15, 23, 42, 0.6);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        /* 隐藏滚动条 */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    </style>
</head>
<body class="h-full w-full overflow-hidden bg-gradient-to-tr from-slate-900 via-indigo-950 to-slate-900 font-sans text-white">

    <!-- 桌面背景壁纸 -->
    <div class="absolute inset-0 z-0 bg-cover bg-center transition-all duration-700" id="desktop-bg" style="background-image: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&w=1920&q=80');">
        <div class="absolute inset-0 bg-black/30"></div>
    </div>

    <!-- 桌面应用容器 -->
    <div class="relative z-10 flex h-full w-full flex-col justify-between p-4">
        
        <!-- 顶部状态栏 -->
        <header class="glass flex h-10 w-full items-center justify-between rounded-xl px-5 text-sm shadow-lg">
            <div class="flex items-center gap-4">
                <span class="font-semibold cursor-pointer" onclick="toggleStartMenu()"><i class="fa-solid fa-cookie-bite mr-2 text-indigo-400"></i>WebOS</span>
                <span id="py-status" class="text-xs text-amber-400 flex items-center gap-1.5">
                    <span class="relative flex h-2 w-2">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-2 w-2 bg-amber-500"></span>
                    </span>
                    Python 初始化中...
                </span>
            </div>
            <div class="flex items-center gap-4">
                <i class="fa-solid fa-wifi cursor-pointer"></i>
                <i class="fa-solid fa-battery-three-quarters cursor-pointer"></i>
                <span id="system-time" class="font-medium">00:00:00</span>
            </div>
        </header>

        <!-- 桌面图标区 -->
        <main class="relative flex-1 py-6">
            <div class=".........完整代码请登录后点击上方下载按钮下载查看