Hugging Face's logo

Spaces:
crtypubg
/
web11-react-windows-simulator
Running

App Files Community
web11-react-windows-simulator
File size: 10,763 Bytes 
8aeb79a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bed578a
 
 
 
8aeb79a
bed578a
 
8aeb79a
bed578a
8aeb79a
 
bed578a
8aeb79a
 
bed578a
8aeb79a
 
 
bed578a
8aeb79a
 
 
 
 
 
 
 
 
 
 
 
 
bed578a
8aeb79a
bed578a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8aeb79a
bed578a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8aeb79a
 
 
 
bed578a
 
 
 
 
 
 
 
 
 
8aeb79a
 
bed578a
8aeb79a
bed578a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8aeb79a
 
1e8001b
 
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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web11 - Windows 11 Simulator</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <style>
        .window {
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        .window:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
        }
        .taskbar-icon {
            transition: all 0.2s ease;
        }
        .taskbar-icon:hover {
            transform: scale(1.1);
            filter: brightness(1.2);
        }
        .desktop-icon {
            transition: all 0.2s ease;
        }
        .desktop-icon:hover {
            transform: scale(1.05);
            filter: brightness(1.1);
        }
        .start-menu {
            backdrop-filter: blur(20px);
            background-color: rgba(255, 255, 255, 0.7);
        }
    </style>
</head>
<body class="bg-[url('https://win11.blueedge.me/img/wallpaper/default/img0.jpg')] bg-cover bg-center h-screen overflow-hidden font-sans select-none">
    <!-- Desktop Icons -->
    <div class="absolute top-0 left-0 p-4 grid gap-6 grid-cols-1 w-32">
        <div class="desktop-icon flex flex-col items-center text-center text-white text-sm cursor-pointer">
            <img src="https://win11.blueedge.me/img/icon/unescape.png" alt="Unescape" class="w-12 h-12 mb-1">
            <span>Unescape</span>
        </div>
        <div class="desktop-icon flex flex-col items-center text-center text-white text-sm cursor-pointer">
            <img src="https://win11.blueedge.me/img/icon/bin0.png" alt="Recycle Bin" class="w-12 h-12 mb-1">
            <span>Recycle Bin</span>
        </div>
        <div class="desktop-icon flex flex-col items-center text-center text-white text-sm cursor-pointer">
            <img src="https://win11.blueedge.me/img/icon/explorer.png" alt="File Explorer" class="w-12 h-12 mb-1">
            <span>File Explorer</span>
        </div>
    </div>

    <!-- Windows -->
    <div class="window absolute top-1/4 left-1/4 w-1/2 h-1/2 bg-white flex flex-col">
        <div class="bg-gray-100 px-4 py-2 flex justify-between items-center border-b">
            <div class="flex items-center">
                <img src="https://win11.blueedge.me/img/icon/notepad.png" alt="Notepad" class="w-5 h-5 mr-2">
                <span>Untitled - Notepad</span>
            </div>
            <div class="flex">
                <button class="px-3 py-1 hover:bg-gray-200"><i data-feather="minimize"></i></button>
                <button class="px-3 py-1 hover:bg-gray-200"><i data-feather="maximize"></i></button>
                <button class="px-3 py-1 hover:bg-red-500 hover:text-white"><i data-feather="x"></i></button>
            </div>
        </div>
        <div class="flex-1 p-4 overflow-auto">
            <p>Welcome to Web11 - A Windows 11 simulator built with web technologies!</p>
        </div>
        <div class="bg-gray-100 px-4 py-1 text-xs text-gray-600 border-t">
            1:31 PM  10/12/25
        </div>
    </div>

    <!-- Taskbar -->
    <div class="absolute bottom-0 left-0 right-0 bg-gray-900 bg-opacity-90 h-12 flex items-center px-4 justify-between">
        <div class="flex items-center space-x-2">
            <button class="taskbar-icon p-2 rounded-md hover:bg-gray-700" onclick="toggleStartMenu()">
                <div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
                    <span class="text-white text-xs font-bold">K</span>
                </div>
            </button>
            <button class="taskbar-icon p-2 rounded-md hover:bg-gray-700" onclick="openApp('search')">
                <i data-feather="search" class="w-5 h-5 text-white"></i>
            </button>
            <button class="taskbar-icon p-2 rounded-md hover:bg-gray-700" onclick="openApp('explorer')">
                <img src="https://win11.blueedge.me/img/icon/explorer.png" alt="Explorer" class="w-6 h-6">
            </button>
            <button class="taskbar-icon p-2 rounded-md hover:bg-gray-700" onclick="openApp('edge')">
                <img src="https://win11.blueedge.me/img/icon/edge.png" alt="Edge" class="w-6 h-6">
            </button>
            <button class="taskbar-icon p-2 rounded-md hover:bg-gray-700" onclick="openApp('store')">
                <img src="https://win11.blueedge.me/img/icon/store.png" alt="Store" class="w-6 h-6">
            </button>
        </div>
