{% extends 'main_template.html.twig' %}
	
{% block stylesheets %}
	{{ parent() }}
	<style>
	
		{# -------- SECTION PRESENTATION ---------- #}
		
		/********** monitor *********/
		
		#presentation_section
		{
			display:flex;
			flex-direction:column;
			align-items:center;
		}
			
		#presentation-logo	
		{
			flex:3;
			margin:1% 0% 0% 0%;
		}
		
		#description
        {
        	text-align:center;
        	color:white;
        	flex:4;
        	display:flex;
        	flex-direction:column;
        	justify-content:center;
        }
        
        #registration
        {
        	flex:3;
        	display:flex;
        	flex-direction:row;
        	width:20%;
        	margin:0% 0% 1% 0%;
        }
        
        #a-registration
        {
        	flex:1;
        }
        

        
        /********** smartphone *********/
        
        @media screen and (width <= 600px)
        {
        
            #description
            {
            	text-align:center;
            	color:white;
            	flex:4;
            	display:flex;
            	flex-direction:column;
            	justify-content:center;
            	align-items:center;
            }
            #description p
            {
            	text-align:center;
            	color:white;
            	flex:4;
            	display:flex;
            	font-size: 0.7em;
            	flex-direction:column;
            	justify-content:center;
            	align-items:center;
            	width:86%;
            }
            
            #registration
            {
            	flex:3;
            	display:flex;
            	flex-direction:row;
            	width:25%;
            	margin:0% 0% 1% 0%;
            }
            
            #a-registration button
            {
            	font-size: 0.7em;
            }
        }
		
		{# -------- SECTION NEWS ---------- #}
		
		
		#news_section
		{
			margin:0% 0% 3% 0%;
		}
		
		.section_title
		{
			color:blue;		
			margin:2% 0% 2% 2%;
			width:100%
		}

		#news_section_layout
		{
			display:flex;
			flex-direction:row;
			margin: 0px 0px 20px 0px;
			/*flex-wrap:wrap;*/
			justify-content:center;
		}
		
		.news 
		{
			border:solid 1px;
			/*flex:1;*/
			height:350px;
			width:300px;
			margin:0% 2% 0% 2%;
			display:flex;
			flex-direction:column;
			justify-content: space-between;
		}
		
		.news h3
		{
			font-size:18px;
			margin:0%;
			padding:0%;
			color:white;
			background: linear-gradient(#141414, 70%,#a0845f);
		}
		
		#news_resume p
		{
			font-size:14px;
			text-align:justify;
			margin:0px 4px 0px 4px;
		}
		
		#read_more
		{
			width:100%;
			height:30px;

		}
		
		#read_more a
		{
			width:100%;
			height:30px;
		}
		
		#read_more a button
		{
			width:100%;
			height:30px;
			border:solid 1px;
			background-color:#EDCF40;
		}
		
		
		{# -------- SECTION FEATURES ---------- #}
		
		#features_section
		{
			display:flex;
			flex-direction:column;
		}
		
		#layout_blocs
		{
			display:flex;
			flex-direction:row;
			
		}
		
		.bloc
		{
			flex:1;
			display:flex;
			flex-direction:column;
			align-items:center;
		}
		
		.bloc ul li
		{
			list-style-type:circle;
			color:white;	
			opacity: 0.5;
		}

		.bloc ul h3
		{
			color:white;
		}


		#bloc_master
		{
			display:flex;
			flex-direction:column;
		}


		.features_list
		{
			opacity:0.6;
			background-color:black;
			width:70%;
			height:70%;
			border:solid 1px;
			border-color:white;	
		}
		
		.features_list li a
		{
			color: white;
			text-decoration: none;
			color:yellow;
		}
		
		.features_list li a:visited
		{
			color: white;
			text-decoration: none;
			color:yellow;
		}

#features_community_zone
{
	display:flex;
	flex-direction:row;
	background-color:#6b5545;
	color:white;
	font-size:1.1em;
	margin:0% 0% 1% 0%;
	background: linear-gradient(#141414, 70%,#a0845f);
}

#features_community_zone p
{
	flex:1;
	text-align:right;
	padding-right :2%;
	font-weight:900;
}

#features_community_zone a
{
	flex:1;
	padding-left :2%;
}

#features_community_zone a button
{
	height:100%;
	width:50%;
	background-color:#EDCF40;
	font-size:1.1em;
	border-radius:15px 15px 15px 15px;
	border-color:none;	
}


			/********** smartphone *********/
        
        	@media screen and (width <= 600px)
        	{
            	#features_community_zone p
                {
                	flex:1;
                	text-align:center;
                	padding-right :0%;
                	font-weight:900;
                	font-size:0.7em;
                }
                
                #features_community_zone a button
                {
                	height:100%;
                	width:80%;
                	background-color:#EDCF40;
                	font-size:0.7em;
                	border-radius:15px 15px 15px 15px;
                	border-color:none;	
                }
                
                .features_list h3
                {
                	font-size: 0.9em;
                }
                
                .features_list
                {
                	opacity:0.6;
        			background-color:black;
        			width:70%;
        			height:70%;
        			border:solid 1px;
        			border-color:white;	
                	font-size:0.7em;
                }
        	}
        	
        	
			{# -------- SECTION ACTIVITY ---------- #}

	#activity_section
	{
		display:flex;
		flex-direction:column;
		align-items:center;
	}


	.activity_section_layout
	{
		display:flex;
		flex-direction:row;	
		justify-content:space-around;
		width:100%;	
		margin:0% 0% 4% 0%;	
	}


	.medal
	{
		min-width:260px;
		min-height:120px;
		border:solid;
		margin:1% 0% 0% 0%;
		display:flex;
		flex-direction:row;
		box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5);
	}
	
	.medal img
	{
		flex:3;
		box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5) inset;
	}
	
	.medal div
	{
		flex:2;
		display:flex;
		flex-direction:column;
		justify-content:space-around;
		background-color:#4e4b42;
		color:white;
		box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5) inset;
	}
	
	.medal div label
	{
		text-align:center;
		font-size:13px;
	}   
        
	</style>
	
{% endblock %}	
	
{% block main_content %}
	
		<section id="presentation_section"  style="background-image: url( {{ asset ('img/platform/homepage_1.jpg') }});
    									min-height:500px;background-repeat:repeat;background-size:cover;height:100%; "  >
    								
    		<div id="presentation-logo">
				<img src="{{ asset('img/platform/logo_160px.PNG') }}" alt="logo" >   							
    		</div>
    		
    		<div id="description">					
        		<p>Univertuel vous permet de créer, de gérer et d'organiser vos campagnes de jeux de rôles de A à Z.</p>
        		<p>Il vous permet aussi de créer vos personnages sur les campagnes de vos amis.</p>
        		<strong><p>Vous ne connaissez pas?<p></strong>
        		
        	</div>
    	
        	<span id="registration">
        		<a href="{{ path('registration') }}" id="a-registration"><button class="btn-connexion">créer un compte</button></a>
        	</span>
    	
    	</section>

	
		<section id="news_section">
    		
    			<h2 class="section_title">actualités
    			</h2>
			
			<div id="news_section_layout">
				{% for topic in news %}
					{% include 'news.html' %}
				{% endfor %}
				
			</div>

			
    		
    	</section>
	
		<section id="features_section">
    	
    		<div id="layout_blocs">
    			<article class="bloc" style="background-image: url( {{ asset ('img/platform/homepage/features1.jpg') }});  
    								min-height:600px;background-repeat:no-repeat;background-size:cover; " id="bloc_player"> 
    								
    				<ul class="features_list" ><h3>fonctionnalités pour les joueurs</h3>
    					<li>rejoindre une campagne et y créer un ou plusieurs personnages</li>
    					<li>une création de personnage automatisée </li>
    					<li>modifier le personnage selon les autorisations du maître de jeu dans et en dehors d'une partie</li>
    					<li>faire participer leur personnage au scenario préparé par le maître de jeu</li>
    					<li>lors des parties, effectuer les lancés de dès requis sur sa feuille de personnage</li>
    					<li>accéder aux diverses informations de la campagne</li>
    					<li>prendre des notes sur le scénarios en cours et les sauvegarder dans la campagne</li>
    					<li><a href="{{ path('features') }}">et bien plus encore...</a></li>
    				</ul>
    			</article>
    			<article class="bloc" id="master" style="background-image: url( {{ asset ('img/platform/homepage/features2.jpg') }});  
    								min-height:600px;background-repeat:no-repeat;background-size:cover; " id="bloc_master">
    				
    				<ul class="features_list" ><h3>fonctionnalités pour les maîtres de jeu</h3>
    					<li>créér une campagne de jeu</li>
    					<li>gérer le suivi des personnages joueurs tout au long de la campagne</li>
    					<li>personnaliser des éléments de la fiche de personnage </li>
    					<li>créer plus facilement des scénarios grace au système d'aide</li>
    					<li>partagez avec vos joueurs des éléments de jeu de votre campagne</li>
    					<li>créer vos pnj de manière automatique et rapide</li>
    					<li><a href="{{ path('features') }}">et bien plus encore...</a></li>
    				</ul>
    			</article>
    		</div>
    	
    		<div id="features_community_zone">
    			<p>rejoignez la communuté des rôlistes</p><a href={{ path ('registration') }}><button>créer un compte</button></a>
    		</div>
    	</section>
	
	<section id="activity_section">

    		<h2 class="section_title">activités
    		</h2>

			<div class="activity_section_layout">

    			<div class="medal">
    				<img class="black">
    				<div>
    					<label>actualités</label>
    					<label>5</label>
    				</div>
    			</div>
    			
    			<div class="medal">
    				<img class="blue">
    				<div>
    					<label>articles</label>
    					<label>10</label>
    				</div>
    			</div>
    			
    			<div class="medal">
    				{#<img style="background-image: url( {{ asset ('img/platform/homepage/features1.jpg') }});  > #}
    				<img  class="orange" >			
    				<div>
    					<label>membres</label>
    					<label>{{ users}}</label>
    				</div>
    			</div>
    		</div>

    		
    		<div class="activity_section_layout">
    			<div class="medal">
    				<img class="red">
    				<div>
    					<label>jeux</label>
    					<label>{{ games}}</label>
    				</div>
    			</div>
    			
    			<div class="medal">
    				<img class="yellow">
    				<div>
    					<label>campagnes</label>
    					<label>{{ campaigns }}</label>
    				</div>
    			</div>
    			
    			<div class="medal">
    				<img class="green">
    				<div>
    					<label>personnages</label>
    					<label>{{ figures }}</label>
    				</div>
    			</div>
    		</div> 	
   
	</section>
	


{% endblock %}