{% extends "global/Page.html" %}
{% load static otree %}

{% block styles %}
<link href="{% static 'main_app/style.css' %}" rel="stylesheet"> {% endblock %}

{% block title %}Air Polltion Reduction{% endblock %}

{% block content %}
<div class="card bg-transparent">
    <div class="card-body">
        <h2 style="padding-left: 10px"><b>YOUR GROUP’s AIR POLLUTION REDUCTION RESULT</b></h2><br>
        <div class="card" style="background: transparent;border-color: transparent">
            <div class="card-body">
                <img src="{% static 'main_app/CONGRATS.png' %}" class="img-fluid" alt="Responsive image" />
                <div style="font-size: 20px;position: absolute;top: 55%;left: 49%;transform: translate(-50%, -50%);"><strong>
                        {{ lbs }}</strong></div>
                <div style="font-size: 20px;position: absolute;top: 55%;left: 60%;transform: translate(-50%, -50%);"><strong>
                        {{ amount }}</strong></div>
            </div>
        </div>
        <br><br>
        <button class="otree-btn-next btn" style="background: #8d8d8d; margin-left: 80%; width: 100px">Next</button>
    </div>
</div>

{% endblock %}