jeffemmett
/
funz-quest
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
funz-quest/index.html

930 lines
30 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FUNZ.QUEST - The Neverending Quest for Funz</title>
<meta name="description" content="You've been questing for funds your whole life. Now quest for something that matters: FUNZ.">
<meta property="og:title" content="FUNZ.QUEST - The Neverending Quest">
<meta property="og:description" content="Tired of questing for funds? Quest for FUNZ instead. Vibes-based tipping for earth warriors and public goods defenders.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://funz.quest">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>&#x1F3B2;</text></svg>">
<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;700;900&family=Inter:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--gold: #d4a017;
--gold-light: #f0d060;
--gold-dim: #8a6914;
--parchment: #f4e8c1;
--ink: #1a1a2e;
--blood: #8b0000;
--silly-pink: #ff69b4;
--silly-cyan: #00ffff;
--silly-lime: #adff2f;
--silly-orange: #ff6347;
}
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
body {
font-family: 'Inter', sans-serif;
background: var(--ink);
color: var(--parchment);
overflow-x: hidden;
}
/* ===== HERO ===== */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
background:
radial-gradient(ellipse at 50% 0%, rgba(212,160,23,0.15) 0%, transparent 60%),
radial-gradient(ellipse at 50% 100%, rgba(139,0,0,0.1) 0%, transparent 50%),
var(--ink);
padding: 2rem;
}
.hero::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4a017' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.5;
pointer-events: none;
}
.hero-eyebrow {
font-family: 'Space Mono', monospace;
font-size: 0.75rem;
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--gold-dim);
margin-bottom: 1.5rem;
opacity: 0;
animation: fadeUp 1s ease 0.3s forwards;
}
.hero-title {
font-family: 'Cinzel Decorative', serif;
font-size: clamp(3rem, 10vw, 8rem);
font-weight: 900;
line-height: 1;
background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 40%, var(--gold-dim) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 40px rgba(212,160,23,0.3));
margin-bottom: 0.5rem;
opacity: 0;
animation: fadeUp 1s ease 0.5s forwards;
}
.hero-subtitle {
font-family: 'Cinzel', serif;
font-size: clamp(1rem, 3vw, 1.8rem);
font-weight: 400;
color: var(--parchment);
opacity: 0;
animation: fadeUp 1s ease 0.8s forwards;
margin-bottom: 3rem;
}
.hero-subtitle em {
color: var(--gold);
font-style: normal;
}
.scroll-indicator {
position: absolute;
bottom: 2rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
opacity: 0;
animation: fadeUp 1s ease 1.5s forwards;
}
.scroll-indicator span {
font-family: 'Space Mono', monospace;
font-size: 0.65rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold-dim);
}
.scroll-arrow {
width: 20px;
height: 20px;
border-right: 2px solid var(--gold-dim);
border-bottom: 2px solid var(--gold-dim);
transform: rotate(45deg);
animation: bounce 2s ease infinite;
}
/* ===== SECTIONS ===== */
.section {
max-width: 800px;
margin: 0 auto;
padding: 6rem 2rem;
position: relative;
}
.section-number {
font-family: 'Cinzel Decorative', serif;
font-size: 5rem;
font-weight: 900;
color: rgba(212,160,23,0.08);
position: absolute;
top: 3rem;
left: -1rem;
pointer-events: none;
user-select: none;
}
.section h2 {
font-family: 'Cinzel', serif;
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-weight: 700;
color: var(--gold);
margin-bottom: 1.5rem;
line-height: 1.2;
}
.section p {
font-size: 1.1rem;
line-height: 1.8;
color: rgba(244,232,193,0.85);
margin-bottom: 1.5rem;
}
.section p strong {
color: var(--gold-light);
font-weight: 600;
}
.section p em {
color: var(--parchment);
font-style: italic;
}
/* Divider between sections */
.divider {
max-width: 800px;
margin: 0 auto;
padding: 0 2rem;
text-align: center;
}
.divider::after {
content: '~ \2694 ~';
font-family: 'Cinzel Decorative', serif;
color: var(--gold-dim);
font-size: 1.2rem;
letter-spacing: 0.5em;
}
/* ===== THE TURN - Where it gets silly ===== */
.the-turn {
background: linear-gradient(180deg, var(--ink) 0%, #1a0a2e 100%);
padding: 4rem 0;
position: relative;
overflow: hidden;
}
.the-turn::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.turn-banner {
text-align: center;
padding: 3rem 2rem;
position: relative;
}
.turn-banner h2 {
font-family: 'Cinzel Decorative', serif;
font-size: clamp(2rem, 6vw, 4rem);
font-weight: 900;
background: linear-gradient(135deg, var(--silly-pink), var(--silly-cyan), var(--silly-lime));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: rainbowShift 3s ease infinite;
background-size: 200% 200%;
margin-bottom: 1rem;
}
.turn-banner p {
font-family: 'Space Mono', monospace;
font-size: 1rem;
color: var(--silly-cyan);
opacity: 0.8;
}
/* Silly sections */
.silly-section {
max-width: 800px;
margin: 0 auto;
padding: 4rem 2rem;
}
.silly-section h2 {
font-family: 'Cinzel Decorative', serif;
font-size: clamp(1.3rem, 3.5vw, 2rem);
margin-bottom: 1.5rem;
line-height: 1.3;
}
.silly-section p {
font-size: 1.1rem;
line-height: 1.8;
color: rgba(244,232,193,0.85);
margin-bottom: 1.5rem;
}
.silly-section .rainbow {
background: linear-gradient(90deg, var(--silly-pink), var(--silly-orange), var(--gold-light), var(--silly-lime), var(--silly-cyan), var(--silly-pink));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size: 200% 100%;
animation: rainbowText 4s linear infinite;
font-weight: 700;
}
/* ===== FUNZ TOKEN CARD ===== */
.token-card {
background: linear-gradient(135deg, rgba(212,160,23,0.1), rgba(255,105,180,0.05));
border: 1px solid rgba(212,160,23,0.2);
border-radius: 16px;
padding: 2.5rem;
margin: 2rem 0;
position: relative;
overflow: hidden;
}
.token-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg, transparent, rgba(212,160,23,0.05), transparent, rgba(255,105,180,0.05), transparent);
animation: rotate 8s linear infinite;
}
.token-card-inner {
position: relative;
z-index: 1;
}
.token-card h3 {
font-family: 'Cinzel Decorative', serif;
font-size: 1.5rem;
color: var(--gold-light);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.token-card p {
font-size: 1rem;
line-height: 1.7;
color: rgba(244,232,193,0.75);
}
.token-card .token-emoji {
font-size: 2rem;
display: inline-block;
animation: wobble 2s ease infinite;
}
/* ===== FLOW FUNDING SECTION ===== */
.flow-section {
background: linear-gradient(180deg, #1a0a2e, #0a1a1e);
padding: 2rem 0;
}
.flow-diagram {
font-family: 'Space Mono', monospace;
font-size: 0.8rem;
color: var(--silly-cyan);
background: rgba(0,255,255,0.03);
border: 1px solid rgba(0,255,255,0.1);
border-radius: 12px;
padding: 1.5rem;
margin: 1.5rem 0;
overflow-x: auto;
white-space: pre;
line-height: 1.5;
}
/* ===== THE FINAL RANT ===== */
.final-section {
background: linear-gradient(180deg, #0a1a1e, var(--ink));
padding: 2rem 0;
}
.final-section .silly-section p {
font-size: 1.05rem;
}
.escalating {
display: block;
margin: 1rem 0;
}
.escalating span {
display: inline-block;
transition: transform 0.3s ease;
}
.escalating span:hover {
transform: scale(1.3) rotate(-5deg);
}
.smol {
font-size: 0.75rem;
opacity: 0.5;
font-style: italic;
}
.smaller {
font-size: 0.65rem;
opacity: 0.35;
}
.smallest {
font-size: 0.55rem;
opacity: 0.2;
}
.whisper {
font-size: 0.5rem;
opacity: 0.12;
}
/* ===== CTA / FOOTER ===== */
.cta {
text-align: center;
padding: 6rem 2rem;
position: relative;
}
.cta h2 {
font-family: 'Cinzel Decorative', serif;
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 900;
background: linear-gradient(135deg, var(--gold-light), var(--silly-pink), var(--silly-cyan));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1.5rem;
}
.cta p {
font-size: 1.1rem;
color: rgba(244,232,193,0.7);
max-width: 600px;
margin: 0 auto 2rem;
line-height: 1.7;
}
.yeet-btn {
display: inline-block;
font-family: 'Cinzel Decorative', serif;
font-size: 1.2rem;
font-weight: 700;
padding: 1rem 3rem;
background: linear-gradient(135deg, var(--gold), var(--gold-dim));
color: var(--ink);
border: none;
border-radius: 60px;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.yeet-btn:hover {
transform: translateY(-2px) scale(1.03);
box-shadow: 0 10px 40px rgba(212,160,23,0.3);
}
.yeet-btn::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(transparent, rgba(255,255,255,0.1), transparent);
transform: rotate(45deg);
transition: all 0.5s ease;
}
.yeet-btn:hover::after {
left: 100%;
}
footer {
text-align: center;
padding: 3rem 2rem;
border-top: 1px solid rgba(212,160,23,0.08);
}
footer p {
font-family: 'Space Mono', monospace;
font-size: 0.7rem;
color: rgba(244,232,193,0.25);
line-height: 1.8;
}
footer a {
color: var(--gold-dim);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s;
}
footer a:hover {
border-bottom-color: var(--gold-dim);
}
/* ===== FLOATING FUNZ ===== */
.floating-funz {
position: fixed;
pointer-events: none;
z-index: 999;
font-size: 1.5rem;
opacity: 0;
animation: floatUp 3s ease forwards;
}
/* ===== ANIMATIONS ===== */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: rotate(45deg) translateY(0); }
40% { transform: rotate(45deg) translateY(8px); }
60% { transform: rotate(45deg) translateY(4px); }
}
@keyframes rainbowShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes rainbowText {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes wobble {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(10deg); }
75% { transform: rotate(-10deg); }
}
@keyframes floatUp {
0% { opacity: 1; transform: translateY(0) scale(1); }
100% { opacity: 0; transform: translateY(-200px) scale(0.5) rotate(30deg); }
}
/* ===== SCROLL REVEAL ===== */
.reveal {
opacity: 0;
transform: translateY(40px);
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
.section, .silly-section { padding: 4rem 1.5rem; }
.section-number { font-size: 3rem; top: 2rem; }
.token-card { padding: 1.5rem; }
.flow-diagram { font-size: 0.65rem; padding: 1rem; }
}
/* ===== KONAMI EASTER EGG ===== */
.party-mode body {
animation: partyBg 0.5s ease infinite;
}
@keyframes partyBg {
0% { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(360deg); }
}
/* Selection color */
::selection {
background: var(--gold);
color: var(--ink);
}
</style>
</head>
<body>
<!-- ============================== -->
<!-- HERO -->
<!-- ============================== -->
<section class="hero">
<p class="hero-eyebrow">A saga in seven acts of diminishing dignity</p>
<h1 class="hero-title">FUNZ.QUEST</h1>
<p class="hero-subtitle">The <em>Neverending</em> Quest for Funz</p>
<div class="scroll-indicator">
<span>Descend into the quest</span>
<div class="scroll-arrow"></div>
</div>
</section>
<!-- ============================== -->
<!-- ACT I - THE STRUGGLE -->
<!-- ============================== -->
<div class="section reveal">
<span class="section-number">I</span>
<h2>The Soulcrushing Quest for Funds</h2>
<p>
You know the one. The quest that every <strong>public goods defender</strong>,
every <strong>earth warrior</strong>, every <strong>infrastructure maintainer</strong>
has been on since the dawn of trying to make the world marginally less on fire.
</p>
<p>
You wake up. You open your laptop. You write a grant proposal.
You write another grant proposal. You write a grant proposal <em>about</em>
writing grant proposals. You attend a call about the future of grant proposals.
Someone asks if you've considered applying for a grant to fund the call about
the future of grant proposals.
</p>
<p>
You stare into the void. The void stares back. The void also needs funding.
</p>
</div>
<div class="divider"></div>
<!-- ============================== -->
<!-- ACT II - THE CYCLE -->
<!-- ============================== -->
<div class="section reveal">
<span class="section-number">II</span>
<h2>The Infinite Loop of Impact Reporting</h2>
<p>
You built the thing. The thing works. The thing is beautiful and serves thousands
of people who will never know your name and that's fine because you're not in this
for the glory, you're in this because <strong>someone has to keep the lights on</strong>
in the commons and apparently that someone is you, a person who hasn't slept properly
since 2019.
</p>
<p>
But did you <em>measure</em> the impact? Did you fill out the <strong>14-page
retrospective</strong> with the custom KPI framework that the funding body invented
last Tuesday? Did you quantify the <em>vibes</em>? Can you prove, with a Gantt chart,
that the world is 0.003% better because of your open-source library that three
different governments silently depend on?
</p>
<p>
No? Cool. Application denied. <strong>Better luck next quarter.</strong>
</p>
</div>
<div class="divider"></div>
<!-- ============================== -->
<!-- ACT III - THE REALIZATION -->
<!-- ============================== -->
<div class="section reveal">
<span class="section-number">III</span>
<h2>The Moment of Clarity</h2>
<p>
Somewhere between your third "synergy alignment call" and your seventh
"multi-stakeholder coordination workshop," a thought crystallizes in
your grant-addled brain:
</p>
<p style="text-align: center; font-family: 'Cinzel Decorative', serif; font-size: 1.4rem; color: var(--gold); padding: 1.5rem 0;">
"What if the quest was never about the funds?"
</p>
<p>
What if&mdash;hear me out&mdash;what if the real treasure was the <strong>absolutely
unhinged</strong> amount of fun we had along the way? The 2 AM Telegram threads.
The chaotic hackathon demos. The time someone accidentally deployed to production
during a conference talk and it <em>actually worked better</em>.
</p>
<p>
What if we stopped questing for <strong>funds</strong>&hellip; and started
questing for <strong>funz</strong>?
</p>
</div>
<!-- ============================== -->
<!-- THE TURN -->
<!-- ============================== -->
<div class="the-turn">
<div class="turn-banner reveal">
<h2>INTRODUCING: FUNZ</h2>
<p>// vibes-based value for a vibes-based world //</p>
</div>
</div>
<!-- ============================== -->
<!-- ACT IV - WHAT ARE FUNZ -->
<!-- ============================== -->
<div class="silly-section reveal">
<h2 style="color: var(--silly-pink);">IV. So What the Funz Are Funz?</h2>
<p>
<strong>Funz</strong> are a tipping token. Think of them like <span class="rainbow">fux</span>,
as in "giving a fux." Except we can say this one at conferences without getting
a stern email from the events coordinator.
</p>
<div class="token-card">
<div class="token-card-inner">
<h3><span class="token-emoji">&#x1F3B2;</span> THE FUNZ TOKEN</h3>
<p>
You see someone doing something cool? Something that makes the collective
vibe even slightly more vibrant? You <strong>yeet them a funz</strong>.
That's it. That's the whole system.
</p>
<p style="margin-top: 1rem;">
No 14-page application. No KPI framework. No "please describe your theory
of change in 500 words or fewer." Just: <em>"hey, that was fun. Here's a funz."</em>
</p>
</div>
</div>
<p>
Funz recognize what every grant committee on earth refuses to acknowledge:
that <strong>most valuable contributions to the commons are vibes-based</strong>.
The person who keeps the community Discord from imploding? <em>Funz.</em>
The person who wrote that one doc that saved everyone 40 hours? <em>Funz.</em>
The person who showed up to the thing and made the thing feel like a thing worth
showing up to? <strong>Maximum funz.</strong>
</p>
</div>
<!-- ============================== -->
<!-- ACT V - HOW IT WORKS -->
<!-- ============================== -->
<div class="flow-section">
<div class="silly-section reveal">
<h2 style="color: var(--silly-cyan);">V. The Quest Mechanics</h2>
<p>
The <strong>funz.quest</strong> is the grand adventure of collecting all the funz.
You earn them by being genuinely, irrepressibly <em>fun</em> in service of the collective.
And someday&mdash;someway&mdash;those funz might just become <strong>actual funds</strong>.
</p>
<p>How? Through <strong>threshold-based flow funding flows</strong>:</p>
<div class="flow-diagram">
vibes happen
|
v
funz get yeeted ------> funz accumulate
| |
v v
community sees who threshold reached?
gives the most funz (e.g. 1000 funz)
| |
v v
more vibes happen flow funding unlocks
| ~*~ actual money ~*~
v |
the cycle continues v
(it never stops) funds flow to the
(that's the point) funziest contributors
(help) akin to <a href="https://dokindthings.fund" style="color: var(--silly-lime);">dokindthings.fund</a></div>
<p>
It's like retroactive public goods funding, except instead of a committee deciding
who was impactful, <strong>the community decides who was fun</strong>. Because fun
is impact. Fight me.
</p>
</div>
</div>
<!-- ============================== -->
<!-- ACT VI - THE REALIZATION -->
<!-- ============================== -->
<div class="final-section">
<div class="silly-section reveal">
<h2 style="color: var(--silly-lime);">VI. Wait, You're Still Reading This?</h2>
<p>
I cannot <em>believe</em> you're still here. We are like 2,000 words deep into
a satirical website about imaginary vibes tokens and you're still scrolling.
<strong>Do you not have grants to write?</strong> Impact reports to fabricate?
Stakeholder alignment matrices to suffer through?
</p>
<p>
Listen. I appreciate you. I really do. Your dedication to reading an entire
website that is essentially one long shitpost about the funding crisis in
public goods? <strong>That's the most funz thing anyone has done today.</strong>
</p>
<p class="escalating">
<span style="font-size: 1rem;">Here, have a funz.</span><br>
<span style="font-size: 1.2rem; color: var(--gold-light);">Actually, have ten funz.</span><br>
<span style="font-size: 1.5rem; color: var(--silly-pink);">You know what? Have a HUNDRED funz.</span><br>
<span style="font-size: 1.9rem; color: var(--silly-cyan); font-weight: 700;">TAKE ALL THE FUNZ.</span><br>
<span style="font-size: 2.3rem; font-weight: 900;"><span class="rainbow">YOU ARE THE FUNZIEST.</span></span>
</p>
</div>
<div class="silly-section reveal">
<h2 style="color: var(--silly-orange);">VII. The Final Boss</h2>
<p>
But seriously. Haven't you heard about <a href="https://nofi.lol" style="color: var(--silly-lime); font-weight: 700; text-decoration: none; border-bottom: 2px dashed var(--silly-lime);">NoFi.lol</a>?
</p>
<p>
<strong>Do less, poindexter.</strong>
</p>
<p>
Stop reading manifestos on satirical websites. Stop optimizing your
grant pipeline. Stop attending the meeting about the meeting about
the meeting. The funz were inside you all along&mdash;or something.
I don't know. I've been writing this site instead of my own impact report.
</p>
<p>
The point is: <strong>the quest never ends.</strong> Not the quest for funds&mdash;god,
no, that definitely never ends, that's the whole problem&mdash;but the quest for
<em>funz</em>. The quest to find the joy in the work. To yeet appreciation
at the people who make the commons feel like a place worth commoning in.
</p>
<p>
To build a world where <strong>giving a funz</strong> actually means something.
</p>
<p class="smol">
And maybe, just maybe, someday the funz will become funds.
</p>
<p class="smaller">
But honestly the funz were always the point.
</p>
<p class="smallest">
The funds are just how we keep the lights on while we have the funz.
</p>
<p class="whisper">
...please fund public goods though, seriously, we are very tired.
</p>
</div>
</div>
<!-- ============================== -->
<!-- CTA -->
<!-- ============================== -->
<section class="cta reveal">
<h2>Begin Your Quest</h2>
<p>
Yeet funz. Receive funz. Question everything you thought you knew
about coordination mechanisms. Forget to eat lunch again.
</p>
<button class="yeet-btn" id="yeetBtn">YEET A FUNZ</button>
<p id="yeetCount" style="margin-top: 1.5rem; font-family: 'Space Mono', monospace; font-size: 0.85rem; color: var(--gold-dim); min-height: 1.5em;"></p>
</section>
<!-- ============================== -->
<!-- FOOTER -->
<!-- ============================== -->
<footer>
<p>
FUNZ.QUEST &mdash; a public good about the quest for public goods funding<br>
No actual tokens were harmed in the making of this website<br>
<br>
<a href="https://dokindthings.fund">dokindthings.fund</a> &middot;
<a href="https://nofi.lol">nofi.lol</a><br>
<br>
&copy; The Commons, Obviously &middot; <span id="year"></span>
</p>
</footer>
<script>
// Year
document.getElementById('year').textContent = new Date().getFullYear();
// Scroll reveal
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
// Yeet button
let yeetCount = 0;
const yeetBtn = document.getElementById('yeetBtn');
const yeetDisplay = document.getElementById('yeetCount');
const yeetMessages = [
'You yeeted your first funz! The quest begins.',
'Two funz! You\'re basically a philanthropist.',
'Three funz! The commons thanks you.',
'The funz are flowing!',
'You are a FUNZ MACHINE.',
'Grant committees HATE this one weird trick.',
'At this rate you\'ll have funds by... *checks notes* ...never.',
'The funziest timeline.',
'You should probably be writing a grant proposal right now.',
'But this is more fun, isn\'t it?',
'FUNZ FUNZ FUNZ FUNZ FUNZ',
'Okay you can stop now.',
'Or don\'t. I\'m a website, not a cop.',
'Have you considered that you might be procrastinating?',
'That\'s fine. Procrastination is a public good.',
'Still going?? Absolute legend.',
'The void called. It wants its funz back.',
'You\'ve yeeted more funz than most DAOs have members.',
'This is basically a Sybil attack on fun.',
'Honestly? You deserve actual funds for this commitment.'
];
const emojis = ['&#x1F3B2;', '&#x2728;', '&#x1F389;', '&#x1F680;', '&#x1F31F;', '&#x1F308;', '&#x1F525;', '&#x1F3AF;', '&#x1FA84;', '&#x1F331;'];
yeetBtn.addEventListener('click', (e) => {
yeetCount++;
// Message
const msgIndex = Math.min(yeetCount - 1, yeetMessages.length - 1);
yeetDisplay.textContent = `[${yeetCount} funz yeeted] ${yeetMessages[msgIndex]}`;
// Floating emoji
const emoji = document.createElement('div');
emoji.className = 'floating-funz';
emoji.innerHTML = emojis[Math.floor(Math.random() * emojis.length)];
emoji.style.left = (e.clientX - 10 + (Math.random() * 40 - 20)) + 'px';
emoji.style.top = (e.clientY - 10) + 'px';
document.body.appendChild(emoji);
setTimeout(() => emoji.remove(), 3000);
// Button feedback
yeetBtn.style.transform = 'scale(0.95)';
setTimeout(() => yeetBtn.style.transform = '', 100);
// After many clicks, change button text
if (yeetCount === 10) yeetBtn.textContent = 'YEET HARDER';
if (yeetCount === 20) yeetBtn.textContent = 'MAXIMUM YEET';
if (yeetCount === 50) yeetBtn.textContent = 'TRANSCENDENT YEET';
if (yeetCount === 100) {
yeetBtn.textContent = 'YOU WIN (there is no prize)';
yeetBtn.style.background = 'linear-gradient(135deg, var(--silly-pink), var(--silly-cyan))';
}
});
// Easter egg: Konami code
let konamiSeq = [];
const konamiCode = [38,38,40,40,37,39,37,39,66,65];
document.addEventListener('keydown', (e) => {
konamiSeq.push(e.keyCode);
if (konamiSeq.length > 10) konamiSeq.shift();
if (konamiSeq.join(',') === konamiCode.join(',')) {
document.documentElement.classList.toggle('party-mode');
for (let i = 0; i < 30; i++) {
setTimeout(() => {
const emoji = document.createElement('div');
emoji.className = 'floating-funz';
emoji.innerHTML = emojis[Math.floor(Math.random() * emojis.length)];
emoji.style.left = Math.random() * window.innerWidth + 'px';
emoji.style.top = Math.random() * window.innerHeight + 'px';
document.body.appendChild(emoji);
setTimeout(() => emoji.remove(), 3000);
}, i * 100);
}
}
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink