UI Improvement v4

Fix broken CSS imports and addition of mp4/youtube play in hero area

lib/community_landing/icons.rb

@@ -12,6 +12,8 @@ module CommunityLanding
     STAT_LIKES_SVG   = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>'
     STAT_CHATS_SVG   = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>'
 
+    PLAY_SVG = '<svg class="cl-icon-play" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>'
+
     COMMENT_SVG = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>'
     HEART_SVG   = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>'
 

lib/community_landing/page_builder.rb

@@ -29,6 +29,7 @@ module CommunityLanding
       html << render_app_cta
       html << render_footer_desc
       html << render_footer
+      html << render_video_modal
       html << "<script>\n#{@js}\n</script>\n"
       html << "</body>\n</html>"
       html
@@ -80,12 +81,13 @@ module CommunityLanding
       navbar_bg    = hex(@s.navbar_bg_color) rescue nil
       navbar_border = @s.navbar_border_style rescue "none"
 
-      navbar_data = ""
-      navbar_data << " data-nav-bg=\"#{e(navbar_bg)}\"" if navbar_bg
-      navbar_data << " data-nav-border=\"#{e(navbar_border)}\"" if navbar_border && navbar_border != "none"
+      nav_style_parts = []
+      nav_style_parts << "--cl-nav-bg: #{navbar_bg}" if navbar_bg
+      nav_style_parts << "--cl-nav-border: 1px #{navbar_border} var(--cl-border)" if navbar_border && navbar_border != "none"
+      nav_style = nav_style_parts.any? ? " style=\"#{nav_style_parts.join('; ')}\"" : ""
 
       html = +""
-      html << "<nav class=\"cl-navbar\" id=\"cl-navbar\"#{navbar_data}>\n"
+      html << "<nav class=\"cl-navbar\" id=\"cl-navbar\"#{nav_style}>\n"
       if @s.scroll_progress_enabled
         html << "<div class=\"cl-progress-bar\"></div>\n"
       end
@@ -158,16 +160,33 @@ module CommunityLanding
       html << "</div>\n</div>\n"
 
       hero_image_urls_raw = @s.hero_image_urls.presence
+      hero_video = @s.hero_video_url.presence rescue nil
+      has_images = false
+
       if hero_image_urls_raw
         urls = hero_image_urls_raw.split("|").map(&:strip).reject(&:empty?).first(5)
         if urls.any?
+          has_images = true
           img_max_h = @s.hero_image_max_height rescue 500
           html << "<div class=\"cl-hero__image\" data-hero-images=\"#{e(urls.to_json)}\">\n"
           html << "<img src=\"#{urls.first}\" alt=\"#{e(site_name)}\" class=\"cl-hero__image-img\" style=\"max-height: #{img_max_h}px;\">\n"
+          if hero_video
+            html << "<button class=\"cl-hero-play\" data-video-url=\"#{e(hero_video)}\" aria-label=\"Play video\">"
+            html << "<span class=\"cl-hero-play__icon\">#{Icons::PLAY_SVG}</span>"
+            html << "</button>\n"
+          end
           html << "</div>\n"
         end
       end
 
+      if hero_video && !has_images
+        html << "<div class=\"cl-hero__image cl-hero__image--video-only\">\n"
+        html << "<button class=\"cl-hero-play\" data-video-url=\"#{e(hero_video)}\" aria-label=\"Play video\">"
+        html << "<span class=\"cl-hero-play__icon\">#{Icons::PLAY_SVG}</span>"
+        html << "</button>\n"
+        html << "</div>\n"
+      end
+
       html << "</div></section>\n"
       html
     end
@@ -458,6 +477,20 @@ module CommunityLanding
       end
     end
 
+    def render_video_modal
+      return "" unless (@s.hero_video_url.presence rescue nil)
+
+      html = +""
+      html << "<div class=\"cl-video-modal\" id=\"cl-video-modal\">\n"
+      html << "<div class=\"cl-video-modal__backdrop\"></div>\n"
+      html << "<div class=\"cl-video-modal__content\">\n"
+      html << "<button class=\"cl-video-modal__close\" aria-label=\"Close video\">&times;</button>\n"
+      html << "<div class=\"cl-video-modal__player\" id=\"cl-video-player\"></div>\n"
+      html << "</div>\n"
+      html << "</div>\n"
+      html
+    end
+
     def theme_toggle
       "<button class=\"cl-theme-toggle\" aria-label=\"Toggle theme\">#{Icons::SUN_SVG}#{Icons::MOON_SVG}</button>\n"
     end

lib/community_landing/style_builder.rb

@@ -25,12 +25,14 @@ module CommunityLanding
       stat_icon_bg = hex(@s.stat_icon_bg_color.presence) rescue nil
       stat_counter = hex(@s.stat_counter_color.presence) rescue nil
       space_card_bg = hex(@s.groups_card_bg_color.presence) rescue nil
+      topic_card_bg = hex(@s.topics_card_bg_color.presence) rescue nil
       accent_rgb   = hex_to_rgb(accent)
       stat_icon_rgb = hex_to_rgb(stat_icon)
 
       stat_icon_bg_val = stat_icon_bg || "rgba(#{stat_icon_rgb}, 0.1)"
       stat_counter_val = stat_counter || "var(--cl-text-strong)"
       space_card_bg_val = space_card_bg || "var(--cl-card)"
+      topic_card_bg_val = topic_card_bg || "var(--cl-card)"
 
       about_bg_extra = about_bg_img ? ", url('#{about_bg_img}') center/cover no-repeat" : ""
 
@@ -49,6 +51,7 @@ module CommunityLanding
   --cl-stat-icon-bg: #{stat_icon_bg_val};
   --cl-stat-counter-color: #{stat_counter_val};
   --cl-space-card-bg: #{space_card_bg_val};
+  --cl-topic-card-bg: #{topic_card_bg_val};
   --cl-about-gradient: linear-gradient(135deg, #{about_g1}, #{about_g2}, #{about_g3})#{about_bg_extra};
   --cl-app-gradient: linear-gradient(135deg, #{app_g1}, #{app_g2}, #{app_g3});
 }
@@ -66,6 +69,7 @@ module CommunityLanding
   --cl-stat-icon-bg: #{stat_icon_bg_val};
   --cl-stat-counter-color: #{stat_counter_val};
   --cl-space-card-bg: #{space_card_bg_val};
+  --cl-topic-card-bg: #{topic_card_bg_val};
   --cl-about-gradient: linear-gradient(135deg, #{about_g1}, #{about_g2}, #{about_g3})#{about_bg_extra};
   --cl-app-gradient: linear-gradient(135deg, #{app_g1}, #{app_g2}, #{app_g3});
 }