<html><head><base href="." target="_top"></base>
<meta charset="utf-8">
<title>RetroType</title>
<style>
:root {
  --background-color: #FFFFFF;  /* Changed from #ECE9D8 to white */
  --text-color: #000000;
  --window-background: linear-gradient(180deg, #0058EE 0%, #3081ED 4%, #2687ED 8%, #0058EE 92%, #003CE7 100%);
  --toolbar-background: #F0F0F0;
  --toolbar-border: #999;
  --statusbar-background: #F0F0F0;
  --highlight-color: #0058EE;
}

body {
  background: var(--background-color);
}

.titlebar {
  background: var(--window-background);
  color: white;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

.window-controls {
  display: flex;
  gap: 2px;
}

.window-button {
  width: 21px;
  height: 21px;
  border: 1px solid #fff;
  background: linear-gradient(180deg, #F7F7F7 0%, #E3E3E3 50%, #C6C6C6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: 'Tahoma', sans-serif;
}

.toolbar {
  background: var(--toolbar-background);
  border-bottom: 1px solid var(--toolbar-border);
  padding: 4px;
  display: flex;
  gap: 10px;
  font-size: 11px;
  font-family: 'Tahoma', sans-serif;  /* Classic Windows font */
}

.toolbar-button {
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}

.toolbar-button:hover {
  border: 1px solid var(--highlight-color);
  background: #E3E3E3;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--toolbar-background);
  border: 1px solid var(--toolbar-border);
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
  z-index: 1000;
  min-width: 150px;
}

.dropdown.show {
  display: block;
}

.dropdown-item {
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.dropdown-item:before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.dropdown-item:hover:before {
  left: 100%;
}

.formatting-bar {
  background: var(--toolbar-background);
  border-bottom: 1px solid var(--toolbar-border);
  padding: 4px;
  display: flex;
  gap: 5px;
  font-size: 11px;
  font-family: 'Tahoma', sans-serif;  /* Classic Windows font */
}

.format-button {
  padding: 2px 8px;
  border: 1px solid var(--toolbar-border);
  border-radius: 3px;
  cursor: pointer;
  background: var(--toolbar-background);
}

.editor {
  background: white;
  min-height: calc(100vh - 120px);
  padding: 40px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
  transition: all 0.5s ease;
}

.editor-content {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  min-height: 1000px;
  outline: none;
  border: none;
  font-size: 12px;
  line-height: 1.5;
  resize: none;
  background: #FFFFFF; /* Changed from #FFFFF0 to white */
  color: var(--text-color);
}

.statusbar {
  background: var(--statusbar-background);
  border-top: 1px solid var(--toolbar-border);
  padding: 4px 10px;
  font-size: 11px;
  color: #666;
}

.themes-dropdown {
  max-height: 500px; /* Increased height to accommodate more themes */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--toolbar-border) var(--toolbar-background);
}

.themes-dropdown::-webkit-scrollbar {
  width: 8px;
}

.themes-dropdown::-webkit-scrollbar-track {
  background: var(--toolbar-background);
}

.themes-dropdown::-webkit-scrollbar-thumb {
  background-color: var(--toolbar-border);
  border-radius: 4px;
}

.maintenance-mode {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white; /* Changed from the gradient to white */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  font-family: 'Tahoma', sans-serif;
  color: #333; /* Changed text color to dark gray for better contrast on white */
}

.maintenance-window {
  background: var(--window-background);
  border: 1px solid #ccc; /* Lighter border for white background */
  border-radius: 8px;
  padding: 20px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 0 20px rgba(0,0,0,0.1); /* Lighter shadow for white background */
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.maintenance-title {
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  color: white; /* Add this */
}

.maintenance-message {
  text-align: center;
  line-height: 1.6;
  margin-bottom: 20px;
  color: white; /* Add this */
}

.maintenance-heart {
  color: #ff6b6b;
  font-size: 24px;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.maintenance-signature {
  font-style: italic;
  text-align: right;
  margin-top: 20px;
  font-size: 14px;
  color: white; /* Add this */
}
</style>
</head>
<body>
<div class="titlebar">
  <div class="title-text">Untitled - RetroType</div>
  <div class="window-controls">
    <div class="window-button minimize">_</div>
    <div class="window-button maximize">□</div>
    <div class="window-button close">×</div>
  </div>
</div>

<div class="toolbar">
  <div class="toolbar-button" id="file">File
    <div class="dropdown">
      <div class="dropdown-item">New</div>
      <div class="dropdown-item">Open...</div>
      <div class="dropdown-item">Save</div>
      <div class="dropdown-item">Save As...</div>
      <div class="dropdown-item">Exit</div>
    </div>
  </div>
  <div class="toolbar-button" id="edit">Edit
    <div class="dropdown">
      <div class="dropdown-item">Cut</div>
      <div class="dropdown-item">Copy</div>
      <div class="dropdown-item">Paste</div>
      <div class="dropdown-item">Select All</div>
    </div>
  </div>
  <div class="toolbar-button">View</div>
  <div class="toolbar-button">Insert</div>
  <div class="toolbar-button" id="format">Format
    <div class="dropdown">
      <div class="dropdown-item">Bold</div>
      <div class="dropdown-item">Italic</div>
      <div class="dropdown-item">Underline</div>
    </div>
  </div>
  <div class="toolbar-button" id="theme">Themes
    <div class="dropdown themes-dropdown">
      <div class="dropdown-item" data-theme="classic">Classic XP</div>
      <div class="dropdown-item" data-theme="moonlight">Moonlight</div>
      <div class="dropdown-item" data-theme="sunset">Sunset</div>
      <div class="dropdown-item" data-theme="ocean">Ocean Deep</div>
      <div class="dropdown-item" data-theme="forest">Forest</div>
      <div class="dropdown-item" data-theme="lavender">Lavender Dreams</div>
      <div class="dropdown-item" data-theme="desert">Desert Sand</div>
      <div class="dropdown-item" data-theme="arctic">Arctic Frost</div>
      <div class="dropdown-item" data-theme="cherry">Cherry Blossom</div>
      <div class="dropdown-item" data-theme="emerald">Emerald City</div>
      <div class="dropdown-item" data-theme="galaxy">Galaxy</div>
      <div class="dropdown-item" data-theme="autumn">Autumn</div>
      <div class="dropdown-item" data-theme="spring">Spring Garden</div>
      <div class="dropdown-item" data-theme="cyber">Cyberpunk</div>
      <div class="dropdown-item" data-theme="coffee">Coffee Shop</div>
      <div class="dropdown-item" data-theme="rainforest">Rainforest</div>
      <div class="dropdown-item" data-theme="coral">Coral Reef</div>
      <div class="dropdown-item" data-theme="glacier">Glacier</div>
      <div class="dropdown-item" data-theme="nebula">Nebula</div>
      <div class="dropdown-item" data-theme="aurora">Aurora</div>
      <div class="dropdown-item" data-theme="sepia">Sepia</div>
      <div class="dropdown-item" data-theme="parchment">Parchment</div>
      <div class="dropdown-item" data-theme="neon">Neon</div>
      <div class="dropdown-item" data-theme="midnight">Midnight</div>
      <div class="dropdown-item" data-theme="winter">Winter Frost</div>
      <div class="dropdown-item" data-theme="summer">Summer Sun</div>
    </div>
  </div>
  <div class="toolbar-button">Tools</div>
  <div class="toolbar-button">Help</div>
</div>

<div class="formatting-bar">
  <select class="format-button" id="font-family">
    <option value="'Courier New', monospace">Courier New</option>
    <option value="'Times New Roman', serif">Times New Roman</option>
    <option value="Arial, sans-serif">Arial</option>
    <option value="'Comic Sans MS', cursive">Comic Sans MS</option>
    <option value="'Terminal', monospace">Terminal</option>
  </select>
  <select class="format-button" id="font-size">
    <option value="10">10</option>
    <option value="12" selected>12</option>
    <option value="14">14</option>
    <option value="16">16</option>
    <option value="18">18</option>
  </select>
  <button class="format-button" id="bold">B</button>
  <button class="format-button" id="italic">I</button>
  <button class="format-button" id="underline">U</button>
</div>

<div class="editor">
  <textarea class="editor-content" placeholder="Start typing..."></textarea>
</div>

<div class="statusbar">
  Words: 0 | Characters: 0
</div>

<script>
const editor = document.querySelector('.editor-content');
const statusbar = document.querySelector('.statusbar');
const toolbarButtons = document.querySelectorAll('.toolbar-button');
const dropdowns = document.querySelectorAll('.dropdown');

// Word and character count
editor.addEventListener('input', () => {
  const words = editor.value.trim().split(/\s+/).filter(word => word.length > 0).length;
  const chars = editor.value.length;
  statusbar.textContent = `Words: ${words} | Characters: ${chars}`;
});

// Dropdown functionality
toolbarButtons.forEach(button => {
  button.addEventListener('click', (e) => {
    const dropdown = button.querySelector('.dropdown');
    if (dropdown) {
      dropdowns.forEach(d => {
        if (d !== dropdown) d.classList.remove('show');
      });
      dropdown.classList.toggle('show');
      e.stopPropagation();
    }
  });
});

// Close dropdowns when clicking outside
document.addEventListener('click', () => {
  dropdowns.forEach(dropdown => dropdown.classList.remove('show'));
});

// Font formatting
document.getElementById('font-family').addEventListener('change', (e) => {
  editor.style.fontFamily = e.target.value;
});

document.getElementById('font-size').addEventListener('change', (e) => {
  editor.style.fontSize = `${e.target.value}px`;
});

document.getElementById('bold').addEventListener('click', () => {
  editor.style.fontWeight = editor.style.fontWeight === 'bold' ? 'normal' : 'bold';
});

document.getElementById('italic').addEventListener('click', () => {
  editor.style.fontStyle = editor.style.fontStyle === 'italic' ? 'normal' : 'italic';
});

document.getElementById('underline').addEventListener('click', () => {
  editor.style.textDecoration = editor.style.textDecoration === 'underline' ? 'none' : 'underline';
});

// Window controls functionality
document.querySelector('.minimize').addEventListener('click', () => {
  console.log('Minimize clicked');
});

document.querySelector('.maximize').addEventListener('click', () => {
  document.documentElement.requestFullscreen();
});

document.querySelector('.close').addEventListener('click', () => {
  if(confirm('Are you sure you want to close RetroType?')) {
    window.close();
  }
});

// Dropdown item functionality
document.querySelectorAll('.dropdown-item').forEach(item => {
  item.addEventListener('click', (e) => {
    const action = e.target.textContent;
    switch(action) {
      case 'New':
        if(confirm('Create new document? Unsaved changes will be lost.')) {
          editor.value = '';
        }
        break;
      case 'Save':
        // Create a new jsPDF instance
        const { jsPDF } = window.jspdf;
        const doc = new jsPDF();
        
        // Add the text content to the PDF
        const textLines = editor.value.split('\n');
        let yPosition = 20;
        textLines.forEach(line => {
          if (yPosition > 280) { // Check if we need a new page
            doc.addPage();
            yPosition = 20;
          }
          doc.text(line, 20, yPosition);
          yPosition += 7;
        });
        
        // Save the PDF
        doc.save('document.pdf');
        break;
      case 'Open...':
        const fileInput = document.createElement('input');
        fileInput.type = 'file';
        fileInput.accept = '.txt,.doc,.docx,.pdf';
        fileInput.onchange = function(e) {
          const file = e.target.files[0];
          const reader = new FileReader();
          reader.onload = function(e) {
            editor.value = e.target.result;
          };
          reader.readAsText(file);
        };
        fileInput.click();
        break;
      case 'Copy':
        editor.select();
        document.execCommand('copy');
        break;
      case 'Paste':
        navigator.clipboard.readText().then(text => {
          const start = editor.selectionStart;
          const end = editor.selectionEnd;
          editor.value = editor.value.substring(0, start) + text + editor.value.substring(end);
        });
        break;
      case 'Select All':
        editor.select();
        break;
      default:
        if (e.target.dataset.theme) {
          changeTheme(e.target.dataset.theme);
        }
    }
  });
});

// Theme functionality
const themes = {
    classic: {
      background: '#FFFFFF',
      text: '#000000',
      window: 'linear-gradient(180deg, #0058EE 0%, #3081ED 4%, #2687ED 8%, #0058EE 92%, #003CE7 100%)',
      toolbar: '#F0F0F0',
      border: '#999'
    },
    moonlight: {
      background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)',
      text: '#e6e6e6',
      window: 'linear-gradient(180deg, #0d1b2a 0%, #1b263b 100%)',
      toolbar: '#415a77',
      border: '#778da9'
    },
    sunset: {
      background: 'linear-gradient(135deg, #ff7b00 0%, #ff8800 100%)',
      text: '#ffffff',
      window: 'linear-gradient(180deg, #4a1c40 0%, #7c334d 100%)',
      toolbar: '#a65d57',
      border: '#ff8800'
    },
    ocean: {
      background: 'linear-gradient(135deg, #006994 0%, #2a9d8f 100%)',
      text: '#ffffff',
      window: 'linear-gradient(180deg, #023e8a 0%, #0077b6 100%)',
      toolbar: '#48cae4',
      border: '#90e0ef'
    },
    forest: {
      background: 'linear-gradient(135deg, #1b4332 0%, #2d6a4f 100%)',
      text: '#ffffff',
      window: 'linear-gradient(180deg, #081c15 0%, #1b4332 100%)',
      toolbar: '#40916c',
      border: '#74c69d'
    },
    lavender: {
      background: 'linear-gradient(135deg, #7c4dff 0%, #b388ff 100%)',
      text: '#ffffff',
      window: 'linear-gradient(180deg, #4527a0 0%, #7c4dff 100%)',
      toolbar: '#9575cd',
      border: '#b39ddb'
    },
    desert: {
      background: 'linear-gradient(135deg, #c2b280 0%, #d4ac6e 100%)',
      text: '#32292f',
      window: 'linear-gradient(180deg, #8b7355 0%, #a67f5d 100%)',
      toolbar: '#d4b483',
      border: '#e6ccb2'
    },
    arctic: {
      background: 'linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%)',
      text: '#102a43',
      window: 'linear-gradient(180deg, #90caf9 0%, #64b5f6 100%)',
      toolbar: '#e1f5fe',
      border: '#b3e5fc'
    },
    cherry: {
      background: 'linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%)',
      text: '#880e4f',
      window: 'linear-gradient(180deg, #f06292 0%, #ec407a 100%)',
      toolbar: '#fff0f4',
      border: '#f48fb1'
    },
    emerald: {
      background: 'linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%)',
      text: '#1b5e20',
      window: 'linear-gradient(180deg, #66bb6a 0%, #4caf50 100%)',
      toolbar: '#f1f8e9',
      border: '#a5d6a7'
    },
    galaxy: {
      background: 'linear-gradient(135deg, #1a237e 0%, #311b92 100%)',
      text: '#ffffff',
      window: 'linear-gradient(180deg, #4527a0 0%, #311b92 100%)',
      toolbar: '#5e35b1',
      border: '#7e57c2'
    },
    autumn: {
      background: 'linear-gradient(135deg, #bf360c 0%, #e64a19 100%)',
      text: '#ffffff',
      window: 'linear-gradient(180deg, #d84315 0%, #bf360c 100%)',
      toolbar: '#ff5722',
      border: '#ff8a65'
    },
    spring: {
      background: 'linear-gradient(135deg, #f1f8e9 0%, #dcedc8 100%)',
      text: '#33691e',
      window: 'linear-gradient(180deg, #8bc34a 0%, #7cb342 100%)',
      toolbar: '#f9fbe7',
      border: '#c5e1a5'
    },
    cyber: {
      background: 'linear-gradient(135deg, #000428 0%, #004e92 100%)',
      text: '#00ff00',
      window: 'linear-gradient(180deg, #000428 0%, #004e92 100%)',
      toolbar: '#001f3f',
      border: '#00ff00'
    },
    coffee: {
      background: 'linear-gradient(135deg, #3c2f2f 0%, #7d5a5a 100%)',
      text: '#e6d5d5',
      window: 'linear-gradient(180deg, #2c1810 0%, #5d4037 100%)',
      toolbar: '#8d6e63',
      border: '#bcaaa4'
    },
    winter: {
      background: 'linear-gradient(135deg, #e8eaf6 0%, #c5cae9 100%)',
      text: '#1a237e',
      window: 'linear-gradient(180deg, #3f51b5 0%, #303f9f 100%)',
      toolbar: '#7986cb',
      border: '#9fa8da'
    },
    summer: {
      background: 'linear-gradient(135deg, #fff9c4 0%, #fff176 100%)',
      text: '#f57f17',
      window: 'linear-gradient(180deg, #fdd835 0%, #fbc02d 100%)',
      toolbar: '#ffee58',
      border: '#fff59d'
    }
};

// Update changeTheme function to handle background gradients properly
const changeTheme = (theme) => {
  const selectedTheme = themes[theme] || themes.classic;
  
  // Update CSS variables
  document.documentElement.style.setProperty('--background-color', selectedTheme.background);
  document.documentElement.style.setProperty('--text-color', selectedTheme.text);
  document.documentElement.style.setProperty('--window-background', selectedTheme.window);
  document.documentElement.style.setProperty('--toolbar-background', selectedTheme.toolbar);
  document.documentElement.style.setProperty('--toolbar-border', selectedTheme.border);
  
  // Update body background directly for gradient support
  document.body.style.background = selectedTheme.background;
  
  // Update editor content
  const editorContent = document.querySelector('.editor-content');
  editorContent.style.color = selectedTheme.text;
  
  // Set editor background with slight transparency for better readability
  if (theme === 'classic') {
    editorContent.style.background = '#FFFFFF';
  } else {
    // Create a lighter version of the theme background for the editor
    editorContent.style.background = 'rgba(255, 255, 255, 0.95)';
    editorContent.style.color = '#000000'; // Keep text readable
  }
  
  // Add transition effect
  const editor = document.querySelector('.editor');
  editor.style.transition = 'all 0.5s ease';
  editor.style.transform = 'scale(0.98)';
  setTimeout(() => {
    editor.style.transform = 'scale(1)';
  }, 150);
};

// Make toolbar buttons look pressed when clicked
toolbarButtons.forEach(button => {
  button.addEventListener('mousedown', () => {
    button.style.background = '#D4D0C8';
    button.style.borderTop = '1px solid #808080';
    button.style.borderLeft = '1px solid #808080';
    button.style.borderBottom = '1px solid #FFFFFF';
    button.style.borderRight = '1px solid #FFFFFF';
  });
  
  button.addEventListener('mouseup', () => {
    button.style.background = '';
    button.style.border = '1px solid transparent';
  });
  
  button.addEventListener('mouseleave', () => {
    button.style.background = '';
    button.style.border = '1px solid transparent';
  });
});

// Create and inject maintenance overlay
const maintenanceOverlay = document.createElement('div');
maintenanceOverlay.className = 'maintenance-mode';
maintenanceOverlay.innerHTML = `
  <div class="maintenance-window">
    <div class="maintenance-title">🔧 RetroType is Taking a Break 🔧</div>
    <div class="maintenance-message">
      We're currently performing some maintenance to make RetroType even more awesome!<br><br>
      Don't worry, we'll be back soon with more retro goodness.<br><br>
      <span class="maintenance-heart">❤️</span>
    </div>
    <div class="maintenance-signature">With love,<br>Rockz</div>
  </div>
`;

// Add the maintenance overlay to the body
document.body.appendChild(maintenanceOverlay);

// Disable all existing functionality while in maintenance mode
document.querySelectorAll('.toolbar-button, .format-button, .editor-content').forEach(element => {
  element.style.pointerEvents = 'none';
  element.style.opacity = '0.5';
});
</script>
<!-- Add jsPDF library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</body></html>