extraction des données

From f19db76cc3b21785619ffd24bfb34692a3aaa66a Mon Sep 17 00:00:00 2001 From: polo Date: Thu, 24 Feb 2022 02:29:14 +0100 Subject: recursiveIterator --- controller/backup.php | 105 +++--- controller/installation.php | 30 +- index.php | 42 ++- model/Album.php | 17 +- public/accueil.css | 506 ---------------------------- public/css/accueil.css | 506 ++++++++++++++++++++++++++++ public/css/discographie.css | 314 +++++++++++++++++ public/css/donnees_hors_editeur.css | 56 +++ public/css/melaine.css | 107 ++++++ public/css/menu.css | 339 +++++++++++++++++++ public/css/normalize.css | 349 +++++++++++++++++++ public/discographie.css | 314 ----------------- public/donnees_hors_editeur.css | 56 --- public/melaine.css | 107 ------ public/menu.css | 339 ------------------- public/normalize.css | 349 ------------------- view/album.php | 4 +- view/backup.php | 86 +++++ view/discographie.php | 4 +- view/melaine.php | 4 +- view/password.php | 4 +- view/template-formulaires.php | 14 +- view/template.php | 9 +- "\303\240 faire apr\303\250s livraison.txt" | 2 + "\303\240 faire avant livraison.txt" | 11 +- 25 files changed, 1912 insertions(+), 1762 deletions(-) delete mode 100644 public/accueil.css create mode 100644 public/css/accueil.css create mode 100644 public/css/discographie.css create mode 100644 public/css/donnees_hors_editeur.css create mode 100644 public/css/melaine.css create mode 100644 public/css/menu.css create mode 100644 public/css/normalize.css delete mode 100644 public/discographie.css delete mode 100644 public/donnees_hors_editeur.css delete mode 100644 public/melaine.css delete mode 100644 public/menu.css delete mode 100644 public/normalize.css create mode 100644 view/backup.php diff --git a/controller/backup.php b/controller/backup.php index d0060c9..13b68df 100644 --- a/controller/backup.php +++ b/controller/backup.php @@ -1,10 +1,12 @@ - Veuillez prévenir l\'administrateur.
- Vous pouvez aussi récupérer manuellement les fichiers en vous connectant au serveur avec un client FTP, il suffit de récupérer tout le dossier "data".

- Retour au site'); + echo($erreur); die(); } @@ -36,45 +35,65 @@ function extraction($from) // pour pouvoir manipuler le fichier depuis filezilla ou ssh chmod($chemin . $nomFichier, 0666); // écriture 4 chiffres -?> - - - extraction des données - - - -

- Toutes les données du sites ont été rassemblées dans un gros fichier que vous pouvez garder par exemple sur votre ordinateur.
- Vous pourrez l'utiliser plus tard pour restaurer le site dans l'état où il se trouve aujourd'hui. Ceci est utile dans le cas d'un changement d'hébergement ou dans le cas d'un problème affectant le serveur.
- Ce fichier se nomme sauvegarde_site_melaine.zip.

- Cliquez ici pour télécharger

- Retour au site -

- - - - - Restauration des données avec un backup - - - -

- Restauration des données à partir d'une sauvegarde.

- Vous devez avoir créé un fichier nommé sauvegarde_site_melaine.zip
- en cliquant sur Extraire les données.

+ $title = 'Restauration des données'; - -

