<?php $filename = "texte_sauvegardé.txt"; $config_file = "config_style.json"; $message = ""; // Valeurs par défaut $font_family = "Inter, sans-serif"; $font_size = "15px"; $text_color = "#1f2937"; $bg_color = "#ffffff"; $text_content = ""; // Gestion de la sauvegarde if ($_SERVER['REQUEST_METHOD'] === 'POST') { if (isset($_POST['content'])) { $text_content = $_POST['content']; file_put_contents($filename, $text_content); } if (isset($_POST['font_family'], $_POST['font_size'], $_POST['text_color'], $_POST['bg_color'])) { $styles = [ 'font_family' => $_POST['font_family'], 'font_size' => $_POST['font_size'], 'text_color' => $_POST['text_color'], 'bg_color' => $_POST['bg_color'] ]; file_put_contents($config_file, json_encode($styles)); $message = "Modifications enregistrées avec succès !"; } } // Chargement des données if (file_exists($filename)) { $text_content = file_get_contents($filename); } if (file_exists($config_file)) { $styles = json_decode(file_get_contents($config_file), true); $font_family = $styles['font_family'] ?? $font_family; $font_size = $styles['font_size'] ?? $font_size; $text_color = $styles['text_color'] ?? $text_color; $bg_color = $styles['bg_color'] ?? $bg_color; } ?> <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Éditeur Moderne</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Fira+Code&family=Merriweather&display=swap" rel="stylesheet"> <style> :root { --primary: #6366f1; --primary-hover: #4f46e5; --bg-main: #0f172a; --card-bg: #1e293b; --border-color: #334155; --text-main: #f8fafc; --text-muted: #94a3b8; } body { font-family: 'Inter', sans-serif; background-color: var(--bg-main); color: var(--text-main); margin: 0; padding: 40px 20px; display: flex; justify-content: center; } .container { width: 100%; max-width: 850px; background: var(--card-bg); padding: 30px; border-radius: 16px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3); border: 1px solid var(--border-color); } header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; } h2 { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.025em; } .msg { background: rgba(16, 185, 129, 0.1); color: #34d399; padding: 10px 15px; border-radius: 8px; font-size: 0.875rem; margin-bottom: 20px; border: 1px solid rgba(16, 185, 129, 0.2); } .toolbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 20px; background: rgba(15, 23, 42, 0.6); padding: 15px; border-radius: 10px; border: 1px solid var(--border-color); } .control-group { display: flex; flex-direction: column; gap: 6px; } label { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } select, input[type="color"] { background: var(--card-bg); color: var(--text-main); border: 1px solid var(--border-color); padding: 8px 12px; border-radius: 6px; font-size: 0.875rem; outline: none; transition: border-color 0.2s; } select:focus, input[type="color"]:focus { border-color: var(--primary); } input[type="color"] { padding: 4px; height: 35px; cursor: pointer; width: 100%; } textarea { width: 100%; height: 350px; padding: 15px; border: 1px solid var(--border-color); border-radius: 10px; resize: vertical; outline: none; box-sizing: border-box; transition: border-color 0.2s; font-family: <?php echo htmlspecialchars($font_family); ?>; font-size: <?php echo htmlspecialchars($font_size); ?>; color: <?php echo htmlspecialchars($text_color); ?>; background-color: <?php echo htmlspecialchars($bg_color); ?>; } textarea:focus { border-color: var(--primary); } .btn-submit { background: var(--primary); color: white; border: none; padding: 10px 20px; font-size: 0.875rem; font-weight: 500; border-radius: 8px; cursor: pointer; transition: background 0.2s, transform 0.1s; margin-top: 15px; } .btn-submit:hover { background: var(--primary-hover); } .btn-submit:active { transform: scale(0.98); } </style> </head> <body> <div class="container"> <header> <h2>✨ Éditeur Moderne</h2> </header> <?php if (!empty($message)): ?> <div class="msg"><?php echo htmlspecialchars($message); ?></div> <?php endif; ?> <form method="POST"> <div class="toolbar"> <div class="control-group"> <label>Police</label> <select name="font_family"> <option value="Inter, sans-serif" <?php if($font_family=='Inter, sans-serif') echo 'selected'; ?>>Inter (Sans)</option> <option value="'Fira Code', monospace" <?php if($font_family=="'Fira Code', monospace") echo 'selected'; ?>>Fira Code (Code)</option> <option value="Merriweather, serif" <?php if($font_family=='Merriweather, serif') echo 'selected'; ?>>Merriweather (Serif)</option> </select> </div> <div class="control-group"> <label>Taille</label> <select name="font_size"> <option value="13px" <?php if($font_size=='13px') echo 'selected'; ?>>13 px</option> <option value="15px" <?php if($font_size=='15px') echo 'selected'; ?>>15 px (Défaut)</option> <option value="18px" <?php if($font_size=='18px') echo 'selected'; ?>>18 px</option> <option value="20px" <?php if($font_size=='20px') echo 'selected'; ?>>20 px</option> </select> </div> <div class="control-group"> <label>Couleur du texte</label> <input type="color" name="text_color" value="<?php echo htmlspecialchars($text_color); ?>"> </div> <div class="control-group"> <label>Fond de la zone</label> <input type="color" name="bg_color" value="<?php echo htmlspecialchars($bg_color); ?>"> </div> </div> <textarea name="content" placeholder="Commencez à écrire ici..."><?php echo htmlspecialchars($text_content); ?></textarea> <button type="submit" class="btn-submit">Sauvegarder les modifications</button> </form> </div> </body> </html>
You have javascript disabled. You will not be able to edit any code.