<html><head><base href="." target="_top"></base>
<meta charset="utf-8">
<title>RetroType</title>
<style>
:root {
  --background-color: #ECE9D8;
  --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: #FFFFF0;
  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;
}
</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: '#ECE9D8',
      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'
    },

    // Nature Themes
    rainforest: {
      background: 'linear-gradient(135deg, #004d40 0%, #00695c 100%)',
      text: '#e0f2f1',
      window: 'linear-gradient(180deg, #00251a 0%, #004d40 100%)',
      toolbar: '#00796b',
      border: '#4db6ac'
    },
    coral: {
      background: 'linear-gradient(135deg, #ff8a65 0%, #ff5722 100%)',
      text: '#ffffff',
      window: 'linear-gradient(180deg, #d84315 0%, #bf360c 100%)',
      toolbar: '#ff7043',
      border: '#ffab91'
    },
    glacier: {
      background: 'linear-gradient(135deg, #b3e5fc 0%, #81d4fa 100%)',
      text: '#01579b',
      window: 'linear-gradient(180deg, #039be5 0%, #0288d1 100%)',
      toolbar: '#e1f5fe',
      border: '#4fc3f7'
    },

    // Space Themes
    nebula: {
      background: 'linear-gradient(135deg, #311b92 0%, #6a1b9a 100%)',
      text: '#e1bee7',
      window: 'linear-gradient(180deg, #4a148c 0%, #311b92 100%)',
      toolbar: '#7b1fa2',
      border: '#9c27b0'
    },
    aurora: {
      background: 'linear-gradient(135deg, #1a237e 0%, #00695c 100%)',
      text: '#e0f7fa',
      window: 'linear-gradient(180deg, #006064 0%, #004d40 100%)',
      toolbar: '#00796b',
      border: '#26a69a'
    },

    // Vintage Themes
    sepia: {
      background: 'linear-gradient(135deg, #d7ccc8 0%, #bcaaa4 100%)',
      text: '#3e2723',
      window: 'linear-gradient(180deg, #8d6e63 0%, #795548 100%)',
      toolbar: '#a1887f',
      border: '#bcaaa4'
    },
    parchment: {
      background: 'linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%)',
      text: '#bf360c',
      window: 'linear-gradient(180deg, #ff9800 0%, #f57c00 100%)',
      toolbar: '#ffe0b2',
      border: '#ffcc80'
    },

    // Modern Themes
    neon: {
      background: 'linear-gradient(135deg, #202020 0%, #1a1a1a 100%)',
      text: '#00ff00',
      window: 'linear-gradient(180deg, #2c2c2c 0%, #202020 100%)',
      toolbar: '#333333',
      border: '#00ff00'
    },
    midnight: {
      background: 'linear-gradient(135deg, #12005e 0%, #1a237e 100%)',
      text: '#e8eaf6',
      window: 'linear-gradient(180deg, #0d47a1 0%, #1a237e 100%)',
      toolbar: '#283593',
      border: '#3949ab'
    },
    
    // Seasonal Themes
    winter: {
      background: 'linear-gradient(135deg, #eceff1 0%, #cfd8dc 100%)',
      text: '#263238',
      window: 'linear-gradient(180deg, #546e7a 0%, #455a64 100%)',
      toolbar: '#78909c',
      border: '#90a4ae'
    },
    summer: {
      background: 'linear-gradient(135deg, #fff176 0%, #ffd54f 100%)',
      text: '#f57f17',
      window: 'linear-gradient(180deg, #fbc02d 0%, #f9a825 100%)',
      toolbar: '#ffee58',
      border: '#fff176'
    }
};

// Update changeTheme function to also handle editor background
const changeTheme = (theme) => {
  const selectedTheme = themes[theme] || themes.classic;
  
  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 editor content background and text color
  const editorContent = document.querySelector('.editor-content');
  editorContent.style.color = selectedTheme.text;
  editorContent.style.background = selectedTheme.background === '#ECE9D8' ? '#FFFFF0' : 'rgba(255,255,255,0.9)';
  
  // Add subtle animation to editor on theme change
  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';
  });
});
</script>
<!-- Add jsPDF library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</body></html>