Email Signature Generator

Brand Site

by storebox

HTML

<div>
  <h2>Storebox Email-Signaturen-Generator:</h2>
  <ol>
    <li>Füllen Sie alle zutreffenden Felder aus (Richtiline Telefonnummer: <a target="_blank" href="https://yourstorebox.atlassian.net/wiki/spaces/AO/pages/1320124417/Telefonnummer+f+r+Visitenkarten+Signaturen">https://yourstorebox.atlassian.net/wiki/spaces/AO/pages/1320124417/Telefonnummer+f+r+Visitenkarten+Signaturen</a>).</li>
    <li>Fahren Sie mit den Anweisungen für Ihren Client (Google Mail) unter "Email client instructions" fort.</li>
  </ol>
</div>
<div>
<h3>Deine Informationen:</h3>

<div id='inputs'>
  <table>
    <tr>
      <td>
        <label for='name'>Name*:</label>
      </td>
      <td>
        <input id='name' placeholder='Vor- & Nachname'/>
      </td>
    </tr>
    <tr>
      <td>
        <label for='position'>Position*:</label>
      </td>
      <td>
        <input id='position' placeholder='Meine Position bei Storebox'/>
      </td>
    </tr>
    <tr>
      <td>
        <label for='email'>Email*:</label>
      </td>
      <td>
        <input id='email' placeholder='[email protected]'/>
      </td>
    </tr>
    <tr>
      <td>
        <label for='fpCity'>FP City:</label>
      </td>
      <td>
        <input id='fpCity' placeholder='Wien'/>
      </td>
    </tr>
    <tr>
      <td>
        <label for='fpAddress'>FP Address:</label>
      </td>
      <td>
        <input id='fpAddress' placeholder='Grohgasse 9, 1050 Wien'/>
      </td>
    </tr>
    <tr>
      <td>
        <label for='phone1'><a target="_blank" href="https://yourstorebox.atlassian.net/wiki/spaces/AO/pages/1320124417/Telefonnummer+f+r+Visitenkarten+Signaturen">Telefon(AT)</a>:</label>
      </td>
      <td>
        <input id='phone1' value='' placeholder='0800 366 644'/>
      </td>
      <td>Bsp: 0800 366 644</td>
    </tr>
    <tr>
      <td>
        <label for='phone2'><a target="_blank"...

CSS

body { font-family: sans-serif; }
#inputs {
  /* width: 250px; */
}
#inputs input {
  padding:10px 20px; 
}
hr {
  margin: 30px 0;
}
h3 + hr {
  margin-top: -5px;
}
hr + h3 {
  margin-top: -15px;
}
.controls {
  float: right;
  line-height: 35px;
  margin-top: 30px;
}
.controls .select, .controls .save, .controls a {
  border: none;
  background: #82bf3a;
  color: #fff;
  cursor: pointer;
  font-family: Helvetica;
  font-size: 13px;
  padding: 7px 15px;
  text-decoration: none;
}
.controls a {
  background: green;
  display: none;
}
.underline {
  text-decoration: underline;
}
.hidden {
  display: none;
}
select {
  width: 194px;
  height: 38px;
}

React

import React, { useState, useRef } from 'react';

const SignatureGenerator = () => {
  // 1. State Management
  const [formData, setFormData] = useState({
    name: '',
    position: '',
    email: '',
    mobile: '',
    country: 'no-country',
    websiteLink: 'https://www.yourwebsite.com',
    websiteLabel: 'Website',
    logo: 'default-logo.png',
    customText: '',
    fpCity: '',
    phone1: '', phone2: '', phone3: '', 
    phone4: '', phone5: '', phone6: ''
  });

  const [showSave, setShowSave] = useState(true);
  const [downloadUrl, setDownloadUrl] = useState('#');
  const signatureRef = useRef(null);

  // 2. Event Handlers
  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }));
    setShowSave(true);
  };

  const handleSelectText = () => {
    selectElementText(signatureRef.current);
  };

  const handleSave = () => {
    let html = signatureRef.current.innerHTML;
    let minified = minify_html(html);
    
    // Cleaning up specific IDs as per your original logic
    minified = minified.replace(/ id="signature_2_container"/g, '')
                       .replace(/ id="signature_2"/g, '');

    setDownloadUrl(`data:text/html,${encodeURIComponent(minified)}`);
    setShowSave(false);
  };

  // 3. Logic for conditional values (Phone formatting)
  const formatPhone = (val) => val.replace(/\(0\)/g, "").replace(/[\s\/-]/g, "");

  const linkedinUrl = () => {
    if (formData.logo.includes("Franchise")) return "https://www.linkedin.com/company/storebox-franchise-system/";
    if (formData.logo.includes("B2B")) return "https://www.linkedin.com/company/storebox-last-mile-logistics/";
    return "https://www.linkedin.com/company/storebox-europe";
  };

  return (
    <div className="container">
      {/* --- INPUT SECTION --- */}
      <div id="inputs">
        <input...