views.js

export const manifesto = `
<div class="content">
<h3>Manifesto</h3>

<p>
	In 1994, 12 black women coined the term “reproductive justice,” or "the complete physical, mental, spiritual, poitical, social, and economic well-being of women and girls, based on the foll achievement and protection of women’s human rights" as Loretta Ross describes. Fighting against reproductive oppression and misinformation is essential for our liberation.
</p>

<p>
	In 2021, <a href="#background">6 women of color</a> were brought together by their shared interest in reproductive justice at the <a href="https://www.ourfeministfutures.com/" target="_blank">Feminist Future(s) Hackathon</a>—Tia, Julie, Krithika, Dina, Althea and Tanvi. We believe in the power of healthy conversations to plant seeds for change. Conversations for Every Dinner  Table is a resource that reframes traditionally taboo and stigmatized topics related to reproductive processes so we can feel comfortable talking about them openly, learn from one another’s lived experiences, and have fun. By the end of the game, we hope that players can feel more connected with their own bodies as well as others’, more equipped to step outside of the oppressive narrative framework, and more confident in defining our own criteria of normalcy and care.
</p>

<p>
  Start a meaningful conversation by picking a card.
</p>
		
<h3 id="background">About the Team</h3>

<h3>DINA</h3>

<p>
Dina Benbrahim (she/her/hers) is an Arab multidisciplinary creative who uses a feminist lens to focus on illuminating the power in human beings to be transformative forces in society. Her current research investigates design for civic action and social justice for marginalized communities to collectively reimagine equitable futures. Dina has experience in design, art direction, copywriting and entrepreneurship in New York and Casablanca, with SYPartners New York, J. Walter Thompson New York and Casablanca, and Shem’s Publicité. She is now an Assistant Professor in Design. She is motivated to activate greatness in everyone she encounters.
</p>

<a href="https://www.dinabenbrahim.com/" target="_blank">website</a> / <a href="https://www.instagram.com/dina.benbrahim/" target="_blank">instagram</a>

<h3>TANVI</h3>

<p>
Tanvi Avasthi (she/her/hers) is a nurse, soon-to-be-midwife-and-women’s-health-nurse-practitioner, and anti-racism organizer. She grew up in Virginia and has spent the past few years in Baltimore learning to love crabs. Tanvi loves teaching nursing students and yoga students, guiding people through the best sex and birth possible, and crushing white supremacy and patriarchy unapologetically.
</p>

<h3>TIA</h3>

<p>
Tia Jain (she/her/hers) is an incoming freshman at UC Berkeley studying Computer Science. She is deeply interested in solving issues with an ethical lens—especially in technology. For the past couple of years, she has been exploring the intersection of Artificial Intelligence and Healthcare by publishing bioinformatics and machine learning research as well as an AI-based iOS app. She’s committed to empowering and amplifying the voices of historically underrepresented students, particularly in the CS space.
</p>

<a href="https://www.instagram.com/tiajainn/" target="_blank">instagram</a> / <a href="https://www.linkedin.com/in/tiajain/" target="_blank">linkedin</a>

<h3>ALTHEA</h3>

<p>
Althea Rao (she/her/hers) creates social engagement models to facilitate playful conversations that unpack normalized systemic power imbalance. She draws influence from media studies, intersectionality, design justice and grass-root organizing. Her project Vagina Chorus, a bio-responsive, socially-engaged multimedia performance spotlighting women’s health and healthcare accessibilities, is a recipient of the 2020 MAP Fund. Currently, she focuses on revealing states of institutionalized disempowerment, facilitating radical community healing, and designing systems for intrinsic accountability.
</p>

<a href="https://altheamrao.myportfolio.com/" target="_blank">website</a> / <a href="https://www.instagram.com/cloudvillle/" target="_blank">instagram</a> 


<h3>JULIE CHO</h3>

<p>
Julie Cho (she/her/hers) is an LA-based social psychology researcher studying social learning and transitioning into UX. She’s invested in using data to increase accessibility and create social impact, drawing from her experiences in academia and organizing. As a 1.5-generation Korean American, she’s constantly language brokering, exposing different flavors of patriarchy, and advocating for individual and group therapy.
<p>

<a href="https://www.instagram.com/hyejibeji/" target="_blank">instagram</a> 

<h3>JULIE LAM</h3>
<p>
Julie Lam (she/her/hers) is studying Computer Science, Cognitive Science, and Arts & Creative Technologies at Oberlin College (class of 2023). She is currently interested in the intersection of new media, design justice, and human-computer interaction. She believes in building technology using a critical and interdisciplinary lens, and has spent the past six years working within community art initiatives and feminist and antiracist organizing, most recently in the realm of AI ethics. 
</p>

<a href="https://julielam.glitch.me" target="_blank">website</a> / <a href="https://www.instagram.com/2julies/" target="_blank">instagram</a> 

<h3>ARSH</h3>

<p>bio coming soon</p>
</div>
`;

export const instructions = `
<div class="content">
<h3>Instructions</h3>

<p>
As the title suggests, Conversations for Every Dinner Table is suitable for intimate or social group gatherings. Conversations may take place among groups of 2 - 7 people of friends and families, between generations, and across genders. With the presence of a mediator, this game can be used to facilitate educational public programs, such as school workshops, public library offerings, or Trivia Night at local bars, using the digital version (currently work-in-progress). If there is a use case you’d like to suggest or discuss with us, please feel free to send an email to <a href="mailto:ffrj2021@googlegroups.com">ffrj2021@googlegroups.com</a>. 
</p>

<p>
There are 2 types of cards to draw from in this deck: Prompt Cards and Key Cards. First, separate the Prompt Cards and Key Cards into 2 separate decks.
</p>

<h3>PROMPT CARDS</h3>

<p>
Prompt Cards invite responses from players, starting a conversation. They are divided into seven topic categories: 
</p>

<p>
Postpartum | Menstruation | Pregnancy | Menopause | Sex | Abortion | Reproductive Health 
</p>

<h3>KICKING OFF THE GAME</h3>

<p>
At the beginning of the game, each player draws seven Prompt Cards, one from each category. Alternatively, for a quicker game, shuffle all the categories together and ask each player to draw only four Prompt Cards. 
</p>

<p>
Any player can volunteer to kick off the game by picking one of their cards and reading the prompt written on the card out loud to the group. Some prompts will ask the player to answer a question, while others may instruct the player to draw something or share a story. Below are the types of prompts:
</p>

<p>
Answer a Question | Reflect | Guess | Think Wildly | Draw | Tell A Story
</p>

<p>
The player will respond to the prompt first, then invite other players from the group to respond to it, creating a conversation. 
</p>

<h3>KEY CARDS</h3>
<p>
If a player finds it difficult to come up with an answer or the conversation experiences hiccups, draw a Key Card to help move the dialogue forward. They are:
</p>

<p>
Mirror | Silence | Swap | Speculative | Affirmation 
<br>
Think Positively | Listen Deeply | Sit In Stillness
</p>

<h3>MOVING ON</h3>

<p>
Once all the players agree to move on from the first Prompt Card, the next player (your choice of clockwise, counterclockwise, or popcorn) will continue by reading out one card of their choice.
</p>

<h3>EXIT</h3>

<p>
You do not have to finish discussing all the cards in order for this game to end. Like other dinner table conversations, this one is not rigid either.
</p>
</div>`;

export const guidelines = `
<div class="content">
<h3>Community Guidelines</h3>
<p>
It is important to hold conversations that are respectful, thought-provoking, and most importantly safe. Safety in a conversation means not just being heard, but the words that are used do not cause more harm to those who are systematically left behind: people of color, people with disabilities, LGBTQ+ people, women, and many others intersectional identities that are usually not heard. Here are some community guidelines that can support healthy and fruitful conversations and are not meant to harm or pass judgment, but uplift and spread joy and safety. Take some time to read these together and propose additional guidelines you think would help you feel open to the possibilities of new conversations.
</p>

---

<ul>
<li>
This game is intended to hold a safe space to discuss topics related to our bodies and broader reproductive justice.
</li>

<li>
Be kind to yourself and other people while playing this game, and beyond. Sometimes harm can be unintentional, but impact is greater than intention - it is essential to acknowledge harm, discuss how it could be avoided, and help the person learn how to avoid unkindness in the future (even beyond this game!)
</li>

<li>
Everyone playing this game should be a part of the conversation and have their voice heard should they wish to contribute. At the same time, players should feel free to skip questions, choose not to share, or decide to leave the game at any moment during the course of a game. 
</li>

<li>
Active, open discussion is welcome. However, silence is also valid and welcome as a moment of deep engagement and reflection.
</li>

<li>
View uncomfortable feelings -- your own or observed from others -- with tenderness and care.
</li>

<li>
Some conversations take courage. Acknowledge that courage by agreeing to keep the conversations discussed during gameplay private and not to be repeated without permission from other players. 
</li>

<li>
To help everyone enjoy the conversation, keep in mind the following when you contribute your thoughts or answers: 

<ul>
<li>
Avoid defamatory, indecent, offensive, profane, discriminatory, misleading, unlawful or threatening language. 
</li>

<li>
Personal attacks, name-calling, trolling and abuse will not be acceptable and require an apology.
</li>

<li>
Different viewpoints are welcome. Respect that other people playing this game have had different life experiences and may have a different perspective to yours.
</li>
</ul>
</li>

<li>
Ask the group if there are any other guidelines that players want to establish before playing the game.
</li>
</ul>
</div>
`;

export const guidelinesModal = `
<p>
It is important to hold conversations that are respectful, thought-provoking, and most importantly safe. Safety in a conversation means not just being heard, but the words that are used do not cause more harm to those who are systematically left behind: people of color, people with disabilities, LGBTQ+ people, women, and many others intersectional identities that are usually not heard. Here are some community guidelines that can support healthy and fruitful conversations and are not meant to harm or pass judgment, but uplift and spread joy and safety. Take some time to read these together and propose additional guidelines you think would help you feel open to the possibilities of new conversations.
</p>

---

<ul>
<li>
This game is intended to hold a safe space to discuss topics related to our bodies and broader reproductive justice.
</li>

<li>
Be kind to yourself and other people while playing this game, and beyond. Sometimes harm can be unintentional, but impact is greater than intention - it is essential to acknowledge harm, discuss how it could be avoided, and help the person learn how to avoid unkindness in the future (even beyond this game!)
</li>

<li>
Everyone playing this game should be a part of the conversation and have their voice heard should they wish to contribute. At the same time, players should feel free to skip questions, choose not to share, or decide to leave the game at any moment during the course of a game. 
</li>

<li>
Active, open discussion is welcome. However, silence is also valid and welcome as a moment of deep engagement and reflection.
</li>

<li>
View uncomfortable feelings -- your own or observed from others -- with tenderness and care.
</li>

<li>
Some conversations take courage. Acknowledge that courage by agreeing to keep the conversations discussed during gameplay private and not to be repeated without permission from other players. 
</li>

<li>
To help everyone enjoy the conversation, keep in mind the following when you contribute your thoughts or answers: 
<ul>
<li>
Avoid defamatory, indecent, offensive, profane, discriminatory, misleading, unlawful or threatening language. 
</li>

<li>
Personal attacks, name-calling, trolling and abuse will not be acceptable and require an apology.
</li>

<li>
Different viewpoints are welcome. Respect that other people playing this game have had different life experiences and may have a different perspective to yours.
</li>
</ul>
</li>

<li>
Ask the group if there are any other guidelines that players want to establish before playing the game.
</li>
</ul>
`;

export const cardDesign = `
<div class="content">
<h3>Card Design</h3>
<p>Conversations For Every Dinner Table originated as a physical card deck. It will be available to purchase soon. Check back for updates!</p>

<p>
Also, check out Repro Convos on
      <a href="https://www.instagram.com/reproconvos/" target="_blank"
        >Instagram</a
      >
      and
      <a
        href="https://www.facebook.com/profile.php?id=100068455756498"
        target="_blank"
        >Facebook</a
      >
</p>
<img src="/assets/mockup_03.jpg"></img>
<img src="/assets/mockup_04.jpg"></img>
<img src="/assets/mockup_02.jpg"></img>
<img src="/assets/mockup_01.jpg"></img>
<img src="/assets/mockup_05.jpg"></img>
<img src="/assets/mockup_06.jpg"></img>
<img src="/assets/mockup_07.jpg"></img>
</div>
`;

export const home = `
<h1>Conversations For Every Dinner Table</h1>
      <button id="begin">Click to Begin</button>
    </div>
    <div id="card" hidden></div>
    <div id="btns">
      <button id="key" hidden>Draw a Key Card</button>
      <button id="answer" hidden>See the Answer</button>
      <button id="back" hidden>Back to Card</button>
      <button id="next" hidden>Draw a Prompt Card</button>
    </div>`;

export const key = `
<h2></h2>
<div class="card-content key">
<img></img>
<p></p>
</div>
`;

export const prompt = `
<h2></h2>
<div class="card-content">
<p></p>
</div>
<h4></h4>
`;

export const answer = `
<h2>ANSWER</h2>
<div class="card-content">
<p></p>
</div>
<h4></h4>`;