fosspay/templates/index.html

113 lines
4.2 KiB
HTML

{% extends "layout.html" %}
{% block body %}
<div class="well">
<div class="container">
<h1>Donate to {{ _cfg("your-name") }}</h1>
<p><a href="#" data-toggle="modal" data-target="#how-this-works-modal">How does this work?</a></p>
</div>
</div>
<noscript>
<div class="container">
<div class="alert alert-danger">
<p>This page requires Javascript. It's necessary to send your credit card number to
<a href="https://stripe.com/">Stripe</a> directly, so you don't need to trust me with it.</p>
</div>
</div>
</noscript>
<div class="container text-center">
<h3>How much?</h3>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">$5</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">$10</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">$20</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">$50</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Custom</button>
</div>
</div>
</div>
</div>
<h3>How often?</h3>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Once</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Monthly</button>
</div>
</div>
</div>
</div>
{% if len(projects) > 1 %}
<h3>What project?</h3>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="form-group">
<select>
<option value="none">None in particular</option>
{% for project in projects %}
<option value="{{ project.id }}">{{ project.name }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
{% endif %}
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="form-group">
<input type="text" class="form-control" placeholder="Any comments?" />
</div>
</div>
</div>
<div class="row" style="margin-top: 50px">
<div class="col-md-4 col-md-offset-4">
<button class="btn btn-block btn-success">Donate</button>
</div>
</div>
</div>
<hr />
<div class="container text-center">
<p>
<small class="text-muted">
Been here before? <a href="/login">Log in</a> to view your donation
history, edit recurring donations, and so on.
</small>
</p>
<p>
<small class="text-muted">
Powered by <a href="https://github.com/SirCmpwn/fosspay">fosspay</a>.
</small>
</p>
</div>
<div class="modal fade" id="how-this-works-modal" tabindex="-1" role="dialog" aria-labelledby="how-label">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="how-label">How does this work?</h4>
</div>
<div class="modal-body">
{% include "how-this-works.html" %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Dismiss</button>
</div>
</div>
</div>
</div>
{% endblock %}