tools-app/src/views/PrivacyPolicy.vue

<script setup>
import { ArrowLeft } from 'lucide-vue-next'
</script>

<template>
  <div class="tool-container">
    <div class="tool-panel privacy-panel">
      <header class="privacy-header">
        <router-link to="/" class="back-link">
          <ArrowLeft size="20" />
          Back to Tools
        </router-link>
        <h1>Privacy Policy</h1>
        <p class="last-updated">Last Updated: February 27, 2026</p>
      </header>

      <div class="privacy-body">
        <section>
          <h2>1. Introduction</h2>
          <p>
            Welcome to Tools App ("we," "our," or "us"). We are committed to protecting your privacy.
            This Privacy Policy explains how our Chrome Extension ("Tools App Extension") handles your data.
          </p>
        </section>

        <section>
          <h2>2. Data Collection and Usage</h2>
          <p>
            The Tools App Extension is designed with privacy as a priority.
            <strong>We do not collect, store, or transmit any of your personal data to external servers.</strong>
          </p>

          <h3>Clipboard Data</h3>
          <p>
            The extension requires the <code>clipboardRead</code> permission to function.
            It reads text from your clipboard <strong>only</strong> when you explicitly enable the "Clipboard Sniffer" tool in the Tools App web interface.
          </p>
          <ul>
            <li>Clipboard data is processed locally within your browser.</li>
            <li>Data is sent directly from the extension to the open Tools App tab via a secure local communication channel.</li>
            <li>Once you close the tab or stop the tool, the extension stops monitoring the clipboard immediately.</li>
            <li>We do not have access to your clipboard history, and it is never uploaded to any cloud storage or third-party service.</li>
          </ul>
        </section>

        <section>
          <h2>3. Permissions</h2>
          <p>The extension requests the following permissions for specific functional purposes:</p>
          <ul>
            <li><strong>clipboardRead:</strong> To detect copied text when the Sniffer tool is active.</li>
            <li><strong>scripting:</strong> To communicate with the Tools App web page.</li>
            <li><strong>storage:</strong> To save local user preferences (e.g., sound settings).</li>
            <li><strong>alarms:</strong> To maintain the background process active during monitoring sessions.</li>
          </ul>
        </section>

        <section>
          <h2>4. Third-Party Services</h2>
          <p>
            Our extension operates independently and does not use any third-party analytics, tracking scripts, or advertising networks.
          </p>
        </section>

        <section>
          <h2>5. Changes to This Policy</h2>
          <p>
            We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page.
          </p>
        </section>

        <section>
          <h2>6. Contact Us</h2>
          <p>
            If you have any questions about this Privacy Policy, please contact us via the repository or support channels provided in the Chrome Web Store listing.
          </p>
        </section>
      </div>
    </div>
  </div>
</template>

<style scoped>
.privacy-panel {
  max-width: 900px; /* Slightly wider for reading */
  margin: 0 auto;
}

.privacy-body {
  overflow-y: auto;
  padding-right: 0.5rem;
}

/* Custom scrollbar for privacy body */
.privacy-body::-webkit-scrollbar {
  width: 8px;
}

.privacy-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.privacy-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.privacy-header {
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 1.5rem;
  flex-shrink: 0;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  margin-bottom: 1.5rem;
  transition: color 0.2s;
}

.back-link:hover {
  color: var(--primary-accent);
}

h1 {
  font-size: 2.5rem;
  margin: 0 0 0.5rem 0;
  background: var(--title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}

.last-updated {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

section {
  margin-bottom: 2.5rem;
}

h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--text-strong);
}

h3 {
  font-size: 1.1rem;
  margin: 1.5rem 0 0.5rem 0;
  color: var(--text-strong);
}

p {
  line-height: 1.7;
  color: var(--text-color);
  margin-bottom: 1rem;
}

ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
  color: var(--text-color);
}

strong {
  color: var(--text-strong);
  font-weight: 600;
}

code {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.9em;
  color: var(--text-strong);
}

:global(html[data-theme="light"]) code {
  background: rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .privacy-container {
    padding: 1rem;
  }

  .privacy-content {
    padding: 1.5rem;
  }

  h1 {
    font-size: 2rem;
  }
}
</style>