v2.0 - A votre convenance

This commit is contained in:
Alexandre MOTTIER 2025-03-20 21:24:13 +01:00
parent bc5b76eb9c
commit 1bbd411e1c
3 changed files with 43 additions and 27 deletions

0
LICENSE Normal file → Executable file
View File

0
README.md Normal file → Executable file
View File

58
repliq.html Normal file → Executable file
View File

@ -46,15 +46,19 @@
<body> <body>
<h2>RépliQ - Générateur de bannière e-mail</h2> <h2>RépliQ - Générateur de bannière e-mail</h2>
<label for="action">Demander une :</label> <label for="action">Demander une :</label>
<select id="action"> <select id="action" onchange="toggleConvenienceOption()">
<option value="Lecture">Lecture</option>
<option value="Action">Action</option> <option value="Action">Action</option>
<option value="Lecture">Lecture</option>
<option value="Réponse">Réponse</option> <option value="Réponse">Réponse</option>
</select> </select>
<br><br> <br><br>
<label for="date">Date limite :</label> <label for="date">Date limite :</label>
<input type="date" id="date"> <input type="date" id="date">
<br><br> <br><br>
<div id="convenienceOption" style="display: none;">
<input type="checkbox" id="convenience"> À votre convenance
</div>
<br><br>
<button onclick="generateBanner()">Générer</button> <button onclick="generateBanner()">Générer</button>
<button onclick="setASAP()">ASAP</button> <button onclick="setASAP()">ASAP</button>
@ -66,45 +70,64 @@
<div id="hiddenContainer"></div> <div id="hiddenContainer"></div>
<script> <script>
function toggleConvenienceOption() {
const action = document.getElementById("action").value;
const convenienceOption = document.getElementById("convenienceOption");
const dateInput = document.getElementById("date");
const convenienceCheckbox = document.getElementById("convenience");
if (action === "Lecture") {
convenienceOption.style.display = "block";
} else {
convenienceOption.style.display = "none";
convenienceCheckbox.checked = false;
}
}
function generateBanner() { function generateBanner() {
const action = document.getElementById("action").value; const action = document.getElementById("action").value;
const dateInput = document.getElementById("date").value; const dateInput = document.getElementById("date").value;
const resultDiv = document.getElementById("result"); const resultDiv = document.getElementById("result");
const copyButton = document.getElementById("copyButton"); const copyButton = document.getElementById("copyButton");
const hiddenContainer = document.getElementById("hiddenContainer"); const hiddenContainer = document.getElementById("hiddenContainer");
const convenienceCheckbox = document.getElementById("convenience").checked;
if (!dateInput) { if (!dateInput && !convenienceCheckbox) {
alert("Veuillez sélectionner une date ou utiliser le bouton ASAP."); alert("Veuillez sélectionner une date ou cocher 'À votre convenance'.");
return; return;
} }
let message = "";
let bgColor = "#A8E6A3";
let textColor = "#206A1E";
if (convenienceCheckbox) {
message = "Lecture à votre convenance.";
} else {
const selectedDate = new Date(dateInput); const selectedDate = new Date(dateInput);
const formattedDate = selectedDate.toLocaleDateString("fr-FR"); const formattedDate = selectedDate.toLocaleDateString("fr-FR");
const today = new Date(); const today = new Date();
const diffTime = selectedDate - today; const diffTime = selectedDate - today;
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
let bgColor = "#A8E6A3"; message = `${action} souhaitée avant le ${formattedDate}.`;
let textColor = "#206A1E";
let message = `${action} souhaitée avant le ${formattedDate}.`;
if (diffDays <= 3) { if (diffDays <= 3) {
bgColor = "#FFD580"; bgColor = "#FFD580";
textColor = "#A65E00"; textColor = "#A65E00";
} }
}
if (action === "Lecture") { if (action === "Lecture") {
message += "<br>Inutile de répondre."; message += "\nInutile de répondre.";
} }
resultDiv.style.backgroundColor = bgColor; resultDiv.style.backgroundColor = bgColor;
resultDiv.style.color = textColor; resultDiv.style.color = textColor;
resultDiv.innerHTML = message; resultDiv.textContent = message;
resultDiv.style.display = "block"; resultDiv.style.display = "block";
copyButton.style.display = "inline-block"; copyButton.style.display = "inline-block";
// Mettre le HTML formaté dans un conteneur caché hiddenContainer.innerHTML = `<div style='background-color: ${bgColor}; color: ${textColor}; padding: 10px; font-weight: bold; border-radius: 5px; display: inline-block; text-align: center;'>${message.replace("\n", "<br>")}</div>`;
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>`;
} }
function setASAP() { function setASAP() {
@ -115,18 +138,11 @@
resultDiv.style.backgroundColor = "#FFA8A8"; resultDiv.style.backgroundColor = "#FFA8A8";
resultDiv.style.color = "#8B0000"; resultDiv.style.color = "#8B0000";
let message = `${action} souhaitée dès que possible.`; resultDiv.textContent = `${action} souhaitée dès que possible`;
if (action === "Lecture") {
message += "<br>Inutile de répondre.";
}
resultDiv.innerHTML = message;
resultDiv.style.display = "block"; resultDiv.style.display = "block";
copyButton.style.display = "inline-block"; copyButton.style.display = "inline-block";
// Mettre le HTML formaté dans un conteneur caché hiddenContainer.innerHTML = `<div style='background-color: #FFA8A8; color: #8B0000; padding: 10px; font-weight: bold; border-radius: 5px; display: inline-block; text-align: center;'>${action} souhaitée dès que possible</div>`;
hiddenContainer.innerHTML = `<div style='background-color: #FFA8A8; color: #8B0000; padding: 10px; font-weight: bold; border-radius: 5px; display: inline-block; text-align: left;'>${message}</div>`;
} }
function copyFormattedBanner() { function copyFormattedBanner() {