add contact details on frontend

src/public/css/seca.css

@@ -0,0 +1,6 @@
+.badge {
+    border: 2px solid black;
+    border-radius: 10px;
+    margin: 5px;
+    padding: 5px;
+}

src/public/javascript/createProfile.js

@@ -0,0 +1,28 @@
+const contactDetails = [];
+
+window.onload = () => {
+    const contactList = document.querySelector('.contact-list');
+
+    document.querySelectorAll('.contact-detail-add-button').forEach(button => {
+        button.addEventListener('click', function () {
+            const badge = this.parentElement;
+            const type = badge.getAttribute('data-type');
+            const input = badge.querySelector('input');
+            const value = input.value.trim();
+
+            if (value === '') return; // Ignore empty input
+
+            // Save new contact detail
+            contactDetails.push({ type, value });
+
+            // Create and display a non-editable badge
+            const newBadge = document.createElement('div');
+            newBadge.classList.add('contact-badge');
+            newBadge.innerText = `${type}: ${value}`;
+            contactList.appendChild(newBadge);
+
+            // Clear input field
+            input.value = '';
+        });
+    });
+};

src/views/createProfile.ejs

@@ -5,6 +5,7 @@
     <title>Crear perfil</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/css/seca.css">
     <script src="/javascript/createProfile.js"></script>
 </head>
 
@@ -13,6 +14,38 @@
     <p>Tu clave de Nostr ya es parte de la seca.</p>
     <p>Añade detalles a tu perfil para poder empezar a comerciar.</p>
     </p>
+    <hr>
+    <form onsubmit="return false">
+        <label>Pseudónimo (Nym):<input type="text" name="nym" id="nym-input"></label>
+
+        <button id="submit-details-button" type="submit">Crear tu perfil</button>
+        <div id="contacts">
+            <p>Añade métodos de contacto para poder hablar con otros miembros.</p>
+            <div class="badges">
+                <div class="badge" data-type="whatsapp">📱 Teléfono <input><button
+                        class="contact-detail-add-button">Añadir</button></div>
+                <div class="badge" data-type="whatsapp">📱 WhatsApp <input><button
+                        class="contact-detail-add-button">Añadir</button></div>
+                <div class="badge" data-type="telegram">📩 Telegram <input><button
+                        class="contact-detail-add-button"></button>>Añadir</button></div>
+                <div class="badge" data-type="email">📧 Email <input><button
+                        class="contact-detail-add-button">Añadir</button></div>
+                <div class="badge" data-type="nostr">📧 Nostr <input><button
+                        class="contact-detail-add-button">Añadir</button></div>
+                <div class="badge" data-type="signal">📧 Signal <input><button
+                        class="contact-detail-add-button">Añadir</button></div>
+                <div class="badge" data-type="matrix">📧 Matrix <input><button
+                        class="contact-detail-add-button">Añadir</button></div>
+                <div class="badge" data-type="xmpp">📧 XMPP <input><button
+                        class="contact-detail-add-button">Añadir</button></div>
+                <div class="badge" data-type="simplex">📧 Simplex <input><button
+                        class="contact-detail-add-button">Añadir</button></div>
+            </div>
+        </div>
+        <div class="contact-list">
+            <p>Contactos añadidos</p>
+        </div>
+    </form>
 </body>
 
 </html>