2025-03-18 18:29:34 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="fr">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>RépliQ - Générateur de bannière e-mail</title>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
font-family: Arial, sans-serif;
|
|
|
|
|
margin: 20px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.banner {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: auto;
|
|
|
|
|
min-width: 250px;
|
2025-03-27 08:55:49 +01:00
|
|
|
text-align: left;
|
2025-03-18 18:29:34 +01:00
|
|
|
}
|
|
|
|
|
.output-container {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
}
|
|
|
|
|
.copy-btn {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
padding: 8px 15px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
border: none;
|
|
|
|
|
background-color: #0078D7;
|
|
|
|
|
color: white;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
.copy-btn:hover {
|
|
|
|
|
background-color: #005A9E;
|
|
|
|
|
}
|
|
|
|
|
#hiddenContainer {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: -9999px;
|
|
|
|
|
top: -9999px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h2>RépliQ - Générateur de bannière e-mail</h2>
|
|
|
|
|
<label for="action">Demander une :</label>
|
2025-03-27 08:55:49 +01:00
|
|
|
<select id="action" onchange="toggleOptions()">
|
|
|
|
|
<option value="Réponse">Réponse</option>
|
2025-03-18 18:29:34 +01:00
|
|
|
<option value="Action">Action</option>
|
2025-03-20 21:24:13 +01:00
|
|
|
<option value="Lecture">Lecture</option>
|
2025-03-18 18:29:34 +01:00
|
|
|
</select>
|
|
|
|
|
<br><br>
|
|
|
|
|
<label for="date">Date limite :</label>
|
|
|
|
|
<input type="date" id="date">
|
|
|
|
|
<br><br>
|
2025-03-20 21:24:13 +01:00
|
|
|
<div id="convenienceOption" style="display: none;">
|
|
|
|
|
<input type="checkbox" id="convenience"> À votre convenance
|
|
|
|
|
</div>
|
2025-03-27 08:55:49 +01:00
|
|
|
<div id="requiredOption" style="display: none;">
|
|
|
|
|
<input type="checkbox" id="required"> Requise (au lieu de "souhaitée")
|
|
|
|
|
</div>
|
2025-03-20 21:24:13 +01:00
|
|
|
<br><br>
|
2025-03-18 18:29:34 +01:00
|
|
|
<button onclick="generateBanner()">Générer</button>
|
|
|
|
|
<button onclick="setASAP()">ASAP</button>
|
|
|
|
|
|
|
|
|
|
<div class="output-container">
|
|
|
|
|
<div id="result" class="banner" style="display: none;"></div>
|
|
|
|
|
<button class="copy-btn" onclick="copyFormattedBanner()" style="display: none;" id="copyButton">Copier le bandeau</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="hiddenContainer"></div>
|
|
|
|
|
|
|
|
|
|
<script>
|
2025-03-27 08:55:49 +01:00
|
|
|
function toggleOptions() {
|
2025-03-20 21:24:13 +01:00
|
|
|
const action = document.getElementById("action").value;
|
2025-03-27 08:55:49 +01:00
|
|
|
document.getElementById("convenienceOption").style.display = action === "Lecture" ? "block" : "none";
|
|
|
|
|
document.getElementById("requiredOption").style.display = action === "Action" ? "block" : "none";
|
|
|
|
|
document.getElementById("convenience").checked = false;
|
|
|
|
|
document.getElementById("required").checked = false;
|
2025-03-20 21:24:13 +01:00
|
|
|
}
|
|
|
|
|
|
2025-03-18 18:29:34 +01:00
|
|
|
function generateBanner() {
|
|
|
|
|
const action = document.getElementById("action").value;
|
|
|
|
|
const dateInput = document.getElementById("date").value;
|
2025-03-27 08:55:49 +01:00
|
|
|
const convenienceChecked = document.getElementById("convenience").checked;
|
|
|
|
|
const requiredChecked = document.getElementById("required").checked;
|
2025-03-18 18:29:34 +01:00
|
|
|
const resultDiv = document.getElementById("result");
|
|
|
|
|
const copyButton = document.getElementById("copyButton");
|
|
|
|
|
const hiddenContainer = document.getElementById("hiddenContainer");
|
|
|
|
|
|
2025-03-27 08:55:49 +01:00
|
|
|
if (!dateInput && !convenienceChecked) {
|
2025-03-20 21:24:13 +01:00
|
|
|
alert("Veuillez sélectionner une date ou cocher 'À votre convenance'.");
|
2025-03-18 18:29:34 +01:00
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2025-03-20 21:24:13 +01:00
|
|
|
let message = "";
|
2025-03-18 18:29:34 +01:00
|
|
|
let bgColor = "#A8E6A3";
|
|
|
|
|
let textColor = "#206A1E";
|
|
|
|
|
|
2025-03-27 08:55:49 +01:00
|
|
|
if (convenienceChecked) {
|
|
|
|
|
message = "Lecture à votre convenance. Aucune réponse requise.";
|
2025-03-20 21:24:13 +01:00
|
|
|
} else {
|
|
|
|
|
const selectedDate = new Date(dateInput);
|
|
|
|
|
const formattedDate = selectedDate.toLocaleDateString("fr-FR");
|
|
|
|
|
const today = new Date();
|
|
|
|
|
const diffTime = selectedDate - today;
|
|
|
|
|
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
|
|
|
|
|
2025-03-27 08:55:49 +01:00
|
|
|
let verb = requiredChecked ? "requise" : "souhaitée";
|
|
|
|
|
message = `${action} ${verb} avant le ${formattedDate}.`;
|
|
|
|
|
|
2025-03-20 21:24:13 +01:00
|
|
|
if (diffDays <= 3) {
|
|
|
|
|
bgColor = "#FFD580";
|
|
|
|
|
textColor = "#A65E00";
|
|
|
|
|
}
|
2025-03-18 18:29:34 +01:00
|
|
|
}
|
|
|
|
|
|
2025-03-27 08:55:49 +01:00
|
|
|
if (action === "Lecture" && !convenienceChecked) {
|
2025-03-21 14:20:00 +01:00
|
|
|
message += " Aucune réponse requise.";
|
2025-03-18 18:29:34 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
resultDiv.style.backgroundColor = bgColor;
|
|
|
|
|
resultDiv.style.color = textColor;
|
2025-03-20 21:24:13 +01:00
|
|
|
resultDiv.textContent = message;
|
2025-03-18 18:29:34 +01:00
|
|
|
resultDiv.style.display = "block";
|
|
|
|
|
copyButton.style.display = "inline-block";
|
|
|
|
|
|
2025-03-27 08:55:49 +01:00
|
|
|
hiddenContainer.innerHTML = `<div style='background-color: ${bgColor}; color: ${textColor}; padding: 10px; font-weight: bold; border-radius: 5px; display: inline-block; text-align: left;'>${message}</div>`;
|
2025-03-18 18:29:34 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function setASAP() {
|
|
|
|
|
const action = document.getElementById("action").value;
|
2025-03-27 08:55:49 +01:00
|
|
|
const requiredChecked = document.getElementById("required").checked;
|
|
|
|
|
const verb = requiredChecked ? "requise" : "souhaitée";
|
|
|
|
|
|
2025-03-18 18:29:34 +01:00
|
|
|
const resultDiv = document.getElementById("result");
|
|
|
|
|
const copyButton = document.getElementById("copyButton");
|
|
|
|
|
const hiddenContainer = document.getElementById("hiddenContainer");
|
|
|
|
|
|
|
|
|
|
resultDiv.style.backgroundColor = "#FFA8A8";
|
|
|
|
|
resultDiv.style.color = "#8B0000";
|
2025-03-27 08:55:49 +01:00
|
|
|
resultDiv.textContent = `${action} ${verb} dès que possible`;
|
2025-03-18 18:29:34 +01:00
|
|
|
resultDiv.style.display = "block";
|
|
|
|
|
copyButton.style.display = "inline-block";
|
|
|
|
|
|
2025-03-27 08:55:49 +01:00
|
|
|
hiddenContainer.innerHTML = `<div style='background-color: #FFA8A8; color: #8B0000; padding: 10px; font-weight: bold; border-radius: 5px; display: inline-block; text-align: left;'>${action} ${verb} dès que possible</div>`;
|
2025-03-18 18:29:34 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function copyFormattedBanner() {
|
|
|
|
|
const hiddenContainer = document.getElementById("hiddenContainer");
|
|
|
|
|
const range = document.createRange();
|
|
|
|
|
range.selectNode(hiddenContainer);
|
|
|
|
|
window.getSelection().removeAllRanges();
|
|
|
|
|
window.getSelection().addRange(range);
|
|
|
|
|
document.execCommand("copy");
|
|
|
|
|
window.getSelection().removeAllRanges();
|
|
|
|
|
alert("Bandeau copié ! Collez-le directement dans Outlook.");
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
2025-03-27 08:55:49 +01:00
|
|
|
</html>
|
