Made a warning banner to show to Safari users in relation to #40

index.html

@@ -8,7 +8,8 @@
   <meta name="keywords" content="draw, canvas, javascript, mouse, pointer, no-code, HTML, Canvascript" />
   <meta name="author" content="Viraj Bijpuria" />
   <meta property="og:title" content="CanvaScript - Draw on the HTML canvas without writing code" />
-  <meta property="og:description" content="Draw with your pointer on the HTML canvas, then get the code to render it." />
+  <meta property="og:description"
+    content="Draw with your pointer on the HTML canvas, then get the code to render it." />
   <meta property="og:image" content="https://vbprodev.github.io/Canvascript/CanvaScript.png" />
   <meta property="og:url" content="https://vbprodev.github.io/Canvascript/" />
   <meta property="og:type" content="website" />
@@ -66,7 +67,8 @@
   <div itemscope itemtype="https://schema.org/SoftwareApplication">
     <meta itemprop="name" content="Canvascript" />
     <meta itemprop="url" content="https://vbprodev.github.io/Canvascript/" />
-    <meta itemprop="description" content="Create HTML canvas graphics without writing code. Just draw with your pointer on the HTML canvas, then get the code to render it. A no-code tool for web game devs crafting mobile-friendly high-performance graphics." />
+    <meta itemprop="description"
+      content="Create HTML canvas graphics without writing code. Just draw with your pointer on the HTML canvas, then get the code to render it. A no-code tool for web game devs crafting mobile-friendly high-performance graphics." />
     <meta itemprop="applicationCategory" content="DesignApplication" />
     <meta itemprop="applicationCategory" content="DeveloperApplication" />
     <meta itemprop="operatingSystem" content="Web" />
@@ -87,7 +89,8 @@
     <div itemprop="potentialAction" itemscope itemtype="https://schema.org/UseAction">
       <meta itemprop="target" content="https://vbprodev.github.io/Canvascript/" />
     </div>
-    <meta itemprop="keywords" content="javascript, performance, html5, canvas-api, no-code, web-game-dev, draw, mouse, pointer" />
+    <meta itemprop="keywords"
+      content="javascript, performance, html5, canvas-api, no-code, web-game-dev, draw, mouse, pointer" />
     <div itemprop="featureList" itemscope itemtype="https://schema.org/ItemList">
       <div itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
         <meta itemprop="name" content="Free-hand drawing on HTML canvas" />
@@ -116,8 +119,16 @@
     <meta itemprop="requirements" content="Modern web browser with HTML5 Canvas support" />
     <meta itemprop="installUrl" content="https://vbprodev.github.io/Canvascript/" />
   </div>
+  <div class="alert alert-warning alert-dismissible fade cstp-notification" role="alert">
+    <p class="cstp-text">If Cross Site Tracking Protection is enabled, please see <a
+        href="https://github.com/VBproDev/Canvascript/issues/40" target="_blank">this issue</a></p>
+    <div class="cstp-button">
+      <button type="button" class="btn btn-primary dismiss-button">Got it</button>
+    </div>
+  </div>
   <div class="d-flex justify-content-center">
-    <div class="popup_saved d-flex align-items-center bg-success text-white rounded-pill py-2 px-4 position-fixed top-0 mt-3 transition-opacity">
+    <div
+      class="popup_saved d-flex align-items-center bg-success text-white rounded-pill py-2 px-4 position-fixed top-0 mt-3 transition-opacity">
       <span>Design has been saved</span>
       <button class="btn-close btn-close-white ms-2" aria-label="Close"></button>
     </div>
@@ -203,4 +214,4 @@ <h4 class="me-1">Line width:</h4>
   </div>
 </body>
 
-</html>
+</html>

script.js

@@ -404,16 +404,22 @@ set.addEventListener('click', () => {
     drawLines();
 });
 save.addEventListener('click', () => {
+    const cstpNotification = document.querySelector('.cstp-notification');
+    const cstpClose = document.querySelector('.dismiss-button');
+    let saveTimer;
     localStorage.setItem('canvasArray', JSON.stringify(canvasArray));
     num += canvasArray.length;
-    popup_saved.classList.add('show');
-    btnClose === null || btnClose === void 0 ? void 0 : btnClose.addEventListener('click', () => {
+    btnClose.addEventListener('click', () => {
         clearTimeout(saveTimer);
         popup_saved.classList.remove('show');
     });
-    const saveTimer = setTimeout(() => {
-        popup_saved.classList.remove('show');
-    }, 2300);
+    cstpClose.addEventListener('click', () => {
+        cstpNotification.classList.remove('show');
+    });
+    if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent))
+        cstpNotification.classList.add('show');
+    popup_saved.classList.add('show');
+    saveTimer = setTimeout(() => { popup_saved.classList.remove('show'); }, 2300);
 });
 userDesign.addEventListener('click', () => {
     clear();