Spaces:
Running
Running
| <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">[email protected]</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> |