From ab7aed01467707a35f8abf653a93dc531140f750 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 9 Feb 2024 11:16:31 +0530
Subject: [PATCH] feat: Add privacy modal

---
 src/lib/components/Navbar.svelte  |  4 +++
 src/lib/components/Privacy.svelte | 42 +++++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+)
 create mode 100644 src/lib/components/Privacy.svelte

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 55fa3ecf3..670361959 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -9,6 +9,7 @@
 <script lang="ts">
   import Theme from './Theme.svelte';
   import { dismissPromotion, getActivePromotion } from '$lib/util/promos/promo';
+  import Privacy from './Privacy.svelte';
   let isMenuOpen = false;
 
   function toggleMenu() {
@@ -131,6 +132,9 @@
   <div class="hidden w-full lg:flex lg:w-auto lg:items-center" id="menu">
     <Theme />
     <ul class="items-center justify-between pt-4 text-base lg:flex lg:pt-0">
+      <li>
+        <Privacy />
+      </li>
       {#each links as { title, href, icon, img }}
         <li>
           <a class="btn btn-ghost" target="_blank" {href}>
diff --git a/src/lib/components/Privacy.svelte b/src/lib/components/Privacy.svelte
new file mode 100644
index 000000000..3644076ae
--- /dev/null
+++ b/src/lib/components/Privacy.svelte
@@ -0,0 +1,42 @@
+<label for="privacyModal" class="btn btn-ghost flex gap-2">
+  <i class="fa-solid fa-shield-halved text-xl"></i> Security
+</label>
+
+<input type="checkbox" id="privacyModal" class="modal-toggle" />
+<div class="modal" role="dialog">
+  <div class="modal-box flex flex-col gap-4 text-base-content">
+    <h1 class="text-3xl font-bold">Data security</h1>
+    <p>
+      <span class="text-xl font-extrabold">
+        The content of the diagrams you create never leaves your browser.
+      </span>
+      It's stored in the URL, and the browser's local storage only.
+    </p>
+    <p>
+      Mermaid live editor is a fully client side application, that will also work as an offline <a
+        href="https://web.dev/explore/progressive-web-apps"
+        class="link"
+        target="_blank">
+        PWA.
+      </a>
+    </p>
+    <p>
+      The only server we have is a self hosted version of the open source and privacy friendly
+      Plausible Analytics. We only collect data related to actions performed, like the type of
+      diagram rendered, number of times a feature was used, etc. <br /> All the data we collect is
+      anonymized and
+      <a href="https://p.mermaid.live/mermaid.live" class="link" target="_blank">
+        available publicly.
+      </a>
+    </p>
+
+    <p>
+      Additional services like the external PNG/SVG/Kroki links and "Save to Mermaid Chart" feature
+      will share your diagram with the respective 3rd party service.
+    </p>
+
+    <label class="btn btn-circle btn-ghost btn-sm absolute right-2 top-2" for="privacyModal">
+      X
+    </label>
+  </div>
+</div>