github/oneuptime
1
1
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-04-06 00:32:12 +02:00
Code Issues 193 Packages Projects Releases Wiki Activity
Files
9d0afe0d362f1c13b9905156c98fb338c1b4d7c1
oneuptime/Home/Views/Partials/proudly-open-source.ejs

305 lines
18 KiB
Plaintext
Raw Blame History

<section id="proudly-open-source-section" class="relative py-24 sm:py-32 bg-gray-900 overflow-hidden">
<!-- Subtle background gradient -->
<div class="absolute inset-0 bg-gradient-to-b from-gray-900 via-gray-800/50 to-gray-900"></div>
<!-- Mouse-following glow -->
<div id="oss-mouse-glow" class="pointer-events-none absolute w-[800px] h-[800px] rounded-full opacity-0 transition-opacity duration-300" style="background: radial-gradient(circle at center, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.02) 50%, transparent 70%); transform: translate(-50%, -50%);"></div>
<div class="relative mx-auto max-w-7xl px-6 lg:px-8">
<!-- Header -->
<div class="text-center mb-16">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 mb-8">
<svg class="w-4 h-4 text-gray-400" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
<span class="text-sm text-gray-400">Open Source</span>
</div>
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-semibold tracking-tight leading-[1.1]">
<span class="text-gray-400 block">Proudly</span>
<span class="text-white block">open-source</span>
</h2>
<p class="mt-6 text-lg text-gray-400 max-w-2xl mx-auto leading-relaxed">
Full transparency, complete control. Our entire codebase is open for you to inspect, modify, and self-host.
</p>
</div>
<!-- Stats -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6 max-w-4xl mx-auto mb-16">
<div class="text-center p-8 rounded-2xl bg-white/[0.03] border border-white/[0.06] transition-all duration-300 hover:bg-white/[0.06] hover:border-white/[0.12] hover:shadow-[0_0_30px_rgba(255,255,255,0.1)]">
<div class="text-4xl sm:text-5xl font-semibold text-white mb-2"><%= locals.githubContributors || '80+' %></div>
<div class="text-sm text-gray-400">Contributors</div>
</div>
<div class="text-center p-8 rounded-2xl bg-white/[0.03] border border-white/[0.06] transition-all duration-300 hover:bg-white/[0.06] hover:border-white/[0.12] hover:shadow-[0_0_30px_rgba(255,255,255,0.1)]">
<div class="text-4xl sm:text-5xl font-semibold text-white mb-2"><%= locals.githubCommits || '29k+' %></div>
<div class="text-sm text-gray-400">Commits</div>
</div>
<div class="text-center p-8 rounded-2xl bg-white/[0.03] border border-white/[0.06] transition-all duration-300 hover:bg-white/[0.06] hover:border-white/[0.12] hover:shadow-[0_0_30px_rgba(255,255,255,0.1)]">
<div class="text-4xl sm:text-5xl font-semibold text-white mb-2">1M+</div>
<div class="text-sm text-gray-400">Downloads</div>
</div>
</div>
<!-- Terminal -->
<div class="max-w-2xl mx-auto mb-12">
<div id="oss-terminal" class="rounded-2xl overflow-hidden transition-all duration-500 bg-white/[0.03] border border-white/[0.06] hover:bg-white/[0.05] hover:border-white/[0.1]">
<!-- Title Bar -->
<div class="flex items-center px-4 py-3 relative border-b border-white/[0.06]" style="background: rgba(255,255,255,0.02);">
<div id="oss-terminal-dots" class="flex gap-2 cursor-pointer group">
<div class="w-3 h-3 rounded-full transition-all duration-200 group-hover:brightness-110" style="background: #ff5f57; box-shadow: inset 0 -1px 1px rgba(0,0,0,0.2);"></div>
<div class="w-3 h-3 rounded-full transition-all duration-200 group-hover:brightness-110" style="background: #febc2e; box-shadow: inset 0 -1px 1px rgba(0,0,0,0.2);"></div>
<div class="w-3 h-3 rounded-full transition-all duration-200 group-hover:brightness-110" style="background: #28c840; box-shadow: inset 0 -1px 1px rgba(0,0,0,0.2);"></div>
</div>
<span id="oss-terminal-title" class="absolute left-1/2 -translate-x-1/2 text-xs text-gray-500 font-medium" style="font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;">terminal</span>
</div>
<!-- Content -->
<div id="oss-terminal-content" class="px-5 py-4" style="min-height: 60px;">
<code class="text-gray-300" style="font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace; font-size: 14px; line-height: 1.6;">
<span style="color: #28c840;">$</span> curl -sSL <%= locals.homeUrl || 'https://oneuptime.com' %>/install.sh | bash
</code>
</div>
</div>
</div>
<!-- CTA -->
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="https://github.com/oneuptime/oneuptime" target="_blank"
class="group inline-flex items-center gap-2.5 px-7 py-3.5 rounded-full font-medium text-sm transition-all duration-300 bg-white/[0.08] border border-white/[0.1] text-white hover:bg-white/[0.15] hover:border-white/[0.2] hover:shadow-[0_0_30px_rgba(255,255,255,0.1)]">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
<span>Star on GitHub</span>
<svg class="w-4 h-4 group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
</svg>
</a>
<a href="https://github.com/oneuptime/oneuptime#readme" target="_blank"
class="group inline-flex items-center gap-2 px-6 py-3 rounded-full text-gray-400 font-medium text-sm hover:text-white transition-all duration-300">
<span>View documentation</span>
<svg class="w-4 h-4 group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
</svg>
</a>
</div>
</div>
</section>
<script>
(function() {
const ossSection = document.getElementById('proudly-open-source-section');
const ossGlow = document.getElementById('oss-mouse-glow');
if (!ossSection || !ossGlow) return;
let rafId = null;
let targetX = 0;
let targetY = 0;
let currentX = 0;
let currentY = 0;
function lerp(start, end, factor) {
return start + (end - start) * factor;
}
function animate() {
currentX = lerp(currentX, targetX, 0.15);
currentY = lerp(currentY, targetY, 0.15);
ossGlow.style.left = currentX + 'px';
ossGlow.style.top = currentY + 'px';
if (Math.abs(targetX - currentX) > 0.1 || Math.abs(targetY - currentY) > 0.1) {
rafId = requestAnimationFrame(animate);
} else {
rafId = null;
}
}
ossSection.addEventListener('mousemove', function(e) {
const rect = ossSection.getBoundingClientRect();
targetX = e.clientX - rect.left;
targetY = e.clientY - rect.top;
if (!rafId) {
rafId = requestAnimationFrame(animate);
}
});
ossSection.addEventListener('mouseenter', function() {
ossGlow.style.opacity = '1';
});
ossSection.addEventListener('mouseleave', function() {
ossGlow.style.opacity = '0';
if (rafId) {
cancelAnimationFrame(rafId);
rafId = null;
}
});
// Console Easter Egg - For those who inspect
const asciiArt = `
%c
╔═══════════════════════════════════════════════════════════════════════╗
║ ║
║ 🔧 TO THE BUILDERS, THE DREAMERS 🔧 ║
║ THE ONES WHO WON'T QUIT ║
║ ║
║ We see you. ║
║ ║
║ The late nights and early mornings. ║
║ The countless iterations no one will ever see. ║
║ The persistence when it would be easier to stop. ║
║ ║
║ We believe in you. ║
║ ║
║ In your vision. In your craft. ║
║ In the fire that made you start ║
║ and the resolve that keeps you going. ║
║ ║
║ We build alongside you. ║
║ ║
║ Shoulder to shoulder. As builders ourselves, ║
║ who understand what it takes ║
║ to ship something that matters. ║
║ ║
║ Keep building. ║
║ The world runs on what you create. ║
║ ║
║ — with ❤️ from OneUptime ║
║ ║
╚═══════════════════════════════════════════════════════════════════════╝
`;
console.log(asciiArt, 'font-family: monospace; color: #4ade80; font-size: 11px; line-height: 1.4;');
console.log('%c👋 Hey there, curious developer!', 'font-size: 16px; font-weight: bold; color: #60a5fa;');
console.log('%cWe\'re always looking for builders. Check out our open issues: https://github.com/oneuptime/oneuptime/issues', 'color: #94a3b8;');
// Terminal Easter Egg - Click dots to reveal
const terminal = document.getElementById('oss-terminal');
const terminalDots = document.getElementById('oss-terminal-dots');
const terminalContent = document.getElementById('oss-terminal-content');
const terminalTitle = document.getElementById('oss-terminal-title');
let easterEggActive = false;
let originalContent = '';
let originalTitle = '';
if (terminalDots && terminalContent && terminalTitle) {
// Save original content
originalContent = terminalContent.innerHTML;
originalTitle = terminalTitle.textContent;
// Escape key to revert
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && easterEggActive) {
easterEggActive = false;
terminalTitle.textContent = originalTitle;
terminalContent.innerHTML = originalContent;
terminalContent.style.minHeight = '';
terminalContent.style.padding = '';
terminal.style.boxShadow = '';
terminal.style.borderColor = '';
terminal.style.background = '';
}
});
terminalDots.addEventListener('click', function(e) {
e.stopPropagation();
if (easterEggActive) return;
easterEggActive = true;
// Change terminal title
terminalTitle.textContent = 'builder_tribute.sh';
// Show Easter egg content
terminal.style.boxShadow = '0 0 30px rgba(255, 255, 255, 0.1)';
terminal.style.borderColor = 'rgba(255, 255, 255, 0.12)';
terminal.style.background = 'rgba(255, 255, 255, 0.06)';
const lines = [
{ text: '$ echo "TO THE BUILDERS, THE DREAMERS"', type: 'command' },
{ text: 'The ones who won\'t quit', type: 'subheader' },
{ text: '', type: 'blank' },
{ text: 'We see you.', type: 'output highlight' },
{ text: '', type: 'blank' },
{ text: 'The late nights and early mornings.', type: 'output' },
{ text: 'The countless iterations no one will ever see.', type: 'output' },
{ text: 'The persistence when it would be easier to stop.', type: 'output' },
{ text: '', type: 'blank' },
{ text: 'We believe in you.', type: 'output highlight' },
{ text: '', type: 'blank' },
{ text: 'In your vision. In your craft.', type: 'output' },
{ text: 'In the fire that made you start', type: 'output' },
{ text: 'and the resolve that keeps you going.', type: 'output' },
{ text: '', type: 'blank' },
{ text: 'We build alongside you.', type: 'output highlight' },
{ text: '', type: 'blank' },
{ text: 'Shoulder to shoulder. As builders ourselves,', type: 'output' },
{ text: 'who understand what it takes', type: 'output' },
{ text: 'to ship something that matters.', type: 'output' },
{ text: '', type: 'blank' },
{ text: 'Keep building.', type: 'output highlight' },
{ text: 'The world runs on what you create.', type: 'output' },
{ text: '', type: 'blank' },
{ text: '— with ❤️ from OneUptime', type: 'signature' }
];
terminalContent.innerHTML = '';
terminalContent.style.minHeight = '520px';
terminalContent.style.padding = '20px 24px';
let lineIndex = 0;
function typeLine() {
if (lineIndex >= lines.length) return;
const line = lines[lineIndex];
const lineEl = document.createElement('div');
lineEl.style.opacity = '0';
lineEl.style.transform = 'translateY(5px)';
lineEl.style.transition = 'all 0.3s ease-out';
lineEl.style.fontFamily = "'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace";
lineEl.style.fontSize = '15px';
lineEl.style.lineHeight = '1.6';
lineEl.style.letterSpacing = '0.3px';
lineEl.style.marginBottom = '2px';
if (line.type === 'command') {
lineEl.innerHTML = '<span style="color: #28c840;">$</span> <span style="color: #f5f5f5;">echo "TO THE BUILDERS, THE DREAMERS"</span>';
} else if (line.type === 'subheader') {
lineEl.style.color = '#98989d';
lineEl.style.fontStyle = 'italic';
lineEl.textContent = line.text;
} else if (line.type === 'blank') {
lineEl.innerHTML = '&nbsp;';
} else if (line.type === 'output highlight') {
lineEl.style.color = '#28c840';
lineEl.style.fontWeight = '500';
lineEl.textContent = line.text;
} else if (line.type === 'signature') {
lineEl.style.color = '#98989d';
lineEl.style.marginTop = '4px';
lineEl.textContent = line.text;
} else {
lineEl.style.color = '#ffffff';
lineEl.textContent = line.text;
}
terminalContent.appendChild(lineEl);
setTimeout(() => {
lineEl.style.opacity = '1';
lineEl.style.transform = 'translateY(0)';
}, 50);
lineIndex++;
setTimeout(typeLine, 150);
}
typeLine();
});
}
})();
</script>
Reference in New Issue View Git Blame Copy Permalink