Assinatura de e-mail com HTML

Bom dia galera, tudo bem?

Bah pessoa ou eu sou muito burro ou a Microsoft que complica em tudo, sinceramente as vezes penso em partir dessa pra melhor e usar google, eu to a messes tentando criar um assinatura que na Microsoft fique responsiva porque a mesma fica desconfigurando e mandando os icones para baixo do link e ai eu não consigo mexer em nada fiz ela em código HTML conforme abaixo o css fiz tudo dentro do HTML se alguém puder me ajudar agradeço, vou deixar na imagem como eu gostaria que ficasse pois é um padrão que seguimos na empresa, porém está é a primeira que vai ser em HTML pois as outras dava confusão devido ao PX e então era tudo por tabela, um negócio bem chato

Código HTML com CSS e JS

<!DOCTYPE html> <html lang="pt-BR"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Assinatura Digital</title><style>body { font-family: Arial, sans-serif; }table { width: 100%; border-collapse: collapse; }td { vertical-align: top; }a { color: #007bff; text-decoration: none; }.assinatura {font-size: 12px;margin-right: 20px; /* Ajuste a margem à direita conforme necessário */margin-left: 10px; /* Ajuste a margem à esquerda conforme necessário */}.logo { max-width: 100%; margin-bottom: -10px; }.nome {font-size: 20px;color: #B0191A;margin-bottom: 10px; /* Ajuste a margem inferior conforme necessário */}

.setor {font-size: 16px;color: #000000;margin-bottom: 5px; /* Ajuste a margem inferior conforme necessário */}

.telefone, .ramal {font-size: 15px;color: #000000;margin-bottom: 5px; /* Ajuste a margem inferior conforme necessário */}

.link-icon-container {display: flex;align-items: center; /* Alinhar itens verticalmente ao centro */}

.link {font-size: 15px;color: #000000;}

.icon {display: flex;align-items: center; /* Alinhar ícones verticalmente ao centro */margin-left: 10px; /* Ajuste a margem entre o link e os ícones conforme necessário */margin-bottom: 10px;}

.icon a {margin-right: 10px; /* Ajuste a margem entre os ícones conforme necessário */}

/* Campos de texto e link em negrito */#nome, #setor, #telefone, #ramal, .link {font-weight: bold;}

.campo, .link {font-family: Arial;margin-bottom: 10px;width: 100%;}

.bold {font-weight: bold;}

.campo {padding: 8px;border: 1px solid #ccc;border-radius: 5px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);}

.botao {background-color: #B0191A;color: white;border: none;padding: 10px 20px;border-radius: 5px;cursor: pointer;font-size: 15px;}

.botao:hover {background-color: darkred;}

.campo-wrapper {margin-bottom: 10px; /* Ajuste a margem inferior conforme necessário */}

.spacer {height: 20px; /* Altura do espaço em branco */}

@media only screen and (max-width: 600px) {/* Ajuste o layout para telas menores */.assinatura {margin-right: 10px; /* Ajuste a margem à direita para telas menores */margin-left: 5px; /* Ajuste a margem à esquerda para telas menores */}}

</style></head><body><!-- Atualiza os Campos da Assinatura --><div class="campo-wrapper" id="div-nome"><input type="text" id="nome" class="campo" placeholder="Seu Nome"><br></div><div class="campo-wrapper" id="div-setor"><input type="text" id="setor" class="campo" placeholder="Setor"><br></div><div class="campo-wrapper" id="div-telefone"><input type="text" id="telefone" class="campo" placeholder="Telefone"><br></div><div class="campo-wrapper" id="div-ramal"><input type="text" id="ramal" class="campo" placeholder="Ramal"><br></div><button onclick="atualizarAssinatura()" class="botao">Atualizar Assinatura</button><div class="spacer"></div> <!-- Espaço em branco -->

<script>function formatarTelefone(telefone) {// Remover todos os caracteres que não são dígitostelefone = telefone.replace(/\D/g, '');

// Aplicar a formatação desejadavar padrao = '+XX XX XXXX-XXXX';var indice = 0;var telefoneFormatado = '';

for (var i = 0; i < padrao.length; i++) {if (padrao[i] === 'X') {if (indice < telefone.length) {telefoneFormatado += telefone[indice];indice++;}} else {telefoneFormatado += padrao[i];}}

return telefoneFormatado;}

function formatarRamal(ramal) {// Remover todos os caracteres que não são dígitosramal = ramal.replace(/\D/g, '');

// Aplicar a formatação desejadavar padrao = '+XX XX XXXX-XXXX';var indice = 0;var ramalFormatado = '';

for (var i = 0; i < padrao.length; i++) {if (padrao[i] === 'X') {if (indice < ramal.length) {ramalFormatado += ramal[indice];indice++;}} else {ramalFormatado += padrao[i];}}

return ramalFormatado;}

function atualizarAssinatura() {var nome = "<span class='bold'>" + (document.getElementById("nome").value || "Nome") + "</span>";var setor = "<span class='bold'>" + (document.getElementById("setor").value || "Setor") + "</span>";var telefone = "<span class='bold'>" + (formatarTelefone(document.getElementById("telefone").value) || "Telefone") + "</span>";var ramal = "<span class='bold'>" + (formatarRamal(document.getElementById("ramal").value) || "Ramal") + "</span>";

var assinatura = `<div id="div-nome"><span class="nome">${nome}</span></div><div id="div-setor"><span class="setor">${setor}</span></div><div id="div-telefone"><span class="telefone">${telefone}</span></div><div id="div-ramal"><span class="ramal">${ramal}</span></div><div class="link-icon-container"><div id="div-link" class="link-wrapper"><a href="https://www.inova.ind.br/" class="link">www.inova.ind.br</a></div><div class="icon"><a href="https://www.facebook.com/sistemas.inova/?locale=pt_BR"><img src="https://raw.githubusercontent.com/D3F4LT-HAT/assinaturas/main/facebook.png" alt="Facebook" class="logo"></a><a href="https://www.instagram.com/somos.inova/"><img src="https://github.com/D3F4LT-HAT/assinaturas/raw/main/instagram.png" alt="Instagram" class="logo"></a><a href="https://www.linkedin.com/company/sistemas-inova/mycompany/"><img src="https://github.com/D3F4LT-HAT/assinaturas/raw/main/linkedin.png" alt="Linkedin" class="logo"></a></div></div>

`;

document.getElementById("assinatura-conteudo").innerHTML = assinatura;

// Manter a formatação em negritodocument.querySelectorAll('.bold').forEach(element => {element.style.fontWeight = 'bold';});

// Limpar os camposdocument.getElementById("nome").value = "";document.getElementById("setor").value = "";document.getElementById("telefone").value = "";document.getElementById("ramal").value = "";}</script>

<!-- Conteúdo da Assinatura --><table cellspacing="0" cellpadding="0"><tr><td style="width: 220px; text-align: left; vertical-align: top; padding-right: 10px;"><img src="https://raw.githubusercontent.com/D3F4LT-HAT/assinaturas/main/img_esquerda.png" alt="Logotipo_Esquerda" class="logo" width="215" height="148"></td>

<td style="text-align: left; vertical-align: top; padding-right: 20px; padding-top: 10px;"><div id="assinatura-conteudo"></div></td>

<td style="width: 1400px; text-align: left; vertical-align: top; padding-left: 10px;"><img src="https://raw.githubusercontent.com/D3F4LT-HAT/assinaturas/main/img_direita.png" alt="Logotipo_Direita" class="logo" width="215" height="148"></td></tr></table></body></html>

Conforme a imagem abaixo esse é o padrão correto, e nem mesmo consigo fazer funcionar no HTML ja que a droga da MS no Outlook desconfigura, estou bem frustrado pois no google consegui fazer funcionar e isso é bem decepcionante