<?php
	
	$db = mysql_connect('localhost', 'root', 'm148r43a9Y@%Z') or die ('Erreur de connexion '.mysql_error());

	mysql_select_db('smartpassTest2',$db) or die ('Erreur de selection '.mysql_error());

	$points = mysql_query('SELECT * FROM InformationsGenerales', $db);

?>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>Gestion des Points</title>
		<link rel="shortcut icon" type="image/x-icon" href="../mmd/favicon.ico"/>
		<link rel="stylesheet" href="../style.css">
		<link rel="stylesheet" href="style.css">
		<script type="text/javascript" src="jquery.js"></script>
	</head>

	<body>
		<h1>Gestion des Points</h1>
		<a href="../"><div class="back_arrow"></div></a>
		<style type="text/css">
		.back_arrow {
			background: url('../mmd/return.svg') no-repeat center;
			cursor: pointer;
			position: absolute;
			top: 50px;
			left: 50px;
			width: 50px;
			height: 50px;
			opacity: 1;
		}

		.back_arrow:hover {
			opacity: 0.5;
		}
		</style>

		<div class="uparrow" id="uparrow"></div>
		<script type="text/javascript">
		// arrow
		$(function () {
			$(window).scroll(function () {
				if ($(this).scrollTop() > 50) {
					$('#uparrow').fadeIn();
				}
				else {
					$('#uparrow').fadeOut();
				}
			});
			$('#uparrow').click(function () {
				$('body,html').animate({
					scrollTop: 0
				}, 800);
				return false;
			});
		});
		</script>
		<style type="text/css">
		.uparrow {
			background: url('../mmd/top.svg') no-repeat center;
			cursor: pointer;
			position: fixed;
			bottom: 50px;
			right: 50px;
			width: 50px;
			height: 50px;
			display:none;
		}
		.uparrow:hover {
			opacity: 0.5;
		}
		</style>

<?php

	echo "<div id=\"points\">";
	while ($row = mysql_fetch_row($points)) {
		echo "<a class='point' href='afficheInfos.php?id={$row[0]}'>{$row[2]}</a>\n";
	}
	echo "</div>";

?>
	<style type="text/css">
	.point {
		display: block;
	    padding: 20px 30px;
	    background: rgba(248,248,248,.9);
	    border-bottom: 1px solid rgba(0,0,0,.1);
	    font-weight: bold;
	    font-weight: 300;
	    font-size: 25px;
	    color: #232323;
	    text-decoration: none;
	    width: 55%;
	    margin: auto;
	}

	@media screen and (max-width: 1310px) {
		.point {
			font-size: 20px;
		}
	}
	@media screen and (max-width: 1100px) {
		.point {
			font-size: 18px;
		}
	}
	@media screen and (max-width: 1000px) {
		.point {
			font-size: 14px;
		}
	}
	</style>
	</body>
</html>