Skip to content

Commit 676d93c

Browse files
jbamptonjbampton
authored
Add sounds and developer console (#233)
1 parent bd3d1e4 commit 676d93c

File tree

3 files changed

+305
-122
lines changed

3 files changed

+305
-122
lines changed

‎src/_includes/footer.njk‎

Lines changed: 47 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,18 @@
11
<footer class="mt-20 border-t border-[var(--border-color)] bg-[var(--bg-footer)] py-12">
22
<div class="max-w-7xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-8">
33

4-
<div class="text-center md:text-left">
5-
<p class="text-[var(--text-main)] font-bold text-sm uppercase tracking-widest">Developer Directory</p>
6-
<div class="flex items-center justify-center md:justify-start gap-3 mt-3">
4+
<div class="flex flex-col items-center md:items-start text-center md:text-left">
5+
<p class="text-[var(--text-main)] font-bold text-sm uppercase tracking-widest">
6+
Developer Directory
7+
</p>
8+
9+
<p class="mt-1 text-[var(--text-muted)] text-[10px] font-mono uppercase tracking-[0.15em]">
10+
&copy; <span id="current-year">2026</span> Built with
11+
<span id="footer-heart" class="transition-colors duration-500">❤️</span>
12+
by the Open-Source Community
13+
</p>
14+
15+
<div class="flex items-center justify-center md:justify-start gap-3 mt-4">
716
<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>
817
<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>
918
</div>
@@ -33,6 +42,41 @@
3342

3443
</div>
3544
</footer>
45+
46+
<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">
47+
<div class="flex justify-between items-center mb-4">
48+
<h3 class="text-accent text-xs font-black uppercase tracking-tighter">System Override</h3>
49+
<span class="text-[9px] bg-accent/20 text-accent px-1.5 py-0.5 rounded">v1.0.4</span>
50+
</div>
51+
52+
<div class="space-y-3">
53+
<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">
54+
<span>RUN_MATRIX.exe</span>
55+
<span class="opacity-50">+1 LVL</span>
56+
</button>
57+
58+
<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">
59+
<span>TRIGGER_KONAMI</span>
60+
<span class="opacity-50">+1 LVL</span>
61+
</button>
62+
63+
<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">
64+
<span>INIT_GRAVITY</span>
65+
<span class="opacity-50">+1 LVL</span>
66+
</button>
67+
68+
<div class="pt-2">
69+
<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">
70+
RESET_PLAYER_DATA
71+
</button>
72+
</div>
73+
</div>
74+
75+
<div class="mt-4 pt-4 border-t border-white/10">
76+
<p class="text-[9px] text-slate-500 leading-tight">Secret Console: <span class="text-white">'D'</span></p>
77+
</div>
78+
</div>
79+
3680
<div id="matrix-overlay" class="fixed inset-0 bg-black hidden z-[9999]">
3781
<canvas id="matrix-canvas" class="block"></canvas>
3882
<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">

‎src/assets/css/style.css‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,3 +140,98 @@ header {
140140
margin-top: 1.5rem;
141141
z-index: 10000;
142142
}
143+
144+
footer {
145+
background-color: var(--bg-footer);
146+
border-top: 1px solid var(--border-color);
147+
color: var(--text-muted);
148+
transition: background-color 0.4s ease;
149+
}
150+
151+
#footer-heart {
152+
display: inline-block;
153+
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
154+
}
155+
156+
/* Add this class via JS if you want it to bounce on change */
157+
.heart-pop {
158+
animation: pop 0.4s ease-out;
159+
}
160+
161+
@keyframes pop {
162+
0% { transform: scale(1); }
163+
50% { transform: scale(1.4); }
164+
100% { transform: scale(1); }
165+
}
166+
167+
@keyframes bounce {
168+
0%, 100% { transform: translateY(0) scale(1); }
169+
50% { transform: translateY(-10px) scale(1.1); }
170+
}
171+
172+
#level-badge.animate-bounce {
173+
animation: bounce 0.6s ease-in-out;
174+
}
175+
176+
/**
177+
* 7. ARCHITECT MODE & LEVEL GLOW
178+
*/
179+
180+
/* Glowing effect for the Level Badge when reaching higher levels */
181+
#level-badge {
182+
transition: all 0.5s ease;
183+
}
184+
185+
/* Specific styling for when Level 10 (Architect) is reached */
186+
.level-architect #level-badge {
187+
box-shadow: 0 0 20px var(--accent), 0 0 40px var(--accent);
188+
animation: architect-pulse 2s infinite ease-in-out;
189+
}
190+
191+
@keyframes architect-pulse {
192+
0%, 100% { filter: brightness(1) drop-shadow(0 0 5px var(--accent)); }
193+
50% { filter: brightness(1.3) drop-shadow(0 0 15px var(--accent)); }
194+
}
195+
196+
/* Intensify the progress bar at Level 10 */
197+
.level-architect #level-progress {
198+
background: linear-gradient(90deg, var(--accent), #ffffff, var(--accent));
199+
background-size: 200% 100%;
200+
animation: gradient-flow 2s linear infinite;
201+
}
202+
203+
@keyframes gradient-flow {
204+
0% { background-position: 100% 0%; }
205+
100% { background-position: -100% 0%; }
206+
}
207+
208+
/**
209+
* 8. DEVELOPER CONSOLE & UI UTILITIES
210+
*/
211+
212+
/* Glassmorphism for the Dev Tools */
213+
#dev-tools {
214+
backdrop-filter: blur(16px) saturate(180%);
215+
-webkit-backdrop-filter: blur(16px) saturate(180%);
216+
background-color: rgba(15, 23, 42, 0.8); /* Slate-900 with transparency */
217+
}
218+
219+
/* Glitch effect for the Gravity Trigger */
220+
.glitch-shake {
221+
animation: glitch 0.2s infinite;
222+
}
223+
224+
@keyframes glitch {
225+
0% { transform: translate(0); }
226+
20% { transform: translate(-2px, 2px); }
227+
40% { transform: translate(-2px, -2px); }
228+
60% { transform: translate(2px, 2px); }
229+
80% { transform: translate(2px, -2px); }
230+
100% { transform: translate(0); }
231+
}
232+
233+
/* Utility to ensure the Matrix ESC button is always visible */
234+
#matrix-overlay button {
235+
box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
236+
text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
237+
}

0 commit comments

Comments
 (0)