<html><head><base href="/" />
<meta charset="UTF-8">
<title>Google Docs Clone</title>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
  --blue-500: #4285f4;
  --gray-100: #f1f3f4;
  --gray-200: #e8eaed;
  --gray-700: #5f6368;
  --gray-400: #9aa0a6;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Inconsolata', monospace;
}

body {
  overflow-x: hidden;
}

.header {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--gray-200);
  background: white;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow 0.3s ease;
}

.header.scrolled {
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.doc-title {
  border: none;
  font-size: 20px;
  padding: 8px 12px;
  border-radius: 8px;
  width: 250px;
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.doc-title:hover {
  width: 350px;
}

.toolbar {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-200);
  gap: 24px;
  background: var(--gray-100);
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 8px;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.toolbar-button {
  padding: 10px;
  border-radius: 8px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--gray-700);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  margin: 0 2px;
}

.toolbar-button:hover {
  background: var(--gray-100);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.toolbar-button:active {
  transform: translateY(1px);
}

.toolbar-button::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.toolbar-button:hover::after {
  opacity: 1;
  visibility: visible;
}

.content {
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
  padding: 40px;
  min-height: calc(100vh - 128px);
}

.editor {
  width: 100%;
  min-height: 1100px;
  padding: 60px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  outline: none;
  line-height: 1.6;
  transition: box-shadow 0.3s ease;
}

.editor:focus {
  box-shadow: 0 4px 12px rgba(66,133,244,0.2);
}

.editor[contenteditable="true"]:empty:before {
  content: "Type your document here...";
  color: var(--gray-400);
  cursor: text;
}

@keyframes saveIndicator {
  0% { opacity: 0; transform: translateY(10px); }
  10% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

.save-indicator {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--gray-700);
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  opacity: 0;
  animation: saveIndicator 2s ease forwards;
}

.suggestion-popup {
  position: absolute;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 4px 0;
  max-width: 200px;
  z-index: 1000;
  display: none;
}

.suggestion-item {
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.suggestion-item:hover {
  background: var(--gray-100);
}

.themes-panel {
  position: fixed;
  right: -300px;
  top: 0;
  width: 300px;
  height: 100vh;
  background: white;
  box-shadow: -2px 0 8px rgba(0,0,0,0.1);
  transition: right 0.3s ease;
  z-index: 101;
  padding: 32px;
  overflow-y: auto;
  border-left: 1px solid var(--gray-200);
}

.themes-panel.open {
  right: 0;
}

.theme-creator {
  position: fixed;
  right: -400px;
  top: 0;
  width: 400px;
  height: 100vh;
  background: var(--background-color, white);
  box-shadow: -2px 0 8px rgba(0,0,0,0.1);
  transition: right 0.3s ease;
  z-index: 102;
  padding: 32px;
  overflow-y: auto;
  border-left: 1px solid var(--gray-200);
}

.theme-creator.open {
  right: 0;
}

.theme-creator h3 {
  margin-bottom: 24px;
  color: var(--gray-700);
}

.color-picker-group {
  margin-bottom: 24px;
}

.color-picker-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--gray-700);
}

.color-picker-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.color-picker {
  -webkit-appearance: none;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
}

.color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 8px;
}

.color-value {
  font-family: 'Inconsolata', monospace;
  padding: 8px 12px;
  border-radius: 4px;
  background: var(--gray-100);
  color: var(--gray-700);
}

.create-theme-btn {
  width: 100%;
  padding: 12px;
  background: var(--blue-500);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Inconsolata', monospace;
  transition: all 0.2s ease;
  margin-top: 24px;
}

