PronounsToday/web/templates/index.html
Ben Aaron Goldberg c64437a915 [web] Switch to semantic html for hiding the create link form
Signed-off-by: Ben Aaron Goldberg <ben@benaaron.dev>
2021-10-27 10:08:12 -04:00

70 lines
2.8 KiB
HTML

<html>
<head>
<title>{% if name.is_some() %} {{ name.as_ref().unwrap() }}'s {% else %}
My{% endif %} Pronouns Today</title>
<!-- OGP Tags -->
{% if name.is_some() %}
<meta property="og:title" content="{{ name.as_ref().unwrap() }}'s Pronouns Today" />
{% else %}
<meta property="og:title" content="Random Daily Pronouns" />
{% endif %}
<meta property="twitter:card" content="summary_large_image" />
<meta property="og:site_name" content="Pronouns.Today" />
<meta property="og:type" content="website" />
<meta property="og:url" content="{{ url }}" />
<meta property="og:image:url" content="{{ url }}/thumb.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="400" />
<meta property="og:image:alt" content="The pronouns {{pronoun.subject_pronoun | capitalize}}/{{pronoun.object_pronoun | capitalize}}" />
<meta property="og:description" content="{{ name.as_ref().map(String::as_str).unwrap_or("Whoever posted this") }} uses any pronouns, but for today, {{pronoun.subject_pronoun}} would appreciate it if you used {{pronoun.render_threeform()}} pronouns for {{pronoun.object_pronoun}}." />
<style>
#form {
display: none;
}
:checked + #form {
display: block;
}
</style>
</head>
<body>
<h1>{% if name.is_some() %} {{ name.as_ref().unwrap() }}'s {% else %}
My{% endif %} pronouns today are: {{ pronoun.render_threeform() }}</h1>
<p>This page picks a random pronoun from a list of preferred pronouns every
day.
{% if name.is_some() %} {{ name.as_ref().unwrap() }}{% else %}
Whoever linked you to this page{% endif %} would like you to try {{ pronoun.render_threeform() }} pronouns for
{{ pronoun.object_pronoun }} today.</p>
<h3>Here are some example sentences using my {{pronoun.subject_pronoun}}/{{pronoun.object_pronoun}} pronouns:</h3>
<p>{{ pronoun.subject_pronoun | capitalize }} walked the dog.</p>
<p>I went with {{ pronoun.object_pronoun }}.</p>
<p>{{ pronoun.subject_pronoun | capitalize }} rode {{ pronoun.possesive_determiner }} bike.</p>
<p>At least I think it is {{ pronoun.possesive_pronoun }}.</p>
<p>{{ pronoun.subject_pronoun | capitalize }} bought the stuffed animal for {{ pronoun.reflexive_pronoun }}.</p>
<hr/>
<details id="create-link">
<summary>Create your own custom pronouns link!</summary>
<form action="/" method="post">
<label for="name">Name</label>
<input type="text" id="name" name="name"/><br/>
{% for item in pronouns %}
<label for="{{ item.0 }}">{{ item.1.render_threeform() }}</label>
<input type="number" id="{{ item.0 }}" name="{{ item.0 }}" value="1"/><br/>
{% endfor %}
<input type="submit" value="Create!">
</form>
</details>
</body>
</html>