téléchargement d'assets dans head, header et footer

23 files changed, 252 insertions, 99 deletions

diff --git a/public/css/body.css b/public/css/body.css
index 8ad3a52..cadf955 100644
--- a/public/css/body.css
+++ b/public/css/body.css
@@ -43,7 +43,7 @@ main
     margin: auto;
     /*max-width: 1200px;*/
     background-color: #E3F3FF;
-    padding: 15px 0;
+    padding: 15px;
 }
 .hidden
 {
@@ -51,8 +51,7 @@ main
 }
 section
 {
-    margin: 10px 0;
-    padding: 15px;
+    margin-top: 20px;
 }
 section > h3
 {
diff --git a/public/css/foot.css b/public/css/foot.css
index 8d0a94d..8a0d08d 100644
--- a/public/css/foot.css
+++ b/public/css/foot.css
@@ -14,11 +14,12 @@ footer > div
         max-width: 1200px;
         display: flex;
         justify-content: space-around;
+        flex-wrap: wrap;
 }
 
-.contact
+footer .data > div
 {
-        margin: 16px 0; /* alignement avec la <p> autour du logo */
+        margin: 20px 10px;
 }
 .contact a
 {
@@ -73,7 +74,7 @@ footer > div
         margin: 0 3px;
 }*/
 
-.footer_logo img
+#footer_logo_img
 {
         max-width: 288px;
         min-width: 150px;
@@ -85,14 +86,6 @@ footer > div
                 width: 70px;
         }
 }
-@media screen and (max-width: 800px)
-{
-        footer > div
-        {
-                flex-direction: column;
-                align-items: center;
-        }
-}
 
 .breadcrumb a
 {
diff --git a/public/css/head.css b/public/css/head.css
index b173077..4206044 100644
--- a/public/css/head.css
+++ b/public/css/head.css
@@ -17,7 +17,12 @@ header
         display: none;
 }
 
