about.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SplitMark: About</title>
  <meta name="description" content="SplitMark is a free, minimalist online text editor with Markdown capabilities, keyboard shortcuts, and a streamlined interface for distraction-free writing.">
  <link rel="stylesheet" href="style.css">

  <style>
    #editor-container{
      font-family: 'Inter';
    }

    .splitmark-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 auto;  /* Center the logo horizontally */
      width: 170px;  /* Set a width for the container */
      padding: 10px;  /* Add padding for the border */
      border: 2px solid black;  /* Define a border style, width, and color */
      background-color: white;  /* Set a background color */
    }

    .splitmark-text {
      color: #000;
      font-size: 2em;
      line-height: 1;
      margin: .2em;
    }

    .splitmark-text span {
      margin-left: 1px;
      background-color: black;
      color: white;
      padding: 5px;
    }
    
    body.dark-mode #editor-container p,
    body.dark-mode #editor-container h1,
    body.dark-mode #editor-container h2,
    body.dark-mode #editor-container h3,
    body.dark-mode #editor-container h4,
    body.dark-mode #editor-container h5,
    body.dark-mode #editor-container h6,
    body.dark-mode #editor-container ul,
    body.dark-mode #editor-container li {
      color: #D4D4D4; /* Adjust the color as needed */
    }
  </style>
</head>
<body>
  <div class="menu">
    <div>
      <button onclick="window.open('index.html', '_self')">Home</button>
      <button onclick="window.open('https://github.com/Clevis22/SplitMark-Text', '_self')">GitHub</button>
      <!-- Placeholder for consistency, won’t perform actions like in index.html -->
      <button style="visibility: hidden;">Save</button>
      <button style="visibility: hidden;">Load</button>
    </div>
  </div>
  <div id="editor-container">
    <br>
    <div class="splitmark-container">
      <span class="splitmark-text"><span>Split</span>&nbsp;<strong>Mark</strong></span>
    </div>
    
    <h3 style="text-align:center;">No login, no ads just text editing with markdown superpowers.</h3>
    <h2>About</h2>
    <p>SplitMark is a minimal, Quill-based online text editor with robust markdown support. It combines a clean and simple user interface with the power of rich-text editing and markdown capabilities, giving you a distraction-free yet powerful writing experience.</p>
    <p>While most modern writing apps and websites have become increasingly bloated with complex features, distracting advertisements, and requirements to create accounts, SplitMark takes an intentionally minimal approach. It was inspired by a desire to get back to a distraction-free, privacy-focused online writing experience without the hassle of logins, subscriptions, or intrusive monetization. SplitMark provides the core rich-text editing capabilities you need, wrapped in a minimal interface that allows you to simply open and write.
</p>
    <h2>How It Works</h2>
    <p>SplitMark is built on top of Quill, a free and open-source rich text editor for the web. It leverages the Quilljs-Markdown module along with custom methods to add full markdown support on top of Quill's WYSIWYG editing capabilities.</p>
    <p>All editing on SplitMark happens on the client side, meaning your text never leaves your browser unless you save the content to your device. Saves are stored using the .spmk file extension, which is JSON-based and stores the editor's content using quill-delta. Local storage is also used to store editor content in your browser between sessions. If browser history or data is cleared, saved editor content may be lost. Always download important content using the save button.</p>
    <p>SplitMark also contains three tabs to toggle between using the Tabs button. This allows for editing multiple documents without the need for duplicate browser tabs. In fact, it is not recommended to have multiple tabs of SplitMark open at once, as local storage is used for editor-saving content, and if multiple tabs are open, some content may not be saved properly.</p>
    <p>All of this, combined with a minimal user interface containing light and dark themes, powerful keyboard shortcuts, and a privacy-focused mentality, creates a distraction-free yet powerful online writing experience.</p>
    <h2>Dependencies</h2>
    <p>SplitMark is powered by <a href="https://quilljs.com/">Quill</a> and <a href="https://cloverhearts.github.io/quilljs-markdown/">Quilljs-markdown</a>.</p>
    <h2>Keyboard Shortcuts</h2>
    <ul>
     <li>Control Shift C: View word count</li>
     <li>Control +/-: Edit font size</li>
     <li>Control J: Toggle center/left align</li>
     <li>Control U: Underline</li>
     <li>Control B: Bold</li>
     <li>Control I: Italic</li>
     <li>Control Z: Undo</li>
     <li>Control Y: Redo</li>
    </ul>
    <h2>Supported Markdown Syntax</h2>
    <p>SplitMark supports the following markdown syntax:</p>
    <ul>
     <li>Headings: # (H1-H6)</li>
     <li>Bullet lists: * and - </li>
     <li>Numbered lists:<br>
      1. 1 DEPTH<br>
      2. 2 DEPTH<br>
      &nbsp 1. 2 SUB-DEPTH<br>
      &nbsp 2. 2 SUB-DEPTH</li>
     <li>Bold: **bold** and __bold__</li>
     <li>Highlight: `highlight`</li>
     <li>Strikethrough: ~~strikethrough~~</li>
     <li>Italic: *italic* and _italic_</li>
     <li>Underline: ==underline==</li>
     <li>Code block: ```code block```</li>
     <li>Task list: [] and [x]</li>
     <li>Block quote: > </li>
     <li>Link: [text](source)</li>
     <li>Image: ![alt text](source)</li>
    </ul>

    <h2>Socials</h2>
    <ul>
      <li><a href="https://didthis.app/user/Clevis22/project/v973j">Didthis</a></li>
      <li><a href="https://twitter.com/SplitMark1">Twitter</a></li>
      <li><a href="https://bsky.app/profile/splitmark.com">Bluesky</a></li>
    </ul>
    
    <h2>License</h2>
    <p>SplitMark is an open source project licensed under the GPL-3.0 license. You can find the full source code on <a href="https://github.com/Clevis22/SplitMark-Text">GitHub</a>.
   </div>

  <script>
    // Check theme from localStorage and apply before the page is rendered
    document.addEventListener('DOMContentLoaded', () => {
      const storedTheme = localStorage.getItem('theme');
      if (storedTheme) {
        document.body.classList.add(storedTheme);
      }
    });
  </script>
</body>
</html>