Copy this Signature Generator code into a .txt file then Save as .HTML > Then use the button below to access the Signature images.

CONTACT US | CONTÁCTANOS

Copy this Signature Generator code into a .txt file then Save as .HTML > Then use the button below to access the Signature images.

CONTACT US | CONTÁCTANOS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Email Signature Builder</title>
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Lato', sans-serif;
      background: #f9f9f9;
      margin: 0;
      padding: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .top-banner {
      font-family: 'Lato', sans-serif;
      font-weight: 300;
      font-size: 18px;
      color: #000;
      opacity: 0.5;
      text-align: center;
      margin-bottom: 20px;
    }
    .container {
      max-width: 800px;
      width: 100%;
      background: #ffffff;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
      border-top: 6px solid #D4AF37;
    }
    h2 {
      margin-bottom: 20px;
      color: #000000;
      text-align: center;
      font-weight: 700;
    }
    label {
      display: block;
      margin-bottom: 6px;
      font-weight: bold;
      margin-top: 15px;
      color: #000000;
    }
    input[type="text"] {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 14px;
      background: #fffdf5;
    }
    textarea {
      width: 100%;
      height: 180px;
      margin-top: 15px;
      font-family: monospace;
      padding: 12px;
      border-radius: 6px;
      border: 1px solid #ccc;
      resize: vertical;
      background: #fffdf5;
    }
    .buttons {
      margin-top: 20px;
      text-align: center;
    }
    button {
      padding: 10px 22px;
      font-size: 15px;
      border: none;
      border-radius: 6px;
      background-color: #D4AF37;
      color: #000000;
      font-weight: bold;
      cursor: pointer;
      margin: 5px;
      transition: background-color 0.2s ease, transform 0.1s ease;
    }
    button:hover {
      background-color: #c39e2e;
      transform: scale(1.03);
    }
    .preview {
      margin-top: 30px;
      border-top: 1px solid #eee;
      padding-top: 20px;
    }
    .preview h3 {
      font-size: 18px;
      color: #006400;
      margin-bottom: 10px;
      font-weight: bold;
    }
    .signature-box {
      padding: 15px;
      background: #fafafa;
      border: 1px dashed #D4AF37;
      border-radius: 6px;
    }
  </style>
</head>
<body>
<div class="top-banner">www.fotografiatariq.com</div>
<div class="container">
  <h2>Email Signature Generator</h2>
  <label>Image URL</label>
  <input type="text" id="img_url" placeholder="https://example.com/signature.png">
  <label>Alt Text</label>
  <input type="text" id="alt_text" placeholder="e.g. John Doe Signature">
  <label>Email Address</label>
  <input type="text" id="email" placeholder="you@example.com">
  <label>WhatsApp Number (digits only, e.g. 50488446549)</label>
  <input type="text" id="whatsapp" placeholder="50488446549">
  <div class="buttons">
    <button onclick="generateSignature()">Generate Signature</button>
    <button onclick="copySignature()">Copy HTML to Clipboard</button>
  </div>
  <label>Raw HTML Output</label>
  <textarea id="output" readonly></textarea>
  <div class="preview">
    <h3>Live Preview</h3>
    <div class="signature-box" id="preview_area"></div>
  </div>
</div>
<script>
  function formatWhatsAppDisplay(number) {
    if (number.length >= 8) {
      const area = number.slice(0, 3);
      const part1 = number.slice(3, 7);
      const part2 = number.slice(7);
      return `+(${area}) ${part1}-${part2}`;
    }
    return number;
  }
  function generateSignature() {
    const imgUrl = document.getElementById("img_url").value;
    const altText = document.getElementById("alt_text").value;
    const email = document.getElementById("email").value;
    const whatsapp = document.getElementById("whatsapp").value;
    const whatsappDisplay = formatWhatsAppDisplay(whatsapp);
    const html = `<table cellpadding='0' cellspacing='0' style='font-family: Arial, sans-serif; font-size: 13px; color: #333;'>
      <tr>
        <td style='text-align: left;'>
          <img src='${imgUrl}' alt='${altText}' style='height: 120px; display: block;'>
        </td>
      </tr>
      <tr>
        <td style='padding-top: 0px; line-height: 1.6; text-align: left;'>
          Email: <a href='mailto:${email}' style='color: #0099ff; text-decoration: none;'>${email}</a><br>
          Whatsapp: <a href='https://wa.me/${whatsapp}' style='color: #0099ff; text-decoration: none;'>${whatsappDisplay}</a><br>
          Instagram: <a href='https://www.instagram.com/fotografiatariq' style='color: #0099ff; text-decoration: none;'>@fotografiatariq</a><br>
          Website: <a href='https://www.fotografiatariq.com' style='color: #0099ff; text-decoration: none;'>www.fotografiatariq.com</a><br>
        </td>
      </tr>
    </table>`;
    document.getElementById("output").value = html;
    document.getElementById("preview_area").innerHTML = html;
  }
  function copySignature() {
    const text = document.getElementById("output");
    text.select();
    document.execCommand("copy");
    alert("HTML Signature copied to clipboard!");
  }
