www/membership/templates/members.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex">
    <title>{% if title %}{{ title }}{% else %}Membership{% endif %} · eom.dev</title>
    <link rel="stylesheet" href="/static/home.css">
    <link rel="stylesheet" href="/static/membership.css">
    <link rel="icon" href="/static/favicon.svg" type="image/svg+xml">
</head>
<body>
<header class="member-nav">
    <a class="brand" href="/">eom.dev</a>
    <nav aria-label="Membership navigation"><a href="/">Back to the lab</a><a href="{% url 'members:home' %}">Membership</a></nav>
</header>
<main id="main-content" class="member-main">
{% if title %}
    <section class="member-panel form-panel">
        <p class="eyebrow">One account. An independent community.</p>
        <h1>{{ title }}</h1>
        {% if message %}<p>{{ message }}</p>{% endif %}
        {% if registration %}
        <p>One account for all of eom.dev. Use the same sign-in to explore the community and its services, without creating a separate account for each one.</p>
        <ol>
            <li>Choose a username and enter your email address below.</li>
            <li>Check your inbox and follow the confirmation link.</li>
            <li>Choose a password, then sign in and start exploring.</li>
        </ol>
        <p>Creating an account is free. Paid memberships are optional and unlock additional benefits.</p>
        {% endif %}
        {% if form %}
        <form method="post">
            {% csrf_token %}
            {{ form.as_p }}
            <button class="button button-primary" type="submit">{{ submit }}</button>
        </form>
        {% endif %}
        <p><a href="{% url 'members:home' %}">Back to membership</a></p>
        <form action="{% url 'members:login' %}" method="post">{% csrf_token %}<button class="button button-secondary" type="submit">Sign in to eom.dev</button></form>
    </section>
{% else %}
    <section class="member-hero">
        <p class="eyebrow">Keep your own corner of the internet alive</p>
        <h1>A place to belong.<br>A way to give back.</h1>
        <p class="member-intro">A private place to connect, a closer look at what is being made, and opportunities to help shape it. Start with a free eom.dev account, then choose an optional membership to support the independent work.</p>
        {% if account %}
        <div class="member-panel account-panel">
            <div><p class="eyebrow">Your eom.dev account · Membership level {{ account.membership_level }}</p><h2>{{ account.uid }}</h2><p>{{ account.email }}</p></div>
            <div class="member-actions">
                {% if account.stripe_customer %}<form action="{% url 'members:portal' %}" method="post">{% csrf_token %}<button class="button button-primary" type="submit">Manage billing</button></form>{% endif %}
                <form action="{% url 'members:logout' %}" method="post">{% csrf_token %}<button class="button button-secondary" type="submit">Sign out</button></form>
            </div>
        </div>
        {% if request.GET.checkout %}<p role="status" class="member-notice">Thanks for supporting the work. Stripe is confirming your subscription. Access appears after payment is verified and the membership worker has synchronized it.</p>{% endif %}
        {% for subscription in subscriptions %}
        <p class="member-notice">{% for key, tier in tiers.items %}{% if key == subscription.tier %}{{ tier.label }}{% endif %}{% empty %}Membership{% endfor %} · {{ subscription.status }}{% if subscription.paid_until > now %} · Paid access through {{ subscription.paid_until|date:"M j, Y H:i T" }}{% else %} · No current paid access{% endif %}{% if subscription.cancel_at_period_end %} · Does not renew{% endif %}</p>
        {% endfor %}
        {% for invoice in crypto_invoices %}
        <p class="member-notice">SHKeeper · {% for key, tier in tiers.items %}{% if key == invoice.tier %}{{ tier.label }}{% endif %}{% empty %}Membership{% endfor %} · {{ invoice.status }}{% if invoice.access_end > now %} · Prepaid term {{ invoice.access_start|date:"M j, Y" }}–{{ invoice.access_end|date:"M j, Y" }}{% endif %} · <a href="{% url 'members:crypto_invoice' invoice.id %}">View crypto invoice</a></p>
        {% endfor %}
        <p class="member-small">Membership access updates automatically, usually within a few minutes. Signing out here does not sign you out of other eom.dev services.</p>
        {% else %}
        <div class="member-actions">
            <a class="button button-primary" href="{% url 'members:register' %}">Create a free account</a>
            <form action="{% url 'members:login' %}" method="post">{% csrf_token %}<button class="button button-secondary" type="submit">Sign in to eom.dev</button></form>
        </div>
        {% endif %}
    </section>
    <section aria-labelledby="tiers-heading">
        <div class="section-heading"><p class="eyebrow">Your support, your choice</p><h2 id="tiers-heading">Find your membership</h2><p>Public projects and ordinary community participation stay free. Membership adds a closer connection to the work, not a barrier to joining in.</p></div>
        <div class="member-grid">
            <article class="member-panel tier-card free-tier">
                <p class="card-kicker">Level 0 · The starting point</p><h3>Open Lab</h3><p class="tier-price">Free <span>/ always</span></p>
                <p>One account for eom.dev, its community, and its services.</p>
                <ul><li>No payment required</li><li>One account for compatible community services</li><li>Upgrade whenever you choose</li></ul>
                {% if not account %}<a class="button button-secondary" href="{% url 'members:register' %}">Join the community</a>{% else %}<p class="tier-footnote">Your free account is ready.</p>{% endif %}
            </article>
            {% for key, tier in tiers.items %}
            <article class="member-panel tier-card">
                <p class="card-kicker">Level {{ tier.level }} · Independent work, supported together</p><h3>{{ tier.label }}</h3><p class="tier-price">{{ tier.price_label }}</p>
                <p>{{ tier.description|default:"Help keep the projects and community running." }}</p>
                <ul>{% for benefit in tier.benefits %}<li>{{ benefit }}</li>{% empty %}<li>Support independent projects and the community</li>{% endfor %}</ul>
                {% if account %}<div class="tier-payment-actions"><form action="{% url 'members:checkout' key %}" method="post">{% csrf_token %}<button class="button button-primary" type="submit">Subscribe with Stripe</button></form>
                {% if shkeeper_enabled and tier.usd_amount %}<a class="button button-secondary" href="{% url 'members:crypto_checkout' key %}">Pay with crypto</a>{% endif %}</div>{% else %}<a class="button button-primary" href="{% url 'members:register' %}">Create an account to join</a>{% endif %}
            </article>
            {% empty %}<div class="member-panel"><h3>Paid memberships are coming soon.</h3><p>You can create your free account now. Paid tiers will appear when their prices and groups are configured.</p></div>{% endfor %}
        </div>
        <p class="member-small">One shared members' space, not a separate community at every price. Platinum and Diamond include the same access as Gold; choose them if you would like to contribute more.</p>
        <p class="member-small">Previews are shared when available, and playtests, listening sessions and feedback gatherings are occasional. Membership does not include storage quotas, personal consulting, guaranteed support or promised feature development. Recognition is always optional.</p>
    </section>
    <section class="member-faq" aria-labelledby="membership-faq">
        <h2 id="membership-faq">Simple, by design.</h2>
        <details><summary>What happens when a membership ends?</summary><p>Your free eom.dev account stays. Member-only access ends when your paid membership expires. An immediate cancellation removes that access once your membership status updates.</p></details>
        <details><summary>Where do members connect?</summary><p>The shared members' Matrix space is the home for informal conversations and work in progress. Private forum discussions can complement it as they become available, without splitting everyone into separate rooms for each tier.</p></details>
        <details><summary>What can I preview or take part in?</summary><p>Depending on what is being made, Silver members and above may preview music, game builds, videos or new experiments and join playtests or listening sessions. Gold members and above can also take part in project-topic polls and occasional small-group feedback sessions. Polls help inform the work; they are not promises to build requested features.</p></details>
        <details><summary>Can I change or cancel a plan?</summary><p>Use Manage billing after signing in. The billing portal offers the changes enabled for your plan. Cancellation at period end keeps access through the paid expiry date.</p></details>
        {% if shkeeper_enabled %}<details><summary>How do crypto memberships renew?</summary><p>SHKeeper payments prepay one calendar month, without automatic charges. Create a new invoice for each renewal. Confirmed payment on the same tier extends its prepaid term. Partial or unconfirmed payments do not grant access. Do not send renewal funds to an old invoice address.</p></details>{% endif %}
    </section>
{% endif %}
</main>
<footer class="member-footer">Made independently. Supported by the community. <a href="mailto:eric@eom.dev">Questions? Get in touch.</a></footer>
</body>
</html>