generated from nhcarrigan/template
feat: add the playroom page for social media game templates
✨ This feature was built with help from Hikari~ 🌸
This commit is contained in:
@@ -0,0 +1,32 @@
|
|||||||
|
/**
|
||||||
|
* Playroom template data.
|
||||||
|
* @file
|
||||||
|
* @copyright Naomi Carrigan
|
||||||
|
* @license Naomi's Public License
|
||||||
|
* @author Naomi Carrigan
|
||||||
|
*/
|
||||||
|
|
||||||
|
interface PlayroomTemplate {
|
||||||
|
blankAlt: string;
|
||||||
|
blankUrl: string;
|
||||||
|
completedAlt: string;
|
||||||
|
completedUrl: string;
|
||||||
|
description: string | null;
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const playroomTemplates: Array<PlayroomTemplate> = [
|
||||||
|
{
|
||||||
|
blankAlt: "A 3×3 alignment chart meme applying the D&D lawful/neutral/chaotic and top/switch/bottom axes to bedroom dynamics. The nine categories and their descriptors are: Lawful Top — knows what they want, big strap/dick energy, will cook food after; Neutral Top — spouse material, wines and dines you, will get to it as soon as you're home; Chaotic Top — way into dirty talk, keyboard smasher, wants to order pizza after; Lawful Switch — sex toy hoarder, \"making you cum is my job\", secretly wants to bottom all the time; True Switch — kinkier than you, low-key horny 24/7, aftercare monarch; Chaotic Switch — brat 24/7, always flirty, might fall asleep during sex; Lawful Bottom — desperate to please, will call you daddy/mommy, will cook food after, naked; Neutral Bottom — just happy to be topped, very soft, will take nap after; Chaotic Bottom — goblin, makes jokes during sex, demands candy after.",
|
||||||
|
blankUrl: "https://cdn.nhcarrigan.com/personality/playroom/alignment-chart-top-switch-bottom-blank.png",
|
||||||
|
completedAlt: "A 3×3 alignment chart meme applying the D&D lawful/neutral/chaotic and top/switch/bottom axes to bedroom dynamics. Several items are highlighted in pink. Lawful Top — knows what they want ✦highlighted, big strap/dick energy, will cook food after; Neutral Top — spouse material ✦highlighted, wines and dines you ✦highlighted, will fuck you as soon as you get home ✦highlighted; Chaotic Top — way into dirty talk, keyboard smasher, wants to order pizza after ✦highlighted; Lawful Switch — sex toy hoarder ✦highlighted, \"making you cum is my job\" ✦highlighted, secretly wants to bottom all the time; True Switch — kinkier than you, low-key horny 24/7, aftercare monarch; Chaotic Switch — brat 24/7, always flirty ✦highlighted, might fall asleep during sex; Lawful Bottom — desperate to please, will call you daddy/mommy, will cook food after naked; Neutral Bottom — just happy to be topped, very soft, will take nap after; Chaotic Bottom — goblin, makes jokes during sex, demands candy after.",
|
||||||
|
completedUrl: "https://cdn.nhcarrigan.com/personality/playroom/alignment-chart-top-switch-bottom-naomi.png",
|
||||||
|
description: "The classic top/switch/bottom alignment chart - which traits hit a little too close to home~",
|
||||||
|
id: "alignment-chart-top-switch-bottom",
|
||||||
|
name: "Top/Switch/Bottom Alignment Chart",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export type { PlayroomTemplate };
|
||||||
|
export { playroomTemplates };
|
||||||
@@ -40,6 +40,14 @@ import Base from "../layouts/Base.astro";
|
|||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
<a href="/playroom" class="nav-card">
|
||||||
|
<h2>🎴 The Playroom</h2>
|
||||||
|
<p>
|
||||||
|
Alignment charts, bingo cards, and social media games - grab the
|
||||||
|
blank and fill it out~
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
|
||||||
<a href="https://manual.nhcarrigan.com" class="nav-card">
|
<a href="https://manual.nhcarrigan.com" class="nav-card">
|
||||||
<h2>📖 User Manual</h2>
|
<h2>📖 User Manual</h2>
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
@@ -0,0 +1,151 @@
|
|||||||
|
---
|
||||||
|
import Base from "../layouts/Base.astro";
|
||||||
|
import { playroomTemplates } from "../data/playroom";
|
||||||
|
---
|
||||||
|
|
||||||
|
<Base
|
||||||
|
title="The Playroom"
|
||||||
|
description="Naomi Carrigan's filled-out social media templates and games."
|
||||||
|
>
|
||||||
|
<main>
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>🎴 The Playroom</h1>
|
||||||
|
<a href="/" class="back-link">← Back</a>
|
||||||
|
</div>
|
||||||
|
<p class="intro">
|
||||||
|
Alignment charts, bingo cards, and all kinds of social media games - my
|
||||||
|
completed results live here. Grab the blank template, fill it out, and
|
||||||
|
make it yours~
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{
|
||||||
|
playroomTemplates.length === 0 ? (
|
||||||
|
<p class="empty">Nothing here yet - check back soon!</p>
|
||||||
|
) : (
|
||||||
|
<div class="templates-grid">
|
||||||
|
{playroomTemplates.map((template) => (
|
||||||
|
<div class="template-card">
|
||||||
|
<h2 class="template-name">{template.name}</h2>
|
||||||
|
{template.description && (
|
||||||
|
<p class="template-description">{template.description}</p>
|
||||||
|
)}
|
||||||
|
<div class="images">
|
||||||
|
<div class="image-block">
|
||||||
|
<p class="image-label">My result</p>
|
||||||
|
<img
|
||||||
|
src={template.completedUrl}
|
||||||
|
alt={template.completedAlt}
|
||||||
|
class="template-image"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="image-block">
|
||||||
|
<p class="image-label">Grab the blank~</p>
|
||||||
|
<img
|
||||||
|
src={template.blankUrl}
|
||||||
|
alt={template.blankAlt}
|
||||||
|
class="template-image"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</main>
|
||||||
|
</Base>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.page-header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-link {
|
||||||
|
color: var(--accent);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-link:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro {
|
||||||
|
font-size: 1.05rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
opacity: 0.85;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
font-size: 1rem;
|
||||||
|
opacity: 0.5;
|
||||||
|
font-style: italic;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.templates-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-card {
|
||||||
|
padding: 1.5rem;
|
||||||
|
background: var(--background);
|
||||||
|
border: 2px solid var(--border);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-name {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
margin: 0 0 0.5rem;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-description {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
opacity: 0.8;
|
||||||
|
margin: 0 0 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.images {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-block {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-label {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: bold;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
opacity: 0.6;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-image {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user