-.header-content
+.background_button
+{
+        max-height: 24px;
+}
+
+.header_content
 {
         padding: 20px 0;
         display: grid;
@@ -27,12 +32,12 @@ header
 /*.header_left_col
 {}*/
 @media screen and (max-width: 1000px){
-        .header-content{
+        .header_content{
                 padding: 18px 0;
         }
 }
 @media screen and (max-width: 450px){
-        .header-content
+        .header_content
         {
                 /*grid-template-columns: 1fr 2fr 1fr;*/
                 display: block;
@@ -69,16 +74,16 @@ header img
 {
         vertical-align: bottom; /* supprime espace sous l'image */
         max-width: 150px;
-        max-height: 75px;
+        max-height: 100px;
 }
 header a
 {
         color: unset; /* ne plus hériter */
         text-decoration: none;
 }
-#edit_favicon_zone
+.editing_zone > div
 {
-        margin-bottom: 10px;
+        /*display: inline;*/ /* à l'ancienne */
 }
 /*.header_right_col
 {}*/
diff --git a/public/js/InputFile.js b/public/js/InputFile.js
new file mode 100644
index 0000000..f5e450c
--- /dev/null
+++ b/public/js/InputFile.js
@@ -0,0 +1,51 @@
+// étendre une classe parente avec InputFile?
+class InputFile{
+        constructor(name){
+                this.name = name;
+                this.parent = document.getElementById(name);
+        }
+        open(){
+                this.parent.querySelector('#' + this.name + '_img').classList.add('hidden');
+                this.parent.querySelector('#' + this.name + '_input').classList.remove('hidden');
+                this.parent.querySelector('#' + this.name + '_open').classList.add('hidden');
+                this.parent.querySelector('#' + this.name + '_submit').classList.remove('hidden');
+                this.parent.querySelector('#' + this.name + '_cancel').classList.remove('hidden');
+        }
+        close(){
+                this.parent.querySelector('#' + this.name + '_img').classList.remove('hidden');
+                this.parent.querySelector('#' + this.name + '_input').classList.add('hidden');
+                this.parent.querySelector('#' + this.name + '_open').classList.remove('hidden');
+                this.parent.querySelector('#' + this.name + '_submit').classList.add('hidden');
+                this.parent.querySelector('#' + this.name + '_cancel').classList.add('hidden');
+        }
+        submit(){
+                const file = this.parent.querySelector('#' + this.name + '_input').files[0];
+                if(!file){
+                        console.error("Erreur: aucun fichier sélectionné.");
+                        return;
+                }
+                const form_data = new FormData();
+                form_data.append('file', file);
+
+                fetch('index.php?head_foot_image=' + this.name, {
+                method: 'POST', // apparemment il faudrait utiliser PUT
+                body: form_data
+            })
+            .then(response => response.json())
+            .then(data => {
+                if(data.success){
+                        this.parent.querySelector('#' + this.name + '_img').src = data.location;
+                                this.close(this.name);
+                }
+                else{
+                    console.error("Erreur: le serveur n'a pas enregistré l'image'.");
+                }
+            })
+            .catch(error => {
+                console.error('Erreur:', error);
+            });
+        }
+        cancel(){
+                this.close(this.name);
+        }
+}
\ No newline at end of file
diff --git a/public/js/InputText.js b/public/js/InputText.js
index ba7e8e4..33dcf8d 100644
--- a/public/js/InputText.js
+++ b/public/js/InputText.js
@@ -1,27 +1,28 @@
 // s'en servir dans menu et chemin
+// étendre un classe parente avec InputText?
 class InputText{
         constructor(name){
                 this.name = name;
                 this.parent = document.getElementById(name);
         }
-        openTextInput(){
+        open(){
                 this.parent.querySelector('#' + this.name + '_span').classList.add('hidden');
                 this.parent.querySelector('#' + this.name + '_input').classList.remove('hidden');
                 this.parent.querySelector('#' + this.name + '_open').classList.add('hidden');
                 this.parent.querySelector('#' + this.name + '_submit').classList.remove('hidden');
                 this.parent.querySelector('#' + this.name + '_cancel').classList.remove('hidden');
         }
-        closeTextInput(){
+        close(){
                 this.parent.querySelector('#' + this.name + '_span').classList.remove('hidden');
                 this.parent.querySelector('#' + this.name + '_input').classList.add('hidden');
                 this.parent.querySelector('#' + this.name + '_open').classList.remove('hidden');
                 this.parent.querySelector('#' + this.name + '_submit').classList.add('hidden');
                 this.parent.querySelector('#' + this.name + '_cancel').classList.add('hidden');
         }
-        submitTextInput(){
+        submit(){
                 const new_text = this.parent.querySelector('#' + this.name + '_input').value;
 
-                fetch('index.php?entire_site_edit=' + this.name, {
+                fetch('index.php?head_foot_text=' + this.name, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({new_text: new_text})
@@ -30,7 +31,7 @@ class InputText{
             .then(data => {
                 if(data.success){
                         this.parent.querySelector('#' + this.name + '_span').innerHTML = new_text;
-                                this.closeTextInput(this.name);
+                                this.close(this.name);
                 }
                 else{
                     console.error("Erreur: le serveur n'a pas enregistré le nouveau texte.");
@@ -40,8 +41,8 @@ class InputText{
                 console.error('Erreur:', error);
             });
         }
-        cancelTextInput(){
+        cancel(){
                 this.parent.querySelector('#' + this.name + '_input').value = this.parent.querySelector('#' + this.name + '_span').innerHTML;
-                this.closeTextInput(this.name);
+                this.close(this.name);
         }
 }
\ No newline at end of file
diff --git a/public/assets/favicon48x48.png b/public/user_data/assets/favicon48x48.png
index 9825db1..9825db1 100644
--- a/public/assets/favicon48x48.png
+++ b/public/user_data/assets/favicon48x48.png
diff --git a/public/assets/fond-piscine.jpg b/public/user_data/assets/fond-piscine.jpg
index 239d95d..239d95d 100644
--- a/public/assets/fond-piscine.jpg
+++ b/public/user_data/assets/fond-piscine.jpg
diff --git a/public/assets/logo-120x75.jpg b/public/user_data/assets/logo-120x75.jpg
index b58a7a6..b58a7a6 100644
--- a/public/assets/logo-120x75.jpg
+++ b/public/user_data/assets/logo-120x75.jpg
diff --git a/public/assets/logo-150x94.jpg b/public/user_data/assets/logo-150x94.jpg
index 67ec6cc..67ec6cc 100644
--- a/public/assets/logo-150x94.jpg
+++ b/public/user_data/assets/logo-150x94.jpg
diff --git a/public/assets/logo-nb-et-ffn.png b/public/user_data/assets/logo-nb-et-ffn.png
index f51ac9c..f51ac9c 100644
--- a/public/assets/logo-nb-et-ffn.png
+++ b/public/user_data/assets/logo-nb-et-ffn.png
diff --git a/public/assets/logo2.jpg b/public/user_data/assets/logo2.jpg
index 39c03bd..39c03bd 100644
--- a/public/assets/logo2.jpg
+++ b/public/user_data/assets/logo2.jpg
diff --git a/src/controller/HeadFootController.php b/src/controller/HeadFootController.php
index 8d59d10..0429aac 100644
--- a/src/controller/HeadFootController.php
+++ b/src/controller/HeadFootController.php
@@ -5,23 +5,24 @@ declare(strict_types=1);
 
 //use App\Entity\Node;
 //use App\Entity\NodeData;
-//use App\Entity\Image;
-//use Doctrine\Common\Collections\ArrayCollection;
+use App\Entity\Asset;
+use Doctrine\Common\Collections\ArrayCollection;
 use Doctrine\ORM\EntityManager;
 
 class HeadFootController
 {
-        static public function setTextData(EntityManager $entityManager, array $request_params, array $json): void
+        static public function setTextData(EntityManager $entityManager, string $request_params, array $json): void
         {
-                if(count($request_params) !== 2){
+                $params_array = explode('_', $request_params); // header_title, header_description, footer_name, footer_address, footer_email
+                if(count($params_array) !== 2){
                         echo json_encode(['success' => false]);
                         die;
                 }
 
                 $model = new Model($entityManager);
-                if($model->findWhateverNode('name_node', $request_params[0])){
+                if($model->findWhateverNode('name_node', $params_array[0])){
                         $node_data = $model->getNode()->getNodeData();
-                        $node_data->updateData($request_params[1], $json['new_text']); // $request_params[1] n'est pas contrôlé
+                        $node_data->updateData($params_array[1], $json['new_text']); // $params_array[1] n'est pas contrôlé
                         $entityManager->flush();
                         echo json_encode(['success' => true]);
                 }
@@ -30,4 +31,51 @@ class HeadFootController
                 }
                 die;
         }
+        static public function uploadAsset(EntityManager $entityManager, string $request_params): void
+        {
+                if(empty($_FILES)){
+                        http_response_code(400);
+                        echo json_encode(['success' => false]);
+                }
+                else{
+                        $file = $_FILES['file'];
+
+                        if(!is_dir(Asset::USER_PATH)){
+                    mkdir(Asset::USER_PATH, 0700, true);
+                }
+
+                $allowed_extensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'tiff', 'tif', 'ico', 'bmp']; // pas de SVG
+                        $name = Security::secureFileName(pathinfo($file['name'], PATHINFO_FILENAME));
+                $extension = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
+                if(!in_array($extension, $allowed_extensions) || $extension === 'jpg'){
+                    $extension = 'jpeg';
+                }
+                        $file_path = uniqid($name . '_') . '.' . $extension;
+
+                        if(ImageUploadController::imagickCleanImage(file_get_contents($file['tmp_name']), Asset::USER_PATH . $file_path, $extension)){ // recréer l’image pour la nettoyer
+                                $params_array = explode('_', $request_params); // favicon, header_logo, header_background, footer_logo
+
+                                $model = new Model($entityManager);
+                                if($model->findWhateverNode('name_node', $params_array[0])){
+                                        $node_data = $model->getNode()->getNodeData();
+                                        $image = new Asset($name, $file_path, mime_content_type($file['tmp_name']), $request_params);
+                                        $node_data->addAsset($image);
+
+                                        $entityManager->persist($image);
+                                        $entityManager->flush();
+                                        echo json_encode(['success' => true, 'location' => Asset::USER_PATH . $file_path]);
+                                }
+                                else{
+                                        echo json_encode(['success' => false, 'message' => 'Erreur noeud non trouvé.']);
+                                }
+                        }
+                        else{
+                                http_response_code(500);
+                    echo json_encode(['success' => false, 'message' => 'Erreur image non valide.']);
+                        }
+                }
+                die;
+        }
+
+        //static public function uploadImage(EntityManager $entityManager, array $request_params): void
 }
\ No newline at end of file
diff --git a/src/controller/ImageUploadController.php b/src/controller/ImageUploadController.php
index 29b8059..5e80ba5 100644
--- a/src/controller/ImageUploadController.php
+++ b/src/controller/ImageUploadController.php
@@ -61,14 +61,14 @@ class ImageUploadController
         {
                 if(isset($_FILES['file'])){
                 $file = $_FILES['file'];
-                $dest = 'images/';
-                $dest_mini = 'images-mini/';
+                $dest = 'user_data/images/';
+                $dest_mini = 'user_data/images-mini/';
                 
                 // Vérifier si les répertoires existent, sinon les créer
-                if(!is_dir($dest)) {
+                if(!is_dir($dest)){
                     mkdir($dest, 0700, true);
                 }
-                if(!is_dir($dest_mini)) {
+                if(!is_dir($dest_mini)){
                     mkdir($dest_mini, 0700, true);
                 }
                 
@@ -78,7 +78,7 @@ class ImageUploadController
                 if(!in_array($extension, $allowed_extensions) || $extension === 'jpg'){
                     $extension = 'jpeg';
                 }
-                $file_path = $dest . $name . '_' . uniqid() . '.' . $extension;
+                $file_path = uniqid($dest . $name . '_') . '.' . $extension;
 
                 // créer une miniature de l'image
                 //
@@ -105,7 +105,7 @@ class ImageUploadController
             
             if(isset($json['image_url'])){
                 $image_data = self::curlDownloadImage($json['image_url']); // téléchargement de l’image par le serveur avec cURL au lieu de file_get_contents
-                $dest = 'images/';
+                $dest = 'user_data/images/';
                 
                 if(!is_dir($dest)) { // Vérifier si le répertoire existe, sinon le créer
                     mkdir($dest, 0777, true);
@@ -124,7 +124,7 @@ class ImageUploadController
                 if(!in_array($extension, $allowed_extensions) || $extension === 'jpg'){
                     $extension = 'jpeg';
                 }
-                $local_path = $dest . $name . '_' . uniqid() . '.' . $extension;
+                $local_path = uniqid($dest . $name . '_') . '.' . $extension;
                 
                 if(self::imagickCleanImage($image_data, $local_path, $extension)){ // recréer l’image pour la nettoyer
                     echo json_encode(['location' => $local_path]); // nouvelle adresse
@@ -144,10 +144,10 @@ class ImageUploadController
         static public function uploadImageBase64(): void
         {
                 $json = json_decode(file_get_contents('php://input'), true);
-            $dest = 'images/';
+            $dest = 'user_data/images/';
 
-            if(!is_dir('images')){
-                mkdir('images', 0777, true);
+            if(!is_dir($dest)){
+                mkdir($dest, 0777, true);
             }
 
             // détection de data:image/ et de ;base64, et capture du format dans $type
@@ -170,7 +170,7 @@ class ImageUploadController
                 die;
             }
             
-            $local_path = $dest . 'pasted_image_' . uniqid() . '.' . $extension;
+            $local_path = uniqid($dest . 'pasted_image_') . '.' . $extension;
 
             if(self::imagickCleanImage($image_data, $local_path)){
                 echo json_encode(['location' => $local_path]);
diff --git a/src/model/entities/Article.php b/src/model/entities/Article.php
index 5412497..b9cb4bb 100644
--- a/src/model/entities/Article.php
+++ b/src/model/entities/Article.php
@@ -33,11 +33,10 @@ class Article
     #[ORM\Column(type: "text")]
     private string $content; // de l'éditeur html
 
-    // liaison avec table intermédiaire
-    #[ORM\ManyToMany(targetEntity: Image::class, inversedBy: "article")]
+    #[ORM\ManyToMany(targetEntity: Image::class, inversedBy: "article")] // cascade: ['remove'] = très dangereux!
     #[ORM\JoinTable(
         name: TABLE_PREFIX . "article_image",
-        joinColumns: [new ORM\JoinColumn(name: "article_id", referencedColumnName: "id_article", onDelete: "CASCADE")],
+        joinColumns: [new ORM\JoinColumn(name: "article_id", referencedColumnName: "id_article", onDelete: "CASCADE")], // onDelete: "CASCADE": très utile
         inverseJoinColumns: [new ORM\JoinColumn(name: "image_id", referencedColumnName: "id_image", onDelete: "CASCADE")]
     )]
     private Collection $images;
diff --git a/src/model/entities/Asset.php b/src/model/entities/Asset.php
index e1071b4..e359e21 100644
--- a/src/model/entities/Asset.php
+++ b/src/model/entities/Asset.php
@@ -11,6 +11,9 @@ use Doctrine\ORM\Mapping as ORM;
 #[ORM\Table(name: TABLE_PREFIX . "asset")]
 class Asset
 {
+    const PATH = 'assets/';
+    const USER_PATH = 'user_data/assets/';
+
     #[ORM\Id]
     #[ORM\GeneratedValue]
     #[ORM\Column(type: "integer")]
diff --git a/src/model/entities/NodeData.php b/src/model/entities/NodeData.php
index 5938eca..9db866e 100644
--- a/src/model/entities/NodeData.php
+++ b/src/model/entities/NodeData.php
@@ -39,11 +39,10 @@ class NodeData
     #[ORM\Column(type: "integer", nullable: true)]
     private ?int $pagination_limit = null; // pour les post_block et news_block
 
-    // liaison avec table intermédiaire
-    #[ORM\ManyToMany(targetEntity: Asset::class, inversedBy: "node_data")]
+    #[ORM\ManyToMany(targetEntity: Asset::class, inversedBy: "node_data")] // cascade: ['remove'] = très dangereux!
     #[ORM\JoinTable(
-        name: TABLE_PREFIX . "node_asset",
-        joinColumns: [new ORM\JoinColumn(name: "node_data_id", referencedColumnName: "id_node_data", onDelete: "CASCADE")],
+        name: TABLE_PREFIX . "nodedata_asset",
+        joinColumns: [new ORM\JoinColumn(name: "node_data_id", referencedColumnName: "id_node_data", onDelete: "CASCADE")], // onDelete: "CASCADE": très utile
         inverseJoinColumns: [new ORM\JoinColumn(name: "asset_id", referencedColumnName: "id_asset", onDelete: "CASCADE")]
     )]
     private Collection $assets;
@@ -137,8 +136,18 @@ class NodeData
     {
         return $this->assets;
     }
-    public function setAssets(Collection $assets): void
+    public function addAsset(Asset $asset): void
     {
-        $this->assets = $assets;
+        if(!$this->assets->contains($asset)){
+            $this->assets->add($asset);
+            //$asset->addNodeData($this); // autre sens
+        }
+    }
+     public function removeAsset(Asset $asset): void
+    {
+        $this->assets->removeElement($asset);
+        /*if($this->assets->removeElement($asset)){ // autre sens
+            $asset->removeNodeData($this);
+        }*/
     }
 }
diff --git a/src/router.php b/src/router.php
index 1127c81..cfb1dec 100644
--- a/src/router.php
+++ b/src/router.php
@@ -142,9 +142,8 @@ elseif($request->getMethod() === 'POST'){
             }
 
             /* -- site entier (header, footer, favicon) -- */
-            elseif($request->query->has('entire_site_edit')){
-                $request_params = explode('_', $request->query->get('entire_site_edit')); // header_title, header_description, footer_text, etc
-                HeadFootController::setTextData($entityManager, $request_params, $json);
+            elseif($request->query->has('head_foot_text')){
+                HeadFootController::setTextData($entityManager, $request->query->get('head_foot_text'), $json);
             }
 
             /* -- page Menu et chemins -- */
@@ -211,10 +210,16 @@ elseif($request->getMethod() === 'POST'){
         }
 
         // upload d'image dans tinymce avec le plugin (bouton "insérer une image" de l'éditeur)
-        elseif(strpos($_SERVER['CONTENT_TYPE'], 'multipart/form-data') !== false && $request->query->has('action') && $request->query->get('action') === 'upload_image_tinymce')
+        elseif(strpos($_SERVER['CONTENT_TYPE'], 'multipart/form-data') !== false)
         {
-            ImageUploadController::imageUploadTinyMce();
+            if($request->query->has('action') && $request->query->get('action') === 'upload_image_tinymce'){
+                ImageUploadController::imageUploadTinyMce();
+            }
+            elseif($request->query->has('head_foot_image')){
+                HeadFootController::uploadAsset($entityManager, $request->query->get('head_foot_image'));
+            }
         }
+
         // requêtes XMLHttpRequest
         elseif(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')
         {
diff --git a/src/view/AbstractBuilder.php b/src/view/AbstractBuilder.php
index 34d1462..3d315b1 100644
--- a/src/view/AbstractBuilder.php
+++ b/src/view/AbstractBuilder.php
@@ -7,7 +7,7 @@ use App\Entity\Node;
 
 abstract class AbstractBuilder
 {
-        public const VIEWS_PATH = '../src/view/templates/';
+        const VIEWS_PATH = '../src/view/templates/';
         protected string $html = '';
     protected int $id_node;
 
diff --git a/src/view/FooterBuilder.php b/src/view/FooterBuilder.php
index dc0d31d..35df010 100644
--- a/src/view/FooterBuilder.php
+++ b/src/view/FooterBuilder.php
@@ -26,15 +26,19 @@ class FooterBuilder extends AbstractBuilder
             if($_SESSION['admin'])
             {
                 // données du footer
-                $buttons_footer_name = '<img id="footer_name_open" class="action_icon" src="assets/edit.svg" onclick="footer_name.openTextInput()">
-                    <img id="footer_name_submit" class="action_icon hidden" src="assets/save.svg" onclick="footer_name.submitTextInput()">
-                    <img id="footer_name_cancel" class="action_icon hidden" src="assets/close.svg" onclick="footer_name.cancelTextInput()">';
-                $buttons_footer_address = '<img id="footer_address_open" class="action_icon" src="assets/edit.svg" onclick="footer_address.openTextInput()">
-                    <img id="footer_address_submit" class="action_icon hidden" src="assets/save.svg" onclick="footer_address.submitTextInput()">
-                    <img id="footer_address_cancel" class="action_icon hidden" src="assets/close.svg" onclick="footer_address.cancelTextInput()">';
-                $buttons_footer_email = '<img id="footer_email_open" class="action_icon" src="assets/edit.svg" onclick="footer_email.openTextInput()">
-                    <img id="footer_email_submit" class="action_icon hidden" src="assets/save.svg" onclick="footer_email.submitTextInput()">
-                    <img id="footer_email_cancel" class="action_icon hidden" src="assets/close.svg" onclick="footer_email.cancelTextInput()">';
+                $buttons_footer_name = '<img id="footer_name_open" class="action_icon" src="assets/edit.svg" onclick="footer_name.open()">
+                    <img id="footer_name_submit" class="action_icon hidden" src="assets/save.svg" onclick="footer_name.submit()">
+                    <img id="footer_name_cancel" class="action_icon hidden" src="assets/close.svg" onclick="footer_name.cancel()">';
+                $buttons_footer_address = '<img id="footer_address_open" class="action_icon" src="assets/edit.svg" onclick="footer_address.open()">
+                    <img id="footer_address_submit" class="action_icon hidden" src="assets/save.svg" onclick="footer_address.submit()">
+                    <img id="footer_address_cancel" class="action_icon hidden" src="assets/close.svg" onclick="footer_address.cancel()">';
+                $buttons_footer_email = '<img id="footer_email_open" class="action_icon" src="assets/edit.svg" onclick="footer_email.open()">
+                    <img id="footer_email_submit" class="action_icon hidden" src="assets/save.svg" onclick="footer_email.submit()">
+                    <img id="footer_email_cancel" class="action_icon hidden" src="assets/close.svg" onclick="footer_email.cancel()">';
+
+                $buttons_footer_logo = '<img id="footer_logo_open" class="action_icon" src="assets/edit.svg" onclick="footer_logo.open()">
+                    <img id="footer_logo_submit" class="action_icon hidden" src="assets/save.svg" onclick="footer_logo.submit()">
+                    <img id="footer_logo_cancel" class="action_icon hidden" src="assets/close.svg" onclick="footer_logo.cancel()">';
 
                 // zone admin
                 $empty_admin_zone = 'empty_admin_zone';
@@ -76,6 +80,7 @@ class FooterBuilder extends AbstractBuilder
                 $buttons_footer_name = '';
                 $buttons_footer_address = '';
                 $buttons_footer_email = '';
+                $buttons_footer_logo = '';
             }
 
             ob_start();
diff --git a/src/view/HeadBuilder.php b/src/view/HeadBuilder.php
index 978d9ed..b3d78aa 100644
--- a/src/view/HeadBuilder.php
+++ b/src/view/HeadBuilder.php
@@ -3,6 +3,7 @@
 
 declare(strict_types=1);
 
+use App\Entity\Asset;
 use App\Entity\Node;
 
 class HeadBuilder extends AbstractBuilder
@@ -36,6 +37,7 @@ class HeadBuilder extends AbstractBuilder
             if($_SESSION['admin']){
                 // édition éléments sur toutes les pages (header, footer et favicon)
                 $js .= '<script src="' . self::versionedFileURL('js', 'InputText') . '"></script>' . "\n";
+                $js .= '<script src="' . self::versionedFileURL('js', 'InputFile') . '"></script>' . "\n";
 
                 // tinymce, nécéssite un script de copie dans composer.json
                 $css .= '<link rel="stylesheet" href="' . self::versionedFileURL('css', 'tinymce') . '">' . "\n";
@@ -57,7 +59,7 @@ class HeadBuilder extends AbstractBuilder
             }*/
 
             // en dur temporairement
-            $favicon = 'assets/favicon48x48.png';
+            $favicon = Asset::USER_PATH . 'favicon48x48.png';
             $alt = 'favicon';
 
             ob_start();
diff --git a/src/view/HeaderBuilder.php b/src/view/HeaderBuilder.php
index 5492340..3b45a11 100644
--- a/src/view/HeaderBuilder.php
+++ b/src/view/HeaderBuilder.php
@@ -3,6 +3,7 @@
 
 declare(strict_types=1);
 
+use App\Entity\Asset;
 use App\Entity\Node;
 
 class HeaderBuilder extends AbstractBuilder
@@ -79,26 +80,35 @@ class HeaderBuilder extends AbstractBuilder
             
             // boutons mode admin
             if($_SESSION['admin']){
-                $edit_favicon_hidden = 'hidden';
-                $button_favicon = '';
-                $button_header_logo = '';
-                //$edit_favicon_hidden = '';
-                //$favicon = 'assets/favicon48x48.png'; // double le code dans HeadBuilder
-                //$button_favicon = '<button onclick="editFavicon()"><img class="action_icon" src="' . $favicon . '"> Favicon</button>';
-                //$button_header_logo = '<img class="action_icon" src="assets/edit.svg" onclick="editHeaderLogo()">';
-                $buttons_header_title = '<img id="header_title_open" class="action_icon" src="assets/edit.svg" onclick="header_title.openTextInput()">
-                    <img id="header_title_submit" class="action_icon hidden" src="assets/save.svg" onclick="header_title.submitTextInput()">
-                    <img id="header_title_cancel" class="action_icon hidden" src="assets/close.svg" onclick="header_title.cancelTextInput()">';
-                $buttons_header_description = '<img id="header_description_open" class="action_icon" src="assets/edit.svg" onclick="header_description.openTextInput()">
-                    <img id="header_description_submit" class="action_icon hidden" src="assets/save.svg" onclick="header_description.submitTextInput()">
-                    <img id="header_description_cancel" class="action_icon hidden" src="assets/close.svg" onclick="header_description.cancelTextInput()">';
+                $editing_zone_margin = '5px';
+                $favicon = Asset::USER_PATH . 'favicon48x48.png'; // double le code dans HeadBuilder
+                $buttons_favicon = '<button id="head_favicon_open" onclick="head_favicon.open()"><img id="head_favicon_img" class="action_icon" src="' . $favicon . '"> Favicon</button>
+                    <img id="head_favicon_submit" class="action_icon hidden" src="assets/save.svg" onclick="head_favicon.submit()">
+                    <img id="head_favicon_cancel" class="action_icon hidden" src="assets/close.svg" onclick="head_favicon.cancel()">';
+                $background = Asset::USER_PATH . 'fond-piscine.jpg';
+                $buttons_background = '<button id="header_background_open" onclick="header_background.open()"><img id="header_background_img" class="background_button" src="' . $background . '"> Image de fond</button>
+                    <img id="header_background_submit" class="action_icon hidden" src="assets/save.svg" onclick="header_background.submit()">
+                    <img id="header_background_cancel" class="action_icon hidden" src="assets/close.svg" onclick="header_background.cancel()">';
+
+                $buttons_header_logo = '<img id="header_logo_open" class="action_icon" src="assets/edit.svg" onclick="header_logo.open()">
+                    <img id="header_logo_submit" class="action_icon hidden" src="assets/save.svg" onclick="header_logo.submit()">
+                    <img id="header_logo_cancel" class="action_icon hidden" src="assets/close.svg" onclick="header_logo.cancel()">';
+
+                $buttons_header_title = '<img id="header_title_open" class="action_icon" src="assets/edit.svg" onclick="header_title.open()">
+                    <img id="header_title_submit" class="action_icon hidden" src="assets/save.svg" onclick="header_title.submit()">
+                    <img id="header_title_cancel" class="action_icon hidden" src="assets/close.svg" onclick="header_title.cancel()">';
+                $buttons_header_description = '<img id="header_description_open" class="action_icon" src="assets/edit.svg" onclick="header_description.open()">
+                    <img id="header_description_submit" class="action_icon hidden" src="assets/save.svg" onclick="header_description.submit()">
+                    <img id="header_description_cancel" class="action_icon hidden" src="assets/close.svg" onclick="header_description.cancel()">';
+
                 //$buttons_social_networks = '<img class="action_icon" src="assets/edit.svg" onclick="editSocialNetworks()">';
                 $buttons_social_networks = '';
             }
             else{
-                $edit_favicon_hidden = 'hidden';
-                $button_favicon = '';
-                $button_header_logo = '';
+                $editing_zone_margin = '0';
+                $buttons_favicon = '';
+                $buttons_background = '';
+                $buttons_header_logo = '';
                 $buttons_header_title = '';
                 $buttons_header_description = '';
                 $buttons_social_networks = '';
diff --git a/src/view/templates/footer.php b/src/view/templates/footer.php
index 33647a6..2bb5a9e 100644
--- a/src/view/templates/footer.php
+++ b/src/view/templates/footer.php
@@ -4,25 +4,34 @@
                 <div class="data">
                     <div class="contact">
                         <div id="footer_name">
-                            <script>let footer_name = new InputText('footer_name');</script>
                             <span id="footer_name_span"><?= htmlspecialchars($name ?? '') ?></span>
                             <input type="text" id="footer_name_input" class="hidden" value="<?= htmlspecialchars($name ?? '') ?>" size="30">
                             <?= $buttons_footer_name ?>
                         </div>
                         <div id="footer_address">
-                            <script>let footer_address = new InputText('footer_address');</script>
                             <span id="footer_address_span"><?= htmlspecialchars($address ?? '') ?></span>
                             <input type="text" id="footer_address_input" class="hidden" value="<?= htmlspecialchars($address ?? '') ?>" size="30">
                             <?= $buttons_footer_address ?>
                         </div>
                         <div id="footer_email">
-                            <script>let footer_email = new InputText('footer_email');</script>
                             <a href="mailto:<?= $email ?>"><span id="footer_email_span"><?= htmlspecialchars($email ?? '') ?></span></a>
                             <input type="text" id="footer_email_input" class="hidden" value="<?= htmlspecialchars($email ?? '') ?>" size="30">
                             <?= $buttons_footer_email ?>
                         </div>
                     </div>
-                    <p class="footer_logo"><img src="<?= $footer_logo ?>" alt="logo"></p>
+                    <div id="footer_logo">
+                        <a href="<?= new URL ?>"><img id="footer_logo_img" src="<?= $footer_logo ?>" alt="logo_alt"></a>
+                        <input type="file" id="footer_logo_input" class="hidden" accept="image/png, image/jpeg, image/gif, image/webp, image/tiff">
+                        <?= $buttons_footer_logo ?>
+                    </div>
+<?php if($_SESSION['admin']){ ?>
+                    <script>
+                        let footer_name = new InputText('footer_name');
+                        let footer_address = new InputText('footer_address');
+                        let footer_email = new InputText('footer_email');
+                        let footer_logo = new InputFile('footer_logo');
+                    </script>
+<?php } ?>
                 </div>
                 <div class="<?= $empty_admin_zone ?>"></div>
                 <div class="<?= $div_admin ?>">
diff --git a/src/view/templates/header.php b/src/view/templates/header.php
index 7977ef3..b63aa84 100644
--- a/src/view/templates/header.php
+++ b/src/view/templates/header.php
@@ -5,15 +5,22 @@
             <div id="nav_zone">
                 <?= $nav ?>
             </div>
-
-            <div class="header-content">
+            <div class="editing_zone">
+                <div id="head_favicon" style="margin: <?= $editing_zone_margin ?>;">
+                    <input type="file" id="head_favicon_input" class="hidden" accept="image/png, image/jpeg, image/gif, image/webp, image/tiff, image/x-icon, image/bmp">
+                    <?= $buttons_favicon ?>
+                </div>
+                <div id="header_background">
+                    <input type="file" id="header_background_input" class="hidden" accept="image/png, image/jpeg, image/gif, image/webp, image/tiff">
+                    <?= $buttons_background ?>
+                </div>
+            </div>
+            <div class="header_content">
                 <div class="header_left_col">
-                    <div id="edit_favicon_zone" class="<?= $edit_favicon_hidden ?>">
-                        <?= $button_favicon ?>
-                    </div>
-                    <div>
-                        <a href="<?= new URL ?>"><img id="header_logo" src="<?= $header_logo ?>" alt="logo_alt"></a>
-                        <?= $button_header_logo ?>
+                    <div id="header_logo">
+                        <a href="<?= new URL ?>"><img id="header_logo_img" src="<?= $header_logo ?>" alt="logo_alt"></a>
+                        <input type="file" id="header_logo_input" class="hidden" accept="image/png, image/jpeg, image/gif, image/webp, image/tiff">
+                        <?= $buttons_header_logo ?>
                     </div>
                 </div>
                 <div class="nav_button">
@@ -21,13 +28,11 @@
                 </div>
                 <div class="site_title">
                     <h1 id="header_title">
-                        <script>let header_title = new InputText('header_title');</script>
                         <a href="<?= new URL ?>"><span id="header_title_span"><?= htmlspecialchars($title ?? '') ?></span></a>
                         <input type="text" id="header_title_input" class="hidden" value="<?= htmlspecialchars($title ?? '') ?>" size="30">
                         <?= $buttons_header_title ?>
                     </h1>
                     <h2 id="header_description">
-                        <script>let header_description = new InputText('header_description');</script>
                         <span id="header_description_span"><?= htmlspecialchars($description ?? '') ?></span>
                         <input type="text" id="header_description_input" class="hidden" value="<?= htmlspecialchars($description ?? '') ?>" size="30">
                         <?= $buttons_header_description ?>
@@ -41,4 +46,13 @@
                     <?= $breadcrumb ?? '' ?>
                 </div>
             </div>
+<?php if($_SESSION['admin']){ ?>
+            <script>
+                let head_favicon = new InputFile('head_favicon');
+                let header_background = new InputFile('header_background');
+                let header_logo = new InputFile('header_logo');
+                let header_title = new InputText('header_title');
+                let header_description = new InputText('header_description');
+            </script>
+<?php } ?>
         </header>
\ No newline at end of file