a213121 commited on
Commit
8a68258
·
verified ·
1 Parent(s): 5682d81

make me a linux operation system

Browse files
Files changed (4) hide show
  1. README.md +7 -4
  2. index.html +286 -19
  3. script.js +80 -0
  4. style.css +78 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Penguinos Linux With Wings
3
- emoji: 📊
4
  colorFrom: purple
5
- colorTo: red
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: PenguinOS - Linux with Wings 🐧
 
3
  colorFrom: purple
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
index.html CHANGED
@@ -1,19 +1,286 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="h-full">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>PenguinOS - Linux with Wings</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: {
17
+ 100: '#e6f6ff',
18
+ 500: '#0078d4',
19
+ 900: '#004e8c'
20
+ },
21
+ secondary: {
22
+ 100: '#f3f3f3',
23
+ 500: '#858585',
24
+ 900: '#333333'
25
+ }
26
+ }
27
+ }
28
+ }
29
+ }
30
+ </script>
31
+ </head>
32
+ <body class="bg-gray-100 h-full overflow-hidden">
33
+ <div class="flex h-full">
34
+ <!-- Sidebar -->
35
+ <div class="w-64 bg-primary-900 text-white h-full flex flex-col">
36
+ <div class="p-4 border-b border-primary-700 flex items-center">
37
+ <i data-feather="hard-drive" class="mr-2"></i>
38
+ <h1 class="text-xl font-bold">PenguinOS</h1>
39
+ </div>
40
+ <nav class="flex-1 overflow-y-auto">
41
+ <div class="p-2">
42
+ <div class="text-primary-300 uppercase text-xs font-bold px-4 py-2">System</div>
43
+ <a href="#" class="flex items-center px-4 py-2 text-white bg-primary-700 rounded mx-2 mb-1">
44
+ <i data-feather="home" class="mr-3"></i>
45
+ Dashboard
46
+ </a>
47
+ <a href="#" class="flex items-center px-4 py-2 text-primary-200 hover:text-white rounded mx-2 mb-1">
48
+ <i data-feather="cpu" class="mr-3"></i>
49
+ System Monitor
50
+ </a>
51
+ <a href="#" class="flex items-center px-4 py-2 text-primary-200 hover:text-white rounded mx-2 mb-1">
52
+ <i data-feather="settings" class="mr-3"></i>
53
+ Settings
54
+ </a>
55
+ </div>
56
+ <div class="p-2">
57
+ <div class="text-primary-300 uppercase text-xs font-bold px-4 py-2">Applications</div>
58
+ <a href="#" class="flex items-center px-4 py-2 text-primary-200 hover:text-white rounded mx-2 mb-1">
59
+ <i data-feather="terminal" class="mr-3"></i>
60
+ Terminal
61
+ </a>
62
+ <a href="#" class="flex items-center px-4 py-2 text-primary-200 hover:text-white rounded mx-2 mb-1">
63
+ <i data-feather="file-text" class="mr-3"></i>
64
+ File Manager
65
+ </a>
66
+ <a href="#" class="flex items-center px-4 py-2 text-primary-200 hover:text-white rounded mx-2 mb-1">
67
+ <i data-feather="globe" class="mr-3"></i>
68
+ Web Browser
69
+ </a>
70
+ </div>
71
+ </nav>
72
+ <div class="p-4 border-t border-primary-700 flex items-center">
73
+ <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center mr-2">
74
+ <i data-feather="user" class="text-white"></i>
75
+ </div>
76
+ <div>
77
+ <div class="font-medium">Linux User</div>
78
+ <div class="text-xs text-primary-300">Administrator</div>
79
+ </div>
80
+ </div>
81
+ </div>
82
+
83
+ <!-- Main Content -->
84
+ <div class="flex-1 flex flex-col overflow-hidden">
85
+ <!-- Top Bar -->
86
+ <header class="bg-white border-b border-gray-200 p-4 flex items-center justify-between">
87
+ <div class="flex items-center">
88
+ <i data-feather="menu" class="mr-4 cursor-pointer text-secondary-500"></i>
89
+ <div class="relative">
90
+ <input type="text" placeholder="Search PenguinOS..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg w-64 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent">
91
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
92
+ </div>
93
+ </div>
94
+ <div class="flex items-center space-x-4">
95
+ <button class="p-2 rounded-full hover:bg-gray-100">
96
+ <i data-feather="bell" class="text-secondary-500"></i>
97
+ </button>
98
+ <button class="p-2 rounded-full hover:bg-gray-100">
99
+ <i data-feather="message-square" class="text-secondary-500"></i>
100
+ </button>
101
+ <button class="p-2 rounded-full hover:bg-gray-100">
102
+ <i data-feather="power" class="text-secondary-500"></i>
103
+ </button>
104
+ </div>
105
+ </header>
106
+
107
+ <!-- Content Area -->
108
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
109
+ <div class="mb-6">
110
+ <h2 class="text-2xl font-bold text-secondary-900 mb-2">Welcome to PenguinOS</h2>
111
+ <p class="text-secondary-500">Your lightweight Linux desktop environment</p>
112
+ </div>
113
+
114
+ <!-- System Stats -->
115
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
116
+ <div class="bg-white rounded-lg shadow p-6">
117
+ <div class="flex items-center">
118
+ <div class="p-3 rounded-full bg-primary-100 text-primary-500 mr-4">
119
+ <i data-feather="cpu"></i>
120
+ </div>
121
+ <div>
122
+ <div class="text-sm text-secondary-500">CPU Usage</div>
123
+ <div class="text-2xl font-bold">24%</div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ <div class="bg-white rounded-lg shadow p-6">
128
+ <div class="flex items-center">
129
+ <div class="p-3 rounded-full bg-blue-100 text-blue-500 mr-4">
130
+ <i data-feather="hard-drive"></i>
131
+ </div>
132
+ <div>
133
+ <div class="text-sm text-secondary-500">Disk Usage</div>
134
+ <div class="text-2xl font-bold">156GB/500GB</div>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ <div class="bg-white rounded-lg shadow p-6">
139
+ <div class="flex items-center">
140
+ <div class="p-3 rounded-full bg-green-100 text-green-500 mr-4">
141
+ <i data-feather="memory"></i>
142
+ </div>
143
+ <div>
144
+ <div class="text-sm text-secondary-500">Memory</div>
145
+ <div class="text-2xl font-bold">3.2GB/8GB</div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ <div class="bg-white rounded-lg shadow p-6">
150
+ <div class="flex items-center">
151
+ <div class="p-3 rounded-full bg-purple-100 text-purple-500 mr-4">
152
+ <i data-feather="activity"></i>
153
+ </div>
154
+ <div>
155
+ <div class="text-sm text-secondary-500">Network</div>
156
+ <div class="text-2xl font-bold">12.4Mbps</div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Quick Access -->
163
+ <div class="bg-white rounded-lg shadow p-6 mb-6">
164
+ <h3 class="text-lg font-semibold text-secondary-900 mb-4">Quick Access</h3>
165
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
166
+ <a href="#" class="flex flex-col items-center p-4 rounded-lg hover:bg-gray-50 text-center">
167
+ <div class="p-3 rounded-full bg-gray-100 text-primary-500 mb-2">
168
+ <i data-feather="terminal"></i>
169
+ </div>
170
+ <span class="text-sm">Terminal</span>
171
+ </a>
172
+ <a href="#" class="flex flex-col items-center p-4 rounded-lg hover:bg-gray-50 text-center">
173
+ <div class="p-3 rounded-full bg-gray-100 text-blue-500 mb-2">
174
+ <i data-feather="file-text"></i>
175
+ </div>
176
+ <span class="text-sm">Files</span>
177
+ </a>
178
+ <a href="#" class="flex flex-col items-center p-4 rounded-lg hover:bg-gray-50 text-center">
179
+ <div class="p-3 rounded-full bg-gray-100 text-green-500 mb-2">
180
+ <i data-feather="globe"></i>
181
+ </div>
182
+ <span class="text-sm">Browser</span>
183
+ </a>
184
+ <a href="#" class="flex flex-col items-center p-4 rounded-lg hover:bg-gray-50 text-center">
185
+ <div class="p-3 rounded-full bg-gray-100 text-purple-500 mb-2">
186
+ <i data-feather="settings"></i>
187
+ </div>
188
+ <span class="text-sm">Settings</span>
189
+ </a>
190
+ <a href="#" class="flex flex-col items-center p-4 rounded-lg hover:bg-gray-50 text-center">
191
+ <div class="p-3 rounded-full bg-gray-100 text-red-500 mb-2">
192
+ <i data-feather="users"></i>
193
+ </div>
194
+ <span class="text-sm">Users</span>
195
+ </a>
196
+ <a href="#" class="flex flex-col items-center p-4 rounded-lg hover:bg-gray-50 text-center">
197
+ <div class="p-3 rounded-full bg-gray-100 text-yellow-500 mb-2">
198
+ <i data-feather="help-circle"></i>
199
+ </div>
200
+ <span class="text-sm">Help</span>
201
+ </a>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Recent Activity -->
206
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
207
+ <div class="bg-white rounded-lg shadow p-6">
208
+ <h3 class="text-lg font-semibold text-secondary-900 mb-4">Recent Files</h3>
209
+ <div class="space-y-4">
210
+ <div class="flex items-center p-2 hover:bg-gray-50 rounded-lg">
211
+ <div class="p-2 rounded-lg bg-gray-100 text-secondary-500 mr-3">
212
+ <i data-feather="file-text"></i>
213
+ </div>
214
+ <div class="flex-1">
215
+ <div class="font-medium">document.txt</div>
216
+ <div class="text-xs text-secondary-400">Modified 2 hours ago</div>
217
+ </div>
218
+ <i data-feather="more-vertical" class="text-secondary-400"></i>
219
+ </div>
220
+ <div class="flex items-center p-2 hover:bg-gray-50 rounded-lg">
221
+ <div class="p-2 rounded-lg bg-gray-100 text-secondary-500 mr-3">
222
+ <i data-feather="image"></i>
223
+ </div>
224
+ <div class="flex-1">
225
+ <div class="font-medium">screenshot.png</div>
226
+ <div class="text-xs text-secondary-400">Modified yesterday</div>
227
+ </div>
228
+ <i data-feather="more-vertical" class="text-secondary-400"></i>
229
+ </div>
230
+ <div class="flex items-center p-2 hover:bg-gray-50 rounded-lg">
231
+ <div class="p-2 rounded-lg bg-gray-100 text-secondary-500 mr-3">
232
+ <i data-feather="code"></i>
233
+ </div>
234
+ <div class="flex-1">
235
+ <div class="font-medium">script.sh</div>
236
+ <div class="text-xs text-secondary-400">Modified 3 days ago</div>
237
+ </div>
238
+ <i data-feather="more-vertical" class="text-secondary-400"></i>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <div class="bg-white rounded-lg shadow p-6">
244
+ <h3 class="text-lg font-semibold text-secondary-900 mb-4">System Logs</h3>
245
+ <div class="space-y-3">
246
+ <div class="flex items-start">
247
+ <div class="p-1 rounded-full bg-green-100 text-green-500 mr-3 mt-1">
248
+ <i data-feather="check-circle" class="w-4 h-4"></i>
249
+ </div>
250
+ <div>
251
+ <div class="text-sm">System updated to version 5.4.0-91</div>
252
+ <div class="text-xs text-secondary-400">10 minutes ago</div>
253
+ </div>
254
+ </div>
255
+ <div class="flex items-start">
256
+ <div class="p-1 rounded-full bg-blue-100 text-blue-500 mr-3 mt-1">
257
+ <i data-feather="info" class="w-4 h-4"></i>
258
+ </div>
259
+ <div>
260
+ <div class="text-sm">New device connected: USB Drive</div>
261
+ <div class="text-xs text-secondary-400">1 hour ago</div>
262
+ </div>
263
+ </div>
264
+ <div class="flex items-start">
265
+ <div class="p-1 rounded-full bg-yellow-100 text-yellow-500 mr-3 mt-1">
266
+ <i data-feather="alert-triangle" class="w-4 h-4"></i>
267
+ </div>
268
+ <div>
269
+ <div class="text-sm">Backup failed: Insufficient disk space</div>
270
+ <div class="text-xs text-secondary-400">3 hours ago</div>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </main>
277
+ </div>
278
+ </div>
279
+
280
+ <script>
281
+ feather.replace();
282
+ </script>
283
+ <script src="script.js"></script>
284
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
285
+ </body>
286
+ </html>
script.js ADDED
@@ -0,0 +1,80 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', function() {
2
+ // Simulate system stats updates
3
+ function updateSystemStats() {
4
+ const stats = [
5
+ { selector: '.cpu-usage', min: 5, max: 40 },
6
+ { selector: '.memory-usage', min: 2, max: 7 },
7
+ { selector: '.network-speed', min: 5, max: 25 }
8
+ ];
9
+
10
+ stats.forEach(stat => {
11
+ const element = document.querySelector(stat.selector);
12
+ if (element) {
13
+ const value = Math.floor(Math.random() * (stat.max - stat.min + 1)) + stat.min;
14
+ element.textContent = `${value}${stat.selector === '.network-speed' ? 'Mbps' : '%'}`;
15
+ }
16
+ });
17
+ }
18
+
19
+ // Update stats every 3 seconds
20
+ setInterval(updateSystemStats, 3000);
21
+ updateSystemStats();
22
+
23
+ // Terminal simulation
24
+ const terminalElement = document.querySelector('.terminal');
25
+ if (terminalElement) {
26
+ const commands = [
27
+ { cmd: 'ls -la', output: 'total 48\ndrwxr-xr-x 5 user user 4096 Dec 10 14:30 .\ndrwxr-xr-x 3 root root 4096 Nov 28 09:15 ..\n-rw------- 1 user user 1352 Dec 9 16:42 .bash_history\n-rw-r--r-- 1 user user 220 Nov 28 09:15 .bash_logout\n-rw-r--r-- 1 user user 3771 Nov 28 09:15 .bashrc\ndrwx------ 3 user user 4096 Dec 1 11:20 .cache\ndrwx------ 3 user user 4096 Dec 1 11:20 .config\n-rw-r--r-- 1 user user 807 Nov 28 09:15 .profile\n-rw-r--r-- 1 user user 0 Dec 3 17:55 .sudo_as_admin_successful' },
28
+ { cmd: 'uname -a', output: 'Linux penguinOS 5.4.0-91-generic #102-Ubuntu SMP Fri Nov 5 16:31:28 UTC 2021 x86_64 x86_64 x86_64 GNU/Linux' },
29
+ { cmd: 'free -h', output: ' total used free shared buff/cache available\nMem: 7.7Gi 3.2Gi 2.1Gi 345Mi 2.4Gi 4.0Gi\nSwap: 2.0Gi 0.0Ki 2.0Gi' }
30
+ ];
31
+
32
+ let currentCommand = 0;
33
+
34
+ function typeWriter(text, element, speed, callback) {
35
+ let i = 0;
36
+ function typing() {
37
+ if (i < text.length) {
38
+ element.innerHTML += text.charAt(i);
39
+ i++;
40
+ setTimeout(typing, speed);
41
+ } else if (callback) {
42
+ callback();
43
+ }
44
+ }
45
+ typing();
46
+ }
47
+
48
+ function runNextCommand() {
49
+ if (currentCommand < commands.length) {
50
+ const command = commands[currentCommand];
51
+ const commandLine = document.createElement('div');
52
+ commandLine.className = 'command-line';
53
+ commandLine.innerHTML = `<span class="prompt">user@penguinos:~$</span> <span class="command">${command.cmd}</span>`;
54
+ terminalElement.appendChild(commandLine);
55
+
56
+ setTimeout(() => {
57
+ const output = document.createElement('div');
58
+ output.className = 'command-output';
59
+ terminalElement.appendChild(output);
60
+ typeWriter(command.output, output, 10, () => {
61
+ currentCommand++;
62
+ setTimeout(runNextCommand, 1000);
63
+ });
64
+ }, 500);
65
+ }
66
+ }
67
+
68
+ runNextCommand();
69
+ }
70
+
71
+ // Toggle sidebar on mobile
72
+ const menuButton = document.querySelector('[data-feather="menu"]');
73
+ if (menuButton) {
74
+ menuButton.addEventListener('click', function() {
75
+ const sidebar = document.querySelector('.w-64');
76
+ sidebar.classList.toggle('hidden');
77
+ sidebar.classList.toggle('block');
78
+ });
79
+ }
80
+ });
style.css CHANGED
@@ -1,28 +1,88 @@
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
 
 
 
 
 
 
 
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
2
+
3
  body {
4
+ font-family: 'Inter', sans-serif;
5
+ }
6
+
7
+ /* Custom scrollbar */
8
+ ::-webkit-scrollbar {
9
+ width: 8px;
10
+ height: 8px;
11
+ }
12
+
13
+ ::-webkit-scrollbar-track {
14
+ background: #f1f1f1;
15
+ border-radius: 10px;
16
+ }
17
+
18
+ ::-webkit-scrollbar-thumb {
19
+ background: #c1c1c1;
20
+ border-radius: 10px;
21
+ }
22
+
23
+ ::-webkit-scrollbar-thumb:hover {
24
+ background: #a8a8a8;
25
+ }
26
+
27
+ /* Sidebar scrollbar */
28
+ nav::-webkit-scrollbar {
29
+ width: 6px;
30
+ }
31
+
32
+ nav::-webkit-scrollbar-track {
33
+ background: transparent;
34
+ }
35
+
36
+ nav::-webkit-scrollbar-thumb {
37
+ background: rgba(255, 255, 255, 0.2);
38
+ border-radius: 3px;
39
+ }
40
+
41
+ nav::-webkit-scrollbar-thumb:hover {
42
+ background: rgba(255, 255, 255, 0.3);
43
+ }
44
+
45
+ /* Terminal-like elements */
46
+ .terminal {
47
+ font-family: 'Courier New', monospace;
48
+ background-color: #1e1e1e;
49
+ color: #f0f0f0;
50
+ border-radius: 6px;
51
+ padding: 16px;
52
+ }
53
+
54
+ .command-line {
55
+ display: flex;
56
+ align-items: center;
57
+ margin-bottom: 8px;
58
  }
59
 
60
+ .prompt {
61
+ color: #4CAF50;
62
+ margin-right: 8px;
63
  }
64
 
65
+ /* Linux-style window controls */
66
+ .window-controls {
67
+ display: flex;
68
+ gap: 8px;
69
+ margin-left: auto;
70
  }
71
 
72
+ .window-btn {
73
+ width: 12px;
74
+ height: 12px;
75
+ border-radius: 50%;
 
 
76
  }
77
 
78
+ .window-btn.close {
79
+ background-color: #ff5f56;
80
  }
81
+
82
+ .window-btn.minimize {
83
+ background-color: #ffbd2e;
84
+ }
85
+
86
+ .window-btn.maximize {
87
+ background-color: #27c93f;
88
+ }