- -open('data/' . $nomFichier, ZipArchive::CREATE | ZipArchive::OVERWRITE)!==TRUE) + { + exit("Impossible d'ouvrir le fichier " . $nomFichier . ".\n"); + } + + // fichiers à la racine + $Zip->addGlob('*.php', 0, array('')); + $Zip->addGlob('.htaccess', 0, array('')); + $Zip->addGlob('*.txt', 0, array('')); + + // tous les dossiers sauf data et .git + $listeDossiers = array('model', 'view', 'controller', 'public', 'lib'); + foreach($listeDossiers as $path) + { + // les deux lignes suivantes me dépassent un peu, + // mais ça marche et c'est comme ça qu'il faut faire + $directory = new RecursiveDirectoryIterator($path); + $iterator = new RecursiveIteratorIterator($directory); + + foreach ($iterator as $info) + { + // chemins inutiles . et .. + if($info->getFilename() != "." && $info->getFilename() != "..") + { + //var_dump($info->getPathname()); + $Zip->addGlob($info->getPathname(), 0, array('')); + } + } + } + + $Zip->close(); + + chmod('data/' . $nomFichier, 0644); // écriture 4 chiffres (octal) } \ No newline at end of file diff --git a/controller/installation.php b/controller/installation.php index 9d612dd..6037e17 100644 --- a/controller/installation.php +++ b/controller/installation.php @@ -45,11 +45,28 @@ function installation() // créer les dossiers (fait également à l'extraction du zip de données) // attention: ne fonctionne pas sans une manipulation préalable - // - modifier soit-même les droits du dossier data (777), quoique 111 serait pas mal non plus + // - modifier soit-même les droits du dossier data pour 777 // - modifier ceux du dossier parent (nom du site) avec son client FTP à la mise en ligne chez l'hébergeur et ensuite remettre tout comme avant - // le 0 devant signifie que le nombre est en octal - $droitsDossiers = 0777; // mettre 0700 à la fin + // création des dossiers + + // valeur en octal + $droitsDossiers = 0777; // mettre 0755 en production + + if(!file_exists('data') && !mkdir('data')) + { + $erreur = 'data'; + $title = 'Dossier data absent'; + require('view/backup.php'); + exit(); + } + if(!touch('data')) + { + $erreur = 'data'; + $title = 'Écriture non autorisée dans le dossier data'; + require('view/backup.php'); + exit(); + } $listePages = array('melaine', 'discographie', 'concerts', 'presse', 'ateliers', 'liens', 'peinture', 'archives'); foreach ($listePages as $page) @@ -93,6 +110,13 @@ function installation() chmod('data/password.txt', 0600); } + // créer le melainePHP.zip + if(!file_exists("data/melainePHP.zip")) + { + require('controller/backup.php'); + creerMelainePHP(); + } + // le modèle donnera les droits 0666 (octal) aux nouveaux fichiers à l'intérieur des dossiers // création d'un mot de passe si password.txt est vide diff --git a/index.php b/index.php index 0b2a950..73bfb66 100644 --- a/index.php +++ b/index.php @@ -12,7 +12,7 @@ if(!empty($_SESSION['erreur'])) unset($_SESSION['erreur']); } -// à modifier par l'utilisateur +// fichier destiné à l'utilisateur require('config.php'); // au premier démarrage du site @@ -208,7 +208,8 @@ if(isset($_GET['page'])) } -// actions en mode admin, recharger une des pages principales +// actions en mode admin depuis le menu orange +// recharger une des pages principales elseif($_SESSION['admin'] == 1 && isset($_GET['action'])) { if($_GET['action'] == 'modif_mdp') @@ -216,24 +217,33 @@ elseif($_SESSION['admin'] == 1 && isset($_GET['action'])) //changePassword($secret); changePassword(); } - // extraction du contenu du dossier data - else if($_GET['action'] == 'extraction') - { - require('controller/backup.php'); - extraction($_GET['from']); - } - // l'inverse, insertion des données d'une sauvegarde - else if($_GET['action'] == 'insertion') - { - require('controller/backup.php'); - insertion($_GET['from']); - } else { - accueil(); + require_once('controller/backup.php'); + + // extraction du contenu du dossier data + if($_GET['action'] == 'sauvegarde') + { + sauvegarder($_GET['from']); + } + // insertion des données d'une sauvegarde + elseif($_GET['action'] == 'restauration') + { + restaurer($_GET['from']); + } + // tout sauf le dossier data + /*elseif($_GET['action'] == 'extrairePHP') + { + extrairePHP($_GET['from']); + }*/ + else + { + accueil(); + } } } +// à supprimer, on utilisera plutôt une variable de session // renvoi ici par le .htaccess si lien mort ou sans http:// au début elseif(isset($_GET['erreur'])) { @@ -253,4 +263,4 @@ elseif(isset($_GET['erreur'])) else { accueil(); -} +} \ No newline at end of file diff --git a/model/Album.php b/model/Album.php index 5e93d05..9c90a6b 100644 --- a/model/Album.php +++ b/model/Album.php @@ -7,11 +7,13 @@ class Album extends Article public function __construct($page) { - $this->page = $page; - $this->fileCode = ''; // désigne un fichier json et un html + // pour: page, fileCode, time et makeFileList() + parent::__construct($page); + //$this->page = $page; + //$this->fileCode = ''; // désigne un fichier json et un html $this->format = 'json'; // vaut 'html' dans la classe mère - $this->time = time(); - $this->makeFileList(); + //$this->time = time(); + //$this->makeFileList(); } // GET @@ -58,10 +60,14 @@ class Album extends Article } // read + + // hydratation public function readAll() { // mettre le JSON dans fileList[$i]['content'] - parent::readAll(); + parent::readAll(); + // = surcharge, appeler la méthode de la classe mère + // permet de ne pas la remplacer par la nouvelle $this->format = 'html'; for($i = 0; $i < $this->fileListCount; $i++) @@ -92,6 +98,7 @@ class Album extends Article $this->format = 'json'; } + // hydratation public function readOne() { for($i = 0; $i < $this->fileListCount; $i++) diff --git a/public/accueil.css b/public/accueil.css deleted file mode 100644 index f951334..0000000 --- a/public/accueil.css +++ /dev/null @@ -1,506 +0,0 @@ -/* public/accueil.css */ - -@font-face /* pour .police_titre */ -{ - font-family: "you_are_loved"; - src: url('fonts/you_are_loved.ttf') format('truetype'), - url('fonts/you_are_loved.eot'), - url('fonts/you_are_loved.eot?#iefix') format('embedded-opentype'), - url('fonts/you_are_loved.woff2') format('woff2'), - url('fonts/you_are_loved.woff') format('woff'); -} - -.no_underline -{ - text-decoration: none; -} - -body -{ - margin: 0px; - background-color: #326892; -} - -#bloc_page -{ - max-width: 700px; - margin: auto; - background-color: #FFFFFF; - font-family: Sans-serif; - font-size: 100%; -} - -nav -{ - position: fixed; - z-index: 2; - background-color: white; -} - -/* agir sur ul et li directement affecte le ckeditor */ -#ul_menu -{ - margin: 0px; - padding: 5px; - display: flex; - flex-wrap: wrap; - justify-content: center; -} - -#ul_menu li -{ - list-style-type: none; - white-space: nowrap; -} - -li a -{ - text-decoration: none; - color: #666; -} - -a:hover:not(.police_titre) /* :not() = sauf */ -{ - color: #000000; -} - -#actuelle -{ - color: #463c3c; - font-weight: bold; -} - -img -{ - vertical-align: bottom; -} - -.boutonSubmitEditeur -{ - margin-top: 5px; -} - -.boutonAnnuler:hover -{ - /*text-decoration: none;*/ - border: none; -} - -h3 -{ - margin: 5px; -} -.conteneur_article -{ - margin: 3px; -} - -.articleAvecEditeur -{ - background-color: #a8b3d9; - padding: 2px 0px; -} - -form -{ - padding-bottom: 14px; - border-bottom: 1px black solid; -} - -#courriel -{ - padding-top: 30px; - font-size: 85%; -} - -#courriel * -{ - max-width: 220px; - color: black; - text-decoration: none; -} - -#courriel a:hover -{ - /*border: 1px blue solid;*/ - padding: 5px; -} - -#courrielJS -{ - display: inline; - margin: 2px; -} - -.zoneVideAdmin -{ - padding-top: 20px; -} - -#modeAdmin -{ - background-color: orange; - position: fixed; - bottom: 0px; - width: 700px; - z-index: 2; - padding-top: 5px; - text-align: center; -} - -#modeAdmin p -{ - text-align: center; - margin: 0px; - padding: 2px; -} -#modeAdmin>div p -{ - /*border: 1px black solid;*/ - margin: 5px; - padding: 0px; -} -#modeAdmin>p a -{ - padding: 2px; -} - -#modeAdmin div -{ - display: flex; - justify-content: space-around; - - margin: 0px; - font-size: 85%; -} - -#lienModeAdmin -{ - margin: 0px 20px; - padding-bottom: 20px; -} - -#lienModeAdmin p -{ - text-align: right; -} - -#lienModeAdmin p a -{ - color: #666; - font-weight: bold; - padding: 2px; -} - -#lienModeAdmin p a:hover -{ - color: black; -} - -.connexionTitre -{ - margin-top: 0px; - text-align: center; -} -.avertissement -{ - color: red; - font-size: 90%; - text-align: center; -} - -.connexionFormulaire -{ - margin: 30px; -} - -.connexionFooter -{ - text-align: right; - padding: 5px; -} - -.connexionFooter a -{ - color: #666; -} - - -/* PC, y compris vieux écrans 800x600 */ -@media screen and (min-width: 700px) -{ - .police_titre - { - - font-family: you_are_loved, Arial, sans; - font-size: 250%; - color: #ddc97a; - position: relative; - top: 30px; - left: 40px; - } - - /* compensation des cibles de liens # superposées au "nav" hors flux */ - :target - { - padding-top: 70px; - margin-top: -70px; - } - - nav - { - border-bottom: 1px black solid; - margin: 0px 35px; - max-width: 630px; - } - - li - { - margin: 6px 15px; - } - - header - { - margin: 0px 35px; - padding-top: 92px; - } - - #bienvenue - { - background-image: url("accueil/bienvenue.png"); - width: 630px; - height: 596px; - } - - #contenu, footer - { - width: 630px; - margin: auto; - } - - #courriel - { - margin: 0px 35px; - } - - .zoneVideAdmin, #modeAdmin - { - height: 70px; - } -} - -/* "tablettes" et vieux écrans 640x480 */ -@media screen and (max-width: 699px) -{ - #bloc_page - { - max-width: 540px; - font-size: 90%; - } - - .police_titre - { - - font-family: you_are_loved, Arial, sans; - font-size: 200%; - color: #ddc97a; - - position: relative; - top: 20px; - left: 30px; - } - - #bienvenue .police_titre - { - font-size: 250%; - top: 0px; - left: 65px; - } - - :target - { - padding-top: 59px; - margin-top: -59px; - } - - nav - { - margin: 0px 30px; - max-width: 480px; - } - - li - { - margin: 4px 10px; - } - - header - { - padding-top: 61px; - } - - #bienvenue - { - background-image: url("accueil/bienvenue_petit.png"); - width: 480px; - height: 463px; - margin: auto; - } - - #contenu, footer - { - width: 480px; - margin: auto; - } - - #courriel - { - margin: 0px 30px; - } - - .zoneVideAdmin, #modeAdmin - { - height: 75px; - } - - #modeAdmin - { - max-width: 540px; - } -} - - /* on grignote les colonnes autour du texte */ -@media screen and (max-width: 539px) -{ - #modeAdmin div - { - max-width: 480px; - margin: 0px; - border: none; - } - #modeAdmin - { - font-size: 90%; - } - .zoneVideAdmin, #modeAdmin - { - height: 70px; - } -} - -@media screen and (max-width: 479px) -{ - #bloc_page - { - max-width: 380px; - font-size: 85%; - } - - .police_titre - { - - font-family: you_are_loved, Arial, sans; - font-size: 150%; - color: #ddc97a; - - position: relative; - top: 13px; - left: 18px; - } - - #bienvenue .police_titre - { - font-size: 200%; - top: 0px; - left: 25px; - } - - :target - { - padding-top: 56px; - margin-top: -56px; - } - - nav - { - margin: 0px 30px; - max-width: 320px; - } - - li - { - margin: 0px 10px; - } - - header - { - padding-top: 60px; - } - - #bienvenue - { - background-image: url("accueil/bienvenue_mini.png"); - width: 320px; - height: 316px; - } - - #contenu, footer - { - width: 320px; - margin: auto; - } - - #courriel - { - margin: 0px 20px; - } - - #courriel * - { - max-width: 180px; - } - - .zoneVideAdmin, #modeAdmin - { - height: 65px; - } - - #modeAdmin - { - max-width: 380px; - } - - #modeAdmin div - { - /*margin: 5px;*/ - } -} - -/* spécialement pour les petits smartphones*/ -@media screen and (max-width: 379px) -{ - .zoneVideAdmin, #modeAdmin - { - height: 80px; - } - - #modeAdmin - { - font-size: 95%; - padding: 0px; - } - #modeAdmin>p - { - font-size: 90%; - margin: 3px; - } - - #modeAdmin div - { - max-width: 320px; - } - #modeAdmin>div p - { - margin: 0px 5px; - } -} diff --git a/public/css/accueil.css b/public/css/accueil.css new file mode 100644 index 0000000..622ce1f --- /dev/null +++ b/public/css/accueil.css @@ -0,0 +1,506 @@ +/* public/accueil.css */ + +@font-face /* pour .police_titre */ +{ + font-family: "you_are_loved"; + src: url('../fonts/you_are_loved.ttf') format('truetype'), + url('../fonts/you_are_loved.eot'), + url('../fonts/you_are_loved.eot?#iefix') format('embedded-opentype'), + url('../fonts/you_are_loved.woff2') format('woff2'), + url('../fonts/you_are_loved.woff') format('woff'); +} + +.no_underline +{ + text-decoration: none; +} + +body +{ + margin: 0px; + background-color: #326892; +} + +#bloc_page +{ + max-width: 700px; + margin: auto; + background-color: #FFFFFF; + font-family: Sans-serif; + font-size: 100%; +} + +nav +{ + position: fixed; + z-index: 2; + background-color: white; +} + +/* agir sur ul et li directement affecte le ckeditor */ +#ul_menu +{ + margin: 0px; + padding: 5px; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +#ul_menu li +{ + list-style-type: none; + white-space: nowrap; +} + +li a +{ + text-decoration: none; + color: #666; +} + +a:hover:not(.police_titre) /* :not() = sauf */ +{ + color: #000000; +} + +#actuelle +{ + color: #463c3c; + font-weight: bold; +} + +img +{ + vertical-align: bottom; +} + +.boutonSubmitEditeur +{ + margin-top: 5px; +} + +.boutonAnnuler:hover +{ + /*text-decoration: none;*/ + border: none; +} + +h3 +{ + margin: 5px; +} +.conteneur_article +{ + margin: 3px; +} + +.articleAvecEditeur +{ + background-color: #a8b3d9; + padding: 2px 0px; +} + +form +{ + padding-bottom: 14px; + border-bottom: 1px black solid; +} + +#courriel +{ + padding-top: 30px; + font-size: 85%; +} + +#courriel * +{ + max-width: 220px; + color: black; + text-decoration: none; +} + +#courriel a:hover +{ + /*border: 1px blue solid;*/ + padding: 5px; +} + +#courrielJS +{ + display: inline; + margin: 2px; +} + +.zoneVideAdmin +{ + padding-top: 20px; +} + +#modeAdmin +{ + background-color: orange; + position: fixed; + bottom: 0px; + width: 700px; + z-index: 2; + padding-top: 5px; + text-align: center; +} + +#modeAdmin p +{ + text-align: center; + margin: 0px; + padding: 2px; +} +#modeAdmin>div p +{ + /*border: 1px black solid;*/ + margin: 5px; + padding: 0px; +} +#modeAdmin>p a +{ + padding: 2px; +} + +#modeAdmin div +{ + display: flex; + justify-content: space-around; + + margin: 0px; + font-size: 85%; +} + +#lienModeAdmin +{ + margin: 0px 20px; + padding-bottom: 20px; +} + +#lienModeAdmin p +{ + text-align: right; +} + +#lienModeAdmin p a +{ + color: #666; + font-weight: bold; + padding: 2px; +} + +#lienModeAdmin p a:hover +{ + color: black; +} + +.connexionTitre +{ + margin-top: 0px; + text-align: center; +} +.avertissement +{ + color: red; + font-size: 90%; + text-align: center; +} + +.connexionFormulaire +{ + margin: 30px; +} + +.connexionFooter +{ + text-align: right; + padding: 5px; +} + +.connexionFooter a +{ + color: #666; +} + + +/* PC, y compris vieux écrans 800x600 */ +@media screen and (min-width: 700px) +{ + .police_titre + { + + font-family: you_are_loved, Arial, sans; + font-size: 250%; + color: #ddc97a; + position: relative; + top: 30px; + left: 40px; + } + + /* compensation des cibles de liens # superposées au "nav" hors flux */ + :target + { + padding-top: 70px; + margin-top: -70px; + } + + nav + { + border-bottom: 1px black solid; + margin: 0px 35px; + max-width: 630px; + } + + li + { + margin: 6px 15px; + } + + header + { + margin: 0px 35px; + padding-top: 92px; + } + + #bienvenue + { + background-image: url("accueil/bienvenue.png"); + width: 630px; + height: 596px; + } + + #contenu, footer + { + width: 630px; + margin: auto; + } + + #courriel + { + margin: 0px 35px; + } + + .zoneVideAdmin, #modeAdmin + { + height: 70px; + } +} + +/* "tablettes" et vieux écrans 640x480 */ +@media screen and (max-width: 699px) +{ + #bloc_page + { + max-width: 540px; + font-size: 90%; + } + + .police_titre + { + + font-family: you_are_loved, Arial, sans; + font-size: 200%; + color: #ddc97a; + + position: relative; + top: 20px; + left: 30px; + } + + #bienvenue .police_titre + { + font-size: 250%; + top: 0px; + left: 65px; + } + + :target + { + padding-top: 59px; + margin-top: -59px; + } + + nav + { + margin: 0px 30px; + max-width: 480px; + } + + li + { + margin: 4px 10px; + } + + header + { + padding-top: 61px; + } + + #bienvenue + { + background-image: url("accueil/bienvenue_petit.png"); + width: 480px; + height: 463px; + margin: auto; + } + + #contenu, footer + { + width: 480px; + margin: auto; + } + + #courriel + { + margin: 0px 30px; + } + + .zoneVideAdmin, #modeAdmin + { + height: 75px; + } + + #modeAdmin + { + max-width: 540px; + } +} + + /* on grignote les colonnes autour du texte */ +@media screen and (max-width: 539px) +{ + #modeAdmin div + { + max-width: 480px; + margin: 0px; + border: none; + } + #modeAdmin + { + font-size: 90%; + } + .zoneVideAdmin, #modeAdmin + { + height: 70px; + } +} + +@media screen and (max-width: 479px) +{ + #bloc_page + { + max-width: 380px; + font-size: 85%; + } + + .police_titre + { + + font-family: you_are_loved, Arial, sans; + font-size: 150%; + color: #ddc97a; + + position: relative; + top: 13px; + left: 18px; + } + + #bienvenue .police_titre + { + font-size: 200%; + top: 0px; + left: 25px; + } + + :target + { + padding-top: 56px; + margin-top: -56px; + } + + nav + { + margin: 0px 30px; + max-width: 320px; + } + + li + { + margin: 0px 10px; + } + + header + { + padding-top: 60px; + } + + #bienvenue + { + background-image: url("accueil/bienvenue_mini.png"); + width: 320px; + height: 316px; + } + + #contenu, footer + { + width: 320px; + margin: auto; + } + + #courriel + { + margin: 0px 20px; + } + + #courriel * + { + max-width: 180px; + } + + .zoneVideAdmin, #modeAdmin + { + height: 65px; + } + + #modeAdmin + { + max-width: 380px; + } + + #modeAdmin div + { + /*margin: 5px;*/ + } +} + +/* spécialement pour les petits smartphones*/ +@media screen and (max-width: 379px) +{ + .zoneVideAdmin, #modeAdmin + { + height: 80px; + } + + #modeAdmin + { + font-size: 95%; + padding: 0px; + } + #modeAdmin>p + { + font-size: 90%; + margin: 3px; + } + + #modeAdmin div + { + max-width: 320px; + } + #modeAdmin>div p + { + margin: 0px 5px; + } +} diff --git a/public/css/discographie.css b/public/css/discographie.css new file mode 100644 index 0000000..8ed3700 --- /dev/null +++ b/public/css/discographie.css @@ -0,0 +1,314 @@ +/* public/discographie.css */ + +.police_titre +{ + color: #c9a068; +} + +aside +{ + display: flex; + flex-direction: column; + align-items: flex-end; + font-size: 80%; + font-family: 'Monospace'; + /*margin-right: 10px;*/ + /*position: absolute;*/ + position: relative; + bottom: 30px; +} + +aside div +{ + position: absolute; +} + +#bouton_chronologie +{ + width: 200px; + text-align: center; + font-size: large; + font-weight: bold; + /*text-decoration: underline;*/ + /*border: 1px red solid;*/ + margin: 0px; + /*position: relative; + bottom: 45px;*/ +} + +#chronologie +{ + width: 200px; + font-weight: bold; + /*padding: 5px;*/ + display: none; + z-index: 1; /* placer le menu déroulant au dessus */ + /*background-color: #9fa8d0;*/ + background-color: #a4afd4; + border: 2px #3d4c9d solid; +} + +#chronologie p +{ + margin: 8px; +} + +#chronologie p a:visited +{ + color: blue; +} +#chronologie p a:hover +{ + color: black; +} + +.linkChrono +{ + text-decoration: none; +} +.linkChrono:hover +{ + text-decoration: underline; +} +.noLinkChrono +{ + text-decoration: none; + color: black; +} + +/* PC uniquement, pour les smartphones prévoir un clic +=> :checked et une checkbox +=> ou la balise select qui crée un menu déroulant */ +aside:hover #chronologie +{ + display: block; +} + +section +{ + /*border: 1px red solid;*/ +} +.flexArticles +{ + /*display: flex;*/ +} + +h3 +{ + /*margin-top: 45px;*/ +} + +form p +{ + margin: 0px; +} + +input +{ + margin: 2px 0; +} + +.boutonAlbum +{ + margin-top: 45px; + padding-bottom: 20px; + border-bottom: 1px black solid; +} +.boutonAlbum a +{ + padding: 2px; + border: 4px black groove; +} + +#articles +{ + display: flex; + justify-content: space-around; + flex-wrap: wrap; + align-items: flex-end; +} + +article +{ + margin: 5px 0px; + width: 32%; + /*min-width: 300px;*/ +} +.articleAvecEditeur +{ + width: 100%; +} + +.vignette +{ + width: 100%; +} + +figure +{ + margin: 0px; + /*display: inline-block;*/ +} + +figcaption +{ + margin: 2px; + color: #666; + font-size: small; + font-weight: bold; + text-align: center; +} + +a +{ + display: inline-block; + /*border: 2px white solid;*/ +} + +.articleSansEditeur a +{ + border: 2px white solid; +} +.articleSansEditeur a:hover +{ + border: 2px blue solid; +} + +a:hover figure figcaption +{ + text-decoration: underline; +} + +.articleSansEditeur p +{ + /*border: 1px black solid;*/ + text-align: center; + margin-top: 0px; +} + +.articleSansEditeur img +{ + vertical-align: middle; +} + +/* image dans le formulaire */ +.imageFormulaire +{ + float: right; + max-width: 25%; +} + +/* page dédiée à un album */ +#albumHTML +{ + width: 100%; +} +.linkAlbumHTML +{ + color: blue; +} + + +@media screen and (min-width: 700px) +{ + #titre + { + width: 630px; + height: 171px; + background-image: url("../mouette.png"); + } + + #contenu + { + /*position: relative;*/ + /*bottom: 35px;*/ + } + + #albumHTML + { + /* annuler le positionnement du contenu */ + margin-top: 55px; + } +} + +@media screen and (max-width: 699px) +{ + #titre + { + width: 480px; + height: 131px; + background-image: url("../mouette_petit.png"); + margin: auto; + } + + #contenu + { + /*position: relative; + bottom: 24px;*/ + } + + #albumHTML + { + /* annuler le positionnement du contenu */ + margin-top: 42px; + } + article + { + width: 40%; + } +} + +@media screen and (max-width: 479px) +{ + #titre + { + width: 320px; + height: 88px; + background-image: url("../mouette_mini.png"); + margin: auto; + } + + #multicolonnes + { + flex-direction: column; + } + + aside + { + width: 320px; + } + + #bouton_chronologie + { + width: 130px; + font-size: initial; /* 150% est plus petit que "normal" */ + padding-top: 5px; + } + + #chronologie + { + /*display: flex;*/ + } + + #chronologie p + { + /*max-width: 80px;*/ + margin: 5px; + } + + #contenu + { + /*position: relative;*/ + /* bottom: 15px;*/ + } + + #albumHTML + { + /* annuler le positionnement du contenu */ + margin-top: 32px; + } + article + { + width: 48%; + } +} diff --git a/public/css/donnees_hors_editeur.css b/public/css/donnees_hors_editeur.css new file mode 100644 index 0000000..7b377ea --- /dev/null +++ b/public/css/donnees_hors_editeur.css @@ -0,0 +1,56 @@ +/*img{vertical-align: bottom;}*/ + +.text-tiny{font-size: x-small;} +.text-small{font-size: small;} +.text-big{font-size: large;} +.text-huge{font-size: x-large;} + +blockquote{border-left: 5px #cccccc solid; margin: 14px 0px; padding: 2px 25px; font-style: italic;} + +.marker-yellow{background-color: #fdfd77;} +.marker-green{background-color: #62f962;} +.marker-pink{background-color: #fc7899;} +.marker-blue{background-color: #72ccfd;} +.pen-red{background-color: white; color: red;} +.pen-green{background-color: white; color: green;} + +ul{padding-left: 10px;} +.todo-list>li{list-style-type : none;} +input[type=checkbox]{-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none; + height: 16px; width: 16px; border: 1px solid black; border-radius: 2px; position: relative; top: 5px; margin-right: 10px;} +input[type="checkbox"]:checked{border: none; background: #26ab33;} + +.table>table{border-collapse: collapse;} +.table td{border: 1px grey solid; padding: 7px; min-width: 30px;} +td p{margin: 0px;} + +.image{margin: 0px;text-align: center;margin: auto;height: 100%;} +.image img{width: 100%;} +.image-style-side{float: right;} +.image-style-side:not(.image_resized){max-width: 50%;} +.image>figcaption{padding: 7px; text-align: center; font-size: small; background-color: #f0f0f0;} + +.boutonArticle{clear: both; padding: 20px 0px;} +article:after{content: ""; display: block; clear: both;} + +iframe{min-width: 400px; min-height: 300px; max-width: 1200px; max-height: 900px;} + +/*@media screen and (max-width: 1000px) +{ + img{max-width: 900px;} +}*/ + +@media screen and (min-width: 700px) +{ + .image{/*max-width: 630px;*/width: auto;} +} + +@media screen and (max-width: 699px) +{ + .image{max-width: 480px;} +} + +@media screen and (max-width: 479px) +{ + .image{max-width: 320px;} +} \ No newline at end of file diff --git a/public/css/melaine.css b/public/css/melaine.css new file mode 100644 index 0000000..429ccec --- /dev/null +++ b/public/css/melaine.css @@ -0,0 +1,107 @@ +/* public/melaine.css */ + +.police_titre +{ + color: #e9d4be; +} + +td +{ + vertical-align: top; +} + +pre +{ + font-family: 'Arial', 'sans'; + white-space: pre-wrap; +} + +figure +{ + /*margin: 5px;*/ +} +.boutonArticle +{ + border-bottom: 3px black double; +} +.boutonArticle a +{ + padding: 2px; + border: 4px black groove; +} + +@media screen and (min-width: 700px) +{ + #titre + { + width: 630px; + height: 171px; + background-image: url("../mouette.png"); + } + + #photo + { + width: 630px; + height: 230px; + background-image: url("../melaine/photo.png"); + position: relative; + bottom: 30px; + } + + /*img + { + max-width: 630px; + }*/ +} + +@media screen and (max-width: 699px) +{ + #titre + { + width: 480px; + height: 131px; + background-image: url("../mouette_petit.png"); + margin: auto; + } + + #photo + { + width: 480px; + height: 191px; + background-image: url("../melaine/photo_petit.png"); + margin: auto; + position: relative; + bottom: 24px; + } + + /*img + { + max-width: 480px; + }*/ +} + +@media screen and (max-width: 479px) +{ + #titre + { + width: 320px; + height: 88px; + background-image: url("../mouette_mini.png"); + margin: auto; + } + + #photo + { + width: 320px; + height: 127px; + background-image: url("../melaine/photo_mini.png"); + margin: auto; + position: relative; + bottom: 17px; + } + + /*img + { + max-width: 320px; + }*/ +} diff --git a/public/css/menu.css b/public/css/menu.css new file mode 100644 index 0000000..0e17e34 --- /dev/null +++ b/public/css/menu.css @@ -0,0 +1,339 @@ +/* public/menu.css */ + +.police_titre +{ + color: #e8c5c0; +} + +#contenu +{ + display: flex; + justify-content: space-between; +} + +#colonne1 +{ + display: flex; + flex-wrap: wrap; + flex-direction: column-reverse; +} + +#colonne2 +{ + display: flex; + flex-wrap: wrap; + align-items: flex-end; + flex-direction: column; +} + +#pommes +{ + position: relative; + left: 3px; +} + +#mon_blog +{ + margin: 0px 35px; +} + + +@media screen and (min-width: 700px) +{ + #titre + { + width: 630px; + height: 171px; + background-image: url("mouette.png"); + } + + #contenu + { + position: relative; + bottom: 15px; + } + + #colonne1, #colonne2 + { + height: 588px; + } + + /* pour IE, + indique la bonne taille du bloc pour que la colonne 2 se place correctement */ + #colonne1 + { + min-width: 310px; + } + + #pochette + { + background-image: url("menu/pochette.png"); + width: 308px; + height: 271px; + } + + #fille_qui_tombe + { + background-image: url("menu/fille_qui_tombe.jpg"); + width: 208px; + height: 163px; + margin: 5px 0px; + } + + #canoe + { + background-image: url("menu/canoe.png"); + width: 207px; + height: 144px; + } + + #cavalier + { + background-image: url("menu/cavalier.jpg"); + width: 159px; + height: 312px; + position: relative; + right: 97px; + } + + #pommes + { + background-image: url("menu/pommes.jpg"); + width: 59px; + height: 97px; + position: relative; + bottom: 3px; + } + + #sirene + { + background-image: url("menu/sirene.jpg"); + width: 320px; + height: 174px; + } + + #mouette_ocean + { + background-image: url("menu/mouette_ocean.jpg"); + width: 257px; + height: 171px; + margin: 5px 0px; + } + + #blonde + { + background-image: url("menu/blonde.jpg"); + width: 257px; + height: 233px; + } + + #hey_ho + { + width: 69px; + height: 154px; + position: relative; + right: 401px; + top: 107px; + } +} + +@media screen and (max-width: 699px) +{ + #titre + { + width: 480px; + height: 131px; + background-image: url("mouette_petit.png"); + margin: auto; + } + + #contenu + { + position: relative; + bottom: 12px; + } + + #colonne1, #colonne2 + { + height: 447px; + } + + /* pour IE, + indique la bonne taille du bloc pour que la colonne 2 se place correctement */ + #colonne1 + { + min-width: 237px; + } + + #pochette + { + background-image: url("menu/pochette_petit.png"); + width: 234px; + height: 206px; + } + + #fille_qui_tombe + { + background-image: url("menu/fille_qui_tombe_petit.jpg"); + width: 158px; + height: 124px; + margin: 4px 0px; + } + + #canoe + { + background-image: url("menu/canoe_petit.png"); + width: 157px; + height: 109px; + } + + #cavalier + { + background-image: url("menu/cavalier_petit.jpg"); + width: 121px; + height: 237px; + position: relative; + right: 73px; + } + + #pommes + { + background-image: url("menu/pommes_petit.jpg"); + width: 45px; + height: 74px; + position: relative; + bottom: 2px; + } + + #sirene + { + background-image: url("menu/sirene_petit.jpg"); + width: 243px; + height: 132px; + } + + #mouette_ocean + { + background-image: url("menu/mouette_ocean_petit.jpg"); + width: 195px; + height: 130px; + margin: 4px 0px; + } + + #blonde + { + background-image: url("menu/blonde_petit.jpg"); + width: 195px; + height: 177px; + } + + #hey_ho + { + width: 53px; + height: 117px; + position: relative; + right: 306px; + top: 82px; + } +} + +@media screen and (max-width: 479px) +{ + #titre + { + width: 320px; + height: 88px; + background-image: url("mouette_mini.png"); + margin: auto; + } + + #contenu + { + position: relative; + bottom: 8px; + } + + #colonne1, #colonne2 + { + height: 298px; + } + + /* pour IE, + indique la bonne taille du bloc pour que la colonne 2 se place correctement */ + #colonne1 + { + min-width: 158px; + } + + #pochette + { + background-image: url("menu/pochette_mini.png"); + width: 156px; + height: 137px; + } + + #fille_qui_tombe + { + background-image: url("menu/fille_qui_tombe_mini.jpg"); + width: 105px; + height: 82px; + margin: 3px 0px; + } + + #canoe + { + background-image: url("menu/canoe_mini.png"); + width: 105px; + height: 73px; + } + + #cavalier + { + background-image: url("menu/cavalier_mini.jpg"); + width: 80px; + height: 158px; + position: relative; + right: 48px; + } + + #pommes + { + background-image: url("menu/pommes_mini.jpg"); + width: 30px; + height: 49px; + position: relative; + bottom: 2px; + left: 2px; + } + + #sirene + { + background-image: url("menu/sirene_mini.jpg"); + width: 162px; + height: 88px; + } + + #mouette_ocean + { + background-image: url("menu/mouette_ocean_mini.jpg"); + width: 130px; + height: 86px; + margin: 3px 0px; + } + + #blonde + { + background-image: url("menu/blonde_mini.jpg"); + width: 130px; + height: 118px; + } + + #hey_ho + { + width: 36px; + height: 77px; + position: relative; + right: 204px; + top: 56px; + } +} diff --git a/public/css/normalize.css b/public/css/normalize.css new file mode 100644 index 0000000..784422c --- /dev/null +++ b/public/css/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/public/discographie.css b/public/discographie.css deleted file mode 100644 index 65ae2c3..0000000 --- a/public/discographie.css +++ /dev/null @@ -1,314 +0,0 @@ -/* public/discographie.css */ - -.police_titre -{ - color: #c9a068; -} - -aside -{ - display: flex; - flex-direction: column; - align-items: flex-end; - font-size: 80%; - font-family: 'Monospace'; - /*margin-right: 10px;*/ - /*position: absolute;*/ - position: relative; - bottom: 30px; -} - -aside div -{ - position: absolute; -} - -#bouton_chronologie -{ - width: 200px; - text-align: center; - font-size: large; - font-weight: bold; - /*text-decoration: underline;*/ - /*border: 1px red solid;*/ - margin: 0px; - /*position: relative; - bottom: 45px;*/ -} - -#chronologie -{ - width: 200px; - font-weight: bold; - /*padding: 5px;*/ - display: none; - z-index: 1; /* placer le menu déroulant au dessus */ - /*background-color: #9fa8d0;*/ - background-color: #a4afd4; - border: 2px #3d4c9d solid; -} - -#chronologie p -{ - margin: 8px; -} - -#chronologie p a:visited -{ - color: blue; -} -#chronologie p a:hover -{ - color: black; -} - -.linkChrono -{ - text-decoration: none; -} -.linkChrono:hover -{ - text-decoration: underline; -} -.noLinkChrono -{ - text-decoration: none; - color: black; -} - -/* PC uniquement, pour les smartphones prévoir un clic -=> :checked et une checkbox -=> ou la balise select qui crée un menu déroulant */ -aside:hover #chronologie -{ - display: block; -} - -section -{ - /*border: 1px red solid;*/ -} -.flexArticles -{ - /*display: flex;*/ -} - -h3 -{ - /*margin-top: 45px;*/ -} - -form p -{ - margin: 0px; -} - -input -{ - margin: 2px 0; -} - -.boutonAlbum -{ - margin-top: 45px; - padding-bottom: 20px; - border-bottom: 1px black solid; -} -.boutonAlbum a -{ - padding: 2px; - border: 4px black groove; -} - -#articles -{ - display: flex; - justify-content: space-around; - flex-wrap: wrap; - align-items: flex-end; -} - -article -{ - margin: 5px 0px; - width: 32%; - /*min-width: 300px;*/ -} -.articleAvecEditeur -{ - width: 100%; -} - -.vignette -{ - width: 100%; -} - -figure -{ - margin: 0px; - /*display: inline-block;*/ -} - -figcaption -{ - margin: 2px; - color: #666; - font-size: small; - font-weight: bold; - text-align: center; -} - -a -{ - display: inline-block; - /*border: 2px white solid;*/ -} - -.articleSansEditeur a -{ - border: 2px white solid; -} -.articleSansEditeur a:hover -{ - border: 2px blue solid; -} - -a:hover figure figcaption -{ - text-decoration: underline; -} - -.articleSansEditeur p -{ - /*border: 1px black solid;*/ - text-align: center; - margin-top: 0px; -} - -.articleSansEditeur img -{ - vertical-align: middle; -} - -/* image dans le formulaire */ -.imageFormulaire -{ - float: right; - max-width: 25%; -} - -/* page dédiée à un album */ -#albumHTML -{ - width: 100%; -} -.linkAlbumHTML -{ - color: blue; -} - - -@media screen and (min-width: 700px) -{ - #titre - { - width: 630px; - height: 171px; - background-image: url("mouette.png"); - } - - #contenu - { - /*position: relative;*/ - /*bottom: 35px;*/ - } - - #albumHTML - { - /* annuler le positionnement du contenu */ - margin-top: 55px; - } -} - -@media screen and (max-width: 699px) -{ - #titre - { - width: 480px; - height: 131px; - background-image: url("mouette_petit.png"); - margin: auto; - } - - #contenu - { - /*position: relative; - bottom: 24px;*/ - } - - #albumHTML - { - /* annuler le positionnement du contenu */ - margin-top: 42px; - } - article - { - width: 40%; - } -} - -@media screen and (max-width: 479px) -{ - #titre - { - width: 320px; - height: 88px; - background-image: url("mouette_mini.png"); - margin: auto; - } - - #multicolonnes - { - flex-direction: column; - } - - aside - { - width: 320px; - } - - #bouton_chronologie - { - width: 130px; - font-size: initial; /* 150% est plus petit que "normal" */ - padding-top: 5px; - } - - #chronologie - { - /*display: flex;*/ - } - - #chronologie p - { - /*max-width: 80px;*/ - margin: 5px; - } - - #contenu - { - /*position: relative;*/ - /* bottom: 15px;*/ - } - - #albumHTML - { - /* annuler le positionnement du contenu */ - margin-top: 32px; - } - article - { - width: 48%; - } -} diff --git a/public/donnees_hors_editeur.css b/public/donnees_hors_editeur.css deleted file mode 100644 index 4a8d49e..0000000 --- a/public/donnees_hors_editeur.css +++ /dev/null @@ -1,56 +0,0 @@ -/*img{vertical-align: bottom;}*/ - -.text-tiny{font-size: x-small;} -.text-small{font-size: small;} -.text-big{font-size: large;} -.text-huge{font-size: x-large;} - -blockquote{border-left: 5px #cccccc solid; margin: 14px 0px; padding: 2px 25px; font-style: italic;} - -.marker-yellow{background-color: #fdfd77;} -.marker-green{background-color: #62f962;} -.marker-pink{background-color: #fc7899;} -.marker-blue{background-color: #72ccfd;} -.pen-red{background-color: white; color: red;} -.pen-green{background-color: white; color: green;} - -ul{padding-left: 10px;} -.todo-list>li{list-style-type : none;} -input[type=checkbox]{-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none; - height: 16px; width: 16px; border: 1px solid black; border-radius: 2px; position: relative; top: 5px; margin-right: 10px;} -input[type="checkbox"]:checked{border: none; background: #26ab33;} - -.table>table{border-collapse: collapse;} -.table td{border: 1px grey solid; padding: 7px; min-width: 30px;} -td p{margin: 0px;} - -.image{margin: 0px; margin: auto;} -.image img{max-width: 100%;} -.image-style-side{float: right;} -.image-style-side:not(.image_resized){max-width: 50%;} -.image>figcaption{padding: 7px; text-align: center; font-size: small; background-color: #f0f0f0;} - -.boutonArticle{clear: both; padding: 20px 0px;} -article:after{content: ""; display: block; clear: both;} - -iframe{min-width: 400px; min-height: 300px; max-width: 1200px; max-height: 900px;} - -/*@media screen and (max-width: 1000px) -{ - img{max-width: 900px;} -}*/ - -@media screen and (min-width: 700px) -{ - .image{max-width: 630px;} -} - -@media screen and (max-width: 699px) -{ - .image{max-width: 480px;} -} - -@media screen and (max-width: 479px) -{ - .image{max-width: 320px;} -} \ No newline at end of file diff --git a/public/melaine.css b/public/melaine.css deleted file mode 100644 index 09f38aa..0000000 --- a/public/melaine.css +++ /dev/null @@ -1,107 +0,0 @@ -/* public/melaine.css */ - -.police_titre -{ - color: #e9d4be; -} - -td -{ - vertical-align: top; -} - -pre -{ - font-family: 'Arial', 'sans'; - white-space: pre-wrap; -} - -figure -{ - /*margin: 5px;*/ -} -.boutonArticle -{ - border-bottom: 3px black double; -} -.boutonArticle a -{ - padding: 2px; - border: 4px black groove; -} - -@media screen and (min-width: 700px) -{ - #titre - { - width: 630px; - height: 171px; - background-image: url("mouette.png"); - } - - #photo - { - width: 630px; - height: 230px; - background-image: url("melaine/photo.png"); - position: relative; - bottom: 30px; - } - - /*img - { - max-width: 630px; - }*/ -} - -@media screen and (max-width: 699px) -{ - #titre - { - width: 480px; - height: 131px; - background-image: url("mouette_petit.png"); - margin: auto; - } - - #photo - { - width: 480px; - height: 191px; - background-image: url("melaine/photo_petit.png"); - margin: auto; - position: relative; - bottom: 24px; - } - - /*img - { - max-width: 480px; - }*/ -} - -@media screen and (max-width: 479px) -{ - #titre - { - width: 320px; - height: 88px; - background-image: url("mouette_mini.png"); - margin: auto; - } - - #photo - { - width: 320px; - height: 127px; - background-image: url("melaine/photo_mini.png"); - margin: auto; - position: relative; - bottom: 17px; - } - - /*img - { - max-width: 320px; - }*/ -} diff --git a/public/menu.css b/public/menu.css deleted file mode 100644 index 0e17e34..0000000 --- a/public/menu.css +++ /dev/null @@ -1,339 +0,0 @@ -/* public/menu.css */ - -.police_titre -{ - color: #e8c5c0; -} - -#contenu -{ - display: flex; - justify-content: space-between; -} - -#colonne1 -{ - display: flex; - flex-wrap: wrap; - flex-direction: column-reverse; -} - -#colonne2 -{ - display: flex; - flex-wrap: wrap; - align-items: flex-end; - flex-direction: column; -} - -#pommes -{ - position: relative; - left: 3px; -} - -#mon_blog -{ - margin: 0px 35px; -} - - -@media screen and (min-width: 700px) -{ - #titre - { - width: 630px; - height: 171px; - background-image: url("mouette.png"); - } - - #contenu - { - position: relative; - bottom: 15px; - } - - #colonne1, #colonne2 - { - height: 588px; - } - - /* pour IE, - indique la bonne taille du bloc pour que la colonne 2 se place correctement */ - #colonne1 - { - min-width: 310px; - } - - #pochette - { - background-image: url("menu/pochette.png"); - width: 308px; - height: 271px; - } - - #fille_qui_tombe - { - background-image: url("menu/fille_qui_tombe.jpg"); - width: 208px; - height: 163px; - margin: 5px 0px; - } - - #canoe - { - background-image: url("menu/canoe.png"); - width: 207px; - height: 144px; - } - - #cavalier - { - background-image: url("menu/cavalier.jpg"); - width: 159px; - height: 312px; - position: relative; - right: 97px; - } - - #pommes - { - background-image: url("menu/pommes.jpg"); - width: 59px; - height: 97px; - position: relative; - bottom: 3px; - } - - #sirene - { - background-image: url("menu/sirene.jpg"); - width: 320px; - height: 174px; - } - - #mouette_ocean - { - background-image: url("menu/mouette_ocean.jpg"); - width: 257px; - height: 171px; - margin: 5px 0px; - } - - #blonde - { - background-image: url("menu/blonde.jpg"); - width: 257px; - height: 233px; - } - - #hey_ho - { - width: 69px; - height: 154px; - position: relative; - right: 401px; - top: 107px; - } -} - -@media screen and (max-width: 699px) -{ - #titre - { - width: 480px; - height: 131px; - background-image: url("mouette_petit.png"); - margin: auto; - } - - #contenu - { - position: relative; - bottom: 12px; - } - - #colonne1, #colonne2 - { - height: 447px; - } - - /* pour IE, - indique la bonne taille du bloc pour que la colonne 2 se place correctement */ - #colonne1 - { - min-width: 237px; - } - - #pochette - { - background-image: url("menu/pochette_petit.png"); - width: 234px; - height: 206px; - } - - #fille_qui_tombe - { - background-image: url("menu/fille_qui_tombe_petit.jpg"); - width: 158px; - height: 124px; - margin: 4px 0px; - } - - #canoe - { - background-image: url("menu/canoe_petit.png"); - width: 157px; - height: 109px; - } - - #cavalier - { - background-image: url("menu/cavalier_petit.jpg"); - width: 121px; - height: 237px; - position: relative; - right: 73px; - } - - #pommes - { - background-image: url("menu/pommes_petit.jpg"); - width: 45px; - height: 74px; - position: relative; - bottom: 2px; - } - - #sirene - { - background-image: url("menu/sirene_petit.jpg"); - width: 243px; - height: 132px; - } - - #mouette_ocean - { - background-image: url("menu/mouette_ocean_petit.jpg"); - width: 195px; - height: 130px; - margin: 4px 0px; - } - - #blonde - { - background-image: url("menu/blonde_petit.jpg"); - width: 195px; - height: 177px; - } - - #hey_ho - { - width: 53px; - height: 117px; - position: relative; - right: 306px; - top: 82px; - } -} - -@media screen and (max-width: 479px) -{ - #titre - { - width: 320px; - height: 88px; - background-image: url("mouette_mini.png"); - margin: auto; - } - - #contenu - { - position: relative; - bottom: 8px; - } - - #colonne1, #colonne2 - { - height: 298px; - } - - /* pour IE, - indique la bonne taille du bloc pour que la colonne 2 se place correctement */ - #colonne1 - { - min-width: 158px; - } - - #pochette - { - background-image: url("menu/pochette_mini.png"); - width: 156px; - height: 137px; - } - - #fille_qui_tombe - { - background-image: url("menu/fille_qui_tombe_mini.jpg"); - width: 105px; - height: 82px; - margin: 3px 0px; - } - - #canoe - { - background-image: url("menu/canoe_mini.png"); - width: 105px; - height: 73px; - } - - #cavalier - { - background-image: url("menu/cavalier_mini.jpg"); - width: 80px; - height: 158px; - position: relative; - right: 48px; - } - - #pommes - { - background-image: url("menu/pommes_mini.jpg"); - width: 30px; - height: 49px; - position: relative; - bottom: 2px; - left: 2px; - } - - #sirene - { - background-image: url("menu/sirene_mini.jpg"); - width: 162px; - height: 88px; - } - - #mouette_ocean - { - background-image: url("menu/mouette_ocean_mini.jpg"); - width: 130px; - height: 86px; - margin: 3px 0px; - } - - #blonde - { - background-image: url("menu/blonde_mini.jpg"); - width: 130px; - height: 118px; - } - - #hey_ho - { - width: 36px; - height: 77px; - position: relative; - right: 204px; - top: 56px; - } -} diff --git a/public/normalize.css b/public/normalize.css deleted file mode 100644 index 784422c..0000000 --- a/public/normalize.css +++ /dev/null @@ -1,349 +0,0 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ - -/* Document - ========================================================================== */ - -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in iOS. - */ - -html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/* Sections - ========================================================================== */ - -/** - * Remove the margin in all browsers. - */ - -body { - margin: 0; -} - -/** - * Render the `main` element consistently in IE. - */ - -main { - display: block; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/* Grouping content - ========================================================================== */ - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Remove the gray background on active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove the border on images inside links in IE 10. - */ - -img { - border-style: none; -} - -/* Forms - ========================================================================== */ - -/** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { /* 1 */ - overflow: visible; -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button, -select { /* 1 */ - text-transform: none; -} - -/** - * Correct the inability to style clickable types in iOS and Safari. - */ - -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Correct the padding in Firefox. - */ - -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - vertical-align: baseline; -} - -/** - * Remove the default vertical scrollbar in IE 10+. - */ - -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Remove the inner padding in Chrome and Safari on macOS. - */ - -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* Interactive - ========================================================================== */ - -/* - * Add the correct display in Edge, IE 10+, and Firefox. - */ - -details { - display: block; -} - -/* - * Add the correct display in all browsers. - */ - -summary { - display: list-item; -} - -/* Misc - ========================================================================== */ - -/** - * Add the correct display in IE 10+. - */ - -template { - display: none; -} - -/** - * Add the correct display in IE 10. - */ - -[hidden] { - display: none; -} diff --git a/view/album.php b/view/album.php index 783cfab..e2731a1 100644 --- a/view/album.php +++ b/view/album.php @@ -5,8 +5,8 @@ // utilise discographie.css ob_start(); ?> - - + + +

