| class CustomNewsletter extends HTMLElement { | |
| constructor() { | |
| super(); | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| background-color: white; | |
| border-radius: 0.5rem; | |
| padding: 2rem; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| } | |
| .newsletter-title { | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| color: #111827; | |
| text-align: center; | |
| } | |
| .newsletter-description { | |
| color: #6b7280; | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| .newsletter-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .form-label { | |
| font-weight: 500; | |
| color: #374151; | |
| } | |
| .form-input { | |
| padding: 0.75rem 1rem; | |
| border: 1px solid #d1d5db; | |
| border-radius: 0.375rem; | |
| font-size: 1rem; | |
| transition: border-color 0.3s; | |
| } | |
| .form-input:focus { | |
| outline: none; | |
| border-color: #4f46e5; | |
| } | |
| .submit-btn { | |
| background-color: #4f46e5; | |
| color: white; | |
| padding: 0.75rem 1rem; | |
| border: none; | |
| border-radius: 0.375rem; | |
| font-size: 1rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } |