<!doctype html>
<html lang="fr">
 <head>
	<meta charset="UTF-8">
	<meta name="Author" content="Éric Senterre">
	<meta name="Keywords" content="TV, Télévision, Télé, Postes, Canaux, Chaîne, Ondes, Hertz, Hertzienne, Antenne, OTA, Enregistreur, DVR, PVR">
	<meta name="Description" content="">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="mobile-web-app-capable" content="yes">
	
	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="194x194" href="/favicon-194x194.png">
	<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
	<link rel="manifest" href="/site.webmanifest">
	<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
	<meta name="msapplication-TileColor" content="#2d89ef">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	<meta name="theme-color" content="#2196F3">

	<meta property="og:image" content="https://tv411.senterre.com/images/TV411Banner.png" /> 
	<meta property="og:type" content="website" />
	<meta property="og:url" content="https://tv411.senterre.com/" />
	<meta property="og:title" content="TV411 - L&apos;annuaire de la télévision gratuite" />
	<meta property="og:description" content="Trouvez les chaînes GRATUITES disponibles près de chez vous." />
	<meta name="google-site-verification" content="4-3LREJf-Nvl9YE8p_B4zDfASddE66Z1Dt1Go1wOL-8" />

	<link rel="icon" type="img/ico" href="favicon.ico">

	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-orange.min.css">
	<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	
	<link rel="stylesheet" href="style.css">

	<!-- Global site tag (gtag.js) - Google Analytics -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-81457-5"></script>
	<script>
	  self.addEventListener('fetch', (event) => {});
	  window.dataLayer = window.dataLayer || [];
	  function gtag(){dataLayer.push(arguments);}
	  gtag('js', new Date());

	  gtag('config', 'UA-81457-5');
	</script>

	<!-- <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

	<script>
		 (adsbygoogle = window.adsbygoogle || []).push({
		  google_ad_client: "ca-pub-2514894272933955",
		  enable_page_level_ads: true
	     });
	</script> -->
	
	<script>

		/* Javascript Helper Functions */
		function initPage() {
			 alert("initPage()");
			document.querySelector('#share-button').addEventListener('click', shareThis);
			if (navigator.share) {
				document.getElementById('share-button').style.visibility = "visible";
			}
		}

		function shareThis() {
			if (navigator.share) {
			  navigator.share({
				  title: 'TV411 - TV411 - L&apos;annuaire de la télévision gratuite',
				  url: "https://tinyurl.com/yyxvdvwp",
			  })
				.then(() => console.log('Successful share'))
				.catch((error) => console.log('Error sharing', error));
			}
		}

		function getLocation() {
			alert("getLocation()!");
			if (navigator.geolocation) {
				navigator.geolocation.getCurrentPosition(submitPosition);
			} 
		}

		function submitPosition(position) {
			alert("submitPosition!");
			document.getElementById("place_lat").value = position.coords.latitude;
			document.getElementById("place_lng").value = position.coords.longitude; 
		}

		function share() {
		  if (navigator.share) {
			navigator.share({
			  title: 'TV411 - L&apos;annuaire de la télévision gratuite',
			  url: "https://tinyurl.com/yyxvdvwp"
			}).then(() => {
			  console.log('Thanks for sharing!');
			})
			.catch(console.error);
		  } else {
			//alert("fallback modal");
			document.getElementById("myModal").style.display = "block";
		  }
		}

	</script>

  <title>TV411 - L&apos;annuaire de la télévision gratuite</title>
 </head>

 
 
 <body>
  
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header" >
    <div class="mdl-layout__header-row">
      <!-- Title -->
            <span class="mdl-layout-title" style="max-width:85%; max-height:1em; text-overflow: ellipsis; overflow: hidden; text-align:left; font-size:16px;">L&apos;annuaire de la télévision gratuite</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
	  <!-- <i class="material-icons" id="share-button">share</i> -->

<img src="images/share.png" style="width:42px; height:42px;" alt="Partager cette page" id="shareButton" onclick="share();" />

  	</div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title" style="background-color:#2196F3; color:white;"><img src="/android-chrome-48x48.png"/> TV411</span>
    <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="/">Nouvelle Recherche</a>
        <a class="mdl-navigation__link" href="aide.php">Aide</a>
        <a class="mdl-navigation__link" href="antennes.php">Antennes</a>
        <a class="mdl-navigation__link" href="enregistreurs.php">Enregistreurs</a>
        <!-- <a class="mdl-navigation__link" href="streaming.php">Diffusion en continu</a> -->
