Webleb - HTML UI Elements - Um Código por alejandrokundrah

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Subscribe to Our Newsletter</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="subscription-card">
      <div class="card-header">
        <div class="icon">
          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <polyline points="22,6 12,13 2,6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <h1>Stay Updated</h1>
        <p>Subscribe to get the latest news and updates delivered to your inbox.</p>
      </div>

<div class="form-group">
          <label for="email" class="form-label">Email Address</label>
          <input 
            type="email" 
            id="email" 
            name="email" 
            class="form-input" 
            placeholder="Enter your email address"
            required
            autocomplete="email"
          >
          <span class="error-message" id="emailError"></span>
        </div>

<div class="form-group checkbox-group">
          <label class="checkbox-container">
            <input type="checkbox" id="newsletter" name="newsletter" checked>
            <span class="checkmark"></span>
            <span class="checkbox-text">Weekly newsletter updates</span>
          </label>
        </div>

<div class="form-group checkbox-group">
          <label class="checkbox-container">
            <input type="checkbox" id="promotions" name="promotions">
            <span class="checkmark"></span>
            <span class="checkbox-text">Special offers and promotions</span>
          </label>
        </div>

<button type="submit" class="submit-button" id="submitButton">
          <span class="button-text">Subscribe Now</span>
          <span class="button-loader" id="buttonLoader">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-dasharray="31.416" stroke-dashoffset="31.416">
                <animate attributeName="stroke-dasharray" dur="2s" values="0 31.416;15.708 15.708;0 31.416" repeatCount="indefinite"/>
                <animate attributeName="stroke-dashoffset" dur="2s" values="0;-15.708;-31.416" repeatCount="indefinite"/>
              </circle>
            </svg>
          </span>
        </button>
      </form>

<div class="success-message" id="successMessage">
        <div class="success-icon">
          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M22 11.08V12C21.9988 14.1564 21.3005 16.2547 20.0093 17.9818C18.7182 19.7088 16.9033 20.9725 14.8354 21.5839C12.7674 22.1953 10.5573 22.1219 8.53447 21.3746C6.51168 20.6273 4.78465 19.2461 3.61096 17.4371C2.43727 15.628 1.87979 13.4905 2.02168 11.3363C2.16356 9.18203 2.99721 7.13214 4.39828 5.49883C5.79935 3.86553 7.69279 2.72636 9.79619 2.24223C11.8996 1.75809 14.1003 1.95079 16.07 2.79" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <polyline points="22,4 12,14.01 9,11.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <h2>Welcome aboard!</h2>
        <p>Thank you for subscribing. You'll receive a confirmation email shortly.</p>
      </div>
    </div>
  </div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  line-height: 1.6;
}

.container {
  width: 100%;
  max-width: 480px;
}

.subscription-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.subscription-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2);
}

.subscription-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.card-header {
  text-align: center;
  margin-bottom: 32px;
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 20px;
  margin-bottom: 20px;
  color: white;
  transform: scale(1);
  transition: transform 0.3s ease;
}

.icon:hover {
  transform: scale(1.05);
}

.card-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 8px;
}

.card-header p {
  color: #718096;
  font-size: 16px;
  max-width: 300px;
  margin: 0 auto;
}

.subscription-form {
  display: block;
  animation: fadeIn 0.6s ease;
}

.form-group {
  margin-bottom: 24px;
  position: relative;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #4a5568;
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.form-input {
  width: 100%;
  padding: 16px 20px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 16px;
  background: white;
  transition: all 0.3s ease;
  outline: none;
}

.form-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  transform: translateY(-1px);
}

.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label {
  color: #667eea;
}

.form-input.error {
  border-color: #e53e3e;
  animation: shake 0.5s ease-in-out;
}

.form-input.success {
  border-color: #38a169;
}

.error-message {
  color: #e53e3e;
  font-size: 14px;
  margin-top: 6px;
  display: block;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.error-message.show {
  opacity: 1;
  transform: translateY(0);
}

.checkbox-group {
  margin-bottom: 20px;
}

.checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: #4a5568;
  position: relative;
  padding-left: 32px;
  transition: color 0.3s ease;
}

.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  width: 20px;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.checkbox-container:hover .checkmark {
  border-color: #667eea;
}

.checkbox-container input:checked ~ .checkmark {
  background: #667eea;
  border-color: #667eea;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-container input:checked ~ .checkmark:after {
  display: block;
  animation: checkmark 0.3s ease;
}

