Skip to content

Add sounds and developer console #233

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

Merged
jbampton merged 1 commit into from
Jan 26, 2026
Merged

Add sounds and developer console #233

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
50 changes: 47 additions & 3 deletions src/_includes/footer.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,18 @@
<footer class="mt-20 border-t border-[var(--border-color)] bg-[var(--bg-footer)] py-12">
<div class="max-w-7xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-8">

<div class="text-center md:text-left">
<p class="text-[var(--text-main)] font-bold text-sm uppercase tracking-widest">Developer Directory</p>
<div class="flex items-center justify-center md:justify-start gap-3 mt-3">
<div class="flex flex-col items-center md:items-start text-center md:text-left">
<p class="text-[var(--text-main)] font-bold text-sm uppercase tracking-widest">
Developer Directory
</p>

<p class="mt-1 text-[var(--text-muted)] text-[10px] font-mono uppercase tracking-[0.15em]">
&copy; <span id="current-year">2026</span> Built with
<span id="footer-heart" class="transition-colors duration-500">❤️</span>
by the Open-Source Community
</p>

<div class="flex items-center justify-center md:justify-start gap-3 mt-4">
<a href="https://www.11ty.dev/" target="_blank" class="text-[10px] font-bold px-2 py-1 rounded bg-[var(--bg-card)] border border-[var(--border-color)] text-[var(--text-muted)] hover:text-accent transition-all">🎈 11ty</a>
<a href="https://tailwindcss.com/" target="_blank" class="text-[10px] font-bold px-2 py-1 rounded bg-[var(--bg-card)] border border-[var(--border-color)] text-[var(--text-muted)] hover:text-accent transition-all">🌊 Tailwind</a>
</div>
Expand Down Expand Up @@ -33,6 +42,41 @@

</div>
</footer>

<div id="dev-tools" class="fixed bottom-6 left-6 z-[5000] hidden bg-slate-900 border-2 border-accent p-6 rounded-2xl shadow-2xl backdrop-blur-xl w-64 font-mono">
<div class="flex justify-between items-center mb-4">
<h3 class="text-accent text-xs font-black uppercase tracking-tighter">System Override</h3>
<span class="text-[9px] bg-accent/20 text-accent px-1.5 py-0.5 rounded">v1.0.4</span>
</div>

<div class="space-y-3">
<button onclick="triggerSecretUnlock('matrix')" class="w-full py-2 bg-white/5 hover:bg-green-500/20 text-green-500 text-[10px] border border-green-500/30 rounded-lg transition-all flex justify-between px-3">
<span>RUN_MATRIX.exe</span>
<span class="opacity-50">+1 LVL</span>
</button>

<button onclick="triggerSecretUnlock('konami')" class="w-full py-2 bg-white/5 hover:bg-yellow-500/20 text-yellow-500 text-[10px] border border-yellow-500/30 rounded-lg transition-all flex justify-between px-3">
<span>TRIGGER_KONAMI</span>
<span class="opacity-50">+1 LVL</span>
</button>

<button onclick="triggerSecretUnlock('gravity')" class="w-full py-2 bg-white/5 hover:bg-red-500/20 text-red-500 text-[10px] border border-red-500/30 rounded-lg transition-all flex justify-between px-3">
<span>INIT_GRAVITY</span>
<span class="opacity-50">+1 LVL</span>
</button>

<div class="pt-2">
<button onclick="localStorage.clear(); location.reload();" class="w-full py-3 bg-blue-600/20 hover:bg-blue-600/40 text-blue-400 text-[10px] font-bold border border-blue-500/30 rounded-lg transition-all">
RESET_PLAYER_DATA
</button>
</div>
</div>

<div class="mt-4 pt-4 border-t border-white/10">
<p class="text-[9px] text-slate-500 leading-tight">Secret Console: <span class="text-white">'D'</span></p>
</div>
</div>

<div id="matrix-overlay" class="fixed inset-0 bg-black hidden z-[9999]">
<canvas id="matrix-canvas" class="block"></canvas>
<button onclick="closeMatrix()" class="fixed top-8 right-8 z-[10000] bg-white/10 hover:bg-white/20 text-white px-6 py-3 rounded-full font-mono text-xs border border-white/30 backdrop-blur-md">
Expand Down
95 changes: 95 additions & 0 deletions src/assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,3 +140,98 @@ header {
margin-top: 1.5rem;
z-index: 10000;
}

footer {
background-color: var(--bg-footer);
border-top: 1px solid var(--border-color);
color: var(--text-muted);
transition: background-color 0.4s ease;
}

#footer-heart {
display: inline-block;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Add this class via JS if you want it to bounce on change */
.heart-pop {
animation: pop 0.4s ease-out;
}

@keyframes pop {
0% { transform: scale(1); }
50% { transform: scale(1.4); }
100% { transform: scale(1); }
}

@keyframes bounce {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-10px) scale(1.1); }
}

#level-badge.animate-bounce {
animation: bounce 0.6s ease-in-out;
}

/**
* 7. ARCHITECT MODE & LEVEL GLOW
*/

/* Glowing effect for the Level Badge when reaching higher levels */
#level-badge {
transition: all 0.5s ease;
}

/* Specific styling for when Level 10 (Architect) is reached */
.level-architect #level-badge {
box-shadow: 0 0 20px var(--accent), 0 0 40px var(--accent);
animation: architect-pulse 2s infinite ease-in-out;
}

@keyframes architect-pulse {
0%, 100% { filter: brightness(1) drop-shadow(0 0 5px var(--accent)); }
50% { filter: brightness(1.3) drop-shadow(0 0 15px var(--accent)); }
}

/* Intensify the progress bar at Level 10 */
.level-architect #level-progress {
background: linear-gradient(90deg, var(--accent), #ffffff, var(--accent));
background-size: 200% 100%;
animation: gradient-flow 2s linear infinite;
}

@keyframes gradient-flow {
0% { background-position: 100% 0%; }
100% { background-position: -100% 0%; }
}

/**
* 8. DEVELOPER CONSOLE & UI UTILITIES
*/

/* Glassmorphism for the Dev Tools */
#dev-tools {
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(15, 23, 42, 0.8); /* Slate-900 with transparency */
}

/* Glitch effect for the Gravity Trigger */
.glitch-shake {
animation: glitch 0.2s infinite;
}

@keyframes glitch {
0% { transform: translate(0); }
20% { transform: translate(-2px, 2px); }
40% { transform: translate(-2px, -2px); }
60% { transform: translate(2px, 2px); }
80% { transform: translate(2px, -2px); }
100% { transform: translate(0); }
}

/* Utility to ensure the Matrix ESC button is always visible */
#matrix-overlay button {
box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
Loading
Loading