appscms-tools-theme 5.7.4 → 5.7.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f0de347069f3a8970e61f89ea140a4961401d21554b62c8d011f653cdffc6979
-  data.tar.gz: a1ab67ed517d4ec1910f9a62c381df169bd7ba32d6df64fd054f536e4860d7c8
+  metadata.gz: f9a5c9a03d53d9e07b8133e0e17bce312236432a9c0e40d77df39cbd550749aa
+  data.tar.gz: 52769718d50791e0831e62c55e22a9628adc043c49628d3cc083058c9e00a6c1
 SHA512:
-  metadata.gz: ed2b792052e40b6bd7b9b202afb7622c75b49d074dbcbde31bdd9ed01c070d8c7dce166a9f4448d520dc62d610366aa93a37f18d8a08a869d74f0e0a3dc9f49d
-  data.tar.gz: 1d77b17361e1296b7a9826b2936d84386d996ad293be392e83e1a31f25cb267c8f23d80cdc47a49d6af6a6452dc36e53d620a09bf535bd1889c6723774391a8d
+  metadata.gz: 648ce0189e006d1c315d644b5ed8edb8e163705119287bd7b4db451a6f2c435f7c9bae1ce59ed45436a9e4f97c7bc5ed8ab78a17110624fc134d465aaa1a1851
+  data.tar.gz: dfe6d1aeea0814fa3cf123c96ac68a8e0c55b4b1dd0d0d8ac4d32fb461e712bd656ee532767e07b42956e78a3b18e7cf62fb25c9f59896d196e3d2cd6b99da24

data/_includes/appscms/navbars/navbar.html

@@ -66,10 +66,10 @@
       
           <div class="user-modal" id="userModal">
             <div class="modal-item">
-              <div class="profile-user-avatar">GI</div>
+              <div class="profile-user-avatar">US</div>
               <div class="user-info">
-                <div class="logged-in-username">Gill</div>
-                <p class="logged-in-user-email">itsrammoudgill@gmail.com</p>
+                <div class="logged-in-username">User</div>
+                <p class="logged-in-user-email">example@gmail.com</p>
               </div>
             
             </div>
@@ -115,10 +115,10 @@
                 <div class="user-avatar" id="userAvatar" style="display: none">GI</div>
                 <div class="auth-container" id="authContainer">
                   <div id="loginForm">
-                    <h1>Log in</h1>
-                    <h2>
+                    <div>Log in</div>
+                    <div>
                       Don't have an account? <a href="#" id="showSignup">Create account</a>
-                    </h2>
+                    </div>
             
                     <div class="auth-forms">
                       <button class="social-btn google-btn" id="googleLogin">
@@ -186,11 +186,11 @@
                       Back to login
                     </div>
             
-                    <h1>Reset password</h1>
-                    <h2>
+                    <div>Reset password</div>
+                    <div>
                       Enter your email address and we'll send you a link to reset your
                       password
-                    </h2>
+                    </div>
             
                     <form id="resetPasswordForm">
                       <div class="input-group">
@@ -202,15 +202,15 @@
             
                     <div class="reset-success" id="resetSuccess">
                       <div class="success-icon">✓</div>
-                      <h3>Reset link sent</h3>
+                      <div>Reset link sent</div>
                       <p>Check your email for instructions to reset your password</p>
                     </div>
                   </div>
             
                   <!-- Sign Up Form -->
                   <div id="signupForm" style="display: none">
-                    <h1>Create your account</h1>
-                    <h2>Already have an account? <a href="#" id="showLogin">Log in</a></h2>
+                    <div>Create your account</div>
+                    <div>Already have an account? <a href="#" id="showLogin">Log in</a></div>
             
                     <div class="auth-forms">
                       <button class="social-btn google-btn" id="googleSignup">
@@ -268,7 +268,7 @@
           <div class="share-modal-overlay" id="shareModalOverlay"></div>
           <div class="share-modal" id="shareModal">
             <div class="share-modal-content">
-              <h2 class="share-modal-title">Show Us Some Love</h2>
+              <div class="share-modal-title">Show Us Some Love</div>
               <p class="share-modal-subtitle">Tell the world about {{ site.url }}</p>
 
               <div class="share-social-icons">

data/_includes/appscms/scripts/script.html

@@ -55,23 +55,26 @@ replace: "$fileName", page.fileName | replace: "$lang", page.lang | replace:
 {%- endif -%} {%- include google-analytics.html -%} {%- if site.bookmark -%} {%-
 if page.layout == "appscms-feature" -%}
 <script>
-  const toaster = document.querySelector(".toaster");
-  if (
-    !/webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-      navigator.userAgent
-    )
-  ) {
-    if (navigator.userAgent.indexOf("Mac OS X") != -1) {
-      toaster.innerHTML = `Press Command + D to Bookmark this page`;
+  (function () {
+    var toaster = document.querySelector(".toaster");
+    if (!toaster) return;
+    if (
+      !/webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+        navigator.userAgent
+      )
+    ) {
+      if (navigator.userAgent.indexOf("Mac OS X") != -1) {
+        toaster.innerHTML = `Press Command + D to Bookmark this page`;
+      } else {
+        toaster.innerHTML = `Press Ctrl + D to Bookmark this page`;
+      }
     } else {
-      toaster.innerHTML = `Press Ctrl + D to Bookmark this page`;
+      toaster.style.display = "none";
     }
-  } else {
-    toaster.style.display = "none";
-  }
-  setTimeout(() => {
-    toaster.style.display = "none";
-  }, 10000);
+    setTimeout(function () {
+      toaster.style.display = "none";
+    }, 10000);
+  })();
 </script>
 {%- endif -%} {%- endif -%}
 

data/_includes/bookmark.html

@@ -1,7 +1,192 @@
 {%- if site.bookmark -%}
-<div class="toaster">
-  <div class="toaster__body">
-    <div class="toaster__message">Bookmark this webpage</div>
-  </div>
+<style>
+  .bm-prompt {
+    position: fixed;
+    right: 28px;
+    bottom: 32px;
+    z-index: 2147483647;
+    display: flex;
+    align-items: center;
+    gap: 18px;
+    padding: 24px 22px;
+    min-height: 120px;
+    max-width: 400px;
+    background: #fff;
+    border: 1px solid #e4e7f5;
+    border-radius: 20px;
+    box-shadow: 0 28px 70px -24px rgba(27, 47, 231, 0.45), 0 6px 14px rgba(15, 23, 42, 0.08);
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
+    pointer-events: none;
+    font-family: inherit;
+  }
+
+  .bm-prompt.is-visible {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+
+  .bm-prompt::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 14%;
+    bottom: 14%;
+    width: 5px;
+    border-radius: 0 5px 5px 0;
+    background: linear-gradient(180deg, #1b2fe7, #4a5bff);
+  }
+
+  .bm-prompt__icon {
+    width: 60px;
+    height: 60px;
+    border-radius: 14px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #eef1ff, #e8edff);
+    color: #1b2fe7;
+    flex-shrink: 0;
+    box-shadow: inset 0 0 0 1px rgba(27, 47, 231, 0.1);
+  }
+
+  .bm-prompt__icon svg {
+    width: 30px;
+    height: 30px;
+  }
+
+  .bm-prompt__body {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    line-height: 1.35;
+    min-width: 0;
+  }
+
+  .bm-prompt__title {
+    font-size: 17px;
+    font-weight: 700;
+    color: #0f172a;
+    letter-spacing: -0.015em;
+  }
+
+  .bm-prompt__hint {
+    font-size: 14px;
+    color: #64748b;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+  }
+
+  .bm-prompt__hint kbd {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 30px;
+    height: 28px;
+    padding: 0 9px;
+    border-radius: 7px;
+    background: #f4f5ff;
+    border: 1px solid #d6dbec;
+    border-bottom-width: 2px;
+    color: #1b2fe7;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 13px;
+    font-weight: 700;
+    letter-spacing: 0;
+  }
+
+  .bm-prompt__close {
+    width: 32px;
+    height: 32px;
+    border-radius: 10px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    color: #94a3b8;
+    cursor: pointer;
+    flex-shrink: 0;
+    margin-left: auto;
+    transition: background 0.15s ease, color 0.15s ease;
+    padding: 0;
+  }
+
+  .bm-prompt__close:hover {
+    background: #f1f5f9;
+    color: #0f172a;
+  }
+
+  .bm-prompt__close svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  @media (max-width: 640px) {
+    .bm-prompt {
+      display: none !important;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .bm-prompt {
+      transition: opacity 0.1s linear;
+      transform: none;
+    }
+  }
+</style>
+
+<div class="bm-prompt" role="status" aria-live="polite" aria-label="Bookmark this page tip">
+  <span class="bm-prompt__icon" aria-hidden="true">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M19 21 12 16 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>
+    </svg>
+  </span>
+  <span class="bm-prompt__body">
+    <span class="bm-prompt__title">Don't lose this tool</span>
+    <span class="bm-prompt__hint">
+      Hit <kbd class="bm-prompt__k1">Ctrl</kbd> <span>+</span> <kbd>D</kbd> to bookmark &amp; come back anytime
+    </span>
+  </span>
+  <button type="button" class="bm-prompt__close" aria-label="Dismiss bookmark tip">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M18 6 6 18M6 6l12 12"/>
+    </svg>
+  </button>
 </div>
-{%- endif -%}
+
+<script>
+  (function () {
+    var el = document.querySelector('.bm-prompt');
+    if (!el) return;
+
+    var isMobile = /webOS|iPhone|iPad|iPod|Android|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    if (isMobile) { el.remove(); return; }
+
+    var isMac = /Mac OS X|Macintosh/i.test(navigator.userAgent);
+    var k = el.querySelector('.bm-prompt__k1');
+    if (k) k.textContent = isMac ? '⌘' : 'Ctrl';
+
+    var showTimer = setTimeout(function () { el.classList.add('is-visible'); }, 900);
+
+    var hideTimer = setTimeout(function () {
+      el.classList.remove('is-visible');
+      setTimeout(function () { if (el.parentNode) el.parentNode.removeChild(el); }, 350);
+    }, 15000);
+
+    var closeBtn = el.querySelector('.bm-prompt__close');
+    if (closeBtn) {
+      closeBtn.addEventListener('click', function () {
+        clearTimeout(showTimer);
+        clearTimeout(hideTimer);
+        el.classList.remove('is-visible');
+        setTimeout(function () { if (el.parentNode) el.parentNode.removeChild(el); }, 300);
+      });
+    }
+  })();
+</script>
+{%- endif -%}