Compare commits
No commits in common. "master" and "v1.1" have entirely different histories.
6
README.md
Executable file → Normal file
6
README.md
Executable file → Normal file
|
|
@ -1,10 +1,10 @@
|
||||||
# RépliQ
|
# RépliQ
|
||||||
📩 **Clarifiez vos attentes dans vos emails avec une bannière intelligente**
|
📩 **Clarifiez vos attentes dans vos emails avec un bandeau intelligent**
|
||||||
|
|
||||||
**RépliQ** est un outil simple et efficace permettant d’indiquer clairement **les attentes de réponse ou d’action** dans un email.
|
**RépliQ** est un outil simple et efficace permettant d’indiquer clairement **les attentes de réponse ou d’action** dans un email.
|
||||||
Grâce à une interface légère et intuitive, **générez une bannière colorée** en fonction du degré d’urgence et du type de réaction attendue (**action, lecture, réponse**).
|
Grâce à une interface légère et intuitive, **générez un bandeau coloré** en fonction du degré d’urgence et du type de réponse attendu (**action, lecture, réponse**).
|
||||||
|
|
||||||
[Télécharger RépliQ dès maintenant](https://forge.alexandremottier.fr/am/RepliQ/releases)
|
[Télécharger RépliQ dès maintenant](https://forge.am-networks.fr/am/RepliQ/releases)
|
||||||
|
|
||||||
## ✅ Pourquoi utiliser RépliQ ?
|
## ✅ Pourquoi utiliser RépliQ ?
|
||||||
- **Gagnez en clarté** : indiquez une échéance sans ambiguïté.
|
- **Gagnez en clarté** : indiquez une échéance sans ambiguïté.
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: auto;
|
width: auto;
|
||||||
min-width: 250px;
|
min-width: 250px;
|
||||||
text-align: left;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.output-container {
|
.output-container {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
|
|
@ -46,22 +46,15 @@
|
||||||
<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" onchange="toggleOptions()">
|
<select id="action">
|
||||||
<option value="Réponse">Réponse</option>
|
|
||||||
<option value="Action">Action</option>
|
|
||||||
<option value="Lecture">Lecture</option>
|
<option value="Lecture">Lecture</option>
|
||||||
|
<option value="Action">Action</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>
|
|
||||||
<div id="requiredOption" style="display: none;">
|
|
||||||
<input type="checkbox" id="required"> Requise (au lieu de "souhaitée")
|
|
||||||
</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>
|
||||||
|
|
||||||
|
|
@ -73,79 +66,67 @@
|
||||||
<div id="hiddenContainer"></div>
|
<div id="hiddenContainer"></div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
function toggleOptions() {
|
|
||||||
const action = document.getElementById("action").value;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
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 convenienceChecked = document.getElementById("convenience").checked;
|
|
||||||
const requiredChecked = document.getElementById("required").checked;
|
|
||||||
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");
|
||||||
|
|
||||||
if (!dateInput && !convenienceChecked) {
|
if (!dateInput) {
|
||||||
alert("Veuillez sélectionner une date ou cocher 'À votre convenance'.");
|
alert("Veuillez sélectionner une date ou utiliser le bouton ASAP.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let message = "";
|
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));
|
||||||
|
|
||||||
let bgColor = "#A8E6A3";
|
let bgColor = "#A8E6A3";
|
||||||
let textColor = "#206A1E";
|
let textColor = "#206A1E";
|
||||||
|
let message = `${action} souhaitée avant le ${formattedDate}.`;
|
||||||
|
|
||||||
if (convenienceChecked) {
|
if (diffDays <= 3) {
|
||||||
message = "Lecture à votre convenance. Aucune réponse requise.";
|
bgColor = "#FFD580";
|
||||||
} else {
|
textColor = "#A65E00";
|
||||||
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));
|
|
||||||
|
|
||||||
let verb = requiredChecked ? "requise" : "souhaitée";
|
|
||||||
message = `${action} ${verb} avant le ${formattedDate}.`;
|
|
||||||
|
|
||||||
if (diffDays <= 3) {
|
|
||||||
bgColor = "#FFD580";
|
|
||||||
textColor = "#A65E00";
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (action === "Lecture" && !convenienceChecked) {
|
if (action === "Lecture") {
|
||||||
message += " Aucune réponse requise.";
|
message += "<br>Inutile de répondre.";
|
||||||
}
|
}
|
||||||
|
|
||||||
resultDiv.style.backgroundColor = bgColor;
|
resultDiv.style.backgroundColor = bgColor;
|
||||||
resultDiv.style.color = textColor;
|
resultDiv.style.color = textColor;
|
||||||
resultDiv.textContent = message;
|
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: ${bgColor}; color: ${textColor}; padding: 10px; font-weight: bold; border-radius: 5px; display: inline-block; text-align: left;'>${message}</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() {
|
||||||
const action = document.getElementById("action").value;
|
const action = document.getElementById("action").value;
|
||||||
const requiredChecked = document.getElementById("required").checked;
|
|
||||||
const verb = requiredChecked ? "requise" : "souhaitée";
|
|
||||||
|
|
||||||
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");
|
||||||
|
|
||||||
resultDiv.style.backgroundColor = "#FFA8A8";
|
resultDiv.style.backgroundColor = "#FFA8A8";
|
||||||
resultDiv.style.color = "#8B0000";
|
resultDiv.style.color = "#8B0000";
|
||||||
resultDiv.textContent = `${action} ${verb} dès que possible`;
|
let message = `${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";
|
||||||
|
|
||||||
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>`;
|
// 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: left;'>${message}</div>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function copyFormattedBanner() {
|
function copyFormattedBanner() {
|
||||||
|
|
@ -160,4 +141,4 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user