294 lines
10 KiB
HTML
294 lines
10 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" />
|
||
</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>
|