.submit-button {
  width: 100%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 18px 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  margin-top: 8px;
}

.submit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}

.submit-button:active {
  transform: translateY(0);
}

.submit-button.loading {
  pointer-events: none;
}

.button-text {
  transition: opacity 0.3s ease;
}

.button-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.submit-button.loading .button-text {
  opacity: 0;
}

.submit-button.loading .button-loader {
  opacity: 1;
}

.success-message {
  text-align: center;
  display: none;
  animation: slideUp 0.6s ease;
}

.success-message.show {
  display: block;
}

.success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #38a169, #48bb78);
  border-radius: 50%;
  margin-bottom: 20px;
  color: white;
  animation: bounceIn 0.6s ease;
}

.success-message h2 {
  font-size: 24px;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 8px;
}

.success-message p {
  color: #718096;
  font-size: 16px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

@keyframes checkmark {
  0% {
    transform: rotate(45deg) scale(0);
  }
  100% {
    transform: rotate(45deg) scale(1);
  }
}

@media (max-width: 640px) {
  .subscription-card {
    padding: 32px 24px;
    border-radius: 20px;
  }

.card-header h1 {
    font-size: 24px;
  }

.card-header p {
    font-size: 14px;
  }

.icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }

.form-input {
    padding: 14px 16px;
    font-size: 16px;
  }

.submit-button {
    padding: 16px 20px;
  }
}

@media (max-width: 480px) {
  body {
    padding: 16px;
  }

.subscription-card {
    padding: 24px 20px;
    border-radius: 16px;
  }

.card-header {
    margin-bottom: 24px;
  }

.form-group {
    margin-bottom: 20px;
  }
}

class SubscriptionForm {
  constructor() {
    this.form = document.getElementById('subscriptionForm');
    this.submitButton = document.getElementById('submitButton');
    this.buttonLoader = document.getElementById('buttonLoader');
    this.successMessage = document.getElementById('successMessage');

this.init();
  }

init() {
    this.setupEventListeners();
    this.setupInputAnimations();
  }

setupEventListeners() {
    this.form.addEventListener('submit', (e) => this.handleSubmit(e));

// Real-time validation
    const inputs = this.form.querySelectorAll('.form-input');
    inputs.forEach(input => {
      input.addEventListener('blur', () => this.validateField(input));
      input.addEventListener('input', () => this.clearErrors(input));
    });
  }

setupInputAnimations() {
    const inputs = this.form.querySelectorAll('.form-input');

inputs.forEach(input => {
      // Add focus animations
      input.addEventListener('focus', () => {
        const group = input.closest('.form-group');
        group.style.transform = 'translateY(-2px)';
      });

input.addEventListener('blur', () => {
        const group = input.closest('.form-group');
        group.style.transform = 'translateY(0)';
      });
    });
  }

async handleSubmit(e) {
    e.preventDefault();

if (!this.validateForm()) {
      return;
    }

this.setLoadingState(true);

try {
      // Simulate API call
      await this.submitForm();
      this.showSuccess();
    } catch (error) {
      this.showError('Something went wrong. Please try again.');
    } finally {
      this.setLoadingState(false);
    }
  }

validateForm() {
    const nameInput = document.getElementById('fullName');
    const emailInput = document.getElementById('email');

let isValid = true;

if (!this.validateField(nameInput)) {
      isValid = false;
    }

if (!this.validateField(emailInput)) {
      isValid = false;
    }

return isValid;
  }

validateField(input) {
    const value = input.value.trim();
    const fieldName = input.name;
    let isValid = true;
    let errorMessage = '';

// Clear previous states
    this.clearErrors(input);

switch (fieldName) {
      case 'fullName':
        if (!value) {
          errorMessage = 'Full name is required';
          isValid = false;
        } else if (value.length < 2) {
          errorMessage = 'Name must be at least 2 characters';
          isValid = false;
        } else if (!/^[a-zA-Z\s]+$/.test(value)) {
          errorMessage = 'Name can only contain letters and spaces';
          isValid = false;
        }
        break;

case 'email':
        if (!value) {
          errorMessage = 'Email address is required';
          isValid = false;
        } else if (!this.isValidEmail(value)) {
          errorMessage = 'Please enter a valid email address';
          isValid = false;
        }
        break;
    }

if (!isValid) {
      this.showFieldError(input, errorMessage);
    } else {
      this.showFieldSuccess(input);
    }

return isValid;
  }

isValidEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  }

