init
This commit is contained in:
293
public/join.html
Normal file
293
public/join.html
Normal file
@@ -0,0 +1,293 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user