<!DOCTYPE html>
<html>
<head>
	<title>OPEN MINDS SPEAK LOUDER</title>
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Darker+Grotesque:wght@500;800&display=swap" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
	<link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
	<link rel="icon" type="image/gif" href="img/point.gif"/>

	<meta content="width=device-width, initial-scale=1" name="viewport" />

</head>
<body>
	<div id="overlay"></div>
	<?php
		include "header.php";
	?>
	<style type="text/css">
		#header {
			background: transparent;
		}
	</style>

	<div class="sep splash">
		<div>
			<h1>Todos querem ser ouvidos...</h1>
			<h1>...nem todos querem escutar.</h1>
		</div>
		<div>
			<h1>Cala-te</h1>
			<h1>!!! não! fogo</h1>
		</div>
	</div>

	<div class="sep dark">
		<div>
			<h1>Mentes abertas falam mais alto</h1>
			<p style="margin-left: 30%">Abrir mentes para perspetivas e ideias opostas é funtamental para haver entendimento, progresso e paz.
			<br><br>
			O projeto OPEN MINDS SPEAK LOUDER visa dar uma plataforma não necessáriamente a ideiais ou opiniões, mas ao dialogo e abertura.
			<br><br>
			Uma plataforma onde todos são iguais e nenhuma opinião é ignorada.
</p>
		</div>
	</div>

	<div class="sep ouvir">
		<div></div>
		<h1>Mentes fechadas<br>
impedem-nos de ser <none>ouvidos</none></h1>
<p>
	Quando não escutamos, não entendemos.
Estar extremamente fechado nos nossos próprios ideais, perspetivas e morais traz-nos uma barreira à nossa própria evolução pessoal e social.

Ao mostrar que não se está disposto a escutar e mudar de ideias, estamos também a fazer com que o outro não nos queira escutar e mudar de ideias por indignação.<br><br>

<b>Quebremos este ciclo.</b><br>

Ser capaz de aceitar o outro mesmo que não concordemos e dar-lhe uma oportunidade honesta de se expressar. Escutar e processar sem perconceito as palavras e perspetivas que ele tem para dizer é de extrema importância se queremos construir uma sociedade harmoniosa, pacífica e livre.
</p>
	</div>

	<div class="sep map">
		<div>
			<h1>Partilhe e encontre perspetivas perto de si.</h1>
			<h1 style="font-size: 20px; margin-bottom: 40px; color: black;">Encontrará cartazes interativos nos pontos assinalados no mapa. Lá poderá ler e partilhar opiniões.</h1>
			<p>Poderá também partilhar a sua opinião <?php
			
				$path = "js/questions.json";

				$string = file_get_contents($path);
				$json_a = json_decode($string, true);

				$n = date('d') % count($json_a);
				

				echo '<a style="color: red; font-weight: 800;" href="submit">aqui</a>, sobre a questão: <br>';
				echo '<b style="color: red; font-size: 24px; ">"'.$json_a[$n].'"</b>';
			?>
				
			</p>
		</div>
		<div id='map'></div>
		<script>
		mapboxgl.accessToken = 'pk.eyJ1Ijoicm9kc24iLCJhIjoiY2tpOHVxdmxjMDlseDJ6dGdnbTB0NmZobSJ9.CpKt1nOi2bZ72cuLRUUj5g';
		var map = new mapboxgl.Map({
		container: 'map',
		center: [-8.425388, 40.210049],
		zoom: 14,
		style: 'mapbox://styles/rodsn/cki8uwkqb36ou19ryt4rqdb3w',
		});

		var geojson = {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [-8.419904, 40.209499]
    },
    properties: {
      title: 'Praça da República',
    }
  },
  {
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [-8.429306, 40.207466]
    },
    properties: {
      title: 'Largo da Portagem',
    }
  }]
};

geojson.features.forEach(function(marker) {

  // create a HTML element for each feature
  var el = document.createElement('div');
  el.className = 'marker';
  	console.log("added");
  // make a marker for each feature and add to the map
  new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)

  .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
    .setHTML('<h3>' + marker.properties.title + '</h3>'))
    .addTo(map);
});
		</script>

		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="js/landing.js"></script>
	</div>
</body>
</html>