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

{% block title %} {% endblock %}

<!-- SCRIPTS -->

{% block scripts %} <script>




</script> {% endblock %} 

<!-- STYLES -->

{% block styles %}<style>

ul {
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margins */
}

ul li {
  border: 1px solid #ddd; /* Add a thin border to each list item */
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6; /* Add a grey background color */
  padding: 5px; /* Add some padding */
}

.sl {
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  margin-top: 0px;
  margin-bottom: 30px;
  margin-left: 30px;
  margin-right: 30px;
  font-family: arial;
  padding-right: 20px; 
  padding-left: 20px;
  padding-top: 10px
  padding-bottom: 10px;
}

.align {
	text-align: center;
}

/*Textwrap*/
.left{
float: left;
margin: 20px;
}

</style> {% endblock %}

<!-- BODY -->

{% block content %}

<h1 style="text-align:center; font-family: arial;">Your Friends are Coming! </h1>
<p style="text-align:justify ; font-family: arial;"> You will host a dinner party for your friends from college, who you have not seen for a long time. Therefore you want to impress them by preparing a delicious dinner. You have prepared a shopping list for the occassion which contains 4 products.</p>

		
<div class=left>
	<div class=align>
		<div class="sl">
		<br>
 		 <p><b>Shopping List</b></p>
  		<ul>
  		<li>Salmon</li>
  		<li>White Wine</li>
  		<li>Tomato</li>
  		<li>Lettuce</li>  		
		</ul>  
		<br>
		</div>
	</div>
</div>

<p> 
You have to purchase all the products in your shopping list to finalize the shopping session. On the following pages you will see eight different product cards for each product on your list. The products name, price and picture will be visible on the front of the product cards. Simply hover over the images to reveal more information about the product.
<br> 
<br> 
Click on the "Add to Cart" button to select the product you wish to purchase. After you click on the "Add to Cart" button, the system will take you to the next page and add the chosen product in to your shopping cart. It will not be possible to return to the previous page once an item is chosen. 
<br> 
<br>
You will also see some additional products on the market that are not included in your predefined shopping list. However, you can still buy them by clicking the "Add to Cart" button, or simply skip them by clicking the "Skip" button. There will be no skip button displayed on the product pages, which are in your predefined shopping list. </p>
<br>
<p> You have 3 minutes time limit on every page. Each product is given a value and a price. Your gain from each product is directly related to the value per price, which allows you to win up to 70 cents per item. While you can not lose money on the items in your predefined shopping list, you are equally likely to gain or lose on the extra items. The maximum amount that you can win is 7 euros.

<!-- Please answer the following questions.

<form>
  <p>What is the minimum number of products that you should buy?</p>
  <input type="radio" id="7" value="7">
  <label for="7">7</label><br>
  <input type="radio" id="8" value="8">
  <label for="8">8</label><br>
  <input type="radio" id="4" value="4">
  <label for="4">4</label>

   <p>What is the maximum number of products that you can buy?</p>
  <input type="radio" id="7" value="7">
  <label for="7">10</label><br>
  <input type="radio" id="8" value="8">
  <label for="8">8</label><br>
  <input type="radio" id="4" value="4">
  <label for="4">4</label> -->

{% next_button %}

{% endblock %}