<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chromiwin OS</title>
  <style>
    @keyframes gradientAnimation {
      0% {
        background-position: 0% 0%;
      }
      50% {
        background-position: 100% 100%;
      }
      100% {
        background-position: 0% 0%;
      }
    }

    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 100vh;
      background: linear-gradient(-45deg, #ff6b6b, #f7c6c7, #f5f7fa, #d0e1f9);
      background-size: 400% 400%;
      animation: gradientAnimation 15s ease infinite;
    }

    #taskbar {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50px;
      background-color: rgba(32, 33, 36, 0.9);
      color: white;
      display: flex;
      align-items: center;
      padding: 0 10px;
      box-shadow: 0 -2px 5px rgba(0,0,0,0.3);
      justify-content: space-between;
      box-sizing: border-box;
    }

    #taskbar .start-button {
      background-color: #4285f4;
      border: none;
      color: white;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
    }

    #settings-button {
      background-color: #fbbc05;
      border: none;
      color: white;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
    }

    #clock {
      font-size: 14px;
    }

    #app-launcher {
      position: fixed;
      bottom: 60px;
      left: 10px;
      width: 200px;
      background-color: #ffffff;
      border: 1px solid #ccc;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      display: none;
      flex-direction: column;
      padding: 10px;
      box-sizing: border-box;
    }

    #app-launcher .app-icon {
      width: 100%;
      height: 50px;
      margin: 10px 0;
      background-color: #e0e0e0;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    #app-launcher .app-icon:hover {
      background-color: #d0d0d0;
    }

    .window {
      position: absolute;
      width: 80vw;
      height: 80vh;
      max-width: 800px;
      max-height: 600px;
      background-color: #ffffff;
      border: 1px solid #ccc;
      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
      padding: 10px;
      display: none;
      z-index: 1000;
      overflow: hidden;
      box-sizing: border-box;
    }

    .window.dark-mode {
      background-color: #333;
      color: #fff;
    }

    .window h1 {
      font-size: 18px;
      margin: 0;
    }

    .window .close-btn {
      background-color: #f44336;
      color: white;
      border: none;
      padding: 5px 10px;
      border-radius: 3px;
      cursor: pointer;
      float: right;
    }

    .window iframe {
      width: 100%;
      height: calc(100% - 30px);
      border: none;
    }

    .calculator, .notepad, .cmdShell, .debugApp {
      display: flex;
      flex-direction: column;
    }

    .calculator input, .cmdShell input {
      padding: 10px;
      font-size: 20px;
      margin-bottom: 10px;
    }

    .calculator button, .cmdShell button {
      padding: 10px;
      font-size: 18px;
      margin: 5px;
    }

    .notepad textarea, .debugApp textarea {
      width: 100%;
      height: calc(100% - 50px); /* Adjust height to fit the window */
      padding: 10px;
      font-size: 16px;
    }

    #settings-panel {
      position: fixed;
      top: 10px;
      right: 10px;
      width: 250px;
      background-color: #ffffff;
      border: 1px solid #ccc;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      padding: 10px;
      box-sizing: border-box;
      display: none;
    }

    #settings-panel h2 {
      margin-top: 0;
      font-size: 18px;
    }

    #settings-panel label {
      display: block;
      margin-bottom: 10px;
    }

    #settings-panel input[type="radio"] {
      margin-right: 5px;
    }

    .cmdShell {
      display: flex;
      flex-direction: column;
      height: 400px;
    }

    #cmdOutput {
      white-space: pre-wrap;
      font-family: monospace;
      background-color: #000;
      color: #0f0;
      padding: 10px;
      border: 1px solid #0f0;
      height: calc(55% - 30px);
      overflow-y: auto;
    }

    .cmd-input {
      border: none;
      background-color: #000;
      color: #0f0;
      font-family: monospace;
      width: 100%;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div id="taskbar">
    <button class="start-button" onclick="toggleLauncher()">Start</button>
    <button id="settings-button" onclick="toggleSettings()">Settings</button>
    <div id="clock"></div>
  </div>

  <div id="app-launcher">
  <div class="app-icon" onclick="openWindow('browserWindow')">Browser</div>
  <div class="app-icon" onclick="openWindow('calculatorWindow')">Calc</div>
  <div class="app-icon" onclick="openWindow('notepadWindow')">Note</div>
  <div class="app-icon" onclick="openWindow('cmdShellWindow')">Shell</div>
  <div class="app-icon" onclick="openWindow('debugWindow')">Debug</div>
  <div class="app-icon" onclick="openWindow('chatWindow')">Chat</div> <!-- Added Chat App -->
</div>



  <!-- Browser Window -->
  <div id="browserWindow" class="window">
    <button class="close-btn" onclick="closeWindow('browserWindow')">X</button>
    <h1>Browser</h1>
    <iframe src="https://booming-climbing-bulb.glitch.me/" title="Browser Window"></iframe>
  </div>

  <!-- Calculator Window -->
  <div id="calculatorWindow" class="window">
    <button class="close-btn" onclick="closeWindow('calculatorWindow')">X</button>
    <h1>Calculator</h1>
    <div class="calculator">
      <input id="calcDisplay" type="text" disabled />
      <div>
        <button onclick="appendNumber('7')">7</button>
        <button onclick="appendNumber('8')">8</button>
        <button onclick="appendNumber('9')">9</button>
        <button onclick="appendOperator('/')">/</button>
      </div>
      <div>
        <button onclick="appendNumber('4')">4</button>
        <button onclick="appendNumber('5')">5</button>
        <button onclick="appendNumber('6')">6</button>
        <button onclick="appendOperator('*')">*</button>
      </div>
      <div>
        <button onclick="appendNumber('1')">1</button>
        <button onclick="appendNumber('2')">2</button>
        <button onclick="appendNumber('3')">3</button>
        <button onclick="appendOperator('-')">-</button>
      </div>
      <div>
        <button onclick="appendNumber('0')">0</button>
        <button onclick="appendOperator('.')">.</button>
        <button onclick="calculateResult()">=</button>
        <button onclick="appendOperator('+')">+</button>
      </div>
      <button onclick="clearDisplay()">C</button>
    </div>
  </div>

  <!-- Notepad Window -->
  <div id="notepadWindow" class="window">
    <button class="close-btn" onclick="closeWindow('notepadWindow')">X</button>
    <h1>Notepad</h1>
    <div class="notepad">
      <textarea placeholder="Type your notes here..."></textarea>
    </div>
  </div>

  <!-- Chat Application Window -->
  <div id="chatWindow" class="window">
    <button class="close-btn" onclick="closeWindow('chatWindow')">X</button>
    <h1>Chat Application</h1>
    <iframe src="https://organizations.minnit.chat/345861214955844/c/Main?embed&nickname=" style="border:none;width:100%;height:calc(100% - 30px);" allowTransparency="true"></iframe>
  </div>

  <!-- Command Shell Window -->
  <div id="cmdShellWindow" class="window">
    <button class="close-btn" onclick="closeWindow('cmdShellWindow')">X</button>
    <h1>Command Shell</h1>
    <div class="cmdShell">
      <div id="cmdOutput"></div>
      <input id="cmdInput" class="cmd-input" type="text" placeholder="Type a command..." onkeypress="handleCommand(event)" />
    </div>
  </div>



  <!-- Debug Application Window -->
  <div id="debugWindow" class="window">
    <button class="close-btn" onclick="closeWindow('debugWindow')">X</button>
    <h1>Debug Application</h1>
    <div class="debugApp">
      <textarea id="htmlInput" placeholder="Type your HTML code here..."></textarea>
      <button onclick="runHtmlCode()">Run</button>
      <iframe id="htmlOutput" style="border: none; width: 100%; height: 100%;"></iframe>
    </div>
  </div>

  <!-- Settings Panel -->
  <div id="settings-panel">
    <h2>Settings</h2>

    <!-- Time Zone Setting -->
    <label>
      <span>Time Zone:</span>
      <input type="text" id="timezone-input" placeholder="Enter time zone (e.g., 0 for EDT)" />
      <button onclick="updateTimeZone()">Set Time Zone</button>
    </label>

    <!-- Dark Mode Toggle -->
    <label>
      <input type="checkbox" id="dark-mode-toggle" />
      <span>Enable Dark Mode</span>
    </label>

    <!-- Font Family Selector -->
    <label>
      <span>Font Family:</span>
      <select id="font-family-select">
        <option value="Arial, sans-serif">Arial</option>
        <option value="'Courier New', monospace">Courier New</option>
        <option value="'Georgia', serif">Georgia</option>
        <option value="'Times New Roman', serif">Times New Roman</option>
        <option value="'Verdana', sans-serif">Verdana</option>
      </select>
      <button onclick="updateFontFamily()">Set Font</button>
    </label>

    <!-- Background Image Upload -->
    <label>
      <span>Background Image:</span>
      <input type="file" id="background-upload" accept="image/*" />
      <button onclick="updateBackground()">Upload</button>
    </label>
  </div>

  <script>
    let timeZoneOffset = 0; // Default to EDT (UTC-4 hours in minutes)

    function toggleLauncher() {
      const launcher = document.getElementById('app-launcher');
      launcher.style.display = launcher.style.display === 'none' || launcher.style.display === '' ? 'flex' : 'none';
    }

    function toggleSettings() {
      const settingsPanel = document.getElementById('settings-panel');
      settingsPanel.style.display = settingsPanel.style.display === 'none' || settingsPanel.style.display === '' ? 'block' : 'none';
    }

    function openWindow(id) {
      const window = document.getElementById(id);
      window.style.display = 'block';
      window.style.left = Math.floor(Math.random() * (window.innerWidth - window.offsetWidth)) + 'px';
      window.style.top = Math.floor(Math.random() * (window.innerHeight - window.offsetHeight)) + 'px';

      const darkMode = document.getElementById('dark-mode-toggle').checked;
      if (darkMode) {
        window.classList.add('dark-mode');
      } else {
        window.classList.remove('dark-mode');
      }
    }

    function closeWindow(id) {
      document.getElementById(id).style.display = 'none';
    }

    function appendNumber(number) {
      const display = document.getElementById('calcDisplay');
      display.value += number;
    }

    function appendOperator(operator) {
      const display = document.getElementById('calcDisplay');
      display.value += operator;
    }

    function calculateResult() {
      const display = document.getElementById('calcDisplay');
      try {
        display.value = eval(display.value); // Simple calculator functionality
      } catch {
        display.value = 'Error';
      }
    }

    function clearDisplay() {
      const display = document.getElementById('calcDisplay');
      display.value = '';
    }

    function handleCommand(event) {
      if (event.key === 'Enter') {
        const cmdInput = document.getElementById('cmdInput');
        const cmdOutput = document.getElementById('cmdOutput');
        const command = cmdInput.value.trim();
        cmdInput.value = '';

        let output = '';

        // Command handling
        if (command.startsWith('echo ')) {
          output = command.substring(5); // Extract text after "echo "
        } else {
          switch (command) {
            case 'help':
              output = 'Available commands:\n- help: Show this help message\n- systeminfo: Display system information\n- date: Show current date and time\n- joke: Get a programming joke\n- quote: Get an inspirational quote\n- dir: List directory contents\n- cls: Clear the screen\n- echo: Display text\n- diagnostics: Generate random diagnostics information\n- credits: Show creator credits\n';
              break;
            case 'systeminfo':
              output = 'System Information: Browser version: ' + navigator.userAgent;
              break;
            case 'date':
              output = 'Current Date and Time: ' + new Date().toLocaleString();
              break;
            case 'joke':
              const jokes = [
                'Why don\'t programmers like nature? It has too many bugs.',
                'Why do programmers prefer dark mode? Because light attracts bugs!',
                'How many programmers does it take to change a light bulb? None. It\'s a hardware problem.',
                'Why do Java developers wear glasses? Because they don\'t C#.',
                'What do you call a programmer from Finland? Nerdic.'
              ];
              output = jokes[Math.floor(Math.random() * jokes.length)];
              break;
            case 'quote':
              const quotes = [
                '“The only limit to our realization of tomorrow is our doubts of today.” – Franklin D. Roosevelt',
                '“Success is not the key to happiness. Happiness is the key to success. If you love what you are doing, you will be successful.” – Albert Schweitzer',
                '“The best way to predict the future is to invent it.” – Alan Kay',
                '“Do not wait to strike till the iron is hot, but make it hot by striking.” – William Butler Yeats',
                '“It does not matter how slowly you go as long as you do not stop.” – Confucius'
              ];
              output = quotes[Math.floor(Math.random() * quotes.length)];
              break;
            case 'dir':
              output = 'Directory listing:\n- browserWindow.html\n- calculatorWindow.html\n- notepadWindow.html\n- cmdShellWindow.html'; // Example output
              break;
            case '.cls':
              cmdOutput.textContent = '';
              return; // Exit function early since no output is needed
            case 'diagnostics':
              const diagnostics = [
                'CPU Usage: ' + Math.floor(Math.random() * 100) + '%',
                'Memory Usage: ' + Math.floor(Math.random() * 100) + '%',
                'Disk Space: ' + (Math.floor(Math.random() * 1000) + 1) + ' GB free',
                'Network Status: Online',
                'Temperature: ' + (Math.floor(Math.random() * 30) + 20) + '°C'
              ];
              output = 'Diagnostics Report:\n' + diagnostics.join('\n');
              break;
            case 'credits':
              output = 'Credits: This OS was created by PB.';
              break;
            default:
              output = 'Unknown command. Type "help" for a list of commands.';
          }
        }

        cmdOutput.textContent += `\n> ${command}\n${output}`;
        cmdOutput.scrollTop = cmdOutput.scrollHeight; // Scroll to bottom
      }
    }

    function updateTimeZone() {
      const input = document.getElementById('timezone-input').value;
      timeZoneOffset = parseInt(input) * 60; // Convert hours to minutes
    }

    function updateFontFamily() {
      const fontFamily = document.getElementById('font-family-select').value;
      document.body.style.fontFamily = fontFamily;
    }

    function updateBackground() {
      const fileInput = document.getElementById('background-upload');
      const file = fileInput.files[0];
     
      if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
                  document.body.style.backgroundImage = `url(${e.target.result})`;
        };
        reader.readAsDataURL(file);
      }
    }

    function runHtmlCode() {
      const htmlInput = document.getElementById('htmlInput').value;
      const htmlOutput = document.getElementById('htmlOutput');
      htmlOutput.srcdoc = htmlInput;
    }



  function updateClock() {
    const now = new Date();
    const offsetDate = new Date(now.getTime() + timeZoneOffset * 60000);

    const optionsDate = {
      weekday: 'long',
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    };

    const optionsTime = {
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      hour12: false // Use 24-hour format (military time)
    };

    const formattedDate = offsetDate.toLocaleDateString('en-US', optionsDate);
    const formattedTime = offsetDate.toLocaleTimeString('en-US', optionsTime);

    document.getElementById('clock').textContent = `${formattedDate} ${formattedTime}`;
  }

  setInterval(updateClock, 1000); // Update the clock every second
  updateClock(); // Initial call to display time immediately
</script>

</body>
</html>