Bienvenue sur le site de Melaine Favennec.

La configuration n'est pas terminée, veuillez créer un dossier "data" à la racine du site et lui donner les droits 777 (lecture + écriture + entrer dedans).

Ceci peut être réalisé depuis le logiciel FTP que vous avez utilisé pour télécharger le site sur le serveur de votre hébergeur.

Vous devriez également pouvoir utiliser SSH (linux, mac, windows 10/11) ou "putty" (anciens windows) en tapant ces commandes (utilisateur avancé):

ssh "nom_utilisateur"@"nom_de_domaine"
+ cd /chemin/racine/du/site (le dossier "melaine")
+ mkdir data
+ chmod 777 data

Recharger la page

+ +

Toutes les données du sites (textes, photos) ont été rassemblées dans un gros fichier que vous pouvez garder si vous le souhaitez sur votre ordinateur.

Vous pourrez l'utiliser plus tard pour restaurer le site dans l'état où il se trouve aujourd'hui. Ceci est utile dans le cas d'un changement d'hébergement ou dans le cas d'un problème affectant le serveur.

Ce fichier se nomme melaineDATA.zip.

+ +

Cliquez ici pour télécharger

Retour au site

+ +

Erreur: la classe ZipArchive est introuvable, la sauvegarde est impossible. L\'extension ZIP de PHP est-elle activée dans le fichier php.ini?

