Detalii Tehnice

Un sistem de notificări push ultra-ușor, construit în JavaScript pur (Vanilla JS). Folosește pattern-ul de design Singleton pentru a garanta că în aplicația ta există un singur manager de mesaje, evitând duplicarea elementelor în DOM și conflictele de memorie.

Această soluție este ideală pentru dezvoltatorii care au nevoie de un mod elegant de a comunica cu utilizatorul (confirmări de salvare, erori de server sau alerte informative).

Spre deosebire de metodele clasice, acest sistem:

Creează automat containerul HTML la prima utilizare.

Gestionează singur curățarea memoriei prin eliminarea elementelor din DOM după expirarea timpului.

Este imun la erori de instanțiere multiplă (nu poți avea două obiecte "Toast" care să se bată pe același spațiu).

🎨 1. Partea de Stil (CSS)

Acest cod definește aspectul vizual. Este gândit să fie modern, cu colțuri rotunjite și o animație de tip "slide-in" care atrage atenția fără a fi intruzivă.

CSS

🧠 2. Logica Arhitecturală (JavaScript)

Nucleul sistemului. Acesta monitorizează instanța și generează elementele în pagină.

JavaScript

🚀 3. Exemplu de utilizare (HTML)

Copiați acest cod în fișierul de index pentru a vedea sistemul în acțiune.

HTML

<style>#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    padding: 15px 25px;
    border-radius: 8px;
    color: white;
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    cursor: pointer;
    animation: slideIn 0.3s ease-out forwards;
    min-width: 250px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toast-success { background-color: #2ecc71; border-left: 5px solid #27ae60; }
.toast-error { background-color: #e74c3c; border-left: 5px solid #c0392b; }
.toast-info { background-color: #3498db; border-left: 5px solid #2980b9; }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.toast.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
}</style>

<script>class NotificationManager {
    constructor() {
        if (NotificationManager.instance) {
            return NotificationManager.instance;
        }

        this.container = document.createElement('div');
        this.container.id = 'toast-container';
        document.body.appendChild(this.container);

        NotificationManager.instance = this;
    }

    show(message, type = 'info', duration = 3000) {
        const toast = document.createElement('div');
        toast.className = `toast toast-${type}`;
        toast.innerText = message;

        this.container.appendChild(toast);

        setTimeout(() => {
            toast.classList.add('fade-out');
            setTimeout(() => toast.remove(), 500);
        }, duration);

        toast.onclick = () => toast.remove();
    }
}

const Toast = new NotificationManager();
Object.freeze(Toast);</script>

<div class="demo-wrapper" style="text-align: center; margin-top: 50px;">
    <h1>Sistem Notificări</h1>
    <p>Apasă butoanele de mai jos pentru a declanșa alertele:</p>
    
    <button onclick="Toast.show('Date salvate!', 'success')" style="background:#2ecc71; color:white; padding:10px; border:none; cursor:pointer;">Succes</button>
    <button onclick="Toast.show('Eroare server!', 'error')" style="background:#e74c3c; color:white; padding:10px; border:none; cursor:pointer;">Eroare</button>
    <button onclick="Toast.show('Mesaj nou primit.', 'info')" style="background:#3498db; color:white; padding:10px; border:none; cursor:pointer;">Info</button>
</div>

Sistem de Notificări (Toast Notifications)

Detalii Tehnice

Ai Nevoie de Cod Personalizat?