zias
afc3f42253
the analytics are IN, the plausible is PLAUSIBLE, and now we know exactly which poulinkes fan spends 47 minutes on the lore page at 3am. it's you. we know it's you. the chickens know too. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
296 lines
11 KiB
HTML
296 lines
11 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Join the Flock — POULINKES.COM</title>
|
||
<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'>🐔</text></svg>"
|
||
/>
|
||
<link rel="stylesheet" href="/style.css" />
|
||
<script defer data-domain="poulinkes.com" src="https://analytics.zias.be/js/script.file-downloads.hash.outbound-links.pageview-props.revenue.tagged-events.js"></script>
|
||
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
|
||
</head>
|
||
<body>
|
||
<nav>
|
||
<div class="nav-brand">🐔 POULINKES.COM</div>
|
||
<ul>
|
||
<li><a href="/">The Nest</a></li>
|
||
<li><a href="/lore.html">Poulinke Lore</a></li>
|
||
<li><a href="/meet.html">Meet the Flock</a></li>
|
||
<li><a href="/conspiracies.html">Conspiracies</a></li>
|
||
<li><a href="/shop.html">Egg Shop</a></li>
|
||
<li><a href="/join.html" class="cta">Join the Flock</a></li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<section class="join-section">
|
||
<div class="join-container">
|
||
<!-- PRE-FORM -->
|
||
<div id="join-form-container">
|
||
<div
|
||
style="
|
||
font-size: 4rem;
|
||
margin-bottom: 1.5rem;
|
||
animation: chickenGaze 6s ease-in-out infinite;
|
||
display: block;
|
||
"
|
||
data-secret-chicken
|
||
>
|
||
🐔
|
||
</div>
|
||
<h1
|
||
style="
|
||
font-family: "Cinzel", serif;
|
||
font-size: clamp(1.8rem, 5vw, 3rem);
|
||
font-weight: 900;
|
||
color: var(--egg-yolk);
|
||
margin-bottom: 1rem;
|
||
line-height: 1.2;
|
||
"
|
||
>
|
||
You Were Already One of Us.
|
||
</h1>
|
||
<p class="join-preamble">
|
||
This form is not an application. Applications imply that there is a
|
||
selection process, and there is no selection process. The poulinkes
|
||
have already selected you. This form is simply the moment you
|
||
<em>acknowledge</em> what has always been true. <br /><br />
|
||
Fill it in carefully. They are reading over your shoulder. Not
|
||
metaphorically. Literally. Turn around if you like. You have already
|
||
turned back here. You knew what you'd see.
|
||
</p>
|
||
|
||
<form id="join-form">
|
||
<div class="form-group">
|
||
<label for="name">Your Name (current human designation)</label>
|
||
<input
|
||
type="text"
|
||
id="name"
|
||
name="name"
|
||
placeholder="The name they gave you"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="email">Email (for flock correspondence)</label>
|
||
<input
|
||
type="email"
|
||
id="email"
|
||
name="email"
|
||
placeholder="your@existence.com"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="poulinke-name"
|
||
>Your Poulinke Name (if you already know it)</label
|
||
>
|
||
<input
|
||
type="text"
|
||
id="poulinke-name"
|
||
name="poulinke-name"
|
||
placeholder="Leave blank if it hasn't surfaced yet. It will."
|
||
/>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="affiliation">Your Relationship to Poulinkes</label>
|
||
<select id="affiliation" name="affiliation" required>
|
||
<option value="" disabled selected>Choose honestly</option>
|
||
<option value="devotee">I am a devoted human follower</option>
|
||
<option value="suspected">
|
||
I have been told I might be a poulinke
|
||
</option>
|
||
<option value="confirmed">
|
||
I am a poulinke and this form is a formality
|
||
</option>
|
||
<option value="uncertain">
|
||
I came for the eggs but something else is happening
|
||
</option>
|
||
<option value="coerced">
|
||
A poulinke stared at me until I came here
|
||
</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="sign">The Sacred Oath</label>
|
||
<textarea
|
||
id="sign"
|
||
name="sign"
|
||
placeholder="Type: 'I acknowledge the poulinkes. I acknowledge what I am. I acknowledge that the egg came first and that this matters more than I previously understood.' — Or anything else. They will know what you mean."
|
||
></textarea>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="feathers"
|
||
>Have you found an unexplained feather recently?</label
|
||
>
|
||
<select id="feathers" name="feathers">
|
||
<option value="yes">Yes</option>
|
||
<option value="no">No</option>
|
||
<option value="notsure">
|
||
I'm not sure but now I need to check
|
||
</option>
|
||
<option value="always">They never stop coming</option>
|
||
</select>
|
||
</div>
|
||
|
||
<button
|
||
type="submit"
|
||
class="btn btn-solid"
|
||
style="
|
||
width: 100%;
|
||
font-size: 1rem;
|
||
padding: 1.1rem;
|
||
margin-top: 0.5rem;
|
||
"
|
||
>
|
||
🐔 ENTER THE FLOCK 🐔
|
||
</button>
|
||
</form>
|
||
|
||
<p class="join-disclaimer">
|
||
By submitting this form you agree to nothing and everything
|
||
simultaneously. Your data will be shared with: the poulinkes, the
|
||
egg, the flock, and several roosting entities whose legal status is
|
||
pending. You may unsubscribe by going outside at dawn and saying "I
|
||
respectfully withdraw" three times to a chicken. The chicken will
|
||
not acknowledge this. Your unsubscription is still recorded.
|
||
Membership is lifelong. Membership may predate your life. We cannot
|
||
confirm when it started. We cannot confirm it will end.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- SUCCESS STATE -->
|
||
<div class="join-success" id="join-success">
|
||
<div
|
||
style="
|
||
font-size: 5rem;
|
||
margin-bottom: 1rem;
|
||
animation: overlordPulse 2s ease-in-out infinite;
|
||
"
|
||
>
|
||
🐔
|
||
</div>
|
||
<h2>You Are Now One of Us.</h2>
|
||
<p>
|
||
This was not a choice. This was a recognition.<br /><br />
|
||
You have always been of the flock. The flock has always known you.
|
||
The egg that was laid before your birth contains something that
|
||
corresponds to your name. We will not explain further.
|
||
<em>You already understand.</em> <br /><br />
|
||
Welcome home, poulinke.
|
||
<br /><br />
|
||
A feather is already on its way to you. You may not receive it in a
|
||
physical envelope. You will receive it nonetheless.
|
||
</p>
|
||
<div
|
||
style="
|
||
margin-top: 2rem;
|
||
padding-top: 1.5rem;
|
||
border-top: 1px solid rgba(245, 158, 11, 0.2);
|
||
"
|
||
>
|
||
<p
|
||
style="
|
||
font-family: "Cinzel", serif;
|
||
font-size: 0.75rem;
|
||
color: var(--egg-yolk);
|
||
letter-spacing: 0.15em;
|
||
text-transform: uppercase;
|
||
opacity: 0.7;
|
||
"
|
||
>
|
||
Your Flock Number: #<span id="flock-number"></span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- WHAT HAPPENS NEXT -->
|
||
<section style="background: var(--egg-cream); padding: 5rem 2rem">
|
||
<h2 class="section-title">What Happens After You Join</h2>
|
||
<p class="section-sub">A transparent overview of the process.</p>
|
||
<div class="cards" style="max-width: 900px; margin: 0 auto">
|
||
<div class="card wiggle">
|
||
<span class="card-icon">1️⃣</span>
|
||
<h3>Nothing Visible Changes</h3>
|
||
<p>
|
||
Your daily life will appear identical. Your coffee will taste the
|
||
same. Your commute will be no different. This is not evidence that
|
||
nothing has changed. This is the design.
|
||
</p>
|
||
</div>
|
||
<div class="card wiggle">
|
||
<span class="card-icon">2️⃣</span>
|
||
<h3>You Will Notice Poulinkes More</h3>
|
||
<p>
|
||
Not because there are more of them. Because you now see them. They
|
||
were always there. Behind the fence. At the park. In the dream you
|
||
had last Thursday. Behind your left shoulder, right now.
|
||
</p>
|
||
</div>
|
||
<div class="card wiggle">
|
||
<span class="card-icon">3️⃣</span>
|
||
<h3>A Poulinke Will Make Eye Contact With You</h3>
|
||
<p>
|
||
Once. Deliberately. Without blinking. For longer than seems
|
||
appropriate. It will look away first. This is a gift. You will not
|
||
know what to do with it. This is also fine. This is correct.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<p>🐔 <strong>POULINKES.COM</strong> 🐔</p>
|
||
<p>
|
||
Established Before Time Itself · All Rights Reserved by the Poulinkes ·
|
||
Humans May Not Have Rights Here
|
||
</p>
|
||
<p
|
||
style="
|
||
margin-top: 0.5rem;
|
||
font-family: "Courier Prime", monospace;
|
||
font-size: 0.7rem;
|
||
opacity: 0.4;
|
||
"
|
||
>
|
||
Hint: type "cluck" · Hint: ↑ ↑ ↓ ↓ ← → ← → B A · You were always going
|
||
to end up on this page
|
||
</p>
|
||
<p
|
||
style="
|
||
margin-top: 0.75rem;
|
||
font-family: "Courier Prime", monospace;
|
||
font-size: 0.65rem;
|
||
opacity: 0.25;
|
||
"
|
||
>
|
||
This website was not built. It was <em>laid</em>. By
|
||
<a href="https://zias.be" style="color: inherit; text-decoration: none"
|
||
>zias.be</a
|
||
>. One (1) human was permitted. The council has been notified.
|
||
</p>
|
||
</footer>
|
||
|
||
<script>
|
||
// Generate a flock number on load so it's ready for the success state
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
const n = document.getElementById("flock-number");
|
||
if (n)
|
||
n.textContent = Math.floor(
|
||
Math.random() * 9000000 + 1000000,
|
||
).toLocaleString();
|
||
});
|
||
</script>
|
||
<script src="/main.js"></script>
|
||
</body>
|
||
</html>
|