Skip to content

fix: make width related changes in footer #151

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: dev-old-18-09-25
Choose a base branch
from
Open

fix: make width related changes in footer #151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ae672bf
fix: make width related changes in footer
Monil-KTX Sep 8, 2025
52e0d13
feat: open youtube video popup on click of overview button
Monil-KTX Sep 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 48 additions & 9 deletions overrides/partials/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,32 @@
IN THE SOFTWARE.
-->

<style>
.custom-container {
max-width: 100%; /* container: full width by default */
margin-left: auto; /* mx-auto: horizontal centering */
margin-right: auto;
padding-left: 1rem; /* px-4: padding left/right 1rem (16px) */
padding-right: 1rem;
padding-top: 2.5rem; /* py-10: padding top/bottom 2.5rem (40px) */
padding-bottom: 2.5rem;
}
@media (min-width: 1024px) {
/* lg:px-8: 1024px breakpoint */
.custom-container {
padding-left: 2rem; /* 2rem = 32px */
padding-right: 2rem;
}
}
@media (min-width: 1280px) {
/* xl:px-12: 1280px breakpoint */
.custom-container {
padding-left: 8rem; /* 3rem = 48px */
padding-right: 8rem;
}
}
</style>

<footer class="relative bg-[#121212] w-full">
<!-- Background SVG -->
<svg
Expand Down Expand Up @@ -73,16 +99,19 @@
</defs>
</svg>

<div class="relative container mx-auto px-4 py-10 lg:px-8 xl:px-12">
<div class="relative custom-container">
<div class="flex flex-col lg:flex-row gap-6">
<!-- Footer Grid -->
<div
id="footer-columns"
class="w-full lg:w-[75%] grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6"
class="w-full lg:w-[75%] grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap -6"
></div>

<!-- Newsletter -->
<div class="rounded-lg text-center mx-auto">
<div
class="rounded-lg text-center mx-auto w-70"
style="width: 20rem; max-width: 20rem"
>
<form id="newsletter-form" name="newsletter" novalidate>
<h2 class="text-white font-medium text-lg mb-2 relative inline-block">
Stay Updated
Expand Down Expand Up @@ -126,7 +155,8 @@ <h2 class="text-white font-medium text-lg mb-2 relative inline-block">
</div>

<p class="text-xs text-[rgba(255,255,255,0.6)]">
By subscribing, you agree to receive product and marketing related updates from OpenObserve.
By subscribing, you agree to receive product and marketing related
updates from OpenObserve.
</p>
</form>
<div
Expand Down Expand Up @@ -181,10 +211,13 @@ <h2 class="text-white font-medium text-lg mb-2 relative inline-block">
showToast("Subscribed successfully with: " + email);
form.reset();
// Segment tracking
if (window.analytics && typeof window.analytics.track === "function") {
if (
window.analytics &&
typeof window.analytics.track === "function"
) {
window.analytics.track("O2 Website - Newsletter Signup", {
email: email,
source: "website"
source: "website",
});
}
} else {
Expand Down Expand Up @@ -363,11 +396,11 @@ <h2 class="whitespace-nowrap text-sm">SOC2 Type II</h2>
<div
class="border-t border-gray-700 mt-10 pt-5 flex flex-col lg:flex-row justify-between items-center text-white gap-4"
>
<div class="text-center text-xs lg:text-left">
<div class="text-center lg:text-left" style="font-size: 0.6rem">
<p class="">OpenObserve Inc. © <span id="current-year"></span></p>
<p>3000 Sand Hill Rd Building 1, Suite 260, Menlo Park, CA 94025</p>
</div>
<ul class="flex flex-wrap gap-4 text-xs text-gray-300">
<ul class="flex flex-wrap gap-4 text-gray-300" style="font-size: 0.8rem">
<li class="hover:text-[#7782FF]">
<a href="/policies/terms-of-service/" target="_blank"
>Terms of Service</a
Expand All @@ -376,6 +409,11 @@ <h2 class="whitespace-nowrap text-sm">SOC2 Type II</h2>
<li class="hover:text-[#7782FF]">
<a href="/policies/privacy-policy/" target="_blank">Privacy Policy</a>
</li>
<li class="hover:text-[#7782FF]">
<a href="/security-compliance/" target="_blank"
>Security & Compliance</a
>
</li>
</ul>
<ul class="flex gap-2">
<li
Expand Down Expand Up @@ -516,6 +554,7 @@ <h2 class="whitespace-nowrap text-sm">SOC2 Type II</h2>
{ text: "Careers", link: "/careers/" },
{ text: "Contact Us", link: "/contact-us/" },
{ text: "Contact Sales", link: "/contact-sales/" },
{ text: "Partners", link: "/partners/" },
{ text: "Enterprise License", link: "/enterprise-license/" },
],
},
Expand All @@ -527,7 +566,7 @@ <h2 class="whitespace-nowrap text-sm">SOC2 Type II</h2>
<h2 class="text-white font-medium text-base mb-3">${
section.title
}</h2>
<ul class="space-y-2 text-gray-300 text-xs">
<ul class="space-y-2 text-gray-300 text-xs" style="font-size: .80rem;">
${section.items
.map(
(item) => `<li class="hover:text-[#7782FF]">
Expand Down
163 changes: 161 additions & 2 deletions overrides/partials/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,18 @@
</p>
</div>
<div class="landing-hero-buttons">
<a href="overview/" class="primary-button">
<button
id="overview-video-btn"
class="primary-button"
type="button"
>
<span class="landing-btn-content">
<span class="landing-play-icon">
<img src="/docs/assets/view.svg" alt="" />
</span>
<span>Overview</span>
</span>
</a>
</button>
<a href="/downloads/" class="primary-button">
<span class="landing-btn-content">
<span class="landing-play-icon">
Expand Down Expand Up @@ -405,4 +409,159 @@ <h3>Contact Sales</h3>
</main>
</div>
</div>

<!-- YouTube Video Popup Script -->
<script>
document.addEventListener("DOMContentLoaded", function () {
const overviewBtn = document.getElementById("overview-video-btn");

if (overviewBtn) {
overviewBtn.addEventListener("click", function () {
// Extract video ID from the YouTube URL
const videoUrl =
"https://www.youtube.com/embed/C0GH5Ox8NnY?si=Xm-tEpbnm-iywGqH";
const videoId = extractVideoId(videoUrl);

if (videoId) {
openVideoPopup(videoId);
}
});
}

function extractVideoId(url) {
try {
const urlObj = new URL(url);
if (urlObj.hostname.includes("youtu.be")) {
return urlObj.pathname.slice(1);
}
if (urlObj.hostname.includes("youtube.com")) {
// Handle /embed/ URLs
if (urlObj.pathname.includes("/embed/")) {
return urlObj.pathname.split("/embed/")[1].split("?")[0];
}
// Handle regular watch URLs
return urlObj.searchParams.get("v");
}
return null;
} catch {
return null;
}
}

function openVideoPopup(videoId) {
// Create popup overlay
const popupOverlay = document.createElement("div");
popupOverlay.style.cssText = `
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: rgba(0,0,0,0.8) !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
z-index: 99999 !important;
animation: fadeIn 0.3s ease;
`;

const popupContent = document.createElement("div");
popupContent.style.cssText = `
position: relative;
background: #000;
border-radius: 10px;
max-width: 90%;
max-height: 90%;
box-shadow: 0 0 20px #000;
`;

const iframe = document.createElement("iframe");
iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0`;
iframe.allow =
"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
iframe.allowFullscreen = true;
iframe.style.cssText = `
display: block;
width: 80vw;
height: calc(80vw * 9 / 16);
max-width: 1200px;
max-height: 675px;
border: none;
border-radius: 10px;
`;

// Responsive adjustments
if (window.innerWidth <= 600) {
iframe.style.width = "95vw";
iframe.style.height = "calc(95vw * 9 / 16)";
} else if (window.innerWidth <= 900) {
iframe.style.width = "90vw";
iframe.style.height = "calc(90vw * 9 / 16)";
}

const closeBtn = document.createElement("div");
closeBtn.textContent = "×";
closeBtn.style.cssText = `
position: absolute;
top: -15px;
right: -10px;
background: #fff;
border-radius: 50%;
border: 2px solid #999;
width: 40px;
height: 40px;
font-weight: bold;
font-size: 24px;
line-height: 36px;
text-align: center;
cursor: pointer;
user-select: none;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
color: #333;
transition: all 0.2s ease;
`;

// Hover effect for close button
closeBtn.addEventListener("mouseenter", function () {
this.style.backgroundColor = "#f0f0f0";
this.style.transform = "scale(1.1)";
});

closeBtn.addEventListener("mouseleave", function () {
this.style.backgroundColor = "#fff";
this.style.transform = "scale(1)";
});

// Close popup function
function closePopup() {
if (popupOverlay && document.body.contains(popupOverlay)) {
popupOverlay.remove();
document.removeEventListener("keydown", handleEscape);
document.body.style.overflow = "";
}
}

// Handle ESC key
function handleEscape(e) {
if (e.key === "Escape") closePopup();
}

// Add event listeners
closeBtn.addEventListener("click", closePopup);
popupOverlay.addEventListener("click", (e) => {
if (e.target === popupOverlay) closePopup();
});
document.addEventListener("keydown", handleEscape);

// Prevent body scroll when popup is open
document.body.style.overflow = "hidden";

// Assemble and show popup
popupContent.appendChild(closeBtn);
popupContent.appendChild(iframe);
popupOverlay.appendChild(popupContent);
document.body.appendChild(popupOverlay);
}
});
</script>
{% endblock %}