</script>
</body>
</html>

--------------------

Quote generator:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Custom Client Quote Builder</title>
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Lato', sans-serif;
      background: #f9f9f9;
      margin: 0;
      padding: 40px;
      display: flex;
      justify-content: center;
      transition: direction 0.3s ease;
    }
    .container {
      max-width: 800px;
      width: 100%;
      background: #ffffff;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
      border-top: 6px solid #D4AF37;
    }
    h2 {
      margin-bottom: 20px;
      color: #000000;
      text-align: center;
      font-weight: 700;
    }
    label {
      display: block;
      margin-bottom: 6px;
      font-weight: bold;
      margin-top: 15px;
      color: #000000;
    }
    input[type="text"], input[type="number"], input[type="date"], select {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 14px;
      background: #fffdf5;
    }
    .item-row {
      margin-bottom: 10px;
    }
    .buttons {
      margin-top: 20px;
      text-align: center;
    }
    button {
      padding: 10px 22px;
      font-size: 15px;
      border: none;
      border-radius: 6px;
      background-color: #D4AF37;
      color: #000000;
      font-weight: bold;
      cursor: pointer;
      margin: 5px;
      transition: background-color 0.2s ease, transform 0.1s ease;
    }
    button:hover {
      background-color: #c39e2e;
      transform: scale(1.03);
    }
    .preview {
      margin-top: 30px;
      border-top: 1px solid #eee;
      padding-top: 20px;
    }
    .preview h3 {
      font-size: 18px;
      color: #006400;
      margin-bottom: 10px;
      font-weight: bold;
    }
    .quote-box {
      padding: 15px;
      background: #fafafa;
      border: 1px dashed #D4AF37;
      border-radius: 6px;
    }
    .dynamic-item {
      margin-top: 15px;
    }
    [dir="rtl"] {
      direction: rtl;
    }
    .total-tax {
      color: red;
      font-weight: normal;
    }
    .savings {
      color: green;
      font-weight: bold;
    }
    #website {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Lato', sans-serif;
      font-weight: 300;
      font-size: 18px;
      color: #000000;
      opacity: 0.5;
    }
  </style>
