website/www/conservancy/templates/base_conservancy.html
Bradley M. Kuhn c586ffb383 Make additional bar when time left with donation exceeding goal
This is a first draft of making another bar appear after the
completed "matched!" bar that will show how much extra we've gotten
beyond the match amount.
2022-01-04 14:05:16 -08:00

184 lines
9.4 KiB
HTML

{% load humanize %}
{% load subtract %}
{% load min %}
{% load static %}
<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<title>{% block title %}{% block subtitle %}{% endblock %}Software Freedom Conservancy{% endblock %}</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="The Software Freedom Conservancy provides a non-profit home and services to Free, Libre and Open Source Software (FLOSS) projects." />
<meta name="keywords" content="software, freedom, conservancy, open source, gnu, GNU, Open Source, Free and Open Source, Free and Open Source Software, FLOSS, FOSS, protect, protection, help, policy, linux, non-profit" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="{% static 'css/tachyons.css' %}"/>
<link rel="stylesheet" type="text/css" media="screen" href="/css/conservancy.css" />
<link rel="stylesheet" type="text/css" media="(min-width: 67em)" href="/css/conservancy-bigscreen.css" />
<script type="text/javascript" src="/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="/js/conservancy.js"></script>
{% block head %}{% endblock %}
</head>
<body class="conservancy-{% block category %}{% endblock %}">
<header>
<div class="flex-ns center mw8">
<div class="w-60-ns">
<h1 id="conservancyheader" class="mt2 mt3-ns mb2 mb3-ns">
<a href="/">
<img src="{% static 'img/conservancy-header.svg' %}" alt="Software Freedom Conservancy" class="db center mh3-ns" />
</a>
</h1>
</div>
<ul id="feature-menu" class="w-40-ns mt2 mt4-ns mb2 mb2-ns mh2 pt1 flex flex-wrap justify-center items-center list">
<li><span id="menu-icon" class="dn-ns ph2 pointer">
<svg style="color: var(--orange); width: 30px; height: 30px;"><use href="{% static 'img/font_awesome.svg' %}#bars"></use></svg>
</span></li>
<li class="donate"><a href="/donate/" class="f5 mh1 mv1 ph2 pv1 ttu b btn-orange">Donate</a></li>
<li class="sustainer"><a href="/sustainer/" class="f5 mh1 mv1 ph2 pv1 ttu b btn-orange">Join</a></li>
<li class="vizio"><a href="/vizio/" class="f5 mh1 mv1 ph2 pv1 ttu b btn-orange">Vizio</a></li>
<li><span id="search-icon" class="dib ph2 pointer">
<svg style="color: var(--orange); width: 30px; height: 30px;"><use href="{% static 'img/font_awesome.svg' %}#search"></use></svg>
</span></li>
</ul>
</div>
</header>
<div id="navbar-outer" class="mt2 mt0-ns mb2">
<div id="navbar" class="center mw8 nested-list-resetb dn db-ns">
<ul class="f5 ttu flex flex-wrap justify-center">
<!-- Remaining previous menu items
<li class="Projects"><a href="/projects/">Projects</a></li>
<li class="npoacct"><a href="/npoacct/">NPOAcct</a></li>
-->
<li class="search dn-ns">
<form method="get" action="https://duckduckgo.com" class="ml2 flex mw6">
<input id="search-query" type="text" name="q" placeholder="Search with DuckDuckGo" class="pa2 ba b--gray br0" style="x-border-right: none; flex: 1 1 auto; width: 1%;" />
<input type="hidden" name="sites" value="sfconservancy.org" />
<button type="submit" class="bg-orange bn white pa2 pointer btn-orange" style="margin-left: -1px;">
<svg style="color: white; width: 20px; height: 20px;"><use href="{% static 'img/font_awesome.svg' %}#search"></use></svg></a>
</button>
</form>
</li>
<li class="Home dn db-ns"><a href="/">Home</a></li>
<li class="WhatWeDo"><a href="/activities">What we do</a>
{% include 'submenus/what_we_do_partial.html' %}
</li>
<li class="WhoWeAre"><a href="/about/">Who we are</a>
{% include 'submenus/who_we_are_partial.html' %}
</li>
<li class="Learn"><a href="/learn">Learn</a>
{% include 'submenus/learn_partial.html' %}
</li>
<li class="News"><a href="/news/">News</a>
{% include 'submenus/news_partial.html' %}
</li>
</ul>
</div>
<div id="navbar-clear"></div>
</div>
{% comment %}
# FUNDRAISER VARIABLES AND CONSTANTS GUIDE
## From Local Context
* datetime_now: Current DateTime in UTC
* sitefundgoal: The current FundraisingGoal. Attributes:
* fundraiser_goal_amount: The amount being matched
* fundraiser_so_far_amount: The amount contributed so far
* fundraiser_donation_count: The number of people who have contributed so far
* fundraiser_donation_count_disclose_threshold: The number of new Sustainers that can be double-matched this fundraiser.
(No, this name makes no sense. We're repurposing an existing model field for this new reason.)
* sitefundgoal_endtime: DateTime when sitefundgoal ends.
## Local convenience variables
* sitefundgoal_timeleft: TimeDelta for how much time remains in the current fundraiser
* this_match_goal: The amount being matched
* this_match_so_far: The amount contributed so far
* this_match_remaining: this_match_goal - this_match_so_far
* this_match_exceeded: this_match_so_far - this_match_goal
{% endcomment %}
{% if sitefundgoal and sitefundgoal.fundraiser_so_far_amount and datetime_now < sitefundgoal.fundraiser_endtime %}
{% with this_match_goal=sitefundgoal.fundraiser_goal_amount this_match_so_far=sitefundgoal.fundraiser_so_far_amount %}
{% with this_match_remaining=this_match_goal|subtract:this_match_so_far sitefundgoal_timeleft=sitefundgoal.fundraiser_endtime|subtract:datetime_now this_match_exceeded=this_match_so_far|subtract:this_match_goal %}
<div class="fundraiser-top-text ph3 pt2 pb3">
<div class="mw8 center ph2 ph4-ns">
<div class="mt2 mb3 tc">
{% if this_match_remaining <= 0 %}
Thanks to so many donors, we earned our full match!
Help us go further to stand up for software freedom &mdash; <a href="/sustainer">sign up now</a>!
{% else %}
{% if sitefundgoal_timeleft.total_seconds <= 0 %}
The
{% elif sitefundgoal_timeleft.days == 0 %}
Through today only, the
{% elif sitefundgoal_timeleft.days == 1 %}
Through tomorrow only, the
{% elif sitefundgoal_timeleft.days < 14 %}
For only {{ sitefundgoal_timeleft.days }} more days, the
{% else %}
Until January 15, the
{% endif %}
next ${{ this_match_remaining|floatformat:0|intcomma }} of <a href="/sustainer/">support we receive</a> will be matched!
{% endif %}
</div>
{% if sitefundgoal.fundraiser_so_far_amount %}
<a href="/sustainer/" style="text-decoration: none !important">
<div id="siteprogressbar" class="flex items-stretch w-100">
{% if this_match_remaining <= 0 %}
<div class="progress matched pv1 b flex" style="flex-basis: {{ this_match_so_far }}px">
<span id="site-fundraiser-match-count" class="soFarText tc w-100">${{ this_match_goal|floatformat:0|intcomma }} matched!</span>
<div class="progress matched pv1 b flex" style="flex-basis: {{ this_match_exceeded }}px">
<span id="site-fundraiser-match-count" class="soFarText tc w-100">${{this_match_exceeded|floatformat:0|intcomma }} extra given!</span>
</div>
{% else %}
<div class="progress pv1 b flex items-center" style="flex-basis: {{ this_match_so_far }}px">
<span id="site-fundraiser-match-count" class="soFarText tc w-100">${{ this_match_so_far|floatformat:0|intcomma }} matched!</span>
</div>
<div class="final-goal pv1 b flex items-center" style="flex-basis: {{ this_match_remaining }}px">
<span id="site-fundraiser-final-goal" class="goalText tc w-100">${{ this_match_remaining|floatformat:0|intcomma }} to go!</span>
</div>
{% endif %}
</div>
</a>
{% endif %}
</div>
</div>
{% endwith %}
{% endwith %}
{% endif %}
<div class="mw8 center ph2 ph3">
{% block outercontent %}<div id="mainContent"> {% block content %}{% endblock %}</div>{% endblock %}
</div>
<div id="conservancyfooter" class="mt4-ns pt3 ph3 bg-light-gray">
<p>Connect with Conservancy on
<a href="https://mastodon.technology/@conservancy">Mastodon</a>,
<a href="https://twitter.com/conservancy">Twitter</a>,
<a href="https://www.facebook.com/SoftwareFreedomConservancy/">Facebook</a>,
and <a href="https://www.youtube.com/channel/UCUEeuNvX2UyTTyTYXR9dm_A">YouTube</a>.</p>
<p><a href="/">Main Page</a> | <a href="/about/contact/">Contact</a> | <a href="/sponsors/">Sponsors</a> | <a href="/privacy-policy/">Privacy Policy</a> | <a href="/feeds/omnibus/">RSS Feed</a></p>
<p>Our privacy policy was last updated <strong>22 December 2020</strong>.</p>
<p class="copyright_info">
<a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a>
<br />This page, and all contents herein, unless a license is otherwise
specified, are licensed under a
<a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0">Creative
Commons Attribution-ShareAlike 4.0 International License</a>.</p>
</div>
</body>
</html>