Spaces:

igorvkarpov
/

myspace

Running

App Files Files Community

igorvkarpov commited on Mar 31

Commit

9823874

verified ·

1 Parent(s): f27289d

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +660 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Myspace
-emoji: 👁
-colorFrom: purple
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: myspace
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,660 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WinUI</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            user-select: none;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: #0078d7;
+            background-image: url('https://4kwallpapers.com/images/wallpapers/windows-11-dark-mode-stock-official-3840x2400-5630.jpg');
+            background-size: cover;
+            background-position: center;
+            height: 100vh;
+            overflow: hidden;
+            color: white;
+        }
+        .desktop {
+            height: calc(100vh - 40px);
+            padding: 10px;
+            display: grid;
+            grid-template-columns: repeat(auto-fill, 80px);
+            grid-auto-rows: min-content;
+            gap: 20px;
+            align-content: start;
+        }
+        .desktop-icon {
+            width: 80px;
+            text-align: center;
+            cursor: pointer;
+            padding: 5px;
+            border-radius: 5px;
+        }
+        .desktop-icon:hover {
+            background-color: rgba(255, 255, 255, 0.2);
+        }
+        .desktop-icon img {
+            width: 40px;
+            height: 40px;
+            margin-bottom: 5px;
+        }
+        .desktop-icon span {
+            font-size: 12px;
+            display: block;
+            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
+            word-break: break-word;
+        }
+        .taskbar {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 40px;
+            background-color: rgba(32, 32, 32, 0.8);
+            backdrop-filter: blur(10px);
+            display: flex;
+            align-items: center;
+            z-index: 1000;
+        }
+        .start-button {
+            height: 100%;
+            padding: 0 10px;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            font-weight: bold;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+        .start-button:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        .taskbar-icons {
+            display: flex;
+            height: 100%;
+            align-items: center;
+            gap: 2px;
+            margin-left: 10px;
+        }
+        .taskbar-icon {
+            width: 24px;
+            height: 24px;
+            padding: 8px;
+            cursor: pointer;
+            border-radius: 4px;
+        }
+        .taskbar-icon:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        .taskbar-icon img {
+            width: 100%;
+            height: 100%;
+        }
+        .clock {
+            margin-left: auto;
+            padding: 0 15px;
+            font-size: 12px;
+        }
+        .start-menu {
+            position: absolute;
+            bottom: 40px;
+            left: 0;
+            width: 500px;
+            height: 600px;
+            background-color: rgba(32, 32, 32, 0.9);
+            backdrop-filter: blur(20px);
+            border-radius: 8px 8px 0 0;
+            display: none;
+            z-index: 1001;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+            overflow: hidden;
+        }
+        .start-menu-header {
+            padding: 15px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .start-menu-header input {
+            flex-grow: 1;
+            background: rgba(255, 255, 255, 0.1);
+            border: none;
+            padding: 8px 15px;
+            border-radius: 20px;
+            color: white;
+            outline: none;
+        }
+        .start-menu-content {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            height: calc(100% - 60px);
+        }
+        .pinned-apps, .recommended {
+            padding: 10px;
+            overflow-y: auto;
+        }
+        .pinned-apps h3, .recommended h3 {
+            margin-bottom: 15px;
+            font-weight: normal;
+            font-size: 14px;
+            color: rgba(255, 255, 255, 0.7);
+        }
+        .app-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 10px;
+        }
+        .app {
+            padding: 10px;
+            border-radius: 5px;
+            cursor: pointer;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+        }
+        .app:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        .app img {
+            width: 30px;
+            height: 30px;
+            margin-bottom: 5px;
+        }
+        .app span {
+            font-size: 12px;
+        }
+        .user-profile {
+            margin-top: auto;
+            padding: 15px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            background-color: rgba(0, 0, 0, 0.2);
+            cursor: pointer;
+        }
+        .user-profile:hover {
+            background-color: rgba(0, 0, 0, 0.3);
+        }
+        .user-profile img {
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+        }
+        .window {
+            position: absolute;
+            min-width: 300px;
+            min-height: 200px;
+            background-color: rgba(32, 32, 32, 0.9);
+            backdrop-filter: blur(20px);
+            border-radius: 8px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+            display: none;
+            flex-direction: column;
+            overflow: hidden;
+            z-index: 10;
+        }
+        .window.active {
+            z-index: 100;
+            display: flex;
+        }
+        .window-header {
+            padding: 8px 10px;
+            display: flex;
+            align-items: center;
+            background-color: rgba(0, 0, 0, 0.2);
+            cursor: move;
+        }
+        .window-icon {
+            width: 16px;
+            height: 16px;
+            margin-right: 8px;
+        }
+        .window-title {
+            flex-grow: 1;
+            font-size: 12px;
+        }
+        .window-controls {
+            display: flex;
+        }
+        .window-btn {
+            width: 30px;
+            height: 30px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            background: none;
+            border: none;
+            color: white;
+        }
+        .window-btn:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        .window-btn.close:hover {
+            background-color: #e81123;
+        }
+        .window-content {
+            flex-grow: 1;
+            padding: 15px;
+            overflow: auto;
+        }
+        .window-footer {
+            padding: 8px;
+            background-color: rgba(0, 0, 0, 0.1);
+            font-size: 12px;
+            display: flex;
+            justify-content: space-between;
+        }
+        /* Explorer window specific */
+        .explorer-nav {
+            display: flex;
+            padding: 5px 10px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .explorer-nav-btn {
+            background: none;
+            border: none;
+            color: white;
+            padding: 5px 10px;
+            font-size: 12px;
+            cursor: pointer;
+            border-radius: 3px;
+        }
+        .explorer-nav-btn:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        .explorer-path {
+            flex-grow: 1;
+            padding: 5px;
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.7);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 3px;
+            background: rgba(0, 0, 0, 0.2);
+        }
+        .explorer-body {
+            display: flex;
+            height: calc(100% - 60px);
+        }
+        .explorer-sidebar {
+            width: 200px;
+            padding: 10px;
+            border-right: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .explorer-files {
+            flex-grow: 1;
+            padding: 10px;
+            overflow-y: auto;
+        }
+        .folder {
+            display: flex;
+            align-items: center;
+            padding: 5px;
+            cursor: pointer;
+            border-radius: 3px;
+        }
+        .folder:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        .folder-icon {
+            width: 20px;
+            height: 20px;
+            margin-right: 8px;
+        }
+        /* Notepad window specific */
+        .notepad-textarea {
+            width: 100%;
+            height: 100%;
+            background: none;
+            border: none;
+            color: white;
+            font-family: 'Consolas', monospace;
+            resize: none;
+            outline: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="desktop">
+        <div class="desktop-icon" onclick="openWindow('explorer')">
+            <img src="https://cdn-icons-png.flaticon.com/512/2965/2965300.png" alt="File Explorer">
+            <span>File Explorer</span>
+        </div>
+        <div class="desktop-icon" onclick="openWindow('notepad')">
+            <img src="https://cdn-icons-png.flaticon.com/512/2809/2809932.png" alt="Notepad">
+            <span>Notepad</span>
+        </div>
+        <div class="desktop-icon" onclick="openWindow('calculator')">
+            <img src="https://cdn-icons-png.flaticon.com/512/210/210826.png" alt="Calculator">
+            <span>Calculator</span>
+        </div>
+        <div class="desktop-icon">
+            <img src="https://cdn-icons-png.flaticon.com/512/888/888882.png" alt="Chrome">
+            <span>Google Chrome</span>
+        </div>
+    </div>
+    <div class="taskbar">
+        <div class="start-button" id="startButton" onclick="toggleStartMenu()">
+            <i class="fab fa-windows"></i>
+        </div>
+        <div class="taskbar-icons">
+            <div class="taskbar-icon" onclick="openWindow('explorer')">
+                <img src="https://cdn-icons-png.flaticon.com/512/2965/2965300.png" alt="File Explorer">
+            </div>
+            <div class="taskbar-icon" onclick="openWindow('notepad')">
+                <img src="https://cdn-icons-png.flaticon.com/512/2809/2809932.png" alt="Notepad">
+            </div>
+            <div class="taskbar-icon" onclick="openWindow('calculator')">
+                <img src="https://cdn-icons-png.flaticon.com/512/210/210826.png" alt="Calculator">
+            </div>
+        </div>
+        <div class="clock" id="clock">12:00 PM</div>
+    </div>
+    <div class="start-menu" id="startMenu">
+        <div class="start-menu-header">
+            <i class="fas fa-search"></i>
+            <input type="text" placeholder="Type here to search">
+        </div>
+        <div class="start-menu-content">
+            <div class="pinned-apps">
+                <h3>Pinned</h3>
+                <div class="app-grid">
+                    <div class="app" onclick="openWindow('explorer')">
+                        <img src="https://cdn-icons-png.flaticon.com/512/2965/2965300.png" alt="File Explorer">
+                        <span>File Explorer</span>
+                    </div>
+                    <div class="app" onclick="openWindow('notepad')">
+                        <img src="https://cdn-icons-png.flaticon.com/512/2809/2809932.png" alt="Notepad">
+                        <span>Notepad</span>
+                    </div>
+                    <div class="app" onclick="openWindow('calculator')">
+                        <img src="https://cdn-icons-png.flaticon.com/512/210/210826.png" alt="Calculator">
+                        <span>Calculator</span>
+                    </div>
+                    <div class="app">
+                        <img src="https://cdn-icons-png.flaticon.com/512/888/888882.png" alt="Chrome">
+                        <span>Google Chrome</span>
+                    </div>
+                    <div class="app">
+                        <img src="https://cdn-icons-png.flaticon.com/512/2965/2965278.png" alt="Settings">
+                        <span>Settings</span>
+                    </div>
+                    <div class="app">
+                        <img src="https://cdn-icons-png.flaticon.com/512/2965/2965256.png" alt="Store">
+                        <span>Microsoft Store</span>
+                    </div>
+                </div>
+            </div>
+            <div class="recommended">
+                <h3>Recommended</h3>
+                <div class="app-grid">
+                    <div class="app">
+                        <img src="https://cdn-icons-png.flaticon.com/512/2965/2965283.png" alt="Word">
+                        <span>Word</span>
+                    </div>
+                    <div class="app">
+                        <img src="https://cdn-icons-png.flaticon.com/512/2965/2965335.png" alt="Excel">
+                        <span>Excel</span>
+                    </div>
+                    <div class="app">
+                        <img src="https://cdn-icons-png.flaticon.com/512/2965/2965291.png" alt="PowerPoint">
+                        <span>PowerPoint</span>
+                    </div>
+                    <div class="app">
+                        <img src="https://cdn-icons-png.flaticon.com/512/2913/2913111.png" alt="Visual Studio">
+                        <span>Visual Studio</span>
+                    </div>
+                    <div class="app">
+                        <img src="https://cdn-icons-png.flaticon.com/512/5968/5968666.png" alt="Edge">
+                        <span>Edge</span>
+                    </div>
+                    <div class="app">
+                        <img src="https://cdn-icons-png.flaticon.com/512/3046/3046125.png" alt="Outlook">
+                        <span>Outlook</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="user-profile" onclick="openWindow('user-settings')">
+            <img src="https://cdn-icons-png.flaticon.com/512/149/149071.png" alt="User">
+            <span>User</span>
+        </div>
+    </div>
+    <div class="window" id="explorerWindow">
+        <div class="window-header">
+            <img class="window-icon" src="https://cdn-icons-png.flaticon.com/512/2965/2965300.png" alt="Explorer">
+            <div class="window-title">File Explorer</div>
+            <div class="window-controls">
+                <button class="window-btn minimize"><i class="fas fa-minus"></i></button>
+                <button class="window-btn maximize"><i class="far fa-square"></i></button>
+                <button class="window-btn close" onclick="closeWindow('explorerWindow')"><i class="fas fa-times"></i></button>
+            </div>
+        </div>
+        <div class="explorer-nav">
+            <button class="explorer-nav-btn"><i class="fas fa-arrow-left"></i></button>
+            <button class="explorer-nav-btn"><i class="fas fa-arrow-right"></i></button>
+            <button class="explorer-nav-btn"><i class="fas fa-arrow-up"></i></button>
+            <input type="text" class="explorer-path" value="This PC > Documents">
+        </div>
+        <div class="explorer-body">
+            <div class="explorer-sidebar">
+                <div class="folder">
+                    <img class="folder-icon" src="https://cdn-icons-png.flaticon.com/512/2965/2965318.png" alt="Desktop">
+                    <span>Desktop</span>
+                </div>
+                <div class="folder">
+                    <img class="folder-icon" src="https://cdn-icons-png.flaticon.com/512/2965/2965316.png" alt="Documents">
+                    <span>Documents</span>
+                </div>
+                <div class="folder">
+                    <img class="folder-icon" src="https://cdn-icons-png.flaticon.com/512/2965/2965311.png" alt="Downloads">
+                    <span>Downloads</span>
+                </div>
+                <div class="folder">
+                    <img class="folder-icon" src="https://cdn-icons-png.flaticon.com/512/2965/2965334.png" alt="Music">
+                    <span>Music</span>
+                </div>
+                <div class="folder">
+                    <img class="folder-icon" src="https://cdn-icons-png.flaticon.com/512/2965/2965351.png" alt="Pictures">
+                    <span>Pictures</span>
+                </div>
+                <div class="folder">
+                    <img class="folder-icon" src="https://cdn-icons-png.flaticon.com/512/2965/2965341.png" alt="Videos">
+                    <span>Videos</span>
+                </div>
+            </div>
+            <div class="explorer-files">
+                Some files would be listed here...
+            </div>
+        </div>
+        <div class="window-footer">
+            <div>5 items</div>
+            <div>100 GB free of 256 GB</div>
+        </div>
+    </div>
+    <div class="window" id="notepadWindow">
+        <div class="window-header">
+            <img class="window-icon" src="https://cdn-icons-png.flaticon.com/512/2809/2809932.png" alt="Notepad">
+            <div class="window-title">Untitled - Notepad</div>
+            <div class="window-controls">
+                <button class="window-btn minimize"><i class="fas fa-minus"></i></button>
+                <button class="window-btn maximize"><i class="far fa-square"></i></button>
+                <button class="window-btn close" onclick="closeWindow('notepadWindow')"><i class="fas fa-times"></i></button>
+            </div>
+        </div>
+        <div class="window-content">
+            <textarea class="notepad-textarea">This is a sample text in Notepad.
+You can type here whatever you want.
+• List item 1
+• List item 2
+• List item 3
+1234567890
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+abcdefghijklmnopqrstuvwxyz</textarea>
+        </div>
+        <div class="window-footer">
+            <div>Ln 7, Col 1</div>
+            <div>Windows (CRLF)</div>
+            <div>UTF-8</div>
+        </div>
+    </div>
+    <div class="window" id="calculatorWindow">
+        <div class="window-header">
+            <img class="window-icon" src="https://cdn-icons-png.flaticon.com/512/210/210826.png" alt="Calculator">
+            <div class="window-title">Calculator</div>
+        <div class="window-controls">
+            <button class="window-btn minimize"><i class="fas fa-minus"></i></button>
+            <button class="window-btn maximize"><i class="far fa-square"></i></button>
+            <button class="window-btn close" onclick="closeWindow('calculatorWindow')"><i class="fas fa-times"></i></button>
+        </div>
+        </div>
+        <div class="window-content">
+            <p>Calculator functionality would go here...</p>
+        </div>
+    </div>
+    <script>
+        // Clock functionality
+        function updateClock() {
+            const now = new Date();
+            const hours = now.getHours();
+            const minutes = now.getMinutes().toString().padStart(2, '0');
+            const ampm = hours >= 12 ? 'PM' : 'AM';
+            const formattedHours = hours % 12 || 12;
+            document.getElementById('clock').textContent = `${formattedHours}:${minutes} ${ampm}`;
+        }
+        setInterval(updateClock, 1000);
+        updateClock();
+        // Start menu functionality
+        function toggleStartMenu() {
+            const startMenu = document.getElementById('startMenu');
+            startMenu.style.display = startMenu.style.display === 'block' ? 'none' : 'block';
+        }
+        // Close start menu when clicking outside
+        document.addEventListener('click', function(event) {
+            const startMenu = document.getElementById('startMenu');
+            const startButton = document.getElementById('startButton');
+            if (!startMenu.contains(event.target) && event.target !== startButton) {
+                startMenu.style.display = 'none';
+            }
+        });
+        // Window management
+        function openWindow(windowId) {
+            document.getElementById(windowId + 'Window').classList.add('active');
+            document.getElementById('startMenu').style.display = 'none';
+        }
+        function closeWindow(windowId) {
+            document.getElementById(windowId).classList.remove('active');
+        }
+        // Make windows draggable
+        const windows = document.querySelectorAll('.window');
+        windows.forEach(window => {
+            const header = window.querySelector('.window-header');
+            let isDragging = false;
+            let offsetX, offsetY;
+            header.addEventListener('mousedown', function(e) {
+                isDragging = true;
+                offsetX = e.clientX - window.getBoundingClientRect().left;
+                offsetY = e.clientY - window.getBoundingClientRect().top;
+                // Bring to front
+                windows.forEach(w => w.style.zIndex = 10);
+                window.style.zIndex = 100;
+            });
+            document.addEventListener('mousemove', function(e) {
+                if (!isDragging) return;
+                const x = e.clientX - offsetX;
+                const y = e.clientY - offsetY;
+                window.style.left = x + 'px';
+                window.style.top = y + 'px';
+            });
+            document.addEventListener('mouseup', function() {
+                isDragging = false;
+            });
+        });
+        // Open File Explorer by default
+        openWindow('explorer');
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</html>