<a class="mdl-navigation__link" href="apropos.php">À propos</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content">

		<br />
		<form action="search.php" method="get" id="place_form">
			<img src="android-chrome-96x96.png" style="margin-right:20px;" />
			<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" id="locationField" style="border:1px solid #ccc; border-radius: 5px; box-shadow: 3px 3px 5px #ccc; padding:20px; width:60%;">
				<input class="mdl-textfield__input" type="text" id="place_name" name="place_name">
				<label class="mdl-textfield__label" for="place_name" style="padding-left:20px;">Adresse / Ville / Code Postal</label>
				<!-- <input type="hidden" id="place_id" name="place_id" /> -->
				<input type="hidden" id="place_lat" name="place_lat" />
				<input type="hidden" id="place_lng" name="place_lng" />
			</div>

			<br /><br />
			 
			<script>
			if (1 = 0) {
				document.write("&nbsp;&nbsp;ou&nbsp;&nbsp;<button type=\"button\" id=\"getButton\" class=\"mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect\">");
				document.write("Position actuelle");
				document.write("</button>");

				document.getElementById("getButton").addEventListner('click', getLocation)
			}
			</script>
		</form>
		<br />
	<div class="mdl-grid">
		<div class="mdl-cell" style="text-align:left; border:1px solid #ccc; padding:12px; border-radius: 5px; box-shadow: 3px 3px 5px #ccc; height:90px;" onclick="javascript:window.location.href='aide.php'"><img src="images/search.png" style="float:left; padding-right:10px; height:60px;"/>Découvrez combien de chaînes gratuites sont disponibles auprès de vos diffuseurs locaux.</div>
		<div class="mdl-cell" style="text-align:left; border:1px solid #ccc; padding:12px; border-radius: 5px; box-shadow: 3px 3px 5px #ccc; height:90px;" onclick="javascript:window.location.href='antennes.php'"><img src="images/antenne_lapin.png" style="float:left; padding-right:10px; height:60px;"/>TV411 vous aide également à choisir l’antenne qui correspond à vos préférences de visionnage.</div>
		<div class="mdl-cell" style="text-align:left; border:1px solid #ccc; padding:12px; border-radius: 5px; box-shadow: 3px 3px 5px #ccc; height:90px;" onclick="javascript:window.location.href='enregistreurs.php'"><img src="images/dvr.png" style="float:left; padding-right:10px; height:60px;"/>Explorez également les possibilités de gestion de vos médias grâce à différentes solutions.</div>

<div class="mdl-cell" style="text-align:left; border:1px solid #ccc; padding:12px; border-radius: 5px; box-shadow: 3px 3px 5px #ccc" id="advert" name="advert">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-cf-a+3g-1a-9f"
     data-ad-client="ca-pub-2514894272933955"
     data-ad-slot="3072638323"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div> 
	
	
	</div>

	<br />

	<script>


		// Google Places Autocomplete
		var placeSearch, autocomplete, geocoder;

		function initAutocomplete() {
			geocoder = new google.maps.Geocoder();
			autocomplete = new google.maps.places.Autocomplete(
			  (document.getElementById('place_name'))/*,
			  {types: ['(cities)']}*/);

			// Set initial restrict to the greater list of countries.
			autocomplete.setComponentRestrictions(
            {'country': ['us', 'ca']});

			autocomplete.addListener('place_changed', fillInAddress);

			// Prevent submit form on enter on Autocomplete
			var input = document.getElementById('place_name');
			google.maps.event.addDomListener(input, 'keydown', function(event) { 
				if (event.keyCode === 13) { 
					event.preventDefault(); 
				}
			}); 

		}

		function fillInAddress() {
		  var place = autocomplete.getPlace();
		  //document.getElementById('place_id').value = place.place_id;
		  document.getElementById('place_lat').value = place.geometry.location.lat();
		  document.getElementById('place_lng').value = place.geometry.location.lng();

		  // Submit form if it's filled
		  document.getElementById("place_form").submit();
		}

	</script>

  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAyfeZtd5PxfD3ygi0r_BbApzF351FZRkU&libraries=places&callback=initAutocomplete" async defer></script>

	
		<footer class="mdl-mini-footer" style="padding: 15px; width:100%; box-shadow:0 -2px 3px 0 rgba(0,0,0,.2);">
			<div><img src="/favicon-32x32.png" /> &nbsp;TV411 &middot;
			  <a style="color:#ccc; text-decoration:none;" href="aide.php">Aide</a> &middot;
			  <a style="color:#ccc; text-decoration:none;" href="confidentialite.php">Confidentialité</a>
			</div>
		</footer>

	</div>
  </main>
</div>

<!-- The Modal -->
<div id="myModal" class="modal">

	<!-- Modal content -->
	<div class="modal-content">
		<span class="close">&times;</span>
		<p>Partager cette page : </p>
		<div style="float:left; padding-bottom:15px;"><a href="https://www.facebook.com/sharer/sharer.php?u=https://tinyurl.com/yyxvdvwp" target="_blank"><img src="images/facebook.png" /></a> &nbsp; 
		<a target="_blank" href="https://www.twitter.com/intent/tweet?text=Chaînes disponibles pour &url=https://tinyurl.com/yyxvdvwp&hashtags=Antenne,Télévision"><img src="images/twitter.png" /></a>&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size:20px; font-weight:bold;">ou</span> </div>
		<div style="float:right;">
			<div style="background-color:#2196F3; padding:6px; padding-left:12px;  border-radius: 5px;">
				<input type="text" readonly value="https://tinyurl.com/yyxvdvwp" id="to-copy" style="border:0;background-color:#2196F3; color:white; font-weight:bold;" />
				<!-- Raised button with ripple -->
				<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" id="copy">
				  Copier
				</button>
			</div>
		</div>
		<br style="clear:both;" /><br />

	</div>

</div>

<script>
		
		// Get the modal
		var modal = document.getElementById("myModal");

		// Get the button that opens the modal
		var btn = document.getElementById("shareButton");

		// Get the <span> element that closes the modal
		var span = document.getElementsByClassName("close")[0];

		// When the user clicks on the button, open the modal 
		/*btn.onclick = function() {
			modal.style.display = "block";
		}*/

		// When the user clicks on <span> (x), close the modal
		span.onclick = function() {
			modal.style.display = "none";
		}

		// When the user clicks anywhere outside of the modal, close it
		window.onclick = function(event) {
			if (event.target == modal) {
				modal.style.display = "none";
			}
		}


		var toCopy  = document.getElementById( 'to-copy' ),
			btnCopy = document.getElementById( 'copy' );

		btnCopy.addEventListener( 'click', function(){
			toCopy.select();
			document.execCommand( 'copy' );
			return false;
		} );

</script>

</body>


</html>