.create-theme-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.gradient-stops {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.gradient-stop {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gradient-preview {
  width: 100%;
  height: 50px;
  border-radius: 8px;
  margin-top: 12px;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--gray-200);
  margin-bottom: 8px;
}

.theme-option:hover {
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.theme-preview {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 2px solid var(--gray-200);
}

.themes-panel h3 {
  margin-bottom: 24px;
  color: var(--gray-700);
  font-size: 18px;
}

.themes-panel {
  padding: 24px;
}

#themes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Add active state for selected theme */
.theme-option.active {
  background: var(--gray-100);
  border-color: var(--blue-500);
}

/* Add transition for smooth color changes */
.theme-option {
  transition: all 0.2s ease-in-out;
}

.theme-option span {
  font-size: 14px;
  font-weight: 500;
}

.math-symbols-popup {
  position: absolute;
  background: var(--background-color, white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  z-index: 1000;
  display: none;
}

.math-symbol-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  background: var(--background-color, white);
  color: var(--text-color, black);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inconsolata', monospace;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
</head>
<body>
  <div class="header">
    <input type="text" class="doc-title" value="Untitled document">
  </div>

  <div class="toolbar">
    <div class="toolbar-group">
      <button class="toolbar-button" data-command="undo" data-tooltip="Undo">
        <svg viewBox="0 0 24 24" width="20" height="20">
          <path fill="currentColor" d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/>
        </svg>
      </button>
      <button class="toolbar-button" data-command="redo" data-tooltip="Redo">
        <svg viewBox="0 0 24 24" width="20" height="20">
          <path fill="currentColor" d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"/>
        </svg>
      </button>
      <button class="toolbar-button" data-command="bold" data-tooltip="Bold">
        <svg viewBox="0 0 24 24" width="20" height="20">
          <path fill="currentColor" d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"/>
        </svg>
      </button>
      <button class="toolbar-button" data-command="italic" data-tooltip="Italic">
        <svg viewBox="0 0 24 24" width="20" height="20">
          <path fill="currentColor" d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"/>
        </svg>
      </button>
      <button class="toolbar-button" data-command="underline" data-tooltip="Underline">
        <svg viewBox="0 0 24 24" width="20" height="20">
          <path fill="currentColor" d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"/>
        </svg>
      </button>
      <button class="toolbar-button" data-command="strikethrough" data-tooltip="Strikethrough">
        <svg viewBox="0 0 24 24" width="20" height="20">
          <path fill="currentColor" d="M7.24 8.75c-.26-.48-.39-1.03-.39-1.67 0-.61.13-1.16.4-1.67.26-.5.63-.93 1.11-1.29.48-.35 1.05-.63 1.7-.83.66-.19 1.39-.29 2.18-.29.81 0 1.54.11 2.21.34.66.22 1.23.54 1.69.94.47.4.83.88 1.08 1.43.25.55.38 1.15.38 1.81h-3.01c0-.31-.05-.59-.15-.85-.09-.27-.24-.49-.44-.68-.2-.19-.45-.33-.75-.44-.3-.1-.66-.16-1.06-.16-.39 0-.74.04-1.03.13-.29.09-.53.21-.72.36-.19.16-.34.34-.44.55-.1.21-.15.43-.15.66 0 .48.25.88.74 1.21.38.25.77.48 1.41.7H7.39c-.05-.08-.11-.17-.15-.25zM21 12v-2H3v2h9.62c.18.07.4.14.55.2.37.17.66.34.87.51.21.17.35.36.43.57.07.2.11.43.11.69 0 .23-.05.45-.14.66-.09.2-.23.38-.42.53-.19.15-.42.26-.71.35-.29.08-.63.13-1.01.13-.43 0-.83-.04-1.18-.13s-.66-.23-.91-.42c-.25-.19-.45-.44-.59-.75-.14-.31-.25-.76-.25-1.21H6.4c0 .55.08 1.13.24 1.58.16.45.37.85.65 1.21.28.35.6.66.98.92.37.26.78.48 1.22.65.44.17.9.3 1.38.39.48.08.96.13 1.44.13.8 0 1.53-.09 2.18-.28s1.21-.45 1.67-.79c.46-.34.82-.77 1.07-1.27s.38-1.07.38-1.71c0-.6-.1-1.14-.31-1.61-.05-.11-.11-.23-.17-.33H21z"/>
        </svg>
      </button>
    </div>

    <div class="toolbar-group">
      <select class="toolbar-button" data-command="fontSize" data-tooltip="Font size">
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11" selected>11</option>
        <option value="12">12</option>
        <option value="14">14</option>
        <option value="16">16</option>
        <option value="18">18</option>
        <option value="20">20</option>
        <option value="22">22</option>
        <option value="24">24</option>
        <option value="26">26</option>
        <option value="36">36</option>
        <option value="48">48</option>
        <option value="72">72</option>
      </select>
      <button class="toolbar-button" data-command="formatMore" data-tooltip="More options">
        <svg viewBox="0 0 24 24" width="20" height="20">
          <path fill="currentColor" d="M7 14l5-5 5 5z"/>
        </svg>
      </button>
      <button class="toolbar-button" id="theme-toggle" data-tooltip="Themes">
        <svg viewBox="0 0 24 24" width="20" height="20">
          <path fill="currentColor" d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/>
        </svg>
      </button>
    </div>

    <div class="toolbar-group">
      <button class="toolbar-button" data-command="justifyLeft" data-tooltip="Align left">
        <svg viewBox="0 0 24 24" width="20" height="20">
          <path fill="currentColor" d="M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2z"/>
        </svg>
      </button>
      <button class="toolbar-button" data-command="justifyCenter" data-tooltip="Center">
        <svg viewBox="0 0 24 24" width="20" height="20">
          <path fill="currentColor" d="M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z"/>
        </svg>
      </button>
      <button class="toolbar-button" data-command="justifyRight" data-tooltip="Align right">
        <svg viewBox="0 0 24 24" width="20" height="20">
          <path fill="currentColor" d="M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z"/>
        </svg>
      </button>
    </div>

    <div class="toolbar-group">
      <button class="toolbar-button" data-command="insertUnorderedList" data-tooltip="Bullet list">
        <svg viewBox="0 0 24 24" width="20" height="20">
          <path fill="currentColor" d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zm7 2h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/>
        </svg>
      </button>
      <button class="toolbar-button" data-command="insertOrderedList" data-tooltip="Numbered list">
        <svg viewBox="0 0 24 24" width="20" height="20">
          <path fill="currentColor" d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"/>
        </svg>
      </button>
    </div>

    <div class="toolbar-group">
      <button class="toolbar-button" data-command="outdent" data-tooltip="Decrease indent">
        <svg viewBox="0 0 24 24" width="20" height="20">
          <path fill="currentColor" d="M11 17h10v-2H11v2zm-8-5l4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z"/>
        </svg>
      </button>
      <button class="toolbar-button" data-command="indent" data-tooltip="Increase indent">
        <svg viewBox="0 0 24 24" width="20" height="20">
          <path fill="currentColor" d="M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z"/>
        </svg>
      </button>
    </div>
    
    <div class="toolbar-group">
      <button class="toolbar-button" data-command="exportPDF" data-tooltip="Export as PDF">
        <svg viewBox="0 0 24 24" width="20" height="20">
          <path fill="currentColor" d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 7.5c0 .83-.67 1.5-1.5 1.5H9v2H7.5V7H10c.83 0 1.5.67 1.5 1.5v1zm5 2c0 .83-.67 1.5-1.5 1.5h-2.5V7H15c.83 0 1.5.67 1.5 1.5v3zm4-3H19v1h1.5V11H19v2h-1.5V7h3v1.5zM9 9.5h1v-1H9v1zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm10 5.5h1v-3h-1v3z"/>
        </svg>
      </button>
      <button class="toolbar-button" data-command="exportTXT" data-tooltip="Export as TXT">
        <svg viewBox="0 0 24 24" width="20" height="20">
          <path fill="currentColor" d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/>
        </svg>
      </button>
      <button class="toolbar-button" data-command="exportDOC" data-tooltip="Export as DOC">
        <svg viewBox="0 0 24 24" width="20" height="20">
          <path fill="currentColor" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 14H8c-.55 0-1-.45-1-1s.45-1 1-1h8c.55 0 1 .45 1 1s-.45 1-1 1zm0-4H8c-.55 0-1-.45-1-1s.45-1 1-1h8c.55 0 1 .45 1 1s-.45 1-1 1zm0-4H8c-.55 0-1-.45-1-1s.45-1 1-1h8c.55 0 1 .45 1 1s-.45 1-1 1z"/>
        </svg>
      </button>
      <button class="toolbar-button" data-command="exportRTF" data-tooltip="Export as RTF">
        <svg viewBox="0 0 24 24" width="20" height="20">
          <path fill="currentColor" d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z M9.5 10.5h5v1h-5v-1z M9.5 13.5h5v1h-5v-1z M9.5 16.5h5v1h-5v-1z"/>
        </svg>
      </button>
      <button class="toolbar-button" data-command="exportMD" data-tooltip="Export as Markdown">
        <svg viewBox="0 0 24 24" width="20" height="20">
          <path fill="currentColor" d="M20.56 18H3.44C2.65 18 2 17.37 2 16.59V7.41C2 6.63 2.65 6 3.44 6h17.12c.79 0 1.44.63 1.44 1.41v9.18c0 .78-.65 1.41-1.44 1.41zM6.81 15.19v-3.66l1.52 2.2 1.52-2.2v3.66h1.52V8.81h-1.52l-1.52 2.2-1.52-2.2H5.29v6.38h1.52zm7.24 0l2.28-3.19h-1.52v-3.2h-1.52v3.2h-1.52l2.28 3.19z"/>
        </svg>
      </button>
    </div>

    <div class="toolbar-group">
      <button class="toolbar-button" data-command="insertDegree" data-tooltip="Insert degree symbol">
        <svg viewBox="0 0 24 24" width="20" height="20">
          <circle cx="12" cy="8" r="3" fill="none" stroke="currentColor" stroke-width="2"/>
        </svg>
      </button>
      <button class="toolbar-button" id="math-symbols" data-tooltip="Math symbols">
        <svg viewBox="0 0 24 24" width="20" height="20">
          <path fill="currentColor" d="M19 3H5C3.9 3 3 3.9 3 5v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8 14H9v-2H7v-2h2V9h2v6h2v2h-2z M17 13h-2V9h-2V7h2V5h2v2h2v2h-2z"/>
        </svg>
      </button>
    </div>
  </div>

  <div class="content">
    <div class="editor" contenteditable="true">
    </div>
  </div>

  <div class="theme-creator">
    <h3>Create Custom Theme</h3>
    
    <div class="color-picker-group">
      <label>Primary Color</label>
      <div class="color-picker-wrapper">
        <input type="color" class="color-picker" id="primary-color" value="#4285f4">
        <span class="color-value" id="primary-color-value">#4285f4</span>
      </div>
    </div>

    <div class="color-picker-group">
      <label>Background Color</label>
      <div class="color-picker-wrapper">
        <input type="color" class="color-picker" id="background-color" value="#ffffff">
        <span class="color-value" id="background-color-value">#ffffff</span>
      </div>
    </div>

    <div class="color-picker-group">
      <label>Text Color</label>
      <div class="color-picker-wrapper">
        <input type="color" class="color-picker" id="text-color" value="#000000">
        <span class="color-value" id="text-color-value">#000000</span>
      </div>
    </div>

    <div class="color-picker-group">
      <label>Accent Color</label>
      <div class="color-picker-wrapper">
        <input type="color" class="color-picker" id="accent-color" value="#e8eaed">
        <span class="color-value" id="accent-color-value">#e8eaed</span>
      </div>
    </div>

    <div class="color-picker-group">
      <label>Background Gradient (Optional)</label>
      <div class="gradient-stops">
        <div class="gradient-stop">
          <input type="color" class="color-picker" id="gradient-start" value="#ffffff">
          <span class="color-value" id="gradient-start-value">#ffffff</span>
        </div>
        <div class="gradient-stop">
          <input type="color" class="color-picker" id="gradient-end" value="#ffffff">
          <span class="color-value" id="gradient-end-value">#ffffff</span>
        </div>
      </div>
      <div class="gradient-preview" id="gradient-preview"></div>
    </div>

    <button class="create-theme-btn">Create Theme</button>
  </div>

  <div class="themes-panel">
    <h3>Choose Theme</h3>
    <div id="themes-list"></div>
  </div>

  <div class="suggestion-popup"></div>

  <div class="math-symbols-popup"></div>

<script>
// Function to save to cookies
function setCookie(name, value, days) {
  const expires = new Date();
  expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
  document.cookie = `${name}=${encodeURIComponent(value)};expires=${expires.toUTCString()};path=/`;
}

// Function to get from cookies
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return decodeURIComponent(parts.pop().split(';').shift());
}

// Load saved theme and content on page load
document.addEventListener('DOMContentLoaded', function() {
  // Load saved theme
  const savedTheme = getCookie('selectedTheme');
  if (savedTheme) {
    const theme = themes.find(t => t.name === savedTheme);
    if (theme) applyTheme(theme);
  }

  // Load saved content
  const savedContent = getCookie('documentContent');
  if (savedContent) {
    document.querySelector('.editor').innerHTML = savedContent;
  }

  // Load saved title
  const savedTitle = getCookie('documentTitle');
  if (savedTitle) {
    document.querySelector('.doc-title').value = savedTitle;
    document.title = savedTitle + ' - Google Docs';
  }
});

// Define themes array
const themes = [
  {name: 'Default Light', primary: '#4285f4', background: '#ffffff', text: '#000000', accent: '#e8eaed'},
  {name: 'Dark Mode', primary: '#8ab4f8', background: '#202124', text: '#ffffff', accent: '#3c4043'},
  {name: 'Ocean Blue', primary: '#0277bd', background: '#e1f5fe', text: '#01579b', accent: '#b3e5fc'},
  {name: 'Forest Green', primary: '#2e7d32', background: '#e8f5e9', text: '#1b5e20', accent: '#c8e6c9'},
  {name: 'Royal Purple', primary: '#6a1b9a', background: '#f3e5f5', text: '#4a148c', accent: '#e1bee7'},
  {name: 'Sunset Orange', primary: '#e64a19', background: '#fbe9e7', text: '#bf360c', accent: '#ffccbc'},
  {name: 'Midnight Blue', primary: '#1a237e', background: '#1a1a2e', text: '#ffffff', accent: '#534bae'},
  {name: 'Forest Night', primary: '#1b5e20', background: '#1a2f1a', text: '#ffffff', accent: '#43a047'},
  {name: 'Arctic Light', primary: '#0288d1', background: '#ffffff', text: '#000000', accent: '#e3f2fd'},
  {name: 'Pitch Dark', primary: '#64b5f6', background: '#000000', text: '#ffffff', accent: '#1a1a1a'},
  {name: 'Emerald Forest', primary: '#2e7d32', background: '#f1f8e9', text: '#1b5e20', accent: '#c8e6c9'},
  {name: 'Deep Ocean', primary: '#1565c0', background: '#0a192f', text: '#ffffff', accent: '#172a45'},
  {name: 'Desert Sand', primary: '#d84315', background: '#fff3e0', text: '#bf360c', accent: '#ffe0b2'},
  {name: 'Purple Rain', primary: '#6a1b9a', background: '#4a148c', text: '#ffffff', accent: '#7b1fa2'},
  {name: 'Mint Fresh', primary: '#00897b', background: '#e0f2f1', text: '#004d40', accent: '#b2dfdb'},
  {name: 'Cherry Blossom', primary: '#c2185b', background: '#fce4ec', text: '#880e4f', accent: '#f8bbd0'},
  {name: 'Golden Hour', primary: '#f57c00', background: '#fff3e0', text: '#e65100', accent: '#ffe0b2'},
  {name: 'Nordic Frost', primary: '#546e7a', background: '#eceff1', text: '#263238', accent: '#cfd8dc'},
];

// Function to apply theme
function applyTheme(theme) {
  // First remove active class from all options
  document.querySelectorAll('.theme-option').forEach(option => {
    option.classList.remove('active');
    // Find the option that matches current theme and add active class
    if (option.querySelector('span').textContent === theme.name) {
      option.classList.add('active');
    }
  });

  // Update CSS variables
  document.documentElement.style.setProperty('--blue-500', theme.primary);
  document.documentElement.style.setProperty('--gray-100', `${theme.accent}40`);
  document.documentElement.style.setProperty('--gray-200', theme.accent);
  document.documentElement.style.setProperty('--gray-400', theme.text + '80');
  document.documentElement.style.setProperty('--gray-700', theme.text);

  // Apply to body
  document.body.style.background = theme.background;
  document.body.style.color = theme.text;

  // Apply to header
  const header = document.querySelector('.header');
  header.style.background = theme.background;
  header.style.borderColor = theme.accent;

  // Apply to editor
  const editor = document.querySelector('.editor');
  editor.style.background = theme.background;
  editor.style.color = theme.text;
  editor.style.borderColor = theme.accent;
  editor.style.boxShadow = `0 1px 3px ${theme.text}20`;

  // Apply to toolbar and buttons
  const toolbar = document.querySelector('.toolbar');
  toolbar.style.background = theme.background;
  toolbar.style.borderColor = theme.accent;

  // Apply to toolbar buttons
  const toolbarButtons = document.querySelectorAll('.toolbar-button');
  toolbarButtons.forEach(button => {
    button.style.color = theme.text;
  });

  // Apply to toolbar groups
  const toolbarGroups = document.querySelectorAll('.toolbar-group');
  toolbarGroups.forEach(group => {
    group.style.background = `${theme.accent}40`;
  });

  // Apply to select elements
  const selects = document.querySelectorAll('select.toolbar-button');
  selects.forEach(select => {
    select.style.color = theme.text;
    select.style.background = theme.background;
    select.style.borderColor = theme.accent;
    // Set CSS variables for options
    document.documentElement.style.setProperty('--background-color', theme.background);
    document.documentElement.style.setProperty('--text-color', theme.text);
  });

  // Apply to document title
  const docTitle = document.querySelector('.doc-title');
  docTitle.style.color = theme.text;
  docTitle.style.background = theme.background;

  // Apply to themes panel
  const themesPanel = document.querySelector('.themes-panel');
  themesPanel.style.background = theme.background;
  themesPanel.style.color = theme.text;
  themesPanel.style.boxShadow = `0 0 10px ${theme.text}30`;

  // Apply to theme options
  const themeOptions = document.querySelectorAll('.theme-option');
  themeOptions.forEach(option => {
    option.style.borderColor = theme.accent;
    option.style.color = theme.text;
  });

  // Apply to math symbols popup
  const mathPopup = document.querySelector('.math-symbols-popup');
  if (mathPopup) {
    mathPopup.style.background = theme.background;
    mathPopup.style.borderColor = theme.accent;
    
    const mathButtons = mathPopup.querySelectorAll('.math-symbol-btn');
    mathButtons.forEach(btn => {
      btn.style.background = theme.background;
      btn.style.color = theme.text;
      btn.style.borderColor = theme.accent;
    });
  }

  // Save theme selection
  setCookie('selectedTheme', theme.name, 30);
}

// Populate themes panel
const themesList = document.getElementById('themes-list');
themes.forEach(theme => {
  const themeOption = document.createElement('div');
  themeOption.className = 'theme-option';
  themeOption.innerHTML = `
    <div class="theme-preview" style="background: ${theme.primary}"></div>
    <span>${theme.name}</span>
  `;
  themeOption.onclick = () => {
    // Remove active class from all options
    document.querySelectorAll('.theme-option').forEach(opt => {
      opt.classList.remove('active');
    });
    // Add active class to clicked option
    themeOption.classList.add('active');
    applyTheme(theme);
  };
  
  // Add active class if this is the currently selected theme
  const savedTheme = getCookie('selectedTheme');
  if (savedTheme === theme.name) {
    themeOption.classList.add('active');
  }
  
  themesList.appendChild(themeOption);
});

// Theme panel toggle
const themeToggle = document.getElementById('theme-toggle');
const themesPanel = document.querySelector('.themes-panel');

themeToggle.addEventListener('click', () => {
  themesPanel.classList.toggle('open');
});

// Add "Create Theme" button to toolbar
const createThemeButton = document.createElement('button');
createThemeButton.className = 'toolbar-button';
createThemeButton.setAttribute('data-tooltip', 'Create Theme');
createThemeButton.innerHTML = `
  <svg viewBox="0 0 24 24" width="20" height="20">
    <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
  </svg>
`;

document.querySelector('#theme-toggle').parentNode.insertBefore(createThemeButton, document.querySelector('#theme-toggle'));

const themeCreator = document.querySelector('.theme-creator');

createThemeButton.addEventListener('click', () => {
  themeCreator.classList.toggle('open');
  themesPanel.classList.remove('open');
});

// Update color value displays
document.querySelectorAll('.color-picker').forEach(picker => {
  picker.addEventListener('input', (e) => {
    const valueDisplay = document.getElementById(e.target.id + '-value');
    if (valueDisplay) {
      valueDisplay.textContent = e.target.value;
    }
    
    if (e.target.id === 'gradient-start' || e.target.id === 'gradient-end') {
      updateGradientPreview();
    } else {
      // Preview the theme as user selects colors
      previewCustomTheme();
    }
  });
});

function updateGradientPreview() {
  const start = document.getElementById('gradient-start').value;
  const end = document.getElementById('gradient-end').value;
  const preview = document.getElementById('gradient-preview');
  preview.style.background = `linear-gradient(to right, ${start}, ${end})`;
}

function previewCustomTheme() {
  const theme = {
    name: 'Custom Theme',
    primary: document.getElementById('primary-color').value,
    background: document.getElementById('background-color').value,
    text: document.getElementById('text-color').value,
    accent: document.getElementById('accent-color').value
  };
  
  applyTheme(theme);
}

// Create custom theme
document.querySelector('.create-theme-btn').addEventListener('click', () => {
  const customTheme = {
    name: 'Custom Theme ' + (themes.filter(t => t.name.startsWith('Custom Theme')).length + 1),
    primary: document.getElementById('primary-color').value,
    background: document.getElementById('background-color').value,
    text: document.getElementById('text-color').value,
    accent: document.getElementById('accent-color').value
  };

  // Add gradient if being used
  const gradientStart = document.getElementById('gradient-start').value;
  const gradientEnd = document.getElementById('gradient-end').value;
  if (gradientStart !== '#ffffff' || gradientEnd !== '#ffffff') {
    customTheme.background = `linear-gradient(to right, ${gradientStart}, ${gradientEnd})`;
  }

  // Add to themes array
  themes.push(customTheme);
  
  // Add to themes panel
  const themeOption = document.createElement('div');
  themeOption.className = 'theme-option';
  themeOption.innerHTML = `
    <div class="theme-preview" style="background: ${customTheme.primary}"></div>
    <span>${customTheme.name}</span>
  `;
  themeOption.onclick = () => applyTheme(customTheme);
  document.getElementById('themes-list').appendChild(themeOption);
  
  // Apply the new theme
  applyTheme(customTheme);
  
  // Close the creator panel
  themeCreator.classList.remove('open');
});

// Close theme creator when clicking outside
document.addEventListener('click', (e) => {
  if (!themeCreator.contains(e.target) && !createThemeButton.contains(e.target)) {
    themeCreator.classList.remove('open');
  }
});

// Track changes for undo/redo
let undoStack = [];
let redoStack = [];
const editor = document.querySelector('.editor');

editor.addEventListener('input', (e) => {
  undoStack.push(editor.innerHTML);
  redoStack = []; // Clear redo stack on new changes
  setCookie('documentContent', editor.innerHTML, 30);
});

// Format command handler
function execCommand(command, value = null) {
  if (command.startsWith('justify')) {
    document.execCommand(command, false, null);
  } else {
    document.execCommand(command, false, value);
  }
  editor.focus();
  // Save content after formatting
  setCookie('documentContent', editor.innerHTML, 30);
}

// Add event listeners to all toolbar buttons
document.querySelectorAll('.toolbar-button').forEach(button => {
  const command = button.getAttribute('data-command');
  if (command) {
    button.addEventListener('click', () => {
      if (command === 'fontSize') {
        execCommand(command, button.value);
      } else {
        execCommand(command);
      }
    });
  }
});

// Handle font size changes
document.querySelector('[data-command="fontSize"]').addEventListener('change', function(e) {
  execCommand('fontSize', e.target.value);
});

// Undo command
document.querySelector('[data-command="undo"]').addEventListener('click', () => {
  if (undoStack.length > 0) {
    redoStack.push(editor.innerHTML);
    editor.innerHTML = undoStack.pop();
    setCookie('documentContent', editor.innerHTML, 30);
  }
});

// Redo command
document.querySelector('[data-command="redo"]').addEventListener('click', () => {
  if (redoStack.length > 0) {
    undoStack.push(editor.innerHTML);
    editor.innerHTML = redoStack.pop();
    setCookie('documentContent', editor.innerHTML, 30);
  }
});

// Add keyboard shortcuts
document.addEventListener('keydown', (e) => {
  if (e.ctrlKey || e.metaKey) {
    switch(e.key.toLowerCase()) {
      case 'b':
        e.preventDefault();
        execCommand('bold');
        break;
      case 'i':
        e.preventDefault();
        execCommand('italic');
        break;
      case 'u':
        e.preventDefault();
        execCommand('underline');
        break;
      case 'l':
        e.preventDefault();
        execCommand('justifyLeft');
        break;
      case 'e':
        e.preventDefault();
        execCommand('justifyCenter');
        break;
      case 'r':
        e.preventDefault();
        execCommand('justifyRight');
        break;
    }
  }
});

// Remove default editor text on focus
document.querySelector('.editor').addEventListener('focus', function(e) {
  if (this.textContent === 'Type your document here...') {
    this.textContent = '';
  }
});

// Restore placeholder if empty on blur
document.querySelector('.editor').addEventListener('blur', function(e) {
  if (!this.textContent.trim()) {
    this.textContent = 'Type your document here...';
  }
});

// Remove initial placeholder text from HTML
document.querySelector('.editor').innerHTML = '';

// Save document title
document.querySelector('.doc-title').addEventListener('input', function(e) {
  setCookie('documentTitle', e.target.value, 30);
});

// Add export functionality
function exportAsPDF() {
  const content = document.querySelector('.editor').innerHTML;
  const style = `
    <style>
      body { font-family: 'Inconsolata', monospace; }
      * { color: ${getComputedStyle(document.body).color} !important; }
    </style>
  `;
  
  const win = window.open('', '_blank');
  win.document.write(`<html><head>${style}</head><body>${content}</body></html>`);
  win.document.close();
  win.print();
}

function exportAsTXT() {
  const content = document.querySelector('.editor').innerText;
  const blob = new Blob([content], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `${document.querySelector('.doc-title').value || 'document'}.txt`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

function exportAsDOC() {
  const content = document.querySelector('.editor').innerHTML;
  const blob = new Blob([`
    <html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
      <head><meta charset='utf-8'></head>
      <body>${content}</body>
    </html>`], 
    { type: 'application/msword' }
  );
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `${document.querySelector('.doc-title').value || 'document'}.doc`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

function exportAsRTF() {
  const content = document.querySelector('.editor').innerHTML;
  const rtfContent = `{\\rtf1\\ansi\n${content.replace(/<[^>]*>/g, '')}}`;
  const blob = new Blob([rtfContent], { type: 'application/rtf' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `${document.querySelector('.doc-title').value || 'document'}.rtf`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

function exportAsMarkdown() {
  let content = document.querySelector('.editor').innerHTML;
  // Convert HTML to Markdown
  content = content
    .replace(/<strong>(.*?)<\/strong>/g, '**$1**')
    .replace(/<em>(.*?)<\/em>/g, '*$1*')
    .replace(/<u>(.*?)<\/u>/g, '__$1__')
    .replace(/<strike>(.*?)<\/strike>/g, '~~$1~~')
    .replace(/<h[1-6]>(.*?)<\/h[1-6]>/g, '# $1')
    .replace(/<ul>(.*?)<\/ul>/g, '$1')
    .replace(/<li>(.*?)<\/li>/g, '- $1')
    .replace(/<ol>(.*?)<\/ol>/g, '$1')
    .replace(/<li>(.*?)<\/li>/g, '1. $1')
    .replace(/<[^>]*>/g, '');

  const blob = new Blob([content], { type: 'text/markdown' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `${document.querySelector('.doc-title').value || 'document'}.md`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// Add export button event listeners
document.querySelector('[data-command="exportPDF"]').addEventListener('click', exportAsPDF);
document.querySelector('[data-command="exportTXT"]').addEventListener('click', exportAsTXT);
document.querySelector('[data-command="exportDOC"]').addEventListener('click', exportAsDOC);
document.querySelector('[data-command="exportRTF"]').addEventListener('click', exportAsRTF);
document.querySelector('[data-command="exportMD"]').addEventListener('click', exportAsMarkdown);

// Create math symbols popup
const mathSymbols = [
  '±', '∞', '≈', '≠', '≤', '≥', '×', '÷', 
  '∑', '∏', '√', '∛', '∜',
  '∫', '∂', '∇', '∆',
  'π', 'α', 'β', 'γ', 'δ', 'θ', 'λ', 'μ', 'σ', 'τ', 'φ', 'ω',
  '⊂', '⊃', '∩', '∪', '∈', '∉', '∅',
  '→', '←', '↑', '↓', '↔', '⇒', '⇐', '⇔'
];

const mathPopup = document.createElement('div');
mathPopup.className = 'math-symbols-popup';
mathPopup.style.cssText = `
  position: absolute;
  background: var(--background-color, white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  z-index: 1000;
  display: none;
`;

mathSymbols.forEach(symbol => {
  const btn = document.createElement('button');
  btn.className = 'math-symbol-btn';
  btn.textContent = symbol;
  btn.style.cssText = `
    width: 30px;
    height: 30px;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    background: var(--background-color, white);
    color: var(--text-color, black);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inconsolata', monospace;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
  `;
  
  btn.onmouseover = () => {
    btn.style.background = 'var(--gray-100)';
    btn.style.transform = 'translateY(-1px)';
  };
  
  btn.onmouseout = () => {
    btn.style.background = 'var(--background-color, white)';
    btn.style.transform = 'translateY(0)';
  };
  
  btn.onclick = () => {
    document.execCommand('insertText', false, symbol);
    mathPopup.style.display = 'none';
  };
  
  mathPopup.appendChild(btn);
});

document.body.appendChild(mathPopup);

// Add degree button handler
document.querySelector('[data-command="insertDegree"]').addEventListener('click', () => {
  document.execCommand('insertText', false, '°');
});

// Add math symbols button handler
document.getElementById('math-symbols').addEventListener('click', (e) => {
  const rect = e.target.closest('.toolbar-button').getBoundingClientRect();
  mathPopup.style.display = mathPopup.style.display === 'grid' ? 'none' : 'grid';
  mathPopup.style.top = `${rect.bottom + 5}px`;
  mathPopup.style.left = `${rect.left}px`;
});

// Close math popup when clicking outside
document.addEventListener('click', (e) => {
  if (!e.target.closest('#math-symbols') && !e.target.closest('.math-symbols-popup')) {
    mathPopup.style.display = 'none';
  }
});
</script>

</body></html>