showFieldError(input, message) {
    input.classList.add('error');
    input.classList.remove('success');

const errorElement = document.getElementById(input.name + 'Error');
    if (errorElement) {
      errorElement.textContent = message;
      errorElement.classList.add('show');
    }

// Add shake animation
    input.style.animation = 'none';
    input.offsetHeight; // Trigger reflow
    input.style.animation = 'shake 0.5s ease-in-out';
  }

showFieldSuccess(input) {
    input.classList.remove('error');
    input.classList.add('success');
  }

clearErrors(input) {
    input.classList.remove('error');

const errorElement = document.getElementById(input.name + 'Error');
    if (errorElement) {
      errorElement.classList.remove('show');
      setTimeout(() => {
        errorElement.textContent = '';
      }, 300);
    }
  }

setLoadingState(loading) {
    if (loading) {
      this.submitButton.classList.add('loading');
      this.submitButton.disabled = true;
    } else {
      this.submitButton.classList.remove('loading');
      this.submitButton.disabled = false;
    }
  }

async submitForm() {
    // Simulate API call delay
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({ success: true });
      }, 2000);
    });
  }

showSuccess() {
    // Hide form with fade out animation
    this.form.style.opacity = '0';
    this.form.style.transform = 'translateY(-20px)';

setTimeout(() => {
      this.form.style.display = 'none';
      this.successMessage.classList.add('show');
    }, 300);
  }

showError(message) {
    // You could implement a toast notification here
    alert(message);
  }
}

// Additional utility functions for enhanced UX
class FormEnhancements {
  constructor() {
    this.init();
  }

init() {
    this.setupFloatingLabels();
    this.setupPasswordToggle();
    this.setupFormProgress();
  }

setupFloatingLabels() {
    const inputs = document.querySelectorAll('.form-input');

inputs.forEach(input => {
      const updateLabel = () => {
        const label = input.previousElementSibling;
        if (input.value || input === document.activeElement) {
          label.style.transform = 'translateY(-20px) scale(0.85)';
          label.style.color = '#667eea';
        } else {
          label.style.transform = 'translateY(0) scale(1)';
          label.style.color = '#4a5568';
        }
      };

input.addEventListener('focus', updateLabel);
      input.addEventListener('blur', updateLabel);
      input.addEventListener('input', updateLabel);

// Initial check
      updateLabel();
    });
  }

setupPasswordToggle() {
    // Future enhancement for password fields
  }

setupFormProgress() {
    const inputs = document.querySelectorAll('.form-input[required]');
    const progressBar = document.createElement('div');
    progressBar.className = 'form-progress';
    progressBar.innerHTML = '<div class="progress-fill"></div>';

const cardHeader = document.querySelector('.card-header');
    cardHeader.appendChild(progressBar);

const updateProgress = () => {
      const filledInputs = Array.from(inputs).filter(input => 
        input.value.trim() !== ''
      );
      const progress = (filledInputs.length / inputs.length) * 100;

const progressFill = progressBar.querySelector('.progress-fill');
      progressFill.style.width = progress + '%';
    };

inputs.forEach(input => {
      input.addEventListener('input', updateProgress);
    });

// Add CSS for progress bar
    const style = document.createElement('style');
    style.textContent = `
      .form-progress {
        width: 100%;
        height: 4px;
        background: #e2e8f0;
        border-radius: 2px;
        margin-top: 16px;
        overflow: hidden;
      }

.progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #667eea, #764ba2);
        border-radius: 2px;
        width: 0%;
        transition: width 0.3s ease;
      }
    `;
    document.head.appendChild(style);
  }
}

// Initialize the application
document.addEventListener('DOMContentLoaded', () => {
  new SubscriptionForm();
  new FormEnhancements();

// Add some entrance animations
  const card = document.querySelector('.subscription-card');
  card.style.opacity = '0';
  card.style.transform = 'translateY(30px)';

setTimeout(() => {
    card.style.transition = 'all 0.6s ease';
    card.style.opacity = '1';
    card.style.transform = 'translateY(0)';
  }, 100);
});

// Add keyboard navigation enhancements
document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && e.target.classList.contains('form-input')) {
    const inputs = Array.from(document.querySelectorAll('.form-input'));
    const currentIndex = inputs.indexOf(e.target);

if (currentIndex < inputs.length - 1) {
      e.preventDefault();
      inputs[currentIndex + 1].focus();
    }
  }
});

Validating your code, please wait...

HTML

CSS