Veuillez prévenir l\'administrateur.

Vous pouvez aussi récupérer manuellement les fichiers en vous connectant au serveur avec un client FTP, il suffit de récupérer tout le dossier "data".

Retour au site

+ +

Restauration des données à partir d'une sauvegarde.

Vous devez avoir créé un fichier nommé melaineDATA.zip
+ en cliquant sur Extraire les données.

+ + + + + + + + <?= $title ?> + +'); +} +?> + + + +

+ +

+ + \ No newline at end of file diff --git a/view/discographie.php b/view/discographie.php index 2b70159..904201a 100644 --- a/view/discographie.php +++ b/view/discographie.php @@ -4,8 +4,8 @@ // variable $css ob_start(); ?> - - + + - - + + --> - - + + diff --git a/view/template-formulaires.php b/view/template-formulaires.php index f6d7ec0..7873500 100644 --- a/view/template-formulaires.php +++ b/view/template-formulaires.php @@ -97,6 +97,7 @@ if($page_actuelle == 'discographie') 'imageStyle:align-right',*/ //'imageResize', // optionnel, on a les poignées dans les coins de l'image 'linkImage', + 'toggleImageCaption', 'imageTextAlternative' ] }, @@ -144,9 +145,7 @@ if($page_actuelle == 'discographie') // - à inclure l'adresse de l'image dans le HTML produit par l'éditeur simpleUpload: { uploadUrl: 'index.php?action=upload_image&page=', - // noter qu'il est possible (parce que souhaitable je ne pense pas) d'envoyer une requête AJAX - // en indiquant une adresse "statique" du type: fichier.txt ou .xml, jpg, png, etc, - + // Headers supplémentaires envoyés avec la requête // c'est ici qu'on installe les mécanismes de sécurités comme l'authentification et la protection au CSRF headers: { @@ -171,11 +170,12 @@ if($page_actuelle == 'discographie') //alert(ClassicEditor.builtinPlugins.map( plugin => plugin.pluginName )); var initial = ''; + editor.setData(initial); - } ) - .catch( error => { - console.error( error ); - } ); + } ) + .catch( error => { + console.error( error ); + } ); diff --git a/view/template.php b/view/template.php index aeb157a..9422736 100644 --- a/view/template.php +++ b/view/template.php @@ -10,8 +10,8 @@ - - + + Sauvegarder les données de tout le site.

Restaurer les données avec une sauvegarde.

- Télécharger le code PHP pour migration.

+ Télécharger le code PHP pour migration. +

mettre le html à part +remplacer l'encadré orange -Sauvegarde des données !! +tri des albums selon l'année +(avec des plages de timestamps?) +Identification avec deux codes (login + mot de passe) -- cgit v1.2.3