snipette-crowdfunding-site/src/pledges.htm.twig
Hippo 668371a690 List recent pledges on home page
And a new "pledges" page to list them all!
2022-01-11 14:11:16 +05:30

46 lines
1.7 KiB
Twig

{% extends "base.htm.twig" %}
{% block title %}Snipette Crowdfunding: Pledges{% endblock %}
{% block content %}
<div class="max-w-md m-auto grow-0 text-left font-sans bg-white p-4 sm:rounded-lg">
<h1 class="text-4xl font-heading font-extrabold lowercase mb-4 text-center">Pledges so far</h1>
<p class="text-lg">Here is the list of pledges we've received so far. <a href="/#pledge-form">Add yours, if you haven't yet!</a>
<ul>
{% for pledge in recent_pledges %}
<li class="recent-pledge">
<div class="avatar-container">
<div class="avatar">
<span class="m-auto">
{% if pledge.get('anonymous') %}?{% else %}{{ pledge.get('name')[:2] }}{% endif %}
</span>
</div>
</div>
<div class="pl-2">
<p class="pledger-name">{% if pledge.get('anonymous') %}Anonymous{% else %}{{ pledge.get('name') }}{% endif %}</p>
<p class="font-bold">₹{{ pledge.get('amount') }}</p>
{% if pledge.get('other_message') %}
<p class="italic">{{ pledge.get('other_message')}}</p>
{% endif %}
</div>
</li>
{% endfor %}
<a href="/#pledge-form" class="no-underline">
<li class="recent-pledge">
<div class="avatar-container">
<div class="avatar">
<span class="m-auto">+</span>
</div>
</div>
<div class="pl-2">
<p class="pt-2">Add yours</p>
</div>
</li>
</a>
</ul>
<p class="text-center">
<a href="/" class="font-sans text-base mt-4 p-2 border-2 border-solid border-orange-700 text-orange-700 hover:border-orange-500 hover:text-orange-500 uppercase rounded w-full inline-block text-center no-underline">Return Home</a>
</p>
</div>
{% endblock %}