mirror of
https://github.com/dpnmw/community-landing.git
synced 2026-03-18 09:27:16 +00:00
UI Improvement v4
Fix broken CSS imports and addition of mp4/youtube play in hero area
This commit is contained in:
@@ -25,7 +25,26 @@
|
||||
var progressBar = $(".cl-progress-bar");
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
// 2. NAVBAR & SCROLL
|
||||
// 2. HERO IMAGE RANDOM CYCLE
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
(function initHeroImage() {
|
||||
var container = $(".cl-hero__image[data-hero-images]");
|
||||
if (!container) return;
|
||||
try {
|
||||
var images = JSON.parse(container.getAttribute("data-hero-images"));
|
||||
if (!images || images.length < 2) return;
|
||||
var img = $(".cl-hero__image-img", container);
|
||||
if (!img) return;
|
||||
var pick = images[Math.floor(Math.random() * images.length)];
|
||||
img.style.opacity = "0";
|
||||
img.src = pick;
|
||||
img.onload = function () { img.style.opacity = ""; };
|
||||
img.onerror = function () { img.src = images[0]; img.style.opacity = ""; };
|
||||
} catch (e) {}
|
||||
})();
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
// 3. NAVBAR & SCROLL
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
var navbar = $("#cl-navbar");
|
||||
if (navbar) {
|
||||
@@ -53,7 +72,7 @@
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
// 3. ENHANCED REVEAL (Staggered)
|
||||
// 4. ENHANCED REVEAL (Staggered)
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
if ("IntersectionObserver" in window) {
|
||||
var revealObserver = new IntersectionObserver(function (entries) {
|
||||
@@ -74,7 +93,7 @@
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
// 4. MOUSE PARALLAX
|
||||
// 5. MOUSE PARALLAX
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
var heroImage = $(".cl-hero__image-img");
|
||||
var orbs = $$(".cl-orb");
|
||||
@@ -97,7 +116,7 @@
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
// 5. STAT COUNTER
|
||||
// 6. STAT COUNTER
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
function animateCount(el) {
|
||||
if (el.classList.contains("counted")) return;
|
||||
@@ -130,4 +149,57 @@
|
||||
var sr = $("#cl-stats-row"); if (sr) statsObs.observe(sr);
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
// 7. VIDEO MODAL
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
var videoModal = $("#cl-video-modal");
|
||||
var videoPlayer = $("#cl-video-player");
|
||||
|
||||
if (videoModal && videoPlayer) {
|
||||
function parseYouTubeId(url) {
|
||||
var match = url.match(/(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))([^&?#]+)/);
|
||||
return match ? match[1] : null;
|
||||
}
|
||||
|
||||
function openVideoModal(url) {
|
||||
var ytId = parseYouTubeId(url);
|
||||
if (ytId) {
|
||||
videoPlayer.innerHTML = '<iframe src="https://www.youtube.com/embed/' + ytId + '?autoplay=1&rel=0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
|
||||
} else {
|
||||
videoPlayer.innerHTML = '<video src="' + url + '" controls autoplay></video>';
|
||||
}
|
||||
videoModal.classList.add("active");
|
||||
document.body.style.overflow = "hidden";
|
||||
}
|
||||
|
||||
function closeVideoModal() {
|
||||
videoModal.classList.remove("active");
|
||||
videoPlayer.innerHTML = "";
|
||||
document.body.style.overflow = "";
|
||||
}
|
||||
|
||||
$$(".cl-hero-play").forEach(function (btn) {
|
||||
btn.addEventListener("click", function () {
|
||||
var url = btn.getAttribute("data-video-url");
|
||||
if (url) openVideoModal(url);
|
||||
});
|
||||
});
|
||||
|
||||
var closeBtn = $(".cl-video-modal__close", videoModal);
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener("click", closeVideoModal);
|
||||
}
|
||||
|
||||
var backdrop = $(".cl-video-modal__backdrop", videoModal);
|
||||
if (backdrop) {
|
||||
backdrop.addEventListener("click", closeVideoModal);
|
||||
}
|
||||
|
||||
document.addEventListener("keydown", function (e) {
|
||||
if (e.key === "Escape" && videoModal.classList.contains("active")) {
|
||||
closeVideoModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
@@ -362,6 +362,18 @@
|
||||
padding: 0.55rem 0;
|
||||
}
|
||||
|
||||
.cl-progress-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 3px;
|
||||
width: 0%;
|
||||
background: var(--cl-accent);
|
||||
z-index: 1001;
|
||||
transition: width 0.1s linear;
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
|
||||
.cl-navbar__inner {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
@@ -663,6 +675,213 @@
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* ── Hero Image ── */
|
||||
.cl-hero__image {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cl-hero__image-img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--cl-radius);
|
||||
object-fit: cover;
|
||||
transition: opacity 0.6s ease;
|
||||
}
|
||||
|
||||
/* ── Hero Background Image (flat mode) ── */
|
||||
.cl-hero__bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
z-index: 0;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.cl-hero__bg::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to bottom, transparent 60%, var(--cl-bg));
|
||||
}
|
||||
|
||||
/* ── Hero Card Mode ── */
|
||||
.cl-hero--card .cl-hero__inner {
|
||||
background: var(--cl-card);
|
||||
border: 1px solid var(--cl-border);
|
||||
border-radius: var(--cl-radius);
|
||||
padding: 3rem 2.5rem;
|
||||
backdrop-filter: var(--cl-blur);
|
||||
-webkit-backdrop-filter: var(--cl-blur);
|
||||
box-shadow: 0 8px 32px var(--cl-shadow);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.cl-hero--card .cl-hero__inner {
|
||||
padding: 4rem 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Hero Video Play Button ── */
|
||||
.cl-hero-play {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 5;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: var(--cl-accent);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 8px 32px var(--cl-accent-glow), 0 0 0 0 var(--cl-accent-glow);
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
animation: cl-play-pulse 2s infinite;
|
||||
}
|
||||
|
||||
.cl-hero-play:hover {
|
||||
transform: translate(-50%, -50%) scale(1.1);
|
||||
background: var(--cl-accent-hover);
|
||||
box-shadow: 0 12px 40px var(--cl-accent-glow);
|
||||
}
|
||||
|
||||
.cl-hero-play__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.cl-hero-play__icon svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
@keyframes cl-play-pulse {
|
||||
0%, 100% { box-shadow: 0 8px 32px var(--cl-accent-glow), 0 0 0 0 var(--cl-accent-glow); }
|
||||
50% { box-shadow: 0 8px 32px var(--cl-accent-glow), 0 0 0 16px rgba(212, 162, 78, 0); }
|
||||
}
|
||||
|
||||
.cl-hero__image--video-only {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 200px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cl-hero__image--video-only .cl-hero-play {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
transform: none;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.cl-hero__image--video-only .cl-hero-play:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.cl-hero__image--video-only .cl-hero-play__icon svg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
/* ── Video Modal / Lightbox ── */
|
||||
.cl-video-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 10000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cl-video-modal.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cl-video-modal__backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.cl-video-modal__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 90vw;
|
||||
max-width: 960px;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: var(--cl-radius);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 32px 64px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.cl-video-modal__close {
|
||||
position: absolute;
|
||||
top: -48px;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.cl-video-modal__close:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.cl-video-modal__player {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.cl-video-modal__player iframe,
|
||||
.cl-video-modal__player video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.cl-video-modal__content {
|
||||
width: 95vw;
|
||||
border-radius: var(--cl-radius-sm);
|
||||
}
|
||||
|
||||
.cl-video-modal__close {
|
||||
top: -44px;
|
||||
right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════
|
||||
3. PREMIUM STATS — icon with bg, label, animated counter
|
||||
═══════════════════════════════════════════════════════════════════ */
|
||||
@@ -909,7 +1128,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1.5rem;
|
||||
background: var(--cl-card);
|
||||
background: var(--cl-topic-card-bg, var(--cl-card));
|
||||
border: 1px solid var(--cl-border);
|
||||
border-radius: var(--cl-radius);
|
||||
text-decoration: none;
|
||||
@@ -983,56 +1202,67 @@
|
||||
6. TOP CREATORS — pill badges
|
||||
═══════════════════════════════════════════════════════════════════ */
|
||||
.cl-creators {
|
||||
padding: 1.5rem 0 2rem;
|
||||
padding: 2.5rem 0 3rem;
|
||||
}
|
||||
|
||||
.cl-creators__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.6rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.cl-creator-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.35rem 0.85rem 0.35rem 0.35rem;
|
||||
gap: 0.75rem;
|
||||
padding: 0.6rem 1.25rem 0.6rem 0.6rem;
|
||||
background: var(--cl-card);
|
||||
border: 1px solid var(--cl-border);
|
||||
border-radius: 50px;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
backdrop-filter: var(--cl-blur);
|
||||
-webkit-backdrop-filter: var(--cl-blur);
|
||||
}
|
||||
|
||||
.cl-creator-pill:hover {
|
||||
border-color: var(--cl-border-hover);
|
||||
background: var(--cl-accent-subtle);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 24px var(--cl-shadow);
|
||||
}
|
||||
|
||||
.cl-creator-pill__avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--cl-border);
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.cl-creator-pill:hover .cl-creator-pill__avatar {
|
||||
border-color: var(--cl-accent);
|
||||
}
|
||||
|
||||
.cl-creator-pill__name {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
color: var(--cl-text-strong);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cl-creator-pill__count {
|
||||
font-size: 0.72rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--cl-accent);
|
||||
white-space: nowrap;
|
||||
font-weight: 700;
|
||||
font-weight: 800;
|
||||
margin-left: auto;
|
||||
padding-left: 0.4rem;
|
||||
min-width: 1.2em;
|
||||
padding: 0.15rem 0.6rem;
|
||||
min-width: 1.5em;
|
||||
text-align: center;
|
||||
background: var(--cl-accent-subtle);
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════
|
||||
@@ -1435,4 +1665,8 @@
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.cl-hero-play {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
@@ -35,6 +35,7 @@ en:
|
||||
hero_primary_button_url: "URL the primary button links to. Use a relative path like /latest or an absolute URL."
|
||||
hero_secondary_button_label: "Text on the secondary (outlined) CTA button."
|
||||
hero_secondary_button_url: "URL the secondary button links to."
|
||||
hero_video_url: "URL for a hero video. Supports MP4 and YouTube links. A play button appears in the hero area; clicking opens a lightbox modal with the video."
|
||||
hero_bg_dark: "Background color for the hero section in dark mode. Hex value. Leave blank for default."
|
||||
hero_bg_light: "Background color for the hero section in light mode. Hex value. Leave blank for default."
|
||||
hero_min_height: "Minimum height for the hero section in pixels. Set to 0 for auto height."
|
||||
@@ -77,6 +78,7 @@ en:
|
||||
topics_enabled: "━━ ROW 5: TRENDING ━━ — Show the Trending Discussions section: a horizontally scrollable row of topic cards showing the most active discussions. Each card displays category badge, title, reply count, and like count — all live data. Supports drag-to-scroll and native swipe."
|
||||
topics_title: "Heading text above the scrollable topic cards."
|
||||
topics_count: "Number of trending topic cards to display."
|
||||
topics_card_bg_color: "Background color for each trending topic card. Leave blank for default card styling."
|
||||
topics_bg_dark: "Background color for the trending section in dark mode. Leave blank for default."
|
||||
topics_bg_light: "Background color for the trending section in light mode. Leave blank for default."
|
||||
topics_min_height: "Minimum height for the trending section in pixels. Set to 0 for auto height."
|
||||
|
||||
@@ -82,7 +82,7 @@ plugins:
|
||||
type: string
|
||||
navbar_bg_color:
|
||||
default: ""
|
||||
type: string
|
||||
type: color
|
||||
navbar_border_style:
|
||||
default: "none"
|
||||
type: enum
|
||||
@@ -127,12 +127,15 @@ plugins:
|
||||
hero_secondary_button_url:
|
||||
default: "/login"
|
||||
type: string
|
||||
hero_video_url:
|
||||
default: ""
|
||||
type: string
|
||||
hero_bg_dark:
|
||||
default: ""
|
||||
type: string
|
||||
type: color
|
||||
hero_bg_light:
|
||||
default: ""
|
||||
type: string
|
||||
type: color
|
||||
hero_min_height:
|
||||
default: 0
|
||||
type: integer
|
||||
@@ -158,7 +161,7 @@ plugins:
|
||||
type: color
|
||||
stat_icon_bg_color:
|
||||
default: ""
|
||||
type: string
|
||||
type: color
|
||||
stat_icon_shape:
|
||||
default: "circle"
|
||||
type: enum
|
||||
@@ -167,7 +170,7 @@ plugins:
|
||||
- rounded
|
||||
stat_counter_color:
|
||||
default: ""
|
||||
type: string
|
||||
type: color
|
||||
stat_members_label:
|
||||
default: "Members"
|
||||
type: string
|
||||
@@ -185,10 +188,10 @@ plugins:
|
||||
type: string
|
||||
stats_bg_dark:
|
||||
default: ""
|
||||
type: string
|
||||
type: color
|
||||
stats_bg_light:
|
||||
default: ""
|
||||
type: string
|
||||
type: color
|
||||
stats_min_height:
|
||||
default: 0
|
||||
type: integer
|
||||
@@ -241,10 +244,10 @@ plugins:
|
||||
type: string
|
||||
about_bg_dark:
|
||||
default: ""
|
||||
type: string
|
||||
type: color
|
||||
about_bg_light:
|
||||
default: ""
|
||||
type: string
|
||||
type: color
|
||||
about_min_height:
|
||||
default: 0
|
||||
type: integer
|
||||
@@ -271,12 +274,15 @@ plugins:
|
||||
topics_count:
|
||||
default: 5
|
||||
type: integer
|
||||
topics_card_bg_color:
|
||||
default: ""
|
||||
type: color
|
||||
topics_bg_dark:
|
||||
default: ""
|
||||
type: string
|
||||
type: color
|
||||
topics_bg_light:
|
||||
default: ""
|
||||
type: string
|
||||
type: color
|
||||
topics_min_height:
|
||||
default: 0
|
||||
type: integer
|
||||
@@ -308,10 +314,10 @@ plugins:
|
||||
type: integer
|
||||
contributors_bg_dark:
|
||||
default: ""
|
||||
type: string
|
||||
type: color
|
||||
contributors_bg_light:
|
||||
default: ""
|
||||
type: string
|
||||
type: color
|
||||
contributors_min_height:
|
||||
default: 0
|
||||
type: integer
|
||||
@@ -343,13 +349,13 @@ plugins:
|
||||
type: list
|
||||
groups_card_bg_color:
|
||||
default: ""
|
||||
type: string
|
||||
type: color
|
||||
groups_bg_dark:
|
||||
default: ""
|
||||
type: string
|
||||
type: color
|
||||
groups_bg_light:
|
||||
default: ""
|
||||
type: string
|
||||
type: color
|
||||
groups_min_height:
|
||||
default: 0
|
||||
type: integer
|
||||
@@ -414,10 +420,10 @@ plugins:
|
||||
type: string
|
||||
app_cta_bg_dark:
|
||||
default: ""
|
||||
type: string
|
||||
type: color
|
||||
app_cta_bg_light:
|
||||
default: ""
|
||||
type: string
|
||||
type: color
|
||||
app_cta_min_height:
|
||||
default: 0
|
||||
type: integer
|
||||
@@ -446,10 +452,10 @@ plugins:
|
||||
type: string
|
||||
footer_bg_dark:
|
||||
default: ""
|
||||
type: string
|
||||
type: color
|
||||
footer_bg_light:
|
||||
default: ""
|
||||
type: string
|
||||
type: color
|
||||
footer_border_style:
|
||||
default: "solid"
|
||||
type: enum
|
||||
|
||||
@@ -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>'
|
||||
|
||||
|
||||
@@ -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\">×</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
|
||||
|
||||
@@ -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});
|
||||
}
|
||||
|
||||
@@ -44,7 +44,9 @@ after_initialize do
|
||||
"script-src 'self' 'unsafe-inline'; " \
|
||||
"style-src 'self' 'unsafe-inline'; " \
|
||||
"img-src 'self' #{base_url} data: https:; " \
|
||||
"font-src 'self' #{base_url}; " \
|
||||
"font-src 'self' #{base_url} https://fonts.gstatic.com; " \
|
||||
"media-src 'self' https:; " \
|
||||
"frame-src https://www.youtube.com https://www.youtube-nocookie.com; " \
|
||||
"frame-ancestors 'self'"
|
||||
response.headers["Content-Security-Policy"] = csp
|
||||
|
||||
|
||||
Reference in New Issue
Block a user