Cartão de visitas minimalista

shopboxScripts AI

by thvinic

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cartão de Visitas</title>
 
</head>
<body>
<div id="divParaSalvar">
  <div class="card" id="card-container">
    <div class="background-image" id="background-image"></div>
    <img id="profile-image" src="" alt="Foto de Perfil" onclick="openImagePicker()">
    <input type="file" id="profile-image-input" accept="image/*" style="display: none;">
    <h2><input type="text" id="name-input" style="color: #000; opacity: 1;"></h2>
    <p><input type="text" id="address-input" style="color: #000; opacity: 1;"></p>
    <p><input type="text" id="occupation-input" style="color: #000; opacity: 1;"></p>
    <p><input type="text" id="age-input" style="color: #000; opacity: 1;"></p>
    <p><input type="text" id="phone-input" style="color: #000; opacity: 1;"></p>
  </div> 
  
</div>

  <div class="config-container">
    <div class="color-control">
      <label for="name-color">Nome:</label>
      <input type="color" id="name-color" value="#000000">
      <label for="name-opacity">Opacidade:</label>
      <input type="range" id="name-opacity" min="0" max="1" step="0.1" value="1">
    </div>
    <div class="color-control">
      <label for="address-color">Endereço:</label>
      <input type="color" id="address-color" value="#000000">
      <label for="address-opacity">Opacidade:</label>
      <input type="range" id="address-opacity" min="0" max="1" step="0.1" value="1">
    </div>
    <div class="color-control">
      <label for="occupation-color">Ocupação:</label>
      <input type="color" id="occupation-color" value="#000000">
      <label for="occupation-opacity">Opacidade:</label>
      <input type="range" id="occupation-opacity" min="0" max="1" step="0.1" value="1">
    </div>
    <div class="color-control">
      <label...

CSS

.card {
      width: 300px;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 20px;
      text-align: center;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      position: relative;
      overflow: hidden;
    }

    .card img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
      margin-bottom: 10px;
      cursor: pointer;
      position: relative;
      z-index: 1;
    }

    .card h2,
    .card p,
    .card input {
      position: relative;
      z-index: 1;
    }

    .card button {
      margin-top: 10px;
      position: relative;
      z-index: 1;
    }

    .card .background-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: 1;
      transition: opacity 0.3s ease;
    }

    .config-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 20px;
    }

    .config-container .color-control {
      display: flex;
      justify-content: center;
      margin-bottom: 10px;
    }

    .config-container .color-control label {
      margin-right: 5px;
    }

    .config-container .color-control input {
      width: auto;
      margin-bottom: 0;
    }
    input#occupation-color {
    width: 30px;
}
    input#name-color {
    width: 30px;
}
    input#address-color {
    width: 30px;
}
    input#age-color {
    width: 30px;
}
    input#phone-color {
    width: 30px;
}

    .config-container .button-container {
      margin-top: 10px;
    }

JavaScript

// Carrega os dados do localStorage, se existirem
    const profileImage = localStorage.getItem('profileImage');
    const backgroundImage = localStorage.getItem('backgroundImage');
    const backgroundOpacity = parseFloat(localStorage.getItem('backgroundOpacity')) || 1;
    const nameColor = localStorage.getItem('nameColor') || '#000000';
    const nameOpacity = parseFloat(localStorage.getItem('nameOpacity')) || 1;
    const addressColor = localStorage.getItem('addressColor') || '#000000';
    const addressOpacity = parseFloat(localStorage.getItem('addressOpacity')) || 1;
    const occupationColor = localStorage.getItem('occupationColor') || '#000000';
    const occupationOpacity = parseFloat(localStorage.getItem('occupationOpacity')) || 1;
    const ageColor = localStorage.getItem('ageColor') || '#000000';
    const ageOpacity = parseFloat(localStorage.getItem('ageOpacity')) || 1;
    const phoneColor = localStorage.getItem('phoneColor') || '#000000';
    const phoneOpacity = parseFloat(localStorage.getItem('phoneOpacity')) || 1;
    const name = localStorage.getItem('name');
    const address = localStorage.getItem('address');
    const occupation = localStorage.getItem('occupation');
    const age = localStorage.getItem('age');
    const phone = localStorage.getItem('phone');

    // Atualiza os campos com os dados do localStorage
    document.getElementById('profile-image').src = profileImage || '';
    document.getElementById('background-image').style.backgroundImage = `url(${backgroundImage || ''})`;
    document.getElementById('background-image').style.opacity = backgroundOpacity;
    document.getElementById('name-input').value = name || '';
    document.getElementById('name-input').style.color = nameColor;
    document.getElementById('name-input').style.opacity = nameOpacity;
    document.getElementById('address-input').value = address || '';
    document.getElementById('address-input').style.color = addressColor;
   ...