template html & css

explorer_md/templates/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Explorateur de Fichiers Python/Flask</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style_md.css') }}">
+    <!-- https://github.com/markedjs/marked -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
+</head>
+<body>
+    <div class="container">
+        <div id="file-list-panel">
+            <h3>Liste des Fichiers</h3>
+            <ul id="file-list"></ul>
+        </div>
+
+        <div id="resizer"></div>
+
+        <div id="content">
+            <h3 id="content-title">Contenu du Fichier</h3>
+            <div id="file-content">Chargement de la liste des fichiers...</div>
+        </div>
+    </div>
+
+    <script src="{{ url_for('static', filename='script.js') }}"></script>
+</body>
+</html>

explorer_md/templates/index_md.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Visualiseur Markdown</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
+  <style>
+    * { box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+      line-height: 1.6;
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 20px;
+      background: #f5f5f5;
+    }
+    #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; }
+  </style>
+</head>
+<body>
+  <div id="content">
+    <div class="loader">Chargement...</div>
+  </div>
+
+  <script>
+    // ===== CONFIGURATION =====
+    // Change le nom du fichier ici :
+    const fichierMD = 'install_noMachine_linux.md';
+    // =========================
+
+    async function chargerMarkdown() {
+      const content = document.getElementById('content');
+      try {
+        const response = await fetch(fichierMD);
+        if (!response.ok) throw new Error(`Fichier "${fichierMD}" non trouvé`);
+        const md = await response.text();
+        content.innerHTML = marked.parse(md);
+      } catch (err) {
+        content.innerHTML = `<div class="error">
+          <strong>Erreur :</strong> ${err.message}<br><br>
+          <strong>Solution :</strong> Lance un serveur local avec VS Code (extension Live Server) 
+          ou via terminal : <code>npx serve</code> ou <code>python -m http.server</code>
+        </div>`;
+      }
+    }
+    chargerMarkdown();
+  </script>
+</body>
+</html>