مولد رسائل التنبيه المطور
الأكواد الأساسية لموقعك (تُهَيأ مرة واحدة فقط)
1. تأكد من استدعاء مكتبة الأيقونات Font Awesome ومجموعة خط Changa بداخل وسم <head>:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Changa:wght@400;600;700&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
2. أضف تنسيقات CSS التالية إلى ملف التصميم الرئيسي الخاص بموقعك:
.gmi-alert-message-pro {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
margin-bottom: 20px;
background-color: #ffffff;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
}
.gmi-alert-message-pro:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
.gmi-alert-message-pro .gmi-icon-box {
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #ffffff;
font-size: 1.3rem;
}
.gmi-alert-message-pro p {
margin: 0;
font-weight: 500;
font-size: 0.95rem;
line-height: 1.6;
color: #334155;
}
.gmi-alert-message-pro p strong { font-weight: 700; font-size: 1rem; }
.gmi-alert-info { border-inline-start: 5px solid #0ea5e9; }
.gmi-alert-info .gmi-icon-box { background-color: #0ea5e9; }
.gmi-alert-info p strong { color: #0369a1; }
.gmi-alert-success { border-inline-start: 5px solid #10b981; }
.gmi-alert-success .gmi-icon-box { background-color: #10b981; }
.gmi-alert-success p strong { color: #047857; }
.gmi-alert-warning { border-inline-start: 5px solid #f59e0b; }
.gmi-alert-warning .gmi-icon-box { background-color: #f59e0b; }
.gmi-alert-warning p strong { color: #b45309; }
.gmi-alert-danger { border-inline-start: 5px solid #ef4444; }
.gmi-alert-danger .gmi-icon-box { background-color: #ef4444; }
.gmi-alert-danger p strong { color: #b91c1c; }