Changelog

Track our continuous improvements and latest component updates.
Bricksfusion Changelog
The ultimate solution for your Bricks website.
Developed with a lot of ❤️
Buy LTD Login
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bricksfusion Newsletter</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
    
    /* ENCAPSULACIÓN TOTAL - Solo afecta a .bf-news-wrapper y sus hijos */
    .bf-news-wrapper {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
      max-width: 520px !important;
      margin: 0 auto !important;
      padding: 24px !important;
      position: relative !important;
      box-sizing: border-box !important;
    }
    
    .bf-news-wrapper * {
      box-sizing: border-box !important;
    }
    
    /* Título minimalista */
    .bf-news-wrapper .bf-news-title {
      font-size: 18px !important;
      font-weight: 600 !important;
      color: #ffffff !important;
      margin: 0 0 16px 0 !important;
      padding: 0 !important;
      line-height: 1.3 !important;
      letter-spacing: -0.02em !important;
      text-align: center !important;
    }
    
    /* Form */
    .bf-news-wrapper .bf-news-form {
      position: relative !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    
    .bf-news-wrapper .bf-news-form-inner {
      display: flex !important;
      gap: 8px !important;
      background: #0d0d0d !important;
      border: 1px solid #1f1f1f !important;
      border-radius: 10px !important;
      padding: 6px !important;
      margin: 0 !important;
      transition: border-color 0.3s ease !important;
    }
    
    .bf-news-wrapper .bf-news-form-inner:focus-within {
      border-color: rgba(251, 146, 60, 0.4) !important;
    }
    
    /* Input */
    .bf-news-wrapper .bf-news-input {
      flex: 1 !important;
      padding: 10px 12px !important;
      margin: 0 !important;
      background: transparent !important;
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
      font-family: 'Inter', sans-serif !important;
      font-size: 15px !important;
      font-weight: 400 !important;
      color: #ffffff !important;
      -webkit-appearance: none !important;
      -moz-appearance: none !important;
      appearance: none !important;
    }
    
    .bf-news-wrapper .bf-news-input::placeholder {
      color: #737373 !important;
      opacity: 1 !important;
    }
    
    .bf-news-wrapper .bf-news-input:focus {
      outline: none !important;
      border: none !important;
      box-shadow: none !important;
    }
    
    /* Button */
    .bf-news-wrapper .bf-news-btn {
      padding: 10px 20px !important;
      margin: 0 !important;
      background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%) !important;
      color: #ffffff !important;
      border: none !important;
      outline: none !important;
      border-radius: 7px !important;
      font-family: 'Inter', sans-serif !important;
      font-size: 15px !important;
      font-weight: 600 !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
      white-space: nowrap !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      min-width: 90px !important;
      position: relative !important;
      overflow: hidden !important;
    }
    
    .bf-news-wrapper .bf-news-btn::before {
      content: '' !important;
      position: absolute !important;
      inset: 0 !important;
      background: linear-gradient(135deg, #ea580c 0%, #dc2626 100%) !important;
      opacity: 0 !important;
      transition: opacity 0.2s ease !important;
    }
    
    .bf-news-wrapper .bf-news-btn:hover::before {
      opacity: 1 !important;
    }
    
    .bf-news-wrapper .bf-news-btn:hover {
      transform: translateY(-1px) !important;
      box-shadow: 0 6px 20px rgba(251, 146, 60, 0.3) !important;
    }
    
    .bf-news-wrapper .bf-news-btn:active {
      transform: translateY(0) !important;
    }
    
    .bf-news-wrapper .bf-news-btn-text,
    .bf-news-wrapper .bf-news-btn-loading {
      position: relative !important;
      z-index: 1 !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    
    .bf-news-wrapper .bf-news-btn-loading {
      display: none !important;
      width: 16px !important;
      height: 16px !important;
      border: 2px solid rgba(255, 255, 255, 0.3) !important;
      border-radius: 50% !important;
      border-top-color: #ffffff !important;
      animation: bf-news-spin 1s infinite linear !important;
    }
    
    @keyframes bf-news-spin {
      to { transform: rotate(360deg) !important; }
    }
    
    .bf-news-wrapper .bf-news-btn.bf-news-loading .bf-news-btn-loading {
      display: block !important;
    }
    
    .bf-news-wrapper .bf-news-btn.bf-news-loading .bf-news-btn-text {
      display: none !important;
    }
    
    /* Success Message */
    .bf-news-wrapper .bf-news-success {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) scale(0.95) !important;
      background: rgba(34, 197, 94, 0.1) !important;
      border: 1px solid rgba(34, 197, 94, 0.3) !important;
      border-radius: 10px !important;
      padding: 12px 16px !important;
      margin: 0 !important;
      color: #22c55e !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      opacity: 0 !important;
      pointer-events: none !important;
      transition: all 0.3s ease !important;
      z-index: 10 !important;
      width: calc(100% - 12px) !important;
      text-align: center !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
    }
    
    .bf-news-wrapper .bf-news-success.bf-news-show {
      opacity: 1 !important;
      transform: translate(-50%, -50%) scale(1) !important;
      pointer-events: auto !important;
    }
    
    /* Privacy Text */
    .bf-news-wrapper .bf-news-privacy {
      font-size: 12px !important;
      color: #737373 !important;
      margin: 12px 0 0 0 !important;
      padding: 0 !important;
      text-align: center !important;
      line-height: 1.4 !important;
    }
    
    /* Mobile Responsive */
    @media (max-width: 768px) {
      .bf-news-wrapper {
        max-width: 100% !important;
        padding: 20px !important;
      }
      
      .bf-news-wrapper .bf-news-title {
        font-size: 17px !important;
        margin-bottom: 14px !important;
      }
      
      .bf-news-wrapper .bf-news-form-inner {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 8px !important;
      }
      
      .bf-news-wrapper .bf-news-input {
        padding: 12px 14px !important;
        font-size: 16px !important;
      }
      
      .bf-news-wrapper .bf-news-btn {
        width: 100% !important;
        padding: 12px 20px !important;
      }
      
      .bf-news-wrapper .bf-news-privacy {
        font-size: 11px !important;
        margin-top: 10px !important;
      }
    }
    
    @media (max-width: 480px) {
      .bf-news-wrapper {
        padding: 16px !important;
      }
      
      .bf-news-wrapper .bf-news-title {
        font-size: 16px !important;
      }
      
      .bf-news-wrapper .bf-news-success {
        font-size: 13px !important;
        padding: 10px 14px !important;
      }
    }
  </style>
</head>
<body>
  
  <!-- COMPONENTE 100% ENCAPSULADO -->
  <div class="bf-news-wrapper">
    <h3 class="bf-news-title">Stay in the loop</h3>
    
    <form class="bf-news-form" id="bf-news-form">
      <div class="bf-news-form-inner">
        <input 
          type="email" 
          class="bf-news-input" 
          id="bf-news-email" 
          placeholder="your@email.com" 
          required
          autocomplete="email"
        >
        <button type="submit" class="bf-news-btn" id="bf-news-submit">
          <div class="bf-news-btn-loading"></div>
          <span class="bf-news-btn-text">Subscribe</span>
        </button>
      </div>
      
      <div class="bf-news-success" id="bf-news-success">
        ✓ You're subscribed. Welcome aboard!
      </div>
    </form>
    
    <p class="bf-news-privacy">No spam. Unsubscribe anytime.</p>
  </div>

  <script>
    (function() {
      // MailerLite API configuration  
      const MAILERLITE_API_KEY = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiI0IiwianRpIjoiOTQ5ODJmOWY5NmUwNTg1NTg0NTY3MGE2YTFmYTBlYzlmNDFhNGFjYWEzZDRjODg5YTg4ZDU4MjdjZGMyY2ZkMGNkM2FlZGU0OTM2N2NkOGQiLCJpYXQiOjE3NDgzMDcyMDIuMjg3NjM2LCJuYmYiOjE3NDgzMDcyMDIuMjg3NjM5LCJleHAiOjQ5MDM5ODA4MDIuMjgzMjg3LCJzdWIiOiIxNTYxMjI5Iiwic2NvcGVzIjpbXX0.MeGhzS3TBO3RIPk6t6NBI44mGbb2GKr1HV2DNCGjmZ-3wHdxbZfAMVsZcqBRYUDKAqAKFknzPPKWDVDuORUmS6bOpnykPwCvYuAUdchXbzUwLZZr3UbolJGoQ5f_bSMF9kWkhEJeW769meczSf7ckizVGH1J7OlZkbXSM4SaRggh621UylbRbeLT8CUx0eZDT13QYQpDDT3xv1t0AfhvHlQ0_LppP-IBpX1puzI6kcsXeBoKcmWGDH0yEpQZV_nh-6qrQQU2B6iroRiov2biCIiBRccnwbIg25YrG71bmqIQHvFGZ7Tzddwuze2K9qq9AcfYUDeYHDTW_svpdv6YPBvYMYBRryGgqMoUbItgUDHJSoglbPoTv8hLv14FlhhSatsUPoGTrbDEDY0GjYSaZWm_3QXiHA6cfYvW2k06KgkpJgb030lFfy_TwYDn-VzS-bcVOPRKyDX_qfwmVMOfwYGBPuq7t_9wJclpTkquAAHR_DUNUDh9g-wi0WCtQbxNPP_N_Dw_WGMlMqmV0U-aoCm5uhahY-HwrbHqcdsgMTYX_5XTSArqLCSrDUi3ri0fSSwpvu3RKEkyVj6d5eZUSK5L6vtitZRmFRi0hhb3dMw-JSh4SovZjckQQTlbxqPw6RssWhxws-lp_hzGkunwpzXUkvJcno0vUnYOapa3do4';
      const MAILERLITE_GROUP_ID = '155511475617662841';
      
      const form = document.getElementById('bf-news-form');
      const emailInput = document.getElementById('bf-news-email');
      const submitButton = document.getElementById('bf-news-submit');
      const successMessage = document.getElementById('bf-news-success');
      
      const subscribeToMailerLite = async (email) => {
        try {
          const response = await fetch('https://connect.mailerlite.com/api/subscribers', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'Accept': 'application/json',
              'Authorization': `Bearer ${MAILERLITE_API_KEY}`
            },
            body: JSON.stringify({
              email: email,
              groups: [MAILERLITE_GROUP_ID],
              fields: {
                source: 'Newsletter Signup',
                signup_date: new Date().toISOString(),
                interest: 'Bricksfusion Updates'
              },
              status: 'active'
            })
          });

          const data = await response.json();
          
          if (response.ok) {
            return { success: true, data: data };
          } else {
            if (data.message && data.message.includes('already exists')) {
              return { success: true, data: data, message: 'Already subscribed' };
            }
            return { success: false, error: data };
          }
        } catch (error) {
          return { success: false, error: error };
        }
      };
      
      form.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const emailValue = emailInput.value.trim();
        
        if (emailValue && emailValue.length > 0) {
          submitButton.classList.add('bf-news-loading');
          submitButton.disabled = true;
          
          const result = await subscribeToMailerLite(emailValue);
          
          if (result.success) {
            emailInput.value = '';
            successMessage.classList.add('bf-news-show');
            
            setTimeout(function() {
              successMessage.classList.remove('bf-news-show');
            }, 4000);
          } else {
            emailInput.value = '';
            successMessage.classList.add('bf-news-show');
            
            setTimeout(function() {
              successMessage.classList.remove('bf-news-show');
            }, 4000);
          }
          
          submitButton.classList.remove('bf-news-loading');
          submitButton.disabled = false;
        }
      });
    })();
  </script>
</body>
</html>