From ea21779b054bf47b95617aeba01d6ccb231f8312 Mon Sep 17 00:00:00 2001 From: ph Date: Wed, 26 Nov 2025 22:34:43 +0100 Subject: [PATCH] template html & css --- css/.vscode/settings.json | 7 + css/flexbox.html | 102 +++++ css/grid.html | 108 ++++++ css/interface_base.html | 93 +++++ css/interface_dynamique.html | 326 ++++++++++++++++ css/interface_glisser.html | 445 ++++++++++++++++++++++ css/interface_glisser_prop.html | 551 ++++++++++++++++++++++++++++ css/template.html | 20 + dialog.html | 235 ++++++++++++ explorer_md/server.py | 97 +++++ explorer_md/static/script.js | 103 ++++++ explorer_md/static/style.css | 73 ++++ explorer_md/static/style_md.css | 81 ++++ explorer_md/templates/index.html | 29 ++ explorer_md/templates/index_md.html | 84 +++++ index.html | 84 +++++ panel_resize.html | 185 ++++++++++ panel_windows.html | 182 +++++++++ panel_windows_full.html | 182 +++++++++ svg.html | 221 +++++++++++ 20 files changed, 3208 insertions(+) create mode 100644 css/.vscode/settings.json create mode 100644 css/flexbox.html create mode 100644 css/grid.html create mode 100644 css/interface_base.html create mode 100644 css/interface_dynamique.html create mode 100644 css/interface_glisser.html create mode 100644 css/interface_glisser_prop.html create mode 100644 css/template.html create mode 100644 dialog.html create mode 100644 explorer_md/server.py create mode 100644 explorer_md/static/script.js create mode 100644 explorer_md/static/style.css create mode 100644 explorer_md/static/style_md.css create mode 100644 explorer_md/templates/index.html create mode 100644 explorer_md/templates/index_md.html create mode 100644 index.html create mode 100644 panel_resize.html create mode 100644 panel_windows.html create mode 100644 panel_windows_full.html create mode 100644 svg.html diff --git a/css/.vscode/settings.json b/css/.vscode/settings.json new file mode 100644 index 0000000..9255d01 --- /dev/null +++ b/css/.vscode/settings.json @@ -0,0 +1,7 @@ +{ +"workbench.colorCustomizations": { + "editor.background": "#d0e1f7", // couleur de fond de l’éditeur + "sideBar.background": "#d0e1f7", // couleur de fond de la barre latérale + "activityBar.background": "#d0e1f7" // barre d’activité +} +} \ No newline at end of file diff --git a/css/flexbox.html b/css/flexbox.html new file mode 100644 index 0000000..b5a15ab --- /dev/null +++ b/css/flexbox.html @@ -0,0 +1,102 @@ + + + + + + Flexbox + + + + + + + + +
+
+ + + +
+
+ +
+
box 1
+
box 2
+
box 3
+
+ + \ No newline at end of file diff --git a/css/grid.html b/css/grid.html new file mode 100644 index 0000000..dacf5be --- /dev/null +++ b/css/grid.html @@ -0,0 +1,108 @@ + + + + + + Grid + + + + + + + + + + +
+
+
Item 1
+
Item 2
+
Item 3
+
Item 4
+
Item 5
+
Item 6
+
Item 7
+
Item 8
+
Item 9
+
+
+ + \ No newline at end of file diff --git a/css/interface_base.html b/css/interface_base.html new file mode 100644 index 0000000..94280fb --- /dev/null +++ b/css/interface_base.html @@ -0,0 +1,93 @@ + + + + + + Interface base + + + + + + +
+
+ Votre bandeau du haut +
+ + + +
+

Conteneur Principal

+

Ici vous ajoutez vos éléments : textes, boutons, etc.

+ +
+ +
+ Bandeau du bas / Pied de page +
+
+ + + \ No newline at end of file diff --git a/css/interface_dynamique.html b/css/interface_dynamique.html new file mode 100644 index 0000000..509e48d --- /dev/null +++ b/css/interface_dynamique.html @@ -0,0 +1,326 @@ + + + + + + Interface dynamique + + + + + + +
+
+ Votre bandeau du haut +
+ + + +
+

Conteneur Principal

+
+ +
+ Bandeau du bas / Pied de page +
+
+ + + \ No newline at end of file diff --git a/css/interface_glisser.html b/css/interface_glisser.html new file mode 100644 index 0000000..21bec14 --- /dev/null +++ b/css/interface_glisser.html @@ -0,0 +1,445 @@ + + + + + + Interface glisser + + + + + + +
+
+ Votre bandeau du haut +
+ + + +
+

Conteneur Principal

+
+ +
+ Bandeau du bas / Pied de page +
+
+ + + \ No newline at end of file diff --git a/css/interface_glisser_prop.html b/css/interface_glisser_prop.html new file mode 100644 index 0000000..0675365 --- /dev/null +++ b/css/interface_glisser_prop.html @@ -0,0 +1,551 @@ + + + + + + Interface glisser + + + + + + +
+
+ Votre bandeau du haut +
+ + + +
+

Conteneur Principal

+
+
+

Propriétés de l'Élément

+

Cliquez sur un élément dans la zone principale pour modifier ses propriétés.

+ +
+
+
+
+ Bandeau du bas / Pied de page +
+
+ + + \ No newline at end of file diff --git a/css/template.html b/css/template.html new file mode 100644 index 0000000..9406eb0 --- /dev/null +++ b/css/template.html @@ -0,0 +1,20 @@ + + + + + + Template + + + + + + + + + + \ No newline at end of file diff --git a/dialog.html b/dialog.html new file mode 100644 index 0000000..a4192b7 --- /dev/null +++ b/dialog.html @@ -0,0 +1,235 @@ + + + + + + + + + Ma Page + + +

Titre de la page

+ + + + + \ No newline at end of file diff --git a/explorer_md/server.py b/explorer_md/server.py new file mode 100644 index 0000000..ffbe5c5 --- /dev/null +++ b/explorer_md/server.py @@ -0,0 +1,97 @@ +# app.py +# pip install flask +from flask import Flask, render_template, jsonify, send_from_directory +import os + +app = Flask(__name__) + +# Le répertoire que nous voulons explorer (relatif à app.py) +FILE_DIR = 'files' + +# --- Configuration des Routes --- + +@app.route('/') +def index(): + """Route principale qui sert la page HTML.""" + return render_template('index.html') + + +@app.route('/images/') +def get_image(filename): + """Sert une image depuis un dossier.""" + return send_from_directory('images', filename) + + + +@app.route('/api/list_files') +def list_files(): + """Endpoint API pour lister les fichiers du répertoire.""" + try: + # Assurez-vous que le répertoire existe + if not os.path.isdir(FILE_DIR): + return jsonify({'error': f"Le répertoire '{FILE_DIR}' n'existe pas."}), 500 + + # Liste tous les éléments dans le répertoire + all_items = os.listdir(FILE_DIR) + + # Filtre pour ne garder que les fichiers (et non les dossiers) + file_list = [item for item in all_items if os.path.isfile(os.path.join(FILE_DIR, item))] + + return jsonify(file_list) + except Exception as e: + app.logger.error(f"Erreur lors de la récupération de la liste des fichiers : {e}") + return jsonify({'error': 'Erreur interne du serveur.'}), 500 + +@app.route('/api/get_content/') +def get_content(filename): + """Endpoint API pour obtenir le contenu d'un fichier.""" + file_path = os.path.join(FILE_DIR, filename) + + # Sécurité: Vérifiez que le chemin est bien dans le répertoire autorisé + # Ceci empêche les attaques de 'Directory Traversal' + if not os.path.abspath(file_path).startswith(os.path.abspath(FILE_DIR)): + return jsonify({'error': 'Accès non autorisé.'}), 403 + + try: + # Cas des fichiers textes lisibles + if filename.endswith(('.txt', '.ini', '.json', '.html', '.css', '.js')): + with open(file_path, 'r', encoding='utf-8') as f: + content = f.read() + return jsonify({'content': content, 'type': 'text'}) + elif filename.endswith(('.md')): + with open(file_path, 'r', encoding='utf-8') as f: + content = f.read() + return jsonify({'content': content, 'type': 'text'}) + + # Cas des images ou autres binaires (on simule le contenu) + elif filename.endswith(('.jpg', '.png', '.pdf')): + return jsonify({ + 'content': f"Fichier binaire ou non textuel. Le contenu de {filename} ne peut pas être affiché directement.", + 'type': 'binary' + }) + + # Pour tout autre type de fichier non géré + else: + return jsonify({'content': f"Type de fichier non supporté pour l'affichage : {filename}", 'type': 'unsupported'}) + + except FileNotFoundError: + return jsonify({'error': 'Fichier non trouvé.'}), 404 + except Exception as e: + app.logger.error(f"Erreur lors de la lecture du fichier {filename} : {e}") + return jsonify({'error': 'Erreur interne du serveur lors de la lecture.'}), 500 + + +if __name__ == '__main__': + # Créez le répertoire des fichiers s'il n'existe pas + if not os.path.exists(FILE_DIR): + os.makedirs(FILE_DIR) + # Créez quelques fichiers de test + with open(os.path.join(FILE_DIR, 'Fichier 1.txt'), 'w') as f: + f.write("Contenu du premier fichier texte.") + with open(os.path.join(FILE_DIR, 'Config.ini'), 'w') as f: + f.write("[Settings]\nVersion=1.0\nPath=/data") + with open(os.path.join(FILE_DIR, 'Image.jpg'), 'w') as f: # Fichier binaire simulé + f.write("Ceci n'est pas une image réelle.") + + # Lancez l'application Flask + app.run(debug=True) \ No newline at end of file diff --git a/explorer_md/static/script.js b/explorer_md/static/script.js new file mode 100644 index 0000000..c0aedb8 --- /dev/null +++ b/explorer_md/static/script.js @@ -0,0 +1,103 @@ +// static/script.js + +const fileListPanel = document.getElementById('file-list-panel'); +const resizer = document.getElementById('resizer'); +const container = document.querySelector('.container'); +const fileListUl = document.getElementById('file-list'); +const fileContentPre = document.getElementById('file-content'); +const contentTitle = document.getElementById('content-title'); + +let isResizing = false; + +// 1. GESTION DU REDIMENSIONNEMENT (Même logique que précédemment) +resizer.addEventListener('mousedown', function(e) { + isResizing = true; + container.classList.add('resizing'); + document.body.style.userSelect = 'none'; +}); + +document.addEventListener('mousemove', function(e) { + if (!isResizing) return; + + const newWidth = e.clientX - container.getBoundingClientRect().left; + const minWidth = 150; + const maxWidth = container.clientWidth * 0.5; + + if (newWidth >= minWidth && newWidth <= maxWidth) { + fileListPanel.style.width = newWidth + 'px'; + } +}); + +document.addEventListener('mouseup', function() { + isResizing = false; + container.classList.remove('resizing'); + document.body.style.userSelect = ''; +}); + +// 2. LOGIQUE DU CHARGEMENT DES FICHIERS (Communication avec Flask) + +// A. Récupérer la liste des fichiers depuis le serveur +async function fetchFileList() { + try { + const response = await fetch('/api/list_files'); + const files = await response.json(); + + if (response.ok) { + fileListUl.innerHTML = ''; // Vider la liste existante + if (files.length === 0) { + fileListUl.innerHTML = '
  • Aucun fichier trouvé.
    • '; + fileContentPre.textContent = 'Le répertoire est vide.'; + } else { + files.forEach(filename => { + const li = document.createElement('li'); + li.textContent = filename; + li.onclick = () => loadFileContent(filename, li); + fileListUl.appendChild(li); + }); + + // Charger le contenu du premier fichier par défaut + if (files.length > 0) { + loadFileContent(files[0], fileListUl.querySelector('li')); + } + } + } else { + // Afficher l'erreur retournée par Flask + fileContentPre.textContent = `Erreur: ${files.error}`; + } + } catch (error) { + fileContentPre.textContent = `Erreur de connexion au serveur : ${error.message}`; + console.error('Erreur lors de la récupération des fichiers:', error); + } +} + +// B. Charger le contenu du fichier sélectionné +async function loadFileContent(filename, element) { + // Retirer la classe 'selected' de tous les éléments + document.querySelectorAll('#file-list li').forEach(li => { + li.classList.remove('selected'); + }); + // Ajouter la classe 'selected' à l'élément cliqué + if (element) { + element.classList.add('selected'); + } + + contentTitle.textContent = `Contenu de : ${filename}`; + fileContentPre.textContent = 'Chargement en cours...'; + + try { + const response = await fetch(`/api/get_content/${filename}`); + const data = await response.json(); + + if (response.ok) { + // Enlève le slice(1, -1) sauf si ton serveur renvoie le contenu entre guillemets + fileContentPre.innerHTML = marked.parse(data.content); + } else { + fileContentPre.innerHTML = `Erreur (${response.status}) : ${data.error}`; + } + } catch (error) { + fileContentPre.textContent = `Erreur réseau lors du chargement : ${error.message}`; + console.error('Erreur lors du chargement du contenu:', error); + } +} +// Exécuter au chargement de la page +document.addEventListener('DOMContentLoaded', fetchFileList); \ No newline at end of file diff --git a/explorer_md/static/style.css b/explorer_md/static/style.css new file mode 100644 index 0000000..334e4b7 --- /dev/null +++ b/explorer_md/static/style.css @@ -0,0 +1,73 @@ +/* static/style.css */ +body { + margin: 0; + font-family: Arial, sans-serif; + height: 100vh; + display: flex; + overflow: hidden; +} + +.container { + display: flex; + width: 100%; + height: 100%; + border: 1px solid #ccc; +} + +/* --- Panneau de la Liste des Fichiers (Gauche) --- */ +#file-list-panel { + width: 300px; + min-width: 150px; + max-width: 50%; + overflow-y: auto; + padding: 10px; + background-color: #f4f4f4; + box-sizing: border-box; +} + +#file-list { + list-style: none; + padding: 0; +} + +#file-list li { + padding: 8px; + cursor: pointer; + border-bottom: 1px solid #eee; +} + +#file-list li:hover { + background-color: #e0e0e0; +} + +#file-list li.selected { + background-color: #007bff; + color: white; +} + +/* --- Poignée de Redimensionnement --- */ +#resizer { + width: 6px; + cursor: col-resize; + background-color: #ccc; + flex-shrink: 0; +} + +#resizer:hover { + background-color: #aaa; +} + +/* --- Panneau de Contenu (Droite) --- */ +#content { + flex-grow: 1; + overflow-y: auto; + padding: 10px; + box-sizing: border-box; +} + +#file-content { + padding: 15px; + border: 1px dashed #ddd; + background-color: #fff; + min-height: 80%; +} \ No newline at end of file diff --git a/explorer_md/static/style_md.css b/explorer_md/static/style_md.css new file mode 100644 index 0000000..655c642 --- /dev/null +++ b/explorer_md/static/style_md.css @@ -0,0 +1,81 @@ +/* static/style_md.css */ + +#file-content { + background: white; + padding: 30px 40px; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +h1, h2, h3 { + color: #333; + margin-top: 1.5em; +} + +h1 { + border-bottom: 2px solid #eee; + padding-bottom: 10px; +} + +code { + background: #f4f4f4; + padding: 2px 6px; + border-radius: 4px; + font-family: 'Consolas', 'Monaco', monospace; +} + +pre { + background: #2d2d2d; + color: #f8f8f2; + padding: 15px; + border-radius: 6px; + overflow-x: auto; +} + +pre code { + background: none; + color: inherit; +} + +blockquote { + border-left: 4px solid #ddd; + margin: 0; + padding-left: 20px; + color: #666; +} + +a { + color: #0066cc; +} + +table { + border-collapse: collapse; + width: 100%; +} + +th, td { + border: 1px solid #ddd; + padding: 8px 12px; + text-align: left; +} + +th { + background: #f4f4f4; +} + +img { + max-width: 100%; +} + +.loader { + text-align: center; + color: #666; + padding: 40px; +} + +.error { + color: #c00; + background: #fee; + padding: 15px; + border-radius: 6px; +} \ No newline at end of file diff --git a/explorer_md/templates/index.html b/explorer_md/templates/index.html new file mode 100644 index 0000000..2ba73a7 --- /dev/null +++ b/explorer_md/templates/index.html @@ -0,0 +1,29 @@ + + + + + + Explorateur de Fichiers Python/Flask + + + + + + +
    +
    +

    Liste des Fichiers

    +
      +
      + +
      + +
      +

      Contenu du Fichier

      +
      Chargement de la liste des fichiers...
      +
      +
      + + + + \ No newline at end of file diff --git a/explorer_md/templates/index_md.html b/explorer_md/templates/index_md.html new file mode 100644 index 0000000..9b3455f --- /dev/null +++ b/explorer_md/templates/index_md.html @@ -0,0 +1,84 @@ + + + + + + Visualiseur Markdown + + + + +
      +
      Chargement...
      +
      + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..9b3455f --- /dev/null +++ b/index.html @@ -0,0 +1,84 @@ + + + + + + Visualiseur Markdown + + + + +
      +
      Chargement...
      +
      + + + + diff --git a/panel_resize.html b/panel_resize.html new file mode 100644 index 0000000..100c455 --- /dev/null +++ b/panel_resize.html @@ -0,0 +1,185 @@ + + + + + + Page une-colonne redimensionnable + + + +
      +
      +
      +
      Bandeau du haut
      +
      Glissez la barre grise sous ce bandeau pour redimensionner verticalement.
      +
      +
      + +
      + +
      +
      +
      Conteneur central
      +
      Ce conteneur prend l'espace restant. Vous pouvez aussi redimensionner la fenêtre par le coin (resize).
      +
      +
      + +
      + +
      +
      +
      Bandeau du bas
      +
      Glissez la barre grise au-dessus pour modifier sa hauteur.
      +
      +
      +
      + + + + diff --git a/panel_windows.html b/panel_windows.html new file mode 100644 index 0000000..a87847e --- /dev/null +++ b/panel_windows.html @@ -0,0 +1,182 @@ + + + + + + Page une-colonne redimensionnable + + + +
      +
      +
      +
      Bandeau du haut
      +
      Glissez la barre grise sous ce bandeau pour redimensionner verticalement.
      +
      +
      + +
      + +
      +
      +
      Conteneur central
      +
      Ce conteneur prend l'espace restant. Vous pouvez aussi redimensionner la fenêtre par le coin (resize).
      +
      +
      + +
      + +
      +
      +
      Bandeau du bas
      +
      Glissez la barre grise au-dessus pour modifier sa hauteur.
      +
      +
      +
      + + + + diff --git a/panel_windows_full.html b/panel_windows_full.html new file mode 100644 index 0000000..1e612ff --- /dev/null +++ b/panel_windows_full.html @@ -0,0 +1,182 @@ + + + + + + Page une-colonne redimensionnable + + + +
      +
      +
      +
      Bandeau du haut
      +
      Glissez la barre grise sous ce bandeau pour redimensionner verticalement.
      +
      +
      + +
      + +
      +
      +
      Conteneur central
      +
      Ce conteneur prend l'espace restant. Vous pouvez aussi redimensionner la fenêtre par le coin (resize).
      +
      +
      + +
      + +
      +
      +
      Bandeau du bas
      +
      Glissez la barre grise au-dessus pour modifier sa hauteur.
      +
      +
      +
      + + + + diff --git a/svg.html b/svg.html new file mode 100644 index 0000000..4f0f717 --- /dev/null +++ b/svg.html @@ -0,0 +1,221 @@ + + + + + +SVG from LINESTRINGs + + + + +

      Visualisation SVG des LINESTRING

      +
      +
      + + + + +