<div class="flex items-center space-x-2">
            <button class="taskbar-icon p-1 rounded-md hover:bg-gray-700 flex items-center">
                <i data-feather="wifi" class="w-5 h-5 text-white"></i>
            </button>
            <button class="taskbar-icon p-1 rounded-md hover:bg-gray-700 flex items-center">
                <i data-feather="volume-2" class="w-5 h-5 text-white"></i>
            </button>
            <div class="text-white text-sm">
                1:31 PM
            </div>
            <div class="w-1 h-5 bg-gray-600 mx-1"></div>
        </div>
    </div>
    <!-- Start Menu (hidden by default) -->
    <div class="start-menu absolute bottom-16 left-4 w-96 h-2/3 rounded-lg hidden backdrop-blur-xl bg-gray-900 bg-opacity-80 border border-gray-700 overflow-hidden">
        <div class="p-4">
            <input type="text" placeholder="Type here to search" class="w-full p-3 rounded-lg bg-gray-800 text-white mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
            
            <div class="mb-6">
                <h3 class="text-gray-400 text-sm font-semibold mb-3">Pinned</h3>
                <div class="grid grid-cols-6 gap-4">
                    <div class="flex flex-col items-center cursor-pointer group" onclick="openApp('calculator')">
                        <img src="https://win11.blueedge.me/img/icon/calculator.png" alt="Calculator" class="w-10 h-10 mb-1 group-hover:scale-110 transition-transform">
                        <span class="text-xs text-white group-hover:text-blue-400">Calculator</span>
                    </div>
                    <div class="flex flex-col items-center cursor-pointer group" onclick="openApp('spotify')">
                        <img src="https://win11.blueedge.me/img/icon/spotify.png" alt="Spotify" class="w-10 h-10 mb-1 group-hover:scale-110 transition-transform">
                        <span class="text-xs text-white group-hover:text-blue-400">Spotify</span>
                    </div>
                    <div class="flex flex-col items-center cursor-pointer group" onclick="openApp('notepad')">
                        <img src="https://win11.blueedge.me/img/icon/notepad.png" alt="Notepad" class="w-10 h-10 mb-1 group-hover:scale-110 transition-transform">
                        <span class="text-xs text-white group-hover:text-blue-400">Notepad</span>
                    </div>
                    <div class="flex flex-col items-center cursor-pointer group" onclick="openApp('terminal')">
                        <img src="https://win11.blueedge.me/img/icon/terminal.png" alt="Terminal" class="w-10 h-10 mb-1 group-hover:scale-110 transition-transform">
                        <span class="text-xs text-white group-hover:text-blue-400">Terminal</span>
                    </div>
                </div>
            </div>

            <div>
                <h3 class="text-gray-400 text-sm font-semibold mb-3">Recommended</h3>
                <div class="space-y-2">
                    <div class="flex items-center p-3 rounded-lg hover:bg-gray-800 cursor-pointer" onclick="openApp('settings')">
                        <img src="https://win11.blueedge.me/img/icon/settings.png" alt="Settings" class="w-8 h-8 mr-3">
                        <div>
                            <div class="text-white text-sm">Settings</div>
                            <div class="text-gray-400 text-xs">System preferences</div>
                        </div>
                    </div>
                    <div class="flex items-center p-3 rounded-lg hover:bg-gray-800 cursor-pointer" onclick="openApp('store')">
                        <img src="https://win11.blueedge.me/img/icon/store.png" alt="Store" class="w-8 h-8 mr-3">
                        <div>
                            <div class="text-white text-sm">Microsoft Store</div>
                            <div class="text-gray-400 text-xs">Download apps</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="absolute bottom-4 right-4 flex space-x-2">
            <button class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700">
                <i data-feather="user" class="w-4 h-4 text-white"></i>
            </button>
            <button class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700">
                <i data-feather="power" class="w-4 h-4 text-white"></i>
            </button>
        </div>
    </div>
<script>
        feather.replace();
        
        function toggleStartMenu() {
            document.querySelector('.start-menu').classList.toggle('hidden');
        }

        function openApp(appName) {
            // Create new window for the app
            const window = document.createElement('div');
            window.className = 'window absolute top-1/4 left-1/4 w-1/2 h-1/2 bg-white flex flex-col z-10';
            window.innerHTML = `
                <div class="bg-gray-100 px-4 py-2 flex justify-between items-center border-b">
                    <div class="flex items-center">
                        <img src="https://win11.blueedge.me/img/icon/${appName}.png" alt="${appName}" class="w-5 h-5 mr-2">
                        <span>${appName.charAt(0).toUpperCase() + appName.slice(1)}</span>
                    </div>
                    <div class="flex">
                        <button class="px-3 py-1 hover:bg-gray-200" onclick="this.parentNode.parentNode.parentNode.remove()"><i data-feather="x"></i></button>
                    </div>
                </div>
                <div class="flex-1 p-4 overflow-auto flex items-center justify-center">
                    <p>${appName.charAt(0).toUpperCase() + appName.slice(1)} app will open here</p>
                </div>
            `;
            document.body.appendChild(window);
            feather.replace();
        }
    </script>
</body>
</html>