You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Application-Web/src/App/Views/display_team.html.twig

89 lines
2.4 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Twig view</title>
<style>
body{
background-color: #f1f1f1;
display: flex;
flex-direction: column;
align-items: center;
}
section{
width: 60%;
}
.square{
width:50px;
height:50px;
}
#mainColor{
background-color: {{ team.mainColor.getValue() }};
{% if team.mainColor.getValue() == "#ffffff" %}
border-color: #666666;
{% endif %}
}
#secondColor{
background-color: {{ team.secondColor.getValue() }};
{% if team.secondColor.getValue() == "#ffffff" %}
border-color: #666666;
{% endif %}
}
.container{
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
}
.team{
border-color: darkgrey;
border-radius: 20px;
}
.color{
flex-direction: row;
justify-content: space-between;
}
.logo{
height: 80px;
width: 80px;
}
</style>
</head>
<body>
<header>
<h1><a href="/">IQBall</a></h1>
</header>
<section class="container">
<div class="team container">
<div>
<h1>{{ team.name }}</h1>
<img src="{{ team.picture }}" alt="Logo d'équipe" class="logo">
</div>
<div>
<div class="color"><p>Couleur principale : </p><div class="square" id="mainColor"></div> </div>
<div class="color"><p>Couleur secondaire : </p><div class="square" id="secondColor"></div></div>
</div>
{% for m in team.listMembers() %}
<p> {{ m.getUserId() }} </p>
{% if m.getRole().isCoach() %}
<p> : Coach</p>
{% else %}
<p> : Joueur</p>
{% endif %}
{% endfor %}
</div>
</section>
</body>
</html>