</head>
<body>
  <div id="website">www.fotografiatariq.com</div>
  <div class="container" id="container">
    <h2 id="heading">Custom Client Quote Generator</h2>
    <label for="language">🌐</label>
    <select id="language" onchange="updateLanguage()">
      <option value="en">English</option>
      <option value="es">Español</option>
      <option value="ar">العربية</option>
    </select>
    <label id="label_currency">Currency</label>
    <select id="currency" onchange="updateItemList()">
      <option value="USD">$ - USD</option>
      <option value="HNL">L - HNL</option>
    </select>
    <label id="label_client_name">Client Name</label>
    <input type="text" id="client_name" placeholder="e.g. Jane Doe">
    <label id="label_agent_name">Agent Name</label>
    <input type="text" id="agent_name" placeholder="e.g. John Smith">
    <label id="label_valid_thru">Valid Thru</label>
    <input type="date" id="valid_thru">
    <label id="label_discount">Discount (%)</label>
    <input type="number" id="discount" placeholder="e.g. 10" min="0" max="100">
    <h3 id="label_products">Products</h3>
    <div id="items_container"></div>
    <button id="btn_add" onclick="addItem()">Add Product</button>
    <div class="buttons">
      <button id="btn_generate" onclick="generateQuote()">Generate Quote</button>
      <button id="btn_copy" onclick="copyQuote()">Copy Quote</button>
    </div>
    <div class="preview" id="export_area">
      <h3 id="label_preview">Live Preview</h3>
      <div class="quote-box" id="preview_area"></div>
    </div>
  </div>
  <script>
    let items = [];
    const translations = {
      en: {
        heading: "Custom Client Quote Generator",
        clientName: "Client Name",
        agentName: "Agent Name",
        validThru: "Valid Thru",
        discount: "Discount (%)",
        products: "Products",
        addProduct: "Add Product",
        generate: "Generate Quote",
        copy: "Copy Quote",
        preview: "Live Preview",
        currency: "Currency",
        greeting: "Dear",
        intro: "Thank you for considering our services. Below is a detailed quote based on your selected items:",
        item: "Item",
        qty: "Qty",
        total: "Total",
        subtotal: "Subtotal",
        tax: "Tax (15%)",
        totalWithTax: "Total (with tax)",
        discountText: "Discount",
        grandTotal: "Grand Total",
        savings: "You saved",
        validThrough: "Quote Valid Through",
        closing: "If you have any questions, would like to adjust any items, or wish to proceed with the quote, please do not hesitate to contact me.",
        regards: "Best regards"
      },
      es: {
        heading: "Generador de Cotizaciones Personalizadas",
        clientName: "Nombre del Cliente",
        agentName: "Nombre del Agente",
        validThru: "Válido Hasta",
        discount: "Descuento (%)",
        products: "Productos",
        addProduct: "Agregar Producto",
        generate: "Generar Cotización",
        copy: "Copiar Cotizacion",
        preview: "Vista Previa",
        currency: "Moneda",
        greeting: "Estimado/a",
        intro: "Gracias por considerar nuestros servicios. A continuación, encontrará una cotización detallada basada en los artículos seleccionados:",
        item: "Artículo",
        qty: "Cant.",
        total: "Total",
        subtotal: "Subtotal",
        tax: "Impuesto (15%)",
        totalWithTax: "Total (con impuesto)",
        discountText: "Descuento",
        grandTotal: "Total Final",
        savings: "Ahorraste",
        validThrough: "Válido Hasta",
        closing: "Si tiene alguna pregunta, desea ajustar algún artículo o desea proceder con la cotización, no dude en contactarme.",
        regards: "Saludos cordiales"
      },
      ar: {
        heading: "منشئ عرض الأسعار للعملاء",
        clientName: "اسم العميل",
        agentName: "اسم الوكيل",
        validThru: "صالحة حتى",
        discount: "نسبة الخصم (%)",
        products: "المنتجات",
        addProduct: "إضافة منتج",
        generate: "إنشاء عرض سعر",
        copy: "نسخ عرض الأسعار",
        preview: "المعاينة المباشرة",
        currency: "العملة",
        greeting: "عزيزي/عزيزتي",
        intro: "شكرًا للنظر في خدماتنا. فيما يلي عرض أسعار مفصل بناءً على العناصر المختارة:",
        item: "الصنف",
        qty: "الكمية",
        total: "الإجمالي",
        subtotal: "الإجمالي الفرعي",
        tax: "الضريبة (15٪)",
        totalWithTax: "الإجمالي مع الضريبة",
        discountText: "الخصم",
        grandTotal: "الإجمالي النهائي",
        savings: "لقد وفرت",
        validThrough: "صالح حتى",
        closing: "إذا كانت لديك أي أسئلة أو ترغب في تعديل العناصر أو المتابعة مع العرض، فلا تتردد في التواصل معي.",
        regards: "مع أطيب التحيات"
      }
    };
    function updateLanguage() {
      const lang = document.getElementById("language").value;
      const t = translations[lang];
      document.body.setAttribute("dir", lang === "ar" ? "rtl" : "ltr");
      document.getElementById("heading").innerText = t.heading;
      document.getElementById("label_client_name").innerText = t.clientName;
      document.getElementById("label_agent_name").innerText = t.agentName;
      document.getElementById("label_valid_thru").innerText = t.validThru;
      document.getElementById("label_discount").innerText = t.discount;
      document.getElementById("label_products").innerText = t.products;
      document.getElementById("btn_add").innerText = t.addProduct;
      document.getElementById("btn_generate").innerText = t.generate;
      document.getElementById("btn_copy").innerText = t.copy;
      document.getElementById("label_preview").innerText = t.preview;
      document.getElementById("label_currency").innerText = t.currency;
      updateItemList(); // Re-render the quote in new language
    }
    function addItem() {
      const itemIndex = items.length;
      items.push({ name: '', price: 0, qty: 0 });
      const itemRow = document.createElement('div');
      itemRow.classList.add('item-row', 'dynamic-item');
      itemRow.id = `item_row_${itemIndex}`;
      itemRow.innerHTML = `
        <label>Product Name</label>
        <input type="text" id="item_name_${itemIndex}" placeholder="Enter product name" onchange="updateItem(${itemIndex})">
        <label>Price</label>
        <input type="number" id="item_price_${itemIndex}" placeholder="Enter price" onchange="updateItem(${itemIndex})" min="0">
        <label>Quantity</label>
        <input type="number" id="item_qty_${itemIndex}" placeholder="Enter quantity" min="0" onchange="updateItem(${itemIndex})">
        
        <button type="button" onclick="removeItem(${itemIndex})">Remove Product</button>
      `;
      document.getElementById("items_container").appendChild(itemRow);
    }
    function removeItem(index) {
      document.getElementById(`item_row_${index}`).remove();
      items.splice(index, 1);
      updateItemList();
    }
    function updateItem(index) {
      const name = document.getElementById(`item_name_${index}`).value;
      const price = parseFloat(document.getElementById(`item_price_${index}`).value) || 0;
      const qty = parseInt(document.getElementById(`item_qty_${index}`).value) || 0;
      items[index] = { name, price, qty };
      updateItemList();
    }
    function getCurrencySymbol() {
      const currency = document.getElementById("currency").value;
      return currency === "HNL" ? "L" : "$";
    }
    function updateItemList() {
      const lang = document.getElementById("language").value;
      const t = translations[lang];
      const symbol = getCurrencySymbol();
      let subtotal = 0;
      let quoteHTML = `
        <p>${t.greeting} ${document.getElementById("client_name").value || "..."},</p>
        <p>${t.intro}</p>
        <table cellpadding='6' cellspacing='0' style='font-family: Arial, sans-serif; font-size: 14px; width: 100%;'>
        <tr><th align='left'>${t.item}</th><th align='center'>${t.qty}</th><th align='right'>${t.total}</th></tr>`;
      items.forEach(item => {
        if (item.qty > 0) {
          const cost = item.qty * item.price;
          subtotal += cost;
          quoteHTML += `<tr><td>${item.name}</td><td align='center'>${item.qty}</td><td align='right'>${symbol}${cost.toFixed(2)}</td></tr>`;
        }
      });
      const tax = subtotal * 0.15;
      const totalWithTax = subtotal + tax;
      const discountPercent = parseFloat(document.getElementById("discount").value) || 0;
      const discountAmount = (discountPercent / 100) * totalWithTax;
      const grandTotal = totalWithTax - discountAmount;
      quoteHTML += `
        <tr><td colspan="2" align="right"><strong>${t.subtotal}:</strong></td><td align="right">${symbol}${subtotal.toFixed(2)}</td></tr>
        <tr><td colspan="2" align="right"><strong>${t.tax}:</strong></td><td align="right">${symbol}${tax.toFixed(2)}</td></tr>
        <tr><td colspan="2" align="right"><strong class="total-tax">${t.totalWithTax}:</strong></td><td align="right" class="total-tax">${symbol}${totalWithTax.toFixed(2)}</td></tr>
        <tr><td colspan="2" align="right"><strong>${t.discountText} (${discountPercent}%):</strong></td><td align="right">- ${symbol}${discountAmount.toFixed(2)}</td></tr>
        <tr><td colspan="2" align="right"><strong>${t.grandTotal}:</strong></td><td align="right"><strong>${symbol}${grandTotal.toFixed(2)}</strong></td></tr>
        <tr><td colspan="3" class="savings"><em>${t.savings} ${symbol}${discountAmount.toFixed(2)}.</em></td></tr>
      </table>
      <p><strong>${t.validThrough}:</strong> ${document.getElementById("valid_thru").value || "N/A"}</p>
      <p>${t.closing}</p>
      <p>${t.regards},<br><strong>${document.getElementById("agent_name").value || "..."}</strong></p>`;
      document.getElementById("preview_area").innerHTML = quoteHTML;
    }
    function generateQuote() {
      updateItemList();
    }
    function copyQuote() {
      const text = document.getElementById("preview_area");
      const range = document.createRange();
      range.selectNode(text);
      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);
      document.execCommand("copy");
      alert("Quote copied to clipboard!");
    }
    window.onload = updateLanguage;
  </script>
</body>
</html>
Click here to access the Asset Images for Signatures
↑Back to Top

We use cookies to enhance your browsing experience on our website. These cookies are essential for the proper functioning of the site and help us analyze user behavior to improve our services. By clicking ‘Accept’, you agree to our use of cookies. Accept Decline