contenu info, downloads, et 1er essai de map

assets/js/map/map.js

@@ -0,0 +1,46 @@
+
+let hoverColor = "#e9b82f";
+let normalColor = "#efbd95";
+
+function get_name(id){
+    return id.replace("map-", "");
+}
+
+function clicked(elem){
+    $.alert({
+        title: 'Chargement...',
+        content: function () {
+            let self = this;
+            let object = {
+                "function": 'get_map_info',
+                'selector': get_name(elem.id),
+            };
+            return $.ajax({
+                url: 'ajax/read',
+                data: object,
+                method: 'get'
+            }).done(function (data) {
+                if (data.length > 0) {
+                    self.setTitle(data[0]['title']);
+                    self.setContent(data[0]['description']);
+                } else {
+                    self.setTitle('Erreur');
+                    self.setContent('Une erreur est survenue')
+                }
+            }).fail(function(){
+                self.setContent('Something went wrong.');
+            });
+        },
+    });
+}
+
+function hover_in(elem){
+    $(elem).css({
+        "fill": hoverColor,
+        'cursor': 'pointer',
+    });
+}
+
+function hover_out(elem){
+    $(elem).css("fill", normalColor);
+}

assets/js/map/map3d.js

@@ -0,0 +1,377 @@
+/*  Map 3D
+*   3D Model : Matthias Onestras
+*   Code : Ronan Bonnet
+*
+*/
+
+import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.119.1/build/three.module.js';
+
+import {
+  OrbitControls
+} from 'https://cdn.jsdelivr.net/npm/three@0.119.1/examples/jsm/controls/OrbitControls.js';
+import {
+  GLTFLoader
+} from 'https://cdn.jsdelivr.net/npm/three@0.119.1/examples/jsm/loaders/GLTFLoader.js';
+
+var container, stats, controls;
+var camera, scene, renderer;
+
+var raycaster, mouse;
+
+init();
+render();
+
+var height, width;
+
+/**
+ * Initializes the 3D plan
+ * Creates and loads every needed things
+ */
+function init() {
+
+
+  // 
+  // Creates HTML 
+  //
+  container = document.createElement('div');
+  container.id = 'map3d';
+
+  height = document.querySelector('#maps').clientHeight;
+  width = document.querySelector('#maps').clientWidth;
+  var svg = document.querySelector('#maps #map');
+  document.querySelector('#maps').insertBefore(container, svg);
+
+
+  //
+  //  Creates cameras and scene
+  //
+  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.75, 20000);
+  camera.position.set(500,1500,500); 
+  scene = new THREE.Scene();
+
+  //
+  // LIGHTS
+  //
+  let sol = new THREE.AmbientLight(0x404040, 1.0);
+  scene.add(sol);
+
+  var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+  hemiLight.position.set( 0, 20, 0 );
+  scene.add( hemiLight );
+
+  var dirLight = new THREE.DirectionalLight( 0xffffff );
+  dirLight.position.set( - 3, 10, - 10 );
+  scene.add( dirLight );
+
+  //scene.background = new THREE.Color( 0xff0000 );
+
+
+  raycaster = new THREE.Raycaster();
+  mouse = new THREE.Vector2()
+
+  //
+  // Loading screen
+  //
+  const loadingManager = new THREE.LoadingManager( () => {
+    const loadingScreen = document.getElementById('loading-screen');
+    loadingScreen.classList.add('fade-out');
+    loadingScreen.addEventListener('transitionend', onTransitionEnd);
+  });
+
+
+  //
+  // Load the 3D model
+  //
+  var loader = new GLTFLoader(loadingManager);
+
+  loader.load('assets/img/map/map3D.glb', function(gltf) {
+    var object = gltf.scene;				
+    gltf.scene.scale.set( 2, 2, 2 );			   
+    gltf.scene.position.x = 0;				    //Position (x = right+ left-) 
+    gltf.scene.position.y = 0;				    //Position (y = up+, down-)
+    gltf.scene.position.z = 0;	
+
+    scene.add(gltf.scene);
+    
+    render();
+
+  });
+
+
+
+  //
+  // RENDERER
+  //
+  renderer = new THREE.WebGLRenderer({
+    antialias: true,
+  });
+  renderer.setClearColor( 0x000000 );
+
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setSize(width, window.innerHeight * 0.75);
+  renderer.toneMapping = THREE.ACESFilmicToneMapping;
+  renderer.toneMappingExposure = 1;
+  renderer.outputEncoding = THREE.sRGBEncoding;
+  container.appendChild(renderer.domElement);
+
+  var pmremGenerator = new THREE.PMREMGenerator(renderer);
+  pmremGenerator.compileEquirectangularShader();
+
+  //
+  // CONTROLS
+  //
+  controls = new OrbitControls(camera, renderer.domElement);
+  controls.addEventListener('change', render); // use if there is no animation loop
+  controls.minDistance = 0;
+  controls.maxDistance = 3500;
+  controls.enablePan = true; 
+  controls.target.set(-110, 300, 0);
+  controls.maxPolarAngle = Math.PI/2.05;
+  controls.update();
+
+  //
+  // Load Light
+  //
+  var ambientLight = new THREE.AmbientLight( 0xcccccc );
+  scene.add( ambientLight );
+        
+  var directionalLight = new THREE.DirectionalLight( 0xffffff );
+  directionalLight.position.set( 0, 1, 1 ).normalize();
+  scene.add( directionalLight );	
+
+
+  //
+  // EVENTS
+  //
+  window.addEventListener('resize', onWindowResize, false);  
+
+  renderer.domElement.addEventListener('click', onClick, false);        // Mouse
+  //renderer.domElement.addEventListener('mousemove', onMouseOver,false);
+  renderer.domElement.addEventListener('touchend', onTouchEnd, false);  // Smartphone
+
+}
+
+/**
+ * Get all the selectors (buildings identifiers)
+ * @returns Array with all the selectors
+ */
+function getSelectors() {
+  let info = {};
+  let object = {
+    "function": 'get_map_selectors',
+    'info': info,
+  }
+  return $.ajax({
+      url: 'ajax/read',
+      data: object,
+      method: 'get',
+      success: function(data){
+        
+      }
+  });
+}
+
+/*
+ * Show a screen page if the building on which was clicked is in the database
+ * Display the name of the building and the description of the building
+ */
+function handleClickOnBuilding(x,y) {
+
+  mouse.x = x;
+  mouse.y = y;
+
+  raycaster.setFromCamera(mouse, camera);
+
+  var intersects = raycaster.intersectObjects(scene.children, true);
+
+
+  // If we clicked on a building
+  if (intersects.length > 0) {
+
+    var selector = intersects[0].object.name.toString().toLowerCase(); // Name of the building we clicked on
+
+    // Wait for getSelectors() to be done
+    // If we do not wait, everything will be executed before checking what is inside the database
+    $.when(getSelectors().done(function(data) {
+      if (data.map(x => x.selector).includes(selector)){
+        // Use the same thing as the one for the 2D map
+        $.alert({
+          title: 'Chargement...',
+          content: function () {
+              let self = this;
+              let object = {
+                  "function": 'get_map_info',
+                  'selector': selector,
+              };
+              return $.ajax({
+                  url: 'ajax/read',
+                  data: object,
+                  method: 'get'
+              }).done(function (data) {
+                  if (data.length > 0) {
+                      self.setTitle(data[0]['title']);
+                      self.setContent(data[0]['description']);
+                  } else {
+                      self.setTitle('Erreur');
+                      self.setContent('Une erreur est survenue')
+                      return;
+                  }
+              }).fail(function(){
+                  self.setContent('Something went wrong.');
+              });
+          },
+        }); 
+      } else {
+
+      }
+    }));
+
+  }
+}
+
+/**
+ * Get the position where the user clicked (mouse) on a building and process it
+ */
+function onClick() {
+
+  event.preventDefault();
+
+  height = document.querySelector('#maps').clientHeight;
+  width = document.querySelector('#maps').clientWidth;
+
+
+  const rect = renderer.domElement.getBoundingClientRect();
+  mouse.x = ( ( event.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;
+  mouse.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;
+  handleClickOnBuilding(mouse.x, mouse.y);
+ 
+}
+
+/**
+ * Get the position where the user clicked (smartphone) on a building and process it
+ */
+function onTouchEnd() {
+  var clientX, clientY;
+
+  clientX = event.changedTouches[0].clientX;
+  clientY = event.changedTouches[0].clientY;
+
+  const rect = renderer.domElement.getBoundingClientRect();
+  mouse.x = ( ( clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;
+  mouse.y = - ( ( clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;
+
+  handleClickOnBuilding(mouse.x, mouse.y);
+}
+
+
+/**
+ * Process something when the user moved the mouse over a building
+ * @todo add text over the building
+ */
+function onMouseOver() {
+
+  event.preventDefault();
+
+  height = document.querySelector('#maps').clientHeight;
+  width = document.querySelector('#maps').clientWidth;
+
+
+  const rect = renderer.domElement.getBoundingClientRect();
+  mouse.x = ( ( event.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;
+  mouse.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;
+
+  createTextOverBuilding(mouse.x,mouse.y)
+
+}
+
+function createTextOverBuilding(x,y) {
+  mouse.x = x;
+  mouse.y = y;
+
+  raycaster.setFromCamera(mouse, camera);
+
+  var intersects = raycaster.intersectObjects(scene.children, true);
+
+
+  // If we clicked on a building
+  if (intersects.length > 0) {
+    console.log(intersects);
+
+
+
+  }
+
+  
+}
+
+function makeLabelCanvas(baseWidth, size, name) {
+  const borderSize = 2;
+  const ctx = document.createElement('canvas').getContext('2d');
+  const font =  `${size}px bold sans-serif`;
+  ctx.font = font;
+  // measure how long the name will be
+  const textWidth = ctx.measureText(name).width;
+
+  const doubleBorderSize = borderSize * 2;
+  const width = baseWidth + doubleBorderSize;
+  const height = size + doubleBorderSize;
+  ctx.canvas.width = width;
+  ctx.canvas.height = height;
+
+  // need to set font again after resizing canvas
+  ctx.font = font;
+  ctx.textBaseline = 'middle';
+  ctx.textAlign = 'center';
+
+  ctx.fillStyle = 'blue';
+  ctx.fillRect(0, 0, width, height);
+
+  // scale to fit but don't stretch
+  const scaleFactor = Math.min(1, baseWidth / textWidth);
+  ctx.translate(width / 2, height / 2);
+  ctx.scale(scaleFactor, 1);
+  ctx.fillStyle = 'white';
+  ctx.fillText(name, 0, 0);
+
+
+  const labelBaseScale = 0.01;
+  const label = new THREE.Sprite(labelMaterial);
+  scene.add(label);
+  label.position.y = head.position.y + headRadius + size * labelBaseScale;
+
+  label.scale.x = canvas.width  * labelBaseScale;
+  label.scale.y = canvas.height * labelBaseScale;
+  return ctx.canvas;
+}
+
+
+/**
+ * Auto-resizes the canvas when window size is updated
+ */
+function onWindowResize() {
+
+  height = document.querySelector('#main-content .inner').clientHeight;
+  width = document.querySelector('#main-content .inner').clientWidth;
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+
+  renderer.setSize(width * 0.9, window.innerHeight * 0.75); // 0.9 and 0.75 so it looks comfortable on the screen
+  
+  render();
+
+}
+
+/**
+ * Render the scene
+ */
+function render() {
+
+  renderer.render(scene, camera);
+}
+
+/*
+ * Remove the loader when the model loaded
+ */
+function onTransitionEnd( event) {
+  event.target.remove();
+}

coms.php

@@ -2,9 +2,10 @@
 ob_start(); // Start reading html
 ?>
     <main>
+    	<section>
         	<h1>Les Com's</h1>
         	<p>La liste de toutes les com's de ta semaine d'accueil, avec les contacts des responsables.</p>
-    <main>
+    	</section>
     	<section>
     		<h1><b>Le Bureau</b></h1>
     		<?php
@@ -13,13 +14,15 @@ ob_start(); // Start reading html
     		$nom = ["Papion", "Martin", "Alnet", "Gerard"];
     		$mail = ["maxencepapion@gmail.com", "sarah.mrtp@gmail.com", "alnet@insa-toulouse.fr", "igerard@insa-toulouse.fr"];
 
-    			for($i = 0; $i < count($prenom); $i++) {
     		echo "<ul>";
+    			for($i = 0; $i < count($prenom); $i++) {
+    				echo "<li>";
     				echo "<h2>".$fonction[$i]."</h2>";
     				echo "<h4>".$prenom[$i]." ".$nom[$i]."</h4>";
     				echo "<a href='mailto:".$mail[$i]."'>".$mail[$i]."</a>";
-    				echo "</ul>";
+    				echo "</li>";
     			}
+    		echo "</ul>";
     		?>
     	</section>
 
@@ -27,12 +30,14 @@ ob_start(); // Start reading html
     	function respo($name, $prenom, $nom, $mail) {
     		echo "<section>";
     		echo "<h1><b>".$name."</b></h1>";
-    		for($i = 0; $i < count($prenom); $i++) {
     		echo "<ul>";
+    		for($i = 0; $i < count($prenom); $i++) {
+				echo "<li>";
 				echo "<h4>".$prenom[$i]." ".$nom[$i]."</h4>";
 				echo "<a href='mailto:".$mail[$i]."'>".$mail[$i]."</a>";
-				echo "</ul>";
+				echo "</li>";
     		}
+    		echo "</ul>";
     		echo "</section>";
     	}
     	?>
@@ -116,9 +121,9 @@ ob_start(); // Start reading html
     	["Rebejac (resp graphisme)", "Ciaran (resp graphisme)", "Rébillard (resp web)"],
     	["rebejac@insa-toulouse.fr", "clj.akinlami@gmail.com", "rebillar@insa-toulouse.fr"]);
 
-		
-
     	?>
+
+	</main>
 <?php
 $infopage = ["", "Com's", ob_get_clean(), "", "coms"]; //relativepath, pagetitle, pagecontent, pagescript, pagename | cf structure/template.php ligne 2 à 6
 include("structure/template.php");

downloads.php

@@ -1,7 +1,24 @@
 <?php
 ob_start(); // Start reading html
 ?>
-
+<h1>Les Telechargements</h1>
+<p>Si jamais t'as perdu quelque chose, pas de problèmes ! Tu pourras trouver tout ce dont tu as besoin ici.</p>
+<ul>
+    <li>
+        <a href="assets/pdf/Plaquette-INSA-2021-Promo-59.pdf">La plaquette</a>
+    </li>
+    <li>
+        <a href="assets/pdf/Fiche-Parrainage.pdf">La fiche de parrainage</a> (<a href="#">Godfather/Godmother form</a>)
+    </li>
+    <li>
+        <a href="assets/pdf/Charte-Covid.pdf">La charte gestes barrières</a> (<a href="#">Covid charter</a>, 
+            <a href="assets/pdf/Carta-Covid.pdf">Carta covid</a>)
+    </li>
+    <li>
+        <a href="assets/pdf/Droit-Image.pdf">La charte de droit à l'image</a> (<a href="#">or here</a>, 
+            <a href="assets/pdf/Derechos-de-imagen.pdf">o aquí</a>)
+    </li>
+</ul>
 <?php
 $infopage = ["", "Telechargements", ob_get_clean(), "", "downloads"]; //relativepath, pagetitle, pagecontent, pagescript, pagename | cf structure/template.php ligne 2 à 6
 include("structure/template.php");

info.php

@@ -1,7 +1,82 @@
 <?php
 ob_start(); // Start reading html
 ?>
+<main>
+	<h1>Contact</h1>
+	    <p>
+	        Voici la merveilleuse page que personne lit ! Mais t'es là, donc autant en profiter.
+	    </p>
+	    <p>
+	        Pour avoir les news, rejoins le groupe <a href="https://www.facebook.com/accueil2018INSAT/">Facebook</a> de la
+	        semaine. On y postera des infos sur les événements à venir.
+	    </p>
+	    <p>
+	    Tu peux également rejoindre l'<strong>Instagram</strong> : <a href="https://www.instagram.com/insat_accueil_2021/">@insat_accueil_2021</a>
+		</p>
 
+	    <br>
+	    <h4>Pour les questions concernant la semaine, adresse-toi directement au Prez, il saura surement t'aider :</h4>
+	    <ul>
+	        <li>
+	            <strong>Mail :</strong> <a href="mailto:maxencepapion@gmail.com">maxencepapion@gmail.com</a>
+	        </li>
+	        <li>
+	            <strong>Tel :</strong> #
+	        </li>
+	    </ul>
+	    <br>
+	    <h4>Pour des questions a propos du site :</h4>
+	    <ul>
+	        <li>
+	            <strong>Mail :</strong> rebillar@insa-toulouse.fr
+	            <br>
+	            <strong>instagram : </strong> baptiste.reb
+	        </li>
+	        <br>
+	        <li>
+	            Sinon y'a Arnaud, le créateur du site : vergnet@etud.insa-toulouse.fr ou Arnaud Vergnet sur Facebook
+	        </li>
+	    </ul>
+
+	    <br>
+	    <h4>Sinon, si tu veux des infos a propos d'une activite/Com specifique, va sur la page des <a
+	                href="coms.php">Com's</a>
+	        pour
+	        contacter les responsables.
+	    </h4>
+	    <br>
+	    <p>
+	        Ta semaine d'accueil est possible grâce à l'<a href="https://etud.insa-toulouse.fr/~amicale/">Amicale</a>, une
+	        association gérée par des élèves de l'INSA, pour proposer aux étudiants des activités et des services.
+	    </p>
+
+
+	    <h1>Credits</h1>
+	    <p>
+	        J'ai repris le site créé par Arnaud et maintenu par Cyprien pour notre semaine d'accueil. Le site est plutôt modulable, donc si
+	        quelqu'un
+	        est chaud pour le reprendre pour l'année prochaine, contactez-moi ! (Y'a pas besoin de connaissances préalables,
+	        c'est assez simple !).
+	    </p>
+	    <br>
+	    <p>Voici les différentes technologies et ressources utilisées pour ce site :</p>
+	    <ul>
+	        <li><a href="http://www.php.net/">PHP</a></li>
+	        <li><a href="https://www.w3.org/html/">HTML5</a></li>
+	        <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3">CSS3</a></li>
+	        <li><a href="https://www.javascript.com/">JS</a></li>
+	    </ul>
+
+	    <h1>Vie Privee</h1>
+	    <p>
+	        Le site utilise <a href="https://matomo.org/">Matomo</a> pour analyser la
+	        fréquentation. Ces données sont anonymes et permettent de savoir quelles pages sont utiles ainsi que ton pays
+	        d'origine (pour voir si les étrangers ont reçu les infos). Pour ne pas
+	        être traqué, tu peux simplement activer l'option "Indiquer aux sites que je
+	        ne souhaite pas être traqué" de ton navigateur.
+	        Si jamais ça marche pas, envoie-moi un mail.
+	    </p>
+</main>
 <?php
 $infopage = ["", "Info", ob_get_clean(), "", "info"]; //relativepath, pagetitle, pagecontent, pagescript, pagename | cf structure/template.php ligne 2 à 6
 include("structure/template.php");

lydia.php

@@ -1,7 +1,27 @@
 <?php
 ob_start(); // Start reading html
 ?>
-
+<main>
+	<h1>Izly et Lydia : les applis pour te simplifier la vie</h1>
+        Pour payer au Pk, au RU ou encore à la cafet’ tu vas avoir deux applis pour te
+        simplifier la vie.<br><br>
+        <strong>Izly</strong>, c’est comme un mini-compte bancaire que tu peux recharger avec ta carte ou
+        ton compte perso avec lequel tu vas pouvoir payer tes repas au RU et à la cafet’. Il est aussi
+        relié à ta carte étudiante, ce qui te permet de payer même si ton téléphone est déchargé.
+        C’est aussi l’appli essentielle pour prendre un café entre deux TD.<br><br>
+        <strong>Lydia</strong>, c’est un peu pareil que Izly, mais là elle te servira plus pour achter des paninis
+        au Pôle Huma, ce qui n’est pas rien. Crois moi PPA, quand tu es un Petit Paresseux Affamé
+        qui part pour 3h d’expression, le panini fait du bien ! Avec Lydia tu peux aussi faire de
+        nombreuses économies sur plein de frais sur le campus. Ton entrée aux évènements, ton
+        inscription à l’Amicale… Souvent, on t’offrira 2€ si tu payes avec Lydia ! Alors télécharge
+        cette appli aussi vite que possible, elle te sauvera ! C’est grâce à elle que tu pourras
+        rembourser tes potes aussi ! Que ce soit pour les cadeaux communs pour Michel, ou pour
+        payer ta dette si t’as oublié tes sous un jour… Ça peut toujours servir
+        Tu n'as jamais entendu parler de Lydia ni d’Izly et tu te demandes comment ça fonctionne ?
+        Ne t’en fais, on a pensé à toi ! Nous t’avons concocté un joli tuto rien que pour toi.<br><br>
+        <iframe width="560" height="315" src="https://www.youtube.com/embed/TwaA3jlW8kM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        <br><br>
+</main>
 <?php
 $infopage = ["", "Lydia & Izly", ob_get_clean(), "", "lydia"]; //relativepath, pagetitle, pagecontent, pagescript, pagename | cf structure/template.php ligne 2 à 6
 include("structure/template.php");

map.php

@@ -1,8 +1,68 @@
 <?php
 ob_start(); // Start reading html
 ?>
+<main>
+    <h1>Le Plan</h1>
+    <p>
+        Voici le plan de ton nouveau campus, que tu vas connaître par cœur en quelques jours !
+    </p>
+    <p>
+        <strong>Clique sur un bâtiment pour voir les infos.</strong>
+    </p>
+    <div id="maps_button">
+        <button onclick="enable3DMap()" class="main-button">Map 3D</button>
+        <button onclick="enable2DMap()" class="main-button">Map 2D</button>
+    </div>
+    <section id="loading-screen">
+
+	<div class="loader"></div>
+
+    </section>
+    <div id="maps" class="">
+        <script src="assets/js/map3d.js" type="module"></script>
+
+        <div id="map" class="hidden">
+            <?php echo file_get_contents("assets/img/map/map.svg"); ?>
+            <canvas id="canvasID"></canvas>
+        </div>
+    </div>
+
+    <p>
+        Une petite note sur le numéro des salles : sur ton emploi du temps, le bâtiment est marqué en premier, et
+         ensuite le chiffre des centaines pour l'étage, et après à toi de trouver !
+    </p>
+    <p>
+        Par exemple, GM 212, c'est au GM, deuxième étage.
+        <br>
+        Et si t'as Amphi 108, c'est au premier étage du STPI. En gros STPI=bâtiment des amphis.
+    </p>
+    <p id="hint">Fond de carte issu du site <a href="https://www.openstreetmap.org/#map=17/43.57103/1.46591">Open Street
+            Map</a>.
+    </p>
+</main>
+
+
+<script>
+function enable3DMap() {
+    var map3d = document.querySelector('#maps #map3d');
+    var map = document.querySelector('#maps #map');
+
+    map3d.classList.add("hidden");
+    map.classList.add("hidden");
+    map3d.classList.remove("hidden");
+}
+
+function enable2DMap() {
+    var map3d = document.querySelector('#maps #map3d');
+    var map = document.querySelector('#maps #map');
+    map.classList.add("hidden");
+    map3d.classList.add("hidden");
+    map.classList.remove("hidden");
+}
+</script>
+
 
 <?php
-$infopage = ["", "Plan", ob_get_clean(), "", "map"]; //relativepath, pagetitle, pagecontent, pagescript, pagename | cf structure/template.php ligne 2 à 6
+$infopage = ["", "Plan", ob_get_clean(), "<script type='text/javascript' src='assets/js/map/map.js'></script>", "map"]; //relativepath, pagetitle, pagecontent, pagescript, pagename | cf structure/template.php ligne 2 à 6
 include("structure/template.php");
 ?>