Spaces:

hellork
/

windows-in-the-browser

Running

App Files Files Community

hellork commited on May 7, 2025

Commit

1a7d879

verified ·

1 Parent(s): a58f166

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +1349 -19
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Windows In The Browser
-emoji: 📊
-colorFrom: red
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: windows-in-the-browser
+emoji: 🐳
+colorFrom: blue
+colorTo: pink
 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,1349 @@
-<!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>Windows 12 Web</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Segoe+UI:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+            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;
+            margin: 0;
+            overflow: hidden;
+            user-select: none;
+        }
+        .window {
+            position: absolute;
+            background-color: rgba(32, 32, 32, 0.9);
+            border-radius: 8px;
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            overflow: hidden;
+            display: none;
+            flex-direction: column;
+            min-width: 300px;
+            min-height: 200px;
+        }
+        .window-header {
+            background-color: rgba(40, 40, 40, 0.9);
+            padding: 8px 12px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            cursor: move;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        .window-title {
+            color: white;
+            font-size: 12px;
+            font-weight: 500;
+        }
+        .window-controls {
+            display: flex;
+            gap: 8px;
+        }
+        .window-btn {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            border: none;
+            cursor: pointer;
+        }
+        .close-btn { background-color: #ff5f56; }
+        .minimize-btn { background-color: #ffbd2e; }
+        .maximize-btn { background-color: #27c93f; }
+        .window-content {
+            flex: 1;
+            padding: 12px;
+            overflow: auto;
+        }
+        .taskbar {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 48px;
+            background-color: rgba(32, 32, 32, 0.7);
+            backdrop-filter: blur(20px);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+            z-index: 1000;
+        }
+        .start-button {
+            background-color: transparent;
+            border: none;
+            color: white;
+            font-size: 14px;
+            cursor: pointer;
+            padding: 8px 16px;
+            border-radius: 4px;
+            transition: background-color 0.2s;
+        }
+        .start-button:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        .taskbar-icons {
+            display: flex;
+            gap: 8px;
+            position: absolute;
+            left: 12px;
+        }
+        .taskbar-icon {
+            width: 40px;
+            height: 40px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+        .taskbar-icon:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        .taskbar-icon i {
+            font-size: 18px;
+            color: white;
+        }
+        .start-menu {
+            position: fixed;
+            bottom: 60px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 600px;
+            height: 650px;
+            background-color: rgba(32, 32, 32, 0.9);
+            border-radius: 8px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            display: none;
+            flex-direction: column;
+            overflow: hidden;
+            z-index: 1001;
+        }
+        .search-bar {
+            padding: 16px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .search-input {
+            width: 100%;
+            padding: 8px 16px;
+            background-color: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 4px;
+            color: white;
+            font-size: 14px;
+        }
+        .pinned-apps {
+            padding: 16px;
+            flex: 1;
+            overflow-y: auto;
+        }
+        .app-grid {
+            display: grid;
+            grid-template-columns: repeat(6, 1fr);
+            gap: 12px;
+        }
+        .app-icon {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 12px;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+        .app-icon:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        .app-icon i {
+            font-size: 24px;
+            color: white;
+            margin-bottom: 8px;
+        }
+        .app-icon span {
+            color: white;
+            font-size: 12px;
+            text-align: center;
+        }
+        .recommended {
+            padding: 16px;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .recommended-title {
+            color: rgba(255, 255, 255, 0.7);
+            font-size: 12px;
+            margin-bottom: 12px;
+        }
+        .recommended-list {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+        .recommended-item {
+            display: flex;
+            align-items: center;
+            padding: 8px;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+        .recommended-item:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        .recommended-item i {
+            font-size: 16px;
+            color: white;
+            margin-right: 12px;
+        }
+        .recommended-item span {
+            color: white;
+            font-size: 14px;
+        }
+        .user-menu {
+            position: fixed;
+            bottom: 60px;
+            right: 12px;
+            width: 300px;
+            background-color: rgba(32, 32, 32, 0.9);
+            border-radius: 8px;
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            display: none;
+            flex-direction: column;
+            overflow: hidden;
+            z-index: 1001;
+        }
+        .user-profile {
+            display: flex;
+            align-items: center;
+            padding: 16px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .user-avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background-color: #0078d7;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-right: 12px;
+            color: white;
+            font-weight: bold;
+        }
+        .user-info {
+            flex: 1;
+        }
+        .user-name {
+            color: white;
+            font-size: 14px;
+            font-weight: 500;
+        }
+        .user-email {
+            color: rgba(255, 255, 255, 0.7);
+            font-size: 12px;
+        }
+        .user-options {
+            padding: 8px 0;
+        }
+        .user-option {
+            display: flex;
+            align-items: center;
+            padding: 8px 16px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+        .user-option:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        .user-option i {
+            font-size: 16px;
+            color: white;
+            margin-right: 12px;
+        }
+        .user-option span {
+            color: white;
+            font-size: 14px;
+        }
+        .power-options {
+            padding: 8px 0;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        /* Minesweeper styles */
+        .minesweeper-board {
+            display: grid;
+            grid-template-columns: repeat(10, 30px);
+            grid-template-rows: repeat(10, 30px);
+            gap: 1px;
+            margin: 0 auto;
+        }
+        .minesweeper-cell {
+            width: 30px;
+            height: 30px;
+            background-color: #ddd;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 14px;
+            font-weight: bold;
+            cursor: pointer;
+            user-select: none;
+        }
+        .minesweeper-cell.revealed {
+            background-color: #bbb;
+        }
+        .minesweeper-cell.flagged {
+            background-color: #ddd;
+            color: red;
+        }
+        .minesweeper-cell.mine {
+            background-color: #ff4444;
+            color: white;
+        }
+        /* Calculator styles */
+        .calculator {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            grid-gap: 8px;
+            width: 240px;
+            margin: 0 auto;
+        }
+        .calculator-display {
+            grid-column: span 4;
+            height: 60px;
+            background-color: #f0f0f0;
+            border-radius: 4px;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+            align-items: flex-end;
+            padding: 8px;
+            font-family: 'Segoe UI', sans-serif;
+        }
+        .calculator-history {
+            font-size: 12px;
+            color: #666;
+            height: 16px;
+        }
+        .calculator-input {
+            font-size: 24px;
+            font-weight: 500;
+        }
+        .calculator-btn {
+            height: 50px;
+            border: none;
+            border-radius: 4px;
+            font-size: 18px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+        .calculator-btn.number {
+            background-color: #f0f0f0;
+        }
+        .calculator-btn.number:hover {
+            background-color: #e0e0e0;
+        }
+        .calculator-btn.operator {
+            background-color: #e0e0e0;
+        }
+        .calculator-btn.operator:hover {
+            background-color: #d0d0d0;
+        }
+        .calculator-btn.equals {
+            background-color: #4CAF50;
+            color: white;
+        }
+        .calculator-btn.equals:hover {
+            background-color: #45a049;
+        }
+        .calculator-btn.clear {
+            background-color: #f44336;
+            color: white;
+        }
+        .calculator-btn.clear:hover {
+            background-color: #d32f2f;
+        }
+        /* Notepad styles */
+        .notepad-textarea {
+            width: 100%;
+            height: 100%;
+            background-color: transparent;
+            border: none;
+            resize: none;
+            color: white;
+            font-family: 'Segoe UI', sans-serif;
+            font-size: 14px;
+            line-height: 1.5;
+            padding: 8px;
+        }
+        .notepad-textarea:focus {
+            outline: none;
+        }
+        /* Paint styles */
+        .paint-tools {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 12px;
+        }
+        .paint-tool {
+            width: 32px;
+            height: 32px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: rgba(255, 255, 255, 0.1);
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        .paint-tool.active {
+            background-color: rgba(255, 255, 255, 0.2);
+        }
+        .paint-tool i {
+            color: white;
+            font-size: 16px;
+        }
+        .paint-colors {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 12px;
+            flex-wrap: wrap;
+        }
+        .paint-color {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            cursor: pointer;
+            border: 2px solid transparent;
+        }
+        .paint-color.active {
+            border-color: white;
+        }
+        .paint-canvas-container {
+            flex: 1;
+            overflow: auto;
+        }
+        .paint-canvas {
+            background-color: white;
+            cursor: crosshair;
+        }
+        /* Desktop icons */
+        .desktop-icons {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        .desktop-icon {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 80px;
+            cursor: pointer;
+        }
+        .desktop-icon i {
+            font-size: 32px;
+            color: white;
+            margin-bottom: 8px;
+        }
+        .desktop-icon span {
+            color: white;
+            font-size: 12px;
+            text-align: center;
+            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+        }
+        /* Draggable window functionality */
+        .draggable {
+            position: absolute;
+            z-index: 100;
+        }
+        /* Right-click context menu */
+        .context-menu {
+            position: absolute;
+            background-color: rgba(32, 32, 32, 0.9);
+            border-radius: 6px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            padding: 8px 0;
+            display: none;
+            z-index: 1002;
+        }
+        .context-menu-item {
+            padding: 8px 16px;
+            color: white;
+            font-size: 12px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+        }
+        .context-menu-item:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        .context-menu-item i {
+            margin-right: 8px;
+            font-size: 14px;
+        }
+        .context-menu-separator {
+            height: 1px;
+            background-color: rgba(255, 255, 255, 0.1);
+            margin: 4px 0;
+        }
+    </style>
+</head>
+<body>
+    <!-- Desktop Icons -->
+    <div class="desktop-icons">
+        <div class="desktop-icon" onclick="openApp('minesweeper')">
+            <i class="fas fa-bomb"></i>
+            <span>Minesweeper</span>
+        </div>
+        <div class="desktop-icon" onclick="openApp('calculator')">
+            <i class="fas fa-calculator"></i>
+            <span>Calculator</span>
+        </div>
+        <div class="desktop-icon" onclick="openApp('notepad')">
+            <i class="fas fa-file-alt"></i>
+            <span>Notepad</span>
+        </div>
+        <div class="desktop-icon" onclick="openApp('paint')">
+            <i class="fas fa-paint-brush"></i>
+            <span>Paint</span>
+        </div>
+    </div>
+    <!-- Windows -->
+    <div id="minesweeper-window" class="window" style="width: 350px; height: 400px; top: 100px; left: 100px;">
+        <div class="window-header">
+            <div class="window-title">Minesweeper</div>
+            <div class="window-controls">
+                <button class="window-btn minimize-btn" onclick="minimizeWindow('minesweeper')"></button>
+                <button class="window-btn maximize-btn" onclick="maximizeWindow('minesweeper')"></button>
+                <button class="window-btn close-btn" onclick="closeWindow('minesweeper')"></button>
+            </div>
+        </div>
+        <div class="window-content">
+            <div class="minesweeper-board" id="minesweeper-board"></div>
+        </div>
+    </div>
+    <div id="calculator-window" class="window" style="width: 280px; height: 400px; top: 150px; left: 500px;">
+        <div class="window-header">
+            <div class="window-title">Calculator</div>
+            <div class="window-controls">
+                <button class="window-btn minimize-btn" onclick="minimizeWindow('calculator')"></button>
+                <button class="window-btn maximize-btn" onclick="maximizeWindow('calculator')"></button>
+                <button class="window-btn close-btn" onclick="closeWindow('calculator')"></button>
+            </div>
+        </div>
+        <div class="window-content">
+            <div class="calculator">
+                <div class="calculator-display">
+                    <div class="calculator-history" id="calc-history"></div>
+                    <div class="calculator-input" id="calc-input">0</div>
+                </div>
+                <button class="calculator-btn clear" onclick="clearCalculator()">C</button>
+                <button class="calculator-btn operator" onclick="appendToCalc('(')">(</button>
+                <button class="calculator-btn operator" onclick="appendToCalc(')')">)</button>
+                <button class="calculator-btn operator" onclick="appendToCalc('/')">/</button>
+                <button class="calculator-btn number" onclick="appendToCalc('7')">7</button>
+                <button class="calculator-btn number" onclick="appendToCalc('8')">8</button>
+                <button class="calculator-btn number" onclick="appendToCalc('9')">9</button>
+                <button class="calculator-btn operator" onclick="appendToCalc('*')">×</button>
+                <button class="calculator-btn number" onclick="appendToCalc('4')">4</button>
+                <button class="calculator-btn number" onclick="appendToCalc('5')">5</button>
+                <button class="calculator-btn number" onclick="appendToCalc('6')">6</button>
+                <button class="calculator-btn operator" onclick="appendToCalc('-')">-</button>
+                <button class="calculator-btn number" onclick="appendToCalc('1')">1</button>
+                <button class="calculator-btn number" onclick="appendToCalc('2')">2</button>
+                <button class="calculator-btn number" onclick="appendToCalc('3')">3</button>
+                <button class="calculator-btn operator" onclick="appendToCalc('+')">+</button>
+                <button class="calculator-btn number" onclick="appendToCalc('0')">0</button>
+                <button class="calculator-btn number" onclick="appendToCalc('.')">.</button>
+                <button class="calculator-btn equals" onclick="calculate()">=</button>
+            </div>
+        </div>
+    </div>
+    <div id="notepad-window" class="window" style="width: 500px; height: 400px; top: 200px; left: 300px;">
+        <div class="window-header">
+            <div class="window-title">Notepad</div>
+            <div class="window-controls">
+                <button class="window-btn minimize-btn" onclick="minimizeWindow('notepad')"></button>
+                <button class="window-btn maximize-btn" onclick="maximizeWindow('notepad')"></button>
+                <button class="window-btn close-btn" onclick="closeWindow('notepad')"></button>
+            </div>
+        </div>
+        <div class="window-content">
+            <textarea class="notepad-textarea" id="notepad-text" placeholder="Start typing here..."></textarea>
+        </div>
+    </div>
+    <div id="paint-window" class="window" style="width: 600px; height: 500px; top: 100px; left: 200px;">
+        <div class="window-header">
+            <div class="window-title">Paint</div>
+            <div class="window-controls">
+                <button class="window-btn minimize-btn" onclick="minimizeWindow('paint')"></button>
+                <button class="window-btn maximize-btn" onclick="maximizeWindow('paint')"></button>
+                <button class="window-btn close-btn" onclick="closeWindow('paint')"></button>
+            </div>
+        </div>
+        <div class="window-content" style="display: flex; flex-direction: column;">
+            <div class="paint-tools">
+                <div class="paint-tool active" data-tool="pencil" onclick="setPaintTool('pencil')">
+                    <i class="fas fa-pencil-alt"></i>
+                </div>
+                <div class="paint-tool" data-tool="eraser" onclick="setPaintTool('eraser')">
+                    <i class="fas fa-eraser"></i>
+                </div>
+                <div class="paint-tool" data-tool="fill" onclick="setPaintTool('fill')">
+                    <i class="fas fa-fill-drip"></i>
+                </div>
+                <div class="paint-tool" data-tool="line" onclick="setPaintTool('line')">
+                    <i class="fas fa-minus"></i>
+                </div>
+                <div class="paint-tool" data-tool="rectangle" onclick="setPaintTool('rectangle')">
+                    <i class="far fa-square"></i>
+                </div>
+                <div class="paint-tool" data-tool="circle" onclick="setPaintTool('circle')">
+                    <i class="far fa-circle"></i>
+                </div>
+            </div>
+            <div class="paint-colors">
+                <div class="paint-color active" style="background-color: #000000;" data-color="#000000" onclick="setPaintColor('#000000')"></div>
+                <div class="paint-color" style="background-color: #ffffff;" data-color="#ffffff" onclick="setPaintColor('#ffffff')"></div>
+                <div class="paint-color" style="background-color: #ff0000;" data-color="#ff0000" onclick="setPaintColor('#ff0000')"></div>
+                <div class="paint-color" style="background-color: #00ff00;" data-color="#00ff00" onclick="setPaintColor('#00ff00')"></div>
+                <div class="paint-color" style="background-color: #0000ff;" data-color="#0000ff" onclick="setPaintColor('#0000ff')"></div>
+                <div class="paint-color" style="background-color: #ffff00;" data-color="#ffff00" onclick="setPaintColor('#ffff00')"></div>
+                <div class="paint-color" style="background-color: #00ffff;" data-color="#00ffff" onclick="setPaintColor('#00ffff')"></div>
+                <div class="paint-color" style="background-color: #ff00ff;" data-color="#ff00ff" onclick="setPaintColor('#ff00ff')"></div>
+                <div class="paint-color" style="background-color: #c0c0c0;" data-color="#c0c0c0" onclick="setPaintColor('#c0c0c0')"></div>
+                <div class="paint-color" style="background-color: #808080;" data-color="#808080" onclick="setPaintColor('#808080')"></div>
+                <div class="paint-color" style="background-color: #800000;" data-color="#800000" onclick="setPaintColor('#800000')"></div>
+                <div class="paint-color" style="background-color: #808000;" data-color="#808000" onclick="setPaintColor('#808000')"></div>
+                <div class="paint-color" style="background-color: #008000;" data-color="#008000" onclick="setPaintColor('#008000')"></div>
+                <div class="paint-color" style="background-color: #800080;" data-color="#800080" onclick="setPaintColor('#800080')"></div>
+                <div class="paint-color" style="background-color: #008080;" data-color="#008080" onclick="setPaintColor('#008080')"></div>
+                <div class="paint-color" style="background-color: #000080;" data-color="#000080" onclick="setPaintColor('#000080')"></div>
+            </div>
+            <div class="paint-canvas-container">
+                <canvas id="paint-canvas" width="580" height="380"></canvas>
+            </div>
+        </div>
+    </div>
+    <!-- Taskbar -->
+    <div class="taskbar">
+        <div class="taskbar-icons">
+            <div class="taskbar-icon" onclick="toggleStartMenu()">
+                <i class="fab fa-windows"></i>
+            </div>
+            <div class="taskbar-icon" onclick="openApp('minesweeper')">
+                <i class="fas fa-bomb"></i>
+            </div>
+            <div class="taskbar-icon" onclick="openApp('calculator')">
+                <i class="fas fa-calculator"></i>
+            </div>
+            <div class="taskbar-icon" onclick="openApp('notepad')">
+                <i class="fas fa-file-alt"></i>
+            </div>
+            <div class="taskbar-icon" onclick="openApp('paint')">
+                <i class="fas fa-paint-brush"></i>
+            </div>
+        </div>
+        <button class="start-button" onclick="toggleStartMenu()">
+            <i class="fab fa-windows"></i>
+        </button>
+        <div class="taskbar-icons" style="left: auto; right: 12px;">
+            <div class="taskbar-icon" onclick="toggleUserMenu()">
+                <i class="fas fa-user"></i>
+            </div>
+        </div>
+    </div>
+    <!-- Start Menu -->
+    <div class="start-menu" id="start-menu">
+        <div class="search-bar">
+            <input type="text" class="search-input" placeholder="Type here to search">
+        </div>
+        <div class="pinned-apps">
+            <div class="app-grid">
+                <div class="app-icon" onclick="openApp('minesweeper')">
+                    <i class="fas fa-bomb"></i>
+                    <span>Minesweeper</span>
+                </div>
+                <div class="app-icon" onclick="openApp('calculator')">
+                    <i class="fas fa-calculator"></i>
+                    <span>Calculator</span>
+                </div>
+                <div class="app-icon" onclick="openApp('notepad')">
+                    <i class="fas fa-file-alt"></i>
+                    <span>Notepad</span>
+                </div>
+                <div class="app-icon" onclick="openApp('paint')">
+                    <i class="fas fa-paint-brush"></i>
+                    <span>Paint</span>
+                </div>
+                <div class="app-icon">
+                    <i class="fas fa-globe"></i>
+                    <span>Browser</span>
+                </div>
+                <div class="app-icon">
+                    <i class="fas fa-envelope"></i>
+                    <span>Mail</span>
+                </div>
+                <div class="app-icon">
+                    <i class="fas fa-music"></i>
+                    <span>Music</span>
+                </div>
+                <div class="app-icon">
+                    <i class="fas fa-photo-video"></i>
+                    <span>Photos</span>
+                </div>
+                <div class="app-icon">
+                    <i class="fas fa-cog"></i>
+                    <span>Settings</span>
+                </div>
+                <div class="app-icon">
+                    <i class="fas fa-store"></i>
+                    <span>Store</span>
+                </div>
+                <div class="app-icon">
+                    <i class="fas fa-file-word"></i>
+                    <span>Word</span>
+                </div>
+                <div class="app-icon">
+                    <i class="fas fa-file-excel"></i>
+                    <span>Excel</span>
+                </div>
+            </div>
+        </div>
+        <div class="recommended">
+            <div class="recommended-title">Recommended</div>
+            <div class="recommended-list">
+                <div class="recommended-item" onclick="openApp('notepad')">
+                    <i class="fas fa-file-alt"></i>
+                    <span>Notepad</span>
+                </div>
+                <div class="recommended-item" onclick="openApp('calculator')">
+                    <i class="fas fa-calculator"></i>
+                    <span>Calculator</span>
+                </div>
+                <div class="recommended-item" onclick="openApp('paint')">
+                    <i class="fas fa-paint-brush"></i>
+                    <span>Paint</span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- User Menu -->
+    <div class="user-menu" id="user-menu">
+        <div class="user-profile">
+            <div class="user-avatar">U</div>
+            <div class="user-info">
+                <div class="user-name">User</div>
+                <div class="user-email">user@example.com</div>
+            </div>
+        </div>
+        <div class="user-options">
+            <div class="user-option">
+                <i class="fas fa-user"></i>
+                <span>Account settings</span>
+            </div>
+            <div class="user-option">
+                <i class="fas fa-lock"></i>
+                <span>Lock</span>
+            </div>
+            <div class="user-option">
+                <i class="fas fa-sign-out-alt"></i>
+                <span>Sign out</span>
+            </div>
+        </div>
+        <div class="power-options">
+            <div class="user-option">
+                <i class="fas fa-power-off"></i>
+                <span>Shut down</span>
+            </div>
+            <div class="user-option">
+                <i class="fas fa-sync-alt"></i>
+                <span>Restart</span>
+            </div>
+        </div>
+    </div>
+    <!-- Context Menu -->
+    <div class="context-menu" id="context-menu">
+        <div class="context-menu-item" onclick="openApp('minesweeper')">
+            <i class="fas fa-bomb"></i>
+            <span>Open Minesweeper</span>
+        </div>
+        <div class="context-menu-item" onclick="openApp('calculator')">
+            <i class="fas fa-calculator"></i>
+            <span>Open Calculator</span>
+        </div>
+        <div class="context-menu-item" onclick="openApp('notepad')">
+            <i class="fas fa-file-alt"></i>
+            <span>Open Notepad</span>
+        </div>
+        <div class="context-menu-item" onclick="openApp('paint')">
+            <i class="fas fa-paint-brush"></i>
+            <span>Open Paint</span>
+        </div>
+        <div class="context-menu-separator"></div>
+        <div class="context-menu-item">
+            <i class="fas fa-cog"></i>
+            <span>Display settings</span>
+        </div>
+        <div class="context-menu-item">
+            <i class="fas fa-desktop"></i>
+            <span>Personalize</span>
+        </div>
+        <div class="context-menu-separator"></div>
+        <div class="context-menu-item">
+            <i class="fas fa-redo"></i>
+            <span>Refresh</span>
+        </div>
+    </div>
+    <script>
+        // Global variables
+        let activeWindows = [];
+        let minimizedWindows = [];
+        let currentPaintTool = 'pencil';
+        let currentPaintColor = '#000000';
+        let isDrawing = false;
+        let startX, startY;
+        let canvas, ctx;
+        // Initialize the desktop
+        document.addEventListener('DOMContentLoaded', function() {
+            // Initialize Minesweeper
+            initializeMinesweeper();
+            // Initialize Paint
+            canvas = document.getElementById('paint-canvas');
+            ctx = canvas.getContext('2d');
+            ctx.fillStyle = 'white';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            ctx.lineWidth = 2;
+            ctx.strokeStyle = currentPaintColor;
+            ctx.fillStyle = currentPaintColor;
+            // Set up event listeners for paint canvas
+            setupPaintCanvas();
+            // Context menu
+            document.addEventListener('contextmenu', function(e) {
+                e.preventDefault();
+                const contextMenu = document.getElementById('context-menu');
+                contextMenu.style.display = 'block';
+                contextMenu.style.left = `${e.clientX}px`;
+                contextMenu.style.top = `${e.clientY}px`;
+            });
+            document.addEventListener('click', function() {
+                document.getElementById('context-menu').style.display = 'none';
+            });
+        });
+        // Window management functions
+        function openApp(appName) {
+            const window = document.getElementById(`${appName}-window`);
+            window.style.display = 'flex';
+            // Bring to front
+            bringToFront(window);
+            // Add to active windows if not already there
+            if (!activeWindows.includes(appName)) {
+                activeWindows.push(appName);
+            }
+            // Remove from minimized windows if it was minimized
+            minimizedWindows = minimizedWindows.filter(w => w !== appName);
+            // Close start menu if open
+            document.getElementById('start-menu').style.display = 'none';
+        }
+        function closeWindow(appName) {
+            const window = document.getElementById(`${appName}-window`);
+            window.style.display = 'none';
+            activeWindows = activeWindows.filter(w => w !== appName);
+            minimizedWindows = minimizedWindows.filter(w => w !== appName);
+        }
+        function minimizeWindow(appName) {
+            const window = document.getElementById(`${appName}-window`);
+            window.style.display = 'none';
+            if (!minimizedWindows.includes(appName)) {
+                minimizedWindows.push(appName);
+            }
+        }
+        function maximizeWindow(appName) {
+            const window = document.getElementById(`${appName}-window`);
+            if (window.style.width === '100%' && window.style.height === '100%') {
+                // Restore
+                window.style.width = window.dataset.prevWidth;
+                window.style.height = window.dataset.prevHeight;
+                window.style.top = window.dataset.prevTop;
+                window.style.left = window.dataset.prevLeft;
+            } else {
+                // Maximize
+                window.dataset.prevWidth = window.style.width;
+                window.dataset.prevHeight = window.style.height;
+                window.dataset.prevTop = window.style.top;
+                window.dataset.prevLeft = window.style.left;
+                window.style.width = '100%';
+                window.style.height = '100%';
+                window.style.top = '0';
+                window.style.left = '0';
+            }
+            bringToFront(window);
+        }
+        function bringToFront(element) {
+            // Reset z-index for all windows
+            document.querySelectorAll('.window').forEach(w => {
+                w.style.zIndex = '100';
+            });
+            // Bring this window to front
+            element.style.zIndex = '200';
+        }
+        // Start menu functions
+        function toggleStartMenu() {
+            const startMenu = document.getElementById('start-menu');
+            if (startMenu.style.display === 'flex') {
+                startMenu.style.display = 'none';
+            } else {
+                startMenu.style.display = 'flex';
+                // Close user menu if open
+                document.getElementById('user-menu').style.display = 'none';
+            }
+        }
+        // User menu functions
+        function toggleUserMenu() {
+            const userMenu = document.getElementById('user-menu');
+            if (userMenu.style.display === 'flex') {
+                userMenu.style.display = 'none';
+            } else {
+                userMenu.style.display = 'flex';
+                // Close start menu if open
+                document.getElementById('start-menu').style.display = 'none';
+            }
+        }
+        // Minesweeper game logic
+        function initializeMinesweeper() {
+            const board = document.getElementById('minesweeper-board');
+            board.innerHTML = '';
+            const size = 10;
+            const mines = 15;
+            // Create board
+            for (let i = 0; i < size; i++) {
+                for (let j = 0; j < size; j++) {
+                    const cell = document.createElement('div');
+                    cell.className = 'minesweeper-cell';
+                    cell.dataset.row = i;
+                    cell.dataset.col = j;
+                    cell.addEventListener('click', () => revealCell(i, j));
+                    cell.addEventListener('contextmenu', (e) => {
+                        e.preventDefault();
+                        flagCell(i, j);
+                    });
+                    board.appendChild(cell);
+                }
+            }
+            // Place mines randomly
+            const cells = Array.from(board.children);
+            for (let i = 0; i < mines; i++) {
+                const randomIndex = Math.floor(Math.random() * cells.length);
+                if (!cells[randomIndex].classList.contains('mine')) {
+                    cells[randomIndex].classList.add('mine');
+                } else {
+                    i--; // Try again if we hit a cell that's already a mine
+                }
+            }
+        }
+        function revealCell(row, col) {
+            const board = document.getElementById('minesweeper-board');
+            const cell = board.querySelector(`[data-row="${row}"][data-col="${col}"]`);
+            if (cell.classList.contains('revealed') || cell.classList.contains('flagged')) {
+                return;
+            }
+            cell.classList.add('revealed');
+            if (cell.classList.contains('mine')) {
+                cell.innerHTML = '💣';
+                alert('Game Over! You hit a mine.');
+                initializeMinesweeper();
+                return;
+            }
+            // Count adjacent mines
+            const size = 10;
+            let count = 0;
+            for (let i = Math.max(0, row - 1); i <= Math.min(size - 1, row + 1); i++) {
+                for (let j = Math.max(0, col - 1); j <= Math.min(size - 1, col + 1); j++) {
+                    if (i === row && j === col) continue;
+                    const adjacentCell = board.querySelector(`[data-row="${i}"][data-col="${j}"]`);
+                    if (adjacentCell.classList.contains('mine')) {
+                        count++;
+                    }
+                }
+            }
+            if (count > 0) {
+                cell.textContent = count;
+                // Different colors for different numbers
+                const colors = ['', 'blue', 'green', 'red', 'darkblue', 'brown', 'teal', 'black', 'gray'];
+                cell.style.color = colors[count];
+            } else {
+                // If no adjacent mines, reveal all adjacent cells
+                for (let i = Math.max(0, row - 1); i <= Math.min(size - 1, row + 1); i++) {
+                    for (let j = Math.max(0, col - 1); j <= Math.min(size - 1, col + 1); j++) {
+                        if (i === row && j === col) continue;
+                        revealCell(i, j);
+                    }
+                }
+            }
+            // Check for win
+            checkWin();
+        }
+        function flagCell(row, col) {
+            const board = document.getElementById('minesweeper-board');
+            const cell = board.querySelector(`[data-row="${row}"][data-col="${col}"]`);
+            if (cell.classList.contains('revealed')) {
+                return;
+            }
+            if (cell.classList.contains('flagged')) {
+                cell.classList.remove('flagged');
+                cell.innerHTML = '';
+            } else {
+                cell.classList.add('flagged');
+                cell.innerHTML = '🚩';
+            }
+        }
+        function checkWin() {
+            const board = document.getElementById('minesweeper-board');
+            const cells = Array.from(board.children);
+            const mines = cells.filter(cell => cell.classList.contains('mine'));
+            const revealed = cells.filter(cell => cell.classList.contains('revealed'));
+            // All non-mine cells revealed
+            if (revealed.length === cells.length - mines.length) {
+                alert('Congratulations! You won!');
+                initializeMinesweeper();
+            }
+        }
+        // Calculator functions
+        let calcInput = '0';
+        let calcHistory = '';
+        function appendToCalc(value) {
+            if (calcInput === '0' && value !== '.') {
+                calcInput = value;
+            } else {
+                calcInput += value;
+            }
+            updateCalcDisplay();
+        }
+        function clearCalculator() {
+            calcInput = '0';
+            calcHistory = '';
+            updateCalcDisplay();
+        }
+        function calculate() {
+            try {
+                calcHistory = calcInput + ' =';
+                calcInput = eval(calcInput).toString();
+                updateCalcDisplay();
+            } catch (e) {
+                calcInput = 'Error';
+                updateCalcDisplay();
+            }
+        }
+        function updateCalcDisplay() {
+            document.getElementById('calc-input').textContent = calcInput;
+            document.getElementById('calc-history').textContent = calcHistory;
+        }
+        // Paint functions
+        function setupPaintCanvas() {
+            canvas.addEventListener('mousedown', startDrawing);
+            canvas.addEventListener('mousemove', draw);
+            canvas.addEventListener('mouseup', stopDrawing);
+            canvas.addEventListener('mouseout', stopDrawing);
+        }
+        function setPaintTool(tool) {
+            currentPaintTool = tool;
+            document.querySelectorAll('.paint-tool').forEach(t => {
+                t.classList.remove('active');
+            });
+            document.querySelector(`.paint-tool[data-tool="${tool}"]`).classList.add('active');
+        }
+        function setPaintColor(color) {
+            currentPaintColor = color;
+            ctx.strokeStyle = color;
+            ctx.fillStyle = color;
+            document.querySelectorAll('.paint-color').forEach(c => {
+                c.classList.remove('active');
+            });
+            document.querySelector(`.paint-color[data-color="${color}"]`).classList.add('active');
+        }
+        function startDrawing(e) {
+            isDrawing = true;
+            startX = e.offsetX;
+            startY = e.offsetY;
+            if (currentPaintTool === 'pencil') {
+                ctx.beginPath();
+                ctx.moveTo(startX, startY);
+            }
+        }
+        function draw(e) {
+            if (!isDrawing) return;
+            const x = e.offsetX;
+            const y = e.offsetY;
+            switch (currentPaintTool) {
+                case 'pencil':
+                    ctx.lineTo(x, y);
+                    ctx.stroke();
+                    break;
+                case 'eraser':
+                    ctx.save();
+                    ctx.strokeStyle = 'white';
+                    ctx.lineWidth = 10;
+                    ctx.beginPath();
+                    ctx.moveTo(startX, startY);
+                    ctx.lineTo(x, y);
+                    ctx.stroke();
+                    ctx.restore();
+                    startX = x;
+                    startY = y;
+                    break;
+                case 'line':
+                    // Redraw the canvas to remove previous line preview
+                    redrawCanvas();
+                    ctx.beginPath();
+                    ctx.moveTo(startX, startY);
+                    ctx.lineTo(x, y);
+                    ctx.stroke();
+                    break;
+                case 'rectangle':
+                    redrawCanvas();
+                    ctx.strokeRect(startX, startY, x - startX, y - startY);
+                    break;
+                case 'circle':
+                    redrawCanvas();
+                    const radius = Math.sqrt(Math.pow(x - startX, 2) + Math.pow(y - startY, 2));
+                    ctx.beginPath();
+                    ctx.arc(startX, startY, radius, 0, Math.PI * 2);
+                    ctx.stroke();
+                    break;
+                case 'fill':
+                    // Flood fill would be complex to implement, so we'll just do a simple fill
+                    ctx.fillRect(0, 0, canvas.width, canvas.height);
+                    break;
+            }
+        }
+        function stopDrawing(e) {
+            if (!isDrawing) return;
+            isDrawing = false;
+            if (currentPaintTool === 'line' || currentPaintTool === 'rectangle' || currentPaintTool === 'circle') {
+                // Finalize the shape
+                const x = e.offsetX;
+                const y = e.offsetY;
+                redrawCanvas();
+                switch (currentPaintTool) {
+                    case 'line':
+                        ctx.beginPath();
+                        ctx.moveTo(startX, startY);
+                        ctx.lineTo(x, y);
+                        ctx.stroke();
+                        break;
+                    case 'rectangle':
+                        ctx.strokeRect(startX, startY, x - startX, y - startY);
+                        break;
+                    case 'circle':
+                        const radius = Math.sqrt(Math.pow(x - startX, 2) + Math.pow(y - startY, 2));
+                        ctx.beginPath();
+                        ctx.arc(startX, startY, radius, 0, Math.PI * 2);
+                        ctx.stroke();
+                        break;
+                }
+            }
+        }
+        function redrawCanvas() {
+            // This would normally save the canvas state, but for simplicity we'll just clear
+            // In a real app, you'd want to implement proper canvas state management
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+        }
+        // Make windows draggable
+        document.querySelectorAll('.window-header').forEach(header => {
+            header.addEventListener('mousedown', function(e) {
+                if (e.target.classList.contains('window-btn')) return;
+                const window = this.parentElement;
+                bringToFront(window);
+                let offsetX = e.clientX - window.getBoundingClientRect().left;
+                let offsetY = e.clientY - window.getBoundingClientRect().top;
+                function moveWindow(e) {
+                    window.style.left = `${e.clientX - offsetX}px`;
+                    window.style.top = `${e.clientY - offsetY}px`;
+                }
+                function stopMoving() {
+                    document.removeEventListener('mousemove', moveWindow);
+                    document.removeEventListener('mouseup', stopMoving);
+                }
+                document.addEventListener('mousemove', moveWindow);
+                document.addEventListener('mouseup', stopMoving);
+            });
+        });
+    </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 <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=hellork/windows-in-the-browser" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

File without changes