From 13d63d101e12526cf33f1697c9fd46c2edbdec16 Mon Sep 17 00:00:00 2001
From: DPN MW <dpnmediaworks@gmail.com>
Date: Wed, 11 Mar 2026 10:25:11 -0400
Subject: [PATCH] Designer badge added

---
 .../javascripts/community_landing/landing.js  | 19 ++++-
 .../stylesheets/community_landing/landing.css | 81 +++++++++++++++++++
 lib/community_landing/page_builder.rb         | 20 +++++
 3 files changed, 119 insertions(+), 1 deletion(-)

diff --git a/assets/javascripts/community_landing/landing.js b/assets/javascripts/community_landing/landing.js
index 57e760d..0e1c855 100644
--- a/assets/javascripts/community_landing/landing.js
+++ b/assets/javascripts/community_landing/landing.js
@@ -173,7 +173,7 @@
     function openVideoModal(url) {
       var ytId = parseYouTubeId(url);
       if (ytId) {
-        videoPlayer.innerHTML = '<iframe src="https://www.youtube-nocookie.com/embed/' + ytId + '?autoplay=1&rel=0" allow="autoplay; encrypted-media; fullscreen" referrerpolicy="origin" frameborder="0"></iframe>';
+        videoPlayer.innerHTML = '<iframe src="https://www.youtube-nocookie.com/embed/' + ytId + '?autoplay=1&rel=0&modestbranding=1&iv_load_policy=3" allow="autoplay; encrypted-media; fullscreen" referrerpolicy="origin" frameborder="0"></iframe>';
       } else {
         videoPlayer.innerHTML = '<video src="' + url + '" controls autoplay></video>';
       }
@@ -226,4 +226,21 @@
     });
   });
 
+  // ═══════════════════════════════════════════════════════════════════
+  // 9. DESIGNER BADGE TOOLTIP
+  // ═══════════════════════════════════════════════════════════════════
+  var designerBadge = $("#cl-designer-badge");
+  var designerTooltip = $("#cl-designer-tooltip");
+  if (designerBadge && designerTooltip) {
+    designerBadge.addEventListener("click", function (e) {
+      if (e.target.closest("a")) return;
+      designerTooltip.classList.toggle("active");
+    });
+    document.addEventListener("click", function (e) {
+      if (!designerBadge.contains(e.target)) {
+        designerTooltip.classList.remove("active");
+      }
+    });
+  }
+
 })();
diff --git a/assets/stylesheets/community_landing/landing.css b/assets/stylesheets/community_landing/landing.css
index 584b9e4..f939886 100644
--- a/assets/stylesheets/community_landing/landing.css
+++ b/assets/stylesheets/community_landing/landing.css
@@ -2309,4 +2309,85 @@ html, .cl-body {
   .cl-app-cta__badges {
     justify-content: center;
   }
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+   DESIGNER BADGE — floating bottom-right
+   ═══════════════════════════════════════════════════════════════════ */
+.cl-designer-badge {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 9999;
+  cursor: pointer;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+  opacity: 0.7;
+}
+.cl-designer-badge:hover {
+  opacity: 1;
+  transform: scale(1.1);
+}
+.cl-designer-badge__logo {
+  width: 36px;
+  height: 36px;
+  display: block;
+  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
+}
+.cl-designer-badge__logo--dark {
+  display: block;
+}
+.cl-designer-badge__logo--light {
+  display: none;
+}
+[data-theme="light"] .cl-designer-badge__logo--dark {
+  display: none;
+}
+[data-theme="light"] .cl-designer-badge__logo--light {
+  display: block;
+}
+.cl-designer-badge__tooltip {
+  position: absolute;
+  bottom: calc(100% + 10px);
+  right: 0;
+  background: var(--cl-glass, rgba(12, 12, 25, 0.85));
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--cl-border, rgba(255, 255, 255, 0.08));
+  border-radius: var(--cl-radius-sm, 10px);
+  padding: 10px 14px;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transform: translateY(6px);
+  transition: opacity 0.25s ease, transform 0.25s ease;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+.cl-designer-badge__tooltip.active {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+.cl-designer-badge__tooltip::after {
+  content: "";
+  position: absolute;
+  bottom: -6px;
+  right: 12px;
+  width: 12px;
+  height: 12px;
+  background: var(--cl-glass, rgba(12, 12, 25, 0.85));
+  border-right: 1px solid var(--cl-border, rgba(255, 255, 255, 0.08));
+  border-bottom: 1px solid var(--cl-border, rgba(255, 255, 255, 0.08));
+  transform: rotate(45deg);
+}
+.cl-designer-badge__tooltip a {
+  color: var(--cl-accent, #d4a24e);
+  text-decoration: none;
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  transition: color 0.2s ease;
+}
+.cl-designer-badge__tooltip a:hover {
+  color: var(--cl-accent-hover, #c4922e);
+  text-decoration: underline;
 }
\ No newline at end of file
diff --git a/lib/community_landing/page_builder.rb b/lib/community_landing/page_builder.rb
index ddbae4e..dd07b7b 100644
--- a/lib/community_landing/page_builder.rb
+++ b/lib/community_landing/page_builder.rb
@@ -42,6 +42,7 @@ module CommunityLanding
       html << render_footer_desc
       html << render_footer
       html << render_video_modal
+      html << render_designer_badge
       html << "<script>\n#{@js}\n</script>\n"
       html << "</body>\n</html>"
       html
@@ -861,6 +862,25 @@ module CommunityLanding
       html
     end
 
+    def render_designer_badge
+      dark_logo  = File.join(CommunityLanding::PLUGIN_DIR, "..", "logo-dark.png")
+      light_logo = File.join(CommunityLanding::PLUGIN_DIR, "..", "logo-light.png")
+      return "" unless File.exist?(dark_logo) && File.exist?(light_logo)
+
+      dark_b64  = Base64.strict_encode64(File.binread(dark_logo))
+      light_b64 = Base64.strict_encode64(File.binread(light_logo))
+
+      html = +""
+      html << "<div class=\"cl-designer-badge\" id=\"cl-designer-badge\">\n"
+      html << "  <div class=\"cl-designer-badge__tooltip\" id=\"cl-designer-tooltip\">\n"
+      html << "    <a href=\"https://www.dpnmw.com\" target=\"_blank\" rel=\"noopener noreferrer\">Interface design by dpnmw.com</a>\n"
+      html << "  </div>\n"
+      html << "  <img class=\"cl-designer-badge__logo cl-designer-badge__logo--dark\" src=\"data:image/png;base64,#{dark_b64}\" alt=\"Designer\">\n"
+      html << "  <img class=\"cl-designer-badge__logo cl-designer-badge__logo--light\" src=\"data:image/png;base64,#{light_b64}\" alt=\"Designer\">\n"
+      html << "</div>\n"
+      html
+    end
+
     def render_social_icons
       icons = {
         social_twitter_url:   Icons::SOCIAL_TWITTER_SVG,