Design the page

templates/tombola.html

@@ -7,16 +7,40 @@
 {% endblock %}
 
 {% block content %}
-    Old:
-    {% for reward in old_rewards %}
-        {{ reward.name }} (won by {{ previous_reward.rewarded_by.note }}, ticket n°{{ previous_reward.rewarded_by.number }})<br />
-    {% endfor %}
-    Previous: {{ previous_reward.name }} (won by {{ previous_reward.rewarded_by.note }}, ticket n°{{ previous_reward.rewarded_by.number }})<br />
-    Current: {{ current_reward.name }}<br />
-    Next:
-    {% for reward in next_rewards %}
-        {{ reward.name }}<br />
-    {% endfor %}
+    <div style="">
+    <div class="alert alert-danger" style="width: 15%; float: left; margin: 1%;">
+    <strong>Lots déjà offerts :</strong>
+    <ul>
+        {% for reward in old_rewards %}
+            <li><strong>{{ reward.name }} :</strong> remporté par {{ reward.rewarded_by.note }} (ticket n° {{ reward.rewarded_by.number }})</li>
+        {% endfor %}
+    </ul>
+    </div>
+
+    <div class="alert alert-warning" style="width: 30%; float: left; margin: 1%;">
+    <strong>Lot précédent :</strong><br />
+        <strong>{{ previous_reward.name }} :</strong> remporté par {{ previous_reward.rewarded_by.note }}
+        (ticket n° {{ previous_reward.rewarded_by.number }})<br />
+
+    <img src="{{ previous_reward.image.url }}" alt="{{ previous_reward.name }}" style="width: 100%;" />
+    </div>
+
+    <div class="alert alert-info" style="width: 30%; float: left; margin: 1%;">
+    <strong>Lot suivant :</strong><br />
+    <strong>{{ current_reward.name }}</strong><br />
+
+    <img src="{{ current_reward.image.url }}" alt="{{ previous_reward.name }}" style="width: 100%;" />
+    </div>
+
+    <div class="alert alert-success" style="width: 15%; float: left; margin: 1%;">
+    <strong>Lots à venir :</strong>
+    <ul>
+        {% for reward in next_rewards %}
+            <li><strong>{{ reward.name }}</strong></li>
+        {% endfor %}
+    </ul>
+    </div>
+    </div>
 {% endblock %}
 
 {% block extrajavascript %}